My role
- UX Designer
- UI Designer
- UI Prototype
Tools
- Pen & paper
- FigJam
- Figma
Duration
3 months
Summary
E-commerce case with a focus on mobile platforms. The bike company has its website to sell its bikes online, they have trouble increasing sale revenue from its website and it's only available on desktop size, no small screen support. They need to enhance their browsing and checkout experience to greatly improve their product’s usability.
Business Goal(s)
To improve the conversion from browser to checkout completion; as a result to increase revenue on the products from mobile-web experience.
Problem(s)
The business was facing several challenges in its business operations, including no small screen website, and a difficult checkout process. This was resulting in low customer engagement and a high bounce rate.
Target customers
Customers who are passionate about bike riding, and are willing to spend a lot of money on their purchases. In addition, they think of it as an investment so they are very picky and do their research. The age range is 24 - 38. Approximately 72% are men.
Persona
Along with secondary data research from the company, I conducted my own research for this project to find out the pain points of users. I conducted 7 user interviews to gain insights into bikes purchasing experience from online stores.
Users browse the website and open many items pages but it is hard for them to decide which one is better to make a purchase decision. In this case, it would be nice if users can compare products to see which one best suits their needs.
Most users do not like to go through the registration on the website to make a purchase. A guest checkout should be implemented to help users purchase without having to register for an account.
Solution
To address these issues, Bike Mobile decided to revamp its e-commerce website. The company worked with a web development agency to design a new, user-friendly website that offered a better shopping experience. The website was optimized for speed, with a clean and modern design that made it easy for customers to find and purchase products.
User Flow
After I came to the solutions for this project in the previous step, I worked on user flow to shape my direction for the improved e-commerce website. This is to ensure that I understand each step the user is going through so that I can determine the most efficient routes.
Wireframes
I started by sketching my ideas. This step helps me move from one idea to another quickly. Key screens are essential in this part because they helped me focus on the goals of this project.
lo-fi Wireframes
Once I can figure out with the best solutions, the next step is to refine my wireframes. This step allowed me to have a better look at my solutions.
Usability testing
Once I'm happy with my wireframe, I run a usability testing with several people to see if my project is heading in the right direction. The main objective of this testing is to find out if I have achieved the steps needed for users to complete their tasks which are comparing bikes to help make purchase decisions and check out as guests. Five participants in both online and offline environments run through the step and contributed valuable feedback to my project.
Hi-fi Wireframes
After feedback was collected during the 1st testing phase, I refined my wireframe in high fidelity. I also ran another usability testing round. Participants were able to complete the assigned tasks better. With the information gathered from many rounds of usability testing, I was able to make changes and refine the solutions.
Prototype
Key takeaways
This is an interesting project for me. I find out that mobile websites have many similarities with mobile applications. They are both built for smaller screens. Therefore the parts that can be put out on the screen are limited. I posed the question to myself asking how I could present enough information from a regular website on a small screen without compromising the looks and feels. It was also one of the most challenging tasks for me to complete in this project especially when I do the Bike comparison problem. This leads me to believe that limitations can be a great force for creativity!