Clothing Website
The product:
This is a clothing store that offers affordable pricing options. The typical user is between 1-40 years old, and most users are college students or early career professionals. Style clothing goal is to make shopping fun, fast, and easy for all types of users.
Project duration:
August 2022 to September 2022
Project overview:
Sitemap
Mockups
Mockups: Screen size variations
The problem
Available online shopping websites have cluttered designs, inefficient systems for browsing through products, and confusing checkout processes.
My role
UX designer leading the Style boutique website design.
User research: summary
Shopping website designs are often busy, which results in confusing navigation
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind. The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made 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.
High-fidelity Prototype
Interaction
The goal
Style boutique website to be user friendly by providing clear navigation and offering a fast checkout process.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
I conducted user interviews, which I then turned into empathy maps to better understand the target user 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.
Wireframes
Low-fidelity prototype
To make the checkout flow even easier for users, I added a check box that allowed users to use the same address for billing and shipping.
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.
Small buttons on shopping websites make item selection difficult, which sometimes leads users to make mistakes
Experience
Online shopping websites don’t provide an engaging browsing experience
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out. At this point, I had received feedback on my designs from members of my team about things like 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 points.
User research: pain points
Navigation