Design system at Kroger
What is design system?
Why design system? (why do we need one? how does it help us in our work)
Kroger Design System (main principals; pillars; impact of the design system; Krogers many internal: apps for warehouses, manufacturing, stores, transportation, accounting, sourcing and supplying, and external: web and mobile customer experiences, delivery and pick up apps; digital environements)
Kroger Design System or KDS is a massive system that covers many facets and businesses at Kroger. It serves many departments, Customer experience, Associate Experience, Merchandise department, Supply Chain, Retail, Finance and Accounting and others. There are hundreds of products that it serves - costumer facing (from mobile phone to a desktop) to internal (from scanning devices, to phones, to tablets, to desktops). At such scale its a massive undertaking to manage it and iterate on it. (maybe some more detail on what is unique or special about KDS?)
SCMFA design system (why have a separate SCMFA design system; how does it differ from a Kroger design system?)
I work at SCMFA - Supply Chain Management Finance and Accounting. And we have a separate design system that is a child to a greater KDS. It follows KDS guidelines and styles. Why do we need a seperate design system within design system will you ask? Well first think of it as a chapter in a book rather than a separate design system. And secondly we deal with accountants predominantly, and their needs for components and patterns are different that those of associates in a store or customers. Instead of breaking and creating unique components (think table like excel) we branched off and started doing components that are tailored to unique needs of accountants.
Challenge
The KDS online documentation is a work in progress (currently its missing a bunch of things, like a filter component). And different libraries (MX, CX and SCMFA) have different components. For example there are two different date pickers. There is no filter in MX and CS design libraries, but there is one in SCMFA. Filter is a fairly standard component and it is definitely being used in teams in MX and CX departments. Which means that designers are recreating the wheel every time they need a filter. And probably make different filters each time. When searching for filter in Figma I got 45 files that use filter in CX alone (or at least name their component “filter”, I would bet there are more files that use filter but didn’t name it as such).
After scavenging for various filters I discovered that there are many variations:
How do you bring many teams together in a unified effort to build robust, extensive design system? At SCMFA we don’t really have a budget to maintain the system, we don’t have the bare bone - dedicated copy writers, QA, and devs. Not to mention product owner, product manager, tech director, content strategist, and additional dev and design talent. Is it even a design system if you don’t have the built out components? (I d say it’s rather a design library).
The thing that needs to happen is funding and stakeholder support. And so the stakeholders need to understand the value of a properly designed, developed and maintained design system.
Federator
I have volunteered to become a design system federator. I wanted to be closer to the team that works with design system, to learn form them, apply my knowledge and bring the challenges that I see in our projects to the attention of design system team (well at SCMFA its a design system team of 1 at the time of this writing). I was able to understand that 1 designer cant keep up with a lot of the things that are needed for a robust and up to date design system. But also without having a built out repository in GitHub it is hard to provide the value that the design system can. We lack funding, but also understanding of how much savings the design system would bring to us.
So I decided to take training in the area of design systems, so I can bring it back to Kroger. I did training from the design University with the name that really resonated with me “Design systems people want to use”. There were many helpful tips and. valuable information in it. But the thing that was radically new - is how to go about getting stakeholders on board with the design system effort. Instead of asking for funding ,
Calendar picker
I have designed a few components while being a federator. One of them is date picker. The process I follow while designing new components is fairly straightforward. First I do research on components in other design systems: Carbon, Material Design, Atlassian. At the same time I ask our design teams for context on where they use a date picker, what are the most common scenarios, any specific needs that they have. I then ask accountants these questions. The point of having a SCMFA specific design system is that it serves specific needs of accountants. In this case there wasn’t anything very unique about the date picker. one thing accountants requested is an option to show Periods instead of Month, since all accounting is done in a period. I have designed a few options and showed them to our federators team. We agreed that a survey will be a perfect tool to get feedback from the designers that will be using this component.
Based on the survey i have finalized the date picker, we have merged the branch with the main file and published the component for everyone to use.
