Ingram Micro Design System & Ecommerce Redesign

Company: Ingram Micro

Timeline: 2018-19

Role: Associate Director, Product Design

Background

Ingram Micro approached us to help bring their ecommerce platform up to date. The experience for resellers was outdated, cluttered, slow and overwhelming. The experience was so poor, that they were losing revenue to competitors. So they asked our team to recommend “quick wins” to improve the overall experience, help generate buy-in from stakeholders and commit to a full site redesign.

Heuristics Review

We started by conducting a top-to-bottom heuristics review of the site in order to identify key trouble areas.

heuristics.png

Interface Inventory

Next, we conducted an audit of common form elements, templates and typographic styles to highlight inconsistencies and deviations from best practices.

ui-inventory.png

“Quick Wins”

After identifying a number of opportunities to enhance and improve the site, we ranked each according to value for the customer(s) and the relative level of effort producing the desired results.

Design Language

Next, through pilot design explorations rooted in their brand identity, we started to define a common design language that would serve as a starting point for a unified design system.

ingram-design-pilot.jpg
ingram-design-language1.jpg

Design Sprints

Once the design language started to take shape, we began a series of design sprints to build out key features, evolving design components as we went. We continued building out features and launched the newly designed ecommerce solution as a pilot for customers in Canada so we could learn, improve and work toward a globalized rollout in the future.

features.png

UI Component Library

Through iterative design sprints, both our product and our design system started to evolve and solidify. We meticulously documented every state and variant of every component. We created a shared component library that could be picked up by any product designer joining the project.

Shared component library

Shared component library

Ingram Micro Design System

Finally, we developed the entire library in code using CSS/React and created a repository and reference site so developers could assemble product screens quickly, efficiently, and especially consistently.

Final design system documentation site imdesignsystem.com

Final design system documentation site imdesignsystem.com

Indeed Experience Hub

We transformed Indeed's design system documentation site into Experience Hub, a centralized platform that ensures consistent and configurable user experiences. By consolidating guidelines, enhancing usability, and integrating AI capabilities, we empowered product teams to find and apply the resources they need quickly and efficiently.

UPS Shipping & Tracking

We made it even easier to UPS customers to access the services they've come to rely on through online, mobile, chat and voice-enabled experiences.

ProjectColor

How do you turn your design vision into reality? With the ProjectColor app from The Home Depot, you can sample all the colors of the visible spectrum to the perfect accent for your home decor.