top of page

UX Portfolio

E-Cycle

Website and Application to Improve Recycling Practices

Case Study: E-Cycle Responsive Interface Design. Website to Improve Recycling Practices.

​

Intro/Overview

Environmental issues are something we hear about all the time. How can we, as individuals, help our planet?

Most people, especially in large cities, are involved in recycling. Every day we have to make choices: “Which basket should I put this or that item in?”, “Where to recycle my old computer”, “Does anyone want my old Ikea table?”. And almost everything can be recycled, reused, repurposed, we just need to be better connected to recycling centers and have a better understanding of recycling methods and standards.

Roles/Responsibilities

The project was carried out by a team of three people throughout the duration of the assignment.

Problem Space/Area

The team was instructed to focus their research on the topic of the environment. This group researched and created a responsive web product that will solve the user's problem in the research area.

Users/Audience

Our product is aimed at people who are interested in recycling and want to make this process more convenient.

Scope and Constraints

The team conducted a multi-stage user study to get data on the pain points and barriers people face in this area. The first step to identifying the best candidates for user interviews is through a screening survey. We then interviewed users to find out what they think of our theme. Synthesized affinity map information from user interviews helped create a personality and journey map, which then helped us develop a responsive interface design.

The entire duration of the project was eleven days.

Process

• Screener Survey

The screening survey was the first step in our research process. This helped identify contributors who represent a real audience and provide the right information for the project.

The survey was completed by 18 participants in Google Forms. The questions were designed to understand what items users recycle, how often, and what methods they use.

The study data showed that all participants recycle the waste each week (~67%). More than half answered that they are well versed in general issues, but do not know the specifics. 61% have never taken items to a recycling center. But 100% recycle plastic and use recycling bins.

• User Interviews

During our screening survey, five respondents were selected for contact. We carefully created a discussion guide and interviewed via zoom.

During the interview, we gain a deeper understanding of user practices regarding recycling. This information was collected and used for the next steps in developing the affinity map.

• Research Synthesis

The purpose of synthesis research is to filter the main statements of all participants and understand their main pain points that we need to solve in the project.

We grouped the main ideas and statements extracted from user interviews into groups. These groups of I-statements were used for our affinity map (see below). The next step was to define insights:

  • Users care about the environment and want to get involved.

  • Users have some understanding about recycling, but want to be more informed.

  • People want to know that their recycling effort doesn’t go to waste.

  • If it’s not convenient to recycle, people will throw away their waste.

  • People are “recycling” through different methods.

  • People are recycling many types of waste.

E1.png

• Persona and Journey Map

Before moving on to work on the design of the actual product, we created the primary persona Jessica. This helped us stay on track throughout the project. Keeping Jessica in mind has helped us a lot to remember who we are designing for.

Mapping a typical day our persona lives while she plans to recycle, identified pain points she encounters along the way in order to do a good deed. The journey map defines all aspects of the process where things are less worked out and need attention. These aspects were the ones we considered in our future design.

E2.png

• Problem Statement

Persona Jessica is a good citizen who highly concerns about environmental issues. She is looking the ways to make her life easier on a day when she want to recycle.

How might we help Jessica learn and adapt best practices for recycling at an individual level for a sustainable future?

• Design

The starting point of our design was two charts, the Feature Prioritization Matrix and the MuShCoWo Map, to prioritize the futures in our new website. And what are the minimum requirements we can develop in our design to launch this brand new website.

We host two rounds of design studios to exchange ideas across the project between team members. We had to use a series of sketches for quick communication. This process allowed us to create a clear sequence of wireframes and flows that we used for med-fidelity in Figma.

Link for Mid-Fi Mobile Wed Design: https://www.figma.com/proto/Xph09vFcpLv30QLxX5U65Y/Katerina_Alex_Dar_P3_Mid-Fidelity-Mobile-Wireframes?page-id=0%3A1&node-id=2%3A2&viewport=398%2C470%2C0.19&scaling=scale-down&starting-point-node-id=2%3A2&show-proto-sidebar=1

E3_edited.png
E4.png

• Prototype

The design process was accompanied by the creation of a clickable hi-fi mobile web design and a desktop version of the same web design. Some changes were made after usability testing on a mid-fi prototype to improve the user experience of the e-cycle website.

We made our prototypes for iPhone SE and 1200px desktop to accommodate all users with our responsive interface design. To create a consistent and clear design, we used a branding kit that served as a library of elements such as symbols, logos, colors, typography, button styles, etc.

Please see links below:

Clickable High Fidelity Mobile Web Prototype

High Fidelity Desktop Web Prototype

E5.png
E6.png
E7.png

• Usability Testing

For each of two usability tests we asked five people to test our new web site E-cycle for mobile device. People were given three tasks to complete and evaluate easiness of using it.

Task #1

You want to donate your used clothes to charity in your area. Use E-Cycle website on your phone to donate clothes.

Task #2

You also want to find a sustainable way to recycle your old computer you haven’t used for years.

Task #3

After you considered all the items you want to recycle, allow website to generate your trip.

Some results were improved compared to first round:

  • Time on task was improved by 11/53/20 seconds relatively to the task number

  • Easiness rating did increased by 0.5/0.8/1 point out of five

Feedback from usability test proposed next steps:

  • Increase size of checkboxes at “Before you go” pop-up windows.

  • Drop down menu “Add more items” should be further designed to increase visibility of the message and/or functionality of the menu, consider routing back to menu page

  • Develop wire flow systems that allow redirection to different pages. Ex. main menu

  • Create responsive map.

• Next Steps

Many of our testers and people from whom we received feedback were very intrigued by the idea of our website and admitted that they would like to use something similar for themselves. Users highly appreciated our design, concept, as well as the usability of the site.

The next steps to consider are to address the deficiencies found after conducting usability testing. Also to improve the design qualities of the site. And more time to make the prototype fully functional for other tasks and explore the research topic more.

bottom of page