Final design made by the design studio Ego
Santander Rio. Website's redesign
User research / Information Architecture / Project management
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 tricky. 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 included in each page utilized in the project, which was 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 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.
Benchmark, Mapping, and the Initial Wireframes
The first step was to generate a benchmark of local and foreign competitors to have 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 project's scope.
I worked in parallel on inventorying each page of the previous site 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. 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. So that, for its part, the content agency could also work on the necessary texts without waiting for the site to be entirely constructed. In this way, we were able to continue trying out and improving the content simultaneously as the back-end was being developed.
Once we had the first wireframes approved, we began designing a new interface for the bank. This part of the development process proved slower and more complex since, without intending to, we started 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.
Focus Groups and User-tests
To ensure our work was 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 them.
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 could and how natural the process was. Afterward, 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.
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, 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 long but educational experience.
While the templates were being integrated and taking 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 agency Soup Interactive's contents. 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.