Reducing design handover timescales for speedier development with Design System enhancements
The Challenge
As a fully distributed UX team it was occasionally difficult to ensure that the work produced followed a unified design. There was potential for inconsistency in the UI at the implementation stage as a result.
Pain Points 💢
- Potential inconsistency in the UI
- Developer confusion over design source of truth
- Inefficient design handover
The Solution
I carried out an extensive review of all the existing components and their usage, highlighting some improvements for accessibilty and reducing the number of component variations in use.
This led to a clear and concise new version of the design components library, removal of legacy designs and other design debt from Figma files, and detailed documentation including style guidelines.
The Outcome
A well documented, streamlined design system which sped up the output of design and development work and led to improved consistency in the UI.
Key features of the solution:
- Created a revised version of the design components within Figma and associated component library on Storybook
- Documented all design changes through a series of DDRs (Design Decision Records) so that colleagues could understand the rationale behind changes
- Drafted UX guidelines for items such as tone of voice and text content for error messages so that the UI was consistent regardless of which designer or engineer(s) worked on a feature/improvement
Role
Lead UX Designer
Work Completed
- UX review of exisitng Figma design components and component library
- Accessibility review of design components
- UX review of overall UI to identify components that needed particular attention
- Presenting proposed component changes with other designers and front end engineers to solicit feedback
- Iterating based on feedback and creating associated engineering tickets for proposed changes once designs were approved
