Platform
Native Mobile App (iOS & Android)
My Role
Product Designer (UIUX)
Duration
1.5 Months, 2022
Tools
Figma, Marvel, Usability Hub
Discover
About this app
Recycling shouldn’t be overwhelming.
ReTHNK app is designed to make users’ lives easier by enabling them to scan any item that they wonder whether it is recyclable. Some are recyclable. Some are not. It tells them which bin to put it into. If it’s not recyclable, the app suggests what to buy next time so they can have their lives with less waste.
The whole purpose of this app is to let the users be mindful of the 4Rs (Recycle, Reuse, Reduce, and Rethink) when the product becomes a waste. Recycling is one of the closest things they can do to being kind to the earth.
Problem
The idea behind the ReTHNK app was born when I wanted to do something good for this planet, but I didn’t know where to start. Recycling is one of the easiest things we can do, however...
There are a lot of rules regarding recycling.
Some rules are confusing.
It takes some effort to make an item “recyclable worthy.”
The regulations differ depending on where you live.
There are a lot of recycling apps, but most of them lack the vital feature of scanning.
Solution
Not only solving those problems, one of the missions ReTHNK app aims is to make the users’ lives easier. People want convenient, reasonable, and economic lifestyles. These are the followings that ReTHNK users will benefit from when they download this app:
They can scan the item, telling you which bin the thing can go to.
It educates them about the facts of recycling, an eco-friendly lifestyle, and alternative ideas of what item you can purchase next time.
They can locate the recycling centers and the donation centers near the users.
They can enjoy and earn points when they recycle (and share). They feel like they are growing like a tree as an eco guru.
It supports them in making their lives more sustainable. Suggestions on how to reduce waste, change your eating habits, reuse items and make their lives less waste, and so on are given.
Design Process

Competitive Analysis
There are tons of sustainablity apps out there. However, I didn't find a good recycling scanner that works.

Ideation
Key User Flow
My wireframes are based on this key user story: "When I finish with my shampoo bottle, I want to know the bottle is recyclable so that I can put it in the right bin."

Lofi to Midfi Wireframes
I created the lofi to midfi wireframes based on the key user flow.

UI Elements
UI Process - Mood Board

After I created the midfi wireframes, I moved on to UI Process. The first step was Mood Board.
When I browsed through the resources, I had an organic, “human touch” in my mind. So I would choose illustration over photo visual aids as much as possible, for example. I like the image to deliver this project’s mission to the users. It’s fun and friendly.
UI Process - Logo

I wanted tosymbolize nature(water, plants, the color: green) and sustainable life (eco-system) in one symbol.
I also got inspired by the bold logos in the other resources (Dribbble and Pinterest) and added the element to the idea.
My goal was to show the robust ecosystem we can participate in and support our planet.
Font: I selected to use Inika Regular. I like the sophisticated yet almost handwriting style. It felt “organic” to me.
UI Process - Style Guide

Based on my goal of UI to have “organic” and “human touch” feelings, I intentionally selected the colors that remind one of the recycled items, such as recycled paper, which you can see below (color #2-4). In addition, I chose other colors that are suitable for the beige color.
Test + Iterations
Hifi Wireframes v1
After setting up the colors, logo, and UI elements, I moved on to Hifi Wireframes.

Feedback
I requested feedback from my friends, family, and peers (10 people) after I completed v1 of Hifi Wireframes. I gave them two options to go through briefly or these two user stories if they didn’t know where to start.
When I finish my shampoo bottle, I want to know if this shampoo bottle is recyclable so that I can put it in the right bin. When I signed in, I saw the Top Recycling Categories section.
I want to log the aluminum cans that I recycled to earn points.
After they went through my app, I asked them to give me positive and constructive feedback.
POSITIVE 👍♥️
"My favorite screen is “My Level” it makes it lighthearted, super easy to understand, very clear and great type hierarchy!"
"This app is REALLY polished and I just want to compliment you on the NUMBER of accessible screen, smooth and logical flow, clear type hierarchy, and keeping the screens true to your color palate and purpose!"
"I really loved the splash page screens, really warm and engaging. Overall your style choices are right in mind with recycling."
CONSTRUCTIVE 💡✨
After the improvements, I sent out another survey to the same interviewers to take the revised quiz and asked for their opinion. Here are what they say:
"On the Discover page, it may be nice to make the “custom” text in the bottom 3 block to be one of the green colors to pop them? Like “Thursday” “Santa Monica” “Baby Food Pouch” just making it easy to recognize the personalization for the user. - Entrance page"
"I had a harder time with finding the shampoo bottle to recycle. I first clicked on the shampoo bottle listed but that didn't work. I realized after a few tries that it was the scan function. Maybe make this a bit more clearer? But the 2nd flow was much easier to execute."
"On the card that pulls up after you take a photo of a product has a bit too harsh of a gradient on the top of the card. The card is on “top” so it doesn’t need a very dark shadow at the top of it. Great icons, easy for the eye to track text and hierarchy."
Improvements
After I received the constructive feedback, I modified my designs accordingly. I always appreciate constructive (and positive, of course!) feedback. The followings are some of the examples where I adjusted my designs.

Hifi Wireframe v2 - After the improvements
These are the final high-fidelity wireframes after I received the feedback from the user testing and modified with that feedback.

As for Android, there is not much difference in user experiences compared to iOS. This is because human behaviors don’t change based on the devices. Only the UI has some changes following the Material Design Guideline.
If you want to see the Android version, click the button below. You will see the Android version of improvements at the end of the image.
Mockups - Native
Mockups






Challenges
I always get carried away in making my app perfect. My curiosity also gets me in the way of creating more wireframes with “what if” ideas. I think it’s a great thing to be curious. However, of course, I pay the price: my time. It took me a while to complete this project, but I’m pleased I got a lot of good feedback. After receiving feedback, I made the prototype much simpler for better testing.
Sustainability is a vast topic to cover. I wanted to include many elements in this app to make it meaningful. However, the more I added, the more complex it became. I didn’t want to overwhelm the users, so I changed direction a little after receiving the feedback. Even though it was a last-minute change, the users who were confused about using this app were happy about the changes.
Takeaways
I learned how to receive feedback, especially constructive feedback. I figured out that hidden gems are in the constructive feedback.It’s also encouraging and helpful. As a Product Designer and a person, I had an excellent opportunity to take in those suggestions, be flexible about them, and grow from them.