Mormi Website Store
Mormi is a bicycle website store that offers all kind of bikes, parts, and a variety of products for sale with delivery options for users’ needs and also connect with the community and new customers for all kind of bike events. The goal is to increase sales and create a big bike community in the area with special offers and the latest products on the market.
The Problem:
The bicycle store in the town has limited customers and poor sales results. Narrow and limited customers make it difficult to increase sales. It is crucial to engage with new customers to shop online and ship our products to their homes.
The Goal:
Mormi Bicycle website store it has to be a friendly user by providing clear navigation and offering a fast checkout process. The site has to involve the community and new customers to participate in events. Responsive design that automatically adjust to any screen size.
Understanding the User
User Research:
I conducted user interviews, which I then turned into empathy maps to better understand the target users and their needs. I discovered that many target users treat online shopping as a fun and relaxing activity when they need a break from school or work. However, many shopping websites are overwhelming and confusing to navigate, which frustrated many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation.
Pain Points
Navigation
Shopping website and include community participation can be annoying, which results in confusing navigation.
Interaction
Small buttons and unclear directions on shopping websites make item selection is difficult, which sometimes leads users to make mistakes.
Experience
Online shopping websites don’t provide an engaging browsing experience.
Information
Create solutions for customers’ needs and build a relationship with the customers to keep them involved with the store.
Personas
Xavier is a waiter; he wants to meet new people and share his passion for adventure on his bike. He needs a place to buy bike equipment that gives him fast and secure access to shop online.
Viky is a busy college student who needs an intuitive website navigation with search filters to make her easy because she wants to buy online and connect with the community.
User Journey
I created a user journey map of Xavier’s experience. I’m using the site to help identify possible pain points and improvement opportunities.
Starting the Design
Site Map
Difficulty with website navigation was a primary pain point for users, I used that knowledge to create a sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. I designed this structure to make things simple and easy to use.
Paper Wireframe
Next, I sketched paper wireframes for each screen in my app, keeping the user’s pain points about navigation, browsing, and checkout flow in mind. The home’s screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Paper Wireframe size variations
Finally, I worked to create responsive design and is about creating the web pages that look great on all devices. A responsive web design will automatically adjust for different screen sizes and viewports.
Digital Wireframes
Next, I sketched paper wireframes for each screen in my app, keeping the user’s pain points about navigation, browsing, and checkout flow in mind. The home’s screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Digital wireframe screen size variations
Creating and adapting designs for different screen sizes. Make it look attractive no matter what screen size the user views it.
Low-Fidelity Prototype
To create a low-fidelity prototype, I connected all the screens involved in the primary user flow of adding an item to the cart and checking out.At this point, I received feedback on my designs from my team members about things like the placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain point.
Usability Study
Parameters
Study Type
Unmoderated Usability Study
Location
United States, remote
Participants
5 participants
Length
20-30 minutes
Findings
Cart
Once at the checkout screen, users didn’t have a way to edit the number of items in the cart.
Search
Users weren’t able to find what to look for it. Users are looking for more details to search for their products, something related to the filters option.
Experience
During the buying process, users want to see if there are more colors on the product they selected.
Refining the Design
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes was adding the option to edit the quantity of items in a user’s cart using a simple “+” or “-” option. This allowed users more freedom to edit their cart without going through a complicated process to add or remove items.
To make the search more productive and even easier for users, I added a filter option that allows users to search by color, price, brand, etc.
Original Screen Size
High Fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by members of my team.
Final Evaluation
- Conduct follow-up usability testing on the new website.
- Identify any additional areas of need and ideate on new features.
Create social events that always engage with users through the website and also show the new products for biking.