Nasim Ash
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.
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.
Empathize
Problem Discovery
Research
Define
Persona
Map
Ideate
User stories
Task Flow
Prototype
Sketches
Wireframe
Test
Usability Test
Feedback
Refine
Branding
Hi-Fi Prototype
EMPATHIZE
Problem Discovery
1. Starting point
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?
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
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
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
1 trillion kilowatt hours
are used every year by the global textile industry
200 Years
is taken for the materials to decompose
2000 liters of water
is wasted to produce 1 kilogram of cotton
15% of fabric intended for clothing
ends up on the cutting room floor
Textile waste in fashion Industry
10 million tons of clothing
are sent over to landfills every year by North Americans
Less than 1% of the material
used to produce clothing is recycled into new clothes
60% more pieces of clothes
are bought by consumers in comparison to 15 years ago
Individual contribution to textile waste
37 kilograms of textile
are thrown away annually by an individual
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.
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.
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.
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.
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.
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:
.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:
.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. 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.
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.
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
.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.
.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.
.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.
Let's Connect!
