Project Summary:

Alter Eco is an app concept designed to make individual action on climate change meaningful and approachable by providing tools and resources to users at all levels of knowledge and activism.

Duration:

April 2022 - November 2022

Role:

UX Researcher, UX/UI Designer

Problem Statement

Individuals are bombarded with mixed messages on their responsibility and efficacy in mitigating climate change. This often leads to feelings of confusion, hopelessness, and frustration for those who wish to be more sustainable. In turn, these feelings cause individuals to give up on their sustainability efforts which results in a large loss of potential mitigation effects overall, affecting the global community.

Secondary Research Insights:

  • Tools offered for individual climate action are either outdated or overly simplistic

  • Often, apps only look to address one tiny portion of sustainability without context to other areas

  • No tools are widely used or largely popular

  • People are more likely to be interested in climate action if they are one or more of the following:

    • Lean politically liberal

    • Women

    • Non-white

    • Younger generations

    • Comfortable socio-economic standing

Research Methods:

  • Review of published research

  • Competitor Analysis

  • Heuristic Analysis

User Interviews & Synthesis

In order to design a well-informed and desirable product, I completed five semi-structured interviews with potential users whom I selected using a screening survey. These interviews followed an interview guide I created.

After completing my interviews, I began to code the transcripts and complete a thematic analysis. Following this process, I moved on to empathy maps and personas to create a better understanding of my users.

Key Findings

Throughout the interview process, I found that there were a number of very clear themes, particularly in motivations and limitations. While analyzing transcripts I grouped my findings into four big categories:

1. Motivations

2. Limitations

3. Desires

4. Areas of Adjustment*

*Areas of adjustment refer to various spaces in the participants’ lives they felt they would be able to take action to reduce their climate impacts

I determined that my MVP would need to accomplish three tasks to fulfill user needs:

  1. Education
    - On various aspects of climate change & activism

  2. Community
    - Find & connect with others to work together on mitigation

  3. Quantification
    - Understand the difference each user makes

MVP & User Flows

Having an MVP, I began to organize the paths my users would follow to perform the functions of the app into user flows. I decided around this point to focus on a phone app. I knew that most users were interested in a tool that would be available easily and at the touch of their fingers.

Sketching to Wireframes

These are some of my early sketches and accompanying wireframes. These wireframes eventually became the screens I used in my first round of user testing and served as my starting point when designing Alter Eco.

This testing was conducted online via maze.co and Figma prototyping. I wanted to test the ease at which users are able to maneuver through the app without much instruction. In this exercise, I hoped to discover stress points in the initial layout and design. I had five testers complete this step.


I chose three tasks along red routes in the app for users to attempt to complete:

  1. Find and view another user on the app and add them as a connection

  2. Save a course topic for later

  3. Check your progress on the goals set on your profile

Guerilla Testing

Findings and Insights

  • Some navigational aspects were too complex leading to abandoned tasks

  • Buttons need to be large, visible, and very clickable*

  • Users often expected to have several path options to reach the same result

  • Users want to follow common patterns seen across different apps and have obvious pathways to common actions

*some issues of click-ability were due to the nature of the prototype

Design Guide & Style

Mood Board

As part of my process in designing Alter Eco, I created a mood board to help me visualize what I wanted the app to feel like. Using that as a base, I picked my colors and imagery based on how well they conveyed the brand's personality and attributes.

Color Palette

After consideration, I decided a monochromatic color palette with high-contrast accent colors would both fit the personality of Alter Eco and allow for very clear, appealing UI.

Typography

I wanted the typography of the app to carry weight and convey the seriousness of the issues Alter Eco seeks to address. With this, I knew I wanted a plain, strong font for headings and the logo. I picked a body text that would feel welcoming and approachable for the majority of text on the app.

High Fidelity Designs & Usability Testing

High Fidelity - First Iteration

Design guide in hand, I began putting together my first renditions of my high-fidelity mock-ups. I built these out on the smallest available screen size and made sure they would be scalable by employing Figma’s auto-layout and component features and utilizing atomic design concepts. The end product was highly-adjustable and scalable screen mock-ups that could easily be placed on different screen sizes while maintaining their components’ correct spacing, margins, and gutters.

Usability Testing Round 1

Test Results

  1. Many mistook “Log In” for “Sign Up”

  2. Testers expressed a desire to go back and correct answers in sign up flow

  3. Navigating the app took some figuring out due to unfamiliar iconography

  4. Menu locations for specific actions were confusing to testers

  5. No tester successfully viewed profile prior to adding a connection

Corrective Action

  1. Add redirect button to “Log In” page

  2. Added a back button to each page of the set up process

  3. Added a new “Set up Complete!” page with information on iconography

  4. Reorganized menus and adjusted icons

  5. Remove the “Hide” button and added the “View Profile” button

Updates to designs following first round of testing:

  • Redirect added

  • Informative fill examples added

  • Iconography information added

  • Back button added to set up pages

  • “View” button replaces “Hide”

  • Terminology adjusted

  • Menu readjusted based on page

Usability Testing Round 2: Good to Go

With new adjustments in place, I ran a second round of usability testing with five new participants to confirm that Alter Eco was well-designed. With some small adjustments to the wording of my tasks, these testers were asked to complete a very similar test to the first round. The results clearly showed that the app was much easier to understand and navigate.

Final Thoughts

This project was an incredible learning experience. While I initially had plenty of grand ideas about the function of Alter Eco and how it would serve the users, I quickly discovered that my personal ideas or thoughts didn’t always match the users’ needs and desires. For example, after negatively reviewing the carbon footprint calculator, I incorrectly assumed users would not be interested in that style of quantification but found that users wanted a baseline measurement to work off of.


It became clear early on in the design process that user testing and flexibility on the part of the designers (in this case, me) is paramount to a successful product. To reach my final iteration of Alter Eco I changed many parts of the design that I, initially, considered crucial to its success. Making informed decisions and keeping the design as simple and/or familiar to users as possible (meaning, following common patterns and industry “standards”) are two things that turned out to be crucial.


The knowledge of the design process I have gained combined with new and improved skills using Figma, Maze, and other popular tools has been incredible. I am very excited to continue working on future projects and further develop my skills.

See more: