HabitFlow – A Minimal Habit Tracking App

A calm, uplifting way to build habits and stay consistent.

__________________________________________________________________________

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.

Core Concept

• Visual Progress: Circular progress rings and streak counters make progress tangible.
• Positive Reinforcement: Motivational messages and celebratory states for completed habits.
• Social Accountability: A Buddy Mode to share progress with a friend.
• Minimal Aesthetic: Soft pastel colors, rounded shapes, and generous white space for a calm experience.

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.

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 Screens

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.

VIEW PROTOTYPE HERE