03

Grainger eChannel Optimization Case Study

Website and mobile app optimized for unique context of use 

20130128-GX4A0941
grainger-logo-141px

SEEING IS BELIEVING

Main-G_V0R2

Design Challenge: Facing competetition from new entrants in the $570B Global MRO market – including Amazon Supply, Grainger was forced to take a hard look at it's business and its relation to its customers. Using insights obtained from extensive field research conducted in 2012, Grainger realized customers were utilizing the website, mobile app, and iPad app in distinctly different ways. We discovered that mobile users, i.e. field technicians and contractors, were leveraging Grainger’s expansive distribution network and using the app to search availability of critical replacement products at local branches for same-day pickup or express delivery. They needed a single part, and they needed it now.

Opportunity: As we approached this project it became clear that each platform would need to be optimized for its unique context of use. Using a contextual approach, we optimized each platform for what our users wanted. Purchasing officers that used the desktop site to order reocurring inventory could utilize time-saving, desktop-specific features like Bulk Order Pad for adding items to cart by SKU number, or Auto Re-Order for frequently purchased items. We optimized the mobile app for search, incorporating voice tools, barcode scan, and live chat with picture identification to help them locate products faster. If the item needed to be approved for purchase through a supply department, a manager at the warehouse would receive a notification and could approve and complete the transaction remotely. The desktop site, mobile app and brick-and-mortar branch work in concert.

Industrial Supply Reimagined: Pressured to compete on price by competitors like Amazon Supply, Grainger had to reinforce it’s role as trusted wingman and bring front and center the value-added services that’s made it the go-to supplier for companies that want more than cheap products. Inventory management, safety compliance, and an expansive distribution network with brick and mortar branch locations.

IMG_5663-C

MY CONTRIBUTION

User Research

Usability Testing

UX Design

Prototyping

Wireframing

UI Design

IMG_5081-D
IMG_4575-A
IMG_4958-B
IMG_5283-B
grainger-1920×900-2

Desktop experience optimized for efficiency:  The needs of a purchasing officer are very different than those of a technician in the field. Typically employed at mid to large-sized companies, the purchasing officer is focused on inventory management, cost allocation, and efficiency, keeping the shelves stocked at all times with frequently purchased items. As an expert-level user, this role if focused time-saving shortcuts and value-added, workflow enhancing features like location-based lists, remote list approvals, auto-reorder, express checkout, and bulk order pad. Price is secondary to partnering with a supplier who helps them get the job done.

Features

  • Bulk Order Pad
  • Auto-Reorder
  • Order and Invoice History
  • Lists/Folders
  • Remote Order Approval
  • Special Order Quotes
g.com-redesigned-bulk-order-pad

Bulk Order Pad feature.

Usability Heuristics

noun_flexibility_1116121

#7: Flexibility and efficiency of use

Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Flexible processes can be carried out in different ways, so that people can pick whichever method works for them.

Mobile app and tablet optimized for search: Technicians and contractors working in the field are tasked with bringing complex systems online fast, so when they need a part, they need it now. They typically don’t use the Grainger desktop site – preferring instead to use the Grainger mobile app as a search tool to find specific parts while on the job. Then they opt for same-day pickup at their local branch location or express delivery so they can complete the job.

Features

  • Voice Search
  • Barcode Scan
  • Live chat w/ picture upload
  • Part availability > show local branches
  • Location-based lists
  • Remote Order Approval
  • Browse-optimized homepage
  • Advanced Filtering
app_photo-feature-2

Grainger mobile app – optimized for search.

Usability Heuristics

noun_organized_1850297

#8: Aesthetic and minimalist design

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

This heuristic doesn't mean you have to use a flat design — it's about making sure you're keeping the content and visual design focused on the essentials. Ensure that the visual elements of the interface support the user's primary goals.

Conquering the $570B global MRO market.

Product Categories:

38

Digital & Physical

Approximately 5,200 suppliers provide Grainger with 1.7 million products stocked in the company’s distribution centers (DCs) and branches worldwide. Grainger employs nearly 25,000 team members across the globe.

“Our challenge is to help the customer get to the solution they require given limited experience with the product they have to repair...We have to interpret our customers' intent.”

- Brian Walker, VP of Digital Architecture and Operations