Engaging the Public about Pipeline Incidents
Problem
How can we help people understand their plastic usage?
Plastic usage is becoming an overwhelming collective problem that has long-lasting effects on the environment. We think that by increasing awareness of this problem and how people contribute to this problem will help inspire and educate the public on reducing their usage.
Solution
We created an app that displays the average plastic footprints of single and multiple family homes in Vancouver. This app allows the user to track their plastic usage in various categories to see their impact and compare their footprint to Vancouver’s footprint visually.
Project Details
Role
For
Date
Type
URL
UX Designer, Data Analyst, Programmer
Sept. 12, 2020
Data Visualization, Desktop Application, Hackathon
https://github.com/Vancouver-Datajam/project_4https://apps2.cer-rec.gc.ca/pipeline-incidents/
Design and Research
We created an app that displays the average plastic footprints of single and multiple family homes in Vancouver. This app allows the user to track their plastic usage in various categories to see their impact and compare their footprint to Vancouver’s footprint visually.
1.
Track personal plastic footprint
2.
Be able to see their data somehow
3.
See Plastic Footprint of Vancouver families
4.
Compare personal plastic footprint with other families.
With the requirements, the team thought of the flow the user would have with the application. The user flow of our application is in two parts. The user can track their plastic footprint by entering weights for each plastic waste they generated over the day. Once they have submitted their entry of plastic waste, it will be displayed visually. The user will also have the ability to compare their footprint with other families.
Since we were using python to analyze the data and display it, I needed to research the visual components’ technological feasibility before diving into the design. The Dash catalogue of applications helped educate me on what was possible. From there, I worked with another teammate to sketch out a few potential layouts for our application. We came up with three iterations.
We agreed on the last sketch. To ensure everyone on the team had a good sense of the user experience of the application, I crafted more screens to describe the flow better.
I wanted to user test the application’s user flow and interaction, so I created more application screens in Figma and gathered a few friends to get feedback.
|
"I found it confusing to see the data upfront, but it made sense after I added my own plastic data,"
|
"It's disorienting to see the elements jump up and down when I'm selecting the buttons,"
|
"What's a single family, and what's a multi-family?"
|
"I'm not sure if it's a good or bad thing that I have less plastic,"
|
"It would be great to see how I could reduce my waste,"
From the user feedback, I iterated on the design such that the plastic waste inputs would be text fields instead of selection buttons. I thought this change would help increase the efficiency of tracking waste while decreasing the user’s disorientation. We also changed the wording on the buttons to make it more clear as to what view the person was on.
Data Analysis
We needed to figure out what graphs would be best to display for the user based on the data we have collected from Metro Vancouver. Using Plotly in Jupyter Notebook, I created a series of graphs to determine the best way to represent the data.
In theory, representing the data as a line graph would have been interesting to follow, however, in practice with the real data we see that the graph is incomprehensible.
I tried a classic bar chart next and realized that each day had multiple entries with the same types of plastic, which creates a bit of visual noise. At a glance, it is easy to tell which plastic waste is generated the most.
The scatterplot graph felt like a more disconnected version of the bar chart, but with less visibility and ease of understanding provided.
We ended up selecting a lovely box-plot graph that was created by another teammate. The box plot graph shows the total minimum and maximum value of each type of plastic waste created by both types of families, while having the ability to plot the person’s data to compare. One concern we have regarding this graph would be the level of understanding the user will have when viewing it.
Prototype Implementation
Due to the nature of a datajam, the team needed to focus on developing the application’s core functionality to display as a proof of concept. This is why the prototype is lacking usability features we discussed in the design. However, the prototype’s overall goal was accomplished because it conveys the general user flow to the audience.
Reflection and Takeaways
Overall the datajam was a fantastic experience. We were able to design and implement a working prototype to present our ideas to the judges. The datajam re-enforced the idea of the iterative development cycle. Once design version 1 was completed, the developers started building out the layout while I worked on validating the design assumptions. After new design changes were thought out, the team prioritized which design changes to implement and which ones would wait for the next version.
Strong team communication was vital for keeping everyone on the same page in terms of development and design. My communication skills increased through my participation in this datajam. I became more confident in communicating new design changes to the team.
The prototype found on GitHub is version 1. If we had more time, it would be great to continue developing some additional features to increase usability. For example, highlighting which view the user is on, adding text fields for the inputs, and a way to edit or delete the user’s data entry would be great features to implement for a version 2.
If you would like to chat more on what I learned throughout this process, connect with me through email at [email protected].