FreeRange Cycles concept redesign

 
p2 mock.png
 
 
 

INTRODUCTION

Unsolicited redesign of a bicycle website incorporating an e-commerce store

 

DURATION
2 weeks

ROLE
UX Designer

TEAM
Solo

TOOLS
Pen & paper, Omnigraffle, Sketch, InVision, Illustrator

 
 

 
 

DEFINE

BACKGROUND

FreeRange Cycles is an established bicycle shop located in Seattle, WA. specializing in bicycles and components for both the urban commuter and long-distance rider. They also offer a full-service shop and can handle any type of repair.

PROBLEM

The current website is outdated and clunky, leaving users feeling unimpressed and unconfident in the company. Currently their website does not feature an e-commerce component.

SOLUTION

By revamping the layout, adding an e-commerce store, and streamlining the experience, users will feel joy and excitement while shopping.

 
 

 
 

DISCOVER

 
 

INITIAL STATE

The FreeRange Cycle’s website is a small collection of pages informing cyclists of services, products, and store information.

The existing navigation is shallow, totaling five unique pages. Based on user feedback, navigating pages was difficult due to lack of breadcrumbs. Current pages disappear from the navigation bar once a page tab is clicked. Product visibility was also reported to be poor due to small text size and lack of online procurement option. The “Bikes & Accessories” page features links to manufacturer websites, effectively resulting in low conversion rates.

frc affordances.gif
frc.png
 
 
 

EXISTING SITEMAP

Users are sent off-site, decreasing revenue and view time.

Users are sent off-site, decreasing revenue and view time.

 
 
 

PROTO-PERSONA

This is John, a pre-established persona for this project. His needs and pain points can be addressed by creating a seamless online shopping experience, while establishing trust via user reviews. 

 
p2 persona john.png
 
 
 
 

CARD SORTING

Three users participated in a card sorting activity to group all the existing features.

Results:

  • "Bikes & Accessories” should be two distinct categories

  • "Contact Us" and "Our Story" should be in same category

  • "Links" was ambiguous and outdated

frc cardsort.png
 
 
 

REVISED SITEMAP

frc revised new.png
 
 
  1. Shopping cart added to bring e-commerce functionality

  2. Pages consolidated to decrease clutter and group relevant information

  3. Product is listed on-site, allowing for procurement through FreeRange Cycles

 

 
 

Design

COMPETITIVE ANALYSIS

I began by comparing FreeRange Cycles to three bike shops in close proximity to FreeRange. Specifically, I looked at clientele, services, products, and e-commerce functionalities.

 
Compet analysis p2.png
 
 

SKETCHES + USER FLOW

I drew three layouts combining typical features across competitor sites, focusing on the online store component, and obtained feedback from four users on which they were most likely to use.

 
IMG_6868.JPG
CheckoutFlow.png
 

I then created a step-by-step user flow for the procurement process with the user’s preferred layout from my initial sketches to understand how users purchase products.

 
 
 

PAPER PROTOTYPES

I expanded upon users’ preferred layout from previous testing by creating paper prototypes focused on testing product accessibility. I tested iterations with five users.

 
 
frc wireframes all.png
Self wireframe p2.JPG
 
 
 

Navigation Iteration

Elements of the navigation bar changed with user feedback.

 
 
p2 nav bar callout.png
 

1. Inclusion of "Home" for easy navigation. Carets added to "Bikes" and "Components" for affordance.

2. “Account” and “Cart” moved to corner to free up room on navigation bar

3. “Component” clarified to “Parts” to address user confusion regarding definition of component

4. “Account” and “Cart” moved back to navigation bar due to users reporting location in corner being unintuitive

 
 

CLICKABLE PROTOTYPE

I translated the final iteration of paper prototypes into digital wireframes. I tested the clickable prototype with four users to further refine my design.

frc clickable all big.png

I gave users three tasks to complete before each usability test:

Task

  1. Find and purchase the highest rated handlebars

  2. Find “Handlebar7” and read the reviews to see if there is a trend in ratings

  3. Find out whether FreeRange Cycles has a special loyalty program

Purpose

  1. Determine whether users navigate the filter menu successfully

  2. Determine whether users locate the “See all reviews” button easily

  3. Determine whether users navigate to “About” page and scroll to find details at the bottom of page

 

FINDINGS FROM USABILITY TESTING

  • Filter dropdown text was unintuitive and confusing

  • Lack of item search capability

  • Lack of “in store pick-up” during checkout process

  • Missing item quantity on specific item pages

  • Navigation menu was straightforward and easy to navigate

  • Breadcrumbs increased confidence in navigating the hierarchy

User testing revealed that the core structure and hierarchy of the website was simple and intuitive. However, key minor features were missing. Once "item search", "quantity display", and "in store pick-up" were added, users reported the process to be seamless.

gif frc purchase.gif
 

FINAL DESIGN

 

 
 

REFLECTIONS

RESULTS

Usability tests confirmed that the redesign resulted in an experience matching users’ expectations of how a modern, online shopping experience should feel. Users were able to easily navigate the online store and purchase items directly from FreeRange Cycles .

NEXT STEPS

I want to design a new system allowing users to purchase complete bicycles in addition to parts for bicycles. I would also like to create a more comprehensive services menu, including a FAQ about bicycle maintenance. 

WHAT I LEARNED

Humility. I am not designing for myself so I should not get attached to my designs. Going back to the drawing board, sometimes over and over, is part of the design process and I now embrace that.