Simplified Clothes Shopping Site
The Product
An easy-to-use, online shopping website for a currently in-person-only clothing retailer.
Project Details:
July - August, 2023
A hypothetical scenario where we are designing a website for a clothing business that is looking to expand its business online
My Role:
UX Designer: Responsible for all research, design, testing, prototyping, and refining
Initial Research
I conducted initial interviews with 7 participants, who all shop for clothes online with varying frequency.
The most common problems were related to item sizing. 6/7 of the users interviewed said they have difficulty knowing if a product will fit when shopping online. About half said they read customer reviews to estimate what size to get, instead of using sizing charts.
Another common drawback to shopping online was that the experience was worse compared with in-person. Users said that browsing for and comparing items was harder online because sites are too cluttered, rely too much on text descriptions, or are inaccurately sorted.
Persona: Naomi
Problem statement:
Naomi is an immigrant mother who needs a site that is easy to use and understand so she can spend less time trying to navigate the site and more time with her family.
User Journey Map
During research, I found that many of the users appreciate the simplicity of the in-store experience. I decided that I could take inspiration from that by focusing on simplifying the page layout and ordering process.
The Goal
Make the site as simple and functional as possible. I will minimize text usage and prioritize using images to convey product info. This will reduce confusion for all users, and simulate the in-person experience to guide shoppers through the site using their existing experience. A key thing to add is designing an easy-to-understand sizing area so that users can purchase items with confidence they will fit.
Design Process
Paper Wireframes
In sketching the paper wireframes, my initial focus was exploring the navigation button layout to minimize the space they take up. My second focus was sketching different ways I could display pages to emphasize product images. This led to larger main images in the later sketches.
I settled on a mixture of 2 and 6 because I wanted the design to display some products, but not too many so that it wouldn’t be cluttered.
Digital Wireframes
Sizing Area:
I wanted sizing info to be readily available so that the user doesn’t have to search hard for it. I tried to keep the info simple and included a diagram to help illustrate the item’s dimensions.
Listing all the measurements took a lot of space, so I utilized buttons that changed the display instead of listing everything at once.
Several users mentioned that they use reviews to gauge sizing. I added a small review area to highlight key sizing info from reviews to help inform users.
Layout:
Another focus of the design was simplifying the layout of category pages for easier browsing. I settled on using a card design with text overlaying the image to emphasize the products.
When clicking a product, the image enlarges, making it easier to see the product before opening another page.
Low Fidelity Prototype
Prototype Testing
I conducted a usability study with users where they interacted with the low-fidelity prototype. Users were asked to complete a purchase and review certain features.
The overall reception was very positive, with users noting minor issues with some layouts and a lack of clarity in the sizing area.
Need clearer sizing layout
Overall site can be improved
Expanding images is not very helpful
Changes to the Sizing Area
Users mostly noted that the layout was too cramped and unclear, so I increased the spacing between items and added more guides for clarity.
I reworked the layout of the Sizing Reviews for clarity.
Changes to Expanding Images
Reception to Expanding Images was mixed.
Changed feature so it opens when pressing the magnify icon.
Added more details to the bottom to inform the user because not using expanding images anymore.
Finished Mockups
*designs above may not be up to date with the prototype below
High Fidelity Prototype
ACCESSIBILITY
I kept text minimal throughout the interface to provide an easier experience for people who have difficulties reading.
Simplifying the text decreases the amount of information that screen reader users will need to process.
Buttons and text prompts are explicitly marked to make the interface easier to use for people who aren’t familiar with online shopping sites.
Moving Forward
Impact:
The site will allow the (hypothetical) business to have an online alternative to going to the store in person. Including the sizing info in a clear and easy-to-understand manner will allow users to buy items with confidence that they will fit.
What I learned:
Through the testing phase, I learned that users don’t necessarily want a lot of innovative features, because it may cause confusion when they encounter something unfamiliar. With something as familiar as an online shopping site, it might be better to make a streamlined version rather than something completely new.
Further Steps:
I would take time to test the prototype a second time because I didn’t test it thoroughly after the first round of usability testing.
Completely finish the smaller details of the design, including menus and button states before passing the design off to the engineering team
References
Keenan, M. (2022, November 24). The State of the Ecommerce Fashion Industry: Statistics, Trends & Strategies to Use in 2023. Shopify Plus. https://www.shopify.com/enterprise/ecommerce-fashion-industry
Rivero, P., & Zhu, Z. (2016). Online clothes shopping. https://scet.berkeley.edu/wp-content/uploads/zhuzihan_late_4894259_68726594_IEOR-290-final-report-1.pdf
Sporn, J., & Tuttle, S. (2018, June 6). 5 surprising findings about how people actually buy clothes and shoes. Harvard Business Review. https://hbr.org/2018/06/5-surprising-findings-about-how-people-actually-buy-clothes-and-shoes