ECLECTIC BIKES | My Site

Design Thinking my way on Electric Bikes

Anchor 1

This case study is an E-commerce Scenario: To Increase Sales Conversion Rate. This is a project completed by a team of one, myself took about 4 weeks to complete. This case study will walk you through my design process.

My Role:
UX/UI Designer + Researcher + Interviewer

My Responsibilities:
Research, Company Brand (Company Name, UI Style, and Moodboard), User Flow Sketches, Low-Fidelity Website Mockups, High-Fidelity Prototype, Usability Testing, A/B Testing.

High-Fidelity Product Screen communicating when the shopper “buys now” or “adds to cart”

Why is this important?

ECLECTIC BIKES sells electric bikes on their mobile-web experience. The Product Manager is concerened about specific details of a certain flow of the conversion department: relative features and checkout flow. Data shows 50% of users open on average 7 item pages and then abandon the site instead of moving items into the cart.

Goals:
To enhance their browsing and checkout experience to greatly improve their product’s usability and increase revenue on the product’s mobile web experience.

Product Manager Requirements:

Product details must provide clear, relative information about features
Design a guest checkout
The guest checkout must capture email

Where to begin?

If I’m solving a relatable information issue along with guest checkout roadblocks, then I’d like to compare how other industry leaders are addressing these challenges.

Questions to prepare me for research:

Why users are not eager to buy these items they are looking at?
How can I reduce the number of screens a user has to click to accomplish the checkout goal?
Is the information about the product relevant?
How can I organize the information so each product is described accurately?
Is there any information missing about the product’s screen?
How might we include PM requirements?

Secondary Research

Screenshots of the Seek Refuge mobile website checkout experience

Guest Checkout
There are multiple ways to include a guest checkout. I enjoyed this example from Seek Refuge adding a “buy it now” call to action. This is a CTA for any shopper on their website. The message is clear, and the process is simple.

Relative Features
Now that I have an idea of how to improve the guest checkout flow, how might I structure the relative information to ensure the user is choosing the best product for them?

An online website, UX Guidelines for Ecommerce Product Pages written by the Nielsen Norman Group that insists these core components are essential when designing a product page:
Descriptive product name
Recognizable image(s)
Enlarged view of image(s)
Price, including any additional product-specific charges
Clear product options, such as color and size, and a way to select them
Product availability
Clearway to add an item to the cart, and clear feedback when it has been added
Concise and informative product description

When a user is given the tools to successfully get a goal completed, results will show in higher revenue. I want to architecture the relative features in a straightforward way. When successful, this e-commerce site can offer the kind of answers shoppers may question when viewing electric bikes.

Screenshots of the Seek Refuge mobile website checkout experience

Etsy has a wonderful product display that checks off every single component required by Nielsen Norman Group. With this collected research, I’ve been inspired to create new ways to include MVP components and improve the overall customer experience for the shopper.

User Flow Sketch

User flow sketches have a starring role in my process, especially when working with a tight budget or timeframe. Generating ideas through my pencil at a rapid rate allows me to get all the ideas out on paper. There are no bad ideas, just priorities. As long as I am putting myself in my user’s shoes, I can keep their goals and pain points in mind every step of the way.

You may be thinking, “remind me again why this is important?” User flows are concerned about specific details of a certain flow within the product to achieve a goal/outcome. ECLECTIC BIKES wants to improve this user flow of their conversion department: including relative features and the checkout flow (guest checkout).

Goals

The company goal is to improve the conversion from browse to completion of checkout to increase revenue on the product’s mobile web experience.

Must Haves

Product Manager Requirements:

Product details must provide clear, relative information about features
Design a guest checkout
The guest checkout must capture email.

Low Fidelity Mockup

Now that I have the user journey mapped out, I want to create a low-fidelity mockup of this key route. When designing this experience for a shopper, I must anticipate what decisions they might be making next. It’s essential for me to organize key information on each screen to give the shopper a clear and simple direction.

Low fidelity mockups of the checkout route featuring two important screens: relative information for the product, and checking out by guest checkout which requires email

Findings from the First Guerrllia Usability Testing

Testing allows my design team of one, myself, to understand what a potential shopper might be feeling or thinking by observing them in real-time when navigating through my prototype. Routes and CTAs that might be obvious to me, may feel unfamiliar and unmotivating for users. The more I learn the whys of a user’s feelings towards my work earlier on, the better. Observing the testers gave me a front-row seat of the good repeats like a quick and easy choice in the user journey, or if there were repeated complications. These repeating roadblocks in the UI/UX could send a potential shopper away if not addressed.

First high fidelity mockups of the checkout route featuring two important screens: relative information for the product, and checking out by guest checkout which requires email

Takeaways from the Second Guerrllia Usability Testing

The number one priority I discovered from the second usability test is how the information is presented. Instead of making the text larger to improve reader scanning, I directed my focus to the font, typeface, and spacing in between letters. After several attempts to change the font or typeface, I realized it was the spacing that could be causing the reading issue.
Once I adjusted the letter-spacing from 10% to 5% and noticed a huge improvement in scanning this information immediately. I then adjusted the size of the product’s picture and changed the color of the background to create a familiar e-commerce website.
With these improvements made to the UI and user experience, I wanted to test the previous screen side by side with the new screen to validate there was an improvement in the user experience.

A/B Test

A/B Screens below were tested side by side in person with 3 participants.

Relative Product Information

Homepage for viewing featured/all bikes

How Did the Users Response?

Not surprisingly, all 3 participants I recruited for this quick A/B test confirmed that option “B” was the best screen when compared side by side to the previous screen I designed. Both screens labeled “B” received all of the praise.

Homepage - Featured bikes (positive feedback +, negative -):

+ Bigger picture is better
+ It’s clear what direction I should take next
+ The light blue pulls the attention to the “buy now” in a gentle way
+ Looks like a great eCommerce website I would actually use (Nice!!)
+ I like seeing “save to wishlist” by the “add to cart”. It just looks right, like all the information fits together.

Relative Product Information feedback:

+ Looks like a standard electric website
+ I can see the color changes, and I think it looks great for the background to be white. That’s most common with other websites I’m familiar with.
- Besides the ratings and low price, I wish there was something else pulling me to click on this product (talking about the product’s card on the homepage)

How Was the User’s Journey Improved?

In any part of the design process, there are no bad ideas just priorities. With the adjustments to spacing of the typeface and background color, I observed how the 3 participants moved through both flows with ease. Testing solutions is so important! The simplest improvements to a user’s journey can increase the conversion rate from a shopper scanning to completing a transaction.

This has been an insightful as well as joyous experience in the making. I look forward to all the eCommerce projects to come.