Ingram Micro

Building a B2B e-commerce design system that scales across global markets

EXECUTIVE SUMMARY

Ingram Micro is one of the largest suppliers of IT equipment in the world. The company had not updated their site design in over 15 years. To help improve the site experience, we did an analysis of the site to identify key features & flows on the site that we would design for first to have them highest impact on the business upon release. Designing these key features would also net us the most UI components for our design system.

My Role

• Associate Director, Experience

Additional Team

• Manager of UX & UI (client team)

• UX Designer (client team)

• Associate Director, Visual Design (colleague)

• Front-end React Developer (colleague)

The problem

If you look beyond the initial task of a site redesign, the real problem emerges. The original site wasn’t built with the user in mind and had been through a series of patchwork design fixes creating a cumbersome experience. We wanted to address the user’s issues of clunky and slow site design and use new UI patterns and reworked user flows to help bring speed and efficiency to the IT giant.

Process

This project didn’t call for anything outside a standard project process. One of the challenges of the design of the process was our need as designers of the experience was to get into the mind set of the user. We could not approach this project as a standard ecomm redesign. Our audience were IT pros buying and reselling hardware, software and cloud services day-in day-out. Users would be on the site for 2-3 hours at a time making purchases for clients. They looked for their experience to be fast, intuitive and easy to get through.

Phase 1: Research & Planning

HEURISTIC EVALUATION

At the start of the project we evaluated the current site. Not in terms of its design but more in overall experience. What would users find as pain points and what would they want from a top-tier experience.

COMPETITIVE ANALYSIS

As a part of a larger project, we inspected how does Ingram stack up to its competitors. We looked at benchmarks for tech performance, clickthroughs, site structure, tech platforms and general experience. Each section was given criteria, graded against it and given action items for us to tackle in the design phase.

STRATEGY & RECOMMENDATION

After all the analysis, we made recommendations that could be considered “quick wins”, area of focus that would net Ingram the most impact on the business with mid-to-low complexity to tackle first. This aided in sprint planning and prep.

Phase 2: Design & Document

UX PATTERNS & UI DESIGN

After visual design of the brand was developed into base UI, we began building the full UI kit while building out pages in Sketch using designed elements, leaving wireframing to be done in sketches and whiteboard sessions. It made the process swift but nimble to pivot designs if requirements changed.

PROTOTYPING

To have the team move quickly, we built out the prototype (InVision) in-step with the designs and divided the work among the small team accordingly. It made reviews easy as stakeholders could focus on the experience and let the team make good work.

DOCUMENTATION

To allow a smooth rollout for the whole Ingram Micro organization to adapt to the new design system, we built a central hub with detailed descriptions of the UI components, hi-fi prototyped examples and the html, css, and React code to leverage.

Outcome

What I learned the most

How a true integrated client/agency team should work

Working with a great client team is hard to come by. To help make a true partnership with the client team, we operated like a remote extension of an internal team. We had weekly check -ins to review designs and daily stand ups. We traveled to be on-site once a month for have face-to-face interaction that help cultivate a deep partnership, producing quality work.

Not every project has the same problems

E-comm redesigns are usually approached the same, most clients say “what is Amazon doing?” But for this client, that’s not the case since their target users would be using the site shopping for multiple clients and building multiple orders through quoting. We knew that if we could nail the efficiency of the quoting, we’d solve a lot of pain points for the user.