Website Redesign—Banco Santander Rio

How a great team, great ideas and significant testing led to a successful redesign of an enormous website.

Client: Agencia Mundo Buenos Aires
Date: August 30, 2013
Services: Website redesign, User Experience, Project Management

01. The Situation

Santander Río is one of the most important banks in Argentina, with more than 2.5 million active clients and more than 300 branches throughout the country. A few years ago, the advertising agency Mundo Buenos Aires contacted me to help them define and develop a redesign project for the bank.

The bank’s previous site, online since 2007, had many usability problems related to a lack of content hierarchization, which made searching for products quite difficult. At the same time, the technology being used to maintain the platform had become obsolete, creating headaches when trying to add to or update existing content.

¿Cuál fue mi rol en el proyecto?

Information Architecture

I created wireframes prototypes which were included in each page utilized in the project, and which were totally navigable in Axure; these were subsequently used in the design and interface development.

User Research

I organized user-tests and focus groups, then analyzed the data gleaned from them in order to apply changes to the interface.

Project Management

I planned, recruited and led the team that made the project a reality, from initial research to CMS integration.

02. How was the process?

Benchmark, Mapping and the Initial Wireframes

The first step was to generate a benchmark of local and foreign competitors, so that we had a global vision of what other banks were doing with their websites. I analyzed more than 50 competitors in the Americas, Europe and Asia and organized those Best Practices I witnessed in a document that I then shared with the client. This served as a basis for the initial meetings where we worked to define the scope of the project.

I worked in parallel on inventorying each page of the previous site, so as to have a general idea of the site’s navigation. I then proposed a new, more ordered, more hierarchically clear structure.

Having gained approval for this new organizational tree, I organized the more than 450 pages that the new website would need into 22 templates which my team and I would have to design, lay out and integrate, using the IBM WebSphere Portal platform.

Information Architecture and Contents

After the project planning, I created wireframes for 22 pre-defined templates, documenting, in detail, all content elements that could be updated by the administrator (titles, paragraphs, lists, images, etc.). This documentation was vital in allowing the developers to start building the application’s back-end and so that, for its part, the content agency could also work on the necessary texts without having to wait for the site to be fully constructed. In this way we were able to continue trying out and improving the content at the same time as the back-end was being developed.

Detalle de los wireframes que creé para el proyecto

Interface Design

Once we had the first wireframes approved, we began the process of designing a new interface for the bank. This part of the development process proved slower and more difficult, since without intending to, we began drifting further from the expectations and demands of our client, in terms of design. The bank continued to reject our proposals and both team morale and our relationship with the client began to wane. In the face of this crisis, we decided to go in a new direction, adding a local agency, Ego, who had done a excellent job interpreting the wireframes we’d given to them.

With this fresh perspective and the models ready, we began the user-testing process to ensure our efforts, design and development were on track.

Algunas de las (sin exagerar) 50 versiones de diseño que hicimos del home del banco
Diseño final de la Agencia Ego para el proyecto de Santander Rio

Focus Groups and User-tests

In order to ensure our work had been satisfactory, once the main pages were designed we organized methods for collecting feedback from the bank’s clients.

The first was a series of focus groups designed to register clients’ and non-clients’ impressions and expectations about the bank’s website redesign. We also showed them new designs and collected feedback about that.

A second method used to investigate the effectiveness of our interfaces was to conduct user-testing sessions, evaluating usability and expectations on the part of the bank’s clients. To achieve this, we created a navigable prototype using the fluid-task principles we wanted to test, such as opening an account, searching for nearby branches, and simulating a line of credit, among others. We asked ten clients to attempt these tasks, observing whether they were able to and how natural the process was. Afterwards, we organized our findings and potential improvements in a document that we shared with our client and in which we updated graphics according to the tasks we had narrowed down for improvement.

With these corrections and visual improvements in hand, we were ready to build the model’s front-end.

Detalle de la presentación de resultados de los focus groups y test de usuarios que hicimos para Santander

Construction, Integration with WebSphere Portal and Content Filling

Once the design templates had been tested and corrected, the Deletec guys began building the front-end templates which would be integrated into the WebSphere Portal. Because the client we were designing for was a bank, this resulted in many months of intense work in which we found ourselves confronting diverse technological and data security challenges. It was a lengthy but educational experience.

While the templates were being integrated and in order to take advantage of the time we were taking bringing the site to production, we decided to use the administration panel to populate the site, using the contents the agency Soup Interactive had created. It was a very challenging, large-scale process, considering how complicated the platform we were working with was, not to mention the 400 pages still waiting to be populated.

Once the process of uploading content was completed, the project passed into the hands of the bank’s internal teams, who carried out all necessary tests before the new site launched.

The new Santander Río website has been, without a doubt, the largest project I’ve confronted in my career. What started as support for the agency’s team in Ux and Architecture Information, ended up with me living in Buenos Aires so I could put myself in charge of the direction of the entire project and to create a network of providers and freelancers who helped us carry out the redesign—a redesign which, in the end, was a great success

03. Tech Roster

During the almost two years that I was bound up in this project, I met incredible professionals who were fundamental in the project’s ultimate success. I could not end this case summary without thanking the following:

  • Gonzalo Vidal, Partner, Mundo Buenos Aires.
  • Santi Risco, Partner, Deletec; Lead Developer.
  • Iair Rozen, my tech counterpart in this challenge.
  • Agustín and Ricardo, Partners, Ego; within two weeks they had made and gotten approved designs which we as a team could not convince the bank to approve in six months.
  • Román and Marina Taliberto, from Soup.
  • Roberto Vaucourbeil, Head of user research, for setting me straight innumerable times with his experience and professionalism.
  • Marcelo, Meche and María for their patience while uploading the content, field by field, for the more than 400 pages which make up the site.

Alejandro Toso, who took up the baton for the project’s final sprint.

¿Tienes un proyecto similar? Contáctame!