E-commerce Website Redesign

DENVER BICYCLE RESPONSIVE DESIGN (CASE STUDY)
Denver Bicycle caters to the family and casual biking needs of Central Denver bike riders. New riders can depend on Denver Bicycle, online or in-person, to find the right hybrid or cruiser to meet their needs.

Design Process

Define

What is the problem that needs to be solved?
The Problem
Outdated and hard to use website with low conversion rates.
The Goal
Create an new and improved way to purchase bikes online to help conversions and business.
Contributions
Lead UX Designer
Research • UX/UI Design • Usability Testing
Discovery
What is the users perspective?
Interviews
Before getting started on the project I interviewed Denver Bicycle clients. All participants were ready and to buy bikes and were looking for more information on the best bike for their needs.
Interviewees would like to have easy to understand information on different bikes types, sizes, etc. The biggest concerns were purchasing a bike that did not meet their specific needs.
Empathy Map
Using the data collected from my interviews and research I created an empathy map to understand users' feelings, perceptions, and motivations. This helped give insight into what strategy should be used in designing and branding Denver Bicycle.
Persona
Based on the empathy map I synthesized a persona as a representation of the user - Ashley is a teacher that is ready for a new, fun way to get around town.
Site Map
To help me understand how to organize the website I conducted a card sorting workshop. The participants were asked to sort elements of content and then group and categorize them in a way that would make the most sense to participants.
Based on the results of the card sorting workshop, I created a site map to show the relationship between the content within the Denver Bicycle website.
Ideate & Design
Sketch & design ideas based on the findings uncovered during the define & discovery PHASES.
Sketches & Wireframes
Final UI Designs
Validation
Test the designed solution to validate it against the problem statement.
Prototype
Usability Testing Plan & Goals
tEST OBJECTIVES
Test how a user can perform an easy and straightforward task on the Denver Bicycle website. The user's tasks is to learn more about hybrid bicycles and purchase one sold on the website.
• Identify pain points in the user’s experience.
• Identify missing information that users may be looking for
• Among the several ways that users can look at bikes identify which is the most common way
Test subject
The subject of this usability test is the prototype of the Denver Bicycle website. Denver Bicycle is a local bike shop located in Denver, CO. Denver Bicycle is looking to rebrand and begin selling bikes online and booking service/repair appointments through the website.
Test Methodology
The prototype will be presented to the testers for an in-person test of functionality and usability. The facilitator will also act as the observer.
Participants & recruiting plan
3-6 people, men and women. History of bike purchases is not a requirement.Participants will be recruited directly in an informal manner. Participants are the friends and relatives of the facilitator but have only superficial knowledge of the prototype.
Script
Hello [Tester’s name]!
Thank you for participating in the usability testing of Denver Bicycle. DenverBicycle is an insurance company that offers a wide range of insurance policies.The website is not up and running yet, so before it launches, we would like to test the site to make sure it functions as we hope. This is not a test of your knowledge on bikes or online shopping, we just want to know what you think of the website thus far.
You will be asked to do a short list of tasks on the skeletal site. And it should only take about 15 to 20 minutes of your time. Please indicate any problems or issues you encounter as you use the website. Your feedback is very valuable to the success of the website. Thank you again for participating in this usability testing.
task
You are looking for a new way to commute to work on warmer/rainless days. You did a search for local bike shops near you and Denver Bicycle came up. You goto the Denver Bicycle site and decide to purchase a hybrid bike through the website.
TEST GOALS
Evaluate the participants interaction with the website on a desktop. Identify potential pain points, areas that confuse the user or difficulties in the site navigation or architecture.
TEST COMPLETION RATE GOAL
100% of users should go through the task and finally end on the check out page.
ERROR-FREE RATE GOAL
80% of the testers should be able to go through the test without experiencing much errors or hiccups
Usability Testing Results
overview
• 4 participants
• Ages ranged from 26-61
• From start to finish, sessions lasted about 10 minutes • 100% of participants were able to complete the purchasing and checkout process of buying a hybrid bike
• Overall, errors were minor and mostly due to particular features not being fully functional, which went against expectations ( ie. the ability to learn more about bikes or view all bikes for purchase)
• On average, participants completed their tasks in 3 to 4 minutes
test goals
• Participants were able to easily find and navigate to the bikes page/ hybrid bikes page
• Participants were able to quickly find the info they needed either through hybrid bikes page or purchase page
• Participants could view the hybrid bikes page and move onto purchase quickly
• Participants were able to complete the purchase flow of buying a hybrid bike
Implement
Monitor the performance of the design
The next step is to work with developers on the launch of the new Denver Bicycle website. Following the launch, continued user testing and analytics would assist in making refinements to the product.