MyHabit
Complete B2C habit tracking and behaviour change app — 159+ screens across 7 modules, built from a 'black and white only' brief that became a distinctive visual system. iOS + Android. 10-language support. Full design system.
My Role
Sole Product Designer
Duration
3–4 months
Year
2023
Tools
Figma
Project Brief
Design a complete B2C habit tracking app — black and white visual system, three distinct habit paradigms (Regular, Negative, One Time), a Journey coaching module, and full 10-language support including Arabic — for iOS and Android via Flutter.
Complete B2C habit tracking and behaviour change app — 159+ screens across 7 modules, built from a 'black and white only' brief that became a distinctive visual system. iOS + Android. 10-language support. Full design system.
The Problem
One check-in model. Three different psychologies. Negative habits work backwards. One-time habits are singular. A single model handles none of them well.
Habit tracking apps like Habitica and Streaks treat all habits identically. Building a morning run (positive) is cognitively different from quitting smoking (negative — success means NOT doing it) and submitting a form before a deadline (one-time — no streak, just completion). MyHabit needed three distinct models.
Inverted psychology for negative habits
A negative habit like 'no alcohol' starts the day as successful. Users should uncheck it only on failure — the inverse of a positive habit.
One-time habits have no streak logic
A habit that happens once (dentist appointment, file taxes) has no streak, no daily check-in, different completion semantics.
No coaching module in reference apps
Expert-curated 30-day Journey programmes require enrollment commitment mechanics and phase-based progress — not present in competing apps.
B&W constraint with no system
A 'black and white only' brief without a systematic approach would produce a flat, undifferentiated UI.
UX Audit
What was broken before we redesigned
A heuristic evaluation of the existing system identified these critical issues before any design decisions were made.
Single interaction model for all habits
Habitica and Streaks offer one check-in pattern — does not accommodate inverted psychology of negative habits or singular nature of one-time commitments.
UX LimitationNo structured coaching programmes
Journey (expert 30-day programme with day-by-day tasks and phases) does not exist in reference apps.
Feature GapNo RTL language architecture
10-language support including Arabic requires RTL-aware component design from the start.
Localisation GapOur approach: Build three habit models, not one
Designed three distinct creation flows, card interaction states, and history semantics: Regular (check-in daily), Negative (starts complete, uncheck on failure), One Time (date-specific, single completion). Built a B&W design system with selective pastel category accents. Journey module with enrollment commitment mechanics and day-by-day execution.
Process & Approach
How I approached the challenge
Competitive Research
Analysed Habitica, Streaks, Fabulous, and Done. Identified the single-model limitation as the core differentiation opportunity.
Three Habit Models
Defined Regular, Negative, and One Time paradigms — each with distinct card UI, creation flow, interaction model, and history semantics. The most critical product design decision in the project.
B&W Design System
Black/white primary system with selective pastel category accents. 8+ habit card variants. Illustrated icon system. Component library documented in Figma.
7 Module Design
Onboarding, Today Dashboard, Habit Management, History & Analytics, Journey (30-day coaching), Timer, Profile & Settings. 159+ screens across all modules.
Journey + Flutter Handoff
Journey: enrollment with swipe-to-confirm commitment, streak-loss warning, phase-based 30-day plans, day-by-day task execution. Complete Flutter dev handoff.
Design Principles
Three paradigms. One visual system.
The constraint of 'black and white only' forced a design system solution — not a style decision.
Model the psychology, not just the UI
Negative habits need inverted interaction models. One-time habits need singular completion semantics. Design the psychology first, then the component that serves it.
Constraints produce systems
The 'black and white only' brief wasn't a limitation — it was a forcing function for a system where colour is used sparingly and purposefully. Category accents earn their place.
Coaching is a product, not a feature
The Journey module with enrollment commitment, streak-loss warnings, and phase-based day plans is a coaching product embedded in a habit tracker — not a feature bolted on.
Empty states for every section
Every habit card, every history view, every analytics chart was designed with both populated and empty states. Edge cases are where trust is won or lost.
The best habit app doesn't just track. It understands which habit you're trying to build — and why it's different from all the others.
Why This Was Hard
Complexity signals
What set this project apart from standard product design work — the technical, systemic, and domain-specific challenges that demanded real depth.
3 habit paradigms with different UX
Regular, Negative, and One Time each have different card states, creation flows, interaction models, and history semantics — three systems, not three variants.
Journey coaching module
Expert 30-day programmes with enrollment swipe-to-confirm, streak-loss warnings, phase-based plans, and day-by-day task execution.
8-parameter habit configuration
Type, name, colour, icon, frequency, goal, time-of-day, advanced settings — progressive disclosure so creation feels simple, powerful when needed.
10-language + RTL architecture
Arabic, English + 8 others — RTL-aware component design built from the start, not a post-design localisation layer.
Three habit psychologies. One B&W design system. 159+ screens. iOS + Android. 10 languages. Solo designer.
UI Screens
159+ screens
B2C mobile habit tracking — iOS + Android via Flutter.
Feature Highlights
What made MyHabit different
3 Habit Paradigms
Regular (daily check-in), Negative (starts complete, uncheck on failure), One Time (date-specific, singular completion). Three models, three UX systems.
Core InnovationJourney Coaching Module
Expert 30-day programmes: enrollment swipe-to-confirm, streak-loss warnings, phase-based plans, day-by-day execution.
Coaching System8-Parameter Habit Builder
Type, name, colour, icon, frequency, goal, time-of-day, advanced settings — progressive disclosure across all parameters.
Configuration UX10-Language Support
Arabic, English + 8 more. RTL-aware component architecture built from the start — not a post-design add-on.
LocalisationDesign System
Tokens, typography & components
A shared token-based system built to ensure consistency across every screen and state.
Color Tokens
Type Scale
Components
User Flow
Core user journey
Onboarding
Name entry
Today
Habit list
Add Habit
8 parameters
Journey
30-day programme
History
Streak + analytics
Tech Stack
Design tools
Design
My Contribution
What I owned
01
Sole Product Designer
Competitive research, 3-paradigm habit model architecture, B&W design system, 159+ screens across 7 modules, component library, Flutter handoff.
Impact & Performance
Project scale
159+
Screens designed
7
App modules
3
Habit paradigms
10
Languages
Timeline
3–4 months: brief to Flutter handoff
Month 1
Research + Design System
Competitive analysis, 3-habit paradigm design, B&W design system, component library (8+ card variants).
Month 2
Core Modules
Onboarding, Today Dashboard, Habit Management (3 types), History & Analytics. Full populated + empty state coverage.
Month 3–4
Journey + Handoff
Journey coaching module, Timer, Profile & Settings (10-language, premium subscription). Flutter dev handoff.
Outcomes
The impact we shipped
Measured results from usability testing, stakeholder reviews, and post-launch adoption tracking.
159+
Screens designed
7
Modules
10
Languages
3
Paradigms
"Delivered a complete B2C habit tracking application — 159+ screens, 7 modules, full component library — from a 'black and white only' brief that became a distinctive product visual system."
Learnings & Reflection
What I'd do differently
01
Product research before accepting the brief
The 'black and white' visual brief came without product specification. Competitive research independently identified the three-habit-type opportunity. Bring product thinking into design-only briefs.
Interested in working together?
Let's talk about your project or open role.
Live Prototype