ACADEMIC REDESIGN / HEALTH & WELLNESS

Ovaia.

A little more support for life with PMOS.

Product DesignVibe CodingPrompt EngineeringDesign Systems

ROLE

Product designer

INDUSTRY

Women’s health / Healthtech

TOOLS

Figma, Codex

TIMELINE

1 Week

01 / THE PROJECT

An academic project, revisited.

Ovaia began as an academic project exploring how a digital experience could support people navigating PMOS. The concept brought several parts of day-to-day health management together in one place.

I returned to the project independently to revisit the original experience, make more intentional design decisions and develop a more cohesive interface. This time, I built the redesign entirely through vibe coding, using prompt engineering to guide the output and refine what needed changing.

02 / WHERE IT STARTED

Looking back at the original.

Before redesigning Ovaia, I looked at the original screens and reconsidered how people would move between tracking, resources and support. The goal was to make the experience feel clearer and more connected, without losing the breadth of the original concept.

BEFORE

The original concept

AFTER

The redesigned experience

03 / MY PROCESS

Designing through prompts, not pixels.

I vibe coded the redesign from start to finish. I used prompts to describe the interface and its intended behaviour, reviewed what was generated, identified where the experience fell short, and wrote more specific prompts to improve it.

01 / DIRECT

Translate a design intention into a prompt, including content, layout and interaction expectations.

02 / EVALUATE

Review the generated screens for clarity, consistency and unnecessary complexity.

03 / REFINE

Use targeted follow-up prompts to improve the experience and carry decisions across related screens.

Today / First use design exploration
01 / MAP

Mapping the experience

I started with the structure of the whole app: onboarding, daily tracking, health records, recipes and community. I used prompts to work through the journeys, screen hierarchy and how those parts should connect before worrying about visual polish. The first-use Today wireframe is one example of that early exploration.

04 / DESIGN SYSTEM

Building Ovaia's visual language.

I wanted the redesign to feel welcoming without making health information harder to navigate. I built a shared visual language for reading, taking action and understanding feedback across health records, recipes and community.

01 / BRAND & FOUNDATIONS
Ovaia flower logo mark
ovaia.

Rose and clay give Ovaia its identity. A deeper red is reserved for actions, helping interactive elements stand apart from decorative colour.

Brand rose
Brand clay
Action
Plum text
Page
Card
TYPE / DM SANS
Aa Bb Cc
Your history
Needed to rest after lunch and cancelled my evening plans.
Kept for an appointment

One typeface, with size and weight creating hierarchy. Longer notes stay comfortable to read.

02 / COMPONENTS & INTERACTION

Designed for more than the default state.

I considered what happens when people make a choice, complete an action or encounter an error. Persistent labels, clear selected states and written feedback make those moments easier to understand.

ACTIONS & FEEDBACK
Save check-inEdit preferences
Your check-in has been saved.
Enter a valid email address.
FIELDS & SELECTION
Email address
you@gmail.com
We’ll use this to help you access your account.
MildModerateSevere
CALENDAR STATES
25
Default
26
Today
27
Selected
28
Recorded

A solid fill marks the selected date. Checkmarks are reserved for multiple selections.

SPACING & SHAPE

A repeatable spacing scale keeps related information together and gives separate tasks room to breathe.

4
8
12
16
24
32
48
Controls / cards / pills
STATUS & COMMUNICATION

Colour supports the message, but never carries it alone. Feedback is specific enough to help someone take their next step.

Success
Your check-in has been saved.
Warning
You have unsaved changes.
Error
We couldn’t save your check-in. Please try again.
Information
No entries were recorded on these days.
03 / THE SYSTEM IN PRACTICE

One language, different needs.

Cream surfaces, white cards and plum text bring consistency to different kinds of content. Health records and recipes can feel related without looking identical.

Original Ovaia style guide health record example
Original Ovaia style guide recipe card example
Page → card → content

The cream page establishes the background. White cards group related content. Primary text leads, secondary text supports, and rose identifies actions.

