Recyclr

From Plastic Waste Generation to Recycling Management

Roof

Making it easy and efficient to search and sign home rentals based on the user's preferences without being scammed

Blog

B

Why I completely redesigned my portfolio website - Usability in Web Design.

Neuel Sam

1 Min Read, 15 July 2020

Problem Space

Did you know that less than 9% of Canada's used plastic gets recycled?

 

The increased use of non-recyclable plastic and the higher cost of recycling is creating problems for many cities in Canada. Used plastic is filling up landfills at a scary pace.

  • Users are not provided actionable recycling information on products.

  • Waste generated is not collected efficiently enough for plastic segregation. 

  • Quantitative feedback is not provided on the plastic recycled after collection.

  • Lack of incentives for users to properly focus on plastic recycling.

Current Landscape

In Canada, the value of usable groceries that wind up in landfills or other disposal sites is almost $50 billion. In Toronto, 91, 304 tonnes of food is wasted annually. Toronto households create 100kg of unnecessary food waste per year.

Food and other organic material incorrectly put in garbage bins end up in landfills where it decomposes and produces greenhouse gases like methane. Toronto’s Green Bin program was designed for unavoidable food waste (e.g. scraps, peels, cores). Putting avoidable food waste, such as leftovers or spoiled food, in the Green Bin creates the need for additional resources and management and increases costs.

Project Goal

How might we increase the Amount of Plastic Recycled to 100%?

Solution

An application for providing actionable recycling information which is easy to use and intuitive for people of all ages.

Ultimate Impact

Make recycling effective and cheaper so that the amount of plastic generated will be equal or close to the amount of plastic recycled.

Design Process

Recyclr is a design sprint project completed in a week. The Double Diamond Design Approach was followed. The design thinking process was split up into 4 phases: Starting with research, moving on to synthesis, ideation, testing, and ending with finalized designs.

Double Diamond Approach

My Role

Design Sprint Facilitator Role

The design sprint team that we put together was comprised of a product manager, a developer, two environmental experts, and a business consultant. I worked as a product designer and the facilitator for the week-long design sprint. Mapping, Sketching, Storyboarding, and Prototyping were done after extensive research in association with the Environmental experts from the School of Environmental Studies at the University of Waterloo.

Product Designer Role

Storyboarding from Sketching, conceptualizing the solution, and prototyping the concept for user testing. The trial run of the concept provides initial user feedback which is incorporated during the finishing up of the prototype.

Win over the SUITS Role

The concept was pitched in many of the Startup pitch fund competitions at the University of Waterloo and to the city of Waterloo. The concept was vetted as many times as possible by environmental experts and our team of 6 to make sure we did not leave any loose ends.

Part 1

Research

Secondary Research was conducted to gain insights into the amount of domestic food waste generated in Canada. From the articles published in journals and magazines, it was evident that this is a huge problem and this space could use innovation on multiple fronts.

63 %

of Canada’s food waste could have been avoided

400 kg

of food, per person, is wasted in Canada each year

Primary Research

Qualitative data from user interviews were used to get an understanding of the food wastage occurring.

User Interviews

21 Participants were interviewed for qualitative data. The average interview duration was 10 minutes.​

Participants were not distinguished based on their lifestyle habits.

User Questions

  • Please tell me about your experience around food, including pre, during, and post meals?

  • What would/could prove to be helpful in your food preparation stages (including if ordering out)?

  • Are there any improvements, in your experience, that you would recommend around food consumption, either prepared or ordered in?

  • What are the steps you take when you bring food into the house?

  • What is your process around dealing with leftovers in your household? What do you feel leads to leftovers in your household?

  • What are your thoughts and feelings about food waste in your household?

Part 2

Synthesis

Primary and secondary research conducted provides loads of data that are unusable without proper synthesis. The synthesis steps vary according to the research method used to collect data and according to the number of participants. Empathy map and deriving insights from keywords are common synthesis methods.

Research Insights

  1. Leftovers are a main cause of food waste.

  2. Incorrect portion sizes in food delivery can lead to a lot of food waste.

  3. The time and ease of cooking can be a factor in using up ingredients in the inventory.

  4. People do not understand how much food is wasted.

  5. Food in inventory is not used up before the expiry date.

  6. People need suggestions and cooking plans based on the inventory they have.

  7. Bulk buying without planning results in the majority of leftovers and expired food.

  8. Inefficient storage and tracking of inventory results in faster degradation and inefficient usage of food.

User Persona

Based on the insights from the user interviews, a primary user persona was created. This persona worked as points of focus for the segment of customers I needed to keep in mind. The persona conveys traits, behaviors, personal goals, frustrations, pain points, direct quotes, and motivations of the potential users I interviewed.

Journey Map

A Journey Map was created to gain a deeper understanding of the tasks that users go through their journey of buying, cooking, and disposing of food waste. Developing a journey map for the persona helped me in thinking about opportunities that can be incorporated into the feature set to help the user.

Deducing the opportunity to make a difference

Based on the journey map, the opportunity selected for design intervention was Meal Prep/Planning Stage. Many of the applications that exist in this space have features to add recipes and have a shopping list, but lack recipe suggestions and cannot track inventory. Based on a quick competitor analysis, an approach that would tackle unused food inventory was chosen as the way forward.

Part 3

Develop

