UX/UI Designer
Project Brief
Eartho is a habit-tracking app that provides people with a fun way to make lifestyle changes that positively impact the environment.
Over the course of a 2-day hackathon, our team of UX designers created and tested a high-fidelity mobile prototype.
We believe that by using Eartho, our users will be able to develop regular sustainability habits that fit into their lifestyles while making a positive environmental impact.
Hackathon Project
Eartho
Timeline
2-Day Hackathon – July 2022
Medium & Tools
Mobile App (iOS) Prototype Created in Figma
Role
UX/UI Designer & Researcher
5-Person UX Team
Introduction
I worked closely with 4 other UX designers on a 2-day concept project to rapidly research, design, and prototype a sustainability habit-tracking app.
Tasked with the creation of an app or website to affect social good, our team spent several hours discussing pressing social issues and how we might solve for them. Though there were a lot of great ideas, the topic that stood out to us was that of sustainability.
We decided to focus our efforts on developing an app that would help users live more sustainable, environmentally-conscious lives. But how?
Research
Once we had determined the focus of our project, we began conducting research.
First, I conducted competitor research and took a look at sustainable habit-tracking apps that were already available on the app store.
I found two competitor apps, One Small Step and Earth Hero, and conducted a comparative analysis of the key features that they currently offer to their users.
Additionally, I also examined comparator habit-tracking apps (unrelated to sustainability) that were popular among our team members, including the popular meditation app, Headspace.
Findings
I found that competitor apps offer their users a lot of features related to lowering and offsetting the user's carbon footprint, as well as a habits questionnaire during the sign-up process – both features that we wanted to incorporate into our own app.
Through my research, I also discovered that a common feature offered by comparator habit apps like Headspace was daily and weekly habit tracking. Currently, this feature is not offered by One Small Step or Earth Hero.
Our team decided to center our app around providing users with a way to track their sustainability habits daily and weekly.
The Problem
People interested in living a sustainable lifestyle don’t currently have an easy way to pick up and maintain regular eco-conscious habits that have an impact.
Proto-Persona Development
After completing our initial research, we developed a proto-persona to give ourselves a way to focus on our user and their needs throughout the design process.
As our tight timeframe didn't allow us the time to conduct user research, Eli was developed to give us a sense of who might be to designing for.
Eli's needs and wants guided our designs and helped us keep a specific user in mind throughout the design phase.
Sketching Solutions
Next, we ran several sessions of a collaborative design lab, where all 5 team members sketched out possible features and screen flows.
After each iteration of sketches, we discussed suggested features for our app.
We generated several key features and design concepts:
-
3 Main App Features:
-
Onboarding Questionnaire
-
Weekly Habit-Tracker
-
Habit Analytics
-
-
Branding Concept:
-
We decided to add a gamification aspect to the app with cute, calming animations, and a clean, minimal interface.
-
We also came up with Eartho, the animated character who would be the heart of the app's UI.
-
For the app's primary user flow, we decided to place the sign-up process after the questionnaire screens, which we hoped would increase the percentage of users who completed the sign-up process.
We postulated that users would be more committed to signing up for Eartho as they'd already spent time filling out the initial questionnaire and gotten excited about using the app.
Prototype
With our proto-persona in mind, we began building out wireframes in Figma, trying out various flows before landing on a simple onboarding flow that incorporated all of our planned features.
Moving from our final wireframes, we created a clickable, testable, mid-fidelity prototype
We included just enough visual design elements to provide users with context, without stepping too far into the interface design.
Testing
After completing our clickable mid-fidelity prototype, we ran a usability test with 16 users, having users complete a series of basic tasks.
Overall, our mid-fidelity prototype performed well, with an overall task success rate of 83%.
While our prototype performed well during this first round of testing, there was one feature that confused 80% of users:
The Progress Bar
-
The onboarding progress bar confused some of our users, believing that the circles in the bar were clickable buttons, and attempting to navigate the onboarding screens using the progress indicator, rather than the "next" buttons.
-
We hoped that reformatting the bar to a smaller, more discrete progress bar in our hi-fi prototype would resolve this issue, as well as adding a bright CTA color to the "next" buttons.
Progress Bar
Mid-Fidelity Prototype
Progress Bar
High-Fidelity Prototype
After completing our first round of usability testing, we began generating our high-fidelity prototype. We made other minor changes to the interface based on additional user feedback. Additionally, we relocated and resized several of the CTA buttons for ease of use on mobile.
Style Guide - UI Kit
Moving into the high-fidelity prototype also meant that we could flesh out the interface of the app.
I found a color palette that fit well with the playful, pastel aesthetic that we had decided to lean into.
I also recommended that we incorporate icons into the app to add more visual cues for users, finding and incorporating a set of icons that fit well into the playful design of our app.
We thoroughly tested the visual accessibility of all of the colors, fonts, and images that we incorporated into the app.
The Final Product
In two days, our team brought a mobile app concept to life, with a delightful, functional interface, and many features for users to explore.
We even managed to include a few additional features that we hadn't planned in our initial project scope.
We added an education feature where users can read articles about different environmental topics, as well as additional animations to add more depth to the gamification aspect of the app.
We also ran this final product through one last round of testing, confirming that our changes to the progress bar in the high-fidelity prototype had resolved the identified usability issue.
Onboarding Questionnaire
After the landing page, Eartho users complete a 4-part questionnaire about their sustainability interests and their current habits, which then uses an algorithm to calculate which new habits would best fit their current lifestyle.
Daily & Weekly Habit Tracker
The habit tracker screen offers users a daily and weekly view of their selected habits for the week.
This screen also allows users to gamify their habits – once the user's habits have all been completed for the day, Eartho's health improves.
This simple animation provides users with positive visual feedback upon completion of their new habits.
Habit Analytics
Through the analytics screen, users can view their accomplished habits daily, weekly, and monthly, as well as track their CO2 impact to date since starting using Eartho.
Next Steps
With more time, our team would conduct thorough user research. We would conduct user interviews to gain insights into users' sustainability habits, their desire to live more sustainable lives, what they're doing already, and what they want from a habit-tracking app.
We would also expand on the following app features:
-
Add feature for users to donate to the sustainability causes of their choice to offset their carbon footprint
-
Build out "Explore" section of the app to provide users with an in-app learning experience
-
Add feature that connects users to sustainable companies in their area
-
Add feature that integrates users’ habits with their calendar app (Google Calendar, Apple Calendar, etc)
-
Add notifications (push, in-app)
Conclusions
Don't underestimate what you can achieve in 48 hours, and don't limit your creativity when it comes to hackathons.
I tend to be a conservative designer, under-promising and over-delivering on designs and solutions. I prefer to project plan and manage with a realistic and easily-achievable roadmap, while still pushing myself and others to work rapidly and effectively.
That being said, hackathons are really the space to completely think outside of the box and think of the most creative and innovative solutions out there. While I had a hard time letting go of my realistic mindset, working with a team of creative and differently-minded designers showed me the benefits of moon-shooting when it comes to rapid design.
Don't rush into your designs, no matter how excited you are about the branding.
With so many talented UI designers on the team, our team may have rushed into the design phase a little too quickly. We didn't spend quite enough time on the research phase to provide a solid backing for our design decisions.
Though this was a hackathon project and we were meant to rapidly-produce a product in 48 hours, we should've given a few more hours to the research phase, rather than the design phase.
Had we gathered more data from real users and learned more about how people use habit-tracking apps, I believe we would've produced a stronger design, more thoroughly grounded in user-backed research.
That said, we still managed to rapidly develop a delightful product that received positive usability testing results and positive user feedback, all in 48 hours.