UX Design + Strategy
Banner.png

UX & UI Design ━ Reguide for Recycling (IDEO Course Project)

 

Reguide for Recycling

UX & UI DESIGN + VISUAL DESIGN

 
 

A mobile app that supports young people in Vancouver to recycle more effectively through bin locating, item searching, and impact visualization.

 

Project Type: 2-Month Design Project (October 2018), Research to Prototype Mobile App Design, View Interactive Prototype, View Process Deck

Team Members: Freeman Liu (Design & Development)

My Roles: UX & UI Design (Entire App), Visual Design, Project Management, Research

Programs: Photoshop, Illustrator, Sketch, InVision

Results: A prototype loved by our potential users

HUMAN-CENTERED DESIGN COURSE PROJECT

I enrolled in IDEO x +Acumen's Human-Centered Design Course to further improve and challenge myself even though I have had experience with the process in a team. This is my latest intensive design involvement outside of school and work. In this project, I took on the roles as UX & UI designer and project manager more heavily in a team of 2. I aimed to push and share more of my current knowledge, skills and passion further through this project. The design challenge we came up with on our own based on guidelines is related to sustainability, with a focus on recycling. We wanted to further explore this area of interest to discover people's needs and frustrations that prevent them from protecting the environment.

The course took us through a hands-on learning experience that involved speaking to people and testing ideas. Strategies for user research and opportunity identification as well as rapid prototyping techniques were also practiced. Below is our process and solution that we came up with or view our process deck.


THE CHALLENGE

“Despite the increase in recycling and decrease in waste disposal, people are still throwing recyclables in the garbage. A closer look at the 2016 waste composition system showed the three biggest contributors to the waste stream were: compostable organics (27%), paper (19%), and plastics (19%)” (Metro Vancouver, 2016)

Waste Disposal per Capita by Primary Category Composition (2011-2016) (Metro Vancouver, 2017)

Waste Disposal per Capita by Primary Category Composition (2011-2016) (Metro Vancouver, 2017)

Recycling has always been an issue and it is especially important to sustain the health and longevity of the environment. With lesser trash in the landfills, pollution of air and water is reduced. The City of Vancouver has a goal of reducing landfill waste by 50% from 2008. As my teammate was a part of a recycling student program and noticed some issues, we wanted to dive deeper. Looking at these statistics and many other sources out there, there is definitely an underlying issue with recycling, especially among young people.

Aside from throwing recyclables into the garbage, there is also an issue with garbage in recycling bins which contaminates the other recyclable items too. To further our research, we conducted user interviews and immersed ourselves in the context. Initially, our question was, “How might we encourage people to be more sustainable by recycling?” which later we reframed it as:

How might we support young people in Vancouver to recycle more effectively?


OUR PROPOSAL

Reguide is a mobile application that supports young people in Vancouver to recycle more effectively. Bins can be located, item recycling details can be found, and progress can be tracked and shared. The goal is to encourage recycling through a simple yet informative tool that can also be used to visualize one’s estimated impact on the environment.


Cover2.png
 

OBJECTIVES

To drive the research and designing of this solution, the main objective was to support young people in Vancouver to recycle more effectively.

This was supported by:

  1. Locating Effectively. Locate appropriate bins without having to search in-person

  2. Instant Information. Find information on how to recycle items instantly

  3. Impact. Gain a feeling of accomplishment and sense of community


OUR PROCESS

Human-Centered Design

A creative approach to solving problems that begins with people and ends with solutions that serve their needs. The process involves developing empathy with the people you are designing for, building prototypes, testing them, and then sharing the new solution with the world.

HCDModel.png


Initial Research

On top of the research above, we looked at multiple websites online on recycling in Vancouver. A highlight we found was:

"If anything some signs are so confusing that the residents just give up and just throw everything into the garbage." (CBC, 2018)

User Interviews