Contrast on white
Primary text 12.4:1
Secondary text 6.3:1
Action text 6.2:1
Explore the full design system ↗
05 / THE REDESIGN

The decisions behind the redesign.

Design decision 1

Tracking that starts with the individual

Rather than asking everyone to track the same things, Ovaia lets people choose which symptoms matter to them. I kept the daily check-in focused on those choices, so recording how they feel doesn't become another task to manage.

Tracking that starts with the individual
Design decision 2

Health information that's easier to revisit

Tracking is only useful if people can make sense of what they've recorded. I brought history and health information into a dedicated space, with clear labels and a structure designed for finding past entries without digging through the app.

Health information that's easier to revisit
Design decision 3

Support beyond symptom tracking

Recipes and community discussions were part of the original idea. In the redesign, I treated them as supporting journeys, making them accessible without competing with the main tracking experience.

Ovaia Recipes screen
Recipes
Ovaia Community screen
Community
06 / REFLECTION

A different way to make design decisions tangible.

This project let me explore what it means to design directly through AI-generated implementation. Prompt engineering helped me move between an idea and a tangible interface quickly, but each iteration still needed careful evaluation and clear design direction.

The next step would be testing the redesigned flows with people navigating PMOS and using what I learn to challenge my assumptions.

07 / INTERACTIVE PROTOTYPE

Explore Ovaia for yourself.

Take a look around the prototype and explore how the different parts of the experience connect.

ACADEMIC REDESIGN / HEALTH & WELLNESS

Ovaia.

A little more support for life with PMOS.

Product DesignVibe CodingPrompt EngineeringDesign Systems

ROLE

Product designer

INDUSTRY

Women’s health / Healthtech

TOOLS

Figma, Codex

TIMELINE

1 Week

01 / THE PROJECT

An academic project, revisited.

Ovaia began as an academic project exploring how a digital experience could support people navigating PMOS. The concept brought several parts of day-to-day health management together in one place.

I returned to the project independently to revisit the original experience, make more intentional design decisions and develop a more cohesive interface. This time, I built the redesign entirely through vibe coding, using prompt engineering to guide the output and refine what needed changing.

02 / WHERE IT STARTED

Looking back at the original.

Before redesigning Ovaia, I looked at the original screens and reconsidered how people would move between tracking, resources and support. The goal was to make the experience feel clearer and more connected, without losing the breadth of the original concept.

BEFORE

The original concept

AFTER

The redesigned experience

03 / MY PROCESS

Designing through prompts, not pixels.

I vibe coded the redesign from start to finish. I used prompts to describe the interface and its intended behaviour, reviewed what was generated, identified where the experience fell short, and wrote more specific prompts to improve it.

01 / DIRECT

Translate a design intention into a prompt, including content, layout and interaction expectations.

02 / EVALUATE

Review the generated screens for clarity, consistency and unnecessary complexity.

03 / REFINE

Use targeted follow-up prompts to improve the experience and carry decisions across related screens.

Today / First use design exploration
01 / MAP

Mapping the experience

I started with the structure of the whole app: onboarding, daily tracking, health records, recipes and community. I used prompts to work through the journeys, screen hierarchy and how those parts should connect before worrying about visual polish. The first-use Today wireframe is one example of that early exploration.

04 / DESIGN SYSTEM

Building Ovaia's visual language.

I wanted the redesign to feel welcoming without making health information harder to navigate. I built a shared visual language for reading, taking action and understanding feedback across health records, recipes and community.

01 / BRAND & FOUNDATIONS
Ovaia flower logo mark
ovaia.

Rose and clay give Ovaia its identity. A deeper red is reserved for actions, helping interactive elements stand apart from decorative colour.

Brand rose
Brand clay
Action
Plum text
Page
Card
TYPE / DM SANS
Aa Bb Cc
Your history
Needed to rest after lunch and cancelled my evening plans.
Kept for an appointment

One typeface, with size and weight creating hierarchy. Longer notes stay comfortable to read.

02 / COMPONENTS & INTERACTION

Designed for more than the default state.

I considered what happens when people make a choice, complete an action or encounter an error. Persistent labels, clear selected states and written feedback make those moments easier to understand.

