Coca-Cola Freestyle: NCUI Component System.
Architected a scalable UI design system and mapped seamless user journeys for the Freestyle operating system. Delivered dev-ready Figma architecture to ensure a unified physical-digital experience.
"Built a comprehensive UI design system and interactive prototypes that standardized the user journey, eliminated design debt, and provided a single source of truth for engineering."
System-First Foundations
Before building individual screens, I worked from the system level to set up supported screen sizes, dashboard grids, color styles and shared visual rules[cite: 19]. Because the UI lives on physical equipment, hierarchy, spacing and touch targets still needed to read clearly across smaller displays without feeling like a compressed version of the larger screen[cite: 19].
Scalable Component Architecture
I created the UI by breaking a complex panel into reusable pieces like parent components, section components, and card groups[cite: 20]. I built a consistent visual shell for dashboard widgets, preserving hierarchy and tapability across small and medium responsive variants so the same content stayed readable without simply shrinking the large layout[cite: 20, 21].
Interaction Prototyping
A static mockup does not answer every UI question[cite: 25]. To map the user journey, I wired key paths in Figma to show entry points, open and close behavior, step progression and return states[cite: 25]. This interactive prototype showed how the UI behaves and reduced the amount of behavior that had to be interpreted from screenshots for engineering teams[cite: 25].
From States to Handoff
States & Controls
I documented the UI beyond the default state, designing expanded sections, selected states, disabled actions, and completion cards[cite: 22].
Task Patterns
I created a reusable visual pattern for instructions with a consistent image container, allowing task-specific illustrations to plug into the same component[cite: 23].
Library & Handoff
I separated dev-ready work from local or exploratory components so the status of the work was clear, and organized the file into Components, Screens, Prototypes and Local Components to keep the Figma file usable for the next person[cite: 24].