Claudio Merino
UX design / Strategy & Research
Made with

Santander Rio. Website's redesign

User research / Information Architecture / Project management

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.

My role in the project:

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.

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, layout 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.

Santander Rio. Website's redesign

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 an 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.

Final design made by the design studio Ego

Final design made by the design studio Ego

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.

Santander Rio. Website's redesign

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.

What did I learn?

The new Santander Río website was my first big project I’ve confronted by myself. 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 lead 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