Design System
Timeline
May - August 2023, while working on other projects
My role
Lead the creation of a new system creating documentation, and guidelines
UX/UI Methodologies and Techniques
Specific component UX research
UI design
QA of implementation
Style guide
Pattern library
UI inventory
UX audit
The Challenge
Every time we started a new project we were creating components from scratch. This would mean setting up a new component library every time.
This meant that we were designing the same components over and over again
We needed to:
Make one home for reusable components
Ensure we are accounting for all of the possible use cases with each variant
Component Name:
A specific and unique UI component name to avoid miscommunication between designers and developers. This needed to be clear so that components would work as they are supposed to without error.
The Benefits
It’s a single source to view components, patterns and styles
Design resources can be focused less on tweaking visual appearance but more so on solving the complex problems that clients face.
Ability to replicate designs quickly by utilizing pre made components and elements.
Reducing the need to reinvent the wheel and eliminating inconsistency
The Style Guide consisted of:
Branding (colours, typography)
Layout grids
Spacing guidelines and responsiveness
Extensive icon pack
Border radius guidelines
Shadows
The Component Library consists of:
Note making:
Page annotations and descriptions to understand what component you were looking at.
State changes:
Recommended defaults and their subsequent changes in appearance ie. focused, hover.
Documentation
Documentation is always included on the same page as the component this was to explain any use cases that were created. This consisted of:
The name of the frame or specific element
Its characteristics (fill, hug, fixed)
Relevant spacing and padding (labelled and transcribed)