mitchlenzen_a_self-contained_isometric_3D_illustration_in_the_aa6d93df-3768-43c0-ad99-fcf3afe01f73_2.png
 

Ingram Micro

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