Synthesized research insights help in the ideation process of a solution. I began by noting down ideas to tackle the problem. The ideation phase is the most enjoyable part of product design as you get to draw out the solution and think over it multiple times, iterating each time a new idea pops up. The first step was to create user stories and tasks.

User Stories

User stories are created to find scenarios that the user would find himself engaging in while using the application. It helps in easily noting down the needs and wants of the user in a particular problem space. The user story is the start to finish of interaction from the user with the application for a single task. Multiple tasks will have multiple user stories and will help in keeping the application as focussed as possible to what the user needs.

User Task Priorities

Tasks are derived from user stories. These tasks will be performed by the user in the app.

These user tasks are then split into 4 Epics:

  • Share food in inventory with connections.

  • View recipe suggestions based on items in inventory.

  • Add items to your shopping list.

  • Track items in inventory based on the expiry date.

Standout Epic: Share food in inventory with connections.

The main task flow is to share items in the inventory that is close to their expiry date. This reminds the user to consume the food and avoids wasting the item.

Task Flow Diagram

A task flow diagram is drawn out based on the standout epic. The user story here is to make a post about items in the kitchen inventory and share it with social connections. The task flow diagram lists out tasks to be performed by the user, system states in between, and screen needed for the task.

Task

The core task is to post about a pizza that has not been eaten. The user takes a photo and adds a description and price for the pizza. Users can set the price to zero to give the pizza away for free.

Sketches

Sketching out variations of screens for the chosen task flows was the next step. These sketches went through many iterations. Sketches aid in scribbling down design ideas easily and effectively. The sketch shown below is version 3.

Part 4
Deliver

From the finished sketches for the project, I moved into creating the wireframes for level 1 user testing. The feedback from level 1 user testing was used to create a version 2 wireframe prototype. User testing was done again and the feedback was incorporated into version 3. The feedback received from user testing after version 3 was reviewed and implemented as per the Effort and Impact of the change. The wireframe shown below has feedback included after user testing wireframe version 2.

Wireframe and Information Architecture

Wireframing is done as per the sketches for user testing. Information Architecture is as per the image shown below. This hierarchy is based on user tests and iterations.

User Testing and Feedback

  • Store- a well-liked feature where the list of items are organized by descending expiry dates (fridge icon)

  • The app could recommend items to buy based on recipe selection (incorporated after user testing version 1)

  • Push notifications for expiring items

  • Sync between inventory, recipes and shopping list

  • Catchy / like the name of the app

  • Easy to use, efficient information architecture

  • Questions around why the camera functionality did not lead to the social page (Camera was in the home screen in version 1, moved to the add item screen to avoid confusion after user testing).

  • The purpose of the camera/scan feature is not obvious - mistook for taking pics and posting on social media (Camera was in the home screen in version 1, moved to the add item screen to avoid confusion after user testing).

  • Some confusion if the Share feature shares the posts on this app or is integrated with others.

Delivering the MVP experience

After the navigation from the home page to different screens and the bottom navigation bar was set in stone, the next phase was to change the wireframes to high fidelity designs. A mood board was created for the application based on pictures and fonts related to homes. The mood board was then used with adobe color extractor to find accessible color palettes for the application and for branding.

Mood Board

The Moodboard reflects a green feel which is to give a fresh and cool feel. This color palette was used both in branding and for applying visual design.

Logo

Based on quick iterations, a logo was designed to resemble a storage pocket. This is also used in profile page and branding.

High Fidelity Design

Prototype Link: Click Here

What's Next?

The whole project lasted 1 week. There is a lack of adherence to grids and spacing due to the project being a limited time sprint design model. The next steps would be to:

  • Introduce an onboarding process

  • Correct grid and spacing issues

  • Refine visuals for accessibility

  • Develop an adaptation of the app on a smart fridge with a 15-inch display.

Key Learnings

  1. Research can bring a different perspective to the problem space. Suddenly, the problems are challenges that have solutions.

  2. Embracing ambiguity helped spark creativity in the solution.

  3. More sketches mean more solutions and more options to test out before wireframing.

  4. User testing can uncover confusion that leads to an unpleasant experience. The design elements that cause this confusion might seem so obvious.

Visual Design

My Role

Product Designer

Deliverables

Timeline

Minimum viable product (Android)

1 Week

Insights from Interviews

“I forget what's stored at the back of the

fridge”

“I feel guilty about wasting food”

“My meals depend on whatever is convenient

Secondary Epic: View recipe suggestions based on items in inventory.

The secondary task flow focusses on recipe suggestion given to the user based on the items she/he has in the inventory. This prompts the user to use up items in the inventory before adding/buying new items.

Incorporating More Feedback

  • The Store and the expiry tracker are the biggest features of the app, So they are moved closer to home in the navigation bar.

  • The Camera button sits ambiguously on the top right confusing users, As an improvement, this is changed to scan icon with a + sign to show the functionality of adding items to inventory or posting to feed.

  • The app would be able to recommend recipes based on expiring items with Sync between inventory, recipes, and shopping lists.

  • The Recipe page shows the number of ingredients.

  • The positive sign for share is made more obvious.

High Fidelity Design

Wireframes are turned into High fidelity design using the colors derived from the mood board.

Featured

Projects

All Projects

  • Facebook
  • Twitter
  • Pinterest
  • Instagram

NEUEL SAM

PRODUCT DESIGNER