top of page
Frame 92.png

Green on You is a mobile iOS app that helps people reduce textile waste and shop clothes smarter
By providing accurate size recommendations and a virtual fitting room experience.
Additionally, users can choose clothes among the most sustainable brands considering each item’s eco-friendly ranking.

Frame 94.png

Project Overview

Project Type: Solo, Academic

Duration: 10 Weeks

Role: UX/UI designer

Tools: Figma, InVision, PhotoShop

Platform: iOS

During my UX Design Bootcamp at BrainStation, we were tasked with completing a capstone project over the span of 10 weeks. This project was an end-to-end UX design process that involved designing a digital solution for an identified human-centered problem.

Problem

Textile waste poses a serious threat to the environment, and consumers are as guilty as manufacturers of increasing textile waste by creating the demand for mass production and consumption in the clothing industry. In a perfect world, individuals would buy fewer clothes to reduce waste and allow the planet to recover.  However, in the real world,  we need to focus on more practical solutions.

Solution

I designed an iOS app that encourages people to reduce textile waste by helping them make more informed decisions while online shopping for clothes. Green on You provides accurate size recommendations for each item and a virtual fitting room experience. This app encourages users to shop for the most eco-friendly brands available on the store page considering the eco-friendly ranking of each item.

The Design Process

My process for this design challenge was to leverage a non-linear design-thinking methodology.
The goal was to design a desirable solution that addressed users’ real human needs.

Frame 135.png

Empathize

Problem Discovery

Research

Frame 130.png

Define

Persona

Map

Frame 134.png

Ideate

User stories 

Task Flow

Frame 133.png

Prototype

Sketches

Wireframe

Frame 132.png

Test

Usability Test

Feedback

Frame 131.png

Refine

Branding

Hi-Fi Prototype

Anchor 1

EMPATHIZE

Problem Discovery

1. Starting point

online shopping

Online shopping is extremely enjoyable for most people, but when you want to choose, guessing the size that accurately fits you and the style that perfectly suits you is not that fun.

3. what's next?

1535991377472.jfif

Of course, some people consider refunding the clothes, however, others like me keep them in hopes of one day they might become of use. After a while, you turn to one of the contributors to textile waste without being aware of that. 

2. Problem

tight-clothing-is-a-normal-fashion-choice-but-a-poor-health-choice-1640626960.jpg

Just imagine that you happily order a couple of outfits, the package is delivered, but after trying them on you found out that either they do not fit or they do not look good on you. What would you do?

4. Opportunity

image 5.png

I felt the need to search for opportunities to help people make more informed decisions while they are online shopping for clothes.

Secondary Research

I started by exploring online research from reputable sources to better understand the effect of textile waste on the environment and learn more about the individual contribution. In this process, I uncovered some shocking statistics.

Textile waste

Frame 143.png

1 trillion kilowatt hours
are used every year by the global textile industry

Frame 141.png

200 Years
is taken for the materials to decompose

Frame 142.png

2000 liters of water
is wasted to produce 1 kilogram of cotton

Frame 144.png

15% of fabric intended for clothing
ends up on the cutting room floor

Textile waste in fashion Industry

Frame 146.png

10 million tons of clothing
are sent over to landfills  every year by North Americans

Frame 145.png

Less than 1% of the material
used to produce clothing is recycled into new clothes

Frame 154.png

60% more pieces of clothes
are bought by consumers in comparison to 15 years ago

Individual contribution to textile waste

Frame 155.png

37 kilograms of textile
are thrown away annually by an individual

Frame 156.png

25% of clothes are never worn
by 50% of women. This is equivalent to $600 wasted

Narrowing down the problem

Since my secondary research made me realize how the issue lies more within the people owning a pile of clothes that they will never wear in the back of their closets,

I decided to narrow my focus solely towards addressing this issue moving forward.

Untitled-2.jpg

Hypothesis

I believe that providing a tool for helping shoppers buy clothes smarter will decrease the amount of textile waste in households.

I will know this is true when 3/4 of my interviewees mention pain points surrounding owning many unused clothes.

Assumptions

  • Shoppers tend to follow fast fashion.

  • Shoppers usually impulse buy unnecessary clothes that they will never wear.

  • People have a large number of unnecessary clothes in their closets.

  • Shoppers are motivated to curb textile waste by reducing their new clothes purchases.

  • Users have access to a cell phone connected to the Internet.

