top of page
Home Frame.png

MOOD Clothing

Project Type

Solo User Interface Design (Class Project)

Role

Research & Design

Duration

One Month

I sought to design an e-commerce website that sells gender neutral clothing. Currently, most online retailers have their collections separated by 'Men' and 'Women', which can create a pain point for users who shop for clothes in both sections for many reasons. 

PORTFOLIOHM.PNG

Context

Online shops are beginning to provide options for gender neutral shopping, but their collection is often only unisex staples like t-shirts or sweatpants. With my design, I wanted to explore user needs to provide options for a variety of styles and items with an inclusive architecture. 

H&M

Research

To learn more about user's habits and needs, I conducted 5 user interviews, semi-structured, followed by an observation component where participants shared their screens and shopped at their favourite online clothing retailers.

PORTFOLIOKOTN.png

KOTN

I wanted to design an online clothing shopping store that was inclusive of nongendered user flows, but not necessarily for only gender nonconforming users. What did they look for? How did they look for it? What was most important to them?

Takeaway

From this research, I learned that it was important for users to have different experiences for when they were browsing versus searching for a specific item. Sizing was crucial to the user’s experience, especially for users that were used to their size not being represented.

Users wanted to be able to understand the cut of the item; whether the clothing was tight, loose, curvy, or stretchy to understand how the item would look on their body. I opted to take this information to inform my design.

Axial Codes from Research 

Wants to only see clothing they’re able to wear (size, cut, material)

"It's disappointing when you find something that's super cute... then its not even in your

size, like what's the point?"

"I don’t try and find anything that’s too… fashionable. It's not too hard to find a plain

black T-shirt in my size."

Sense of security with the experience

"I'm not going to order if I know that returns are impossible... or even difficult."

“I like customer images of what it actually looks like on an everyday person."

Clothing is a mode of gender expression 

"I like men's shoes, women's pants, and everything above the waist is fair game."

"Men’s button downs give me good gender feelings! They look good on me."

PORTFOLIOfilter.PNG

Design

I designed MOOD clothing in an attempt to update the kinds of navigation, organization, and searches made available to users in an online clothing retail environment. I aimed for a design attractive to young, fun-seeking customers and focused particularly on the filter architecture.

MOOD Clothing: Filter View

Features 

Filter by Cut

Research participants that did not shop in a single gender category preferred instead to think about the cut of an item: whether it was supposed to hang fitted or loose, if it was for people who were tall or curvy or petit/e.  

Focused Pictures

In interviews, users mentioned a few frustrations about the images of items. It was difficult to tell which item was being sold on full-bodied pictures. It was also hard to verify the quality of an item if the zoom function was not powerful enough.

Design Specification

Fonts

Button

Body

Navigation

Heading

Colours & Accessibility Contrast

Main Background #FEF6F0

Neutral, allowing for image-forward design

Form Background #FFFFFF

Contrast between the main background gives depth

Borders & Body Text #0F4C5C

Deep, dynamic near-black

8.89:1 contrast ratio w/main background

Links (Normal) #5F0F40

Visible & emotional difference from body

12.06:1 contrast ratio w/main background

Links (Hover, Active) #5F0F40

Active styling of normal link

8.16:1 contrast ratio w/main background

Components

Main Page Promotions 

Item Card

Full Item Listing

Lessons

Many types of users will give you richer data. Including people with different habits, styles, sizes, and genders allowed me to get a broader sense of how things differ between each person, and where they converge 


Streamline your design process. Being pixel-perfect doesn’t need to mean having my nose up to the screen. Taking a bit of time on the onset of the project to explore the capabilities of a software I already thought I knew saved me time in the long run.

PORTFOLIOmoood.PNG

Acknowledgements

This solo project was completed in Winter 2021 as an assignment for INF2191: User Interface Design at the University of Toronto Faculty of Information, taught by Velian Pandeliev.

bottom of page