The Kroger Design System
Problem Statement: The consumer facing Kroger applications had grown exponentially from a feature and functionality perspective over 10 years. There were many overarching design and component discrepancies from a visual and interaction standpoint that needed to be realigned so to ensure we delivered a consistent end user experience for over 60 million+ Kroger users across the website, iOS and Android apps.
Project Goal: Align all of the consumer facing Kroger website and mobile app experiences to provide a consistent, industry leading experience for end users.
My Role: I was tasked with leading the project from a strategy, creation and definition for what the Kroger Design System would be. I had a team of 4 other designers and 26 developers that reported to me during the project.
Client
The Kroger Co.
Year
2017 - 2019
Process
I first began working on a component library for The Kroger Co.’s consumer facing eCommerce website with one developer. From our passion for standardizing the experience and building reusable components we built a coalition of other like-minded developers and designers at Kroger.
After building the initial coalition I started to identify a strategic vision for how we evolved the component library into a full blow Design System for the Kroger Co. that covered the consumer facing eCommerce website, our iOS and Android mobile apps.
I worked with my Director of Design at the time to put together a sales pitch and presentation to our VP of Customer Experience on the inconsistencies we have across our experiences and the value of aligning all of them to provide the best possible experience to our users.
After getting buy-in from our VP of Customer Experience I was able to kick off work with our team. I put together our first quarter’s worth of work in defining our design principles, major design standards with fonts, colors, etc and a plan to audit our experiences to capture our inconsistencies.
While I focused on crafting the design principles and standards our other designers started with a full audit of our consumer facing experiences with the website, iOS and Android apps. These full catalogs of our experiences started to easily identify our major pain point areas across our experiences from a components standpoint. This audit also fueled the prioritization of which components we would design first.
Component Roadmap
After the audits, I prioritized the components into a cataloged list that I kept track of to ensure we were continuing to move at pace and could share status updates with the respective stakeholders. This ultimately became our roadmap that guided us in the early stages.
User Journey & Card Sorting
While the user interface designers focused on component definition I started working directly with one of my UX designers to start understanding how our designers and developers would use the design system website to accomplish their jobs. We started by outlining the user journey each role would take and potential pitfalls. We conducted card sorting research with other designers at Kroger to understand how we could best layout the entire design system based on role.
Component Definition & Wireframing
From that research we started wireframing out the potential skeleton of the design system website. I leveraged our component roadmap to direct the user interface designers to start focusing on creating the design standards and defining the components themselves. We used our roadmap and audit as a guide based on the # of a components appearances across our experiences and the differences in style or appearance.
Measuring Value
As we continued down the path of definition we continued to set user adoption goals across our designers and developers to ensure Kroger was getting the proper business value out of the design system.
We tested with our developers and designers to understand how much time and money savings we were getting out of using pre-defined, pre-designed, and pre-built components to build our experiences.
Evolution of the Design System
As we continued to define and design new components, I focused on being an evangelist for the design system, presenting to Product Owners and Senior Leaders across the eCommerce business on the progress and value of it.
As the design system became more familiar to other parts of the organization I had the privilege of presenting to the Chief Technology Officer about the value of the design system and identified an opportunity for the system to evolve into providing standards not just for the eCommerce and end customer experience but also for all of our internal Kroger Associate facing experiences.
