Sale Funnel Redesign


 

Because market

A sale funnel to sale underwear and personal care product to senior (50+) people.

Role: Design Lead (actually the only designer)
Teammate: PM, Engineers, Data Analyst
Duration: February 2020 - Present

Tools: Figma, Adobe Photoshop, Adobe Illustrator, Mixpanel, Atlassian, Google Doc.

What’s new?

 

Landing page

1: Add Progress bar / Stepper

2: Add “FREE TRIAL BOX“

3: Enlarge the Size of fonts on the button.

compact buttons

Users need to screw down to see and select the button on the previous version.

The new version is more compact.

 
 

Responsive Design

The new version is Mobile & Desktop responsive design.

The previous mobile version has red color text, and the previous desktop version has turquoise button.

The process.

 

1. D E F I N I N G T H E P R O B L E M

Deep dive inside before going outside


 

We started by deep diving into the current flow, and below is the end-to-end experience for customer onboarding.

Problem statement

Low conversion rate, current is 2%. we see a huge drop off rate in the Quiz section.

Goal

For users: Try this product for free, potentially subscription.

For business: Higher Conversion rate, engaging with more target users.

To narrow down the problems, we breakdown the whole Free trial experience to 3 sections: QUIZ. BUY NOW. PAY NOW.

1. D E F I N I N G T H E P R O B L E M

Current Flow Analysis


 

We started by deep diving into the current flow, and below is the end-to-end experience for customer onboarding.

Key finding on Mixpanel, we saw 74% drop off on the Quiz part, so we spend more time on Quiz to see what’s not working and what could be improve.

After User interview, we list high medium and low UX/business impact.

In addition to Key finding on Mixpanel and User interview, I started to see how competitors do and other subscription funnels.

1. R E S E A R C H

Competitors


 

In addition to Key finding on Mixpanel and User interview, I started to see how competitors do and other subscription funnels.

Wireframe

In addition to Key finding on Mixpanel and User interview, I started to see how competitors do and other subscription funnels.

Wireframe

In addition to Key finding on Mixpanel and User interview, I started to see how competitors do and other subscription funnels.

Previous landing page:

We see a huge drop off rate here, after user interview, we found there is no reference for this is “Free trial box“ builder.

Wireframe 1:

  1. Add “Free Trial“

  2. Add stepper

  3. Add phone number

  4. increase the button text size

Wireframe 2:

  1. Add “Free Trial“

  2. Add simplified stepper

  3. Add phone icon

  4. Increase the button text size

 

Previous landing page:

We see a huge drop off rate here, after user interview, we found there is no reference for this is “Free trial box“ builder.

Wireframe 1:

  1. Add “Free Trial“

  2. Add stepper

  3. Add phone number

  4. increase the button text size

Wireframe 2:

  1. Add “Free Trial“

  2. Add simplified stepper

  3. Add phone icon

  4. Increase the button text size

 

Previous landing page:

We see a huge drop off rate here, after user interview, we found there is no reference for this is “Free trial box“ builder.

Wireframe 1:

  1. Add “Free Trial“

  2. Add stepper

  3. Add phone number

  4. increase the button text size

Wireframe 2:

  1. Add “Free Trial“

  2. Add simplified stepper

  3. Add phone icon

  4. Increase the button text size

 

Previous landing page:

We see a huge drop off rate here, after user interview, we found there is no reference for this is “Free trial box“ builder.

Wireframe 1:

  1. Add “Free Trial“

  2. Add stepper

  3. Add phone number

  4. increase the button text size

Wireframe 2:

  1. Add “Free Trial“

  2. Add simplified stepper

  3. Add phone icon

  4. Increase the button text size

 

Prototype

In addition to Key finding on Mixpanel and User interview, I started to see how competitors do and other subscription funnels.

Previous landing page:

We see a huge drop off rate here, after user interview, we found there is no reference for this is “Free trial box“ builder.

Wireframe 1:

  1. Add “Free Trial“

  2. Add stepper

  3. Add phone number

  4. increase the button text size

Wireframe 2:

  1. Add “Free Trial“

  2. Add simplified stepper

  3. Add phone icon

  4. Increase the button text size

 

Final Design

In addition to Key finding on Mixpanel and User interview, I started to see how competitors do and other subscription funnels.

Add “Free Trial“

Add “Free Trial“

  1. Add “Free Trial“

  1. Add “Free Trial“

  1. Add “Free Trial“

  1. Add “Free Trial“

Overview

After users complete purchase, this page displays the specifics of the order, delivery date and length of trial period. This page explains next steps for this order.

My Role

Interaction design

Visual Design

Prototypes

Tools

Figma

Adobe illustrator