GP Website

Grupo Petersen is a group of Argentine companies with a great presence in the country. They own four strong regional banks from different Argentine provinces: Santa Fe, Entre Ríos, Santa Cruz and San Juan. Our job was to re-design the consultative websites all four banks, improving and unifying the UX and making them follow the same structure and logic. In addition, this new website needed to work in a CMS (content management system), so the approach of the design was not executed by landings or sections, but rather by components.

Goals

For this project, the client wanted us to improve or accomplish the following:

• Rethink the user experience in order to be more intuitive and straightforward.
• Generate a new scalable architecture, capable of evolving over time.
• Design a simple, clean and modular UI that works for all four banks.
• Bring forward all the conversion points.

Immersion

For this first sprint, we dedicated 2 weeks to research, troubleshooting and data analysis. We started by studying the main competitors so as to understand how they show banking information and to identify best practices and pain points. Also, we chose to start working on the Bank of Santa Fe so as to later replicate the new UX for the other three banks.  We conducted a troubleshoot for the whole site looking for possible friction points in the user experience. Finally, we had access to the Bank’s Google Analytics and we went over all this thick data in order to understand the kind of user we are designing for. We collected primary information such as age range, gender, location and more specific info such as devices, breakpoints, resolutions, OS and most visited pages. 

All this information let us reach the following insights: 

• The two main segments are Individuals and Businesses.
• Use the homepage for attracting new users, by showing them the value proposition and starred products.
• Existing clients don’t use this site because they already have a product or a service, so they go directly to Home Banking for managing their account.
• Upselling or new product request for existing clients can be done through Home Banking so the new site must speak entirely to new users. 
• Use a simple and contemporary look & feel. 
• The tone should be friendly and clear.
• Improve the navigability by cleaning the nav bar, adding breadcrumbs and back to top button.
• Identify the most important points of conversion and bring them forward. 
• CTA wording must be clear.
  

With this in mind, now we can start to make decisions based on real data. 

‍

Architecture

For the second sprint, we started to analyse the current architecture and sitemap of the Bank of Santa Fe, in order to understand all their levels of information, to identify where the points of conversion were (where users can become customers) and to find duplicated or unnecessary information that could be contaminating the site. This is the part where post-its enter the stage! 😄

So, with the goals in mind (simple and scalable) the new architecture must bring forward all the banking products and services, aiming to rapidly show the user what they have access to. Also, it must be able to grow with time without coming apart or becoming difficult to understand. 

‍

Card Sorting

As a very useful activity, we flew to Entre Ríos to make a Card Sorting test with 5 real users. This helped us to understand user's mental maps by showing us how they would organise every product or service in different columns. This made us understand what the users would expect when entering a banking website.

With all these new insights, we generated an architecture that divides users in the already mentioned main targets (Individuals and Business), and then, once users identify themselves, the nav bar instantly shows all the bank products and services. Inside every product or service landing, users will find all the relevant information they need.

‍

Wireframes

We started creating different structures so as to show all the banking information they need to display. The main components we started to sketch were meant to show the current products and services that were published on the old website.

‍

UI Components & Styleguide

With the wireframes on hand, we started to add colours, typography and shapes to them so as to apply the UI and start to decide how the graphic resources and guidelines would be.

‍

Landings

While creating and iterating every component, we constantly needed to visualise each one in a landing so as to understand if they could live together in a proper way, and also if they were telling a story that would help users understand the whole product or service and eventually make them convert. This also helped us show the client how to use them in the future every time they created a new landing within the CMS.

‍

Check out the 4 Banks websites! 

🟢 Bank of Santa Fe

🔴 Bank of Entre Ríos

🔵 Bank of Santa Cruz

🟡 Bank of San Juan

‍

Did you like it?

Please give me some love in my Dribbble shot for this project! 🙏

‍

Thanks for viewing! ✨