Reimagining AJ Bell's Design System
In November 2024, I undertook a part-time Design Systems Bootcamp with Memorisely to build upon my understanding of design systems whilst learning how to build a comprehensive design system from scratch in Figma.
Project Summary
Built a redesign system 'Remi', for AJ Bell
Applied the design process to rebuild components and patterns: Analyse, Research and Refactor
Context
As a passionate hobby retail investor, my go-to trading platform is AJ Bell thanks to their competitive fees however I have always found myself frustrated by their user experience. This bootcamp was therefore the ideal opportunity to put this into action!
Project Goal
Build a scalable design system from scratch to unify AJ Bell's platform user experience across desktop and mobile. Use AI to prototype the experience of viewing a portfolio, as well as buying and selling shares.
Key Constraint
As this was a part-time course with a deadline, time was a key constraint which made prioritisation of what was feasible and viable important.
User Group
I used Claude.ai to help give an overview of the primary and secondary user groups that AJ Bell targets. Namely:
There were varying levels of expertise which called for progressive disclosure and scalable complexity
There were different use cases ie. personal investors versus financial advisors and businesses to required distinct workflows
The age range diversity requires accessibility considerations, particularly for older users
Professional and personal user needs required different interface priorities and information architecture
Due to the constraint of time, I decided to design with just one user group in mind:
Age: Users aged 40-65 as these are prime earning and retirement planning years
Tech Comfort: Moderate to high digital literacy
Investment Knowledge: Range from beginner to intermediate/advanced
Target Audience: UK
Timeline
Below is an overview of the project timeline and which UX/UI activities were conducted at each stage of the process.
AJ Bell Interface Inventory
I conducted an interface inventory of the AJ Bell Interface. As there wasn't the time to map every component in the product I decided to focus on 3, analysing how they could be improved. Below I've outlined the button component as an example.
Buttons
When it came to AJ Bell's buttons, it was a consistent “sea” of red. Across desktop as well as mobile. In investing, where emotions can run high this could create a sense of unease for the user:
Iconography was often inconsistent : Fill / Outline
Many buttons were lacking a hover state all together on desktop and didn't pass the contract check
I therefore outlined the changes that were needed to improve this component group:
Key Insights
01 INCONSISTENCY
There is an overall lack of consistency within the AJ Bell platform. From buttons with inconsistent colouring and missing hover interaction states on desktop to inconsistent iconography and primary buttons that do not pass colour contrast checks.
02 COGNITIVE LOAD
Home dashboards are cluttered with different CTAs calling for users attention with no clear information hierarchy to guide them. As a result, users can't quickly identify what information is most important.
Design Principles
In order to guide the direction of the design system build, I decided to outline some design principles that I would apply:
TRUST & TRANSPARENCY
Our tone of voice is always clear and honest
accessible design
We always strive to design for users of all abilities
Efficiency & Streamlined Workflows
We respect users' time and cognitive load
Consistency
Components and patterns are consistent and reliably predictable to build user confidence and reduce cognitive load
Key Learnings
01 FIGMA
The in’s and out’s of Design Systems in Figma from variables such as primitives and spacing to complex button groups and component architecture, light and dark mode, and naming conventions.
02 FIGMA MAKE
Figma Make is a great tool to quickly bring a design system to life when you have the foundations and some basic components built and applied to a frame.