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.

problem

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.

solution

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.

process

User Research & Synthesize

Ideation

Sketch

UI Design & Prototype

Usability Test & Synthesize

Redesign

role

Sole UX/UI Designer

tools

miro

figma

invision

01. discovery
Size Matters

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

Size Matters

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.

01.03 interviews

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.

Size Matters

01.04 synthesize

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.

Size Matters

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

Size Matters

01.04.03 personas

After a deeper look into both empathy maps, I created two personas,

Randy

not-your-standardized body

the gym bunnies, plus sizes, beer lovers, etc.

Gretchen

the confused face

those who never understand size charts

Size Matters

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?

02. ideation

02.01 brainstorm

All the research and synthesis provided me with enough insights to start sketching to generate ideas and establishing concepts to tackle users’ problems.

Size Matters

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.

high priority

create an account

log in

personal profile

reset password

learn to take measurements

understand size charts

see others’ comments

see real-life models

interact with other users

know popular brands sizing

share experience

medium priority

know sizes in different countries

sizes for children

low priority

get size with photo

less painful returning process

donate clothes that don’t fit

Size Matters

02.03 sitemap

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.

Size Matters

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.

02.05 sketch

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.

Size Matters
Size Matters

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. design

03.01 brand platform

brand name

size matters

Size matters goes straight to the point of what my product is. It’s fun and witty.

brand personality

personal shop assistant

Size Matters is a personal assistant to all online shoppers when it comes to clothes shopping.

brand attributes

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.

Size Matters

imaginary inspiration

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.

UI inspiration

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

Size Matters
04. test

04.01 prototype

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

objective

01 Understand users’ overall impression and experience while using the app

02 Uncover usability problems

03 Can users navigate easily and complete tasks needed?

tasks

scenario 01

Learn to take measurements for a T-shirt

scenario 02

See how different H&M shirts fit

scenario 03

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. reflection

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