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.
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.
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.
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:
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.
What we tried to do was thinking information in just some essential pages.
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
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.
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.
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.
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.
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.
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.
See more at farolsantander.com.br (it can be a little different than what we created, but, well... it happens).