Shop by Shape

A Fashion website based on body shape

As Fashion is the third biggest industry globally and has been gaining a lot of attention and popularity, we decided to work on it as our concept project.

"Shop by Shape" is a website designed to help women find clothing styles that recommended to their body shape. Women will enter to the website find their body shape through two method (Manual and AI measurement) , and receive recommendations for clothing styles and for different occasions that will flatter their shape.

View Desktop Figma Prototype

View Mobile Figma Prototype

Project Overview

As a student at UX Land, I was assigned to design an adoptive fashion website for mobile and desktop with this detail:

Project Duration

12 Weeks (part time)

Team

group of 4

My Role

UX/UI Designer

Tools Used

Goals

Provide a guide that explains how to measure different parts of the body to determine their real body shape.

Offering personalized recommendations according to their body shape.

Classification of clothes based on different styles and occasions.

Designing an user-friendly website that simplifies the shopping process and empowers women to make confident and informed decisions about their clothing choices.

Design process

Research

Our first step to solve the problems was researching how much body shape impress in choosing clothes and understanding our target users’ needs.

thus, the study started with 3 phases:

survey
Interview with a different types of users
Competitive analysis

survey

We conducted surveys to identify potential users. we got 54 responses.

The primary user group identified through research was employed and their age group was between 25 to 40 years old.

Interview

We wanted to figure out:

1. What was the difficulties of finding clothing that fits their body shape?

2. How familiar are they with taking body measurements? Have you ever taken your own measurements before?

3. Can you describe a perfect online shopping experience when it comes to finding clothing items that fit your body shape?

4. What was the difficulties of finding specific style for a specific occasion?

We figured out there is two type of users

5 users

who are aware about their body shape

7 users

who are not aware about their body shape

We conducted affinity diagram and figured out that users need to be taught how to measure their body, and 5 users were unhappy with manual measuring, so we need have a design that user have easy access to both manual and AI measurement.

As we had to design Homepage and Shape finder flow both aware and unaware users matter us.

Users need information about shipping, delivery policies and fit assurance before product selection stage.

Competitive analysis

We analyzed 9 similar websites, their features, and workflows. In doing so, we were able to design a more effective information architecture and discover what features our website should have.

Key takeaways

Clear instructions for measuring their body

We understood how to do information architecture on filters and home body content

Reached navigation menu content

Displaying value of business

Clear classification for styles and occasions

Planning and Define

After analyzing all of our research, we began to figure out the challenges of our project, and tried to come up with a solution in our design.

Challenges

For who know their body shape

For who don’t know their body shape

Some women don’t know that they can style themselves by their body shape

Business had some values that matters to stakeholder and users

User needs to be aware of both methods we offer

User need to know how to measure her body

Solutions

We put this part for them

We put this CTA for them

We used this Slogan

We displayed our business values very clear

We displayed two method

of measuring very clearly

on shape finder flow

We used this photos to teach the instructions

Persona & Scenario

In order to establish tasks for our design, and to communicate information about the users that we collected during research, we developed a persona and a scenario.

Sitemap

Based on the research and information we got from the user, we designed a sitemap to categorize the information we want to bring on the home page and increase the speed of our design process.

Design

Moodboard

The color palette we created was inspired by our moodboard.

UI Kit

High Fidelity Wireframes

Our final High Fidelity wireframes are shown below. It is important to note that the images used for this project came from Google or online fashion stores since it was a class project.

Testing and Iteration

Home Page

Before

After

1. Our slogan did not attract attention at first glance for 80% of users.

5. Our values needs to be seen at first look

2. almost 7 users didn't notice Shape Finder CTA.

3. Users who know their shape didn't have option to shop at first

6. We have considered consistency in the icons and their text.

7. Next icon need to have better visual design.

4. 90% of Users taught this website has it's own and it's not a multi brand.

Before

After

(8-9-10). Information was too packed and 6 users couldn't find the categories.On the next step to have better visual design we changed card

Shape Finder page

Tab type of boxes was unclear to users and having two methods was unrecognizable

Before

After

A/B Testing

We used both photo and video to instruct how to measure their body, and they were comfortable with photo because they could get the point and don't want to spend to much time.