Knows what fits
The convenience of online clothes shopping makes it ever so popular nowadays. However, finding and deciding on the right size has always been a problem for many shoppers. Buying clothes online can, therefore, be an overwhelming process.
Online shoppers cannot physically try the clothes on. The size charts/guides online stores provide are always confusing and hard to understand. The shoppers have but two options:
01 Don’t purchase at all.
02 Order multiple sizes of the same clothes item and return those that don’t fit. More often than returning, the extra orders end up sitting in the closet.
I created Size Matters - an app where users can get estimated size suggestions based on their personal information. They can also learn how to take measurements accurately, see how clothing fits real-life models and read what other users experience.
User Research & Synthesize
UI Design & Prototype
Usability Test & Synthesize
Sole UX/UI Designer
01.01 secondary research
Through my secondary research, I realize that finding the right apparel size when shopping online is a common problem. There are two reasons for that
01 sizing differences from brand to brand and from country to country
02 people don’t have the correct means or tools to take their measurements to get the right size from online stores. Statistically, for almost all online apparel stores, returns happen because the size or fit was wrong
01.02 screener survey
After my secondary research, I wanted to recruit interviewees to learn more about how they feel about deciding on the right clothes size. I turned to social media, sent out a screener survey, and got 24 pieces of valuable feedback.
I then conducted interviews of 5 participants who fit the demographics. I focused on every participant’s online clothes shopping experience and how they decide on the perfect size.
With all the notes and recordings from the interviews, I put everything in perspective, synthesized with the participants, and created the affinity maps, empathy maps, personas, and HMWs.
01.04.01 affinity maps
I generated the affinity maps with 126 sticky notes abstracted from the interviews.
01.04.02 empathy maps
I was able to identify two unique types of users from empathy mapping.
A. not-your-standardized body
B. the confused face
After a deeper look into both empathy maps, I created two personas,
the gym bunnies, plus sizes, beer lovers, etc.
the confused face
those who never understand size charts
01.04.04 how might we
Writing HMWs was easy with all the findings during my discovery thus far. HMWs generate creative solutions while keeping me focused on the right problems to solve.
01. HMW make it easier for online clothes shoppers to learn to take measurements?
02. HMW connect online clothes shoppers across major brands to share their sizing experience?
03. HMW create instant and more vivid instructions for major apparel brands to help online clothes shoppers have a better understanding of different sizing systems?
04. HMW bring convenience to online clothes shoppers to decide on their size with more visual references?
05. HMW help online clothes shoppers determine their size easily and painlessly?
All the research and synthesis provided me with enough insights to start sketching to generate ideas and establishing concepts to tackle users’ problems.
02.02 user story
User stories allow me to build a common language and a mental model of what this project is. User stories help me empathize more with the target groups. With the user stories, I then started working on the MVP (Minimum Viable Product) by sorting the stories from highest to lowest priority to create fundamental values for users.
create an account
learn to take measurements
understand size charts
see others’ comments
see real-life models
interact with other users
know popular brands sizing
know sizes in different countries
sizes for children
get size with photo
less painful returning process
donate clothes that don’t fit
I identified and mapped out the key features that my app needed to include. The sitemap also made sure that all the information, function, features, screens were all inline.
02.04 user flow
Following the sitemap, I created three essential paths (a.k.a. red routes) that were the most important to my app because users would use these paths most frequently. User flows help me see how users can achieve their intended goals with no hassle.
Now, it is time to see the possibilities. Pen and paper are always great when it comes to sketching out your ideas and explore different approaches. I knew I needed to focus on how to make this app simple to use and straightforward.
02.06 low-fidelity wireframe
I started creating low-fidelity wireframes based on my sketching to see how everything pans out. Low-fidelity wireframes are quick and easy to do. I could make changes and adjustments super fast throughout the process. Towards the end, I was unsure if users would understand what each icon means on the navigation bar, so I ran a test on 6 participants, the answers confirmed my concerns. I needed to fix that problem soon.
03.01 brand platform
Size matters goes straight to the point of what my product is. It’s fun and witty.
personal shop assistant
Size Matters is a personal assistant to all online shoppers when it comes to clothes shopping.
Fun, vibrant, versatile, inspiring, hassle-free
Size Matters is not a rigid measuring tape or a confusing size chart. Being able to connect with others as a user makes it fun and vibrant. By offering multiple ways to find the right size makes it versatile. Clothes are part of fashion, so the app also brings inspiration. Overall, as an assisting type of product, it should be hassle-free.
03.02 mood board
The idea of the mood board came to me very easily given that I had a great understanding and vision of what the product needed to look and feel like at this point.
These chosen images fit Size Matters in a very straightforward manner. They cater to add to people’s lives. They represent what Size Matters conveys - very fun and vibrant, yet versatile and inspiring.
The choices of the UI elements make it possible to bring a sense of cleanliness, chicness, simplicity, easiness to use, and youth.
03.03 style guide
A style guide is essential to any product, brand, or company. To make sure everything ties in together, the style guide needs to include all necessary standards and requirements for the product.
I created the logo first, and everything else came together naturally. The logo inspired all the elements in the style guide - the fonts, the colors, the icons, etc.
03.04 high-fidelity wireframe
Content always comes first! I created real content for the entire app before I even started on the hi-fi design. The style guide came in very handy at this stage. I was able to put everything together very quickly. I also came up with a solution to make the navigation bar icons clearer by adding a descriptor word under each one of them.
I kept a couple of things in mind during this stage
01 keep everything simple and intuitive
02 do not compromise function for aesthetic
Time to bring the design alive now. I used InVision for prototyping and tested it multiple times before I ran it on real users.
04.02 usability test plan
01 Understand users’ overall impression and experience while using the app
02 Uncover usability problems
03 Can users navigate easily and complete tasks needed?
Learn to take measurements for a T-shirt
See how different H&M shirts fit
a. Read other shoppers’ reviews
b. Leave a comment on a post
c. Post a new comment
04.03 test result
3 out of 5 participants that I interviewed during the discovery stage agreed to take part in my usability test, plus 3 more users that I recruited, I did 6 tests altogether.
It was very insightful to watch users using the app. Overall, all participants thought it was an easy and straightforward experience. They were able to complete all the tasks. However, there are a couple of problems that I need to fix.
issue 1 - high priority
the filter & sort screen under “Brands”
All participants seemed confused when they were trying to navigate the “See Models” screen. The filter icon wasn’t visible enough for participants. The content on the page confused all participants, so they didn’t know how to find specific shirts with model videos.
issue 2 - high priority
contrast issue on the “Suggested Size” screen
The title wasn’t clear enough which confused some people. The white lettering didn’t have enough contrast to the background images.
04.04 synthesize & redesign
the filter & sort screen under “Brands”
I reorganized the screen to make it more straightforward at the beginning. But, I was still not convinced that it would be much easier than the original design. So, I scrapped that entire screen altogether and redesigned it.
After, the screen felt much more intuitive. I asked 3 of the usability testing participants to revisit the same screen, and they were all able to use the filter & sort without any issue - problem solved.
contrast issue on the “Suggested Size” screen
At the top of the “Suggested Size” screen, it said, “Suggested Size,” which confused some test participants. I changed it to “Suggested size based on your information.” The big white letters indicating the size on top of the photos didn’t seem to have enough contrast for some participants. I darkened the images to give more contrast.
All 3 participants didn’t have a problem reading them anymore - problem solved.
05.01 look back
I am happy and proud looking at the final product. As the sole UX designer for this project, I have learned a lot every step of the way. At the beginning of the project, I wanted a product that had to be clean, simple, intuitive, and self-explanatory, and all my expectations guided me throughout this process.
The entire process went very smoothly thanks to - research, research, research! Test, test, test!
05.02 look ahead
Moving forward, I’d like to continue developing this product and bring it up a level. From a business point of view, for future iterations, it’d be interesting to see this product to
01 have a donating system/network connected to charity organizations so that people can donate their unwanted clothes
02 be implemented by or cooperate with apparel brands and be more of instant help