Focusing on the user; Inspiration comes from anywhere
"Finding a screw is a pain in the [explicative]. Is it Mil-spec? What drive system, head style, diameter, and thread? Machine screws are not all the same. What material? Oh, and what if I need 5,000 of 'em? Sometimes, if they don't have enough, I'll get something like it, like with a different length, but same diameter...it depends if they have a CAD file I can use to test it first."
- Quote from interview (2013)
Most of my work is covered by non-disclosure agreements (NDA). What I am sharing is just the tip of the iceberg.
Contextual interviews, modeling, rapid iteration, HTML, jQuery, CSS, illustration
As Senior UX designer, I worked closely with stakeholders and peers in Search, Detail Pages and Photography to create an experience unlike any other at Amazon.
Because search & discovery were key to our expanding selection, we had less than 2 months to develop the UX for each component:
Shortly after joining Amazon, I was asked to decrease search-related customer service calls. The calls revealed the buyer was often not the end-user and unfamiliar with the product. Realizing the problem began upstream, I sought to better understand the following:
With help from industry representatives, customers, and customer service reps, we created stories addressing each question, which I sketched as a series of storyboards that we printed and shared with others (see example below).
Working with Amazon's search service, we re-prioritized the results to return matches in business-relevant categories.
To understand what constituted relevant results, we needed to understand what drove customers' choice of keywords. Examining the steps by which needs were translated to orders revealed how businesses relay, prioritize and optimize sharing product details. Our findings included:
Guerrilla tests revealed the efficacy of visual or textual refinements depended partly on whether the initiating requests were visual or verbal, and to what degree the buyer was familiar with the product:
Combining a simplified image and text, reduced required time and errors for 100% of interviewees.
To design the refinements, I tested 2 hypotheses:
I guerrilla-tested 12 drive style selectors comparing simplified iconography and high-quality photos, asking participants to identify an attribute and timing their response. All participants performed better with iconography, especially when the request included a sketch.
Using these results, I created a detailed style guide that reduced visual variables for comparison while retaining sufficient context for identification.
Several articles I have found since then provide additional insights include:
In 2010, visual pickers consisted of a sprite with 5 variants, one for each state: default, active, focused, disabled, and visited. Consequently, 4 visual pickers required 20 images! (see example). Our refinements had upwards of 50 variations; we needed a scalable approach.
Starting with the tenet that content is separate from function, I created one image per refinement, then used HTML and CSS to support all 5 states.
The result was a patent pending concept that sandwiched a PNG in HTML layers, allowing backgrounds, overlays, and borders to convey the visual picker's state.
When implemented for fasteners on SmallParts.com (precursor to Amazon Business), the result was 85% lighter than other Amazon visual pickers and helped reduce customer service calls for fasteners by nearly 60%. It was so successful that the solution was rolled out across all industrial categories.
And they did. It is now used across Amazon (see example).
Dimension-driven products, can have over 2,000 variations, while consumer products may have 20. The "twister" solution, used for consumers, could not scale, and instead resulted in a "whack a mole" experience when the number of variations exceeded 5. A new solution was needed, so I turned to our customers for inspiration.
After a few site visits and lengthy phone calls with customers, I laid out a storyboard showing how engineers, EAs, and professional buyers navigated options. Their tools included spreadsheets, 5-inch thick catalogs, websites and technical publications.
Laying these all out on the floor, I realized a common thread; they all used tables!
Cross-referencing our customers' tools, I created the following tenets:
Amazon is regularly touted as the model others follow. Knowing this design could end up influencing UX across the industry, I wanted to make sure it was worthy of emulation.
|Variations||Sortable and filterable, allow customers to identify a single or range of solutions|
|Price||Indicates that each row is an offer; also allows price comparison|
|Part number||Ideal for part-matching and referencing|
|Availability||Controversial at first; allows buyers to determine if sufficient quantity is in stock for bulk purchase|
Further examination of our customer data revealed roughly 20% of our customers purchased 2 or more variations during the same session. Storyboarding their tasks revealed users wanting to purchase more than one variation would click at least 6 times (see comparative storyboard).
To reduce the path to one step, I designed a mini detail page with an "Add to cart" button that did not leave the page. (see example).
After testing the designs with EAs and professional buyers, I built and tested the front-end HTML, jQuery and CSS for the experience.
The tables were a success (see example). Not only were the number of calls to customer service reduced, but the tables were emulated across the industry. My concept of a parent detail page with a table of variations, part number, quantity selector, and in-table purchasing can be found in leading sites such as Grainger and Fisher Scientific.
The tables are so well-received that a few years ago, we ran an experiment to replace the tables with a smarter "part-lookup." The overwhelming feedback? "BRING BACK THE TABLES!"
In 2014, the tables matured through the work of Ajay, a UX intern on our team. Working with myself and others, he evolved the concept of the "mini-detail" page, with great success on Amazon Supply. Unfortunately, before the UX could be implemented on Amazon.com, Amazon Supply was rolled into Amazon Business, and the improvements were deprioritized.