Reef Design System

A design system that enables Swimm, a documentation tool company, to scale fast with components specific to their product.

UX method

UX Audit
Token naming system
Style guides
QA

Year

2021 - present

Team

Ryan Taylor, Engineer

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.
Process
Naturally, the first step was to audit the existing interface the company built, which surfaces some obvious UI components such as buttons, inputs, breadcrumbs etc. It sure gave us a great start to define the colors, typographies, and aesthetics across the system.

Next, I decided to focus on components that are related to the company's primary offering, so even if things would change, this part might be quite permanent:
1. editor - where users write their content
2. code-coupled elements - links to actual code inside their project.
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.