SPOX

UX / UI DESIGN

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

Objective: discover patterns and common themes in my interview findings.

By grouping together common ideas, I can come up with insights in regards to the participants’ experiences in bicycle shopping.

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?

1. How might we provide an online bike shop that beats in-store shopping experience?
2. How might we provide all the necessary information to assist the user in researching their needs?
3. How might we showcase the bikes in a way to increase conversion rates?
4. How might we make it easy for the user to find what bike fits their needs?
5. How might we streamline the checkout process for the user?
6. 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.

BACKBANK