How to build
an engaging Ecommerce
product selection Tool
Garbage bag ecommerce giant, Plastic Place, is constantly looking for new ways to improve their online shopping experience and optimize their conversion rate.
UX Research • UI + UX Design • Visual Design
- Analyze historical data from marketing, analytics, and a/b testing
- Conduct further research to better understand audience's needs and pains
- Propose data-driven improvements for the client's dev team to implement
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.
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.
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.
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.
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.
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.
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
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.