Children's Clothing Website
This project was for a fictional children's clothing resale site. The goal was to meet users' needs of having an easy-to-access way to buy affordable and environmentally friendly clothing.
My Role:
Sole UX/UI Designer
Project Duration:
November 2023
The Problem:
Many caregivers struggle to find time to shop for clothes and are frustrated to spend so much money only for their children to grow out of the items a few months later.
The Goal:
This website allows caregivers to find affordable second-hand clothing items from the comfort of their devices. This allows them to quickly find what they need and not spend too much, while also being able to resell what their children grow out of.
Understanding the User
User Research: Summary
I began the project by taking time to understand what issues and frustrations parents faced when it came to purchasing clothing for their children. This took place through user interviews to understand issues facing real users.
User Research: Pain Points
1
Budget
Parents and caregivers find themselves on ever tightening budgets while the cost of clothing continues to increase.
2
Time
Parents and caregivers often are juggling jobs and family responsibilities, not leaving them with shopping time, let alone time to bargin-hunt.
3
Sustainability
Shoppers want to combat the envirnomental damage of fast fashion by finding more sustainable ways to shop.
User Personas
Problem Statement
Rachel is a budget-conscious mom of three who needs a quick and easy way to find affordable clothing for her children so that she can stay on budget while dressing her children is quality clothing.
.png)
.png)
Problem Statement
Marcella is a busy, eco-conscious mom of one who needs a digitally accessible way to purchase sustainable clothing options so that she can accomplish clothing shopping for her child on her work breaks.
Competetive Analysis
I researched several children's clothing websites, both new and used clothing brands.
I found that many websites had clear categories to make it easy to find the desired pieces. I also found that many featured specials on the site. I did not notice that many stressed the benefits of shopping second-hand in a very up front manner.
Starting the Design
Wireframes
I began by ideating using paper wireframes. I chose key elements I wanted to include to refine my design. I then adjusted my design layout for various types of devices; for example, changing three-column layouts on desktop to one-column layouts on mobile.
​
Once I was happy with my initial designs, I then took the paper wireframes and used them to create a low-fi wireframe and prototype.
Webpage Wireframes
Tablet Wireframes
Mobile Wireframes
Refining the Design
Usability Study
I tested for usability, prioritizing user flow and also checking that my designs followed Gestalt principles for an easy user experience.
​
Following testing, I made adjustments to my wireframes and noted ideas to include in my mockups to better improve the user experience.
Research Insights
1
Containment
The Gestalt principle of containment needed to be utilitized to better separate various tasks and topics on a page.
2
Search
In the adaptation from desktop to tablet or mobile, the search bar disappeared, which kept users from finding what they needed.
3
Navigation
The check out process did not include back arrows, which impacted users who needed to fix something on a previous screen.
UI Sticker Sheet
Mockups
Considering all the findings from the usability study, I created high-fidelity mockups for the website, creating responsive designs for desktop, tablet, and mobile screens.
Desktop
Tablet
Mobile
Accessibility
​In the design, I ensured that all colors used exceeded the WCAG standards. I also used headings to improve usage with screen readers. I then annotated my designs so that engineers could ensure things were optimal for screen readers.
Prototype
After final usability testing, I turned the mockups into prototypes.
Desktop
Tablet
Mobile
Summary
Impact
While this design is for a fictional company, it does solve real issues caregivers face. Combatting fast fashion while saving money, all from a website, is something that would benefit so many caregivers trying to clothe their children. A product like this that is adaptive to various screens would be a major benefit to caregivers.
Takeaways
I grew a lot over the course of this project. Working on responsive design was a great exercise as a designer to consider the best layout for screen sizes. It required me to think through how to best serve the user on each device they might use. This was a great opportunity to sharpen my skills of designing with the user at the forefront of my mind.