FreeRange Cycles concept redesign
Unsolicited redesign of a bicycle website incorporating an e-commerce store
Pen & paper, Omnigraffle, Sketch, InVision, Illustrator
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.
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.
By revamping the layout, adding an e-commerce store, and streamlining the experience, users will feel joy and excitement while shopping.
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.
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.
Three users participated in a card sorting activity to group all the existing features.
"Bikes & Accessories” should be two distinct categories
"Contact Us" and "Our Story" should be in same category
"Links" was ambiguous and outdated
Shopping cart added to bring e-commerce functionality
Pages consolidated to decrease clutter and group relevant information
Product is listed on-site, allowing for procurement through FreeRange Cycles
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.
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.
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.
I expanded upon users’ preferred layout from previous testing by creating paper prototypes focused on testing product accessibility. I tested iterations with five users.
Elements of the navigation bar changed with user feedback.
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
I translated the final iteration of paper prototypes into digital wireframes. I tested the clickable prototype with four users to further refine my design.
I gave users three tasks to complete before each usability test:
Find and purchase the highest rated handlebars
Find “Handlebar7” and read the reviews to see if there is a trend in ratings
Find out whether FreeRange Cycles has a special loyalty program
Determine whether users navigate the filter menu successfully
Determine whether users locate the “See all reviews” button easily
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.
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 .
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.