Acres
Design System
The Acres Design System encompasses foundational elements, user interface components, accessibility guidance, and more to ensure a cohesive environment for Meijer’s digital products.
Client:
Meijer
Team:
David Meldrum
Micah Fegley
Zach Ward
Services:
UX/UI
Design Libraries
Icon Set
Guidelines
Industry:
Retail & Consumer
Date:
Winter 2019—2024
Brief History
Before Acres became a team in 2020, Meijer used a design system built and delivered in 2018 by a third party design agency. The system included a website and Sketch library of web components, along with color tokens, type and icon sets, and a variety of basic web user interface components.
The UX team landed on the name Acres—a nod to “Thrifty Acres”, the store’s name before it evolved into “Meijer” in 1986. The name “Acres” was also appropriate based on its meaning: a unit of land. This new land would be the foundation on which the future design system was constructed.
Evolution
The third-party design system lacked documentation, accessibility guidance, variants, flexibility within the component elements, and more. To ensure the system continued to evolve, a dedicated team was assigned to the task.
The mission was to redesign a complete system of foundational elements and comprehensive components that our developers could build and maintain. Since Acres was the first design system team, we ran in to a lot of challenges with processes, overall structure, and development hand-off. We collaborated on systematic processes to overcome these challenges and to ensure our team could thrive in the new environment.
We also adopted Atomic Design methodology to approach the system’s recreation more deliberately, and to create more order and hierarchy within the system’s complexity.
Foundations
The visual expression of Meijer's brand, including color, type scale, grid, and more that are translated into tokens meant to be applied to components through detailed guidance.
Components
One of the key building blocks of a design system. A component's systematic reuse helps to create visual and functional consistency across products.
Patterns
Best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows.
Migration
When the decision was made to move from Sketch/Abstract/InVision/Zeplin to Figma, Acres was first on the scene, setting up the environment, organizing file structures, creating libraries, and rebuilding the design system from scratch. We approached the task by focusing on our userbase—the designers and developers who would be consuming the system daily.
This task also allowed us to gain knowledge of the intricacies of Figma, setting up collaborative meetings to discuss proper construction methods of components and foundational style organization. We discussed minute design details, including when to implement individual Figma features in our component builds, when to introduce interactions for prototyping, and systematic naming conventions to create a space that was easy to navigate and implement.
As the Foundation & Component files became holistic in Figma, it was time to migrate feature designers and introduce them to the new system. We held workshops teaching those unfamiliar with the software how to use it and how to implement the design system in their compositions.
This process helped the design system team to be more reliant on each other as we specified the tasks necessary for completing our goals.
Collaboration
To ensure the success of the design system, we improved how we collaborated with the developers and designers using it. We outlined communication issues in two areas: internal component development and external design adherence.
While we worked alongside developers to build our components on each respective platform, we noticed implementation issues. To solve these issues, we introduced design and development validation sessions and held them at different stages of each practice.
Acres designers were required to hold intermediate sessions with lead devs to ensure feasibility for each platform, and developers were required to hold validation sessions to confirm components were built to exact specification.
We also held many workshops to collaborate on a new design token system that better supported our components from the ground up. After trial, error, and discussion, we landed on an approach that allowed malleability and continued growth for the product.
Documentation
Acres design documentation is currently housed in the Figma libraries, promoting accessibility to the individuals consuming the system. Documentation pages display a variety of information, including: a brief overview, guidance, token usage, variants, interactive states, guidance, anatomy, and accessibility. The goal of the documentation is to provide a source of truth for both designers and developers to ensure consistency in implementation and usage.
