Designing a non-punitive habit tracker

Four people, three weeks, and one very patient sunflower.

How it all started

During my Project Management with AI training at Fired Up, I worked in a team of four in an agile setup for three weeks. I brought experience in designing and building digital products. Two teammates brought experience in operations, processes, and business strategy, while another had a background in art curation and exhibition management.

The PM rotated each week and their main role was to facilitate the meetings and submit the deliverables for each week. The rest of the work was collaborative. I chose not to take a turn as a PM so I could focus on helping the team design and build.

The challenge

At first, we were given a broad challenge:

Design a way to help people start or stick with a habit that improves mental or physical wellbeing.

We conducted research individually around habits: pain points, strategies, existing solutions. We then met in person to discuss our findings and share our own personal experiences.

I set up a FigJam for the team so we could document all our work there, as well as work collaboratively in an easy way. Then, I connected Claude to Figma and instructed it to build an affinity map from all our research findings.

Affinity mapping of initial research

Restart Rosa

As a next step, we defined our problem statement together and then instructed Claude to create a persona for us to focus on.

Problem statement

Claude came up with Restart Rosa, the serial restarter as our persona. She is 28 to 38, lives in a big city, works full time, and time is her scarcest resource. She starts habits with real excitement, but her motivation fades within weeks.

After this, I instructed Claude to fill in the Empathy Map template in FigJam referring back to the original research.

The empathy map that shaped the product tone

The crazy 8

To come up with a solution to our problem, we first brainstormed together using the Crazy 8 technique.

The Crazy 8 affinity mapping and voting

Each of us then proposed a product concept. We voted again, and Keep It Alive won.

Instead of a streak counter waiting to punish you, your habit lives as something that grows, a little plant that gently gets stronger every time you show up, even in the smallest way.

The Impact-Effort Matrix

Next, we brainstormed ways to bring Keep It Alive to life, then used an Impact-Effort Matrix to prioritise features for the MVP.

The Impact-Effort Matrix

The PM of the week refined the High-Impact/Low-Effort stickies into our sprint epics:

Each epic was assigned to one of us to complete with user stories and success metrics. During this planning phase I owned Personalisation & Socials. During the execution phase later on, I owned Visuals & Growth.

Success metrics defined upfront

We finalised (together with Claude) the following metrics to track at the end of the sprint. These metrics guided us not only to conduct successful user testing, but also to keep our solution as simple as possible.

The sprint is on

During the sprint, I owned the following user stories:

My Visuals & Growth stories depended on decisions in the Check-ins & Tracking epic, owned by another teammate. We coordinated and decided that for the MVP, the user would only be able to check in a full effort or a small effort. This influenced the design of the plant's intermediate growth stages.

Additionally, I owned the visual identity of our product, as well as defining design guidelines, so in the end everything looked and felt consistent.

Re: visual identity, I proposed that we follow a similar vibe to Cat On Chair and everyone was on board. We chose the sunflower as our starting plant, since it represents growth and resilience.

Re: the design system, I found one in Figma Community that matched my vision and adjusted it with the colours and typography that I defined myself, leaving spacing and other specs untouched. The md file below was generated by Claude based on Figma.

:root {
  --color-white: #F4F4F4;
  --color-gray-1: #F0EFEC;
  --color-gray-2: #E7E5E1;
  --color-gray-3: #C2C2C2;
  --color-gray-4: #969696;
  --color-gray-5: #656565;
  --color-gray-6: #454545;
  --color-black: #1B1B1B;

  --color-red: #954A2E;
  --color-orange: #C9754E;
  --color-sunflower: #DBB155;
  --color-green: #516924;
  --color-teal: #67A6AC;
  --color-purple: #8D4F7B;

  --font-winky-rough: 'Winky Rough', system-ui, sans-serif;

  --text-display-lg: 64px;  --leading-display-lg: 1.2;
  --text-display: 48px;     --leading-display: 60px;
  --text-header-1: 34px;    --leading-header-1: 1.0;
  --text-header-2: 28px;    --leading-header-2: 1.2;
  --text-header-3: 24px;    --leading-header-3: 1.0;
  --text-body-lg: 22px;     --leading-body-lg: 28px;
  --text-body: 18px;        --leading-body: 24px;      --tracking-body: 0.18px;
  --text-caption: 16px;     --leading-caption: 1.0;    --tracking-caption: 0.32px;
  --text-tiny: 14px;        --leading-tiny: 18px;      --tracking-tiny: 0.28px;
  --text-uppercase-lg: 20px; --leading-uppercase-lg: 24px; --tracking-uppercase-lg: 0.4px;
  --text-uppercase: 16px;   --leading-uppercase: 20px; --tracking-uppercase: 0.32px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --spacing-4: 4px;   --spacing-5: 5px;   --spacing-6: 6px;   --spacing-8: 8px;
  --spacing-10: 10px; --spacing-12: 12px; --spacing-14: 14px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px;
  --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-80: 80px;

  --radius-checkbox: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-card: 16px;
  --radius-full: 44px;
  --radius-full-2: 200px;

  --stroke-standard: 2px;
  --stroke-radio-selected: 7px;

  --surface-white: #F4F4F4;
  --surface-gray-1: #F0EFEC;
  --surface-gray-2: #E7E5E1;
  --surface-black: #1B1B1B;
}

