Roar
Bikes
The project resulted in a well-organized, easy-to-navigate website design that effectively distinguished between bikes available in-store and those that could be bought online. The use of Adobe XD allowed for a smooth transition from wireframe to prototype, with the final design focusing on a seamless user experience from browsing to checkout.
Project Overview
The project focused on designing a simple, intuitive website that caters to both novice and experienced cyclists. The website needed to provide clear information on the various technical aspects of bikes, such as frame materials, brake systems, and gear mechanisms, while also allowing users to compare different models and purchase them directly.
Tools and methology
Adobe XD was the primary tool used for this project. It allowed me to create high-fidelity wireframes, prototypes, and design flows that showcased the user journey from landing on the homepage to completing a purchase.
Wireframes
The wireframes were designed with simplicity and clarity in mind. Each page was structured to guide the user naturally through the site, with emphasis on the key information about the bikes. The homepage featured a clean layout with sections for different bike categories, quick access to featured products, and an easy-to-navigate menu.
Prototype
The interactive prototype developed in Adobe XD provided a realistic simulation of the website’s user interface. Users could click through the various pages, explore bike details, and even go through the checkout process. This helped in testing the usability of the design and gathering feedback before moving on to the final build.
User Flow
The user flow was meticulously crafted to ensure a smooth and logical progression through the site. From the homepage, users could filter bikes by type or brand, view detailed product pages with technical specifications, and compare different models. The checkout process was streamlined to be as straightforward as possible, reducing friction and encouraging conversions.
Key Feature
-
Technical Specifications: Each bike model page included detailed technical information, allowing users to understand the differences between various options. This section was designed to be easy to read and comprehend, even for users who might not be familiar with biking terminology.
-
Comparison Tool: A comparison feature was integrated into the site, enabling users to select multiple bikes and view their specifications side by side. This tool was essential for helping customers make informed decisions.
-
Responsive Design: The website was designed to be fully responsive, ensuring a seamless experience across all devices, from desktops to smartphones.
Some Gif to Explain component
The wireframes were designed with simplicity and clarity in mind. Each page was structured to guide the user naturally through the site, with emphasis on the key information about the bikes. The homepage featured a clean layout with sections for different bike categories, quick access to featured products, and an easy-to-navigate menu.
Conclusion
This project allowed me to demonstrate my skills in UX design, from initial wireframes to a fully interactive prototype. The use of Adobe XD streamlined the design process, enabling efficient iteration and collaboration. The final product is a clean, user-friendly website that effectively meets the needs of the bike shop’s customers. This project is a strong addition to my portfolio, showcasing my ability to design with both user experience and technical detail in mind.