A design system born from chaos
When I realized there was no system at all
When I realized there was no system at all
Files lived everywhere, components contradicted each other, and nothing connected. I mapped the entire product, built its foundations, and created the system the team had needed for years.
Files lived everywhere, components contradicted each other, and nothing connected. I mapped the entire product, built its foundations, and created the system the team had needed for years.
Files lived everywhere, components contradicted each other, and nothing connected. I mapped the entire product, built its foundations, and created the system the team had needed for years.
*Inspired by a real project.
Certain details adjusted for privacy.
*Inspired by a real project.
Certain details adjusted for privacy.
*Inspired by a real project.
Certain details adjusted for privacy.
The Chaos
The day I uncovered the real problem
Right on my first project at BetterSleep, I went deep into the product files – and what I found was surreal. Each designer had kept their own version of components, some buried in 3y old files, others duplicated across half-forgotten projects. A single button could exist in five colors and three different heights — and nobody really knew which one was final.
I realized that continuing to design on top of this mess would only create more rework and confusion. So instead of patching things, I decided to rebuild the foundation the team never had.
Right on my first project at BetterSleep, I went deep into the product files – and what I found was surreal. Each designer had kept their own version of components, some buried in 3y old files, others duplicated across half-forgotten projects. A single button could exist in five colors and three different heights — and nobody really knew which one was final.
I realized that continuing to design on top of this mess would only create more rework and confusion. So instead of patching things, I decided to rebuild the foundation the team never had.
Mapping the product
Understanding the system before building one
I audited every screen of the app to understand its patterns, gaps, and inconsistencies. That mapping gave the team its first complete view of how the product was actually structured.
With that foundation, I defined our design tokens — spacing, colors, toggles, radio, typography — and brought designers and developers together to give fun names to the palette, assign weights, and document how everything should be used. It may sound simple, but giving everyone ownership completely shifted the way we collaborated.
I audited every screen of the app to understand its patterns, gaps, and inconsistencies. That mapping gave the team its first complete view of how the product was actually structured.
With that foundation, I defined our design tokens — spacing, colors, toggles, radio, typography — and brought designers and developers together to give fun names to the palette, assign weights, and document how everything should be used. It may sound simple, but giving everyone ownership completely shifted the way we collaborated.
Building the foundation
Structure first, components second
To make the system scalable, I reorganized every piece of the app UI using atomic design — from atoms to molecules, organisms, and templates. The team finally had a mental model explaining where things lived and how they connected.
This architecture eliminated most of the guesswork. Designers could find what they needed, and developers had a clear blueprint for rebuilding components across platforms.
To make the system scalable, I reorganized every piece of the app UI using atomic design — from atoms to molecules, organisms, and templates. The team finally had a mental model explaining where things lived and how they connected.
This architecture eliminated most of the guesswork. Designers could find what they needed, and developers had a clear blueprint for rebuilding components across platforms.
Growing the system
Turning patterns into components
With the foundations in place, I started transforming the product’s recurring patterns into reliable and reusable components in Figma, that was adapted for Storybook later. Cards, list rows, modals, bottom sheets — anything that appeared more than twice became a documented, standardized building block.
This shifted the whole team’s workflow. Designers could compose pages faster with fewer decisions, and developers gained predictable, reusable pieces they could implement with confidence.
With the foundations in place, I started transforming the product’s recurring patterns into reliable and reusable components in Figma, that was adapted for Storybook later. Cards, list rows, modals, bottom sheets — anything that appeared more than twice became a documented, standardized building block.
This shifted the whole team’s workflow. Designers could compose pages faster with fewer decisions, and developers gained predictable, reusable pieces they could implement with confidence.
Shared Foundations
Bringing teams into the same language
The next step was making sure designers and developers across platforms were speaking the same language. I documented how components behaved, set clear do’s and don’ts, and unified iOS and Android naming conventions so everyone could finally talk about components the same way — no more guesswork.
To make adoption effortless, I synced weekly with devs and QA, validating behavior and implementing everything in Storybook. Design decisions began translating cleanly into code, and releases stopped depending on tribal knowledge or last-minute fixes.
Shared Foundations
Bringing teams into the same language
The next step was making sure designers and developers across platforms were speaking the same language. I documented how components behaved, set clear do’s and don’ts, and unified iOS and Android naming conventions so everyone could finally talk about components the same way — no more guesswork.
To make adoption effortless, I synced weekly with devs and QA, validating behavior and implementing everything in Storybook. Design decisions began translating cleanly into code, and releases stopped depending on tribal knowledge or last-minute fixes.
Lasting Impact
A system that scaled beyond the app
Once the system was in place, teams moved faster and stayed aligned. Designers stopped hunting for components, developers shipped with fewer UI bugs, QA caught fewer mismatches, and even our naming conventions across iOS and Android finally matched. Our delivery pace improved in line with the 25–35% gains seen in mature design systems.
With that foundation solid, I expanded the system to web and our press kit, unifying colors, typography, and components across every platform. For the first time, BetterSleep looked and worked like one connected product.
Once the system was in place, teams moved faster and stayed aligned. Designers stopped hunting for components, developers shipped with fewer UI bugs, QA caught fewer mismatches, and even our naming conventions across iOS and Android finally matched. Our delivery pace improved in line with the 25–35% gains seen in mature design systems.
With that foundation solid, I expanded the system to web and our press kit, unifying colors, typography, and components across every platform. For the first time, BetterSleep looked and worked like one connected product.
Credits
About BetterSleep
BetterSleep is one of the world’s leading sleep and relaxation apps, helping over 70 million users improve their sleep with science-backed sounds, meditations, and stories.
The company is known for its strong data-driven culture, testing mindset, and deep collaboration between Design, Product, and Data to continuously improve user experience across global markets.
About BetterSleep
BetterSleep is one of the world’s leading sleep and relaxation apps, helping over 70 million users improve their sleep with science-backed sounds, meditations, and stories.
The company is known for its strong data-driven culture, testing mindset, and deep collaboration between Design, Product, and Data to continuously improve user experience across global markets.
My Role
As Senior Product Designer, I built BetterSleep’s first unified design system — auditing the product, defining tokens, creating cross-platform components, and aligning naming across iOS, Android, and Web. I worked closely with developers and QA to validate everything in Storybook, and later expanded the system to web and brand for a consistent experience everywhere.
My Role
As Senior Product Designer, I built BetterSleep’s first unified design system — auditing the product, defining tokens, creating cross-platform components, and aligning naming across iOS, Android, and Web. I worked closely with developers and QA to validate everything in Storybook, and later expanded the system to web and brand for a consistent experience everywhere.
Where to next?
NEXT
When I found a better way to onboard users
NEXT
When I found a better way to onboard users
NEXT
When I found a better way to onboard users
NEXT
When I found a better way to onboard users