Farol Santander

Closed for years, Sao Paulo had a building connected to its own story: Altino Arantes Building. Reopened with a new name, Farol Santander needed a website that could reflect that story and also show that new things would shine there.

Some screens of the User Interface

The history behind

For years, Altino Arantes Building was known as "Banespão", because it was property of Banespa Bank. The tower was inspired on Empire State Building, and it was the tallest tower from Sao Paulo when it was inaugurated.

When Santander Group bought Banespa bank, the building's property went to Santander. It became a museum, where you could see many pieces from the history of the building.

In 2017, Santander announced that the tower was being reformed to turn into the new Farol Santander, a place where you could revisit the history of the building and the city and at the same time, participate in workshops and speeches about important topics from the present. Basically, a place where you can find the past, the present and the future.

Picture from Altino Arantes Building, the new Farol Santander
Altino Arantes Building, the new Farol Santander. Picture from Leo Martins / Source: Veja SP

The challenge

Our goal was creating a website to the new building.

The biggest challenge was (in a philosophical thought) the history of the building itself and what it represents to many people. It was a big project and every decision would impact lots of people.

Also, it was very important to explain that, besides all of the history, the building now would assume a new value to the city: a place where you can have important discussions about the current society and talk about topics like sports, culture, entrepreneurship etc.

Picture from the tower's hall. There is a luxurious and huge chandelier, with big columns near it.
Imagine how much it costs. Or better not. Source: Wikipedia

My role

I worked on this project as an UX/UI Designer. I worked on the whole project, from the first scratches to the follow-up with the developers.

Starting with a discussion

With the expectations aligned with the client, we started thinking about the way people would go to Farol Santander. In Brazil, most people don't go to the museum regularly.

As Farol Santander would be a museum, but also a place where you could go to different events, we distinguished our public in two different ones:

  1. People who wants to visit Farol Santander because of its history, without caring a lot about what is being exhibited there. The only thing that they mind about is the day. Those people are usually first time visitors and tourists from other cities or states.
  2. People attracted by an exhibition or event happening at Farol Santander. To them, the only thing that matters is what they are willing to see there. First, they look for what they want to see and after they choose the day they're going to visit.
Screenshots from three museum websites: MIS, Louvre and British Museum.
Beautiful, but not the way we were aiming to show content.

Why so many menu itens?

When we started thinking about the information architecture, we followed through a normal path: looking to other museum's websites.

Even though some of them are great, most of them just are too much complex. They prioritize beauty over information.

What we wanted for our website was that people could find information easily, and, if they want, read the content in a comfortable way.

Information architecture from the project. It is detailed untill the features, not only the pages.
First version of information architecture, detailed with the features.

What we tried to do was thinking information in just some essential pages.

  1. The page "Plan your trip" would include the most important informations that the person should know before visit Farol Santander, like how to get there, tickets, operating hours etc.
  2. The page "programming" would be separated into two tabs: by day and by event, to meet our public, as I explained before.

Bonus feature (?)

There were things in this project that overcome a usual one. For example, in partnership with Airbnb, a common person could sleep at Farol Santander, in one of its floors. I learned during some projects that there are things that we can't argue about, so better obey. It wouldn't disturb the experience on the website.

I just saw these days that the listing is not available anymore on Airbnb. Probably it was too expensive for a normal person to host there :P

First designs

After discussing about what we studied, we started designing the website. We weren't so worried about the visual at this time, as the most important thing to define was the way things should be organized.

We didn't want to create low-fidelity wireframes, because we had to present something more high-fidelity to the client at that point. As we received a beta version of Farol Santander's identity (done by another company), we tried to apply it to the website.

Gif showing some interactions on the first designs of the website.
Simple animation created to show some designed interactions.

We tried to organize information in a way that people could find what they were looking for. Inside the page of an event, for example, we grouped the first block of information with tittle, small description, operating hours and dates, share buttons and, obviously, a button to buy the tickets. Just after those important informations, we showed more descriptions, photos and important topics.

At that point, we were thinking about something like "Explore the Farol", with more interactive options about its history. Later, we had to put this feature aside, because of priorities and schedule.

The first page, that worked as a "Welcome Screen" on the first sketches, was deleted from the project, as we didn't see a real need for it.

A brief story about methodology

Notice that this project didn't follow a regular path, with wireframes before the interface. Methodology should be defined after studying the project's context, and not the contrary.

That's why we chose to follow a faster methodology, without wireframes. Knowing our client, we assumed that they would want to see a visually inspiring deliverable, or we wouldn't be allowed to continue with the project.

Refining the edges

After presenting the first designs, we started to refine some points that we could improve.

The first one was the fact that we weren't exploring the building's image enough. Also, the first information that we wanted people to see was the operating hours and a welcome message.

The call-to-action was not comfortable to be clicked with the pointer, because it was very small. We tested it in many ways, with different sizes and colors.

Three screens showing different ways of working with the CTA. The first one is an outline golden button, the second one an outline white button and the third one an outline red button.

The last deliver

After changing everything we wanted, we created a prototype with Invision. We did it because our deliverable would go through many people in Santander. It worked well, because many doubts about the flow could be easily solved during the experience of evaluating the interface.

Screen from the homepage of the site.
Check the complete prototype on Invision

Lessons learned

The major challenge on this project was the high number of people involved. There is a big sense of hierarchy in traditional companies like Santander, and it causes a difficult time approving some deliverables.

Sometimes, it takes longer than it should to go through the next stages of the project because we get stuck in bureaucracy problems. Because of this, we have to be smart enough to create workflows that doesn't depend on the client side.

On the media

Farol Santander, antigo prédio do Banespa, é aberto para visitação nesta sexta em SP

Mostra no Farol Santander tem obra imersiva com vista para São Paulo

Visitamos o novo Farol Santander e encontramos história, arte e skate

Catraca Livre:
Farol Santander tem mirante com café, mostras e pista de skate

See it live

See more at farolsantander.com.br (it can be a little different than what we created, but, well... it happens).

Other projects

illustration of a person doing an usability test


Creating a gamified platform.

illustration of some Santander Academics Game's screens

Academicxs II

Taking students abroad.