TrueEthics—UX Case Study

Atiyya Shahab
Nov 1, 2019 · 8 min read

An app for educating and empowering users to discard items according to their values.

Image for post
Image for post

Original Idea

Image for post
Image for post
I originally thought my problem space was related to coffee.

Before starting this project, I’ve had an idea for a while to redesign a section of the Starbucks app to address I problem I’ve experienced. If you care about the environment and convenience, you can’t combine the experience of bringing in your own reusable mug and ordering your drink ahead of time via mobile order.

I thought that if Starbucks came up with a mug that could be purchased on the mobile app with a drink, and those mugs could be exchanged (cleaned) for future mobile orders, this problem could be solved. I was considering mocking up the UX + UI for that section as a small design project.

When tasked with coming up with an entirely new app idea, I decided that using this old idea I had could be a good starting point. I had every intention of allowing the UX design process to take me to other places, but this starting point helped me identify the problem space that I wanted to research.

Empathize: User Research

I allowed my initial idea to guide the questions I asked in user research. I put out a survey asking about people’s coffee-drinking habits — where they got their drinks, what vessels they carried them in, how many cups they drank, etc. I also asked questions about how concerned people were about the environment, including if they had ever brought a reusable mug to a coffee shop before.

Image for post
Image for post

I struggled to find the connection between the many random facts I collected about people’s coffee habits and the few facts I collected about how people felt about the environment. I had my first “aha” moment when I realized I didn’t find much value in the data I collected:

The problem I was trying to solve had nothing to do with coffee.

The real problem I was trying to understand was changing people’s environmental habits. So, I put together another survey.

But before I put out a second survey, I took a look at the results of my first survey to understand how I got the most interesting information I collected.

Image for post
Image for post

I noticed that the most unexpected answers came from more open-end questions and free-response questions because that allowed me to get information about things I didn’t specifically ask about.

I put out another survey to focus exclusively on understanding the problem space of people’s environmental questions. I made sure to include plenty of open-ended questions. I asked questions for the sake of curiosity, rather than trying to collect data to give me a certain result.

Image for post
Image for post

Some examples of the more obscure and psychological questions I asked were:

  1. Are you comfortable bringing a reusable handkerchief to work?
  2. Are you comfortable asking obscure questions in front of a long line of customers?
  3. Have you ever felt judged for wasting something?
  4. Who do you fear being judged by the most?
  5. Are you a germophobe?
Image for post
Image for post
Image for post
Image for post

Through the process of affinity mapping, I separated my findings into these main categories:

  • Hygiene
  • Social Aspect
  • Convenience
  • Waste
  • Environment
  • Habits
  • C̵o̵f̵f̵e̵e̵
Image for post
Image for post

After collecting and categorizing the information from my surveys, I went out and did another form of user research — contextual observation. Even though I already decided that my project didn’t have to relate to coffee, coffee shops were still great places to observe human behavior. So, I went to a Starbucks and observed people’s environmental habits.

I went to observe the following behaviors:

  1. Does anyone actually bring in their own travel mug?
  2. How many napkins, wooden straws, and other supplies are people grabbing after they get their coffee?
  3. What are people putting in the trash and recycling bins?

I noticed several interesting behaviors, including:

  • A person using two wooden sticks to mix their drink
  • A small child dumping two whole drinks into the recycling bin
  • People grabbing countless napkins to hold their cold drinks

In general, the most notable thing I noticed was people’s lack of awareness of what they were throwing into what bin. Many people seemed not to care, or even notice which bin they were throwing things away in.

From my contextual observation, I learned that awareness and education on how to properly dispose of items was another category to explore in the problem space.

Define: Problem Definition

From my user research, I decided on the following problem definition:

In order to change people’s environmental habits, we must find a way to feel confident in our choices and accepted in a way that is convenient.

Empathize: User Persona

From the research I gathered, I created a persona.

Image for post
Image for post

Ideate: Competitive Analysis

I researched apps and websites solving problems in the same problem space of saving the environment to see what was already out there. I found a few interesting food-swapping apps, such as Olio, that seemed to already be doing a great job reducing food waste.

Image for post
Image for post

Because awareness and education was an area I wanted to explore, I looked at apps that helped educate people on how to recycle. I found some apps that provided some general information about this, but none that combined with increasing knowledge overtime, or gamifying the concept.

Ideate: Collaborate Ideation Session

Image for post
Image for post

In a collaborative ideation session, my classmates an idea came up with ideas that related to the concepts of:

  • Education
  • Community
  • Awareness
  • Gamification

Aha! A Conversation with My Mom

Image for post
Image for post
Photo by Quino Al on Unsplash

A few weeks after I sent out my survey, I was on the phone with my mom. “Oh, by the way!” she said in the middle of the conversation. “I took your little survey you posted on LinkedIn.”

Apparently, taking my survey put her in an environmental frenzy.

Since taking my survey, she started working on changing several of her habits including

  • Putting away her paper towels and using more reusable materials
  • Bringing cloth shopping bags and produce bags with her while grocery shopping
  • Opting for food that came in less packaging
  • Looking into composting
  • Significantly reducing her online shopping to reduce her carbon footprint

I was very surprised. I was trying to design an app that enabled people to change their environmental habits. Yet, somehow, I was already successful with one person from just sending out a survey…

I realized that asking people questions about themselves engaged them more than simply telling them information.

Ideate: Design Direction

Project Ecocycle: An App Idea

  1. Make information about how to discard items easy and accessible.
  2. Engage users through quizzes and the gamification process.
  3. Provide a competitive sense of community through scores and leaderboards.

Ideate: Site Architecture

Image for post
Image for post

Ideate: Wireframes

Image for post
Image for post

Test: Lo-Fi Prototyping

I prototyped my wireframes in the Marvel app to test out the flow with people.

Image for post
Image for post
Preview of the Marvel App

View the Lo-Fi-Prototype here.

While testing my lo-fi prototype, I watched people struggle to find the “recycle scanner” to search for products.

As I thought more through my problem and my general design direction, I wanted to broaden the information from just scanning products to see if they were recyclable, to searching for items to see how to dispose of them.

So, I decided to change the recycle scanner to a search page and moved it to the first item in the navigation.

Ideate: The Brand and UI Design

Before converting all my wireframes to a high-fidelity prototype, I decided to put some thought into the brand and create an overall system to design the UI with.

Image for post
Image for post
My naming brain dump document :)
Image for post
Image for post
Image for post
Image for post
Word Maps

I considered the name, “Dispose” for a while, and sketched some logo ideas for that:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Sketches for the name, “Dispose”

I also considered the name, “True Cycle” and sketched some logo ideas for that:

Image for post
Image for post
Sketches for the name, “TrueCycle”

I eventually landed and TrueEthics, because it communicated the value the app would provide transparency about the environment, allow the user to live according to their values.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

I planned my colors and type sizing ahead of time so I could have a base to start creating the UI portion of the prototype.

The MVP

Image for post
Image for post

View the Figma prototype.

Next Steps

The above prototype is the minimum viable product. If I were to expand on this project, I would do the following:

  • Do additional testing with the MVP prototype.
  • Expand on the social element of the app, such as making friends on the app, a more robust point system compete in, and incorporating social media integration.

My Role in This Project

This project was a solo student project created in a UX design class. In the class, my classmates and I helped each other with a group ideation session and helped each other with user testing. However, each student completed their entire project on their own.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store