ACTIONS & FEEDBACK
Save check-inEdit preferences
Your check-in has been saved.
Enter a valid email address.
FIELDS & SELECTION
Email address
you@gmail.com
We’ll use this to help you access your account.
MildModerateSevere
CALENDAR STATES
25
Default
26
Today
27
Selected
28
Recorded

A solid fill marks the selected date. Checkmarks are reserved for multiple selections.

SPACING & SHAPE

A repeatable spacing scale keeps related information together and gives separate tasks room to breathe.

4
8
12
16
24
32
48
Controls / cards / pills
STATUS & COMMUNICATION

Colour supports the message, but never carries it alone. Feedback is specific enough to help someone take their next step.

Success
Your check-in has been saved.
Warning
You have unsaved changes.
Error
We couldn’t save your check-in. Please try again.
Information
No entries were recorded on these days.
03 / THE SYSTEM IN PRACTICE

One language, different needs.

Cream surfaces, white cards and plum text bring consistency to different kinds of content. Health records and recipes can feel related without looking identical.

Original Ovaia style guide health record example
Original Ovaia style guide recipe card example
Page → card → content

The cream page establishes the background. White cards group related content. Primary text leads, secondary text supports, and rose identifies actions.

Contrast on white
Primary text 12.4:1
Secondary text 6.3:1
Action text 6.2:1
Explore the full design system ↗
05 / THE REDESIGN

The decisions behind the redesign.

Design decision 1

Tracking that starts with the individual

Rather than asking everyone to track the same things, Ovaia lets people choose which symptoms matter to them. I kept the daily check-in focused on those choices, so recording how they feel doesn't become another task to manage.

Tracking that starts with the individual
Design decision 2

Health information that's easier to revisit

Tracking is only useful if people can make sense of what they've recorded. I brought history and health information into a dedicated space, with clear labels and a structure designed for finding past entries without digging through the app.

Health information that's easier to revisit
Design decision 3

Support beyond symptom tracking

Recipes and community discussions were part of the original idea. In the redesign, I treated them as supporting journeys, making them accessible without competing with the main tracking experience.

Ovaia Recipes screen
Recipes
Ovaia Community screen
Community
06 / REFLECTION

A different way to make design decisions tangible.

This project let me explore what it means to design directly through AI-generated implementation. Prompt engineering helped me move between an idea and a tangible interface quickly, but each iteration still needed careful evaluation and clear design direction.

The next step would be testing the redesigned flows with people navigating PMOS and using what I learn to challenge my assumptions.

07 / INTERACTIVE PROTOTYPE

Explore Ovaia for yourself.

Take a look around the prototype and explore how the different parts of the experience connect.

ACADEMIC REDESIGN / HEALTH & WELLNESS

Ovaia.

A little more support for life with PMOS.

Product DesignVibe CodingPrompt EngineeringDesign Systems

ROLE

Product designer

INDUSTRY

Women’s health / Healthtech

TOOLS

Figma, Codex

TIMELINE

1 Week

01 / THE PROJECT

An academic project, revisited.

Ovaia began as an academic project exploring how a digital experience could support people navigating PMOS. The concept brought several parts of day-to-day health management together in one place.

I returned to the project independently to revisit the original experience, make more intentional design decisions and develop a more cohesive interface. This time, I built the redesign entirely through vibe coding, using prompt engineering to guide the output and refine what needed changing.

02 / WHERE IT STARTED

Looking back at the original.

Before redesigning Ovaia, I looked at the original screens and reconsidered how people would move between tracking, resources and support. The goal was to make the experience feel clearer and more connected, without losing the breadth of the original concept.

BEFORE

The original concept

AFTER

The redesigned experience

03 / MY PROCESS

Designing through prompts, not pixels.

I vibe coded the redesign from start to finish. I used prompts to describe the interface and its intended behaviour, reviewed what was generated, identified where the experience fell short, and wrote more specific prompts to improve it.

01 / DIRECT

Translate a design intention into a prompt, including content, layout and interaction expectations.

