CASE STUDY:

How to build

an engaging Ecommerce

product selection Tool

 
 

THE SITUATION

 

client

Plastic Place

 

summary

Garbage bag ecommerce giant, Plastic Place, is constantly looking for new ways to improve their online shopping experience and optimize their conversion rate.

 

my roles

UX Research • UI + UX Design • Visual Design

 
 

THE TASK

  1. Analyze historical data from marketing, analytics, and a/b testing
  2. Conduct further research to better understand audience's needs and pains
  3. Propose data-driven improvements for the client's dev team to implement
 
 

THE ACTION

Using the principles outlined in Design Thinking, we gather and analyze data to understand the customer, outline their pains, and design a prototype of the new experience to gather data and validate the improvements.

 
 

research methods

pp-casestudy-icon-edit.png

Customer Surveys

pp-casestudy-icon-mic.png

Customer Interviews

pp-casestudy-icon-user.png

Empathy Mapping

 
 
pp-casestudy-icon-cartsort.png

Card Sorting

pp-casestudy-icon-treetest.png

Tree Testing

pp-casestudy-icon-smartphone.png

Prototype Testing

 
 
 
 

audience insights

After reaching out to a large pool of customers to participate in a few brief surveys and interviews, we have identified our key audience personas.


Personas are created by consolidating qualitative and quantitative data. They are a representation of the user base distilled into a few groups.


Stakeholders and other members of the product team are able to arrive at better decisions by keeping these caricatures top of mind.

 
 
 

journey map

Once we have insight into our customer's pains and needs, we map out the journey of a stranger becoming a customer. The goal here is to provide a bird's eye view of the end to end experience.

As with all product development research, time is of the essence. An initial journey map of the customer's experience doesn't have to be complex. We focus on the following:

  • Understand the beginning and the end of the journey
  • Document every touchpoint the client has with the customer
  • Empathizes with the customer along each touchpoint
  • What are they doing, thinking, and feeling at each point?

 
 
 

"how might we?"

In a relatively short period of time we have clearer picture of the behaviors and traits of our customers and their experience with our client.


This clearer picture begins to reveal the problems and inconsistencies from the perspective of the customer. We reframe the problem by asking "how might we?" questions.


  • "How might we clearly communicate shipping costs up front?"
  • "How might we simplify the product selection process?"
  • "How might we build trust with our customers?"


For each question, we sketch out possible paper prototypes for discussion, testing, and rapid iteration. As these solutions solidify, we increase the fidelity of the prototype.

 
 
pie tree of tree test results
pie tree of tree test results
pie tree of tree test results
 

information architecture

Organization and navigation can be huge pain points for the customer. Diversity amongst each persona's needs can further compound this issue.

We begin by workshopping with the client using a method called card sorting. Often times this is best achieve with a blank wall and a huge stack of post-it notes. Once a number of competing taxonomies begin to emerge, building consensus can be a challenge amongst stake holders.

Why not ask the customers? Tree-testing is a great way to quickly gather data on what the customer prefers. We give them a simple task and measure how well the navigation helps them accomplish that task.

 
 
 

wireframing

Incomplete designs look incomplete. Avoid the "uncanny valley" by using simplified shapes and symbols to represent complex interfaces. This helps your test subjects focus on the tasks at hand.

This is why most wireframe designs look like blueprints. It is important to point out that these are not the final designs.

 
 

THE RESULTS

a whole new experience

Some design improvements are local and isolated and others are wholistic. Brand and interface consistency are examples of the latter.

Online shoppers are often very skeptical of trying new online stores for the first time. Consistencies in the branding, messaging, and interface from page to page build a good deal of trust with a new customer.

pp-mockup-visual-nobg.png
 

visual designs

Once the final wireframes have been reviewed, tested — and a consensus is formed amongst the stakeholders — we visually design the prototype using higher fidelity elements like typography, photography, and color

 
 
 

design consistency

In order to make life easier for software developers, we built a design system and a series of guidelines on how to style and integrate UI components in a responsive and scalable way.

 
 
 

bringing it all together

Throughout the course of three months we accomplished our tasks. We learned about our audience's needs and what their journey looks like. We formed consensus amongst stakeholders. And delivered a whole new usable experience.

Our client has implemented a number of our recommendations and reported an increase in engagement and conversion.