Primary Research

To better understand the problem space and find the reasons behind people owning clothes that they will never wear, I reached out to several millennials who were interested in online shopping. After conducting interviews, using an Affinity Map, I organized the insights gained from my interviews into motivations, behaviors, and pain points.

I identified the following three themes and insights.  

Shopping Therapy

People tend to buy unnecessary clothes to make themselves happy

Disposal

People are uncertain about finding a way to dispose of their extra clothes.

Wrong Clothes

People have unused clothes because they purchased clothes that are not suitable for them.

WINNER

I decided to consider "buying the wrong clothes" since this was a problem that had been mentioned by all of my interviewees. Focusing on this theme, I crafted my design question:

How might we

provide people with a more personalized online shopping experience in order to confidently select products that best match their size and style?

DEFINE

Persona

After thoroughly synthesizing my findings from user interviews and secondary research, I finally defined the persona. She reflects the demographic, frustrations, motivations and behaviors of a typical user. 

Frame 157.png

Experience Map

Hailey struggles at many points in her journey of trying to pick a piece of clothing that best match her size and style while shopping online.

I went on to create an Experience Map of her journey as it helped me illustrate her experience and visualize what she was going through in order to achieve her goal. This helped me further identify where my opportunities were available to potentially introduce a digital solution.

Expereince Map.png

User Stories

Having Hailey as my persona and the pain points in her journey, I created User stories & Epics. I tried to walk in Hailey's shoes and try to understand her needs.

After writing over 30 User Stories and grouping them into 3 Epics, I chose the following Epic to focus on as it addressed one of Hailey's lowest points during her journey. By addressing this problem, I believe that her experience can be more positive and exciting.

Core Epic: Size guide

Sample of User Stories

 1. As a user, I want to have a more clear size guide on the online shops in order to choose the right size.

2. As a user, I want to know what looks good on me in order to be sure that I buy something that suits me.

3. As a user, I want to be able to buy clothes that suit me in order to keep the clothes longer.

4. As a user, I want to buy clothes that fit me in order to not feel guilty about environmental pollution.

5. As a user, I want to know how I look wearing an outfit before purchasing it in order to avoid wrong purchases.

Task Flow

My next step was creating a Task Flow as it helped me visualize how Hailey would attempt to complete a task during her journey.

Section 2.png

DEVELOP

Ideation

Now that I had a clear task flow, I had to start sketching

I know that in order for Hailey to know her best fit size and try on clothes virtually, she had to answer a couple of questions and take two photos of herself in the required positions. I first created some exploratory sketches which then turned into solution sketches.

Wireframe

My favorite part!

For the next step, I started bringing my sketches to the digital world using Figma!

I tried to add some interactions to have a better idea of what the final solution should look like.

User Testing

In this step, I conducted 2 rounds of usability testing. Each round of user testing was conducted with 5 users via Zoom.

This was one of the most exciting steps in my process as user testing is a means of watching your process through others’ eyes. The tester’s valuable feedback and insights could help improve the design in order to be able to provide the best human-centered digital solution.

Users were given 5 tasks to complete with scenarios accompanying them to avoid any confusion. Even though users were able to complete most of the given tasks, the feedback provided by them was valuable in improving the functionality and design of my solution. 

 I organized all the feedback into a Prioritization Matrix after each round to help me prioritize the most impactful revisions to improve the user experience.

Below are some of the key revisions that I implemented based on the feedback.

REFINE

Brand development

Having my wireframe ready, I was ready to define my brand identity.

I wanted my app to be: Caring, Minimal, Eco-friendly, Neat, Stylish

With this feeling in my mind, I started searching for inspiration and curated a mood board in Invision.

image 4.png

Design System

My mood board helped me to choose the primary color easily. However, it took me a while to be sure about the secondary color. I check some color picker websites, tried a couple of combinations of color with green, and at last landed on blue as the secondary color.

For typography, I started looking for inspiration, tried different options, and finally, tried to use a font that evoked the same feeling as the moldboard and was also legible at a small size. 

Primary Colors Shades

#ADEFD4

#5BE0A9

