Academic Project · Consistency

Habit Tracking App

Role

UX/UI Designer, Frontend Developer

Context

Team Project, Academic Project

Timeline

4 weeks

Tools

React Native, Expo, Firebase, Figma

Overview

Consistency is a mobile app designed to help people build and maintain healthy habits through structured tracking and motivation tools. By combining traditional habit logging with geolocation features, the app allows users to log activities based on their physical location, creating a visual journey of their progress. The goal was to encourage self-discipline and long-term commitment by merging visual progress, rewards, and spatial interaction into a cohesive experience.

Consistency on a phone: the home screen with the day's habits as illustrated cards, Boxing and Work, each with a streak
The home screen, with each of the day's habits as its own card.

Sketches

Initial concepts focused on how to integrate map-based logging with standard habit tracking cards.

Six notebook pages of paper sketches: the home screen, the map, achievements, the monthly overview, settings and the login page
Paper sketches of the main screens, from the home screen and the map to achievements and settings.

Design and Build

The Figma board of final screens, grouped into sign up and survey, rewards, overview, map and logs, settings and home
The final designs in Figma, grouped by flow.

Built using React Native and Expo, the project required a robust technical architecture including Firebase for authentication and Async Storage for local data persistence. A key focus was the “Map Log” feature, which uses react-native-maps to let users attach photos and locations to their habits. We also implemented a gamification system where users unlock achievement cards based on their streaks, adding a layer of visual motivation.

Technical Challenges

  1. 01

    Navigation

    One of the main technical challenges was managing the complex navigation structure. We needed a mix of tab-based navigation for main screens and stack-based navigation for flows like “Create Habit.” This required restructuring the navigation tree to allow specific screens to overlay the bottom tab bar.

  2. 02

    The Stats Screen

    Another hurdle was conditional rendering on the Stats screen, which needed to display data in three drastically different formats (weekly list, monthly grid, yearly heatmap). We solved this by creating modular sub-components and using state variables to conditionally render the correct layout without code duplication.

The Map Log screen on a phone: a dark city map with photos of habits pinned where they happened
Map Log, with each habit pinned to the place it happened.

Final Product

Onboarding, the day's habits, and making a new one.
Logging a habit on the map, and the achievements it unlocks.
Stats by week, month and year, down to one habit's calendar.
Three phones showing the map, the home screen and the yearly overview
Map, home and overview together.

Reflection

We successfully implemented all core features, resulting in a functional and cohesive user experience. The final app includes secure authentication, a dynamic home dashboard, interactive habit tracking, and the unique map logging feature. Through this project, I significantly strengthened my skills in React Native component lifecycles, state management, and creating polished “glassmorphism” UI styles.

View the prototype

Let's Build Together!

Let's collaborate on creating unique designs and functional websites. Reach out to discuss how I can contribute to your team and help bring your ideas to life.

Let's Connect