Plastics For Change | UW Blueprint

Joslyn Tsui
Jan 14 · 10 min read

Plastics For Change is one of the largest projects that PFC is one of the largest projects that UW Blueprint has ever taken on. It began in May 2018 and concluded in March 2019. I was sole product designer on the Plastics For Change (aka PFC) team for its entire duration.


Background

There is a lot of plastic pollution in India; 26,000 tonnes of plastic waste are produced everyday. This waste can be reduced through more recycling, which can occur with better incentives. Additionally, there are 1.5 million people stuck in the poverty cycle who become waste-pickers, collecting plastic bottles. However, that is not a stable source of income as the price of plastic can vary by up to 50% from day to day. The volatility can be traced to the unstable demand for recycled plastics. How is demand for recycled plastics created? The demand comes from manufacturers and brands who use recycled plastics in their product production. However, getting brands to use recycled plastic is difficult without sufficient data on the amount and types of plastics being recycled over time, and who exactly is picking these plastics and from where. Companies who want to use recycled plastics for ethical reasons want to be sure that throughout the entire cycle of recycling plastic, that ethical practices are being enforced. Currently, those ethical practices cannot be guaranteed, as many parts of the cycle are untracked.


The Problem

What the Canadian-based social enterprise Plastics For Change does is that they work together with brands like the Body Shop and encourages them to switch their plastic supply to a recycled one, thus driving the demand for recycled plastic and stabilizing the price of recycled plastic for every stakeholder in the cycle. They also have a web application set up so that each stakeholder along the recycled plastics chain can log each transaction to guarantee ethical practices. The problem is: many of the users are illiterate or semi-literate. The web app requires a lot of information to be logged onto the platform and it contains too many words for the illiterate users. Additionally, most users are accessing the platform on android smartphones but the web app isn’t optimized for mobile at all.


Application

UW Blueprint was tasked with creating a progressive web app platform from scratch, improving the previously existing platform. As the product designer, I was in charge of making the web app usable for the illiterate users, mobile friendly, and improve the flow of the information.


Approach

The first thing that I had to do scope out the project and fully understand the recycled plastic cycle, and understand who my users were. There would be at least three different stakeholders on the platform, with multiple overlaps. To put the least, it was a massive project with tons of moving parts. I also took a look at PFC’s pre-existing platform to get a feel for what they needed and to understand what was and wasn’t working.

Previous platform on desktop and mobile view

Due to how much information was being logged onto the platform and time constraints, I dove right into information architecture. I looked at their Podio platform to information and asked questions to PFC during our weekly meetings. I used InVision to do the sketches so that it can be shared easily with PFC as they are located in India as well as the rest of my team.

First round of wireframes
Final round of wireframes

Some Setbacks

As we got further along in the project, our project lead, Guatam, and I realized that the scope of the project was much larger than we initially thought. We also didn’t find out that some of the users of one particular stakeholder out of the three were illiterate. This was a huge learning curve for me as even though I knew that the design process starts with understanding the users and creating user persons and user journey maps, that in a real-life scenario that I had overlooked a very important step due to external circumstances (time constraint, scope of project, location, etc.). Due to the consequences of this mistake, it will be one that I never make again.

I went back and researched the users the best I could, by coming up with a list of questions to ask PFC as I was unable to go interview the users in India myself. From that, I gained a much better understanding of the users, created a user person and user journey map, and was able to alter my designs accordingly and move forward.

User persona
User flow

At this point, we also decided to reduce the scope of the project due to time constraints. The new scope was focused entirely on the primary segregator stakeholder, where many of the users are illiterate to some degree, with emphasis on usability.


Exploration

I relied heavily on icons to communicate with the users. Through user research, I found that most users can read and understand simple English words (ex. name, weight, buy, etc.) I chose to include labels along with the icons as a supplement for the users that were literate.

The information gathered from user research led to the first iteration of designs that were then put to usability testing. Unfortunately, I was unable to conduct the tests myself as the users are in India. I wrote up a script documenting the test and sent it off to PFC for them to conduct. I also met with the workers from PFC (remotely) that would be conducting the tests and demonstrated how it should be done. PFC then conducted the tests and documented what the users said as well as recorded each one so that I could see where users struggled with the app.

Meanwhile, I got creative here in Waterloo to try and stimulate a similar environment so that I could do some tests as well. I translated the app into French and ran the same usability test on my peers. I chose French because most students who did schooling in Canada had to have taken a little bit of French, making their literacy level in French to be similar to the users’ proficiency in English.

