Reimagining AJ Bell's Design System
FEB 2025
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 versus personal use 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
Geographic: UK
TIMELINE:
Below is an overview of the project timeline and which UX/UI activities were conducted at each stage of the process.
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 OVERLOAD:
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.
REMI. DESIGN SYSTEM:
Better to show rather than tell, please feel free to have a look at the Figma Make Prototype I used to bring the design system file to life.
KEY LEARNINGS:
01 FIGMA
The in’s and out’s of Design Systems in Figma from variables from colours, primitives and spacing to complex button groups and 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.