Before diving into the actual design of the project there needed to be some extensive research done which I will present next.

Research Background

50% of users open on average seven item pages and then abandon the site without moving any items into the cart. Hypothesis is that users are unable to determine which bike is best based on relative features.

“70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase. Your PM wants you to design a guest checkout to solve for this.”

The goal of this research is to identify opportunities for improving the user experience of finding the perfect bike and the checkout process in e-commerce platforms through online secondary research and competitor analysis.

The Problem:  Cart abandonment after the user goes through the checkout process and can’t checkout as a guest, then not having enough people sign up for the membership, and lastly not getting enough features and specifications on the bikes being sold. (Picture below is the existing wire-frames)

The Solution: 

With extensive research to look deeper into competitor analysis and understanding ecommerce good practices we will completely revamp this store and have it focus on a certain market which will be MTB(mountain bikes) so we can go deeper into the bike description and features along with providing multiple ways to sign up for the newsletter and a paid membership while allowing customers to still checkout as a guest. 

Research

Research Questions:

1. What are the common pain points and areas for improvement in the current e-commerce checkout process?

2. What are the best practices and emerging trends in e-commerce checkout processes?

3. How do competitors' checkout processes compare in terms of user flow, visual design, security features, and mobile responsiveness?

Research Methods:

1. Online Secondary Research

2. Competitor Analysis

Industry examples (competitor analysis)

Our Users: 

Our Users can range from people who are die hard mountain bike fans to those that have dabbled in that market but are complete beginners in the MTB world.

A link to the master research notes: Research Notes

Empathy Maps

Information Architecture

Now we are getting into the actual design and flow of the ecom store and this is where it got exciting for me.

Here is the user flow red routes

After deep analysis of what the PM wanted for this project and all the research collected I felt that these MVP red routes would be most important to focus on with the time constraint that I had to get this done.

We will now dive into the Sketches and Mock-ups!

LO-FI Mockups

I first hand-sketched onto paper to get the user flow red routes visualized. Then I created the digital sketches using Miro and started a mobile version of the mock-up as well.

Digital Lo-Fi mockups created in Miro

Here is the Link to the full mockup in Miro: https://miro.com/app/board/uXjVNl-fam8=/?share_link_id=57206982629

First Round of Testing(Mockups) 

The 3 scenarios that I gave to the participants are the following

1: Imagine you are a mountain biking enthusiast looking to explore and potentially purchase a new mountain bike.

2: You want to purchase a bike today and know exactly what you want on the website. Purchase a downhill mountain bike as a guest.

3: You want to become a Trailicana exclusive member. Find a way to become a member and purchase the monthly subscription.

Overall the testing went good even though I can only get three participants with the time constraint that I had but they gave a lot of good feedback.

Here is the three main findings.

1: Improve Membership Offer and Access

Recommendations:

• Add testimonials to membership offer page

• Include login page before membership offer

• Newsletter popup needs an exit button and have options of what type of email can be sent.

2: Bike Catalog Page Needs Improvement

Recommendations:

• Space out carousel rows and make sure categories and filters are placed in an optimized spot.

• Each bike category needs to be able to convey deeper reason and info on that style bike.

3: Address Fill in Box Needs to be Standardized

Recommendations:

• Used a common format for fill-in boxes for addresses.

• Make sure there's an apt/unit number section

Branding and Style Guide Creation

Hi-Fi Prototyping

The process of designing the ecom store definitely was a learning experience for me but I was determined to

figure out a proper way of creating interactive components within a single frame instead of making multiple

of the same frame to accomplish the same thing.

This project helped me understand carousels, vertical and horizontal scrolling, and using component sets to

accomplish these features along with other interactions for example the tooltips for sizes and bike style info. 

Click here for interactive prototype

Enjoy!

-Design and Ideation tools used for the project: Miro and Figma-

Prototype User Testing

Hi-fi usability testing

The Scenarios for the prototype user test were very similar to the mockup user tests.

1: Imagine you are a mountain biking enthusiast looking to explore and potentially purchase a new mountain bike.

2: You want to purchase a bike today and know exactly what you want on the website. Purchase a downhill mountain bike and add a headlamp from the upsell and checkout as a guest.

3: You want to become a Trailicana exclusive member. Find a way to become a member and purchase the monthly subscription.

Common issues:

#1 Billing Address Inconsistency

State dropdown menu get cut off by frame and it isn’t consistent with the shipping address form.

• Fix billing address component and get rid of the state dropdown, add dropdown to the main frame/screen. Copy shipping fill in boxes

#2 Tool Tip Issues

• Fix background color of bike size chart icon to be more noticeable

• In the filter section it is hard to read and need to have color change and/or open a different way

#3 Arrow Sizes Needs Optimizing

• Carousel arrows are too small and need enlarging or added in like on the home page

• Back arrows in checkout process are too large and need shrinking

Within the prototype I also added a few other things like an extra header banner in the homepage that mentions the community and also adjusting the membership offer page which took a good amount of time.

Reflection and Future Plans

From this point I’m excited to continue to make the Trailicana Bikes ecom store a reality and launch it by the end of this year if I can source quality bikes to sell on it since it will be my own business endeavor. Trailicana is already selling outdoor hiking gear and I’m hoping to expand the Trailicana name and brand by bringing this prototype into fruition. 

Thank you for your time!