Reef Design System

A design system that enables Swimm to scale fast with components specific to their product.
UX method
UX Audit
Token naming system
Style guides
2021 - present
Ryan Taylor
Shirly Asderban
Main challenge
Since we're building a design system of a startup that's still finding its product market fit, it's good to know that product or feature could change quickly. Therefore it's crucial to define the minimum viable product that can adapt to this flexibility.
Identifying core components
I started by auditing existing interfaces of the application. Aside from the common UI such as buttons, inputs, breadcrumbs, etc; we see a unique subset that are highly related to the company's core offering of code documentations.

1. editor blocks - elements user can freely add into a doc
2. sync statuses - visual representation for a referenced code or token
Designing the editor
The editor contains different block elements that could be included. Headings, text blocks,
Designing the code-coupled elements
We want to showcase the status of the code, whether it is the same as your current code, or whether something was modified. This was accomplished by applying color theory and side-by-side comparison.
Syncing with devs
We set a weekly sync with the devs so we can catch discrepancies early on.
Naming our design system
We decided to sent out a company-wide event to nominate and vote for our design system before we even build it out. Our developers were quite engaged since they had authority over a small decision that is usually coming from the design team.
  • Involved everyone in a project kickoff or meeting to create engagement
  • Align with marketing designers for brand consistency
  • Don't get trap by the system you created