Define

Define what makes up a design system (e.g. differentiating between atoms, components, and patterns)

Categorize Components

Identify the different categories of components

Document 

Screenshot and document how existing components appear in different parts of the platform onto our Figma board 

Evaluate

Note component inconsistencies and consider accessibility requirements

Revisit the Basics: Colors and Iconography

We noticed differences in simple elements such as color (e.g. different shades of grey), so we started off prioritizing finalizing elements such as color and iconography. We decided not to focus on typography at this point because we believed it would be more helpful to adjust typography based on component needs

Assign Components

Assign components to different team members to make recommendations and review them as a team. The approved components were finalized

Identify Commonly Used Patterns

Start identifying commonly used patterns (such as dropdowns, modals and tables) and begin making recommendations. This process took the most time as there can be many variations in patterns depending on the user context

Repeat Process

Continue process until all existing components and patterns have been covered. If new components/patterns are created, share during design team reviews and update component library accordingly