In today’s dynamic and digital world, user experience has become a fundamental aspect of business success. In this article, we unfold a fascinating success story about UX mentoring, narrating the collaboration between our Estudio and a prestigious Development Bank. Through this partnership, we addressed the challenge of revitalizing the usability and visual consistency of the bank’s website.
This narrative is not only a chronicle of a UX project, but also a window into the methodology and strategy behind the success. We will break down the project into three key phases: from initial strategic definition to final analysis and design, highlighting how each stage contributed to a comprehensive solution that transcends convention. Our team of experienced UX Researchers was immersed in each phase, ensuring a customized and meticulous approach for this client.
The challenge was clear: to design a user experience that not only met usability and accessibility standards, but also resonated with the Bank’s identity and objectives. We approached this challenge with a multidimensional approach, ranging from information architecture to content strategy, all under the prism of simplicity and usability.
Throughout this article, we will unravel the details of this exciting UX journey, revealing how the Bank’s goals were transformed into a refined and accessible digital reality.
UX mentoring project introduction
A Development Bank proposed us a collaboration for UX mentoring, which focused on the process of analyzing and improving the usability and visual consistency of their website.
This UX mentoring was structured in three phases: a first phase of kick-off and strategic definition; a second phase of analysis, aimed at grounding the conclusions of the kick-off in different actions (expert analysis and accessibility); and a third phase of design, from an information architecture, strategy and content design perspective.
The duration of this project was three months. A research team composed of four UX Researchers was involved throughout all phases of the project.
Problem / challenge
The main challenge of the project in this UX support was to design a customized and specialized service that would accompany the Development Bank in the process of improving the usability and user experience of the website, with a clear focus on usability and user-friendliness in all the assets of the portal.
The main objectives in this project were to define a usability strategy, ensure accessibility, design an efficient information architecture, optimize content strategy and design, and prioritize user satisfaction to improve the experience on the Development Bank’s website, emphasizing simplicity and usability.
In the kickoff session with stakeholders, the main objectives of the organization and of the project were deepened, which were based on making improvements to meet basic UX standards, in order to increase the visibility and understanding of what the organization does. The idea was to connect this project with three aspects to be strengthened:
- Brand identity, what and who the Bank is
- Knowledge and reason for the Bank’s existence
The session defined the organization’s competitors, as well as the company’s market positioning and target audience. On the other hand, we also defined the specific objectives of the website, which included increasing brand awareness, improving transparency, publicizing the bank’s products and making the general public understand how the projects benefit them.
Research and discovery
Expert web analysis
The research phase began with the realization of an expert analysis of the website of the Development Bank, with the objective of finding the best practices, as well as the weaknesses that from a usability and UX perspective were present in the current digital product. In relation to this, it was proposed to perform this analysis that would return valuable information of deficiencies and possible improvements in that context for all key processes.
This analysis was the simplest and quickest way to obtain a working basis from which to know the improvements to be made in the digital product, both in the alignment between product and users and in terms of usability, in other words, the difficulty of use and the use of mental models of users and design patterns in the digital product.
Initially, in the UX accompaniment, an analysis of the Home page of the website was carried out, since it contained most of the relevant information that required review. Subsequently, the remaining pages of the menus accessible directly from the home page were evaluated. Most of the pages were analyzed using the public content that was visible on the website, while some of them were evaluated according to the templates under development, which were soon to be implemented.
An audit of the portal was conducted, including automatic evaluation and manual review, to ensure compliance levels with WCAG (Web Content Accessibility Guidelines) recommendations. The audit was developed around the principles, guidelines, compliance criteria and sufficient and recommended techniques established in its guidance levels.
In this analysis of the UX accompaniment, the points to improve were highlighted, as well as the indications to ensure compliance levels with the WCAG recommendations with the objective of guaranteeing equal access to the site’s information, improving the user experience from very different contexts of use, and creating a positive impact on the brand.
To perform the accessibility analysis we used the same sample of pages used in the previous expert analysis using the following tools:
- Graphic browsers. We use two automatic evaluation tools (TAW and WAVE).
- Screen readers. With which we detect unlabeled or incorrectly labeled content (VoiceOver and NVDA).
- Text-only browser. We reviewed the availability and order of the information, examining the structure and content without visual distractions. We verified, among other elements, the coherence and logic of the content structure, links, headers and lists (Links).
In addition to the use of these tools, a manual review of the sample was performed to identify other possible accessibility problems.
Information architecture analysis
During the UX accompaniment, we organized and structured the contents of the site in such a way that the user can navigate through it easily, simplifying navigation and improving the location of the contents.
Two techniques (Tree Test and Card Sorting) were used to achieve an information architecture as suitable as possible to the users’ needs. The combination of both allowed us to obtain an optimized content map of the portal, which describes the potential information architecture proposal.
With the Tree Test technique, we were able to check if our users understand the labeling (or nomenclature) we use in the contents and how they order them in a natural way.
For the development of the technique in the UX accompaniment, a list of 11 tasks was generated with different situations that were presented to the users, requesting details about where they would look for the mentioned information.
Of all the tasks completed, only 32% were solved correctly. This average across all tasks suggested that the information architecture could be considered confusing.
By implementing this technique in UX mentoring, we achieve an improvement in the hierarchical organization of content.
A hybrid Card Sorting was developed, which included a set of 30 cards that users had to sort into 8 categories, corresponding to the menu options on the page. This hybrid approach allowed users to create their own groups if they felt that any card did not fit into any predefined category.
Significant findings were identified that highlight the need to modify the labels of certain menu items to make them more understandable. On the other hand, it was observed that the presence of repeated words in two of the items, as well as similarities in the labels, could be contributing to the grouping of unrelated items.
Throughout the project, fluid and constant communication was maintained with the client’s team through e-mail and meetings every other week to present the results of the different phases of the project and facilitate the deliverables.
As there were several people involved in the project on both sides, communication was facilitated with the creation of a Slack channel to ensure that everyone had access to information on actions and issues that needed to be addressed at all times.
Before starting the analysis, the client provided a list of pages and templates to be analyzed along with their strategic value, which allowed us to focus directly on this information and start the expert analysis and the following phases of the project.
Each task and phase of the UX mentoring project was carried out in an iterative manner, which means that when one of them was completed, the next step was initiated, continuing in this way until the project was completed.
If you’re looking to improve your UX career, we invite you to explore our International UX-PM Certification on our UX Learn training platform. This certification is your key to advanced knowledge, practical skills and the opportunity to be part of a global community of UX professionals. (This training is in Spanish)
Discover, learn and lead the future of user experience!
This is a translation of the following article from our corporate website: