ReTHNK - Recycling app

UIUX Design Case Study - Native Mobile (iOS + Android) app

About the 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 to them 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 potentially becomes a waste. Recycling is one of the closest things they can do to being kind to the earth.

Problem

The idea behind 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 important feature of scanning.

Solution

Not only solving those problems, one of the missions ReTHNK app aims is to make the users’ lives easier. People wants convenient, reasonable, and economical lifestyles. These are the followings that ReTHNK users will benefit when they download this app:

  • They can scan the item and it tells you which bin the item can go to.
  • It educates them about the facts of recycling, eco-friendly lifestyle, alternative ideas 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 recyle (and share). They feel like they are growing like a tree as a eco guru.
  • It supports them to make their lives more sustainable. Suggestions how to reduce the waste, how to change your eating habit, how to 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.

Key User Flow

My wireframes are based on this key user story: "When I am finished with my shampoo bottle, I want to know the shampoo bottle is recyclable, so 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 Process - Mood Board

After I created the midfi wireframes, I moved on to UI Process. The first step was Mood Board.


When I browse 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 illustration to deliver this project’s mission to the users. It’s fun and friendly.

UI Process - Logo

ReTHNK Recycling App - Logo Image

I wanted to symbolize nature (water, plants, the color: green) and sustainable life (eco-system), in one symbol.

I also got inspired by the bold, strong logos in the other resources (Dribbble and Pinterest) and added the element to the idea.

My goal was to show the strong ecosystem that 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). I chose other colors that are suitable to the beige color.

Hifi Wireframes v1

After I set up the colors, logo, and the other UI elements, I moved on to Hifi Wireframes.

Feedback

I requested feedback to my friends, family and peers (10 people) after I was done with v1 of Hifi Wireframes. I gave them 2 options to go through briefly or go through these 2 user stories if they didn’t know where to start.

  1. When I finish my shampoo bottle, I want to know if this shampoo bottle is recyclable, so I can put it in the right bin. When I signed in, I see the Top Recycling Categories section.
  2. I want to log the aluminum cans that I recycled to earn points.

I asked them to give me positive and constructive feedback after they went through my app.

Positive

Constructive

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 modified 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 to the Material Design Guideline.

If you would like to see Android version, click the button below. You will see the Android version of improvements at the end of the image.

Mockups

Challenges

  1. 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.

  1. 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 definitely learned how to receive feedback, especially constructive feedback. I figured out that hidden gems are in the constructice feedback. It’s also encouraging and helpful. Not only as a Product Designer, but as a person, I had a great opportunity to take in those suggestions, be flexible about it, and grow from it.

Thank You for reading this far!

[NOTE] If you would like to see Android Prototype, please contact me. Or you can visit my Behance page and you will find it at the very end.