Select Page

Case Study: Website Redesign

Home page, purchasing, and checkout iteration.

Overview

Bikesdirect.com is a company that sells bicycles directly to customers through its online store. The company aims to enhance the website to provide an optimal shopping experience, increase sales, and strengthen brand awareness.

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 is to create an impactful and intuitive digital experience that builds trust and increases overall conversion rates by prioritizing usability, seamless navigation, accessibility, consistency, and cohesive visual design through a user-centered redesign.
Tools

• Figma & FigJam
• Adobe Illustrator
• Adobe Photoshop
• optimalworkshop.com

Note: Some of the photographs were obtained from sites like Unsplash and Pexels, which do not require any licensing or are free from copyright restrictions.
Process Overview

Research & ANALYSIS

Contextual inquiry:  Observation, user interviews, and desk research.

Based on the research, the most significant pain points include

  • 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.
  • Random use of colors, graphics, and design elements.

In some instances, users have expressed sentiments such as, “‘What’s all this?!'”, “I’m not buying anything here”, and “This looks sketchy”.

In light of these findings, the website needs visual improvements and a simplified structure to better showcase offerings and shopping pathways. Adding more visual aids, and maintaining consistent patterns with colors and design elements will enhance the overall user experience.

Proto-personas:  To understand user needs and pain points further, I developed three user personas using research findings and publicly available data from forums, blogs, and user reviews.

    Ideation

    Site Map

    After examining a wide variety of online shops and establishing a menu framework, I decided to refine the site map structure using users input with the card-sorting method send to them as a manner of survey.

    This approach was chosen to avoid making assumptions and eliminate potential redundant menu options. The results helped categorize the content and remove ambiguous choices, resulting in a more user-friendly navigation menu.

    Flow Chart

    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 my guide, I created a scenario that leads the user from the homepage to the checkout.

    redesign

    Wireframes

    After exploring various possibilities for presenting the homepage content appealingly, I began designing a mid-fidelity wireframe using Figma. The wireframe’s structure is organized based on research results and business goals, prioritizing elements by importance.

    Adventure and freedom are integral aspects of cycling. To enhance the user experience, the interface will feature lifestyle images paired with categories and buttons to help users make quicker and more informed shopping decisions. 

    Additionally, I am incorporating a section that showcases the company’s rating badges, awards, and information about their business model. This aims to foster trust among users and support their shopping experience.

     

    Prototype

    Pages

    Takeaways

    The key learnings I gained from the Bikes Direct website redesign case study include:

    • Data-Driven Decisions: Using research results and business goals to inform design choices greatly helped in understanding the needs. Consequently, this allowed me to move forward effectively with wireframes and prototypes.
    • Importance of User-Centric Design: Prioritizing usability, intuitive navigation, and cohesive visual design enhances the user experience. In this case, the emotional feedback from lifestyle images increases considerably the intent to complete a purchase.
    • Trust and Clarity: Addressing customer distrust and confusion is crucial for boosting sales, especially when sensitive data like credit card information is involved.
    • Simplification: Streamlining the website structure to better showcase products and improve shopping pathways and removing roadblocks was essential due to the complexity and new information users encounter while purchasing a bicycle.