E-COMMERCE RE-DESIGN PROJECT

SOLO NYC Bike Club

Improving the user experience to increase conversion rates.
Solo title image.png

OVERVIEW:

An e-commerce bike company needs help improving the mobile web experience of potential customers. The company is experiencing high rates of site and cart abandonment. Project goals include - increasing the conversion of browse to completion of checkout and improving product usability.

 

The objective was to produce a functioning and tested prototype which focuses on the user flow from browse to checkout by using design thinking to meet project goals.

Duration

October 2021 - November 2021

Role

UX/UI Designer | Research | Branding

Tools Used

Figma | Overflow | Zoom

THE PROBLEM:

 

Low conversion rate of browse to checkout.

This e-commerce company’s main goals are to increase revenue and enhance product usability on their mobile web store. The customer base is made up of young professionals (72% men) willing to spend more for high-quality, premium products.

The company aims to
improve conversion rates from browse to checkout by educating potential buyers on products most suitable for their needs.

50%

of users

open an average of 7 item pages, then abandon the site without moving any items into the cart.

of users

70%

who place an item in the cart do not purchase.

Data shows that even interested buyers abandon their cart at registration. The company PM attributes this lack of conversion to difficulty for users to determine which product best meets their specific needs. Business goals are to increase product usability and reduce cart abandonment rates by offering a new way to checkout which captures additional user information for potential follow-up marketing.

DISCOVER:

[BACKGROUND INFORMATION]

Solo target user image.png

Target User:

24- 38 year old professionals (72% male) who take biking seriously and are willing to pay a premium for a high-end, quality product.

Company Attributes:

Solo company attributes image.png

[MARKET RESEARCH]

Solo research questions image.png

The reasons for cart abandonment were clear and repetitive from site to site - solve these and the conversion rate of sales will increase. Some solutions that stuck out were:

1. Skip mandatory sign up. 

2. Free shipping is key. 

3. Forms must be quick and easy to fill out. 

4. Provide valuable content. 

Solo cart abandonment image.png

DESIGN:

[CREATING A BRAND TO CAPTURE THE TARGET MARKET]

Solo design 1 image.png

The Name:

Although cycling is traditionally viewed as an individual sport, the target customer resonates with the idea of a biking community.

The word
“SOLO” captures the independence of biking, but is juxtaposed with “NYC Bike Club,” which conveys a contrasting message of community.

SOLO Bike Club is a play on words which appeals to the user as an individual biker, but also as a member of a much larger biking community.

Solo design 2 image.png

The Logo:

The word SOLO lends itself to imagery of a bike, with two large circles resembling wheels. This logo was carefully chosen to subtly invoke the image of a bicycle while still maintaining a minimal and serious design.

Solo design 3 image.png

The Palette:

These colors were chosen to appeal to the target demographic. The overall intention was masculinity and minimalism. An addition of a red accent to a grayscale palette adds visual appeal, and a sense of boldness and desirability.

Solo logo.png

[USER FLOWS]

The user flows most integral to increasing website conversion rates of sales were narrowed down to the browsing process and the checkout process. To improve each, I created the additional features highlighted below.

[PRODUCT COMPARE TOOL]

Solo product compare image.png

[STEP 1]

After a user selects the “compare” button of one product, that product is isolated in a frame above the rest.

[STEP 2]

The user then selects a second product to compare to the first selection. That product joins the first in the isolated frame, easily distinguished from the unselected products.

[STEP 3]

Once the user clicks the “compare” button in step 2, they are brought to a new screen where the products are displayed side-by-side, where the most important features are easily compared. The user can then either purchase or keep browsing.

Following the completion of the low fidelity frames, I always run quick usability tests to resolve any issues before moving onto the high fidelity creations.

PROTOTYPE & TEST:

[INTERACTIVE PROTOTYPE - TRY IT OUT!]

The second round of usability testing was super important to evaluate how participants would react to the new user experience. The participants included two men and one female and were chosen based of age and relevant interests to represent the target audience of Solo NYC Bike Club.

solo testing participant image.png
solo testing goals image.png

RESULTS:

Positive results from test participants.

Testing always leads to insightful feedback. Some minor adjustments to certain features were made as a result of testing. I reworked the bike selector tool to be more intuitive, and adjusted the home page to give users an extra push towards sales.

Overall, the prototype was
highly received by all participants. The UI design, colors, type and aesthetic were highly praised. The end product proved to be an easy, intuitive, and informative experience.

LESSONS LEARNED:

solo lessons learned image.png
solo crosswalk image.png
solo user flows image.png
solo HF tools image.png