PEXA Design System
PEXA works with convenaycers, lawyers and banks to assist them with their mortgage/refinance matters so that their customers settle into their homes on time.
While working at PEXA the company faced many changes from acquisitions to new solutions for new customer segments. As a result we had a range of different assets and not a very comprehensive design system. Our designers were all designing differently and patterns were not clear.
After completing a Design System Bootcamp with Memorisely, I lead an experiment using the PEXA website where we could explore the use of design tokens and a new way of documenting before we implemented any new design system strategies with the other PEXA products.
After communicating my skills through the website experiment, I worked with a team to implement a solid group Design system, starting with the PEXA International team. We have documented our foundations and component specs, measured their accesibily and explored new Figma features. Let me show you how we did it.
Video walk through
Got 10 minutes to spare? Watch this 10 minute walkthrough of the PEXA design system.
The problem
Over the last few years, in the spirit of growing and expanding, PEXA had been heavily focused on delivery. As a result they had been prioritising output, speed and efficiency, over quality, consistency and scalability. This had led to designers designing differently, and no single source of truth.
The main areas we wanted to focus on for improvement were:
No single source of truth
Inconsistancy
Efficiency and handover
Scale and accessibility
Auditing
We began looking through the PEXA website and the PEXA international product to collect some inconsistencies that needed reviewing.
PEXA has a strong brand but it became clear that designers, developers and QA”s were not aligned with an understanding of when to use what where.
Foundations
We began by dividing our file into foundations and components. Foundations are the building blocks of any design system. They include colour, typography, spacing, radius ad grid. Before we could settle on any styling, we had to cross reference with our brand. Many decisions were formed from discussions on who we want to be and how we want to position ourselves.
Icons before
Icons before were inconsistent in colour, style and radius. We did an audit, cross references them with our brand and together with marketing discussed the best icon style for our products.
Design tokens and variables
The main purpose of Design tokens is to have a consistent naming structure. This ensures everyone in the team can easily reference each token with ease. Design tokens should be used across the business from designers to developers. To create the tokens I used a token plugin in Figma called Token studio.
For colours I also conducted a contrast check to ensure accessibility requirements were met
We also implemented the Figma variables feature. All of the colours were turned into variables to allow for scalability and any future theming.
Icons after
We defined and documented our new styling based on our branding guideines and messaging. The icons are now, non filled and rounded, thin and slick, and all from the material design library.
Typography before
Originally, there had been a loose guide that all headers should be Quicksand and all body styles should be Libre Franklin. But when it came to our product it became clear that this guide was far too unclear, what should we use for badges, buttons and secondary navigation? It became clear that the loose guide was causing designers and developers to work differently.
Typography after
From testing it became clear that Libre Franklin was the far more readable font and more aligned with our ‘friendly but serious’ branding. We consolidated the site to be almost entirely Libre Franklin. This allowed it to be easier to read, reduce inconsistency and confustion and align with our brand look and feel.
Components
Each component in PEXA includes documentation for the specs, the accessibility and the components variants. Components use the colours and number variables we defined in our foundations as their building blocks.
Documentation
For each component we are sure to document the below guidlines
An overview of the components
The anatomy of the component
Properties the component is using
Any types (Primary, secondary)
Usage (where, when, why)
States and behaviour
Specs
Guidelines (Do’s and Don’ts)
Accessibility
For each component we are sure to document the below accesibility checks to ensure that we are WCAG AA compliant.
Colour contrast check
Touch target
Focus order
Roles
Aria labels
Alt text
Variants
At PEXA we have been displaying the variants in a table format for readability
the table is laid out depending on the properties it includes, examples include
Size
State
Hierarchy
Type
Boolean properties (True/false)
Properties
I always try to make sure that we utilise properties as much as possible so that we can create a customisabe component and not fill up our library too much. The property types we use are
Variant properties
Boolean properties
Instance swap properties
Text properties
Here is an example of how I like to set up our component properties
Scalability
To make sure that the product was scalable I ensured each component was responsive and accessible on multiple devices. I was sure to test each component at different sizes as I made them. I achieved this using auto-layout and establishing minimum and maximum withs.
Take aways
The project of helping consolidate and document the design system at PEXA gave me confidence in my design ability and helped me improve my knowledge sharing. Through the process I ran regular workshops to ensure that the other designers understood how each component was created and ensured we were aligned.
After implementation, PEXA has already seen improvements not just within the design team but also other parts of the business when it comes to consistency in our website build. This also helped to establish a solid standard for other design systems at PEXA going forward.
As we continue to improve and evolve the design system, we have implemented some front end UI developers, as well as put in place a testing cadence involving surveys and design huddles to ensure that the system is fit for purpose.