#15D384

#0DAB69

#087B4B

Secondary Color Shades

#95C2CC

#4B98A9

#016E86

#015B6E

#014351

Brand Name

I started thinking of a unique name for the app. I wanted the name to imply the core value of the app empathizing with the app's main feature, the virtual fitting room.

 After choosing various names I finally conducted a poll to have a winner with the help of my 

I started thinking of a unique name for the app. I wanted the name to imply the core value of the app empathizing with the app's main feature, the virtual fitting room.

 After choosing various names I finally conducted a poll to have a winner with the help of my peers.

Greenly

Play on "green"  and "friendly"

Smart Hack

Emphasizing the app's core value

Smartex

Play on "smart"  and "textile"

Green on You

Play on "Good on you"  and eco - friendly concept

WINNER

Green on you was perfect for the mood, vibe, and feel I was trying to imply with the brand.

Word Mark

At first, it seemed impossible to design a word mark with the use of the pen tool on Figma. So I started sketching with a pen and paper. After sketching several potential wordmarks and designing some of them in Figma, and tried different ways of injecting the primary color into the word. I landed on this one:

Frame 92.png
Frame 1 (1).png

Icon Design

For the icon which is the first touchpoint, I wanted to keep it simple, yet eco-friendly. I was inspired by simple brand icons and designed this:

Frame 4 (1).png

High Fidelity prototype

After countless hours, multiple iterations, testing, color injection trials, and brand development, I could finally bring my prototype from
Mid-Fidelity to Hi-Fidelity and finalize the Green on You app.

1.gif

1. Opening the app, the user has the option to either "find their size" or go to the store.

Choosing "find my size",

2. The user answers four simple questions about their preference, age, height, and weight for a more accurate size recommendation.

3. Then, the user reviews the onboarding in order to take two photos of themselves.

34.gif

1. The user gets prepared, put the phone on a table, and takes two photos of themselves.

2. They have to fit themselves in the griding line, and when the grid turns green, the photo will be automatically captured.

3. After a few seconds, they are ready to shop for eco-friendly brands on the store page.

32.gif

1. On the store page, there are several items from the most eco-friendly brands.
 

2. After choosing an item, the best fit has been already marked, and they have the option to add that to the virtual fitting room. 

3. Adding several items to the fitting room, the user can try those on virtually and make more informed decisions while shopping online.

 4. This helps them to avoid purchasing clothes that are not suitable for them, leading to owning fewer unused clothes.

LOOKING AHEAD

Future Thinking with Tarot cards of Tech

Screenshot (752).png

If the environment was your client, how would your product change?

Green on You's main goal is to reduce individual contribution to textile waste, leading to preserving the environment. It was already designed to serve the planet, and I will continue to find more ways to reduce waste in the future.

Screenshot (756).png

When you picture your user base, who is excluded?

Green on You asks users to take two standing photos in different positions to calculate their size and offers a virtual try-on experience.

I will consider people with disability using wheelchairs in my next design. This app could help them the most as trying clothes on in the actual fitting room is not easy for them.

Screenshot (754).png

What is the worst headline about your product you can imagine?

Green on You leaked millions of private pictures!

I should be really careful about people's photos stored in the app's database otherwise it could turn into a catastrophe

Next Steps

Keep Designing

Having people with disability in my mind, designing a new virtual fitting room.

Keep Designing

Add the mix-and-match feature to improve the try-on experience.

Keep Designing

Add a virtual closet feature to the app to teach people how to style with clothes they have already owned.

Keep testing

Test more and make any necessary updates focusing on the human-centered designed. 

Keep Learning

Technology is evolving rapidly and we need to keep it up, and I love this.

Biggest takeaway

Throughout the entire design process, I’ve had to let ideas, solutions, features, or designs that didn't work go, no matter how much I liked them. With time, I’ve realized that in the human-centered design process, I need to design for end users and not myself.

I also learned that asking others for feedback in the early stages could help to improve the design process and make me capable of coming up with better solutions.

THANK YOU!
Feel free to
reach out  if you'd like to know more

THANK YOU!
Feel free to
reach out  if you'd like to know more

Let's Connect!

mail.webp
6ea5b4a88f0b4f91945b40499aa0af00.webp
bottom of page