FairCloset

At the 2022 Patagonia x Adobe design challenge, my submission placed in the top 20. FairCloset is an app for fashion consumers who want to be more conscious about how their clothing is sourced and manufactured.

Adobe Design Jam

Patagonia

Project type

Design Competition

Timeline

7 days

Year

2022

Go to Process Deck Slides
FairCloset

Context

Overview

In 2022, I participated alongside Christine Pak in the Patagonia x Adobe Design Challenge. We placed among the top 20 submissions. The following case study details the process of designing FairCloset, and what went right and wrong along the way.

The Challenge

"Design a third-party mobile app that informs a consumer segment about brands who support living wages directly benefitting workers and their families. The solution must create a way to view measurable impact and/or progress." -Patagonia Creative Team

The Context

Fast fashion is a popular and exploitative business model based on replicating high-fashion designs and mass-producing them at low cost. Oftentimes, this entails exploiting workers in inhumane conditions. Apparel workers are among the lowest paid people in the world. Every worker should have the right to fair compensation and a living wage.

Our Timeline

Day 1: Understanding the challenge
Day 2-4: Brainstorming and Ideation sprint
Day 5: Low Fidelity Prototyping and User Testing
Day 6-7: High Fidelity Prototyping
Day 8: Submission

Our Solution

Our solution was FairCloset, an app for fashion consumers who want to be more conscious about how their clothing is sourced and manufactured. Below were marketing slides we developed to pair with our product:

Defining Goals

Aligning on our impact goals

We found success in this project because a bulk of our sprint was spent in the 0-to-1 phase of product development (breaking down and understanding our prompt). As creative thinkers, it was tempting to immediately jump into competitor research or early ideation and sketching. Committing to breaking down and understanding the prompt first, however, built a foundation for our sprint that helped us move smoothly through future design phases.

The design challenge was broad. To align on our impact goals, we broke down the prompt to 3 design problems we wanted to solve.

Breaking down the prompt

  1. What are the different ways in which we can inform a consumer about fair trade?
  2. How will our solution measure impact?
  3. How will the UI convey change/progress over time?

Problem Statement

We wrote the following problem statement to guide our design sprint:

"How might we inform young consumers of fast fashion and encourage them to take action on current fair trade issues to demand better supply chain practices within the fashion industry?"

Design Sprint

Ideation

After breaking down our prompt and articulating a problem statement, we began brainstorming possible solutions. We pivoted from ideas quickly and frequently to consider as many solutions as possible.

App Architecture

After choosing the most viable features for our app, we created a foundation for our product and mapped out a user flow.

Understanding our App Architecture

From our ideation phase we identified three core user experiences as our app's main features: Stories, Explore, and Your Closet.  These became the different pages accessible via the app nav bar:

Stories: Users read articles on current events that are related to fair trade to learn more about ethical fashion and supply chain practices.

Explore:  Users search fair trade ratings for specific brands and their factories.

Your Closet: Users keep track of the clothing they own and build up a fair trade score for their closet.

Design System

Low Fidelity Mock Ups

After deciding on our main features, we collectively sketched out multiple low fidelity designs. Afterwards, we used those sketches to make a Lo-Fi wireframe on Adobe Xd.

User Testing

Rapid Guerrilla Testing

Before moving to high-fidelity prototyping, we asked friends around campus what they thought of our product. At the time, we were concerned that the user flow wasn't intuitive or linear. Looking back, we realized we should have given participants more context or the design prompt before asking for their opinions.

User Testing Question Examples

  1. What is the home page of our app?
  2. How does this app inform you about Fair-Trade?
  3. What can we do to make this app more interesting or exciting?

User Testing Feedback

  1. Users were unclear about what the home page of our app was.
  2. Users didn't want to read long articles about Fair-Trade.
  3. Users thought the idea of seeing factory ratings wasn't interesting or fun.

Objectives for High Fidelity Prototypes

  1. Remove features that don't feel essential to overall UX.
  2. Format articles similarly to SnapChat stories to decrease cognitive load.
  3. Gamify the app by giving users individual Fair-Trade scores.

High Fidelity Prototype

Final Submission

After uncovering user pain points in our Lo-Fi designs, we transitioned to high fidelity mock ups using Adobe Xd. The following are screens from our final submission.

Some Key Screens

Below are some key screens from our final submission. Go to process slides for link to final prototype and detailed descriptions on screens and design rational.

The graph which is included in the rating card is an interactive tool that shows the progression of a brand's fair trade score over time. We used a color gradient ranging from red, to yellow, to green to indicate scores ranging from poor, to fair, to good. We wanted to encourage interaction with the graph, so we gave users the ability to slide horizontally along the graph to see how the Fair-Trade score changed overtime.

With the scan feature, users can add more items to their closet by scanning their clothing tags. Once scanned, they get to view a rating card which displays information about the factory where the item was made.

Feedback

What we got right:
  • Judges were impressed with our UI design.
  • Judges appreciated our prototyped interactions.
  • Onboarding gave judges context.
Where we struggled:
  • Our prototype was fully clickable and not linear. We realized after submission this would mean we couldn't control a user journey for the judges, potentially confusing them.
  • We had weak CTAs. Many winning submissions used monetary incentives in their product, making calls to action more exciting.

Process Deck Slides

Other work