Kroger
Kroger
Kroger
Citrus Design System - Native mobile components
Citrus Design System - Native mobile components
Citrus Design System - Native mobile components
Primary role
Primary role
Design System Lead
Design System Lead
Year
Year
2025
2025
Main tools used
Main tools used
Figma, Storybook
Figma, Storybook
23 iOS/Android patterns
created for swappable mockups for native interactions
Governance established
to structure components for designers more effectively
Project goal
Assist in refactoring their Citrus Design System to new native patterns for iOS and Android platforms.
Assist in refactoring their Citrus Design System to new native patterns for iOS and Android platforms.
Project description
Kroger’s product design teams were treating a fragmented UI Kit as if it were a mature design system. Designers rebuilt the same components three different ways because documentation was unreliable and no one knew who owned what aspects of the system.
Alongside a designer I managed, I led the effort to refactor Citrus into governed, native iOS/Android patterns and rebuild trust in the system.
Kroger’s product design teams were treating a fragmented UI Kit as if it were a mature design system. Designers rebuilt the same components three different ways because documentation was unreliable and no one knew who owned what aspects of the system.
Alongside a designer I managed, I led the effort to refactor Citrus into governed, native iOS/Android patterns and rebuild trust in the system.
Key decision
Rather than rewriting the whole system at once, I merged iOS and Android into shared component sets with platform variants which let designers keep momentum on the tight app-launch timeline while governance was built in parallel.
Previous iOS screen examples before using Liquid Glass
Previous iOS screen examples before using Liquid Glass
Initial start - How the work was going
In the beginning, I worked with a product director and design system leader at Kroger to start exploring these patterns and current processes were. Upon further inspection, I noticed certain inefficiencies in the product designers' process and wanted to learn more. Turns out that the old documentation and guidance for components caused issues for this process and I wanted to get to the bottom of why that was.
I recommended certain collaboration exercises to get to the bottom of what the right problems to solve was:
We mapped out their current system using stickies of what seemed to be working on what needed improvement and established their design system maturity as more of a UI Kit than an actual system that achieved parity.
We did a retro on the current system, talking with designers and developers to see what we the actual problems vs. the perceived ones.
Finalized all findings and recommended practical next steps tied to outcomes of each step.
In the beginning, I worked with a product director and design system leader at Kroger to start exploring these patterns and current processes were. Upon further inspection, I noticed certain inefficiencies in the product designers' process and wanted to learn more. Turns out that the old documentation and guidance for components caused issues for this process and I wanted to get to the bottom of why that was.
I recommended certain collaboration exercises to get to the bottom of what the right problems to solve was:
We mapped out their current system using stickies of what seemed to be working on what needed improvement and established their design system maturity as more of a UI Kit than an actual system that achieved parity.
We did a retro on the current system, talking with designers and developers to see what we the actual problems vs. the perceived ones.
Finalized all findings and recommended practical next steps tied to outcomes of each step.
Component examples where iOS and Android variants in the same Dialog component
Discovery uncovered potential
Upon completing initial discovery, I noticed some key elements to dig into while I was refining their pattern strategy for native mobile to then start more investigations on aspects of their processes.
Here were the conclusions from discovery and how I intended to find out more:
Adoption challenges stem from unclear documentation, a broad Figma skill gap among designers, which has resulted in a distrust of the current system.
Designers bypass system elements because current documentation is unreliable.
Current structure and collaboration ceremonies are not not fully supporting consistent system use.
No transparency for designers/developers on what components/patterns were being developed.
“Ambassadors” for the system towards stakeholders sin communicating the systems impact and potential.
Upon completing initial discovery, I noticed some key elements to dig into while I was refining their pattern strategy for native mobile to then start more investigations on aspects of their processes.
Here were the conclusions from discovery and how I intended to find out more:
Adoption challenges stem from unclear documentation, a broad Figma skill gap among designers, which has resulted in a distrust of the current system.
Designers bypass system elements because current documentation is unreliable.
Current structure and collaboration ceremonies are not not fully supporting consistent system use.
No transparency for designers/developers on what components/patterns were being developed.
“Ambassadors” for the system towards stakeholders sin communicating the systems impact and potential.
Example of Kroger designers using Liquid Glass components in real screens
What needed to happen next?
After the discovery while creating native components/patterns, I shifted my strategy to create iOS and Android aspects as variants in the same component sets. This solved the designers streamlining problems for now while I acted on more ways to implement the recommendations I had for the system and its governance:
Audit current team workflows such as meeting cadences, roles in the system and how others contribute.
Through a design system agile team model, start creating transparency in system work, deprecations, improvements through meetings, feedback sessions and sprint reviews to communicate impact and opportunities for improvement.
Communicate all changes via email updates, "Design System Ambassador" meetings and include designers in contribution models to feed back to the system.
Hold office hours and braintrust meetings for designers and developers to work and make sure everyone can contribute!
Here are some of the quotes from designers interviewed to give a picture of the scope and depth of this work:
After the discovery while creating native components/patterns, I shifted my strategy to create iOS and Android aspects as variants in the same component sets. This solved the designers streamlining problems for now while I acted on more ways to implement the recommendations I had for the system and its governance:
Audit current team workflows such as meeting cadences, roles in the system and how others contribute.
Through a design system agile team model, start creating transparency in system work, deprecations, improvements through meetings, feedback sessions and sprint reviews to communicate impact and opportunities for improvement.
Communicate all changes via email updates, "Design System Ambassador" meetings and include designers in contribution models to feed back to the system.
Hold office hours and braintrust meetings for designers and developers to work and make sure everyone can contribute!
Here are some of the quotes from designers interviewed to give a picture of the scope and depth of this work:
"Consistency comes from team culture, not from the system. We align within our team, but I'm not sure what other teams are doing."
"The design system is helpful when I know what I'm looking for , but discovery is hard. I end up building the same button three different ways” (Paraphrased for clarity)
I formulated ways to communicate changes and enhancements in Teams/Slack channels
After work research
After the work was completed, I conducted additional interviews with product designers to get a better glimpse of their experiences and what they think could be possible. I collated an executive summary and presentation to stakeholders:
Kroger's product design teams show moderate to strong enthusiasm for design systems but face significant challenges in adoption, documentation, and governance. While designers recognize the value of standardized components and patterns, fragmented processes, unclear contribution guidance and inconsistent documentation create friction/confusion in day-to-day work.
After the work was completed, I conducted additional interviews with product designers to get a better glimpse of their experiences and what they think could be possible. I collated an executive summary and presentation to stakeholders:
Kroger's product design teams show moderate to strong enthusiasm for design systems but face significant challenges in adoption, documentation, and governance. While designers recognize the value of standardized components and patterns, fragmented processes, unclear contribution guidance and inconsistent documentation create friction/confusion in day-to-day work.
After project reflection
After getting recommendations handed off and designs created, the phased maturity roadmap I built moved Citrus from a component library to a governed system with clear ownership, validated by the 6-month scope extension Kroger approved to keep the work going and a research report the team is using to plan headcount and the next system maturity phase.. Other aspects included:
Created a phased approach tailor made for their team to evolve their design system maturity.
Shared guidance on who to hire next to grow the team of system-dedicated people.
Gave developers encouragement on how to chat with designers about screens using the design system.
Left a detailed research report to action on what designers needed and looked forward to being grown in the future.
Other metrics include:
Reduced mobile screen design decisions by 50%
Extended stakeholder buy-in which resulted in a 6-month contract extension
Interviewed 6+ designers to research the current design system state.
After getting recommendations handed off and designs created, the phased maturity roadmap I built moved Citrus from a component library to a governed system with clear ownership, validated by the 6-month scope extension Kroger approved to keep the work going and a research report the team is using to plan headcount and the next system maturity phase.. Other aspects included:
Created a phased approach tailor made for their team to evolve their design system maturity.
Shared guidance on who to hire next to grow the team of system-dedicated people.
Gave developers encouragement on how to chat with designers about screens using the design system.
Left a detailed research report to action on what designers needed and looked forward to being grown in the future.
Other metrics include:
Reduced mobile screen design decisions by 50%
Extended stakeholder buy-in which resulted in a 6-month contract extension
Interviewed 6+ designers to research the current design system state.
23 iOS/Android patterns
created for swappable mockups for native interactions
Governance established
to structure components for designers more effectively
Additional component layout examples with documentation