Overview
ecotrack is an app that helps users who are trying to make more sustainable choices, lower their carbon footprint, and keep track of their actions. I designed ecotrack with a beginner in mind, so that they can feel accomplished and encouraged while using the app.
Problem
More people are becoming aware of the effects of climate change, and they want to find ways to learn more and take action to help contribute to climate justice. New eco-conscious users are overwhelmed with the information on the internet and don’t know where to start.
Solution
The solution is to create an app where users who are new to this topic can easily learn, take actions, and make sustainable choices in a way that encourages and empowers them.
**This is a personal speculative project.
Project Scope
End-to-end Mobile App
Tools Used
Figma, Otter, Notion, Maze
Role
UX/UI Designer
Duration
Mar. – Apr. 2021
4 weeks
80+ hours
2 Define & Ideate
- POV Statements & HMW Questions
- Brainstorming
- Business & User Goals
- Site Map
- Task Flow
3 Prototype & Test
- Sketching
- Mid-Fidelity Wireframes
- Prototyping
- Usability Testing
- Affinity Map
- Iterations
4 Design
- Moodboard
- UI Kit
- Hi Fidelity Wireframes
- Prototyping
- Usability Testing
- Iterations
market Research
Starting with Research
I began with researching about climate change so that I could understand the major problems and current solutions.
- Climate change is a long-term change in the average weather patterns that have come to define Earth’s local, regional and global climates.
- This human-caused climate change is due to greenhouse gas emissions, deforestation, agriculture, waste disposal and much more.
- Moving forward, we need to demand and advocate for the right policies, and hold governments accountable.
- Some other solutions everyday people can do
- Reduce food waste
- Eat a plant-rich diet
- Education, especially for women and girls
- Consume less, use fewer services
- Make energy-efficient choices
User interviews
What are the users' wants, needs, expectations and goals?
I wanted to understand how users view the current climate change issues, what their barriers are, and what motivates them to take action.
I scheduled my user interviews and prepared my interview script on a quest to find out how an app can help solve their problems.
Assumptions:
- People in general do care about the environment.
- People think they are too busy to put more effort into learning and taking action.
- People are worried about the future of the environment.
- Some people don’t care or think their action will not make a difference.
- People want to help but aren’t sure exactly how and where to start.
6 user interview participants
25-36 years old
transcribed with Otter
conducted over Zoom
Empathy Map
Putting everything together
I created an empathy map to find patterns and insights.
- The users I interviewed ranged from people who know very little about climate change to people who are very knowledgeable and have been transitioned to living a zero waste lifestyle.
- After organizing each post it by categories such as motivations, habits doing and want to do, needs, suggestions, goals, etc., I came up with the following insights:
- Users want updated information on these topics.
- Users are practical and want to use apps that are useful to them.
- Users want resources on how to live sustainably.
- Some users are more knowledgeable and want to help their friends and family learn and build more eco-friendly habits.
- Users are worried about future generations, like their kids.
- Users are interested in contributing by supporting specific businesses, improving recycling habits, and lowering waste.
Survey
Following up with a Survey
After synthesizing my user interviews, I came up with follow up questions that I chose to ask in a survey. I received X responses.
QUESTIONS
ANSWERS
Why don’t you spend more time on these issues? What’s stopping you?
47.6% said lack of resources
47.6% said they haven’t made it a priority
What would be the easiest thing for you to start doing today?
Answers ranged from composting, reducing waste, eat plant based, reuse things
What is something you’d like to do and need guidance on?
Composting was the top topic of choice, followed by recycling, and policy and supporting organizations
What do you need to help you make change?
Majority of participants wrote knowledge, education, and “how to…”
What would you use? (Here I would list potential features to get an idea of interest)
90.5% wanted updated info and education
76.2% voted for how to recycle and compost better
61.9% voted for ways to reduce your carbon footprint
52.4% wanted to support sustainable companies
competitor analysis
Who are our competitors?
Define & Ideate
What problems do I need to solve, and what are our goals?
Pov statements & hmw questions
How might we help Katherine?
I gathered my insights from my Empathy map which resulted in many How might we questions.
Using my user persona, I thought about how might we help Katherine gain more knowledge on these topics in a simple and fun way?
Since the users were highly interested in composting, how might we help Katherine and users learn more about composting in their area?
brainstorming
Let's think of some potential solutions
I took some time to brainstorm and think of possible solutions to the How Might We questions.
I wanted to figure out how I could design a product that helps educate users while also keeping it simple, fun, and not overwhelming.
One of my user interviewees told me that her friends don’t like when they talk about all the climate issues, but when they see her taking action, they are more likely to be curious about it. They also excitedly tell her when they’ve started changing their habits.
Therefore, I wanted to design an app that would educate people in various ways since people learn differently, and include a way for people to share their sustainable habits on social media since people may be influenced to do the same.
Business & user goals
How do our goals overlap?
For our non-profit model, I chose to focus on the goals of providing environmental education and sustainable solutions for the users.
For the user goals, I focused on helping users build their knowledge while building habits and taking action to contribute to slowing climate change.
Information architecture: Site map
How can we organize the app in a simple way?
Based on my primary and secondary research, I chose to feature:
- an action tracker that will include different actions users can save and complete
- a Recycling and Composting feature that includes local searches for recycling and composting drop offs, and updated information in their area (these two were the most voted for actions and includes updated information that users could expand on)
- a shopping and donating feature where users can shop for sustainable replacements, and users can find organizations that we researched and made sure are trustworthy to support
- a “more”/settings tab where there are more resources, settings, and a FAQ
Task flow
What does Katherine want and need to do in ecotrack?
To show what users can do, I chose specific tasks to show exactly how the feature works.
I wanted to use the onboarding screens to give the user a sense of what ecotrack offers. I present the current problem, talk about what users can do on the app, and an option to sign up.
Since composting was the topic that people were most interested in, I chose to make that the first task of adding a composting goal to their tracker. In order to make the app and education more digestible, I chose to focus on users choosing tasks where they can expand their knowledge within the task.
Many users expressed that they don’t know what is recyclable in their area, so I created a way to input their location and ecotrack finds out the details for them. I created this app with idea that it would start out in Los Angeles, CA, and then expand to other cities in order to have updated information.
Prototype & Test
How can I help Katherine feel accomplished and educated while using the app?
Sketches
Putting it down on paper
I studied other app design patterns on Mobbin and wanted to make ecotrack’s design simple and intuitive. I sketched different options for my home and action pages, and sketched how the flows could look. Sketching helped me quickly put down on paper what I was imagining in my head.
Mid-fidelity wireframes
How can we create something fun and educational?
When creating my Mid-Fidelity wireframes, I kept in mind that this topic of sustainability can be overwhelming. Therefore, I wanted to design each screen so that it is simple and eases the user into learning more and taking action.
Prototyping & usability testing
Creating and Testing the Prototype
After completing my Mid-Fidelity wireframes, I was ready to create my prototype using Figma.
I recruited 4 users to do usability tests with me over Zoom.
Test goals:
- identify usability of the app
- discover how well users can navigate the app and complete each task
- discover if the flow, IA, and copy is easy to understand
I had 6 tasks for each user to complete. I also made sure to ask them to think out-loud as they go through each task, and share whatever feedback they have. With each task, I described the scenario beforehand.
The tasks included:
- Go through onboarding to learn about what the app offers. Create an account with your email and skip the carbon footprint quiz. (I chose to skip this quiz because my main features were to track actions/habits, so I chose to focus on that.)
- You want to learn about composting and add it to your tracker.
- Now that you added it to your list, you want to find out where you can drop off your compost in your zip code area 90019. Save it to your locations.
- You just went to drop off compost yesterday. You want to mark it in your tracker that you completed it.
- Find out if you can recycle glass bottles and what the recommendations are.
- You just finished your plastic wrap and want to stop using single-use plastics and want to find covers for leftover food. Find the Food Huggers reusable bowl lids and see how much it costs.
Usability Test FIndings
What are the results? What needs to change?
After checking over my transcriptions on Otter.ai, I made an affinity map to see if I could categorize and notice patterns. I separated the post-its into these categories:
- wins
- categories
- confirmation
- suggestions
- pains
- observations
- quiz
Listed below are some of the notes.
Insights from the affinity map:
- 3 out of 4 users would use “Categories” before using the search bar
- 1 user said they usually search, but the Category buttons are big which make them curious to click
- 3 out of 4 users said they find the compost information helpful
- 2 out of 4 users said they would use the drop off feature
- All of the users said they would use the app for education and information
- 2 out of 4 users asked for clarity on the accordian
- 3 out of 4 users were confused where to add the completed compost action
In these usability tests, I wanted to see if the copy was clear enough for users to complete the tasks. I learned which areas needed improvement.
My next steps were to:
- Make the category screens
- Change the action screen accordions to be more clear
- Make the copy more clear so users know where to go to complete a task
Mid-Fi Iterations
Improving the User Experience
On my onboarding screens, I made the skip button more obvious because I don’t want users to feel like they have to make an account in order to have the benefits of the app. There is a lot a user can do without making an account. Although making an account would be very beneficial for tracking!
For the home screen, users were confused on where to click to add a goal to their tracker. I realized having “My Goals” is too complicated, and I need to keep it more simple and straightforward. I tried “My Action Goals,” but ultimately decided on “My Tracker” since that’s where the user is actually going to. After my 2nd usability test, I decided to change it to “My Action Tracker,” to further clarify for users.
In order to check what users might click on in my next usability test, I designed category pages, and an “All Actions” page because I wanted to show the multiple paths a user could take, and also check in my next test.
Lastly, my other major iteration was to change the accordion in my Composting action page. I thought that have the carets facing down and to the right would be clear, but after feedback and doing more research, I decided to change the “Take Action” links to buttons so that users would not accidentally click on a button and go to a new page without wanting to.
Design
How can I help Katherine feel accomplished and educated while using the app?
Moodboard
How can I create an accepting environment?
High Fidelity Wireframes
High Fidelity Wireframes
I kept many of the design patterns the same so that when users navigate through the app, they recognize the same patterns. For example, the categories for actions, recycling, and shopping are the same. Also, the individual actions, recycle item look-up, and shopping items have the same pattern.
Testing results
Usability Testing and Maze Results
For my usability testing, I chose to use Maze in addition to 3 usability tests over Zoom. This was my first time using Maze, and it was quite interesting to have each screen documented with the heat maps.
Interestingly, I had a higher error rate with my High-Fidelity wireframes than my Mid-Fi wireframes. However, I did not use Maze for my first usability test so I won’t compare the Maze. All 3 users in my Zoom usability tests were able to complete the tasks, but I did have to help guide 2 of them more by repeating the tasks and asking questions of how they would go about doing things.
With the Maze and Zoom tests, I still had majority of users able to complete the tasks, and received valuable feedback through both types of tests.
I did create a Compost page within the Recycle tab, however I did not expand on that page due to time constraint, and I didn’t think users would go there. The prototype was restricted to certain paths so those users to gave up could not go back to the first screen, therefore they were stuck in the 2nd half of the screens. I needed to figure out how to make this task easier to complete.
This part was for sharing a user’s action on social media. Users might be more incline to show off their good deed on social media, which can result in more users joining ecotrack! However, I made the task too complicated by asking users to exit out without a success screen for them completing the sharing of the post. I had 15.4% of users give up.
In the Maze Usability test, I asked a question about how the overall experience, UI design, and the language was for them. I had a mix of reviews with some users saying it was clear and some users saying it was confusing.
I had a lot of positive feedback about the user interface and straightforward language. Although many users were able to complete all the tasks, those few users that were unable to lead me to believe I still have a lot to iterate on the app. My goal is to make the app as intuitive as possible especially for a person who is new to sustainable living.
iterations
Second Iterations
From my Maze Usability tests, I was able to ask more clarifying questions during my “in-person” Zoom usability tests. I could understand better why some users had “given up” on Maze, and where some areas were confusing to them.
Some changes I made were:
- Adding a question in the Search Bar to ask users what they want to do
- Adding the word action to make it “My Actions List” so users know where to complete their action, and bolding “our categories” and “search bar” so users can see directions more easily
- Changing the copy and icons for the “Add to List” and “Completed” buttons (2 of 3 users said they thought the white “Completed” button looked like it was already clicked on
- Changing the copy from “No, make it…” to “Save it as…” to emphasize that users are saving it to their “Saved List”
final prototype
Prototype
After many iterations, here is the “final” prototype! There is still lots of room for improvement. However, I’m quite proud of the result!
Reflection
Next Steps and What I Learned
My initial goal for designing ecotrack was to create an app that is intuitive to use for people who are new to making more eco-friendly and sustainable choices. While looking at competitors, I noticed some of these apps can be overwhelming which could lead to users abandoning the app after a few uses. Climate issues is not an easy subject, and I wanted to make ecotrack an educational resource with actionable steps for anyone interested in this topic.
After going through 2 sets of usability tests, and two iterations, I know that there is still more to do. Overall, the feedback was positive with an interest in utilizing the app for education or looking up information.
- I would expand on the Compost page that is within the Recycle Tab in the bottom navigation. I realized that I meant to have the “Find Compost Drop-Off” in that page initially, and did not include it. Some users were expecting it to be there, and I mistakenly thought no one would go to that page.
- I would also expand on the Habit Building Guides that I included on the home page. Some people may want to pick and choose actions they want to do, and some people may want to be guided on actions and habits they can build in order to reach a larger goal, for example Zero Waste.
- I learned that copy makes a huge difference. If the titles are confusing, users won’t know where to click to complete an action. Additionally, I think doing a card sort would have been beneficial in organizing the content. I need to make sure it makes sense to the users, not just make sense to me.
It would be great to be able to develop the app because I had users interested in using the app. Thank you for learning about ecotrack!