Eco Everyday

App Concept

Overview:

How might we make people feel empowered and educated to make better and more sustainable choices?

As part of a Product Design Course, I designed an app which prompts users to complete easy and small eco-friendly tasks so they feel a sense of empowerment and accomplishment while helping the planet. The app also has an education component which informs people on sustainability topics in an easy and approachable way.

Problem Space & User Research:

I have been working towards living a more sustainable lifestyle and wanted to take all of my research and learnings from my own sustainability journey and put them into an app.

My original idea for the app was to create a design solution that helps you track and offset you carbon footprint.

However, after doing some user research, I found out that people are not interested in making drastic changes to their life in order to be more environmentally friendly, and they also are not interested in spending more money or more time to lead a more eco-friendly life. After compiling all of my user research, and framing my design challenge, I came up with these ‘How Might We’ questions.

How Might We Questions

Wireframes

User Flow and Wireframe for the App

Usability Testing: Findings and Changes

I conducted three usability tests. One remote and two in person. I gathered the following feedback based off of observation and feedback directly from the users.

  • Actions page was not distinct enough from the Home page
  • Icons on the tab bar were not clear
  • Users were not able to click the check boxes easily
  • Users did not know how to exit out of the overlays
  • Users would like to have a sort of gamified streak system

To make the navigation of tab bar more clear, I changed the Actions icon, changed the icon and text color of the active tab, and added a green bar to show which tab you are currently on.

Before and after image of the tab bar. After shows different icons and green highlight to bring emphasis to the active page

To make the prototype more usable and the check boxes easier to press, I expanded the clickable area to the whole box.

To make the closing of the overlays more clear, I changed the swipe down bar to an exit button on all the overlays.

Before app design showing the overlay and swipe barAfter app design showing new overlay with exit button

Last, I added a gamification aspect to the design. It is something I had considered early on, but decided not to implement at first to keep to app simple. However, two of the participants said something like this would motivate them to use the app more.

In the end, this was a good way of adding something different to the Home screen as well to differentiate it from the Actions screen.

Before App Design showing home screen without streaks componentAfter app design doing new gamification component which shows you how many days in a row you have done something for the planet

Final Thoughts on User Testing Outcomes

It surprised me that the main issue I had with usability testing was lack of content. Participants did not like that some buttons did not work, and that there was a lot of generic filler content.

In some ways, I think it was good that this was the biggest issue, because there were few major usability issues. However, I wonder if the lack of content was a distraction for the participants and if my feedback would have been different from more content.

High Fidelity Mockups

Since the testing prototype was only a mid-fidelity mockup, I still had some work to do on the UI. The key changes I made to the UI for the high fidelity mockup were shifting the color scheme to darker and muted greens to increase contrast, add some variation, and to make the design feel more calm.

I also changed the tab bar icons to SF symbols for consistency and familiarly.

Final app design showing 6 different screens