2022
PFG
UX/UI Design
Lead
The goal was to create a unified experience no matter which tool or interface customers are using.
UI Designer
Design system management
UX design support
A design system starts with a design language, a design languages take a brand proposition and marries it to a design philosophy and UX philosophy to create a set of rules for how a brand presents itself.
The first step I took was creating our design principles for Stitch, this ensured that whilst the designs were being made, I could always analyse them against our principles.
The design system is all built up from core files which hold each brand and accessibility modes core design elements. The elements are made up from colours, typography, spacing, shadows, border width, corner radius, and opacity.
The most important part here is ensuring that everything is labelled, organised in correct pages, and folders and documented. This is your brands source of truth, and where design tokens originate from.
I created and maintained the component library throughout the design and development process, which successfully served as the single source of truth for all team members and ensured visual consistency across the platform.
The design system is more than just a collection of UI styles, it also forms the way your design team works and grounds your organisations values and principles.
After deciding on our design principles and philosophy and organising the brands core files, I started to undertake a UX and UI audit of our current products, to ensure that only components that where being used, and had passed our customer testing process would go into our design system.
01
UX audit of all components used
02
Test components and refine to neccesary ones
03
Create a component inventory and re-organise into categories that can be used across multiple products.
This is how our inventory was structured across our core files, which laddered into our components, which then created our patterns.
We carried out an inventory audit to understand which components were necessary and useful to our customer, this then informed how we structured our component library.
The design tokens were setup in our core file, which then made up the rest of the design system, therefore running throughout.
I created and maintained the component library throughout the design and development process, which successfully served as the single source of truth for all team members and ensured visual consistency across the platform.
And to keep pace with the PFG products, our component library continues to grow and evolve. It’s maintained by a core group of designers and developers, but everyone on the product team contributes to it, by adding ideas into our backlog by requesting components.
Whenever a new component is built or improved, it’s rolled back into the design process where it goes through a process of being assessed and tested and then created, this minimises the amount of duplicate components, it also stops bad UX from sneaking into our designs.
Before this process started, we didn’t have one centralised place designers could go to understand which components or styles already existed, and no place where they could go if they wanted to use those elements or components in their own work.
Designers and developers were trying their best to make good decisions about which components or patterns to use, but their main reference point was the existing product — which was based around poor UX decisions and was also inconsistent.
To combat this we made our design system, but we didn't want to just leave designers and developers in the lurch again with what components should be used where and how they should be used. So not only did we create patterns but we have also made a documentation file, which is the got to handbook for designers and developers for each each pattern should be used and where. That means our designers don’t spend their days pushing pixels, but instead get to focus on the more important tasks like researching, ideating, and iterating, quickly and in high fidelity, meaning we get to focus more again on our customers needs.
Within the design system creation, we also designed a plugin to create an efficient work system.
This design system not only supports multiple brands, but has multiple themes per brand to adapt to customer need – i.e., colour blindness, high contrast, low contrast etc.
To be able to easily apply of this to our design work, we used design tokens to manage these themes and be the method of communication between our design tool (Figma) and our front-end channels (Flutter for app, generic HTML/CSS/JS for web).
We designed a Figma plugin for the creation, management, and application of design tokens. This plugin: will take existing styles within Figma and export them to JSON using an appropriate schema as defined by our front-end development.
- It allows designers to choose from a set of available themes, and apply these themes within Figma to white labelled patterns and components.
-It allows the operator to export the current themes as JSON files ready for developers to use.
- It has a simple and usable interface so that it increases work efficiency.
When a change is made in our design system, it then can be updated striaght into our app through the use of design tokens, creating an easy and efficient design to development process.
