Responsive E-commerce Website Design for a Fictional Enterprise
Introduction
Spoke+Cog is a fictitious startup company that sells bikes and bike gear on their mobile-web experience. During the pandemic, Spoke+Cog want to enhance their browsing and checkout experience to greatly improve their product’s usability.
Project Deliverables
User Research
UX & UI Design
Usability Test
​
My Role
UX Designer
UI Designer
UX researcher
Duration
90 hours
​
​
​
Tools
Figma, Invision, Marvel, HTML, CSS
​
Problem
-
50% of users open on average 7 items and then abandon the site without moving anything into the cart.
-
70% of users who place an item in the cart abandon the process at the mandatory registration page.
Project goal
To improve the conversion from browse to completion of checkout to increase revenue on the mobile-web experience.
​
By incorporating a products-comparison feature and making account creation optional rather than mandatory will improve the conversion rate to increase the revenue. Also an intuitive, efficient, and delightful browsing experience will ensure increased retention and conversion.
Design Process
​​
​Market Research
Competitors Analysis
​User Interview
​
​
​
Define Problems
User Flow
​
​
​​
Low-Fidelity
Style Guide
​High-Fidelity
​
​
​
Guerrilla Usability Test
Redesign
​
​
Market Research
It is important to get a picture of the market by starting with market research to get a sense of the bicycle e-commerce market trend, who the audience are, and online shoppers' behaviors.
Bicycle e-commerce Market Trend after COVID-19
-
By the time COVID-19 lockdowns and stay-home orders were being issued, in-store shopping shifted to online buying, companies simply put their e-commerce business into high gear. (Channel Advisor.com)
-
"Online sales are likely going to account for 30 percent to 40 percent of our sales this year." Their websites have allowed them to keep revenue flowing so that they’re not only able to secure their own income and stability during COVID-19, they’re able to grow. (by Woody Smith, owner of the Richardson Bike Mart )
Demographics
-
Gen-Zers and Millennials enjoy bicycle online shopping. According to the US Department of Transportation, 76% of all bicycle trips are made by men and just 24% by women. (Bike Statistics and Facts 2021)
​Online Customer Behaviors Understanding
-
Many bike shoppers wanted to know which models were in stock and available for curbside pick-up at specific locations. (PracticalEcommerce)
-
Offer flexible payment options, like guest checkout or express checkout options. 9 in 10 respondents surveyed by Linnworks replied they expect flexible payment options when checking out of online shops. (ShipBob)
-
Comprehensive filters are essential, the most efficient and enjoyable product search experiences were had on the sites with robust filter and sort options. It helps users to pinpoint products quickly based on their specific requirements and needs. （Nielsen Norman Group）
-
Ensure Important calls to action are immediately visible and clear. Users are likely to close the website due to being unable to find CTA buttons. （Medium）
-
Comparison tool is one of the best features that enables the customers to come to a conclusion as to which product is the best pick among an abundance of choices. If there are many specs to compare, they should be organized, grouped and easy to read.（"To Keep Your Customers, Keep It Simple" by Patrick Spenne and Karen Freeman）
-
Provide Support Live chat is a serious sales and customer support tool that will help to turn website visitors into clients. (ProvideSuppour.com)
​Competitors Analysis
With a better understanding of bicycle e-commerce websites, I analyzed three well-established e-commerce websites especially on their comparison feature, guest checkout, Live help and some UI parts, to determine what existing websites do well (and not so well).
​Target Users
Spoke+Cog understand their users well. Based on its current user base, the following attributes have been identified:
-
24 - 38 years old
-
User base is 72% men
-
High income earners
-
They take biking very seriously. They will spend a lot of money on this investment so are very picky and do their research
Adam Caar
Strengths
-
Compare tool with differences highlight
-
Compare information formatted in a good way to read
-
Guest checkout and express sign in
-
Live chat is placed obviously
Weaknesses
-
Recommendation banner distracts users
-
Filter menu are unable to close
-
No express checkout
Adam Caar
Strengths
-
Customers' reviews are summarized by cons and pros
-
The filter menu is presented concisely
-
Full information of bikes (price, specs, components, size)
Weaknesses
-
All the CTAs are not visible enough
-
Comparison page is text-heavy and difficult to skim
-
No save button
-
No Live chat
Adam Caar
Strengths
-
Brightly colored CTAs
-
Filter list is formatted in a good way
-
Availability information at a glance
Weaknesses
-
No guest checkout
-
No in-depth comparison feature
-
No Live chat on the page
-
“More to consider”, “Similar items”, and “Featured products” are repetitive and add confusion for the users
User Interviews
I selected 5 participants based on the Spoke+Cog’s target audiences. My objective for conducting user research was to learn about users’ experience with online bike shopping. In addition, I wanted to confirm these 3 hypothesis:
01. A well-designed comparison tool can help users make decisions easily and fast
02. Providing guest check out will reduce cart abandonment
03. An intuitive and delightful browsing experience can increase retention and conversion.
Key Insights
To synthesize the qualitative data gathered from user interview, I created an affinity map to identify users' frustrations, needs, and goals.
1
Frustrations with the browsing experience including: a lack of filters or sorting options, a lack of available information about the bike, uncertainty about refunds / warranties in case the bike was broken or missing some component upon delivery, no product reviews, etc.
2
Frustrated about the compare feature: not visible enough, text-heavy, no pros and cons from customer reviews, unformatted category. Compare tool should follow conventional design.
3
5/5 users prefer express checkout if the website provides and 4/5 users would like to checkout without creating an account. Most of them feel frustrated or abandon the checkout process with mandatory account creation.
​4
Live chat and purchase guides are very important for users to choose the right product. Live chat should show up on every page and be visible enough for users to read.
​Define Problems
​Based on the insights I discovered from interview, I crafted three main problems to inspire solutions.
01. How might we help users determine which bike is better for them so that they feel confident in their purchase?
02. How might we help users find a suitable bike faster so that they are more likely to add to cart?
03. How might we reduce friction in the checkout flow so that users can confidently complete their purchase?
​User Flow
Based on the problems I defined, I determined three red routes that are critical to my design. The first two are MVP for completed for purchase. The other one is an available feature to help users confidently choose their bikes. I created separate user flows based on each red route, that the users will encounter when they purchase a bike on this website.
User Flow 1: Browsing by filter and Comparing products
User Flow 2: Checkout
User Flow 3: Product Finder
Lo-Fi Wireframe
To stay within the 90-hour timeline, I moved right into digital wire framing after the User Flow exercise. The wireframes allowed me to quickly visualize the browse and checkout processes and create a testable prototype (using the Marvel Pop app). I took inspiration from competitor sites while making sure to incorporate the key factors that lead my users to make purchases.
User Flow 1: Products compare
.png)
.png)
User Flow 2: Finding and learning about new bike
User Flow 3: Checkout
Guerrilla Usability Test
I conducted both in-person and remote usability testing with 5 participants. The goal of these sessions was to gain insight into the usability when browsing, comparing, researching products, and checking out as well as to understand how the participants felt throughout the experience. I jot down their mistakes, slips, and confusions they expressed in the process.
​
01 Prioritizing user reviews
Solution:
​Move the “reviews & ratings” to the top so that users can look at the pros and cons from their reviews before they start comparing specs.
​Issue:
-
3/5 users expressed that user reviews would be the most important factor to them when purchasing a bike.
-
Users wanted to see the comparison of product reviews before the technical specs
02 Highlight differences on by default
Solution:
​Highlight the differences by default when users go to the “compare” page and highlight the different rows.
​Issue:
​Users preferred if this feature was toggled on by default since they are most interested in the differences between the items they were looking at.
03 Users want to narrow down the subjects in the Live chat
​Issue:
​4/5 users are confused about what this "Help" feature is about, the initial help button just led them to the expert chatting directly.
Solution:
-
Add specific subjects in the Live Help feature
-
Combined “Help me choose” and “chat with expert” and “order tracking” together
04 Users are distracted by compare tool banner
Solution:
-
Move compare banner from the bottom corner to the right side
-
Add Price under the product name
​Issue:
-
3/5 users stated that the “compare products” banner at the right corner of bottom is a little distracting and took focus away from the browsing other products.
-
Users were frustrated by this banner blocking the “compare button” which they wanted to tap.
-
They would like to see the price of the product instead of remembering.
05 Users would like to have “purchase together” and “upgrade products” shown on the cart page.
​Issue:
3/5 users would like to click “add to cart” button to add upgrade products or recommended products to the cart without leaving the shopping cart page
Solution:
​Add “upgrade your bike” and “purchase together” to the cart page.
Style & Branding
I developed the visual style of Spoke+Cog through the style tile. It serves as a synthesizing document of the brand ideas and inspirations gathered, incorporating logo design, color palette, typography, and imagery.
Mockup Design
Usability Test (2nd)
After incorporating feedback from my first round of user testing and converting my low fidelity screens to high fidelity, I conducted a second round of usability testing with five new users. I asked users to complete the same three tasks: compare products; use live help to learn about new bike, and checkout.
Able to find and use comparison feature easily
Able to use Live Help feature to find the right bike and get questions answered
Able to use filter to search for products easily
Able to complete checkout process easily and fast
​Redesign
01
User would like comprehensive price filter
Solution 1:
Add "under price" and "above price" choices in the price filter and also add customize filter input box.
​
Issue 1:
Users feel frustrated by the lack of a custom price range.
Main Features Preview
-
​Immediate call-to-action to shop, followed by commonly searched categories
-
Further down on the page, help me choose feature, athlete news and videos, brand advantage to help promote engagement.
Home Page Design
Comprehensive Filters
-
Filter and Sort buttons are prominently featured on the left of product list screen.
-
​The filter menu is presented concisely to reduce cognitive load and provide a scannable overview - options are available in dropdowns.
Products Comparison
-
Compare buttons are easy to find on both browse and individual page.
-
Once items have been added to the comparison tool, it is easily viewable and accessible.
-
Compare data are formatted in a good way to scan and read. "Highlight differences" by default is helpful to quickly skim through the product differences.
Floating Action Button
-
The "Help" floating action button located at the right bottom corner that allows users to solve problems faster, and assure customers that you're there when they need you.
Specific Help Category
-
Narrow down categories and lead users to the right screen directly and fast.
Informative Checkout Process
​​
-
Guest checkout and express checkout
-
A status bar at the top of each page lets users know where they are at in the process.
-
An order confirmation page assures the user that the process is complete and their order has been received.
Takeaway
Working within a 90-hour timeframe was challenging, but it was great practice for putting together (and sticking to) a project plan and determining which methods would be most efficient and beneficial for building a solid prototype. With the final prototype created, I believe I have met the goals that were outlined in the beginning of the process. During the process, I learned a great deal about e-commerce design and the importance of designing for both conversion and customer loyalty. Also research is extremely important, it is the foundation of the whole project.
​
In this project, I tried to use HTML and CSS to design a responsive website (compare page) for Spoke+Cog that provides the customers with a smooth online purchasing experience. If I had more time, I would to design all pages by HTML and CSS.