As a team we were tasked with created the company's first design system.
The Team
I was part of a team that consisted of a Developer, UI Engineer, and me as the interaction designer.
The Problem
Our base UIs were all extremely disjointed. Often leaving the user confused when working through different tasks. This problem was even worse when switching between applications. Anytime design changes are made it costs the company a lot in both time and money. Because of this making design changes, no matter how necessary they may be, is often a long process.
Our goals with this project were:
UI Unification
Unified Iconography
REusable React Components
UI Unification
Building COmponents
We followed the atomic design process when building out this design system, starting with the smallest components first and building our way up to larger pieces that in some cases utilize 5 or more smaller components. This allowed us to scale quickly and not have to trip over details as we worked.
A lot of rules were created to handle almost every scenario. Here I'm showcasing how a snowman menu would function.
The tools and features I was required to design for were often complex. Here is a unique query buidling tool mean to sort through millions of entries of data.
A new feature that was added during the creation of these components was messaging app. Meant to handle conversations that take place about specific features in our prODUCTS.
Unified Iconography
our icons were also all over the place and in many cases one icon would be used for a few different scenarios. WE created a library of over 700+ icons to fit the needs of our product teams. We created a unified brand and identity.
REusable React Components
The design system was built using react to allow for our developers to reuse components and share implemENTATIONS across teams. This helped cut development times substantially.
