UX Design and Strategy

Agilent Guided Selling

E-commerce strategy and WeB tool Design, 9 months

Agilent.com Guided Selling

 

This case study reflects my views and not necessarily the views of the client. Confidential info has been omitted or obscured.

Agilent is a leader in life sciences, diagnostics, and applied chemical markets. I was asked to evaluate the e-commerce experience of their website and provide a "guided selling" product strategy and design solution.

 
Agilent Hero.png

Opportunity

Agilent has a catalog of thousands of highly technical products that sometimes have little differentiation between them. The e-commerce site worked well for customers who already knew what they needed, but could be overwhelming for those who didn't.

Consumable products account for a lot of the e-commerce business, but the limited selection tools offered were difficult to find and poorly integrated with the online store. There was a significant opportunity to increase consumable sales and customer satisfaction by improving this experience.

 
 

Solution

A comprehensive guided selling strategy including calls-to-action, refined navigation, a new product and content strategy, and a flexible and scalable UI framework for all existing and future selection tools. 

 
Agilent Solution Filler Image.png
 

My Role

• Full spectrum of UX Design including research, sketching, interaction design, UI design, content strategy, prototyping, testing, and specifications

• Strategic product management duties including product and design requirements for multiple e-commerce flows

• Advocating & teaching good design processes and consumer-focused approach to client product organization

• Leading remote design reviews, brainstorm sessions, and interviews with clients and users

 

Unique Challenges

This project dealt with highly technical subject matter, and I had to become well-versed in the domains of liquid and gas chromatography. Also, Agilent.com is a large multi-purpose website that isn't necessarily focused on e-commerce.

 

Discovery

I conducted several forms of research to uncover opportunities to improve upon the Agilent.com consumable purchase experience: interviews with internal stakeholders and users, Voice of Customer analysis, and extensive competitive analysis. This led to key insights and design themes that shaped my strategy throughout the project.

Competitive analysis

 
Agilent Competitive Analysis.png

Agilent Design Themes.png
 

Personas

Agilent's broad presence requires that they satisfy several different persona types across many domains. In design practice, however, poor solutions come from trying to satisfy too many personas. Early on, I focused the product strategy on 4 key personas in the consumable product customer journey. When it came time to design the UI, I narrowed this even further to the 2 personas most likely to use the selection tools.

 
Agilent Personas.png
 

Exploration phase

As the project was still lacking in definition, I created rough concepts to illustrate all the ways we could incorporate guided selling into the site. These helped the client see varying levels of effort and how each would change the experience of their site.

 
Agilent Exploratory Concepts.png
 

Product Design Strategy

We combined several of my initial concepts to form a robust guided selling strategy. The goal was to help customers choose the best total solution, unassisted, regardless of their knowledge level. This would require design and development efforts across several customer and site touch points.

 
 

Defining the experience

Such a large effort requires a lot of buy-in from multiple owners in different parts of the product organization. I used Customer Journeys and User Workflows to define the experience for the client, and followed with a Customer Success Story presentation to make it real to them. (Success Story not pictured.)

Example Customer Journey

Agilent Customer Journeys.png

EXAMPLE USER FLOWS

 

Wireframes

I worked with the client on several rounds of wireframes of varying fidelities, showing designs early and often. There were many new site elements to come up with and together we were able to get detailed, test-ready concepts for a new method assistant and consumable product finder. 

 
Agilent Wireframe 2.png
Agilent Wireframe 1.png
 

User Testing

Using InVision, we conducted 2 rounds of testing with 2 user types: the customer and the internal stakeholders. Feedback from the first round of testing led me to make many small improvements, and there were a few major changes as well. I changed the navigation model and moved away from the in-page selection tools, as almost all users preferred the standalone tools.

SELECTION TOOL TEST PROTOTYPE

 
 

Delivery & Development

For this project, the development team was remote and I had limited contact with them. While not ideal, I helped ensure a quality outcome with thorough interaction specifications. I also authored all the content guidelines, including how to construct selection tools, write questions, and choose products for effective cross-selling.

SPEC EXAMPLES

 
Agilent Specs.png

EXAMPLES FROM CONTENT AND PRODUCT GUIDELINES

Agilent Content Strat.png
 

Immediate Results

Once the redesigned tools and call-to-action strategy were launched, there was an immediate increase in page views, cart adds, purchases, and voice of customer scores.

 
Agilent Metrics.png

Agilent oldVnew.png
 

Long Term Results

In addition to what has already been implemented, the strategy I provided continue to drive many project roadmaps for Agilent.com. Many elements of the UI designs are being incorporated into other parts of the site to drive sales and increase findability.

The success of this project has also helped Agilent's internal UX team gain traction and influence within the product organization. UX is getting involved earlier, helping with strategy and planning projects for the best UX outcomes.

 
 

CREDIT

I collaborated with many talented people on this design project:

Bill Dagget, Principal Designer at ZenXD
Yujia Zhao, User Experience Designer at ZenXD
Chris Merritt, Visual Designer at ZenXD
And all the great folks at Agilent!