At first, we wanted to explore sustainability and the challenges that still exist. After initial research online and discussing with people, we focused in on recycling, which was important but has always been concerning. We needed to narrow down our focus and there were sources indicating that young people were struggling to recycle. Their consumption levels are high and helping them develop sustainable practices at a young age can be advantageous for the future. A few questions:

  1. What prevents young people from recycling?

  2. Do people understand the effect recycling has on the environment?

  3. What are the existing resources that are used? Is there a lack of resources?

A twist on card sorting with a recycling themed matching activity

A twist on card sorting with a recycling themed matching activity

In each interview, we presented a conversation starter before the questions as a way to gauge their thoughts and values on the environment. From this, we got that a lot of people did care about nature and their surroundings. We also presented them with a card-sorting activity (see above) to get a sense of their current knowledge and reactions to each piece. Aside from the card sort, we also used the 5 Whys method to really get to the root cause of the problem. A few core insights:

Insights.png

“I really want to do good for the environment as much as I can but sometimes recycling is hard. I’m just not sure where to throw things and when I don’t want to mess up, I end up throwing it in the trash and feeling guilty.”

Gap between desire and knowledge

Gap between desire and knowledge


Immersing in Context

In order to really understand how people behave during the moment they find recycling bins, we had to immerse ourselves in the context. We sat around and took notes at parks, malls, and a friend’s home. At the park, there was only one garbage bin and on the way there, the bins were very far apart. People may have to carry things home to throw them away properly. At the mall, the garbage bins were filled up and other recycling ones were not. Some items clearly were recyclable.

The results of the interviews led us to reframe our challenge to be more focused on guiding young people in the recycling process. Many of them struggled in disposing their consumed products appropriately. In our research synthesis, we found three themes for our insights that led us to reframe our challenge: sorting knowledge, proximity, and resources.

Insights2.png


PERSONA + JOURNEY FRAMEWORK

Based on all our interviews, we came up with a persona to design for. I helped with this part of the process extensively. We first started brainstorming and putting down all our insights on stickies before narrowing them down.

Stickies for insight groupings, persona, and journey framework

Stickies for insight groupings, persona, and journey framework

Meet Sammy, our persona that I put together

Meet Sammy, our persona that I put together

To further practice empathy, we drew out a storyboard of Sammy, our persona, and her journey from purchase to disposal. This was based off of the many interviews we did and hearing about the frustrations that were faced.

Storyboard that I drew to understand our persona’s current experience in the situation

Storyboard that I drew to understand our persona’s current experience in the situation

A better laid out journey framework that I made of Sammy

A better laid out journey framework that I made of Sammy

By understanding that there were a lot of frictions in locating bins, disposing items, and reflecting on actions, we wanted to design a solution for during and after recycling.

Phases we want to design for

Phases we want to design for


ANALYSIS + PROTOTYPING

We did some brainstorming into possible solutions, both digital and physical. We had ideas of redesigning the bins (too complex), making a card game to help people practice, developing manuals, and more.

Some ideas we considered

Some ideas we considered

After careful consideration of constraints, we decided to go for a mobile application solution. Many young people now have their phones with them and they often search up information on disposal. Moreover, the existing resources out there are complicated and missing other relevant information. We wanted to make this process more simple and intuitive for them.

Existing resources (My Waste, RecycleDay, Google)

Existing resources (My Waste, RecycleDay, Google)

Design Goals

The goals we had in mind for the designing of the interface and experience were:

  1. Straightforward and simple onboarding

  2. Locating bins with as few steps as possible

  3. Instant item search with adequate suggestions and filters

  4. Consistency of interface

Interaction Map

Below is our map of all the interactions involved throughout the app. Again, an improvement to this would be allowing people to use the app without registering or logging in so they can search right away.

SiteMap.JPG

Sketches + Low-Fi Prototypes

Sketches I made for interactions and interface layouts as well as research on existing resources

Sketches I made for interactions and interface layouts as well as research on existing resources

