Introduction
Plastic Patrol is a charity set up in 2016 that operates in over 80 countries around the world. They work in three main areas; clean up events, generating citizen science using the Plastic Patrol app to collect data on pollution, and developing partnerships with businesses, organisations and individuals to raise awareness and help implement sustainable practices.
I was brought into the project to improve the existing litter collection flow as many users reported confusion and problems using this, which affects the charity's data collection. I also revamped a lot of the existing UI as part of the project.
For this portfolio piece, I’m going to show my process in creating a new litter collection flow for the app.
Review of existing flow
There were lots of areas for improvement from this initial flow. Generally, there was a lack of consistency and branding, particularly on the buttons on the map view (image 1). It also wasn’t clear to users why they were taking a photo from this page, until much later in the flow.
The litter logging sections themselves have confusing error messaging, unintuitive auto-completion, and generally take a lot of work from the user to input all of the correct details. This was a huge problem as it was suspected that this was stopping users from using the litter logging functionality more than once, meaning important data wasn’t being gathered.
Competitor reviews
There are many competitors to Plastic Patrol in this space, and they all take a slightly different approach to the same general idea. So I decided that my next step was to carry out a competitor review to find out what kind of approaches there were, and what worked and didn't work. Below is a sample of some competitors and some notes.
This competitor uses suggested tags while showing the customer an image of the cleanup - both speed up the collection logging process.
This app also uses suggestions, however there are many options which typically slows down users ( This is a psychological concept known as Hick’s Law)
This competitor narrows down the category based on material. I liked the idea of giving users a way to narrow down the items naturally.
This also narrows down the category based on material but gives more specific choices. I felt that this could result in cognitive overload for users.
Ideation
I then began the ideation stage of the UX process - to the right are some of the sketches I drew while coming up with potential ideas.
While some of these sketches were based on ideas from the competitor reviews, I also wanted to come up with as many ideas as possible to give myself a broad range of possibilities to iterate one.
I later took the ideas I felt worked best from this initial session and fleshed them out to three different wireframes of potential solutions, which I could also share with stakeholders and user test. These wireframes will be discussed in the next section.
Initial wireframes (1)
This potential solution used intelligent auto completion to guide users through the logging process. I was attempting here to make the process easier for users, and require less typing so theoretically less time.
However, this flow takes up a lot of screen real estate and still requires a similar amount of typing so doesn’t such as much time as I’d hoped.
Initial wireframes (2)
The second potential solution here used a generated hierarchy based on suggested materials which then would suggest product types. The idea behind this was to make it very simple for the user to add each item, requiring absolutely no typing on their part.
However, there is a similar problem to the last wireframe in that it takes a lot of screen real estate, and it was also potentially limiting, as it forces users to enter details in a specific manner which may not be optimal for them.
Initial wireframes (3)
This third potential solution involves tagging an image of the cleanup, similarly to how social media person-tagging works. The strengths of this idea are that the photo tagging functionality is already familiar to social media users, which we expect many of Plastic Patrol’s users to be, as many use social sign in. It also allows the user to see the items as they’re adding them to the cleanup list, making it easier for them to know what to add.
Ultimately, this was the design we decided to move forward with for these reasons. I further fleshed out the flow and created higher-fidelity designs and used these to create a Marvel prototype.
Further wireframe development
This wireframe is a representation of the prototype I sent out to project stakeholders and used for user testing. The feedback I received included the input box blocking the image and the explanatory text being unclear, both of which I corrected in the next version.
Prototype
Below is the interactive prototype I created for testing this flow. Feel free to play around with it!
Final Design
This wireframe shows the completed solution. I moved the input fields below the image to allow the user to see the litter at all times, I also added an edit mode and feedback to the user when an item isn’t recognised.
Result
After the last round of iteration, I had finally created a design that both the stakeholders and I were happy with. The next stage was communicating these designs with the developers for implementation, which I did through creating issues on Github and providing feedback to work in progress. The app containing the new behaviour I designed is now live on both Apple's App Store and the Google Play Store and users are reporting positive feedback.
I learnt some important lessons about remote working during this process, particularly in making my designs and prototypes completely self-explanatory, which avoids a lot of unnecessary back and forth later on.
