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)

Previous
Previous

Carpool

Next
Next

Mels Diner