Tyler Jan
Aspyre
Your Guide to Greener Fashion
Timeline
January - April 2025
My Role
UX Designer
Collaboration
5 Team Members
Tools
Figma
Miro
UserTesting.com
Zoom
Skills
User Research
Prototyping
Moderated Testing
Unmoderated Testing

View the Figma Prototype

Overview
In my human-centered design and development class, I and 4 other team members decided to design an app to support ethical and sustainable shopping practices when buying clothes. With the rise of fast fashion, it has become necessary for consumers to be more conscious with their purchasing decisions.
Problem
Shopping for sustainable and ethical clothes is difficult.
Learning about whether a company’s practices are sustainable and ethical can be difficult due to lack of transparency and greenwashing (brands marketing themselves as sustainable without substantial action).
Furthermore, buying from known sustainable brands can be expensive and access to these brands may be limited. Lastly, some consumers may not know where or how to start shopping sustainably/ethically.
Lastly, some consumers may not know where or how to start shopping sustainably/ethically.
Multiple clothing pieces hung on clothes hangers
Photo by Polina Tankilevitch on Pexels
Design Question
"How might we design an app that educates and supports consumers on how to shop ethically in both in-person and online contexts?"
Design Thinking Process
Icon of people together
Empathize
• Contextual Inquiry
Icon of magnifying glass
Define
• Affinity Mapping
• Task Analysis
Icon of lightbulb
Ideate
• Sketching
Icon of a pen drawing
Prototype
• Figma Prototype
Icon of a vile
Test
• Usability Testing
• Iteration
User Research
Contextual Inquiry
To learn more about how consumers buy clothes in a real-world context, my group and I conducted contextual inquiries with participants that currently sustainably shop and with participants that do not in both in-person and online settings.
This helped us better understand how users shopped for clothes including their thoughts, habits, and what challenges they faced. During the inquiry, I focused on 3 main topics: how consumers shop, what criteria consumers use when they shop for clothes, and why they buy from a specific company.
Conducting the contextual inquiry
The participant I completed the contextual inquiry with was a sustainable shopper that mainly shopped for sustainable clothes online. I watched the participant search through several sustainable clothing brand websites and browse their clothes. I asked them about their process for researching a brand, decision making when buying clothes, and potential issues they run into.
AEIOU Notes
During the evaluation, I took AEIOU notes where I marked important insights. My group and I then synthesized our findings to further understand potential users for our app.
AEIOU notes taken during the contextual inquiry
Link to Notes
Findings
Affinity Mapping
To find patterns and sort our qualitative research data, my group and I created an affinity map. We came up with 6 main categories from our contextual inquiry data. These were quality of material, shopping habits, sustainable shopping habits, price/budget, existing closet, marketing/sales tactics, sizing, and brands. With these categories in mind, we knew for our app, we should focus on features for:
Affinity map of the results from the contextual inquiries
Link to Map
Task Analysis Diagram
To break down and further understand the tasks users complete when shopping for clothes, my group and I created two hierarchical task analysis diagrams, one for online shopping and one for in-person. By doing so, we were able to better understand in what specific ways our app could support the process of sustainable clothes.
Task analysis diagram for shopping onlineTask analysis diagram for shopping in-person
Link to Diagrams
Sketches
With the data from our contextual inquiries and findings from our affinity map and task analysis diagrams, we began to sketch wireframes to get a better idea of what the app would look like. In my sketches I focused on creating 4 main pages: one page for articles on sustainable practices, one for searching brands and their sustainability rating, one for curated lists of verified sustainable brands, and one for favorited items, allowing users to easily revisit them.

Here are the wireframes I drew:
Sketches of the appSketches of the app
Link to Sketches
Prototype
Using our previous sketches and focusing on 3 main features:
  • Researching a brand's sustainability
  • Discovering sustainable and ethical brands
  • Sustainability awareness/education
we created our first Figma prototype of our app.
Below are several key screens from the first prototype:
Task analysis diagram for shopping online
Link to Image
Testing
After we created our first prototype, we conducted usability tests with participants. We conducted moderated testing using Zoom and unmoderated testing using UserTesting.com.
Moderated Testing
For the moderated usability test, we each conducted two, one as a facilitator asking questions and one as a note taker. We used Zoom to communicate with participants and we observed them using our Figma prototype. We used a basic outline and adjusted questions on the fly to ask specific questions about the users' actions. For both moderated and unmoderated tests, we asked the participants to complete 3 main tasks. These being:
  • Research clothing brands
  • Learn about sustainability
  • Find ethical and sustainable clothing brands
Unmoderated Testing
For our unmoderated usability testing, we used UserTesting and constructed a script. We paid careful attention so that the script was easily understandable since there were no observers. Similar to before, we asked participants to complete 3 tasks and we asked them post task and wrap-up questions about their experience.
Task analysis diagram for shopping online
Findings
Some of our key findings are below:
Positive
  • The navigation bar icons were effective
  • Breaking down usability scores into 3 criteria was helpful
  • Dividing brands into different clothing categories was convenient
  • Search page filters were easily understandable
Negative
  • The “Search” page’s purpose was confusing since multiple pages had search bars
  • The name of the “Discover” page was ambiguous
  • Some users did not realize the “Discover Ethical Brands” section on the “Home” page was scrollable
  • Unclear price rating
  • Lack of rating descriptions
Iteration
Using the feedback gathered from the moderated and unmoderated user testing we conducted, we made changes to our prototype to improve usability. A few of the key changes we made include:
Changed the "Search" tab to the "Brands" tab
Users tended to not go to the search page and used the search bar available on the “Home” page. Additionally, some were confused with the “Search” page because it was intended to only look up brands. To better match that function, we changed the name and icon.
Task analysis diagram for shopping online
Changed the “Discover” tab to the “Articles” tab
Some users were unsure of the “Discover” page’s purpose until they clicked on it. To make this clearer, we changed the name to “Articles.”
Task analysis diagram for shopping online
Updated the “Our Brand Picks” section to clearly indicate its scrollable functionality
Some users did not realize they could scroll the tiles in this section. To fix this, we increased the tile sizes so more of a tile would “hang-off” the screen. We also added a fade to the right side of the screen.
Task analysis diagram for shopping online
Changed the price indicator on brands
It was not immediately obvious if the number on the price indicated whether it was cheap or expensive. For example, users did not know if a low number like 1 meant cheap or expensive. Using the “$” symbol makes it clearer that less “$” symbols mean cheaper and more “$” symbols mean expensive.
Task analysis diagram for shopping online
Labeling especially useful articles with tags
Initially, our articles were all labelled the same, which was overwhelming for users who reported that they didn’t have any experience with ethical brand research. Thus, we included labels in our updated prototype to guide the users to foundational information for their foray into ethical shopping.
Task analysis diagram for shopping online
Adding Descriptions of Rating Categories
Initially, our articles were all labelled the same, which was overwhelming for users who reported that they didn’t have any experience with ethical brand research. Thus, we included labels in our updated prototype to guide the users to foundational information for their foray into ethical shopping.
Task analysis diagram for shopping online
Final Prototype
Task analysis diagram for shopping online
What I Learned
During this project, I gained valuable experience in user research. To learn more about potential users, I conducted a contextual inquiry with an ethical shopper, gathering insights into their needs and behaviors. After creating our first prototype, we conducted both moderated and unmoderated user testing to find out what works and what could be improved. Through this process, I realized how important it is to carefully craft research questions to avoid leading or double-barreled questions. After each test, as a group, we compiled our findings and pointed out key issues that could be resolved.
@ Tyler Jan