Trace Garment ID & Lifecycle Tracker
Follow your clothing from start to finish
About Trace
Team
My Role: Product Designer
Timeline
January - May 2021
Total: 4.5 Months
Tools
Figma, Miro, Adobe Illustrator, Adobe Photoshop
The Problem
The apparel product lifecycle is brimming with disconnect and wastage from initial design, manufacturing, to final distribution. It is difficult for a consumer to separate what is a marketing ploy versus what is truly helping a cause. This causes anxiety for those who want to make the right decision, but get overwhelmed with the layers of information as they research.
The Goal
Stanford D school Design Thinking Process
The idea of Trace was born as a quick way for the consumer to make the right decision with issues that matter most to them. With the push for customers to have visibility, they should be able to quickly see information they care about when making an apparel purchase, and help them develop a stronger bond to the company and brand. With the help of QR codes, this information can be attached and quickly scanned on each garment.
“How might we help the consumer make right decisions easily with quick snapshots of information?
”How might we help consumers develop a stronger bond with apparel purchased?”
Process
Discovery
(Empathize + Define)
User Interviews
Secondary Research
Competitive Analysis
Affinity Map
Personas
Problem Statement
Ideate
User Flows
User Journeys
Sketches
Prototype + Design
Wireframe
Low-Fidelity Prototype
High-Fidelity Prototype
Visual Design
Interaction Design
Test
User Testing
Iteration
Discovery
Secondary Research:
Although I’ve worked in the industry and have my own opinions, I wanted to dive in more to see real statistics and understand what the average person knows about how their clothing. A few important points stood out to me:
Research shows “73% of global millennials are willing to pay extra for sustainable offerings- up from 50% in 2014”, and are focused more on technology than ever before. (R. Rudominer, Georgetown EDU).
Although QR codes have been around since the 1990s, the technology has seen a 600% increase in demand since the start of the pandemic- from Augmented reality showing garments, to check out options.
Prestige of working for certain designers resulted in workers not to be paid/ companies escaping basic regulation in exchange for clothing vouchers. The more a job can accumulate prestige, the less it will be paid. More of these cases are continually brought up in the news due to the last year of social climate change. (Giulia Mensitieri, PHD).
Heuristic Analysis of Competitors
To get a better understanding of what is currently in the market for a consumer who has interest in making better choices in fashion purchases, I did an analysis of a few existing apps- DoneGood, Good On You, and Arctery’x. These were analyzed using Nielson Norman Group’s 10 heuristic principles, and rated with the following system:
An excerpt of the study is here, but feel free to read through the full analysis below:
Donegood
Donegood’s mission is to make it easy and affordable to use your purchasing power for good by redirecting $130 trillion dollars towards brands that support fair wages, working conditions, and eco friendly production.
Overall Rating: Needs Improvement
With issues in consistency and standards along with visibility of system status, the site and app are a little difficult to use and are rough around the edges. Issues in sizing, colors, inabilities to use discount codes, and trouble signing up are all stress inducing to the user. Main pain points were narrowed down to the following:
Only one discount code could be used at checkout at one time- even if you’re buying two different brand' items with two different codes
Every time a user adds an item to the cart, the site directs you to checkout rather than allow a user to continue browsing
There is nowhere for the user to learn more about each brand’s values, or know exactly what each icon means. For example, “Gives Back” could mean that there are jobs added, or that they donate to the community.
Sizing is inconsistent within a product, and listed in a non numeric sizing.
When searching for a category such as “Men’s Shirts”, the search comes back with 7 out of the top 16 products being unrelated to the category searched for.
User Interviews and Affinity Mapping
To find the right users, I created a screener survey and received 48 responses.
This is where I realized that not only sustainability was an issue, but also things like fit, aesthetic, repurchasing at a later date, care, and price were also top concerns. About 75% of people were willing to pay more to ensure there are ethical practices in place:
However, I noticed many more people were concerned about the environment ranked higher, and less were concerned about labor and workers rights. Even over these categories was the worry of ease of quick returns and exchanges. Each person wanted a simple process of customer support.
From the screener survey, I was able to narrow down and speak for an hour with five individuals across different backgrounds and demographics. It was interesting to see a general consensus of each person wanting to do the right thing, yet the various different priorities along with reasons I had never even considered.
For example, there was no real way as a consumer to get proof that a company is actually donating to communities, or what their marketing really entails due to different standards across the industry. Overall, a great distrust in apparel companies. With these interviews, I was able to narrow down each person’s comments into three final categories: More Transparency, Identification, and Reason to Buy.
Affinity Map Key Takeaways
Consumers want more transparency
Consumers want to identify with garments
Consumers want a reason to buy
Notes from User Interviews being sorted
Personas
Main Persona
Secondary Persona
Secondary Persona
With the affinity map and my user research, I was able to create the persona of my users along with empathy maps. I could clearly identify what their motivations, goals, and frustrations were to anchor all design decisions.
My main persona focus was “Average Alex”- The regular person who just wanted to know they were making better purchasing choices followed by “Socially Conscious Sara”, someone who’s looking to stay trendy but make right choices due to social media and then “Fashion Professional Finn”, an industry professional interested and concerned in all aspects of fashion product lifecycle. .
Ideate
Figuring out the MVP and User flows
With the Users and their discovered pain points, I moved on to nailing down the actual problem and figuring out the MVP (Minimum Viable Product) to ensure the right decisions would be made moving forward. Here, I sketched my solution idea.
At the most basic level, I needed the MVP to be able to scan the QR code and show an image of the garment with a stats page. The user must be able to have an overview stats page to help with quick decisions.
MVP for the solution idea
User Flow 2- Scanning QR codes and viewing stats
User Flow 1- Signing up with your personalization
Sketches and Wireframes
With my initial sketch process, I roughly drew multiple ideas of how I thought the app could function.
To help test my ideas out, I made a quick prototype of the lo-fi wireframes for guerilla usability testing and discovered the following.
Guerilla Usability Testing Findings with Wireframes:
Key Takeaways:
Finding #1: Drag and Drop items are not as intuitive as I thought and need more direction.
Finding #2: Sign up process was too long and takes too many steps
Finding #3: Add a “Finish Later” button to ensure sign up is as quick as possible, and if a user gets bored they can save their work for later
Finding #4: Add a home bar at the bottom of the screen to help the user navigate back and forth once they have finished the signup process.
Style Guide
My thoughts as I created the UI style guide was to go with the theme of Organic Technology- Crisp dark greens showing basis to eco conscious thinking, and cool greys to add a polished finish and calamity- both matching to soothing whites for cleanliness and order, and accented desaturated purples:
Color:
I mostly used the Primary Dark Green, with opacities at 70% Transparency or 50% for lighter hues. White was used for backgrounds and grey to help things pop off the background.
Typography:
Nunito Sans was my chosen font for this app as it is very easy to read, friendly, and approachable in style with lots of varying weights for contrasts in the font family.
Icons:
With Icons, I went with the look of rounded corner rectangles for a consistent and approachable look. For any text fields for success/warning/error, I kept things slightly toned down to continue the peaceful look of the app.
Prototyping + Design
I continued to revise the screens throughout the two rounds of usability testing and came up with comments and questions that I had not realized the average person had. Usability testing was done in-person along with over zoom.
Test
Remote unmoderated user testing with TryMyUI
User Testing from Round 1
Hi-Fidelity Prototype Usability Testing Results and Key Takeaways
Key Takeaways
I worked on two rounds of usability testing and came up with the following comments:
Not all terminology was understood- Added Modals and Pop Up Bubbles for anything that needs more explanation.
Some icons were not clear- the “+/ Add” icon was used for adding new styles and adding a new QR code. These were differentiated for round 2.
Reduced text per page. Sometimes the text was overwhelming to the user.
Added more graphics to the stats page to help ease of reading and understanding- graphics were much easier for the user than a sliding scale.
Project Improvements
To show the updates in visual design, comparisons of the original round 1 screens versus the updated round 2 screens are shown below.
Adding an Profile Image:
Users advised that for these types of apps, they did not think adding a full user image was necessary. I added the option of adding an Avatar as well as your own photo if preferred.
Text Placement:
I also changed the text placement on the page- Initially in round 1 it advised the user on what would be happening on the next page, but many users were confused as to why it was next to choosing an image. I moved the instructions further down the page to give preface to the future sign up.
Sliding Bar to Visual Icons:
The final major change was switching out the overall rankings to be more easily digestible- the sliding bars were confusing- Users thought they would be the ones adding the rankings, and were unsure of what the point value was out of. The additions of the icons for each category really brought the app together for me with it’s friendliness.
Connecting to sign-up:
User testers pointed out immediately that both Facebook and Instagram as a way to sign up were not needed (being the same company). However, what would be the next best option? Out of the five users tested for this project, a general consensus made it that the top four would be using Facebook, Twitter, Email, and Apple. The fifth would be to add a Google addition.
Drag and Drop Feature:
Feedback was that 10 options was too much. Most users felt overwhelmed after 3-5 categories. I also received feedback that some choices of words were not understood, and the average user would like more explanation- this lead to me adding the additional “?” modals at each category corner.
Challenges and Learning Points
In the future, I’d like to work on the “search” process, and how the user could go about looking up something when they do not have access to the QR code- Say for example they just want to look up the Uniqlo Airism Tee, and type it in and scan quickly through to see its rating. I’d also like to add educational videos for anyone interested in how things are made, or what the processes are to maintain easy care instructions
. I’d also love to explore how the app is able to find similar styles that you would like based off something you have favorited- Possibly looking into a “match made” system where the user can swipe on the styles they are interested in pursuing in the future.
Thanks for scrolling through!