The growth logic

1. Seedling

   The starting stage.

   1. 

      100%

2. Sprouting

   First growth stage.

   1. 

      20%

   2. 

      40%

   3. 

      60%

   4. 

      80%

   5. 

      100%

3. Growing

   Second growth stage.

   1. 

      20%

   2. 

      40%

   3. 

      60%

   4. 

      80%

   5. 

      100%

4. Blooming

   Third growth stage.

   1. 

      20%

   2. 

      40%

   3. 

      60%

   4. 

      80%

   5. 

      100%

5. Full bloom

   Added retrospectively to reach 21 full-effort check-ins.

   1. 

      100%

For every small-effort check-in the sunflower would grow by 20%. For every full-effort check-in the sunflower would grow by 40%.

For the sake of testing the prototype, together with the Check-ins & Tracking epic owner, we capped visual growth at three sunflower cycles: 21 full-effort check-ins or 45 small-effort check-ins. Beyond that, the user could still check in, but no new sunflower would grow.

After the sprint was done, I removed the 21-full-check-in limit, as science says 21-day habit rule is anecdotal. Instead, I added a milestone celebration at 66 check-ins, regardless of the growth stage, then let the sunflower reach the full bloom stage one final time.

Design mindfully first!

Another team member, inspired by the defined visual identity, sketched the room, which I then digitised and used as our final room design.

I designed the following screens in Figma myself, and then asked Claude to follow the design system as well as my layouts to add all the growth stages across both the small-effort and full-effort paths. The copy in the check-in confirmation screens is fully AI-generated, while the copy of the CTAs and the check-in screen itself was defined by me.

The onboarding screens were designed by two teammates in Claude Design. I again instructed Claude to redesign the screens using our design guidelines. Overall it worked well, but I still had to make a few adjustments:

Welcome screen

Name your plant

Choose a habit

Choose an anchor

I designed the Non-Punitive Recovery screens in Figma together with the teammate who owned that epic. While, the screens for progress-tracking (a.k.a the Garden) were added directly with prompts in Figma Make. This time, I let the AI take over.

The prototype

As a team, we used Figma Make to generate a clickable prototype from the design guidelines and the screens. Since we were working simultaneously and had limited tokens, we decided to create three mini prototypes separately: Onboarding, Check-ins & Tracking, and then Recovery.

We used Figma Make's default model to save tokens and overall the results were acceptable. However, it struggled with the positioning of the room when zoomed in for a check-in. It wasn't perfect, but it was testable.

The end-to-end XP

We still wanted a full end-to-end experience that we could share at the end of the sprint. Being the only one with the relevant experience in the team, I built it with Codex, GitHub, and Vercel.

On top of our designed screens, I enhanced the experience with more animations to make it feel ALIVE!

User testing

To recruit course participants who matched our persona, I posted this message on Slack:

Hello everyone,

are you a Restart Rosa and want to participate in the user testing of our product Keep It Alive?

Rosa starts a new habit with real excitement and a big goal in mind, but there is no fixed regular trigger, so the habit competes with everything else in her life. As motivation drops, effort feels heavier, and missed times turn into forgetting. When she comes back, she restarts from zero and loses every bit of progress she had built. Perfectionism makes it worse: if it does not look or feel good quickly, she drops it. Aggressive reminders push her away instead of pulling her back.

React with:

• ✅ Yep, count me in
• 🚫 Nah, I am a Rhythm Rae

Thank you! Details will follow as DM.

We ran the sessions separately, each moderating and taking notes during our own time slots. We prepared a shared script and note-taking template beforehand.

We measured the success metrics that we defined during the planning phase. Here are the results:

Changes during the sprint

4/6 testers didn't understand the value of showing a % in each check-in log. They felt the percentages clashed with the rest of the concept by shifting the focus back to numbers. Additionally, they found the visuals too small to have an impact.

This was the only screen we generated entirely through a prompt and kept exactly as the AI created it. Very important lesson!

Even though only one tester felt the recovery message predicted failure, our goal was for no one to feel that way, so we rewrote that too.

The next sprint

6/6 testers understood the check-in and the growth metaphor, however 4/6 pointed out that they would like at least a third option to log: "None at all".

The decision to log only two options was deliberate, as designing for more nuanced progress also requires more intermediate illustrations. However, adding the option for "None at all" didn't occur to us. That won't have an effect on the illustrations and it would add a lot of value to our concept. This is the beauty of testing with real people, as you reach that "aha" moment yourself as a designer.

We moved this to the next sprint so we could think through where the option belongs on the check-in screen and which confirmation messages to show.