Reef Design System
A design system that enables Swimm to scale fast with components specific to their product.
UX method
UX Audit
Style guides
Iconography
Token naming system
Team
Ryan Taylor
Shirly Asderban
Result
UI kits accelerated workflow of PMs and other designers when creating mockups
Developed component shortens feature development time and minimized code duplication
⬇ Brace yourself! The deep dive process begins. ⬇
Auditing core component
I started by auditing existing interfaces of the application. There were a lot of heuristic issues — rounded button with square input field, spacing between elements, inconsistent color usage and button styles, and so much more. We decided to take it into account when creating these UI kits.
Classifying UI Component
Since the company is a technical platform for developers to document their code and design decisions, we see a unique subset that are highly relevant to the company's core offering of code documentations. This is categorized into the following:
Basic
- buttons
- input fields, text areas
- breadcrumbs
- menus
Developer tool oriented
- nested tree view
- code-coupled element
Documentation oriented
- slash command
- editor blocks
- editor blocks toolbar
- mermaid diagrams
The buttons were revamped to having rectangular shapes to fix the inconsistency issue. A smaller-sized buttons was also introduced as our product begin to expand from web app to text editors for coding. These platform usually have small font sizes, so our components need to blend in and feel as native as possible.
We need to portray the status of the code, to inform whether something was modified, after this piece of code was being included in the doc. The final design draws inspiration from basic color theory and code diff view (side-by-side comparison) similar to version controls platform.
For the editor, I created bottom up the different block elements that could be included in the doc. These ranges from title headlines, paragraphs, to more complex tables, code blocks, alerts, images, and more. Each has their own individual variant and controls.
Menu and commands used in editors and other places are scaled from the same inline component. Making the UI kit easy to maintain.
Development
Components were created in storybook, in multiple phases. I set a weekly sync with the devs to 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.
Takeaway
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
