Roar Bikes — Designing a mobile shopping experience for urban mobility
Roar Bikes is a mobile e-commerce concept for discovering and purchasing distinctive urban mobility products. The prototype explores how a brand can combine product storytelling, commerce and account functionality in one focused mobile experience.
Client
Industry
Timeline
Technologies
The idea
The project was created as a UX/UI prototype to explore a complete customer journey: users can discover the Roar Bikes brand, learn about a product, review its key specifications, add it to their cart and access account functionality.
Project type: Personal UX/UI prototype
Role: UX/UI Designer
Platform: Mobile app concept
Focus: Product discovery, product detail, purchase intent, customer trust and account access
The challenge
Buying a specialist mobility product is not only about seeing an attractive product image. Users also need enough information to decide whether the product is right for them.
The experience needed to communicate three things clearly:
What makes the product different?
What are its most important specifications?
How can the user move from interest to purchase?
The prototype also needed to create a sense of trust. Product information, customer stories and a clear interface should work together to make the buying journey feel simple and credible.
The concept
The prototype is built around a simple mobile flow:
Discover the Roar Bikes brand
Explore featured products
Open a product detail page
Review specifications and customer feedback
Add the product to the cart
Sign up or log in to continue the relationship
The flow connects emotional discovery with practical decision-making. Large product imagery creates interest, while specifications and testimonials provide the information needed to move closer to purchase.
Key screens
Home and discovery
The home screen introduces the brand through a strong visual hero and the message “Something matters… YOU”. A prominent product image and a clear “Read more” action invite users to explore further.
The screen also introduces the product range through the section “Our Unique Bikes”, helping users understand that Roar Bikes is built around distinctive products rather than a generic catalogue.
Product detail
The product detail view focuses on the selected model, Unique, and presents the most important purchase information in one place:
Product imagery
Product name
Price
Add-to-cart action
Shipping information
Key technical specifications
Product-related content and customer perspective
The clear “Add to Cart” action keeps the main commercial goal visible without overwhelming the rest of the page.
Product information and trust
The prototype includes practical product information such as:
Maximum speed of 15 mph
36V lithium-ion battery
Approximately four hours for a full charge
Up to 10 miles of range at full charge
A note to check local legislation
Fully assembled delivery
This information helps users evaluate the product beyond its visual appearance. A customer story adds a more emotional and human dimension to the experience.
Account access
The sign-up and login screens allow users to enter the product ecosystem through a familiar account flow. The sign-up screen collects basic personal information, while the login screen provides a direct path for returning users.
The authentication screens are visually connected to the rest of the experience through the same warm orange accent, dark grey background and Roar Bikes branding.
Design approach
Lead with the product
The interface gives the product and its lifestyle context a central role. Large imagery communicates the character of the bike before the user needs to process detailed information.
Balance emotion with information
The prototype combines aspirational brand storytelling with practical product specifications. This supports users who are still exploring as well as those who are already comparing details before making a purchase decision.
Make the primary action clear
The “Add to Cart” button is visually prominent and easy to identify. The product page provides enough context around the action without allowing secondary information to compete with it.
Use a consistent visual language
The interface uses a focused visual system:
Warm orange for primary actions and active states
Charcoal grey for the main background and navigation
White content areas for readability
Blue typography for key product headings
Strong product photography to create visual interest
Consistent iconography for navigation, favourites and cart actions
Create a recognisable brand world
The lion logo, warm colour palette and bold product imagery give Roar Bikes a distinct identity. The experience is designed to feel energetic, adventurous and personal rather than purely functional.
UX decisions explored
Discovery before detail
The home screen gives users a reason to continue before asking them to process specifications. This creates a natural transition from brand introduction to product exploration.
Progressive information
The product detail view reveals information in layers: product image and name first, then price and purchase action, followed by shipping details, specifications and social proof.
Practical confidence before conversion
Technical details and customer feedback are placed near the purchase journey to help reduce uncertainty. Users can understand what they are buying before committing to the cart.
Familiar account patterns
Sign-up and login use familiar form structures and clear labels. This reduces the effort required for users who want to create an account or return to the product experience.
Outcome
The result is a mobile prototype that demonstrates a complete product discovery and purchase journey for Roar Bikes.
The prototype allows users to:
Discover the brand and its product world
Browse featured products
Learn about a selected model
Review price, delivery information and specifications
Read customer-oriented content
Add a product to the cart
Create an account or log in
As a personal prototype, the project was not evaluated through live conversion data or production user testing. Its purpose was to explore how visual storytelling, product information and commerce functionality can work together in a focused mobile experience.
What I learned
This project reinforced the importance of balancing inspiration with reassurance in e-commerce design. A visually strong product experience can attract attention, but users also need clear information before they feel ready to act.
The most important design challenge was connecting three different layers of the experience:
Brand: Why should users care about Roar Bikes?
Product: What exactly is being offered?
Action: What should the user do next?
The prototype explores how a simple hierarchy and a focused mobile flow can connect those layers without making the experience feel complicated.
More Project
</
>
