Karat Design System
I joined Karat last February to implement a component library in Figma, revamp our codebase, and write supporting documentation. Here are the results:
1 design guide
A single starting point for anyone to find what they need.
![Three screenshots of pages from our design guide. First page is Accessibility—it outlines best practices and has a checklist for both designers and developers. The other two pages are for two components: Media Card and Layout. For each component, there’s a completion status, examples, and links where you can find it in Figma or in code.](/assets/kds/kds-guide-77a85869e11d1019b126356cb03f130e70d3263511fcaf5c712111e7adb21f5b.png)
37 check-ins
We used a dedicated design systems channel to share the roadmap, post weekly updates, and get feedback.
![Two screenshots from our check-ins in Slack. In these updates I share what I’ve been working on (for example, breakpoints or loading states) and add links to corresponding documentation or screencasts.](/assets/kds/kds-heartbeats-965db4fcbbef66b6239c9dca44bea239a47f3870117323e9eefbb2da9c258524.png)
2-3× output
Figma component library allowed our designers, Mark and Cecilia, to work 2-3× faster. They could spend more time thinking about the problem and less time on mundane technicalities.
![A compilation of components and examples from our Figma library.](/assets/kds/kds-figma-3f4a53bad39e0f97a10293fcfb7b919739e7e6999f1796f5715ba377be444f3b.png)
~100,000 lines of code removed
56 pull requests made, each removing on average ~2,000 lines of repetitive code and replacing it with ~300 lines.
![Two screenshots. First screenshot shows a longer block of code that has multiple repetitive lines. Second screenshot shows the same block of code, but it’s cleaned up and much smaller.](/assets/kds/kds-code-bf9294f50fe3f0e7172ee40d36b89e16fef3fd55f942a9fd77b54a3210088817.png)
~ 2,000 dev hours saved
At least. This calculation is based on just the following 10 components from our codebase:
component | # instances so far | hours saved |
---|---|---|
Alert message | 25 | 85 |
Button | 370 | 181 |
Card | 135 | 397 |
Input | 212 | 100 |
Layout | 47 | 168 |
Modal | 55 | 263 |
Page header | 60 | 58 |
Table | 70 | 338 |
Tabs | 10 | 72 |
Toast | 143 | 283 |
These hours could then be spent on launching our new Books product and enhancing our internal tool with nifty features (like a custom CMS or underwriting improvements).
Note: I used Knapsack's calculator as inspiration.
8.2 / 10 happiness score
At the end of 2022, we ran a desisgn systems survey with designers and developers. Here's the full report.
![Two screenshots from the design systems survey. First screenshot shows responses to the question ‘On a scale of 1 to 5 (with 1 being not useful and 5 being very useful), how do you find the design system documentation?’ and the answer is 4.4. Second screenshot shows responses to the question ‘On a scale of 1 to 5 (with 1 being very difficult and 5 being very easy), how easy it is for you to find and use components whenever you need them?’ and the answer is 3.9.](/assets/kds/kds-report-a8708b52e306313b9c568dc62ba33c0fc311f7e885b5004db60515990bf81f3d.png)
3 buckets of (happy) tears
The amount I cried after I read my manager Mark's LinkedIn recommendation.
![Screenshot of Mark's very flattering LinkedIn recommendation.](/assets/kds/kds-mark-94b66831a3abe100aacb89762971ca5164dc18732f2763ef8dcd3541c766a198.png)
We did so much and yet, there was still so much to be done... (a better system for emails, more consistent loading states, design tokens, and much more). 💙