Welcome To The HandledBar:

Where Biking Meets Seamless Shopping

As a leading bike company, the mission is clear: to elevate user experience and drive revenue. However, the site recently faced a common challenge: a significant portion of the users (50%) bounced without adding items to their cart, while a staggering 70% abandon their carts at the registration page, hinting at potential friction points hindering their journey.

By equipping users with comprehensive information – including detailed descriptions, quality imagery, and intuitive tools like a bike finder – coupled with a hassle-free guest checkout option, barriers were eliminated to drive purchases and boost conversion rates. Join the journey, one pedal at a time.

The intended user base includes:

Project Overview

The question was asked, how might we help bike enthusiasts quickly, confidently, and securely select and purchase a bike online?

It was assumed that by providing detailed information, quality images, a bike finder tool and a guest checkout option, cart abandonment will decrease and conversion rates will increase.

Potential solutions included providing content rich pages to motivate and inform, increase engagement and enhance decision making processes via a bike finder tool, and friction at checkout by offering a guest checkout option.

Responsibilities involved empathy and curiosity, research and analytics, branding and visual design, prototyping and usability testing, and project management.

Research > Discover > Empathize > Define

Secondary Research

Literature Review - I explored existing data to understand user pain points during online shopping to avoid common pitfalls in ecommerce design.

Competitor Analysis - I reviewed 3 industry leaders, Trek Bikes, Amazon, and Target, to identify action items and form a strategy.

Primary Research

User Surveys - I surveyed 6 bike enthusiasts of whom were majority male and all of whom were online shoppers. Pattern emerged and exposed friction during browsing and information gathering, difficulty with sizing, and barriers during checkout.

User Interview Objectives - I aimed to get to the root of questions regarding why online bike shoppers abandoned carts or felt unconfident about completing a bike purchase online.

Interview Methodology - I interviewed 3 users utilizing a semi-structured interview discussion guide for a period of 30-60 minutes.

Research Synthesis & Artifacts

Affinity Map - After interviewing participants, I put their statements on separate, digital post-it notes and then organized the notes into themes.

User Persona - I created a key market segment representation based upon the characteristics presented in the empathy map, weighed against the data gathered.

Jobs-To-Be-Done Statements - Main, related, emotional and social jobs to be done were identified to help uncover the underlying motivations and requirements.

How-Might-We Statements - I framed the problem space by formulating "How Might We" queries to transform pain points into opportunities.

Deliverables - (click on images to expand)

Explore > Design <> Prototype <> Test

Conceptualize

Information Architecture - I crafted a site map and identified critical user pathways (red route user flows) to ensure content and navigation is well-organized.

Deliverables - (click on images to expand)

Explore & Design

Inherited Wireframes - I incorporated pre-existing frames and notes into the next design stage. This involved creating low-fidelity wireframes and user flows.

Low Fidelity Wireframes & Wire flows - I assembled wireframes and user flows to form wire flows to visualize critical user pathways by which users navigate.

Low Fidelity Prototype - I crafted low-fidelity designs and interconnected UI elements and frames, culminating in an interactive prototype ready for testing.

Deliverables - (click on images to expand)

Usability Testing

Round 1 - I enlisted the participation of 6 individuals for a two-stage, moderated usability testing process: 4 participants in round one, 3 participants in round two.

Deliverables - (click on images to expand)

Late Stage Design

Design System - I generated a style guide to facilitate the maintenance of design consistency in the next round of wireframes and guarantee a uniform experience.

High Fidelity Prototype V1 - I crafted high-fidelity designs and interconnected UI elements and frames, culminating in an interactive prototype ready for testing.

Deliverables - (click on images to expand)

Usability Testing

Round 2 - I enlisted the remaining of 3 participants for the next phase of testing.

Deliverables - (click on images to expand)

Late Stage Iterative Design

High Fidelity Prototype V2 - I crafted high-fidelity designs and interconnected UI elements and frames, culminating in an interactive prototype ready for testing.

Deliverables - (click on images to expand)

Lessons Learned

Reflecting on this journey, several key insights emerged:

Firstly, identifying issues is essential to devising effective solutions. Initially, I harbored various potential solutions, but it was the invaluable insights from user interviews that deepened my understanding of my target users and their behaviors, shaping the essential features for The HandledBar.

Secondly, prioritizing user-centricity entails testing early and frequently. The feedback received proved immensely valuable in anticipating and averting issues. Ongoing user feedback is paramount for validation.

Lastly, maintaining design consistency and standard (universal) UI patterns is critical for mitigating cognitive overload and friction. My experiences underscored that even minor deviations from industry standards can lead to user confusion and frustration.