.png)
e-commerce app
Role: UX/UI, Branding
Duration: 1 Month
Tools: Figma
Overview
Ride On Bike shop is a concept online store offering a wide range of bike services such as bike rentals, bike repairs and new bikes.
Context
Ride On Bike shop is an e-commerce web app that I designed for my UX Design certification. The project brief was to design a cohesive brand and an online store that is particularly valuable for people who dont have time to shop items in a physical store.
Challenges
There were two key goals that I had to accomplish for this project:
1. Create a cohesive brand that is fun and informative.
2. Design intuitive interfaces that allow customers to accomplish their goals effortlessly.
DESIGN PROCESS
DEFINE
I started the first step in the process by answering the 5 W questions according to the design prompt given.
What?
A responsive web-app to allow users to purchase products.
Who?
Ages 18-70. Users who are new or repeat customers that dont have time to visit in-store.
When?
Users can use the app whenever they feel like shopping for bikes, bikes services & bike rentals.
Why?
To spark an interest in bikes and to build a sense of community
Where?
The web app aims to teach users about bikes and can be used whenever and wherever you like.
EMPATHIZE
The next step was conducting a quick competitor analysis to determine the pros and cons of other similar apps and sites. I analyzed 3 similar websites that offer similar services: REI, Helens biycles and Bike Shop LA. From there, we created user stories/journey maps to better understand our users’ needs and goals.
Competitive Analysis
User Stories
1. “I want to access the inventory without having to register, so that I can make sure this store has what I’m looking for before having to create an account.”
2. “I want there to be a variety of payment options, so that I can choose the payment method that suits me best.”
3. “I want to see recommendations of products I may like, so that I find items I might not otherwise on my own.”
4. “I want to be able to see technical specifications under the product details.
User Flow Diagram
IDEATE
Crazy 8 Wire Frame
Mockups
User Testing
Using my professional network, I recruited 5 participants to accomplish a task scenario. I wanted to ensure that the flow and layout of my wireframes were intuitive and simple before moving on to finalizing my design.
Task Scenario:
Your are a new customer and would like to purchase a mountain bike.
.png)
User Feedback
Painpoint#1: Users noted they wanted to be able to view product categories from homepage
Solution: Add drop down menu
Painpoint#2: Users noted they wanted to search for specific items.
Solution: Add Search Bar
Pain point# 3: How do I find my size?
Solution: Add size guide
Pain point# 3: How do I find the bike's technical Info
Solution: Add Technical Specifications
Painpoint#4: Users noted there were no product review or ratings.
Solution: Add product reviews & ratings on product detail page.
As part of the project brief, I designed the brand guidelines that will allow me to define rules on the brand’s overall tone and style and will also help promote consistency in design decisions.
Brand Guidelines
Guiding Principles
Our Mission:
To provide our customers with the highest quality bikes and accessories that are designed to last.
Vision:
To continually strive to innovate and improve our products, so that our customers can enjoy their biking experience to the fullest.
Color Principles
We used a limited amount of colors to create a sleek look. We also avoided loud/bright colors to avoid a 'gimmicky' look.
#000000
#707070
#FFFFFF
#D9D9D9
Image Style
Product images used should have a simple background with a clear, primary front and side view of the product displayed.
.png)
Logo
Our logo was designed to ignite a sleek and sporty feel, a quintessential feature of the bikes that we sell.
.png)
Typography
Segoe UI, from the Segoe UI font family, was used across the brand to showcase a clean and modern look and feel as well as provide easier readability.
Final UX Design
