SPOX
UX / UI DESIGN
The Challenge
Spox is an e-commerce website that helps people find, shop and purchase bicycles online. I was tasked with the challenge to improve the Spox mobile-web page usability by enhancing their browsing and checkout experience. The goal was to increase product revenue by boosting the conversion rate from browse to completion of checkout.
The Data
- 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart
- 70% of users who place an item in the cart do not purchase.
- Data shows that users abandon the cart at the registration page.
The Solution
To avoid cart abandonment, the solution was to eliminate unnecessary pain points throughout the checkout journey, while keeping human-centered design in mind. Specifically, giving customers the option to checkout as a guest rather than forcing them to create an account.
Role
UX/UI Designer, Data analyst
Information Architect, Logo design
Tools
Figma, Adobe Illustrator, Pen and Paper
Scope
6 weeks
RESEARCH
User Interviews
In order to gain qualitative data about users’ needs, frustrations and motivations, I conducted 5 interviews with experienced cyclists and are familiar with the bike shopping process. The objective of my research is to get a better understanding of the behavior and potential pain points of online bike shoppers.
Goals
• Determine how people prefer to shop for bicycles
• Identify what causes disengagement in online shopping for bicycles
• Determine the main areas of interest and deciding factors for bicycle shopping
• Discover the major pain points of bike shopping
Process
I performed a series of 4 interviews over Zoom video conference, and 1 in person. These participants ranged from 25 to 65 years old. We also used these interviews to gauge users’ existing knowledge of bicycles, and to understand how they would use it while shopping for a bicycle.
RESEARCH SYNTHESIS
Affinity Mapping
RESEARCH ANALYSIS
Findings
Pattern 1: Shopping Preferences
Users had a general concensus that while bicycle shopping online is convenient, they prefer in the in-store experience to get a feel for the bike and make sure it fits. However, they agree that their local stores don’t always have what they are looking for, and online shopping generally has better availability, prices, and convenience.
Pattern 2: Preparation
Users generally need guidance on what fits their needs, and do a lot of research online before they make a purchase decision. They need access to to details like specs and components.
Pattern 3: Priorities
Users generally agree that the bikes fit, looks, and price are the most important factors in buying a bicycle. They also expressed a high value in ratings and customer reviews.
Pattern 4: Frustrations
Users agree that signing up for anything online is a pain, and would rather checkout as a guest. Also shipping comes up as a pain point for online shopping, whether it be price rate, wait time, or assembly.
EMPATHIZE
Customer Journey Map
Based on the insights learned from our user research, we were able to create a customer journey map that illustrates a possible detailed scenario of a customer shopping experience from start to finish. This is someone who we felt represented customers most likely to use the Spox website. After fully getting into the mind of the user, I could proceed to the next steps in the designing the architecture of the website.
DEFINE & IDEATE
How Might We?
- How might we provide an online bike shop that beats in-store shopping experience?
- How might we provide all the necessary information to assist the user in researching their needs?
- How might we showcase the bikes in a way to increase conversion rates?
- How might we make it easy for the user to find what bike fits their needs?
- How might we streamline the checkout process for the user?
- How might we encourage users to add accessories and warranties to increase sales?
INFORMATION ARCHITECTURE
User Flows
By considering the needs of our user base, I established informational architecture with a user flow that walks through the whole shopping and checkout experience. In this step that I determined where to add the “checkout as guest” feature.
IDEATION
Sketches
DEFINE & IDEATE
Wireframes
Based on user flow, created low-fidelity wireframes to serve as blueprint for the visual interface of the website. It allows us to visualize hierarchy, priority, and flow before implementing more minute details, such as font and colors. Because the company wanted to to revamp the mobile web experience, I designed the wireframes for phones.
USER TESTING
1st Round Testing
To validate the framework of my designs, I did initial testing on the wireframes with 4 participants to discover any usability issues before jumping into hi fidelity design. For the most part, the testing went smooth and didn’t run into any major issues. Here are areas where the users had some struggle:
- All users would rather check out as a guest then have to sign in
- Users would want option for facebook/google sign in
- The shipping rates/options were unclear in the checkout process, there was only space
for shipping address - They would want a min/max for price filter
- The drop down list of categories for “bikes” could be moved to the filter section
UI DESIGN
Style Guide
Following the brand assets is important to keep constistancy throughout the customer’s experience. The following style guide set up important design elements that are aligned with the brand identity.
BRANDING
Logo
I created a new logo for Spox to represent their brand with a vectorized bike spoke as the “O”. It was created with Adobe illustrator.
UI DESIGN
High Fidelity Prototype
A responsive UI design was created by building from the wireframes and style guide.
USABILITY TESTING
2nd Round Testing
In order to test the overall quality and ease of navigation throughout the whole design, and to observe areas of errors/difficulties, I went out and had 4 participants test with my prototype. Criteria for participants were based on the demographics from research phase (ages 16 – 60) and people who have experience shopping online for bicycles. I used think-aloud methodology and in-person moderated usability testing.
Main Tasks:
1. Find road bike
2. Filter through choices
3. Add to cart
4. Checkout either as guest or by registering
5. Fill out all payment information
6. Complete order
Interview Questions:
• This is the product page, what kind of content do you think this page contains? Explore page, any questions?
• Check out with this bike. How would you rather proceed, with an account or as a guest?
• Go over your cart, what information is on this page? What are some of the things you look for in this page?
• How was the flow of the checkout process so far? Any thing that sticks out to you, good or bad?
TESTING ANALYSIS
Findings
I used the transcript of my interviews and took notes on areas where the participants had had some difficulty, and revealed both functional and conceptual areas of improvement.
- Confusion around the “new” labels
- They wondered if it was just new/used bikes. There will need to be some clarification about new=2020
- Wondering if they could check if local stores have stock
- There was no shipping information at the product page, as far as free shipping eligibility or ship to a retailer option
- The “you might also like” section was overlooked, which could result in losing sales
- No way to see your details as you progress in checking out, in case you make a mistake in your email/shipping address etc
UI DESIGN
Final Iterations
Final Prototype
You’ve just landed on the Spox homepage. From here you will go to road bikes, set your filters, choose a bike and check out.
Can’t see the prototype? Click below.
Reflection
Building the mobile-web experience from scratch allowed me to understanding the workings of e-commerce structure and flow. I was able to align my design with industry standards of e-commerce, yet provide a unique customer experience with the Spox brand. The data passed along from the project manager provided me with the information neccesary to form hypotheses and brainstorm on areas we can improve the site. Such a simple feature such as “guest checkout” has a big affect on the user’s experience. My goal was to create an easy and seamless checkout flow paired with a sleek and elegant visual design.
OTHER PROJECTS