Low-fi mockups for initial layout variations, tested with potential users

Low-fi mockups for initial layout variations, tested with potential users

Narrowed down a few of my mockups and added some content for further testing

Narrowed down a few of my mockups and added some content for further testing

The Item Search section was quite a tough part to arrange. Although the search bar will likely be used in a rushed situation (such as Sammy’s), it is also useful to include categories. I was trying to figure out whether categorizing by material or object type would be best. After testing my prototypes with potential users, including different categorization options is best (right prototype). Depending on the situation, people prefer having various options to choose from when searching for items.

Considerations of the Item Search experience and interface

Considerations of the Item Search experience and interface

FINAL DESIGN

After testing my prototypes with various target users, I worked on the final design. Before doing high-fidelity mockups, I created a style guide for us to follow. For the overall style of the app, we wanted to use a vibrant colour such as turquoise, a mix of blue and green that resembles nature. As our persona is young and passionate about saving the environment, we wanted to have a more warm and inviting look. The type and icons we have chosen are fun and modern, to lessen the intimidating feeling of recycling.

As I am more experienced with UX and UI design, I did most of the design. My teammate provided feedback and helped by sketching out ideas. In the final designs, I describe the steps Sammy takes to navigate the app and reach her goal of recycling correctly.

HCDStyleGuide.png

Onboarding

I wanted to practice my illustration skills and make appealing onboarding screens. The key to this was combining the onboarding with the sign up button when the app is opened to lessen the amount of steps it takes to get into the main part of the app. To improve, I should allow people to use the app without registering. View Interactive Prototype

1.png

Registration

In the sign up, it is important for people to select their location as each city has their own recycling rules that may differ. I made sure to include a description indicating why location is recommended but can also be skipped. This was a challenging point to consider and it may mean a lot of updating and variations in content based on the location of the user. I also made sure that location changing would be easy to do when the user goes elsewhere.

2.png

Bin Locating + Item Search

Journey Framework for Sammy with a focus on the During Recycling phase (Locate & Dispose)

Journey Framework for Sammy with a focus on the During Recycling phase (Locate & Dispose)

As people had trouble finding bins, like Sammy, it was important to keep that into consideration. Locate allows her to type in her location and find the nearest bin. This would require prior pinning of bins or a tracking code for each. Once she finds a bin, she may be confused about how to dispose the item (in her case, the coffee cup). Sammy can search up the item and find disposal details. At this point, she has figured out how to throw away the item correctly. I could also include in past searches as well as in the item description, have the same suggestions for nearby bins or facilities.

3.png

Recycling Record + Impact Visualization

Journey Framework for Sammy with a focus on the After Recycling phase (Reflection)

Journey Framework for Sammy with a focus on the After Recycling phase (Reflection)

In Record, Sammy can mark down how many items she recycled so far that will add up to the total at the top. This as a way to further motivate young people to recycle. The Nike Run app inspired us to include the option of tracking and sharing. In the Graph tab, she can see visualizations of her recycling achievements and impact. The impact would just be an estimation as it is hard to measure. Finally, she can share her achievements with her friends.

4.png

Interactive Prototype

Test out the app by clicking on the prototype below.

REFLECTION

Personal

The project was not easy, especially in a small team of two. I took on heavy roles and pushed my design abilities far. Although there could be more improvements, I believe this course and project further allowed me to craft a solution that could help people tackle the frustrations with recycling effectively.

Future Improvements

Some improvements include making the numbers more rewarding or putting a legend to the symbols. I’ve also seen some apps that have a character guiding the user throughout the experience. This could be an idea to look into as well. The feedback overall from my peers and potential users were positive and they would really like to use it. Another idea is to allow someone to take a photo of the object and the app will figure out what parts go where. I hope to take this project further and propose to organizations and cities that would find it useful. I also feel if businesses want to be more involved in protecting the environment, they could provide more instructions on recycling their products.