Project overview
Redesign of Atom bank’s intermediaries' website for improved usability and visual consistency through rebranding, design system integration, and user-centric improvements.
Atom bank is a digital-only bank based in the United Kingdom. They offer a range of financial products, including savings accounts and mortgages. Atom also provides mortgage products for intermediaries (brokers) who can access their mortgage products as well as other information through an intermediary website, separate to their primary Atom bank website.
Tags
Data Analysis, Competitor Research, User Testing, Stakeholder Engagement, Information Architecture, Rebrand, Design System
Tools used
Figma, FigJam, Adobe CC, Userzoom, Slack, Google Workspace, Google Meet
Project roles
I lead the design aspect of this project in my role as UX Designer which included Website Analysis, Stakeholder Engagement, Competitor Analysis, Testing, Rebranding and Design system integration.
Additional roles included various Business Development Managers to relay broker feedback directly from the brokers, the Visual Design team for final design elements such as incorporating imagery, a Digital Marketing Manager and a B2B Marketing Manager tasked with project launch and objective-setting, an SEO specialist, a Copywriter, and the Web Development Team. Several other stakeholders oversaw the project, ensuring adherence to company policies, procedures, and guidelines.
Design process
I implemented the following design process to enhance efficiency, promote teamwork, and maintain consistency across the project.
Stage 1: Plan
1. Problem statement
Brokers using the current Atom intermediaries site (currently named “Digital Mortgages with Atom”) are encountering challenges in accessing information due to poor usability, an unsatisfactory user experience, and an unclear navigational structure. Brokers and internal staff have also raised issues regarding the website's inconsistent and outdated visuals.
2. Problem solution
I'll address these issues by:
-
Utilising up-to-date analytical data to prioritise and optimise critical areas of the website and identify high-impact pages and functionalities through user engagement metrics.
-
Engaging with stakeholders throughout and gathering feedback from teams in direct contact with brokers to understand their preferences, pain points, and expectations.
-
Analysing competitor sites from other well-known banks to identify trends and best practices in the industry. I'll then implement insights gathered from this analysis to stay current and competitive in the financial services sector.
-
Conducting testing to identify and address navigational challenges.
-
Creating a comprehensive site map based on findings from Website Analysis, Stakeholder Engagement, Competitor Analysis and Testing. This will ensure an organised and user-friendly structure.
-
Initiating a rebranding effort for the intermediaries' website, aligning it with the established brand guidelines of Atom’s main website to ensure a cohesive and recognisable identity. To do this, I'll need to incorporate existing components from the main website's design system and create new ones as needed, maintaining visual consistency.
3. Limitations
I anticipate the following limitations:
-
In the past, gathering substantial feedback from both new and existing brokers on Atom's panel has proven challenging. This could be due to several reasons, such as a lack of incentives, disinterest, or being generally too busy.
-
Different expectations and priorities among stakeholders could pose challenges in aligning project goals and meeting everyone's needs. This misalignment could also impact designs that have already been implemented later on in the project.
4. Roadmap
I implemented the following roadmap using the design process and timeframe:
Stage 2: Research
1. Website analysis
To begin the research, I would analyse top pages for both the Residential and Commercial sections of the intermediaries website. The results would very closely resemble those from the analysis that was carried out 6 months prior to this (not by me), providing clear insights into the information most sought after by our broker audience. Most used pages were as follows:
2. Stakeholder engagement
I interviewed a number of Business Development Managers (BDMs) at Atom to gauge their personal opinions on the current intermediaries website and to inquire whether they have received any feedback regarding the site's functionality and appearance from the brokers they directly interact with.
Business development managers (BDMs) directly assist Atom's brokers by addressing their inquiries regarding potential applications and encouraging them to engage in business with Atom.
The most common issues that arose during discussions between brokers and BDMs regarding their experiences with Atom's intermediaries site were as follows:
Up until now, the research has primarily involved myself, a Digital Marketing Manager, a B2B Marketing Manager, and various BDMs. However, the following team members will later play key roles in the research phase of the project:
-
A Copywriter for crafting website copy.
-
An SEO specialist for on-page optimisation, aiming to enhance search result relevance and overall user experience, increase site traffic, lead volume, and brand awareness.
-
The Visual Design team for handling final design elements, such as incorporating imagery and ensuring full adherence to design system guidelines.
-
The Web Development Team for building the new intermediaries site post stakeholder approval.
3. Competitor research
The next step was to analyse competitor sites from well-known banks to identify trends and best practices in the industry. Some examples are as follows:
During the analysis of these sites, I made note of trends and best practices. Some of my observations did in-fact align with the feedback we received from brokers who had direct contact with brokers.
4. Testing
The next phase involved testing, which began with a card sorting exercise. The primary objective was to identify how our users, specifically brokers, understand and categorise the information intended for the intermediaries site, ensuring alignment between our site architecture and user expectations. The card sort was conducted within UserZoom.
I began by listing every page for both Residential and Commercial. Test participants were then tasked with organising and labeling these pages (cards) into categories based on their judgment.
This process aimed to generate insights into the grouping and labeling of information on the new website, tailored to the preferences of our audience.
Participants produced the following categories using the cards:
If I highlighted the section containing the pages (cards) for Price List, Near Prime, and Prime, UserZoom would generate a list of random category names that participants had created based on where they thought those pages (cards) belonged.
As I expected, there were some pages that participants were uncertain about, resulting in uncategorised outcomes, therefore I had to categorise these remaining pages based on my own interpretations for now.
The next phase of testing involved performing tree testing on the revised categorised pages. I built the tree test survey in UserZoom.
When participants launched the survey, they'd see the following prompt:
Select the category where you believe the following pages should be categorised:
Results were as follows:
The green highlighted areas represent where I personally expected pages to be categorised, which I applied to the test settings in UserZoom. For example, I expected the 'Affordability rules' page to fall under 'Resources', but more users chose the 'Legal' category. Insights like these would help identify needed adjustments to our site structure.
Stage 3: Design
1. Website architecture
To begin the design stage, I'd focus on developing the website architecture. The sitemaps I created were based on results gathered from the Website Analysis, Stakeholder Engagement, Competitor Analysis, and Testing stage.
Note: The sitemaps evolved over time through project meetings and discussions with stakeholders etc, but ultimately they represent the finalised version.
2. Rebranding & design system
Once we agreed on the site structure, the next step involved creating lower-fidelity wireframes. The following wireframe snippet would represent the Residential Home page for both desktop and mobile resolutions.
Following stakeholder approval and further collaboration with the visual design team, we were able to select the appropriate design system components that complemented the wireframes.
If there were any areas needing entirely new components to meet new specifications, I applied a similar approach by creating preliminary wireframes, then integrating them with established brand guidelines to produce finalised components. Some of the guidelines I'd follow would included grid structure, spacing, colour scheme, typography, iconography etc.
The following high fidelity snippers represent the final versions for the Residential Homepage, Prime Mortgage page and Commercial RLS page.
Takeaways
1. What I've Learned
Through Website Analysis, I understood the importance of using current analytical data to prioritise content. Stakeholder Engagement highlighted the significance of continuous collaboration. Competitor Analysis showed the value of studying industry trends and the Testing stage revealed existing navigational challenges as well as opportunities for improvement.
I recognised the potential limitations, including varying stakeholder expectations and priorities, which could pose challenges in reaching a decision, however, research-backed design decisions often provided clear direction. In cases of disagreement, particularly regarding areas like agreeing upon the correct wording within website copy, regular meetings were scheduled to collaboratively determine revisions and resolve any issues.
2. Changes & Results
Overall, the project was a success, despite some deviations from the initial roadmap and timeline. All contributors fulfilled their roles effectively, with myself managing user research, architecture, testing, and design tasks. The marketing managers ensured alignment with project objectives and facilitated collaboration among team members. The visual design team played a crucial role in assisting with the merging of the new design system guidelines aswell as rebranding. Our SEO specialist and copywriter provided guidance for visibility and professionalism in search engine results. The web development team implemented the designed elements into a fully functional website. Moving forward, the next steps will most likely involve gathering additional feedback from brokers using our newly built live site before determining further actions.