Pour Over Design System
Restoring Precision and Care to Blue Bottle Coffee’s Digital Experience
Overview
Led the team to create an unofficial design system for Blue Bottle Coffee’s eCommerce experience to improve consistency, accessibility, and scalability across the product ecosystem. Pour Over is inspired by Blue Bottle’s philosophy of precision, care, and intentionality, which includes a scalable UI Kit and centralized documentation system on Zeroheight to help teams design, build, and scale the product with more clarity, consistency, and alignment.
My Role
Product Designer
Project Manager
Tools
Figma
Zeroheight
Accessibility Checker
Team
Gloria Yang
Claire Paisley
Mengqi Cao
Timeline
3 months
Feb – May 2026
Problem
A Brand Built on Precision and Care, But the Digital Experience Has Lost That.
Blue Bottle Coffee built on precision, care, and intentionality.
From the pour-over brewing method to the café experience, every interaction feels thoughtful, calm, and carefully crafted. The experience encourages people to slow down and pay attention to the details.
But when we looked at the website, the digital experience no longer reflected those same values.
Across the site, layouts shifted between pages, interaction patterns behaved differently, and accessibility issues existed across critical experiences. What should have felt cohesive instead felt fragmented and inconsistent.
Problem 1
Too many inconsistent components creates fragmented experience
Problem 2
Accessibility failures leave users behind
Problem 3
Too many redundant variants creating decision fatigue for teams
To address these issues at scale, we needed more than isolated fixes. The underlying problem was the lack of a shared system guiding how products should be designed and built.
Solution
Introducing Pour Over Design System
Pour Over is an unofficial design system inspired by Blue Bottle Coffee’s philosophy of precision, care, and intentionality to create clarity, reduce friction, and ensure every experience feels consistent and thoughtful.
The system combines a scalable UI Kit, centralized documentation, and presentation storytelling to support both product execution and cross-functional alignment.
Figma UI Kit
Reusable components, tokens, and patterns designed for scalability. Available to download and use in Figma.
Link to Figma
Design System Documentation
A living documentation for implementation, accessibility, and usage guidance on Zeroheight.
Read on Zeroheight
Pitch Deck
The final pitch deck to communicate the value and long-term vision of the system. Presented on May 2026.
Link to Figma Slides
Deconstructing the Website
Understanding the Experience Before Designing the System
We started by deconstructing Blue Bottle Coffee’s website to better understand the current experience and identify the biggest usability and systems issues across the product ecosystem.
Shortly after our initial audit, Blue Bottle Coffee was acquired by Luckin Coffee and released a major website update while we were actively building the system. This required us to conduct a second deconstruction of the site to better understand the updated layouts, interaction patterns, and product structure.
We started by deconstructing Blue Bottle Coffee’s website to better understand the current experience and identify the biggest usability and systems issues across the product ecosystem.
Key Findings
Three Patterns Consistently Appeared Across the Experience
Problem 1 – Inconsistency
Customers
Too many inconsistent components creates fragmented experience
Inconsistent patterns slow users down and make the product feel unreliable.
Problem 2 – Accessibility
Customers
Business
Accessibility failures leave users behind
We identified multiple WCAG violations across the experience
Invalid ARIA labels on pagination (4.1.2 Name, Role, Value)
Video loop with no pause control (2.2.2 Pause, Stop, Hide)
Insufficient color contrast on video overlays (AAA Large Text)
These aren't just technical issues, they exclude users who rely on assistive technologies.
Fails WCAG 2.2.2 Pause, Stop, Hide
Any moving content that starts automatically must have controls to pause, stop or hide it.
Fails AAA Large Text
Required Contrast Ratio: 4.5:1
Current Contrast Ratio: 1.54:1
Problem 3 – Decision Tax
Team
Too many variants create a hidden tax on every decision
Teams spend more time deciding what to use than actually building, due to unclear guidance, leading to rework and slower execution.
Why were these issues happening?
There wasn’t a Shared System Guiding Decisions.
No Single Source of Truth
No Standards or Guardrails
Teams are Working in Silos
Without structure, every decision started from zero.
What happens if these issues continue?
For Customers
Things feel unpredictable
Less confidence in what to do next
More drop-offs along the way
For Teams
More back-and-forth and rework
Decisions take longer
Harder to keep things consistent
For Business
Accessibility issues increase risk
Weaken brand experience
Missed opportunities to convert
The longer the system grows without structure, the harder it becomes to scale and fix later
Defining the System Principles
Creating a System that Brings Back Clarity, Consistency, and Scalability
To better understand the brand beyond the interface, we visited Blue Bottle cafés and observed how the environment communicated calmness, warmth, rhythm, and care through small details.
Those observations became the foundation for the principles behind Pour Over.
Calm Clarity
Clarity creates ease. Every element is designed to communicate simply and consistently across contexts.
Care and Intention
Every element is intentional. Components are reused with purpose, refined over time, and built as lasting patterns that scale without excess.
Cafe Warmth
Welcoming and easy to trust. Every detail is designed to feel inviting, helping users feel at ease, supported, and confident in their choices.
Designed for All
Accessibility and inclusivity are fundamental, not additive. We design with empathy for a wide range of users, ensuring that our experiences are usable, clear, and equitable.
Building the System
Building Flexible Foundations for Scale
Rather than redesigning screens one by one, we focused on building a flexible system that could scale across Blue Bottle Coffee’s evolving ecosystem.
We approached the system in layers, starting with foundational tokens and visual styles, then expanding into reusable components, patterns, and documentation that could support both design consistency and faster collaboration across teams.
Building Shared Foundations Before Components
We started by building the foundational layer of the system, including layout grids, spacing, typography, color, media, icons, and illustrations. These foundations established a shared visual language that reusable components could consistently build upon.
To make the system intuitive for both designers and developers, we structured our design tokens using Figma Variables. Instead of relying on inconsistent naming or raw values, tokens created a clear relationship between brand styles, semantic meaning, and implementation usage.
Once tokens were introduced, consistency became easier to scale across the experience, from spacing and typography to accessibility and interaction behaviors.
Designing Components and Patterns for Scale
With the foundations established, we expanded into reusable components and scalable patterns designed to reduce inconsistency and support faster workflows across the ecosystem.
My primary contributions focused on the color system, spacing tokens, cards, cart panel, labels and tags, and form patterns. Instead of designing components as isolated UI elements, we focused on flexibility and repeatability. Components needed to support multiple use cases while remaining visually cohesive and easy to implement across pages.
Consolidating Patterns to Reduce Complexity
One of the biggest challenges uncovered during the audit was the amount of duplicated and overlapping UI patterns across the experience. We found multiple dropdown variants, fragmented card systems, inconsistent navigation structures, overlapping banner layouts, and unclear label logic across the site. Rather than redesigning every component individually, we focused on consolidation.
One particular example here is that multiple card variations were merged into scalable reusable patterns. Product labels were standardized through clearer semantic logic, while spacing guidance was clarified through token usage and implementation standards.
The goal wasn’t just visual consistency. It was reducing ambiguity so teams could move faster with less decision fatigue.
Testing & Iterating
Testing the UI Kit Like a Real Product and Iterating Based on Feedback
To validate whether the UI Kit was actually intuitive to use, we conducted usability testing on the initial version of the system. We asked four users to recreate the homepage, espresso collection page, and Hayes Valley Espresso PDP using only the Figma UI Kit while thinking out loud throughout the process.
4/4
users found the token system intuitive and easy to apply consistently.
3/4
users successfully recreated the pages using the UI Kit.
3/4
users mentioned missing banner and product detail patterns made the design process unnecessarily long.
We made iterations of the UI Kit based on the user testing results.
After hearing user's thoughts in the testing sessions, we tweaked our design.
Before
Users had to assemble complex layouts manually from multiple components.
Iteration
We introduced reusable banner and product-detail patterns to reduce assembly friction and speed up page creation.
Documentation
Design Systems are Cultural Changes Disguised as UI Kits.
Design systems aren’t just about UI. It also create alignment in how teams design, build, and scale products together.
That’s why alongside the UI Kit, we created a centralized documentation hub on Zeroheight, serving as a single source of truth for components, patterns, accessibility, and implementation guidance.
Read on Zeroheight
Outcome
What Are the Benefits of Using Pour Over?
Pour Over transformed the experience from a fragmented collection of interfaces into a more cohesive and scalable system.
For Customers
The experience became more predictable, accessible, and easier to navigate through consistent interaction patterns and clearer hierarchy.
For Teams
Eliminate waiting periods by enabling immediate progression from interest to registration and payment.
For the Business
The system created stronger consistency across touchpoints while establishing a scalable foundation for future product growth.
Communicating the Long-Term Vision of the System
To present Pour Over, our team created a pitch deck focused not just on UI components, but on the long-term operational value of the system itself. Rather than simply showcasing screens, we communicated why the system mattered, how it supported cross-functional collaboration, and how it could evolve alongside Blue Bottle Coffee’s growing ecosystem.
The presentation walked stakeholders through both the structure of the system and the broader impact it could have across teams, users, and the business over time.
Link to Figma Slides
Reflection
Design Systems are Cultural Change Disguised as UI kits
I learned that building a design system isn't just about UI Kits. It's a shared communicate system for designers and developers to communicate, align, collaborate, and make decisions together.
I also learned that design systems should be usability tested just like any other product. The users of a design system are designers and developers themselves, so understanding how they search, build, and make decisions is just as important as the interface itself.
Most importantly, this project taught me that successful systems are never finished. They continuously evolve alongside the products and teams they support.
Figma UI Kit
Reusable components, tokens, and patterns designed for scalability. Available to download and use in Figma.
Link to Figma
Design System Documentation
A living documentation for implementation, accessibility, and usage guidance on Zeroheight.
Read on Zeroheight
Pitch Deck
The final pitch deck to communicate the value and long-term vision of the system. Presented on May 2026.
Link to Figma Slides
Let’s build something meaningful together.
© 2026 Gloria. Made with ☕ and 🍮
Let’s build something meaningful together.
© 2026 Gloria. Made with ☕ and 🍮
Pour Over Design System
Restoring Precision and Care to Blue Bottle Coffee’s Digital Experience
Overview
Led the team to create an unofficial design system for Blue Bottle Coffee’s eCommerce experience to improve consistency, accessibility, and scalability across the product ecosystem. Pour Over is inspired by Blue Bottle’s philosophy of precision, care, and intentionality, which includes a scalable UI Kit and centralized documentation system on Zeroheight to help teams design, build, and scale the product with more clarity, consistency, and alignment.
My Role
Product Designer
Project Manager
Tools
Figma
Zeroheight
Accessibility Checker
Team
Gloria Yang
Claire Paisley
Mengqi Cao
Timeline
3 months
Feb – May 2026
Problem
A Brand Built on Precision and Care, But the Digital Experience Has Lost That.
Blue Bottle Coffee built on precision, care, and intentionality.
From the pour-over brewing method to the café experience, every interaction feels thoughtful, calm, and carefully crafted. The experience encourages people to slow down and pay attention to the details.
But when we looked at the website, the digital experience no longer reflected those same values.
Across the site, layouts shifted between pages, interaction patterns behaved differently, and accessibility issues existed across critical experiences. What should have felt cohesive instead felt fragmented and inconsistent.
Problem 1
Too many inconsistent components creates fragmented experience
Problem 2
Accessibility failures leave users behind
Problem 3
Too many redundant variants creating decision fatigue for teams
To address these issues at scale, we needed more than isolated fixes. The underlying problem was the lack of a shared system guiding how products should be designed and built.
Solution
Introducing Pour Over Design System
Pour Over is an unofficial design system inspired by Blue Bottle Coffee’s philosophy of precision, care, and intentionality to create clarity, reduce friction, and ensure every experience feels consistent and thoughtful.
The system combines a scalable UI Kit, centralized documentation, and presentation storytelling to support both product execution and cross-functional alignment.
Figma UI Kit
Reusable components, tokens, and patterns designed for scalability. Available to download and use in Figma.
Link to Figma
Design System Documentation
A living documentation for implementation, accessibility, and usage guidance on Zeroheight.
Read on Zeroheight
Pitch Deck
The final pitch deck to communicate the value and long-term vision of the system. Presented on May 2026.
Link to Figma Slides
Deconstructing the Website
Understanding the Experience Before Designing the System
We started by deconstructing Blue Bottle Coffee’s website to better understand the current experience and identify the biggest usability and systems issues across the product ecosystem.
Shortly after our initial audit, Blue Bottle Coffee was acquired by Luckin Coffee and released a major website update while we were actively building the system. This required us to conduct a second deconstruction of the site to better understand the updated layouts, interaction patterns, and product structure.
We started by deconstructing Blue Bottle Coffee’s website to better understand the current experience and identify the biggest usability and systems issues across the product ecosystem.
Key Findings
Three Patterns Consistently Appeared Across the Experience
Problem 1 – Inconsistency
Customers
Too many inconsistent components creates fragmented experience
Inconsistent patterns slow users down and make the product feel unreliable.
Problem 2 – Accessibility
Customers
Business
Accessibility failures leave users behind
We identified multiple WCAG violations across the experience
Invalid ARIA labels on pagination (4.1.2 Name, Role, Value)
Video loop with no pause control (2.2.2 Pause, Stop, Hide)
Insufficient color contrast on video overlays (AAA Large Text)
These aren't just technical issues, they exclude users who rely on assistive technologies.
Fails WCAG 2.2.2 Pause, Stop, Hide
Any moving content that starts automatically must have controls to pause, stop or hide it.
Fails AAA Large Text
Required Contrast Ratio: 4.5:1
Current Contrast Ratio: 1.54:1
Problem 3 – Decision Tax
Team
Too many variants create a hidden tax on every decision
Teams spend more time deciding what to use than actually building, due to unclear guidance, leading to rework and slower execution.
Why were these issues happening?
There wasn’t a Shared System Guiding Decisions.
No Single Source of Truth
No Standards or Guardrails
Teams are Working in Silos
Without structure, every decision started from zero.
What happens if these issues continue?
For Customers
Things feel unpredictable
Less confidence in what to do next
More drop-offs along the way
For Teams
More back-and-forth and rework
Decisions take longer
Harder to keep things consistent
For Business
Accessibility issues increase risk
Weaken brand experience
Missed opportunities to convert
The longer the system grows without structure, the harder it becomes to scale and fix later
Defining the System Principles
Creating a System that Brings Back Clarity, Consistency, and Scalability
To better understand the brand beyond the interface, we visited Blue Bottle cafés and observed how the environment communicated calmness, warmth, rhythm, and care through small details.
Those observations became the foundation for the principles behind Pour Over.
Calm Clarity
Clarity creates ease. Every element is designed to communicate simply and consistently across contexts.
Care and Intention
Every element is intentional. Components are reused with purpose, refined over time, and built as lasting patterns that scale without excess.
Cafe Warmth
Welcoming and easy to trust. Every detail is designed to feel inviting, helping users feel at ease, supported, and confident in their choices.
Designed for All
Accessibility and inclusivity are fundamental, not additive. We design with empathy for a wide range of users, ensuring that our experiences are usable, clear, and equitable.
Building the System
Building Flexible Foundations for Scale
Rather than redesigning screens one by one, we focused on building a flexible system that could scale across Blue Bottle Coffee’s evolving ecosystem.
We approached the system in layers, starting with foundational tokens and visual styles, then expanding into reusable components, patterns, and documentation that could support both design consistency and faster collaboration across teams.
Building Shared Foundations Before Components
We started by building the foundational layer of the system, including layout grids, spacing, typography, color, media, icons, and illustrations. These foundations established a shared visual language that reusable components could consistently build upon.
To make the system intuitive for both designers and developers, we structured our design tokens using Figma Variables. Instead of relying on inconsistent naming or raw values, tokens created a clear relationship between brand styles, semantic meaning, and implementation usage.
Once tokens were introduced, consistency became easier to scale across the experience, from spacing and typography to accessibility and interaction behaviors.
Designing Components and Patterns for Scale
With the foundations established, we expanded into reusable components and scalable patterns designed to reduce inconsistency and support faster workflows across the ecosystem.
My primary contributions focused on the color system, spacing tokens, cards, cart panel, labels and tags, and form patterns. Instead of designing components as isolated UI elements, we focused on flexibility and repeatability. Components needed to support multiple use cases while remaining visually cohesive and easy to implement across pages.
Consolidating Patterns to Reduce Complexity
One of the biggest challenges uncovered during the audit was the amount of duplicated and overlapping UI patterns across the experience. We found multiple dropdown variants, fragmented card systems, inconsistent navigation structures, overlapping banner layouts, and unclear label logic across the site. Rather than redesigning every component individually, we focused on consolidation.
One particular example here is that multiple card variations were merged into scalable reusable patterns. Product labels were standardized through clearer semantic logic, while spacing guidance was clarified through token usage and implementation standards.
The goal wasn’t just visual consistency. It was reducing ambiguity so teams could move faster with less decision fatigue.
Testing & Iterating
Testing the UI Kit Like a Real Product and Iterating Based on Feedback
To validate whether the UI Kit was actually intuitive to use, we conducted usability testing on the initial version of the system. We asked four users to recreate the homepage, espresso collection page, and Hayes Valley Espresso PDP using only the Figma UI Kit while thinking out loud throughout the process.
4/4
users found the token system intuitive and easy to apply consistently.
3/4
users successfully recreated the pages using the UI Kit.
3/4
users mentioned missing banner and product detail patterns made the design process unnecessarily long.
We made iterations of the UI Kit based on the user testing results.
After hearing user's thoughts in the testing sessions, we tweaked our design.
Before
Users had to assemble complex layouts manually from multiple components.
Iteration
We introduced reusable banner and product-detail patterns to reduce assembly friction and speed up page creation.
Documentation
Design Systems are Cultural Changes Disguised as UI Kits.
Design systems aren’t just about UI. It also create alignment in how teams design, build, and scale products together.
That’s why alongside the UI Kit, we created a centralized documentation hub on Zeroheight, serving as a single source of truth for components, patterns, accessibility, and implementation guidance.
Read on Zeroheight
Outcome
What Are the Benefits of Using Pour Over?
Pour Over transformed the experience from a fragmented collection of interfaces into a more cohesive and scalable system.
For Customers
The experience became more predictable, accessible, and easier to navigate through consistent interaction patterns and clearer hierarchy.
For Teams
Eliminate waiting periods by enabling immediate progression from interest to registration and payment.
For the Business
The system created stronger consistency across touchpoints while establishing a scalable foundation for future product growth.
Communicating the Long-Term Vision of the System
To present Pour Over, our team created a pitch deck focused not just on UI components, but on the long-term operational value of the system itself. Rather than simply showcasing screens, we communicated why the system mattered, how it supported cross-functional collaboration, and how it could evolve alongside Blue Bottle Coffee’s growing ecosystem.
The presentation walked stakeholders through both the structure of the system and the broader impact it could have across teams, users, and the business over time.
Link to Figma Slides
Reflection
Design Systems are Cultural Change Disguised as UI kits
I learned that building a design system isn't just about UI Kits. It's a shared communicate system for designers and developers to communicate, align, collaborate, and make decisions together.
I also learned that design systems should be usability tested just like any other product. The users of a design system are designers and developers themselves, so understanding how they search, build, and make decisions is just as important as the interface itself.
Most importantly, this project taught me that successful systems are never finished. They continuously evolve alongside the products and teams they support.
Figma UI Kit
Reusable components, tokens, and patterns designed for scalability. Available to download and use in Figma.
Link to Figma
Design System Documentation
A living documentation for implementation, accessibility, and usage guidance on Zeroheight.
Read on Zeroheight
Pitch Deck
The final pitch deck to communicate the value and long-term vision of the system. Presented on May 2026.
Link to Figma Slides
Let’s build something meaningful together.
© 2026 Gloria. Made with ☕ and 🍮
Pour Over Design System
Restoring Precision and Care to Blue Bottle Coffee’s Digital Experience
Overview
Led the team to create an unofficial design system for Blue Bottle Coffee’s eCommerce experience to improve consistency, accessibility, and scalability across the product ecosystem. Pour Over is inspired by Blue Bottle’s philosophy of precision, care, and intentionality, which includes a scalable UI Kit and centralized documentation system on Zeroheight to help teams design, build, and scale the product with more clarity, consistency, and alignment.
My Role
Product Designer
Project Manager
Tools
Figma
Zeroheight
Accessibility Checker
Team
Gloria Yang
Claire Paisley
Mengqi Cao
Timeline
3 months
Feb – May 2026
Problem
A Brand Built on Precision and Care, But the Digital Experience Has Lost That.
Blue Bottle Coffee built on precision, care, and intentionality.
From the pour-over brewing method to the café experience, every interaction feels thoughtful, calm, and carefully crafted. The experience encourages people to slow down and pay attention to the details.
But when we looked at the website, the digital experience no longer reflected those same values.
Across the site, layouts shifted between pages, interaction patterns behaved differently, and accessibility issues existed across critical experiences. What should have felt cohesive instead felt fragmented and inconsistent.
Problem 1
Too many inconsistent components creates fragmented experience
Problem 2
Accessibility failures leave users behind
Problem 3
Too many redundant variants creating decision fatigue for teams
To address these issues at scale, we needed more than isolated fixes. The underlying problem was the lack of a shared system guiding how products should be designed and built.
Solution
Introducing Pour Over Design System
Pour Over is an unofficial design system inspired by Blue Bottle Coffee’s philosophy of precision, care, and intentionality to create clarity, reduce friction, and ensure every experience feels consistent and thoughtful.
The system combines a scalable UI Kit, centralized documentation, and presentation storytelling to support both product execution and cross-functional alignment.
Figma UI Kit
Reusable components, tokens, and patterns designed for scalability. Available to download and use in Figma.
Link to Figma
Design System Documentation
A living documentation for implementation, accessibility, and usage guidance on Zeroheight.
Read on Zeroheight
Pitch Deck
The final pitch deck to communicate the value and long-term vision of the system. Presented on May 2026.
Link to Figma Slides
Deconstructing the Website
Understanding the Experience Before Designing the System
We started by deconstructing Blue Bottle Coffee’s website to better understand the current experience and identify the biggest usability and systems issues across the product ecosystem.
Shortly after our initial audit, Blue Bottle Coffee was acquired by Luckin Coffee and released a major website update while we were actively building the system. This required us to conduct a second deconstruction of the site to better understand the updated layouts, interaction patterns, and product structure.
We started by deconstructing Blue Bottle Coffee’s website to better understand the current experience and identify the biggest usability and systems issues across the product ecosystem.
Key Findings
Three Patterns Consistently Appeared Across the Experience
Problem 1 – Inconsistency
Customers
Too many inconsistent components creates fragmented experience
Inconsistent patterns slow users down and make the product feel unreliable.
Problem 2 – Accessibility
Customers
Business
Accessibility failures leave users behind
We identified multiple WCAG violations across the experience
Invalid ARIA labels on pagination (4.1.2 Name, Role, Value)
Video loop with no pause control (2.2.2 Pause, Stop, Hide)
Insufficient color contrast on video overlays (AAA Large Text)
These aren't just technical issues, they exclude users who rely on assistive technologies.
Fails WCAG 2.2.2 Pause, Stop, Hide
Any moving content that starts automatically must have controls to pause, stop or hide it.
Fails AAA Large Text
Required Contrast Ratio: 4.5:1
Current Contrast Ratio: 1.54:1
Problem 3 – Decision Tax
Team
Too many variants create a hidden tax on every decision
Teams spend more time deciding what to use than actually building, due to unclear guidance, leading to rework and slower execution.
Why were these issues happening?
There wasn’t a Shared System Guiding Decisions.
No Single Source of Truth
No Standards or Guardrails
Teams are Working in Silos
Without structure, every decision started from zero.
What happens if these issues continue?
For Customers
Things feel unpredictable
Less confidence in what to do next
More drop-offs along the way
For Teams
More back-and-forth and rework
Decisions take longer
Harder to keep things consistent
For Business
Accessibility issues increase risk
Weaken brand experience
Missed opportunities to convert
The longer the system grows without structure, the harder it becomes to scale and fix later
Defining the System Principles
Creating a System that Brings Back Clarity, Consistency, and Scalability
To better understand the brand beyond the interface, we visited Blue Bottle cafés and observed how the environment communicated calmness, warmth, rhythm, and care through small details.
Those observations became the foundation for the principles behind Pour Over.
Calm Clarity
Clarity creates ease. Every element is designed to communicate simply and consistently across contexts.
Care and Intention
Every element is intentional. Components are reused with purpose, refined over time, and built as lasting patterns that scale without excess.
Cafe Warmth
Welcoming and easy to trust. Every detail is designed to feel inviting, helping users feel at ease, supported, and confident in their choices.
Designed for All
Accessibility and inclusivity are fundamental, not additive. We design with empathy for a wide range of users, ensuring that our experiences are usable, clear, and equitable.
Building the System
Building Flexible Foundations for Scale
Rather than redesigning screens one by one, we focused on building a flexible system that could scale across Blue Bottle Coffee’s evolving ecosystem.
We approached the system in layers, starting with foundational tokens and visual styles, then expanding into reusable components, patterns, and documentation that could support both design consistency and faster collaboration across teams.
Building Shared Foundations Before Components
We started by building the foundational layer of the system, including layout grids, spacing, typography, color, media, icons, and illustrations. These foundations established a shared visual language that reusable components could consistently build upon.
To make the system intuitive for both designers and developers, we structured our design tokens using Figma Variables. Instead of relying on inconsistent naming or raw values, tokens created a clear relationship between brand styles, semantic meaning, and implementation usage.
Once tokens were introduced, consistency became easier to scale across the experience, from spacing and typography to accessibility and interaction behaviors.
Designing Components and Patterns for Scale
With the foundations established, we expanded into reusable components and scalable patterns designed to reduce inconsistency and support faster workflows across the ecosystem.
My primary contributions focused on the color system, spacing tokens, cards, cart panel, labels and tags, and form patterns. Instead of designing components as isolated UI elements, we focused on flexibility and repeatability. Components needed to support multiple use cases while remaining visually cohesive and easy to implement across pages.
Consolidating Patterns to Reduce Complexity
One of the biggest challenges uncovered during the audit was the amount of duplicated and overlapping UI patterns across the experience. We found multiple dropdown variants, fragmented card systems, inconsistent navigation structures, overlapping banner layouts, and unclear label logic across the site. Rather than redesigning every component individually, we focused on consolidation.
One particular example here is that multiple card variations were merged into scalable reusable patterns. Product labels were standardized through clearer semantic logic, while spacing guidance was clarified through token usage and implementation standards.
The goal wasn’t just visual consistency. It was reducing ambiguity so teams could move faster with less decision fatigue.
Testing & Iterating
Testing the UI Kit Like a Real Product and Iterating Based on Feedback
To validate whether the UI Kit was actually intuitive to use, we conducted usability testing on the initial version of the system. We asked four users to recreate the homepage, espresso collection page, and Hayes Valley Espresso PDP using only the Figma UI Kit while thinking out loud throughout the process.
4/4
users found the token system intuitive and easy to apply consistently.
3/4
users successfully recreated the pages using the UI Kit.
3/4
users mentioned missing banner and product detail patterns made the design process unnecessarily long.
We made iterations of the UI Kit based on the user testing results.
After hearing user's thoughts in the testing sessions, we tweaked our design.
Before
Users had to assemble complex layouts manually from multiple components.
Iteration
We introduced reusable banner and product-detail patterns to reduce assembly friction and speed up page creation.
Documentation
Design Systems are Cultural Changes Disguised as UI Kits.
Design systems aren’t just about UI. It also create alignment in how teams design, build, and scale products together.
That’s why alongside the UI Kit, we created a centralized documentation hub on Zeroheight, serving as a single source of truth for components, patterns, accessibility, and implementation guidance.
Read on Zeroheight
Outcome
What Are the Benefits of Using Pour Over?
Pour Over transformed the experience from a fragmented collection of interfaces into a more cohesive and scalable system.
For Customers
The experience became more predictable, accessible, and easier to navigate through consistent interaction patterns and clearer hierarchy.
For Teams
Eliminate waiting periods by enabling immediate progression from interest to registration and payment.
For the Business
The system created stronger consistency across touchpoints while establishing a scalable foundation for future product growth.
Communicating the Long-Term Vision of the System
To present Pour Over, our team created a pitch deck focused not just on UI components, but on the long-term operational value of the system itself. Rather than simply showcasing screens, we communicated why the system mattered, how it supported cross-functional collaboration, and how it could evolve alongside Blue Bottle Coffee’s growing ecosystem.
The presentation walked stakeholders through both the structure of the system and the broader impact it could have across teams, users, and the business over time.
Link to Figma Slides
Reflection
Design Systems are Cultural Change Disguised as UI kits
I learned that building a design system isn't just about UI Kits. It's a shared communicate system for designers and developers to communicate, align, collaborate, and make decisions together.
I also learned that design systems should be usability tested just like any other product. The users of a design system are designers and developers themselves, so understanding how they search, build, and make decisions is just as important as the interface itself.
Most importantly, this project taught me that successful systems are never finished. They continuously evolve alongside the products and teams they support.
Figma UI Kit
Reusable components, tokens, and patterns designed for scalability. Available to download and use in Figma.
Link to Figma
Design System Documentation
A living documentation for implementation, accessibility, and usage guidance on Zeroheight.
Read on Zeroheight
Pitch Deck
The final pitch deck to communicate the value and long-term vision of the system. Presented on May 2026.
Link to Figma Slides
Let’s build something meaningful together.
© 2026 Gloria. Made with ☕ and 🍮