📷 Overview

The Story

Image of the NYC Fair Trade Coalition @nycfairtrade

In the face of climate change, consumers struggle to find affordable and sustainable options. The NYC Fair Trade Coalition addresses this by offering thrifted clothing at affordable prices and facilitating clothing exchanges.

However, discovering sustainable stores is challenging, as they are often not well-advertised. Mainstream brands lack transparency, leaving shoppers uncertain about their purchases' sustainability. There is also a knowledge gap in understanding sustainability in fashion, making informed choices difficult for consumers.

🤔 Problem

If the NYC Fair Trade and other sustainable small business are doing their part, then what’s the problem?

Accessibility, convenience, and transparency.

Which begs the question:

Possible Challenges

Some possible challenges that I would've encountered with this project were::

• Inclusive Design: Cater to both new and seasoned sustainable shoppers
• Practicality and Efficiency: Focus on convenience and feasibility in research and design decisions
• Strategic Medium Selection: Carefully consider which mediums to use within the constraints

💡 Solution

Empathizing

I had to understand what in the fashion industry is harming the environment, and the target users pain points and frustrations with their current sustainable shopping experiences.

Here's a quick overview at all the survey questions and responses:

A spreadsheet of all of the survey questions and responses. The open-ended responses are color-coded into respective groups that speak on a similar topic/pain point from the users. The groupings name and quantity are labeled underneath the participants responses.

And here are the key findings:

Ideating

With my new findings, I decided to keep the following in mind while thinking of what the mobile product should include:

• Provide only essential information on the carbon emissions and water usage involved in the manufacturing process of clothing as well as the clothing’s estimated lifespan
• Design a simple, user-friendly interface to ensure accessibility for first-time users
• Address and mitigate the trust issues users have with sustainability information

And with that I got to sketching:

Redirection

While sketching, I quickly realized that the app's typing input function wouldn't be practical for users browsing clothes in-store. Typing in details for every item would be inefficient and could discourage users.

I almost shelved the idea until one day at a cafe, I saw how easy and fast it was to pull up a menu by scanning a QR code. This inspired me to explore QR codes further and discovered they could link to a wide range of information. This led me back to the drawing board (literally):

Second sketch of Green Cotton, AR version

While sketching, I also stumbled across the world of AR while researching the technicalities of QR codes and considered combining AR and QR scanning to make the process more interactive and captivating for first-time eco-shoppers. With that, I sketched out possible designs for the AR interface that could appeal to various kinda of eco-shoppers:

Sketches of possible AR interfaces

It was also at this stage where I started thinking about how to display the carbon emissions, water usage, and lifespan of the clothes. I figured that the best way to display the numbers in a way that could allow users to imagine how drastic the enviornmental footprint the clothes they purchase can leave on the enviornment was to compare them to every day items that we interact with frequently, which will be shown later on in the prototype.

Prototyping

After looking for an AR editor, I found Meta Spark Studio to be the best AR program for the prototype given my limited resources. Initially, it was challenging, but I adapted quickly due to my previous experience with other 3D modeling programs.

But because of the limited access there was to make and edit my own assets on Meta Spark Studio, I figured that the best way to make them was on other editing and prototyping platforms and export them onto Meta Spark.

So first, I made the flat card that would be used as the background of the AR effect on Figma:

Card asset made on Figma.

then the graphics on Illustrator:

Plant and checkmark assets made on Illustrator

and lastly, I brought in all of the assets into Meta Spark, added the 3D text with their built in text editor, added animations for the assets:

All the assets brought onto Meta Spark. For the purposes of the prototype, the sample image used was a barcode as a temporary placeholder for what would be a QR code.

Testing

I tested the prototype with three users and received mostly positive feedback. However, I observed that all the users struggled a bit with scanning the barcode. Although they eventually managed to scan it without assistance, they mentioned this small issue with the first prototype.

Additionally, they pointed out that the text was too small and they couldn't zoom into the AR model since it was in a fixed position on the QR code.

To address these concerns, I went back into Meta Spark Studio and made adjustments based on their feedback. I resized the QR image to cover the entire tag for easier scanning and increased the size of the text and assets for better readability.

I presented the revised prototype to the same three users, and they all noted that it was easier to scan and more readable from a comfortable distance.

✨ Results

After completing the development of the AR Green Cotton experience, I eagerly submitted the project to an AR experience contest hosted at the Brooklyn Public Library by Jobs For the Future (JFF). I am thrilled to announce that the project was selected as one of the 5 winners out of 25 contestants (and I even won a VR headset!) This recognition reaffirmed the effectiveness and innovation of my design solution in addressing the challenges of sustainable shopping.

🧘🏻‍♀️ Reflection

This was my first project working with a medium that was not the traditional mobile device/desktop as a UX designer and it opened my eyes to the potential of new technologies and where UX can be involved in that. I would definitely want to expand more with AR products in the future, it’s a much more creative way of utilizing Figma and Illustrator. It was also interesting to see how integrated these programs are and I would love to implement their versatility in the future.