VELOZONE

Optimizing e-commerce for Velozone: Enhancing sales conversion and user experience

Project Type: Website

Role: Lead UX/UI Designer

Date: January 3, 2025

INTRODUCTION

My aim for this project was to solve real user challenges and deliver measurable impact for VeloZone, a premium e-commerce platform specializing in high-performance bicycles. Despite attracting a dedicated and affluent user base, VeloZone faced significant drop-offs in its sales funnel. Users struggled with product discovery and comparison, and an overwhelming 70% abandoned their carts during the checkout process.

As a UX/UI designer with a passion for creating user-centered solutions, I saw this as an opportunity to combine in-depth research, thoughtful design, and iterative testing to address these challenges. Given an ambitious timeline–just about four weeks to take the concept from research to a refined high-fidelity prototype–my approach was methodical, grounded in data, yet streamlined and practical. The compressed schedule demanded meticulous planning, efficient decision-making, and a focus on iterative design. While the time constraint was daunting, it also pushed me to prioritize critical elements and rely on user feedback to guide key decisions. I analyzed competitor platforms, synthesized secondary research along with user feedback, and designed solutions tailored to VeloZone’s high-income, detail-oriented audience.

This case study chronicles my end-to-end solo design process, from identifying user pain points to validating solutions through testing. Over the course of this project, I worked to refine the shopping experience, making it more intuitive, visually engaging, and seamless. Ultimately, this project is a testament to the power of design thinking in solving complex e-commerce challenges while meeting both user and business goals.

Through research, design, and iterative testing, my primary goals were to increase VeloZone’s sales conversions and improve users’ web experience by 1) enhancing product discovery, 2) optimizing comparison tools, and 3) streamlining the checkout process.

Let’s dive into the details of how I approached and executed this transformation.

DISCOVERY

UNDERSTANDING THE AUDIENCE

When approaching this project, I wanted to deeply understand the challenges faced by VeloZone’s target audience. Even before diving into research, I knew VeloZone catered to a niche audience of high-income, detail-oriented cycling enthusiasts. Further research, however, helped me flesh out the “Performance Enthusiast” represented by “Jack Speed.” This persona reflects VeloZone’s ideal customer: a meticulous, high-income cyclist seeking advanced technology and premium quality - core characteristics of VeloZone’s high-end brand angle. Jack’s focus on performance metrics, detailed product specifications, and expert recommendations mirrors the features and user experience VeloZone aims to offer.

Key User Persona

Jack and his peers engage deeply with product pages, rely on comparison tools, and conduct extensive research before committing to a purchase. Their motivations align with VeloZone’s ability to deliver detailed specs, cutting-edge technology, and tailored recommendations, reinforcing the brand’s savvy and dependable image. Additionally, their high lifetime value through repeat purchases of accessories, upgrades, and repairs makes them an essential focus for VeloZone. By targeting this audience, I aimed to enhance trust, streamline the buying journey, and position VeloZone as a leader in high-end cycling.

RESEARCH METHODOLOGY & SYNTHESIS

To achieve this, I utilized a combination of research methodologies:

Secondary Research: I reviewed e-commerce case studies and usability reports, including studies from the Baymard Institute, Nielsen Norman Group, and Think with Google. These resources helped identify key strategies to reduce cart abandonment, optimize mobile experiences, and improve product discovery.
Competitive Analysis: I examined the desktop and mobile platforms of competitors such as Trek Bikes, Canyon Bikes, REI, Decathlon,Competitive Cyclist, as well as major e-commerce platforms not directly related to bicycling, like Amazon and Target. These platforms provided valuable insights into industry standards for browsing, filtering, and checkout processes.
Usability Testing: I conducted two rounds of usability testing, each with five participants, including amateur and professional cyclists. Participants tested low- and high-fidelity prototypes for product discovery, filtering, comparison, and checkout.

Through this approach, aligning VeloZone’s platform with the needs of the performance Enthusiast, I was able to uncover pain points and opportunities for improvement in three critical areas–product discovery and browsing, product comparison, and checkout:

Enhanced Product Discovery: Implement advanced filters and well-organized categories to simplify browsing.
Simplified Comparison Tools: Design visual, card-based layouts that prioritize clarity and ease of use.
Streamlined Checkout Process: Introduce a prominent guest checkout option, minimize steps, and emphasize trust signals.

By focusing on these areas, I aimed to create a seamless, user-centered experience that resonates with VeloZone’s audience while supporting their business objectives. These insights formed the foundation for the subsequent design and validation phases.

DESIGN & VALIDATION

The design process began with establishing a strong foundation through information architecture and user flows. These flows translated the research findings into actionable frameworks for addressing VeloZone’s key challenges in product discovery, comparison tools, filtering options, and checkout processes. By visualizing the end-to-end user journey, I identified opportunities to simplify interactions, minimize friction, and create intuitive flows that served both novice and advanced users.

User Flows

Product Discovery

Research & Comparison

Guest Checkout

Loyalty Checkout

This groundwork informed the development of low-fidelity wireframes and wireflows, which prioritized usability and simplicity in tackling the platform’s primary pain points. I iteratively tested these lo-fi designs to validate their alignment with user needs before transitioning to high-fidelity prototypes.

ROUND ONE: LO-FI USER TESTING

