Money & Pensions Service - Design System
Project Overview
This is a case study of how I led the design team to achieve a brand new design system. A redesign was needed to update the old UI to keep ourselves as the top player. A modern look was the ask + we also identified the gaps in the experience + we developed this design system for consistency across teams and products.
The goal of this project is to create a reusable governable component library which will be easier to use for the developers and any UX/UI designers who will join the team in th future.
Work: Figma Design System creation
Design Process
Heuristic Evaluation
Stakeholder interviews
User interviews
Competitor analysis
User journey mapping / User flow
Usability Testing
Evaluation and design recommendations
The money and pensions service designed a website without any UX design input. As a result, the website was very rushed and put together back in 2021. The money and Pensions Service wanted me to create a breathing space for users who are struggling financially, who need to apply for financial aid. The old website was built on WordPress and provides guidance on how users can apply to for breathing space and guidance on their existing debts.
My Approach
Maps did not have any existing component library and improvised and added component to their website as they went along. I began the process by going through all the pages in the website to screenshot and collate all the components and documented the pixel sizing to recreate the components in figma. I also had kick off meetings with the developers to collate any SVG components files they had of any of the components to and page templates to add to Figma,
Component Audit
Component Audit
The dense text layout was very overwhelming and unsuitable for a user who is experiencing stress and mental health problems.
The UI was overtly complex and the UI did not allow users to fill in the necessary application documents or know where to upload them.
“In some places the buttons have an icon and in some places it doesn't...” Jonas — Front End Developer
Heuristic Audit
Nonexistence of a buttons hierarchy nor a clear structure for the different states of the components used across platforms.
Communication Maintenance of the design system and its scaling is a challenge, designers have to communicate with each other well. Before making changes to an existing component, doing a research on the usage of component across different use cases and
Accessibility For a product that’s used by thousands, we need to accommodate our different types of users, including the ones with visual, auditory, and motor impairments to create inclusive experiences.
User Interviews Pain Points
Inconsistent Font sizing
Components are hard to find and search for them
There are multiple versions of each component
The components are not categoriesed or logged anywhere
each financial product team is using different customised
MaPs Visual Language and Guidelines
Component Library Creation
Design System Governance
System management steps
Graphic elements created by Ezoe in Adobe Photoshop and Figma