Habitats - Gamified Habit Tracker
About the project
Date:
Jul 22, 2025
Client:
Academic Project
Services:
UX/UI
User Research
Project Background
Habitats was a three-week academic project that focused on applying cognitive design principles to create a wellness app that supports how people think and stay motivated. Over the course of this project I explored how gamified feedback could make daily wellness tracking more motivating, moving from initial research and brainstorming to conceptual modeling, wireframes, and a polished interactive prototype.
Research
To understand what keeps people motivated to build habits, I created a short survey that received around twenty responses and followed up with three user interviews. Participants ranged in age and activity level, but most agreed that tracking often starts strong and then quickly loses momentum. Respondents said they wanted an experience that feels rewarding, light, and flexible, rather than just another chore on their phone.
Alongside this, I looked at other apps to see how they encourage consistency through design. Finch was successful in creating an emotional connection through rewards, but many users said it became repetitive, and it lacked certain features. Duolingo uses strong gamification systems to motivate daily use, but the competitive streak model can feel punishing when users fall behind. Studying both helped me identify a gap for something that uses gentle motivation and visual feedback without pressure or guilt.
Key findings:
Tracking becomes repetitive when progress feels static
Visual feedback and small rewards help maintain motivation
Gentle encouragement works better than pressure or guilt
Flexibility and variety keep people coming back
People want to feel growth, not just see data
Early Concept Map - Translating early insights into possible key features and identifying their possible organization within the app's hierarchy.
Mind Map - "brain dump", highlighting words that came up in survey results
Design Process (Part 1: Early Structure and Wireframes)
I began by translating my research insights into quick sketches and low-fidelity wireframes. My focus was on creating a layout that felt natural to navigate while exploring how users might move between tracking habits, viewing progress, and customizing their space.
The earliest versions separated each feature into its own section, but through class critique, I realized the experience needed to feel more connected. I used that feedback to build an early concept model that showed how the main areas of the app interact. It helped me clarify how users would flow through tracking, progress, and customization in a way that felt cohesive and rewarding.
At this stage, I focused on my main core pages, and their general structure, I also focused on simplifying navigation and ensuring clear labeling so that users could understand the interface without hesitation. I also started to think about how small rewards or progress visuals could appear early in the experience, setting the tone for later stages of gamification.
These wireframes helped me test structure and hierarchy before committing to any visuals. Once I felt confident about the layout and flow, I began developing mid-fidelity wireframes and preparing for the visual design phase.
Early design sketches, with contigive principles annotated.
Early wireflow where I explored how tracking, progress, and customization connect within the app’s core flow. This helped test navigation and screen hierarchy before moving into mid-fidelity design.
Design Process (Part 2: Visual Development and Final Design)
After finalizing the app’s structure, I moved into the visual design phase. I wanted the interface to feel calm, motivating, and alive, something that reflected personal growth without leaning too childish or too corporate. Every visual element was created from scratch, including the background illustrations, plants, icons, and navigation system.
Building these assets myself was one of the most fun parts of the project. It gave me total control over the look and feel of the app and let me be playful with color, shape, and style. I had a specific aesthetic goal in mind and was lucky to have the creative freedom to fully explore it, even if it cost me a little sleep along the way. Having that level of freedom kept me inspired and helped me push the visuals until everything felt cohesive and full of personality.
During this phase, I refined typography, color, and layout to find the right balance between clarity and charm. The color palette was designed to feel fresh and encouraging while keeping hierarchy and accessibility in mind. Small animations and progress feedback were added to make each action feel rewarding and to give users a sense of steady growth as their habitat expanded.
Project Retrospective
Initially, I was worried if I could pull off all the illustrations and bring everything together on my own, but I surprised myself with how cohesive it turned out. I also had fun creating all of the graphics and experimenting with prototyping in Figma, especially with microinteractions and onboarding flows that helped the app feel more playful and alive.
If I could go back, I’d give myself more time to slow down and test ideas earlier. I started strong with the visuals, but got attached to a few concepts that weren’t fully grounded in psychology, which made it harder to adjust later. I also wish I could've given myself more time to create all of the illustrations I needed for the app. Next time, I plan to spend more time refining the conceptual model and low to mid fidelity before diving straight into aesthetics.
Overall, I’m proud of how much I accomplished in such a short timeframe. This project reminded me that I really enjoy blending illustration with interaction design, and that I can push my creative side while still designing with purpose.
