Bank portals system

The project

This project was born from a Discovery and research process within the Bank. It was focused mainly on strategy definition. We work with several areas of the Bank and carried out several workshops and ideation processes. After a two weeks of workshops and analysis, several areas of work were defined and the team was divided between Service Design and User Experience. I was part of the User Experience team that designed all the portals.

The problem

The Bank was divided in several areas. Each area had its own website, suppliers and outsourced the design. So, websites only share the logo and some colours but nothing else. Some of them were responsible sites, some were not. They had different layouts, used different fonts, sizes and types of images.  However the biggest problem was that it was not clear what was the main purpose of each one. Therefore, they not only looked like different brands but they were also developed with different technologies. Also non of the sites were measure correctly, so we did not have proper data to analyse.

The approach

We carries out user tests and interviewed stakeholders to define a User Experience Strategy, types of users and journey maps.

 

Overall, we proposed two types of navigation:

  • A search engine such that allowed quick access to specific content.

  • A traditional navigation with a menu. In the tests, 90% of the users used the search engine to find the contents.

 

I decided to make an heuristic analysis through all the Portals and a diagnosis of the information architecture, navigability and accessibility and then we set the main pain points to focus on:

  • INCONSISTENCY IN IDENTITY

  • LACK OF COHERENCE 

  • FRAGMENTED EXPERIENCE

  • NON-INTUITIVE USABILITY.

This was the type of site map that they had.

This was the site map that I proposed for the main website.

The proposal was to create a system for all portals.

Defining a search engine was one of the most interesting things of this project. On one side because we were going to be able to measure different types of behaviours and on the other side, we were going to obtain a lot of data.

Home page for the main portal.

Mobile Home page for the main portal.

Mobile Home page for the discounts website.

After some research we defined users for all the portals and we found out a common thing was that Customer Service was answering on the phone questions that were answered on the portals but were hard to find. But what we also discovered was that users wanted assistance. When the users were just looking for information or not stressed because of a problem they preferred a chat over a phone conversation. That's why we decided to use a chatbot that was able to redirect the conversation to a live chat. 

We created a character and a personality for each portal. According to the type of user and objectives of the portal, each chatbot had a different avatar and voice.

One of the other things that we found out was that most of the users wanted to get their cards online. As it was not possible to acquire the card online, we designed a flow to get a quote, choose and option and make a request. Creating a system and reusing components was one of the main goals of this project. That's why I used the same patterns and designed components that could be used for different portals. 

What I learnt 

  • To always map the process. This was a very complex and long work and there are many files, highlights and insights that I've lost after delivering the project. This was also the beginning of a much bigger project and we set the basis for all the development process. 

  • Don't make users learn new things when thy don't need too. All user (from user tests) preferred to use the search engine over the menue. None of them asked how to use it or even hesitated and everyone felt that the interaction was -natural-. In the same way that maintaining the layout and reusing components allowed users to move from one site to another without having to think or waste time decoding how to solve a basic task.

  • Icono negro LinkedIn
  • Icono negro Tumblr
  • Icono negro Vimeo