Project Overview
The BK self-ordering kiosk lacked a formal design system, making it difficult to evolve the experience over time. Day-to-day design work was highly complex due to inconsistent legacy designs, the absence of clear design rules, and limited component-based thinking.
To address this, we focused on defining and improving the existing experience through a scalable design system. The strategy prioritized creating a system that enabled incremental, low-risk improvements while maintaining continuity in the live kiosk experience.
To address this, we focused on defining and improving the existing experience through a scalable design system. The strategy prioritized creating a system that enabled incremental, low-risk improvements while maintaining continuity in the live kiosk experience.
Example of the legacy design and vendor-provided UI kit, lacking a defined component structure or consistent design patterns.
My Role
I led the overall design effort and planned the work for a team of two designers, ensuring we executed hands-on across the system. I managed project timelines, defined design outcomes, and established component anatomy and structure. Recognizing the need for a more scalable and cohesive design system, I initiated the first design inventory, documenting existing production components and identifying gaps, opportunities for improvement, and new elements required to expand the system. This work laid the foundation for a more unified, consistent experience aligned with the app’s broader design ecosystem.
Outcomes & Impact
In a short period, we conducted an extensive audit of the kiosk experience against the app design system. As a result, we rebuilt 107+ components, 22 styles, and introduced standardized user flow templates, culminating in the release of a new, fully usable design library.
• Optimized the design–engineering workflow by eliminating duplicated effort
• Enabled faster iteration on solutions
• Ensured consistency and coherence across products
• Supported teams in delivering unified user experiences
• Communicated a more modern and polished look and feel to guests
• Reduced rework and design repetition
Example of the proposed design system, showcasing a menu card component alongside its documentation.
Process
Establishing a systems foundation
I advocate for design systems as the backbone for scalable, cross-team delivery. In this project, the kiosk experience relied heavily on legacy designs. It was maintained in partnership with an external vendor, which made it challenging to introduce new components or evolve the UI efficiently. I had previously led the initial phase of the kiosk design system aligned with the North Star vision; however, the system required further definition and maturation to support ongoing development and a planned full UI refresh.
I advocate for design systems as the backbone for scalable, cross-team delivery. In this project, the kiosk experience relied heavily on legacy designs. It was maintained in partnership with an external vendor, which made it challenging to introduce new components or evolve the UI efficiently. I had previously led the initial phase of the kiosk design system aligned with the North Star vision; however, the system required further definition and maturation to support ongoing development and a planned full UI refresh.
Auditing and rationalizing the existing experience
I conducted a comprehensive audit of current kiosk screens and components, identifying inconsistencies, duplicated patterns, and gaps in component logic. Legacy designs were evaluated against system-ready principles to determine what could be standardized, refactored, or deprecated.
I conducted a comprehensive audit of current kiosk screens and components, identifying inconsistencies, duplicated patterns, and gaps in component logic. Legacy designs were evaluated against system-ready principles to determine what could be standardized, refactored, or deprecated.
Cross-platform pattern alignment
To promote consistency across touchpoints, I reviewed existing mobile app patterns and assessed how they could be translated to the kiosk context. This involved adapting interaction models, layout systems, and accessibility considerations for large-format, touch-first environments, while respecting the unique constraints of kiosk usage.
To promote consistency across touchpoints, I reviewed existing mobile app patterns and assessed how they could be translated to the kiosk context. This involved adapting interaction models, layout systems, and accessibility considerations for large-format, touch-first environments, while respecting the unique constraints of kiosk usage.
Execution planning and design leadership
I defined and planned the full Jira epic for the design system work, breaking it down into clear, actionable components and system-level initiatives. I supervised and ensured design quality across the work of two additional designers responsible for executing components and system updates, providing guidance, reviews, and alignment to maintain consistency and system integrity.
Designing for incremental adoption
Rather than a complete replacement, the system was designed to enable incremental improvements. This approach allowed the team and vendor to gradually introduce standardized components, reduce risk in a live environment, and create a clear handoff path for future system ownership and UI evolution.
Rather than a complete replacement, the system was designed to enable incremental improvements. This approach allowed the team and vendor to gradually introduce standardized components, reduce risk in a live environment, and create a clear handoff path for future system ownership and UI evolution.
Example of the proposed design system, showcasing a badge and button components alongside their documentation.
Takeways
Consistency at scale improves usability. Standardized interaction models and visual patterns create familiarity and reduce cognitive load, especially in high-traffic, public-facing environments like kiosks.
Collaboration improves when systems are shared. A centralized design system creates a common language across internal teams and external vendors, streamlining communication and decision-making.
Education drives successful adoption. Teaching teams how to use and extend the system ensures long-term sustainability and prevents design drift across platforms.
Incremental system adoption lowers risk. In live environments such as kiosks, a phased, system-led approach allows for continuous improvement without disrupting the user experience.
Design systems are essential for multi-surface ecosystems. A shared system enables consistent experiences across kiosks, mobile, web, and other touchpoints while respecting the unique constraints of each surface.
