Cli-Mate: Treat the Planet like Your Friend
Designing Cli-Mate: A habit-tracker app empowering users to embrace and maintain a climate-friendly lifestyle.
TEAM
Chi Hoang, Aaron Villegas, Arshad Mohammad, Soujit Ing
ROLE
Product Designer
TIMELINE
April - June (2024)
SKILLS
UI Design, Wireframing, Prototyping, Usability Testing
As someone who strives to be environmentally conscious, I noticed a lack of a simple, intuitive way to seamlessly integrate sustainable practices into daily life that could inspire and support people on their journey toward a more eco-conscious lifestyle.
OUR PROBLEM STATEMENT
Despite widespread knowledge of climate change, individuals lack an engaging, user-friendly platform to consistently track and visualize their sustainable habits, leading to a gap between intention and action in the pursuit of a climate-conscious lifestyle. People need an accessible, engaging platform to track and visualize their sustainable habits, empowering them to make consistent, climate-friendly decisions while feeling part of a larger community.
OVERVIEW
What is Cli-Mate?
Driven by my passion for sustainability and the planet, I was inspired and eager to develop a platform that empowers people to keep track of their eco-friendly habits and impact. In my UCSC course: User Experience for Interactive Media, we created Cli-Mate: Treat the Planet Like Your Friend, a habit-tracking app designed to motivate climate-friendly choices.
Our Goals
01.
Empower young adults to learn about the impact of their daily actions.
02.
Motivate users through highlighting their progress in the app.
03.
Inspire university students to form eco-friendly habits.
BRAINSTORMING
How can we visualize this app?
After we decided on the app’s goal and main focus (habit tracking), we needed to define the other key features of the app.
The Challenge 🧗🏻
We don’t want to focus solely on designing a habit tracker, but also to create a learning experience—one empowering users to understand the "why" behind each action, to connect with the bigger picture of sustainability.
When beginning to sketch, I knew I wanted each screen to invite interaction, making it easy for users to track their progress while subtly guiding them toward more sustainable habits. I imagined what it would feel like for users to engage with something that could genuinely impact their lives. In my initial sketches, I wanted each goals page to have related resources linked to it, and an easy way to log their goal’s progress. I also envisioned having a map for local events/centers (e.g. recycling old electronics). I also envisioned that the user profile page would have overall statistics linked to the user’s page, with graphs for a nice overview of their progression.
Upon discussion, we decided to have the following key screens/features in our app:
A progress tracker for daily habits.
A community forum to connect.
Personal statistics to track overall progress.
A resources tab for keeping up with news and events.
STORYBOARDING
How can we help users feel engaged towards this cause?
We envisioned that a nice motivation for the user to continue working towards their goals would be to implement a virtual garden feature 🌱 on our app as a visual representation of the user’s progress. The more tasks that the user completes towards their goals, the more their garden grows!
After logging their completed task in the app, the user’s virtual garden has grown!
PAPER PROTOTYPING
From sketches to (paper) screens
Guided by our initial sketches and defining all of our app ideas together, we created the app’s paper prototype—using paper components and formatting ideas to outline how we would want our users to interact with our app!
Shown above are some of the screens from our paper prototype of the app.
USABILITY TESTING
Testing our paper prototype with university students
Once completing our paper prototypes, we tested four of our fellow university students as representatives of our target demographic to get usability feedback.
Testing Process📝
01.
02.
03.
Give the participants an intro to the app’s premise and informed consent.
Read aloud the four app scenarios and matching tasks (e.g. you walk instead of drive, please input data).
Have all participants (without explaining) navigate through the app given each scenario/task.
Our Findings💡
Easy navigation: Clear and consistent UI.
Button confusion: Some buttons were not so intuitive (e.g. new goal/input buttons).
Repetitive screens.
Too much presented information on some screens.
Enjoyed virtual garden.
Overall, users enjoyed the creativeness and usability.
Iterated Prototype on Figma
From our key findings from the feedback received during usability testing, we outlined some specific areas in our app where we could improve its usability before creating our hi-fi Figma designs.
Viewing data and buttons
We removed the additional screen to view after editing and clarified the buttons.
Resources page screen
We added variation with sized pictures or titles in presenting the articles.
High Fidelity Screens
Social Screen
Tasks Screen
Home Screen
How can we continue to improve accessibility and make our app more user-friendly?
For a more objective approach to testing our app and identifying usability issues, we conducted a heuristic evaluation. We referred to Nielsen’s 10 Usability Heuristics Principles to gauge if there were other usability issues in the user interface. I evaluated the “adding a new friend” task. I identified the heuristics as: user control and freedom, aesthetics, and error prevention.
Testing Process📝
Following the heuristics principles guidelines, we each took a different app task, then classified and ranked each issue that we saw in terms of severity: from 0 (no issue at all) to 4 (a usability catastrophe).
Our Findings💡
Upon my task evaluation, I ranked all of the potential usability issues a 1 (issues that did not need to be fixed if no extra time). No one found anything that needed drastic usability changes, but we did have several ratings of 1 and 2 where we could improve.
After our heuristic evaluation, we focused on fixing our minor usability issues—fixing button consistency, color consistency, and icon recognition. We then turned to any present aesthetic issues.
Resources Page
Diet Icon: Enhanced the "Diet" icon to make it more immediately recognizable.
01.
Consistency and Standards
Text Resizing: Allow users to adjust the font size.
Dark Mode: Reduce strain.
Bookmarking and Saving: Save articles for later.
Sharing Options: Sharing to include different platforms for ease of use.
02.
User Control and Freedom
Social Page
Un-add Friend: Should have a button to decline request and un-add a friend.
01.
User Control and Freedom
Include maximum word count or initial preview for content in posts for consistency.
02.
Aesthetic and Maximalist Design
REDESIGN
Following the initial development of our habit-tracking app, I recognized that the visual design and organizational structure could be significantly improved. Due to time constraints during the project, the app's aesthetics and flow didn’t fully meet our expectations.
I decided to revisualize and redesign the app, re-envisioning the key features. I aimed to enhance its visual appeal and reorganize the layout for a smoother, more intuitive user experience, allowing me to align the final design more closely with our intended vision.
How can I ensure the redesign further enhances the user experience while maintaining the core functionality?
Aesthetic / Design Changes
While thinking about this app and what this app’s goal was, my aim was to make the app feel more friendly and welcoming towards users. To support this intention, I made the changes shown above:
Typography: The original text felt too formal/neutral, which could create a barrier to engagement. By changing the fonts and text to feel more friendly, I aimed to make users feel more comfortable when interacting with the app.
Iconography: I introduced a set of minimalist icons that share the same line weight and aesthetic, ensuring a more cohesive look across all features.
Colors: By using warmer base tones for the background, combined with more vibrant hues for buttons and icons, I created an inviting atmosphere that highlights key features.
The Homepage
I felt that the original homepage for Cli-Mate could have been improved with its organization, clarity, and aesthetic.
Organized the main habit tracking features of the app on the top of the homepage (Your Garden, Adding/Inputting Data).
Separated the Add & Input Data buttons to prevent confusion.
Added options for different types of goals with a filter.
Made the text for goals bigger for ease of reading.
To create a more user-friendly, welcoming homepage, I:
The Garden
The virtual garden feature (my favorite feature!) felt a bit underdeveloped in concept and implementation for the original design.
To revisualize this: I reconceptualized this virtual garden as being a collection of cute garden characters: from vegetables to flowers. The user would be able to unlock these characters through completing their task goals for each week.
This gives the user more incentive to continue to come back and complete their tasks to unlock more fun garden buddies!
Adding goals page
In the original design of this screen, I felt like the page for adding goals was not specific enough in frequency, amount, and actionable steps.
In my redesign, I made sure to include all of those features along with a save button, so that users will be able to customize and access the specificities of their goals + tasks!