02 / EVALUATE

Review the generated screens for clarity, consistency and unnecessary complexity.

03 / REFINE

Use targeted follow-up prompts to improve the experience and carry decisions across related screens.

Today / First use design exploration
01 / MAP

Mapping the experience

I started with the structure of the whole app: onboarding, daily tracking, health records, recipes and community. I used prompts to work through the journeys, screen hierarchy and how those parts should connect before worrying about visual polish. The first-use Today wireframe is one example of that early exploration.

04 / DESIGN SYSTEM

Building Ovaia's visual language.

I wanted the redesign to feel welcoming without making health information harder to navigate. I built a shared visual language for reading, taking action and understanding feedback across health records, recipes and community.

01 / BRAND & FOUNDATIONS
Ovaia flower logo mark
ovaia.

Rose and clay give Ovaia its identity. A deeper red is reserved for actions, helping interactive elements stand apart from decorative colour.

Brand rose
Brand clay
Action
Plum text
Page
Card
TYPE / DM SANS
Aa Bb Cc
Your history
Needed to rest after lunch and cancelled my evening plans.
Kept for an appointment

One typeface, with size and weight creating hierarchy. Longer notes stay comfortable to read.

02 / COMPONENTS & INTERACTION

Designed for more than the default state.

I considered what happens when people make a choice, complete an action or encounter an error. Persistent labels, clear selected states and written feedback make those moments easier to understand.

ACTIONS & FEEDBACK
Save check-inEdit preferences
Your check-in has been saved.
Enter a valid email address.
FIELDS & SELECTION
Email address
you@gmail.com
We’ll use this to help you access your account.
MildModerateSevere
CALENDAR STATES
25
Default
26
Today
27
Selected
28
Recorded

A solid fill marks the selected date. Checkmarks are reserved for multiple selections.

SPACING & SHAPE

A repeatable spacing scale keeps related information together and gives separate tasks room to breathe.

4
8
12
16
24
32
48
Controls / cards / pills
STATUS & COMMUNICATION

Colour supports the message, but never carries it alone. Feedback is specific enough to help someone take their next step.

Success
Your check-in has been saved.
Warning
You have unsaved changes.
Error
We couldn’t save your check-in. Please try again.
Information
No entries were recorded on these days.
03 / THE SYSTEM IN PRACTICE

One language, different needs.

Cream surfaces, white cards and plum text bring consistency to different kinds of content. Health records and recipes can feel related without looking identical.

Original Ovaia style guide health record example
Original Ovaia style guide recipe card example
Page → card → content

The cream page establishes the background. White cards group related content. Primary text leads, secondary text supports, and rose identifies actions.

Contrast on white
Primary text 12.4:1
Secondary text 6.3:1
Action text 6.2:1
Explore the full design system ↗
05 / THE REDESIGN

The decisions behind the redesign.

Design decision 1

Tracking that starts with the individual

Rather than asking everyone to track the same things, Ovaia lets people choose which symptoms matter to them. I kept the daily check-in focused on those choices, so recording how they feel doesn't become another task to manage.

Tracking that starts with the individual
Design decision 2

Health information that's easier to revisit

Tracking is only useful if people can make sense of what they've recorded. I brought history and health information into a dedicated space, with clear labels and a structure designed for finding past entries without digging through the app.

Health information that's easier to revisit
Design decision 3

Support beyond symptom tracking

Recipes and community discussions were part of the original idea. In the redesign, I treated them as supporting journeys, making them accessible without competing with the main tracking experience.

Ovaia Recipes screen
Recipes
Ovaia Community screen
Community
06 / REFLECTION

A different way to make design decisions tangible.

This project let me explore what it means to design directly through AI-generated implementation. Prompt engineering helped me move between an idea and a tangible interface quickly, but each iteration still needed careful evaluation and clear design direction.

The next step would be testing the redesigned flows with people navigating PMOS and using what I learn to challenge my assumptions.

07 / INTERACTIVE PROTOTYPE

Explore Ovaia for yourself.

Take a look around the prototype and explore how the different parts of the experience connect.