Symbol - Pink_RGB.png
 

Memebox

 
 
 

About Memebox

Memebox is an e-commerce platform for Korean beauty products. We are bringing technology innovation into the traditional beauty space.

Design goal

In e-commerce, cart to purchase conversion is a pretty standard metric. We aimed to increase this conversion rate by optimizing the checkout experience.

My role

I was the lead on this project, and gathered input from other stakeholders. I analyzed data, conducted user research, built wireframes and prototypes, and shipped the initial iterations. 


Quick Synopsis

Checkout Optimization

Summary of activities:

  • Understood current checkout flow
  • Analyzed current behavioral patterns and quantitative data (using Google Analytics and Heap Analytics)
  • Understood business and technical requirements
  • Conducted market research and reviewed best practices (Nielsen and Baynard studies)
  • Brainstormed designs (conducted design workshops with stakeholders)
  • Conducted usability tests and iterated on designs
  • Built roadmap with Engineering
  • Collaborated with Engineering to implement and ship!

Impact:

  • Increased checkout to purchase conversion rate by 21%

  • Reduced number of input fields in checkout flow by 50%


Research

Establishing a Baseline

Before diving straight into designs, I first tried to understand our users, their behavioral patterns, and reviewed any historical data that could better inform the designs. Existing user research told me this was our persona:

 
 

Through testing out the site, I was able to quickly sketch out the current user flow.

 

What the data told us

  • A user could face up to 30 different input fields from the point of clicking "Checkout". 
  • Users had many questions about shipping and coupon codes (from Customer Service)
  • Users spent on average 1:33 min (desktop) and 1:54 min (mobile) on the checkout screen

What best practice tells us

  • Average checkout flow as 14.88 fields (twice as many as necessary) (Baynard)
  • Users do not like to be forced to create an account in order to checkout; we should give an option to guest checkout (Baynard checkout study / Nielsen e-commerce study)

Approach

Key Design Decisions

I had to find a balance between creating the most ideal situation and it being feasible for Engineering to do given the current design framework. I prioritized keeping consistent with the current UI design in order to make a smoother transition, not only for users, but also for the Engineering team.

 

the riskiest assumption

I thought about different flow combinations, and ultimately decided to test the riskiest one where payment was the first screen. The hypothesis was that users might complete checkout more quickly if the "hardest" part of paying is taken care of first. Then, the hope was that the rest of the checkout process would feel almost "automatic".

 

field reduction

I created a mindmap of all the fields we currently have on each page and questioned the need for each one. I thought about potential ways to eliminate fields through better UI and interactions.

"Camelnosing"/progressive disclosure was a primary method of reducing fields by showing a field only when it becomes relevant.


Design

Medium Fidelity Prototypes

Usability Testing

I recruited 5 people to on-site interviews and prepared a discussion guide and clickable prototype. Here were the findings:

  • A design should not stray too far from the user's mental model (e.g. payment first took people by surprise and made them hesitate)
  • Our users love discounts; coupon code fields can be distracting
  • Users were used to creating an account as part of the process, but feel better if they understand the value 
  • Our users crave details to feel trust - cart and confirmation page  should always show all order details as reference
 

Roadmap - Iteration-Based

I made several changes to the design based on the usability tests, and then worked with Engineering to build a mini roadmap that prioritized iterations so that higher impact and lower effort features were implemented first. 

 

Final Screens

Before & After

Before

After


Next Steps

Ideal Checkout

We have some exciting designs planned as we've moved onto a new backend platform. For the last few months we've created a design framework and re-designed the entire Memebox web experience from the ground up. We've been able to leverage the learnings from the first checkout optimization project, and are excited to see the impact on the business and customer satisfaction. Here's a sneak peek:

[insert initial wireframes]