PolyAtom is a cloud agnostic platform by American Tire Distributors (ATD) for cloud native application development, delivery, operations, and reliability engineering to enable a fully integrated seamless customer experience across digital channels. The platform won the "Blue Diamond" award for "Cool Innovation".

Year, Duration

Spring 2024 – 4 months

Role

Lead Product Designer

Team

2 Product Designers

Product Manager

Engineers

Director

Skills

UI/UX Design

Branding

Developer stewardship

About

This project was for American Tire Distributors, to help launch their new product, PolyAtom, a cloud platform built to help customers pinpoint service success and errors quicker and more efficiently. Our task was to deliver the foundations of a multi-platform product, which included branding, style guide, design system, key screens, and service mesh design.

Target audience

Future customers, developers, ATD employees

Project summary

As a team, we reskinned their branding to elevate their look while also enhancing accessibility and usability for their core users. From there, we created a full design system, prioritizing light and dark mode, and table functions. We worked closely with developers and documented all components to ensure hand-off was as smooth as possible.

Design challenge

How can we build a flexible, end-to-end design system that supports a unique product experience in both light and dark mode?

● Process

01. Creating a Site Map

Exploring features and priority levels

● Process

02. Crafting the Design System

Designing for usability

Our goal was to deliver components and a design system that enhanced both accessibility and the overall success of the product. Because the primary users are developers, we prioritized creating a light and dark mode for the design system to ensure a user-friendly experience. In total, we created 83 components, 100+ pages of documentation, 5 prototypes, and 5 unique data tables.

● Process

03. Prototyping Demos

To fully show how each feature functions, we created an extensive prototype to showcase how each data table worked.

● Final

Handover File

Documenting the design system

By the end of the Phase 1.0 engagement, we wrote over 100+ pages of documentation to ensure developers fully understood how the components should function and be used properly. We also had several meetings and completed user-testing with ATD's dev team so that we were aligned on whether the functionality would actually be useful for them. Since this was a short-term engagement, we wanted to document as much as possible so this could serve as an artifact and resource moving forward.

● Learnings

Understanding the user

Designing a developer-facing tool with accessibility in mind posed unique challenges, particularly in making complex, information-heavy content more readable/scannable. We had to strike a balance between functionality and design, where we could simplify the user's day-to-day tasks while also improving the look and feel.

Designing for content-rich screens

With this application being data-heavy with many tables, we wanted information to be easily scannable with enhancing features that could filter data easily. To achieve this, we held stakeholder demos and user-interviews with the development team to ensure we captured all the necessary tools and features.

Challenges of learning the product

While we were mainly focused on the design system, we still wanted to fully understand this product so we could deliver the best outcomes. To bridge the gap, we spent several weeks on-site at ATD’s North Carolina office, working alongside the team to integrate more closely and gain deeper insight into our client’s needs.

MetLife Design System✦NYRR App✦Mizuho Americas✦American Tire Distributors✦MetLife Design System✦NYRR App✦Mizuho Americas✦American Tire Distributors✦