UI DESIGN: Building a design system from scratch
Grammar Coach Design System
A story about my easter egg hunt for components, so that I could ensure parity between the main brands’ components and Grammar Coach’s.
Overview
Role
Product designer
Project timeline
4 weeks
Team
Just me
Tools
The problem
There wasn’t an efficient way to find the components that I was looking for, because the Grammar Coach product didn't have a library of components established yet.
The solution
I organized and adjusted all Grammar Coach components into one comprehensive design system.
Personal growth
Being able to take part in this serendipitous project is one of the wonderful parts about working in a small company.
Leading this project required me to take full responsibility for a number tasks and ensure their completion. It pushed me to delve deeply into areas I hadn't previously explored as a designer (I had never made my own system before), making it a significant undertaking. And now I'm proud to have successfully completed it without utilizing any additional company resources.
Design
Initial challenges
While it was my system to design and maintain, I didn’t have complete control over it.
I couldn’t deviate too far from the design of already created components—the engineers already had some components created, so that kind of work would be out of scope.
Molecule and atom components that went into the header
Organization and development
Once everything was in its right place, I combed through all components to ensure they were aligned and specified correctly.
This was the longest portion of the process. I didn’t initially realize there was so much to do, and I’d decided to undertake the project during a particularly busy time in the Grammar Coach development process.
Nothing gets me more excited than organization, so I made time to primarily:
Replace rectangles with frames
Set up auto layout within frames
Override instance settings—deleting unnecessary instances and/or creating missing ones
AI scoring side panel featuring the free vs. premium state versions
Outcomes
This was when I experienced the most growth.
I learned so much about Figma and its capabilities when I was in the weeds with master-components and their properties panel.
→ My favorite thing I learned was when selecting a component with variations, the little “+” selected every replicated instance. OMG. It was so helpful.
RIP the time I spent early in my career making overly complicated prototypes because I wasn’t aware of the extent that master component had.
A page dedicated to the components that indicated the grammar/spelling corrections to the user
A zoomed-in look at the current variant specifications
Documentation
After Q&A’s with engineers, I would leave meeting notes in those particular pages so that there were resources to point to past discussions.
→ I learned from an engineer’s perspective how certain patterns would take too long to implement, so I saved those versions and moved them down so they wouldn’t be confused with the components that were in development.
Documentation in the design system
Impact
Success metrics
As of January 2024, the team had not yet reviewed the metrics for the header, primarily due to the ongoing redesign process that has not yet completed.
For future evaluation, metrics to measure success would include:
Feedback, via customer service
Usability, via qualitative testing to establish whether users are able to find the pages they seek
Retention, to determine if users are understanding, staying, and returning, etc.
Reflections
Challenges and assumptions
Prior to Syllable (Dictionary.com’s DS), Dictionary had an older, very basic “design system” that was missing components and lacking in structure.
→ In spite of having an updated design system, Syllable, Dictionary.com engineers were still operating off components from the original design system.
Not knowing which design system to draw from was a challenge for me early on in my role. It wasn’t made explicitly clear that despite having a new design system, we were not using it.
→ With Grammar Coach’s DS, I had open communication with engineers, and both parties always knew what was up-to-date in Figma and Storybook. This was a major upgrade.
What I would do differently
I would have liked to have started this project sooner! This was a simultaneous project running in the background while I primarily designed for the Grammar Coach product, so I couldn’t always pay my full attention to it.
There was also the irrational fear I experienced, wondering whether I would be allowed to divide my time to work on this. As the solo designer at the time, I really only needed my own permission.
Moving forward: related projects
My connection with design systems didn’t stop after this project. Six months later, I had the opportunity to create design tokens with another designer.
→ This proved to be a particularly enriching experience because of the massive impact it would have on design and engineering resource efficiency for years to come.
As someone also particularly invested in efficiency and the conservation of resources—time, budget, effort—I was thrilled to have the chance to work on this project.
Reduce! Reuse! Recycle!
