1PlasticLife.org

Responsive Web Design

Project Overview

1PlasticLife is a Nonprofit organization that believes one piece of plastic can impact one person’s life in many ways. Their mission is to impact people’ s lives as much as possible by teaching them about plastic pollution problems and how they can be solved by changing their habits by reducing, reusing, and recycling.

1PlasticLife is the world’s first leading environmental organization in Los Angeles working in low income communities to collect, wash, shred recycled plastic waste to create new durable products that build a path of sustainability and human responsibility.

Project Objective

The objective for this project is to redesign and create a responsive site that allows users to create a custom product fully online and be able to track their product until it is completed, shipped and delivered.

I began my research by doing a competitive analysis on non-profit organizations that have a similar mission and process as 1PlasticLife.

User Interviews

User Persona

User Research

Task Flow

In completing my test plan and interviews I felt that 1PlasticLife needed a detailed process that users' can access online to create a custom product with recycled plastic. The following task flow is that process that my target user Laurie would go through.

Once I determined the process Laurie would follow in creating a product, I began sketching the wireframes for that process.

Wireframes

Sketches

Once I completed my comparison analysis of the three non-profit organizations, I conducted 4 in-person interviews on participants who do some sort of recycling in their daily lives. After completing my empathy research I was able to better understand who my target user was so I was able to create a user persona that exemplifies what kind of person would utilize this process and purchase custom products out of recycled plastic.

The target user for this website is a person who cares about the environment and wants to make a difference any way they can. With the abundance of plastic that is being thrown out in our environment Laurie is helping reuse that plastic by creating new products that she can use in her daily life.

The initial CTA on the custom products page will launch Typeform screens that lead you through every step needed to create your custom product and receive a quote within an allotted timeframe.

Lo-Fidelity wireframes

I conducted 5 in-person usability tests starting on the Custom Products page. Each user browsed the screen to get an understanding of the end goal, which was to get a quote for their custom product. Once they began the process of creating a product they went through a series of Typeform screens.
‍
I initially created each screen to be simple and with minimal instructions but all my participants were confused on two screens: The screen where they were asked to enter the measurements of the product they were creating, and again on the file upload screen to submit a CAD design or a picture of their design.

After completing all usability tests I had to make changes to those two screens. On the measurement screen I added form boxes delineating the specific measurements that were needed. On the file upload screen I added what file formats were needed and a short description of a CAD file.

Usability Testing

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

The following video shows the user flow of my target user Laurie's process of creating a custom product, going through each step within each Typeform page, and ending on the Dashboard page. The Dashboard shows the status of the current project she is starting as well as any previous products she has submitted.

Prototype

‍

Affinity Map

I initially created each screen to be simple and with minimal instructions, but all my participants shared the same challenges on two screens - The screen where they were asked to enter the measurements of the product they were creating, and again on the file upload screen to submit a CAD design or a picture of their design.

After completing all usability tests I made changes to two of the Typeform screens.

The measurement screen - form field boxes were added delineating the specific measurements that were needed.
The file upload screen - The file formats accepted were added and a short description of a CAD file so that users understand they don't need to have that particular file to submit their creation.

Hi-Fidelity Mockups

After completing my usability testing and determining the user patterns and challenges, I made quite a few iterations to the main Custom Product screen as well as many of the Typeform screens. These changes made the user flow much more intuitive and easy to understand.

Takeaway

I chose to redesign this non-profit organization's site because I am passionate about their mission. I feel giving individuals and businesses a very convenient way to create and purchase products made from recycled materials is key in getting more people to utilize this service.

As easy as I thought the process would be to incorporate in an online format, my testing showed that my users needed more detail and specific information to be able to understand, not just how to create a custom product online, but to also understand the reason they should do it over creating a custom product from virgin materials and via normal retail services.

I enjoyed working on this project especially on refreshing their brand and creating the Typeform pages. It made me feel good about helping 1plasticlife.org in getting more users to not only recycle but to go further and purchase products from recycled materials.