Increasing web traffic and cross-browsing for online banking
Recently at Torresburriel Estudio, we had the opportunity to work on a key project in online banking (see also: UX Mentoring of a Development Bank). Our mission was to address and enhance the user experience on the website of a prominent asset management and capital markets firm.
This project challenged us to optimize essential aspects such as navigability, design, and SEO effectiveness. Through our expertise and a meticulous approach, we focused on renewing our client’s digital presentation, with special attention to design consistency and intuitive user interaction.
Our goal was clear: to improve our client’s digital interface, making it more accessible and appealing to their users.
What challenge were we facing with this online banking project?
This project centered on an online banking company with extensive experience in asset management and capital markets. It offers banking services to its clients, from payroll domiciliation and transfers to using both credit and debit cards physically or through a wallet, and even educates on how to invest money safely.
The metrics don’t lie
After a thorough analysis, we discovered that over 50% of the website’s online banking traffic came from SEO and the page view index was less than 2%.
Furthermore, there was a lack of continuity in the pages entered. This meant that users were not navigating between pages to discover more content and information.
Design inconsistency
We analyzed the elements of their component library and the current design on their online banking webpage, aiming to identify potential gaps and areas for improvement.
We found certain design inconsistencies. The calls to action were hard to identify, with a lot of clickable content going unnoticed. Moreover, the most relevant information was at the end of the page, and there were no elements that encouraged exploration of new content.
Improvement goals after analysis
Considering the problems we detected, these were the improvement objectives we set for the online banking project:
- Increase the index of pages viewed per session.
- Reduce the bounce rate.
- Ensure users find what they are looking for and generate curiosity to know more content, creating a consistent and intuitive design.
How did we achieve our improvement objectives?
Deeper analysis of pain points in their Design System and content structure
We conducted an in-depth study of all elements of their design system:
- Highlighting the weak points of each element.
- Examining use cases and noting improvement needs.
- Reviewing the content structure on the current page.
In the project’s discovery phase, we immersed ourselves in a stage of deep introspection and analysis. This process was crucial in identifying critical areas that needed attention.
Our team focused on breaking down each component of the online banking website’s design system and its content structure. By doing so, we were able to unravel a series of significant findings that were fundamental in understanding the challenges we faced.
Here are our discoveries:
- Calls to action that went unnoticed and inconsistencies in sizes and color use in components with the same goal.
- We identified room for improvement in the general structures and saw that information could be arranged in a way that was easier for users to understand. Also, there were no elements that encouraged the exploration of new content (such as links to other related pages).
- Lack of elements informing the user where they were or what they could find on each page (no breadcrumbs or the navigation menu did not highlight where the user was).
- Texts with very technical information, making it difficult to understand.
- Important elements, such as newsletter subscription or the trial of the service they offer, were placed at the end of the page.
- The design on mobile was very compact and difficult to read.
Applying improvements based on found pain points
After analyzing the pain points found in both the design system and the current structure, we noted improvements to be made in the components and the structure of each page, as well as in the navigation between them. The solutions we proposed for these three fundamental blocks were:
- Improve components to maintain consistency, comply with color contrasts, inform the user of how they should be used and what to expect when interacting with them.
- Design a consistent format of links and calls to action that help the user predict what will happen before clicking.
- Define an information architecture to improve transversal navigation through the use of links to pages and recommendation of related news.
- Offer a breadcrumb navigation system so that the user knows where they are at all times.
- Use clear and precise language to improve the understanding of the information provided on the web.
- Place the most important elements or blocks at the top of each screen.
- Create a structure with enough white space so that each block is easy to identify. We also improved the table system to facilitate comparison between elements independently (especially for the mobile version).
Weekly meetings with the client to review improvements
Effective collaboration with our client is essential to ensure that project expectations are met and that the final result is satisfactory.
- Initially, we had a detailed conversation with the client to understand their objectives, vision, and requirements for their online banking product.
- We then set clear goals for the project from the start and ensured that both parties were aligned in terms of expected outcomes and delivery timelines.
- We conducted weekly meetings that included progress in design and next steps, as well as addressing any arising questions.
Redesigning several pages with applied improvements and delivery of designs
Once we completed the design system, we redesigned the most important pages, applying the improvements we offered for each of the pain points found.
We created a prototype comparing the current page with the new design to facilitate contrasting between the two options.
Conclusion
The creation of a more organized new structure, a more consistent design system, and clearer language will help the user:
- Better understand the information.
- Discover more content and learn more about investment systems.
- Receive help in making decisions related to their capital.
And with these improvements, we will achieve the objectives of:
- Increasing transversal navigation between pages.
- Increasing the number of newsletter subscriptions and requests for more information.
- Increasing the number of users who trust the website.
In concluding this project, we achieved more than just meeting our initial objectives. We set a new standard on our client’s website, significantly enhancing user interaction and experience. Implementing solutions like more intuitive navigation and accessible content has strengthened trust in the platform.
This is a translation of the following article from our corporate website:
