top of page

Recycleup
app and responsive website design

logo.png

ReCycleUp is an organisation that focuses on recycling and sustainability. The organisation needs a tool that helps people learn about recycling and upcycling in the neighbourhood. ReCycleUp's primary target users include people who are concerned about recycling and want to live a sustainable life. (The idea and design were referenced from Recycle Now)

My Role: UX designer leading the app and responsive website design from conception to delivery

Design Platform: Figma

This project is one of the coursework (Design a UX for Social Good) from Google UX Design Professional Certificate, not a project for a real organisation.

recycleup.png
The Problem
In 2021 2.5 million tonnes of plastic waste was generated in the UK, yet just 44.4% of that was recycled (DEFRA, 2022). the people of the UK do want to recycle their waste but are restricted with the offered recycling schemes in their boroughs which make it difficult for them to comprehend.
The Goal
Design a platform that would help to improve education on the topic of recycling and provide information about recycling, thus make recycling easier and accessible to people

1

Little knowledge about recycling
User Research
PAIN POINTS

2

Poor accessibility to recycling facilities 

3

Inadequate education resources 

Personas

Young Woman on Street

“I find online shopping really convenient but the deliveries are always over-packaging, and some packaging is difficult to recycle”

rachel

Age: 
Education: 
Hometown:
Family:

Occupation:

22
Bachelor of Geology
Hong Kong
Single
Full-time student

pROBLEM sTATEMENT

Rachel is a student who needs to learn more about the recycling scheme in the UK, so that she can recycle as much as possible.

gOALS

  • Become a geologist

  • Try to be more environmentally friendly

  • Making recycling easier and more accessible

fRUSTRATIONS

  • "I am confused about the recycling scheme in the UK.”

  • “I don’t know if I correctly dispose of my household items”

  • “I wish there are more information about how to recycle and what to recycle.”

BIO

Rachel is a 23-year-old geology student studying abroad in the UK and living alone. She enjoys online shopping a lot but always found a lot of things she ordered online are overpackaged. She doesn’t know how to recycle some items. Also, she always cooks at home, she doesn’t know how to handle the food waste either.

Personas

Headshot of Mid Adult Man

“I try my best to recycle things but sometimes I found it frustrating to do that because I don’t know where I can recycle certain items.”

ERIC

Age: 
Education: 
Hometown:
Family:

Occupation:

45
Bachelor of Real Estate
India
Married with a dog
Manager

pROBLEM sTATEMENT

Eric is a real estate manager who needs to know the meaning of different recycling symbols so that he could recycle at the closest recycling points in places he stayed

gOALS

  • Try to be more environmentally friendly

  • Be able to understand more about the recycling schemes and best recycling practice

  • Spend fruitful time with his wife and the dog

fRUSTRATIONS

  • “I am confused about the recycling labels.”

  • “I don’t know if I correctly dispose of my household items”

  • “I wish I know where I can recycle those non-common items”

BIO

Eric is a real estate manager who always needs to go on business trips around the United Kingdom to check on the company’s properties. He does grocery shopping from the supermarket, but he finds it challenging to understand and interpret the recycling symbols and labels on the packaging, sometimes, the places he stays during business trips only have limited access to recycling facilities or collection points.

PAPER WIREFRAMES

IMG_8810.JPG
  • I did a quick ideation exercise to come up with ideas for how to address the current gap. my focus was specifically on recycling DO and DON'T and provide information on the nearest recycling points.

  • For the home screen, I want to include all necessary functions to fulfil the needs of customers

Refined paper wireframe
IMG_8813.JPG
IMG_8817.JPG
IMG_8811.JPG
IMG_8812.JPG
IMG_8814.JPG

digital WIREFRAMES

  • After ideating and drafting some paper wireframes, I created the initial designs for the ReCycleUp app.

  • These designs focused on providing useful information about recycling at home and out of home for the users.

digital wireframe .png
  • The home screen acts as a coach in guiding users to find different information about recycling

LO-FIDELITY PROTOTYPE

To prepare for usability test, I created a low-fidelity prototype that connected the user flow of learning what items can be and cannot be recycled at their home under the recycling scheme in their borough and where are the nearest recycling points.

Screenshot 2023-06-28 at 23.39.51.png

USABILITY STUDY

Parameters

Study type:

Unmoderated usability study

Location:

France, remote

Participants:

5 participants

Findings

  1. Users are confused about the functions on the home screen

  2. Users want the major features to be more obvious

  3. Users want easier access to the classification of recyclable items

Length:

20-30 minutes

MOCKUPS

Based on the insights from the usability studies, I made changes in the user flow by asking for postcode on the landing page first, and provide clear sections and labelling in the home screen for users to better understand different functions in the app.

digital wireframe .png

Before Usability Test

mockups.png

After Usability Test

Additional changes included the presentation and accessibility of different recyclable items, the placement of "call-to-action" button - "Next" for proceeding to next step

mockups2.png

Before Usability Test

mockups2.png

After Usability Test

key mockups

key mockups .png

high fidelity prototype

Screenshot 2023-06-29 at 00.46.26.png

The high-fidelity prototype presented more than one user flows, including the design changes made after the usability study. The user flows are clearer and intuitive, users could get the right information they want easily.

accessibility considerations

Clear labels for interactive elements that can be read by screen readers

Initial focus of home screen on "item to be recycled" help define the primary task or action for the users

Use icons and imagery for easier navigation and visualisation

SITEMAP

  • With the app designs completed, I started working on the design of the responsive website. I used the sitemap to guide the organisational structure of each screen's design to ensure acohesive and consistent experience across devices.

sitemap.png

Responsive designs

The designs for screen size variation included mobile, tablet, and desktop. I optimised the designs to fit specific user needs of each device and screen size.

Mobile Version

Tablet Version

Desktop Version

responsive designs.png

TAKEAWAYS

impacts

Users shared that the app made it easier for them to do recycling. One quote from peer feedback was that "ReCycleUp app helps bring care about environment so much easier".

what i learned

I learned that a lot of the existing environmental problems can be alleviated with more user-centric solutions, consolidating existing information and making resources more accessible is important for bringing positive impacts

bg.png

NEXT STEPS

  1. Conduct follow-up usability testing on the website, collect feedback to refine the design

  2. Develop features like suggestion based on location, diversified filter options

  3. Identify any additional areas of need and ideate on new features

Thank you for your time reviewing my work on ReCycleUp App and Responsive Website

bottom of page