Kroger Supply Chain Design Systems & Standards
Leading design systems, standards, and research initiatives for Kroger's supply chain division. Establishing component libraries, dashboard best practices, data visualization standards, and unifying product experiences across 15+ internal applications.
Supply Chain Design System
Building a foundation for internal tool consistency
Kroger's main design system focused exclusively on customer-facing experiences. When I joined, there was little support for the unique needs of internal supply chain applications—complex data tables, specialized navigation patterns, and workflow-specific components.
I led the effort to expand the system specifically for supply chain tools, taking a grassroots approach to gain developer support and adoption.
Key Components Developed
Global Navigation & Footer
Standardized navigation patterns optimized for internal tools, with consistent header structures and contextual footers across applications.
Data Tables & Lists
Complex table components with sorting, filtering, and bulk actions tailored to supply chain workflows—handling inventory data, order tracking, and warehouse operations.
Interactive Components
Form inputs, modals, alerts, and other UI elements specifically designed for web-based internal applications with high data density.
Implementation & Adoption
With limited organizational support, we took a grassroots approach to implementation. I worked directly with development teams to:
- Set up an internal Storybook instance hosting functional React components
- Document component usage, props, and best practices for developers
- Make components consumable via npm for other teams to integrate
- Collect feedback from early adopters and iterate on component APIs
My Role
I led the entire initiative:
- Identified gaps between existing design system and supply chain needs
- Designed new components and patterns in Figma with full documentation
- Maintained Figma libraries for the design team to ensure consistency
- Collected feedback from designers and developers across teams
- Identified opportunities for improvement and iterated on the system
- Advocated for adoption and educated teams on system benefits
Dashboard Best Practices Guide
Democratizing effective dashboard design
A large number of teams relied on dashboards to communicate information to stakeholders, but support was inconsistent. Some teams had dedicated design resources, while others were building dashboards without any design guidance.
I collaborated with several designers to create a comprehensive Dashboard Best Practices guide that could help both designers and non-designers build actionable, insightful dashboards.
Guide Contents
Dashboard Fundamentals
Core principles for effective dashboard design: clarity, hierarchy, relevance, and actionability. What makes a dashboard useful vs. just informative.
Layout & Information Architecture
How to structure information, create visual hierarchy, and guide users to key insights. Grid systems, spacing, and grouping patterns.
PowerBI-Specific Guidelines
Since many teams used PowerBI, we included specific callouts: recommended visualizations, interaction patterns, performance considerations, and common pitfalls to avoid.
Making Dashboards Actionable
Not just showing data, but enabling decisions. How to highlight anomalies, provide context, and surface next steps.
Impact
The guide became a shared resource across the supply chain organization, enabling teams without dedicated design support to create more effective dashboards. It established a common language and standards for dashboard development, reducing inconsistency and improving stakeholder communication.
Data Visualization Library Research
Establishing standards for charts and graphs
With teams building dashboards across the organization, data visualization inconsistency was a growing problem. Different color schemes, chart styles, and visualization choices made it difficult to compare information across applications.
I conducted research into data visualization best practices and created a foundational library of chart types with standardized styling and usage guidelines.
Library Components
Functional Chart Templates
Built Figma components for common chart types—bar graphs, donut charts, line graphs—with proper proportions, spacing, and annotation patterns.
Color Palettes & Tokens
Established standardized color palettes for data visualization that balanced brand alignment with accessibility and clarity. Created Figma tokens for easy implementation.
Usage Guidelines
Documentation on when to use each chart type, how to handle edge cases, and best practices for labeling and legends.
This library provided a solid foundation for consistent data visualization across supply chain applications, making it easier for teams to create clear, accessible charts that followed established patterns.
Product Card Audit & Unification
Identifying inconsistency and planning for convergence
As teams rapidly built MVPs in isolated environments, a critical component had diverged: the product card. Nearly every supply chain application displayed product information, but each team had implemented it slightly differently.
I conducted a comprehensive audit of product card implementations across 15+ applications to understand the scope of inconsistency and develop a unification strategy.
What the Audit Revealed
While each product card looked different, the underlying information needs were remarkably similar. The differences came down to:
- Visual styling - Different spacing, typography, image treatments, and borders
- Information hierarchy - Same fields arranged in different orders
- Density - Some cards showing all information upfront, others being more minimal
- Actions - Inconsistent placement and styling of buttons and interactive elements
The opportunity was clear: we could create a unified component that would work across most use cases while improving consistency and reducing maintenance burden.
Unification Strategy
I developed a regional structure that could accommodate different information needs while maintaining visual consistency:
- Core regions - Image area, primary info, secondary details, actions
- Flexible content - Each region could show different fields based on context
- Progressive disclosure - Used Figma Make to prototype how less critical information could be revealed on interaction rather than shown upfront
Next Steps (Pre-Layoff)
Before being laid off, I had developed a presentation for product teams showing the benefits of adopting a shared component. The next phase would have involved socializing the design, gathering feedback, refining based on real use cases, and working with developers to build a shared component library. This work represented a significant opportunity to reduce duplication and improve user experience across the entire supply chain ecosystem.
What I Learned
1. Grassroots Adoption Requires Patience
Building a design system without top-down support means every team conversation, every demo, every small win matters. Progress is slower but buy-in is stronger because teams choose to adopt rather than being mandated to. The Storybook documentation and direct collaboration with developers were critical to gaining trust.
2. Standards Enable Non-Designers
The dashboard best practices guide showed that well-documented standards can democratize design. Teams without dedicated designers could still create effective dashboards by following clear guidelines. Sometimes the most impactful design work is making good design accessible to non-designers.
3. Audits Reveal Unification Opportunities
The product card audit demonstrated that what looks like chaos often has underlying patterns. Teams weren't being careless—they were solving real problems in isolation. A comprehensive audit can reveal where unification adds value and where variation is actually necessary. The key is understanding the "why" behind each difference.