Web & Mobile | Ace Hardware

Ace Design
System

Ace Hardware has multiple internal apps and services to help their teams. There was no design system to help guide the creation of new features , or the updates old features to have continuity.

‍How can we help developers, and make sure all our work is uniform across multiple platforms?
Figma hi-fi mock up of the digital design system for developers

TLDR

About

Ace Hardware is a co-op hardware store with hundreds of locations across the states and internationally. Ace's programs/teams that are for employees live in a system called AceNet.

AceNet is for inventory, checking customer orders, delivery services, learning platforms, changing SKUs, orders, conventions, and much more.

Even thought AceNet is such a critical role in Ace's functionality, AceNet has no design system, and with AceNet serving a different user than e-commerce it can't use the e-com system.

Project Details

Role: Lead UI
Team: AceNet UX team
Duration: Ongoing
Tools: Figma
Figma icon

Problem

The design system needs to cover five different teams all with all slightly different users.

How do we build a design system that can create unity but also flexibility of each team?

Goal

Build a design system for AceNet, but build it twice. Once in Figma for the designers with explanations on why design decision were made, and how to use them.
A second system with code and cdn for developers to just copy and past content to ensure it's always done right.

Challenge

Ace is huge and this is a heavy undertaking. There are so many apps, services, and content to dig through to find commonalities to build a system around.

User Knowlodge

While it may seem like the user is AceNet user, I wanted to look at user knowledge as the developers and the UX team. How do I build a system that developers and UX team will be able to easily use, and want to stick with for future designs.
The designs are for the user, the system is for the developers.

Developers

The developers don't need the rules or the why. They asked for a quick easily way to get what they need.

UX Team

The UX team wants to easily find assets in Figma files, but also be able to access the rules and the way in a larger format.

Together

The ask was for two separate systems. While it was more work upfront we could all agree it would make things easiest in the long run since the needs were so different.

How did it come together?

The challenge was the size of AceNet and the solution was to break it up in micro-chunks.

1. Design Review
2. The Basics
3. Only expanded as needed
4. Focused on accessibility

Design Review

I took screenshots of the most used pages and looked for common themes. I also talked with my UX team about what some of their most recent works were so I could copy some of that.

Started with the basics

I started easy to get the ball rolling with colors, accessibility guidelines, icons, and buttons. We started using this paired down system immediately while I worked on the smaller tasks.

Only expanded as needed

After the basics I started building as I saw things appear in pages. For example, AceNet uses modals so I built modals. AceNet never uses carousals for images so I didn't build one. I didn't want to ever introduce more than was needed and confuse people.  

Focused on accessibility

Accessibility is one of the most important things when building a design system. One in five people have a reason they can't access the internet like the average person. I knew if I always had accessibility in the front of my mind it would make many choices a lot simpler due to the sometimes confining rules of accessibility.
Detail was important. Here is a sample of the button components build for the primary button and that was repeated with all button styles. A accessibility grid I built for the Ace colors to make sure everything was clearly visible.
An example of one of the Figma pages. Each page included the components, a guide on how to use it, and any accessibility information needed.
Top left: Detail was important. Here is a sample of the button components build for the primary button and that was repeated with all button styles.

Bottom left: A accessibility grid I built for the Ace colors to make sure everything was clearly visible.

Top right: An example of one of the Figma pages. Each page included the components, a guide on how to use it, and any accessibility information needed.

Bottom right: Figma hi-fi mock up of what the digital design system will look like for the developers.
Figma hi-fi mock up of what the digital design system will look like for the developers.

Takeaways

This project was such a great example of how important it is to break up tasks and get constant review. Now that the Figma design system is done I am onto the digital design system for the developers.