ReTHNK - Recycling app

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

Case Study

UIUX

Sustainability

Mobile

iOS

Android

ReTHNK - Hero Image

Sections

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

ReTHNK - Design Process

Competitive Analysis

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

ReTHNK - Design Process

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

RETHNK - Key User Flow

Lofi to Midfi Wireframes

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

ReTHNK - Lofi to Midfi Wireframes

UI Elements

UI Process - Mood Board

ReTHNK - 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

ReTHNK - 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

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

Simple Alternatives - Improvements

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.

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

  2. 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 👍♥️

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:

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.

ReTHNK - Improvements

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.

ReTHNK - Hifi Wireframes v2 - After Improvements

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

ReTHNK - Mockup
ReTHNK - Mockup
ReTHNK - Mockup
ReTHNK - Mockup
ReTHNK - Mockup
ReTHNK - Mockup

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.

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

Thank you for reading this far!

Platform

Native Mobile App (iOS & Android)

My Role

Product Designer (UIUX)

Duration

1.5 Months, 2022

Tools

Figma, Marvel, Usability Hub

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

ReTHNK - Design Process

Competitive Analysis

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

ReTHNK - Design Process

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

RETHNK - Key User Flow

Lofi to Midfi Wireframes

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

ReTHNK - Lofi to Midfi Wireframes

UI Process - Mood Board

After I had user testings, I modified and added some elements in the lofi wireframes for better experience.

ReTHNK - 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 - UI Process Logo

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

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

Simple Alternatives - Improvements

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 💡✨

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:

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.

ReTHNK - Improvements

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.

ReTHNK - Hifi Wireframes v2 - After Improvements

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

ReTHNK - Mockup
ReTHNK - Mockup
ReTHNK - Mockup
ReTHNK - Mockup
ReTHNK - Mockup
ReTHNK - Mockup

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.

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