Case Study: Bikes Direct Redesign
The Challenge
Bikesdirect.com’s website is outdated and difficult to navigate. Visual inconsistencies in the interface and issues with information architecture contribute to the problem. As a result, customers experience confusion and distrust, which hinders sales growth.
The Goal
The goal was to create a clearer shopping experience by improving navigation, structure, and visual consistency so users could find products faster and feel more confident browsing.
Role
UX Researcher and Designer
Duration
10 weeks
Tools
• Figma
• LiGRE
• Adobe Photoshop
• Optimal Workshop
Context
UX Fundamentals course, University of Arkansas.
Stakeholders
Course Instructor
Research methods
• User Interviews
• Design Audit
• Card Sorting
• Usability testing
Process Overview
Phase 1: Research
User Research
Primary insights were collected using observation, user interviews, desk research, and thematic analysis. Key pain points surfaced directly from participants:
• Lack of trust due to security concerns and disorganization on the homepage.
• Confusion and absence of clear action steps while navigating through sections.
• Overwhelming amount of information paired with inconsistent use of colors and visual elements.
• Direct user feedback included sentiments such as “What’s all this?!”, “I’m not buying anything here”, and “This looks sketchy”.
Design Audit
An evaluation of the current site revealed visual friction and cognitive overload. Findings indicated the site requires visual improvements, a simplified structure to better showcase offerings, clear shopping pathways, and consistent design patterns to establish credibility.
Phase 2: Analysis
Goal Alignment
To synthesize research into clear design targets, research findings and user feedback were mapped against business objectives. Proto personas were developed using research insights and publicly available data from forums, blogs, and user reviews to anchor core user motivations and security concerns throughout the design process.
User Flow
The primary objective of creating the flowchart was to prioritize simplicity, especially for an online shop where having a clear, frictionless path for placing orders is crucial. Using the sitemap as a guide, a scenario was created that leads the user smoothly from the homepage to the checkout.
Phase 3: Ideation
Competitive Analysis
Key competitors in the direct-to-consumer cycling space were analyzed to evaluate standard online shop frameworks and menu structures. This provided a benchmark for organizing complex product lines into intuitive navigation patterns.
Site Map
To refine the site map without relying on assumptions, a card sorting survey was sent to 5 users. Analyzing the participant input made it possible to:
• Categorize menu options according to user expectations.
• Eliminate redundant and ambiguous choices.
Navigation Hierarchy
Wireframing
After exploring various possibilities for presenting the homepage content appealingly, mid-fidelity wireframes were created in Figma, prioritizing elements by importance based on research results and business goals:
• Integrated lifestyle images paired with categories and buttons to reflect the adventure and freedom of cycling while helping users make quicker, more informed shopping decisions.
• Added trust signals such as ratings, awards, and company information to make credibility easier to scan.
Phase 4: Redesign
High Fidelity UI
The final desktop interface was redesigned to deliver a cohesive, modern visual experience. Key improvements focused on clearer hierarchy, more consistent visuals, and easier product discovery.
Before and After
Usability Testing & Iteration
To evaluate the redesigned interface, user testing was conducted using an interactive prototype. Participants were given specific scenario-based tasks:
Task 1: Find a Mountain BikeResults: The user easily navigated to mountain bikes using the category image menu and selected a product from the grid with no long stops or friction.
Task 2: Check Bike and Wheel Size SpecificationsResults: The user successfully located the blue bike variant and used the newly added pop-up size chart guides next to the selection options. Key Learning for Next Iteration: The price only displayed after selecting a color option, causing the user to ask about cost beforehand. Making product pricing visible at all times is planned for the next iteration.
Task 3: Proceed to PurchaseResults: The user completed the checkout process smoothly with no long pauses or confusion, successfully validating the redesigned purchase flow.
Prototype
Takeaways
-
Data-Driven Decisions: Using research results and business goals to inform design choices greatly helped in understanding the needs, leading to a simpler structure and clearer product paths.
-
Importance of User-Centric Design: Focusing on clearer navigation, stronger hierarchy, and more consistent UI patterns. In this case, lifestyle images made the interface feel more inviting and supported a more engaging browsing experience.
-
Trust and Clarity: Addressing customer distrust and confusion is crucial for boosting sales, adding trust signals and clearer product information helped reduce uncertainty during shopping.
-
Simplification: Removing clutter and organizing content more clearly made the buying flow easier to follow.