HabitFlow. A Minimal Habit Tracking App

Created a clean, uplifting mobile experience that helps users build lasting habits through visual progress, positive reinforcement, and social accountability, all designed entirely with AI-driven workflows in UXPilot.

Overview

HabitFlow is a mobile app concept designed to make habit building simple, motivating, and visually calming. The idea was born from a common frustration: most habit tracking apps feel cluttered, overly gamified, or visually overwhelming. Instead of helping users stay consistent, they often add friction.

This project was created for the Uxcel x UXPilot AI Design Challenge, which required designing at least 10 essential screens using UXPilot’s AI workflows, documenting the prompts and refinements, and presenting the process in a structured case study.

The challenge was not just about creating screens, but about guiding AI effectively, working within constraints, and telling a clear design story

Why HabitFlow?

When I read the brief, I knew I wanted to tackle something universal. Everyone struggles with consistency. Whether it’s exercising, reading, or drinking enough water. I wanted to design an app that removes friction and makes progress feel rewarding without being distracting.

The vision for HabitFlow was clear:

  • Minimal and uplifting instead of cluttered and noisy.

  • Visual progress through rings and streaks.

  • Positive reinforcement with motivational messages.

  • Social accountability via a Buddy Mode.


The 10 Key Screens

  1. Onboarding Intro – A 3-step welcome flow introducing the app’s benefits.

  2. Sign Up / Log In – Simple authentication with social sign-in options.

  3. Home Dashboard – Displays today’s habits as progress rings with streak counts.

  4. Add New Habit – A form to create habits with category, frequency, and reminders.

  5. Habit Detail – Shows streak history, calendar view, and motivational quotes.

  6. Daily Check-in – A satisfying “Mark as Complete” interaction.

  7. Buddy Mode – Invite a friend and track progress side by side.

  8. Notifications Settings – Customise reminders and motivational messages.

  9. Profile – View achievements, streak stats, and edit profile details.

  10. Explore Habits Library – Suggested habits grouped by category.


The Process

1. Getting Started

I started by breaking down the brief into actionable steps:

  • Define the app concept and core flow.

  • Generate 10 screens in UXPilot using AI prompts.

  • Iterate through refinements to achieve consistency.

  • Prototype the flow in Figma for an interactive experience.

Before diving in, I spent some time experimenting with UXPilot to understand how prompts affect outputs. This was my first time using the tool, so I used a few credits just to play around and learn its quirks.

2. Prompting in UXPilot

I used UXPilot’s Enhance Prompt feature to craft strong starting points for each screen. Each prompt described the layout, style, and key elements.

All Prompts:

3. Iteration & Refinement

Refinement in UXPilot free mode is tricky. There’s no section-level edit, only Global Edit, which means a small tweak can completely change the layout. Some screens took 3–4 iterations to get right.

For example, the Daily Check-in screen initially had a misaligned button and inconsistent colours. I refined the prompt by specifying:

“Keep the layout the same. Make the primary button larger, center it, and use the same pastel gradient as the dashboard.”

Challenges & Constraints

  • No Section-Level Edits: Couldn’t fix small issues without risking the entire design changing.

  • No Figma Export: Free mode only outputs static images, so I couldn’t tweak typography or spacing manually.

  • Visual Artifacts: Buttons weren’t always perfectly rounded, icons varied between screens, and even the user profile name changed (Sarah Johnson vs Sarah Chen).

  • Locked Animations: Fun micro-interactions like confetti on check-in or onboarding animations stayed in UXPilot and couldn’t be exported.

Workarounds

  • Exported each screen as PNG and imported into Figma.

  • Built an interactive prototype by placing 0% opacity hotspots over buttons to simulate navigation.

  • Standardised the bottom navigation by overlaying a consistent 5-icon bar across all screens.

  • Added device mockups and clean layouts for presentation polish.

Final Designs

Learnings

  • Prompt precision is everything: Small wording changes can make or break the output.

  • AI accelerates ideation, not perfection: Manual polish is still essential for consistency.

  • Constraints fuel creativity: Working within free mode limitations forced me to think resourcefully and adapt.

Next Steps

If I had more time (or Pro access), I’d:

  • Apply section edits for pixel-perfect consistency.

  • Export to Figma for full design system integration.

  • Add real animations and micro-interactions for delight.

Closing Note

HabitFlow was designed entirely in UXPilot free mode, proving that AI-assisted design can deliver polished results even under constraints. This project taught me how to guide AI with clarity, adapt to limitations, and still create a cohesive, user-friendly experience.

See Prototype here

Create a free website with Framer, the website builder loved by startups, designers and agencies.