Ecological
2022
Overview
Ecological is a sustainable app whose goal is to make individual sustainable efforts easy for users who want to reduce their carbon footprint.
Goals
Reducing eco-related confusion and fear
Increasing sustainability education
Increasing individual sustainability practices
Research
User Interviews, Personas, Affinity Mapping
Personas
My three personas represent the “eco-anxiety” that individuals face when tackling issues. It was important to determine generational differences and priorities.
Affinity Mapping
Once I sorted through the details of interviews, I could see how the user thinks and feels. The frustrations they had in common ranged from not knowing how to recycle properly to food waste. Some of the bigger pictures issues included having “eco-guilt” and placing blame on corporations over individuals.
The Problem
How can we reduce fear and anxiety related to sustainable efforts on an individual level with an app?
Research Questions
How might we educate the public about sustainability?
How might we measure the user’s carbon footprint?
How might we make sustainability more convenient?
Interviews
When beginning research, I conducted five interviews with people who were interested in reducing their carbon footprint. The purpose of these interviews were to get the opinions on sustainability, climate change and environmental friendly lifestyles. I also wanted to establish any frustrations that they have on a daily basis when it comes to sustainability.
Flow Hierarchy
User Flows, Sketches, Wireframes
Solution Features
User can measure their carbon emissions using the Energy Usage Tracker including their electricity and miles driven.
Connect user’s electricity/utilities company to Ecological in order to measure electric use.
Organize their usage types by gas, electricity, gas and renewables.
Use the location feature to find sustainable places like e-waste facilities, recycling centers, and community gardens.
User Flows
To the right is the basic infrastructure design for the carbon footprint tracker, onboarding, and finding an energy company. This would act as the visual structure for the app.
Sketches
The sketches are the first wireframe sketches that acted as the first detailed structure for wireflows. These images established the hierarchy for each of the pages.
Wireframes
When sketching out low fidelity screens, it was important to establish how the carbon footprint tracker would fit into the app while also including education sources. Below are examples of category pages, nonprofit pages, and the different tabs for the tracker.
The first low-fidelity screens established a main hierarchy for each page of the app. Some important UI elements were carousels to organize categories, filters to sort, and location services.
Design System
Inspiration, Color, Style
I aimed to convey a subtle and natural palette with a pop of bright color for the design system. The icons needed to organic and soft shapes to establish a genuine and modest branding.
Color
I wanted to establish a calming and honest color palette while keeping organic and neutral colors. The primary colors were cool blues and greens to contrast with lighter and warmer pastels as secondary colors.
UI Elements
The UI elements uses the primary green as the general color for buttons and selections. The dark green is used when there is a hover selection.
Testing Sessions
Guerilla & User Testing
The first wireframe flow was tested remotely with the first round of wireframes. All the participants agreed that the flow wasn’t confusing, but there were some design details that needed to be changed:
* Input fields are too short
* Checkboxes are too small on the Welcome page
* How can the consumer track their shopping habits?
User Testing
I conducted two rounds of usability testing consisted of 5 participants each over video calls.
Round 1
Confusing hierarchy on the tracker page
Most users didn’t have an answer for “How many miles do you travel per year?”, so they made their best guess
* All the users said they don’t keep track of their yearly mileage
* The locate page was vague and seemed unrelated to the app
* The energy usage setup didn’t instill trust in the user and they were weary about entering personal information.
Round 2
These last changes were mostly based on visuals and appearance. Based on the feedback, I decided the app needed a new cohesive branding. I decided to begin using the sand-colored boxes for alerts and pop-up type information. This gave the app a softer and more inviting feel.
Final Solution
Learning and Conclusion
Your Footprint Tracker
The Carbon Footprint Tracker allows the user to track the miles they travel and the energy they use. Within the tracker the user can navigate between Travel and Energy to view visual respresentations of their progress.
Energy Usage
The Energy Usage page is used to track and compare the user’s energy progress. When setting up this page, the user will be directed out of the app to their own energy company so Ecological can connect their usage. The app can then organize their usage types by gas, electricity, gas and renewables.
Set Goals
Once the tracker has connected to the user’s progress, they can then set up their goals in order to reduce their carbon emissions. The goals page will allow the user to select how much power they would like to save for that month (based on percentage).
Takeaways
The app had positive feedback, although one participant mentioned that it may be aimed more toward users who can afford to make sustainable changes in their lives. This narrows down the target audience and may reduce the amount of users who would download it.
During interviews and testing, some participants didn’t see the point in an app that would reduce an individual's footprint if there are large companies contributing far more to the environment’s decline. I had to readjust the purpose of the app and reevaluate the features so the app could relate to individual users.
