Recycli

UX/UI Research & Design

An artificially intelligent mobile application that allows users to quickly scan and correctly dispose items, and see the impact their actions make.

Project Overview

Prior to the pandemic, I observed while on campus at CSUMB that students struggled to determine how to dispose of trash items, with many giving up and throwing recyclables in the trash (and vice-versa).

With a problem to uncover, I began my research and found that CSUMB students want to protect the environment, but don’t always know the correct way to recycle, compost, or trash items and end up experiencing “recycling guilt”.

How might I alleviate the negative feelings associated with incorrectly disposing items and increase environmental education?

The solution is Recycli, an artificially intelligent mobile application that allows users to quickly scan items, be informed of how to correctly dispose of the item, and see the impact their actions have on the environment.

My Role

UX/UI Researcher & Designer

Team

Solo project

Tools Used

Figma, InVision, Adobe Illustrator, Zoom

The Process

Competitive & Comparative Analysis

My initial research began with a competitive & comparative analysis of the current mobile app market. I found that the recycling mobile app landscape is very small, and most apps focus on finding recycling locations near you (which is still an important feature).

Recycli’s biggest competitor is Ecofriendly: Recycle Smarter. This mobile app has the same concept of using artificial intelligence to identify if an item is recyclable or not. I conducted a competitive usability test with 2 participants on this application, and gathered these insights:

• Overall poor usability

• Photo results are time consuming & inaccurate

• Not location specific

• Lacking in content

• No user personalization or learning opportunities

Conducting a Competitive Usability Test over Zoom.

This application provided a good reference into how the camera feature can be strengthened, and how Recycli can incorporate opportunities for more user engagement.

During my comparative analysis, there were two mobile apps that had features I wanted to emulate within Recycli:

• AWorld (In Support of Act Now): Has a strong behavioral learning loop infused with gamification & visually displays users’ environmental impact.

• Socratic: Artificially intelligent camera feature with the option to take a photo, search, or speak for homework help solutions.

Understanding the Users

My target audience are CSUMB students 18-25 years old, located in Monterey County, and are currently or want to be environmentally conscious. I focused on this target audience because Recycli will center on recycling information for one location, but I do feel it can be expanded in the future (more research!).

To learn more about my users, I conducted a brief screener survey using Google Forms to gain insight about users’ habits and interests in environmental sustainability.

The comparison between these two questions validated that there is an opportunity in the market to increase environmental and recycling knowledge. While many respondents indicated they strongly wanted to learn more about environmental actions, many also did not rate themselves too knowledgeable on the subject. These are the users I wanted to hear more from, and I conducted separate interviews with 3 survey participants over Zoom.

Some of the key insights I learned from my interviews were:

• The user’s location has a big role in the process of recycling items

• Recycling guidelines are not specific when it comes to contamination

• There are many variables when it comes to recycling so if the user is unsure or wants to save time, they’ll throw it in the trash

With this information, I created three personas to guide me through this project’s journey as I began my initial product ideation.

Jobs-to-Be-Done

A key focus of this project was to implement a learning loop that would engage users’ continued use of the app (how would it perform on Day 21?). To help identify one key learning loop in Recycli, I used the Jobs-To-Be-Done framework.

Initial Ideation

Using my research, I completed a Lean UX exercise to brainstorm potential solutions for the mobile application, with the focus on an artificially intelligent camera that could identify how items should be disposed to inform the user.

With the help of this framework, I moved onto to sketching out some initial concept ideas.

Low-Fidelity Prototyping

My initial sketches focused on the process of recycling an item with the assistance of the camera, tracking your recycled items and environmental impact, finding external recycling locations, and potential ideas for resources and challenges features. To validate these initial concepts and identify any gaps in the experience, I conducted 3 usability tests using InVision.

Some key insights from these testing sessions were:

• First impressions of the camera feature were positive for all users

• All participants commented that they wanted more information on recycling and their environmental impact

• A brief onboarding process would alleviate some user confusion on how the app knows the correct recycling guidelines

Another pain point during these testing sessions was the clarity of the sketches. I had gathered some great information on how to improve the app, and was ready to move into high-fidelity prototyping.

Visual Inspiration & Branding

I created a few mood boards in Figma to get an overall idea for the look and feel of the app before it was too costly to make changes.

Moodboard 1: Earth Tones

Moodboard 2: Traditional Sustainability

I was surprised at how much I liked the first moodboard, and I received positive responses on it from some classmates too. However, I did feel that it would be necessary to incorporate the color blue so I could visually signify which bin items belong in. Therefore, I made one more moodboard that combined elements from the two I had.

Moodboard 3: Bringing It All Together

From here I started looking at typography and icon styles so I could set up a design system in Figma before I began prototyping.

Recycli Visual Style Guide

High-Fidelity Prototyping & Usability Testing

I completed my first iteration of the high-fidelity prototype in Figma, and conducted 3 more usability tests to discover any errors and received feedback from users. With the insights I gained, I continued making iterations in Figma until the core user needs were met and there were no usability errors. The prominent changes made during this iteration process based on usability testing feedback were:

• Emphasizing the user’s location through the use of a location specific illustration on the home screen and presenting the user information on recycling guidelines in their county

• Incorporating more information into the user’s impact profile including a comparison of items composted, trashed, or recycled, and a collection of recent items to quickly record more recyclables. Plus, incentivizing users to recycle through planting a tree each time they achieve a new rank with Eco Points gained in the app.

• Gamifying the challenges section to encourage users to practice their recycling knowledge and displaying all levels they have the potential to unlock.

Final Product

Let’s Connect!

nicoleanndesign20@gmail.com

Resume

Made with & by Nicole, 2022.