Project Overview
Problems
When I joined the design team, the platform had been around for over 15 years. Despite this, the existing UI library was very basic, with limited documentation and no cross-team adoption. Because there was no single source of truth, our dev team was creating new code for all of our designs.
Why These Problem's Mattered
Wasted Time - Lots of time was wasted by both dev and design teams making small changes, which could be used more productively.
Poor User Experience - The overall product had lots of UI inconsistencies and bad UX practice which was causing frustration for our users.
Opportunities/Goals
Our goals were:
Efficiency: Accelerate the production process with reusable, standardised components.
Consistency: Create a unified user experience across the platform, and reduce costly and time consuming rework.
Collaboration: Act as a single source of truth for design and dev teams; helping to align on functionality and structure.
Design Tokens
Impact: This helped us align on values for usage, and ensure the library was visually consistent.
Primitive tokens
Semantic tokens
Components Specific Properties
Properties were established in all components as they helped to build consistent patterns for repeated use cases.
Impact: This allowed us to build consistent designs more quickly
Legacy System Constraints
We could not build a whole new library from scratch, as users were accustomed to many aspects. Instead, we compromised by keeping certain elements, and built a modernised library around them.
Impact: A modernised UI style would help to limit disruption for existing users.
Components Configured for Speed
Components were configured to be intuitive, lean, and part of a unified system.
Impact: These setting helped to provide predictability, and allowed us to move more quickly.
Variant Based Component Sets
Component sets helped to cover a wider range of states and behaviours within components.
Impact: Scalable patterns meant we spent less time thinking about minor UI tweaks, and more time focussed on other key problems.
Complex Reusable Components
Simple components were nested together to create more complex components; helping the system to scale.
Impact: This scalability meant we could reach Hi-Fi solutions more quickly.
Converting the UI library to code
We worked closely with the development team to build a code based version of the UI library, which could be referenced by the development team going forward.
Figma Design System
Code-Based Design System
User Feedback
“Recent updates have made the user experience much more straightforward and intuitive. The overall platform is perfect for our needs.” — Verified User in Financial Services (via G2)
“An intuitive and user friendly platform” — Verified User in Financial Services (via G2)