In the first usability test, five participants from VeloZone’s target demographic, each with varied cycling expertise, evaluated low-fidelity wireframes. The goal was to identify pain points and opportunities for improvement in the core features related to discovering, filtering, comparing, and purchasing products.

Core Screens

Recommendation Tool Screens

Comparison Tool Overlays

Key Findings

Recommendation Tool

Recommendations were too generic and lacked advanced customization options, such as filters for terrain or endurance.
Beginner users struggled with unclear technical terminology and visual hierarchy.

Comparison Tool

Layout was a bit cluttered and overwhelming for users, especially beginners.
Missing real-world performance metrics and user reviews frustrated advanced users.

Product Filtering

Filters missed options for advanced needs such as terrain type, temperature adaptability, or endurance.
Users were unclear if filters supported multi-selection.

Guest Checkout

The “Continue as Guest” button wasn’t prominent enough.
Users requested a summary of selected features before completing purchases.

Recommendations & Actions By Prority

High Priority

Add Goal-Driven Filters: Introduce advanced options for terrain type, endurance, or extreme use. Consider an “Advanced Mode” for technical specs.
Redesign Comparison Tool Layout: Refine cluttered tables into card-based comparisons that highlight key features and integrate user reviews.
Improve Guest Checkout Visibility: Make the “Continue as Guest” button more prominent and add a final summary screen for verification.

Medium Priority

Simplify Filtering Options: Consider grouping filters into “Essential” (e.g., size, price) and “Advanced” (e.g., aerodynamics, terrain adaptability). Include clear multi-selection indicators.
Clarify Visuals in the Recommendation Tool: Use icons and simpler terminology for beginner-friendly usability.

These changes were incorporated into the hi-fi prototype and tested in the second round to validate the design improvements.

ROUND TWO: HI-FI USER TESTING

During the high-fidelity design phase, I expanded and refined the initial style guide created along with lo-fi designs. This style guide emphasized VeloZone’s premium brand identity while ensuring the interface remained accessible and functional.

Revised Style GuideThe color palette was designed to balance contrast and usability, with Burnt Orange (#FF6A28) highlighting primary CTAs and Cool White (#F4F4F4) creating clean, open spaces. Supporting colors like Steel Gray (#6E6E6E) and Gunmetal Gray (#4A4A4A) provided hierarchy and subtlety for secondary elements. Typography choices reinforced readability and aesthetic appeal, with Bebas Neue for impactful headlines and Open Sans for navigation and body text. These visual elements created a cohesive and professional look, reflecting VeloZone’s high-end branding while maintaining usability.

The second usability test focused on a high-fidelity prototype that integrated changes from the first round. The same participants evaluated the refined designs to ensure pain points were addressed effectively.

Core Screens

Recommendation Tool Screens

Comparison Tool Overlays & Screens

Checkout Screens

Key Findings

Product Discovery & Filtering

Improved filter organization was well-received, but participants suggested prioritizing “price” over “size” and deprioritizing “color.”
Displaying bike categories on product cards saved users time.
Advanced users appreciated the new filters for terrain adaptability and performance, but minor adjustments were suggested to improve label clarity.

Product Page Enhancements

Clearer photo indicators and expanded review previews made product pages more user-friendly.
The awkward “Shop Bike” CTA was replaced with “View Details,” improving navigation.

Comparison Tool

The card-style layout made comparisons intuitive and efficient
Automated suggestions for lazy comparisons were requested as a future improvement.

Checkout Process

The streamlined guest checkout received overwhelmingly positive feedback, with participants praising its simplicity and logical flow.
Replacing radio buttons with individual CTAs improved clarity in account sign-up.

Recommendations & Actions By Priority

High Priority

Refine Filter Hierarchy: Ensure “price” is prioritized over “size” and “color.” Add advanced filters tailored for performance-focused users.
Enhance Product Pages: Expand review previews to show more content upfront. Add visual indicators for additional photos.

Medium Priority

Automate Comparisons: Introduce a feature that suggests similar products for lazy comparisons, complementing manual selection.
Optimize Guest Checkout: Simplify account creation to require only email and password, further reducing friction.

Low Priority

Provide Advanced Review Access: Create a dedicated review page accessible from the product page for users who want detailed insights.

By incorporating user flows at the beginning and embedding the style guide during the transition to high-fidelity designs, I created a design system that prioritized both usability and branding. The iterative process—from lo-fi wireframes to validated hi-fi prototypes—ensured that every design decision was aligned with user needs, resulting in an intuitive platform that met both VeloZone’s business goals and its audience’s expectations.

CONCLUSION & NEXT STEPS

Through two iterative rounds of user testing, I successfully validated and refined VeloZone’s platform to address critical user needs. The enhanced design now provides a seamless, tailored shopping experience that balances simplicity for beginners with advanced features for experienced cyclists. Key improvements include an optimized filtering system, a redesigned comparison tool, and a streamlined checkout process that prioritizes trust and usability.

By incorporating user feedback, the final prototype not only reflects VeloZone’s premium brand identity but also positions it as a user-focused e-commerce leader. Minor adjustments will further refine the design, ensuring that VeloZone meets its audience’s expectations while driving satisfaction and sales. Next steps include testing automated comparison features, enhancing product pages, and continuing to improve the checkout experience to maintain the platform’s intuitive flow and professional aesthetic.

Check out VeloZone’s interactive prototype below:

Previous Project

Next Project