H.Y.P.E.: A UX Case Study
Helping You Protect Earth
The Problem:
Every minute, the equivalent of one garbage truck of plastic is dumped into our oceans. Plastic is toxic to ocean life, and human life too.
…
CO2 concentration in the atmosphere has reached 413 parts per million. This is the highest concentration in at least 800,000 years. CO2 and other greenhouse gases are causing global climate change which, if not stopped (and hopefully reversed), will have catastrophic effects for all life on Earth.
For every gallon of gas (which weighs 6.3 lbs) burned, 20 pounds of CO2 are emitted into the atmosphere. This seems impossible, but it is because of the reaction created by engine combustion which combines the atomic weights of Carbon and Oxygen into CO2. You know, science.
So what can be done?
Have you ever taken a carbon-footprint quiz?
Just about everyone (except those who willfully deny science) knows we have a huge problem with climate change and wants to see the world retain its current beauty and livability. We all know we have room to improve but for most people the problem seems so huge that we don’t know where to start. If you’ve ever taken an online carbon-footprint quiz, you’ve likely been shocked at how large your carbon-footprint is.
- How does one person make difficult behavioral changes?
- How does a society as a whole make permanent and difficult behavioral changes?
We thought about finding ways to tap into the habit forming part of people’s psyche and help them form habits that, if adopted on a large scale, could actually make a difference in our planet’s health.
The Challenge:
Create an app that helps people track and reduce their carbon footprint in an agile/scrum work environment with a very accelerated timetable. On this project, we dealt with some difficult constraints: Our team needed to build an entire working app in the space of four weeks alongside two iOS developers. This would be a challenge that would stretch all of our team members and require lots of communication and compromise.
Getting Started
With such a broad subject and huge problem, we knew we would have to focus on more attainable goals for our user. We approached this challenge using the Design Thinking method.
Empathize
Research
We started off by creating a survey and interview questions, conducting interviews with regular people and experts, and doing lots of research on the subject.
Here are some of our initial assumptions about reducing a carbon footprint:
- It is expensive AF to ‘go green’. See solar panels, Teslas, or that $9 bottle of responsibly sourced water
- ‘Going green’ requires a huge and difficult lifestyle change
- One person can’t make any difference
- You have to go vegan and full-on hippie to reduce your footprint
- Even if you recycle, most still goes to the landfill
We used these assumptions to help shape some of our interview and survey questions. The idea was to have our product prove to our user, or better yet to have them prove it to themselves, that these assumptions were just not true.
Expert Interviews
The experts who we interviewed gave us some good advice on where to start as well. They told us that both globally and locally, emissions from cars and industry make the air more toxic and add dangerous amounts of greenhouse gases. They recommended that people reduce how much they drive, use public transit, carpool, walk, or bike to help the air quality and CO2/climate change problem.
Our expert interviews also focused heavily on recycling. They spoke quite a bit about the need to ‘properly’ recycle and about the kinds of things that people think are recyclable and in fact are not.
User Pain Points
Our survey and interviews of regular people was very interesting. Some of the results were pretty surprising:
- A huge majority of our respondents believe recycling is important. 60% said they recycle ‘all the time’ or ‘as much as I can’, and another 32% recognize they should recycle but don’t do it enough.
- 57% either didn’t know that there were different types of plastic or knew that different types of plastic existed but didn’t know how to recycle them.
- Most respondents said factors such as price, brand, & convenience were the biggest determining factors over the recyclability or eco-friendliness of a product. Only 10% said eco-friendliness was the determining factor in choosing what to buy.
- We also heard from multiple respondents and interviewees that they felt judged about their decisions that aren’t eco-friendly.
- Finally, we learned that most people want to make a change, but feel like it is too difficult and the problem is too big. One respondent said:
It was from this quote that we found our name, H.Y.P.E., which stands for Helping You Protect Earth. We knew that one of the best ways to help people change is, to borrow a phrase, to put up a mirror to a society so each person can hold themselves accountable.
Define:
Based on our survey and interview respondents, we wanted to create a persona to help us empathize more specifically with our user and to create and directly address her goals.
Issues that we needed to address:
- Motivation: The need for a ‘Hype-man’. Yeeeaahhhh boiiiiiiii!
- Consistency/Habit forming: Behavioral change takes time because habits are hard to form and break. Gamification, points system, and daily challenges can make the user come back regularly, hopefully daily.
- Positive Reinforcement: Users feel shamed by peers and by most of what they read about their choices and their current carbon footprint.
- ‘Eco-Literacy’: Our research showed us that most people didn’t feel like they knew enough about the subject to be able to make a change. We needed to help the user (and hopefully their family) learn how to actually reduce their carbon footprint through daily and weekly challenges, and an article feed.
Ideate:
In order to address the issues we identified in our research, we started brainstorming tasks that would help our user with the specific problems related to the multiple areas in which a person can make changes to their carbon footprint.
User Story Map
Here we brainstormed features, resources, and tasks to help our persona accomplish her goals. We re-arranged and trimmed these categories as we developed our ideas and spoke with our developers about feasibility:
Changes to our Minimum Viable Product:
- We had initially included a section for diet. This would have included “Log healthy choice” in which a user could log their earth conscious choices and earn points, scan product labels for harmful ingredients/agricultural practices, and create a kind of preferred products list for shopping. This was one of the first casualties of the feasibility monster. Our daily stand-ups with our developers gave us a pretty good idea that adding a QR code scanner that could pull down info from an API (or multiple APIs) with all of that information would be impossible in our time frame. We also realized that a diet tracking feature would make us more like a diet/food tracking app, and this would not be feasible in our time frame.
- Next up on the feasibility chopping block were our social features. Once again, our very limited timeframe gave our developers very little time to develop features to include searching people, adding friends, blocking users, etc… so we decided it would be something to add in later versions of the app.
- Finally, because of the subtraction of our social features we decided to remove the feature that allowed users to create their own weekly challenges. These would have no context without being part of a larger social interaction.
After some trimming and moving, our site map started to look like this:
Our own trimming and re-organizing could only get us so far, we had been looking at this problem too much. We needed fresh perspectives.
Prototype:
These initial wireframes included some collection views with circular icons, these were another victim of feasibility and were scrapped in favor of table views.
We played with several configurations of the navigation bar as well.
App Navigation:
The navigation bar became a big focus for us because it would be the main way users would find info. On our original Sketch wireframes of our homepage with the navigation bar we had initially included ‘Recycle’ as part of the ‘Habit Tracker’, but decided to separate it out as it was one of the highest priorities for our user.
Wireframe Prototype:
Our first working prototype of our wireframes gave us great feedback. We found that our testers were confused by the category name “Habit Tracker” as it included some tracking/logging, but also had our Recycle section which wasn’t really a tracker of anything. This was when we decided to bring ‘Recycle’ into it’s own section of the navigation bar and come up with a better category name for ‘Habit Tracker’. After some brainstorming we came up with ‘My Impact’. This was easier for our testers to understand and they were able to find tasks such as entering a water bill or logging driving easier. The phrase, “My Impact”, also made it easier to personalize a user’s connection to the app. As I said earlier, we wanted to help users track these kinds of things so they would know where to start, but it only works if you hold yourself accountable.
Initial Transportation tracker:
This was our first version of our transportation log. It measured the number of minutes a person spent driving. We had initially thought we would track miles driven, but realized that wouldn’t account for the time that people idle at traffic lights or sit in traffic all the while polluting. Tracking minutes would cover that.
Updated Transportation Tracker:
After more testing and discussion, we decided the best way to track transportation would be to track how often a person re-fueled their car, how long each tank of gas lasted, and using the amount of gas filled we can calculate how much CO2 was emitted from each gas tank.
Style Guide
After several iterations of our wireframe prototype, we moved on to our High-Fidelity designs. We started by establishing a style guide:
Test:
With our accelerated schedule, we had to build our High-Fidelity designs and test as we went. I loved having people test our hi-fi prototype, even though it wasn’t the final working product, it was so fun putting my work in someone else’s hands. Here are some examples of our designs:
Testing:
Our tests of the Hi-Fidelity prototype were really helpful too. We gave our users instructions to first look around the homepage and give us first impressions. We then gave our users tasks to accomplish:
- Login to the app
- Add a profile photo
- Find an article and ‘like’ it
- Accept a challenge
- Find the transportation log and choose a mode of transportation
- Enter an energy bill
- Search for a recycling center
Some of these tasks were really easy for the first testers so we didn’t have everyone do them. We found that the changes we made previously to the navigation bar (adding recycling and changing Habit Tracker to My Impact) made the tasks that required going through those categories much easier and faster.
We had minor confusion with testers trying to click ‘Accept’ on the weekly challenges screen, this segued to the actual challenge with the description and another ‘Accept’ button. Users found this awkward but they were able to accomplish the task pretty quickly.
Several testers suggested that the points system would have much more pull if there were a social aspect that allowed you to compare/compete with friends. I’m thinking that’s going to be a must in any future versions.
Testers generally reacted positively to our feedback screens. This was our Hype Man speaking:
Our testers saw slightly different iterations of our wireframe and Hi-Fidelity prototypes because we were able to make changes and update in real time. This process helped us streamline our app and gave us lots of ideas for future versions!
Hi-Fidelity Prototype
Conclusion:
Going forward, this project has SO MANY ways to expand and improve. For example:
- I would include lists of eco-friendly brands that engage in non-polluting agriculture, water-wise manufacturing, carbon-neutral production etc... This would help our user have a good guide on which brands they could trust to provide eco-friendly products.
- I would partner with these brands by advertising for them and in return these brands would offer discounts on their products to users of the app, i.e. you complete a challenge and get a 20% discount on Organic Valley Almond Milk. I would even link to online shopping for these brands. This would provide benefits in the form of discounts for the user, and added advertising and webpage traffic for the brands.
- I would also include a social feature, where users could compare scores, see a leaderboard etc…This was suggested by more than one tester and was one of our original ideas to help motivate people to use the app.
We wanted our users to accomplish the goals of enacting behavioral changes to reduce their carbon footprint, learn more about how and why to make those changes, and have a tool that provides positive reinforcement to help them stay motivated. Our energy, water, and transportation trackers provide common sense tools to help a user know how big their impact is and our daily and weekly challenges offer real life ways to reduce that impact. Our news feed and challenges serve to educate the user on the subject. Finally, our positive feedback provides the hype-man we all need to help us stay motivated.
Our user and indeed the whole world needs every possible tool available to tackle our environmental crisis. H.Y.P.E might not fix the problem overnight but it can absolutely be a very helpful tool to help users make long term habitual changes. So let’s do this!
