My role:

UI Design

UX Heuristics

User Interviews

User Flows
Wireframing

Testing

Duration:

7 days

Tools:

InVision

Sketch

Marvel

Illustrator

e-commerce project

Cog.png
Cog.png
Cog.png
Cog.png

Improve the conversion from
browse to completion-of-checkout
in order to increase revenue
at the
Your HOME Gym store.

THE PROBLEM

Your HOME Gym is a website store
selling new and used gym equipment - specifically designed for people who prefer
to work out at home vs. a commercial gym.

THE GOALS

  1. Create a seamless and welcoming
    on-boarding experience

  2. Encourage buying confidence

  3. Increase check out rate

 

THE BRIEF

DISCOVERY
understand and map

Screen Shot 2020-10-27 at 1.29.14 PM.png
Screen Shot 2020-10-27 at 1.29.24 PM.png

I started with a competitive
analysis research
of 3 sites: 

1

Competitive analysis flows provided
the following
takeaways:

  • Academy

  • Dicks Sporting Goods

  • Gym Source

  • Keep “branding ads” to a minimum

  • Reassure users with security symbols

  • Offer a clear return policy

  • 2 pages maximum check out screens

  • Provide multiple payment options

2

Conducted 5 remote user interviews
in order to Identify potential users and find ways to improve engagement  shopping for gym equipment online.  
 

Participants Interviewed

  • Users think new gym equipment is
    too expensive

  • Quality, condition & brand of equipment
    costing over $250 is important

  • Not confident in their decision making
    process at checkout

  • Can’t find what they are looking for

  • Deterred by cost, they lose their nerve

Interview Summary

Users aged 25-55

Workout regularly (3+ times a week)

Own a smartphone / computer

Experienced with gym equipment


Due to Covid, the cleanliness of used gym equipment was a such a hot topic that I decided to focus this iteration of the project on purchasing NEW gym equipment. 

Affinity Map

3

PERSONAS
From the user interviews
and affinity map I was able
to create two personas for
our home gym shopper:

Janice

Jim

This data inspired the following
How Might We questions...

 

HMW make searching for gym equipment more organic for the user? 

HMW create a faster way to checkout? 

HMW make a user feel confident/reassured about their purchase?

 

DESIGN & 
VALIDATE 1

DESIGN (1)

1

After I created an onboarding user flow, I designed the wireframes I needed to create lo-fidelity screens in order to put the flow to the test

user flow.png

user flow

wireframes

wire frames.png

lo-fi screens

2

VALIDATE (1)

I remotely tested 5 people
that fit the application's demographics.
Each interview lasted 20 minutes.

 

TASKS

  1. Find an elliptical and add it to the cart.

  2. Purchase the elliptical

  3. Find and review the Return Policy.

DISCOVERIES

  • Users said the "big" pictures made finding the eliptical "easy"

  • Many wanted to see the “return” policy on the product page

  • Wished that the checkout page “looked more secure”

  • Wanted to see payment options on the cart page

These key takeaways provided the
 following recommendations...

 

  • Remove the third step in the checkout process

  • Replace "next" with “confirm order” button on 2nd step

  • Add the "return" policy button to the product page

  • Add security icons to the checkout page

 

DESIGN & 
VALIDATE 2

DESIGN (2)

1

Considering our key personas, the spirit of the brand evokes:

affordability

strength

approachibility

style guide

VALIDATE (2)

2

For the 2nd round of testing
I
remotely tested 5 NEW people
that fit the application's demographics.
Each interview lasted 20 minutes.

 

TASKS (2)

  1. Find an elliptical and add it to the cart.

  2. Purchase the elliptical

  3. Find and review the Return Policy.

DISCOVERIES/IMPLEMENTATIONS

  • Users wished they had seen the return policy earlier
     FIX: Added return policy to the product page

  • Questioned the need for a “quanitity” option on the cart page
     FIX: Remove quantity option for high ticket items

  • Wished to see the security icons during the first step of checkout- rather than just on the credit card page
    FIX: Move the security icons to the item card on the checkout screen

key screen iterations

Lo-fi testing round 1

Hi-fi testing round 2

Final iteration implemented

Landing page

LO fi landing.png
01 Landing page.png
01 Landing page.png

Cart page

Lo-fi cart.png
04 Cart modal.png
04 Cart modal.png

Product page

LO fiproduct.png
03 Product page.png
03 Product page.png

Lo-fi testing round 1

Hi-fi testing round 2

Final iteration implemented

Checkout page

 Lo-fi Checkout.png
06 Checkout field 2.png
06 Checkout field 2.png

Confirmation page

Confirmation page.png
07 Confirmation page.png
07 Confirmation page.png
  • Add membership profile so that ads could carter specifically to users' budgets

  • 30 day return no-hassle return policy stated up front and often afterwards

  • Further explore a selling option for used gym equipment or trade-ins

  • Offer one-step checkout for members

  • Add "points" to purchases for members

Next Steps

 

© 2020 Joanne Delphia. All rights reserved.
All images are property of Joanne Delphia or their respective copyright holders. Reproduction prohibited without permission.