Meijer
Meijer
Meijer
Acres Design System - Systemic audit and pattern creation
Acres Design System - Systemic audit and pattern creation
Acres Design System - Systemic audit and pattern creation
Primary role
Primary role
Design System Lead
Design System Lead
Year
Year
2025 - 2026
2025 - 2026
Main tools used
Main tools used
Figma, Chromatic, Figma MCP
Figma, Chromatic, Figma MCP
System refinements mapped
to scale the system beyond one person's management
Complex patterns created
to supercharge product teams to use Acres
Project goal
Unlock more efficient adoptions and clear any debt/blockers for Acres with an audit, component creation/refinement and recommendations for more effective implementation
Unlock more efficient adoptions and clear any debt/blockers for Acres with an audit, component creation/refinement and recommendations for more effective implementation
Project description
Meijer’s Acres Design System had strong foundations but depended entirely on one person to maintain it. A single point of failure that limited adoption and scalability.
As Design System Lead, I directed two designers to run a full systemic audit and rebuild governance so Acres could scale past one champion.
Meijer’s Acres Design System had strong foundations but depended entirely on one person to maintain it. A single point of failure that limited adoption and scalability.
As Design System Lead, I directed two designers to run a full systemic audit and rebuild governance so Acres could scale past one champion.
Problems to solve
I prioritized governance and token clarity first because the audit showed designers weren’t avoiding the system out of preference, they were avoiding it because no one had defined ownership or explained how tokens should be applied, so fixing structure had to come before adding more components.
One of our example audit screens to document opportunities for improvement, what was working well and more
One of our example audit screens to document opportunities for improvement, what was working well and more
The audit - Where it got us to
By facilitating various workshops to identify challenges and opportunities in the system, understand current processes such as making templates for Homepage for their main website and their current design system maturity, we understood their goal: to take them from a design system to something more advanced that included establishing certain governance and collaborating on a roadmap where everyone can understand the level of effort and value out of these systems enhancements.
After presenting the results or our audit, we decided to focus on these key aspects along with many others not listed here. I identified the lack of base components as the highest-leverage fix. Without them, every component change had to be manually propagated across dozens of variants. I chose to restructure the architecture around base components first, before adding new patterns, because it meant every future component we built would inherit fixes automatically instead of adding to the maintenance backlog.
By facilitating various workshops to identify challenges and opportunities in the system, understand current processes such as making templates for Homepage for their main website and their current design system maturity, we understood their goal: to take them from a design system to something more advanced that included establishing certain governance and collaborating on a roadmap where everyone can understand the level of effort and value out of these systems enhancements.
After presenting the results or our audit, we decided to focus on these key aspects along with many others not listed here. I identified the lack of base components as the highest-leverage fix. Without them, every component change had to be manually propagated across dozens of variants. I chose to restructure the architecture around base components first, before adding new patterns, because it meant every future component we built would inherit fixes automatically instead of adding to the maintenance backlog.
The workflow - let's create some patterns!
After agreeing on a component backlog for their homepage template, all greater patterns were organized in a PI initiative planning backlog/roadmap, which turned into a spring backlog which turned into many additional components and patterns to give designers a better chance at understanding what they were looking at.
I structured the backlog into a phased roadmap with defined meeting cadences tied to their in-house design system designer, so component and pattern work stayed visible and prioritized instead of ad hoc. This turned a one-person maintenance model into a repeatable process the Meijer team could run without my continued involvement.
After agreeing on a component backlog for their homepage template, all greater patterns were organized in a PI initiative planning backlog/roadmap, which turned into a spring backlog which turned into many additional components and patterns to give designers a better chance at understanding what they were looking at.
I structured the backlog into a phased roadmap with defined meeting cadences tied to their in-house design system designer, so component and pattern work stayed visible and prioritized instead of ad hoc. This turned a one-person maintenance model into a repeatable process the Meijer team could run without my continued involvement.
Base component sections example to help designers not feel overwhelmed with properties
Streamlined documentation example to show in a more succinct fashion certain configurations
Interaction states became crucial to be laid out in knowing how they played a part in the layout
Template creation!
After creating many of the components and patterns they needed, we placed them not only into working templates, but living documents of how these will be later used in a Payload CMS system for marketers to have guidance of what content on the page is allowed, what is able to be customized and what templates are used in what contexts.
Marketers were previously rebuilding seasonal promotion pages from scratch each time because there was no reference for what content was customizable versus fixed. Along with another designer I managed, we designed the template guidance specifically to close that gap, showing exactly which page zones marketers could edit inside Payload CMS without design or dev involvement.
After creating many of the components and patterns they needed, we placed them not only into working templates, but living documents of how these will be later used in a Payload CMS system for marketers to have guidance of what content on the page is allowed, what is able to be customized and what templates are used in what contexts.
Marketers were previously rebuilding seasonal promotion pages from scratch each time because there was no reference for what content was customizable versus fixed. Along with another designer I managed, we designed the template guidance specifically to close that gap, showing exactly which page zones marketers could edit inside Payload CMS without design or dev involvement.
Example of their page template guidance for various seasonal promotions, events and sales
What happened after the work
With Acres’ foundation stabilized, I extended the same base-component and governance model to pharmacy pages, product page templates, and token refinements. This proved the framework scaled beyond the original homepage scope. That same governance model became the starting point for a second, internal-only design system Meijer asked me to help stand up from scratch.
With Acres’ foundation stabilized, I extended the same base-component and governance model to pharmacy pages, product page templates, and token refinements. This proved the framework scaled beyond the original homepage scope. That same governance model became the starting point for a second, internal-only design system Meijer asked me to help stand up from scratch.
Additional template work, component and documentation, oh my!
After project reflection
The audit and governance model I put in place moved Acres from a single-person-dependent system to a repeatable, team-run process, validated when a Meijer stakeholder expanded our contract scope to extend the same approach into a second, internal design system. Being embedded with their team through deadlines, developer handoffs and stakeholder reviews made that trust possible.
The audit and governance model I put in place moved Acres from a single-person-dependent system to a repeatable, team-run process, validated when a Meijer stakeholder expanded our contract scope to extend the same approach into a second, internal design system. Being embedded with their team through deadlines, developer handoffs and stakeholder reviews made that trust possible.
System refinements mapped
to scale the system beyond one person's management
Complex patterns created
to supercharge product teams to use Acres