Case Study: Website Redesign.
Home page, purchasing, and checkout iteration.
Overview
Bikesdirect.com is a company that sells bicycles directly to customers through an online store. They aim to enhance their website to provide customers with an optimal shopping experience, increase sales, and boost brand awareness.
The Challenge
Bikesdirect.com has an outdated and difficult-to-navigate website. Visual inconsistencies in the interface and architectural information contribute to this issue. As a result, customers experience distrust and confusion, which leads to stagnant sales growth.
The Goal
The goal is to create impactful and intuitive experiences that build trust and increase conversion rates by prioritizing usability, intuitive navigation, and cohesive visual design in a user-centric redesign.
Tools
• Figma & FigJam
• Adobe Illustrator
• Adobe Photoshop
• optimalworkshop.com
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
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.
Prototype
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.
Functional 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.