Usability test findings and final designs:

  • From both real and stimulated tests: users would sometimes forget what page they were on. Result: I also added icons to the headers to help users keep track of where they were. I also added icons to the table row headers for clarification.
  • From the real tests: users didn’t like scrolling within the tables. Result: I added up and down arrows that they can use to view more rows.
  • From the real tests: having two tables on one page was sometimes confusing. Result: I used tabs to separate the two different transaction tables.
  • From the real tests: users don’t like typing into the input fields. Result: I added drop downs wherever I could so that users can just scroll to find.
  • From both real and stimulated tests: users were often confused by the “x” button (meant to be cancel) in the top right as they expect it to just close the form rather than cancelling it. Result: I moved the button down to the bottom of the form and added a label for clarification.
  • From both real and stimulated tests: most users understood all the icons!

Some design decisions explained:

  1. I chose to follow Google material design for two reasons. The first reason is because the devices that our users are primarily using are Android smart phones. The second reason is based on the developing end; we found a React folder that has all the assets, making it easy for the devs to implement the designs in a “drag-and-drop” style.
  2. While I followed PFC’s brand guidelines, I also used colour to help make it more intuitive for users. Red for cancel buttons, and green for confirmation buttons. Being aware of cultural differences, I affirmed this decision by doing quick research on traffic lights in India, which like many other places, also use red to indicate stop and green to go. I also grey out areas that the user isn’t currently on to help prevent the user from getting lost or confused.
  3. I worked closely with the developers to use the behaviour of the web app itself to our advantage. For text fields that required a numeric input, a numpad would pop up rather than a regular keyboard as a hint to the user to indicate what type of information should be entered.
  4. As mentioned earlier, I moved the position of the cancel because users were confused by its functionality as an “x” in the top right corner is usually associated with “close.” I moved the save button to be inline with the cancel button and moved them both further up to take into account of how the user holds the phone. Where the save button was placed previously (in the bottom left corner) was rather hard to reach.
  5. I made sure to make the text field boxes and buttons look distinct from one another so that users don’t get confused. Buttons are round, while text fields are rectangular (but with rounded edges to keep consistency style wise).

The Challenges

This project definitely had many, many challenges, but I’m thankful for them as they helped me grow so much as a designer. There were some big learning curves that I had to go through but I came out with more experience than I could ever get from school projects or even hackathons.

One of the biggest challenges is communication. PFC is a Canadian organization, but they’re based in India. So accounting for time zones and Blueprint and PFC’s busy schedule, we are only able to meet with PFC once a week for about an hour (at the bright and lovely hour of 7 am EST). We also have a shared Slack with them, but response rate is about 24 hours (due to time zones, schedules, etc.). Luckily, the CEO and COO of PFC speak English so there is no language barrier.

However, there is a language barrier between us and our users. Our primary users don’t speak English and are also illiterate. They’re located in India, so the only way we can communicate with them is through PFC. That makes the space incredibly difficult to design in, as I can’t interview or conduct tests with the users myself. All the information that I have about the users are from PFC, so it’s like playing a game of telephone with the other side of the world. As mentioned early, the best that we could do regarding user testing is training PFC employees to do them and film each test.

Designing for illiteracy is challenging but it also sparked my interest in designing for accessibility. I’ve been looking into resources that could inspire my designs, such as articles and blogs. I’ve also enlisted the help of the rest of the Blueprint design team (shout out to the winter2019 design team for all your feedback and suggestions, especially design lead Lichen for all your support) and BET350/Stratford Campus’ UX professor, Karin Schmidlin (thank you for taking the time to discuss with me!).


What have I learned so far?

I learned a lot in the few months that I’ve been on Blueprint. I got to work with real clients and real users. I learned how to walk in the shoes of my users and how some design choices that would normally work for me, might not work for them. I learned how to work with developers and how to communicate my designs to others. I learned how to apply what I learn in class to the real world. I learned how to share my designs, accept feedback, and iterate. I learned what it means to be a designer and the real world impact that my designs can make. I learned how designing for accessibility can benefit everyone and not just those who need it.

Even though I’ve learned a lot, there is definitely still room for improvement. I know that I can still deepen my understanding in the areas listed above, but for now, it’s a pretty good start.

As the project was wrapped up, I felt good about the progress that was made. Ideally, the setbacks that I ran into in the middle of the project could have been avoided, but I did learn a tremendous amount from those mistakes. I do wish that I had another designer that I worked on the project with or a mentor to guide me, but what matters is that I still managed to figure it out and was resourceful.

It’s definitely very challenging to put myself in the shoes of my users and really design from their perspective, especially when I am unable to interview and ask the users questions myself. However, it was really rewarding to hear what real, end users had to say about the design of the product and how some of my design choices were found to be helpful and intuitive to them. And I love the fact that I get to do what I’m passionate about for something that matters :)

You can also learn more about the [Spring 2017] team and follow UW Blueprint’s Medium here.