UX + CONTENT DESIGN / JUNE 2026
From tracking a cycle
to planning a day.
A menstrual wellness concept that brings cycle information, symptom notes, and everyday food, movement, and rest options into one flow.
Read the design story ↓Interviews · Empathy & journey maps
UI flow · Prototyping · Usability tests
Use sample inputs. Entries stay in this visit and disappear on reload.
Illustrative wellness content; no diagnosis or medical recommendations.
DivaFlo explores the space between knowing a period is coming and knowing how to prepare for the day.
Cycle tracking, symptom notes, and everyday wellness decisions often live in separate places. The concept brings them into a single flow, with food, movement, and rest options inspired in part by Chinese wellness traditions.
Interviews, empathy & journey maps,
UI flow, prototyping & usability tests
8-screen course prototype
& a refined portfolio demo
Early interviews shifted the question from “How might we build another tracker?” to “How might we make tracking useful in everyday life?”
interviewees tracked their cycles and described disruption to everyday life.
regularly tracked symptoms—suggesting logging needed to feel worth the effort.
wanted proactive guidance beyond cycle predictions.
Five college women, ages 19–20, interviewed in June 2026. These are exploratory findings from a small convenience sample, not population estimates.
The composite persona, Joanna, needed guidance that fit around a full student schedule. The empathy map separates observed behavior from inferred thoughts; the journey map shows where intentions faded before the next cycle.
The opportunity was to make preparation easier to find, easier to save, and easier to revisit.
Original course artifacts. The interactive portfolio demo above extends this work with responsive logging, complete recipes, and updating save counts.
Named symptoms, labeled intensity, and an explicit save action make it clear that this path captures how someone feels.
How are you? 😊 😐 😣
MORE EXPLICITWhat are you noticing?
Cramps · Low energy · Bloating
A separate, prominent action takes visitors to practical options. Short explanations make the relationship between an input and the sample plan visible.
Your next period is approaching.
TO A CLEAR NEXT STEPExplore a gentle movement option.
See My Plan
Logging should visibly update the experience. The demo acknowledges a saved entry, reflects it on Today, and explains the plan’s selection rules.
Symptoms saved for this visit.
MAKE THE REASON VISIBLEThis lower-effort option appears because you selected low energy.
The copy comparisons above are illustrative rewrites in this portfolio version, not archived screenshots of the original prototype.
Two think-aloud participants immediately understood the concept and chose “See My Plan” first. Their sessions also revealed specific gaps between what the interface promised and what it actually did.
Observation: One tester looked for the logger under the forecast, then expected a change after saving.
Refinement: Separate “Log Symptoms” from “See My Plan,” confirm the save, and show the logged inputs in the plan.
Observation: A tester expected a complete recipe. Another expected named responses rather than emojis.
Refinement: Add ingredients and methods to recipe details and use text labels for symptom selection.
Observation: Both testers noticed that progress did not reflect saved recommendations. Peer critique also asked for a clearer saved state.
Refinement: Update the saved count immediately and preserve the selected state on each card.
Two think-aloud sessions revealed navigation, feedback, and content gaps. The portfolio refinements have not yet been re-tested, so their effect on usability remains unmeasured. No clinical, retention, or conversion outcome is claimed.
The next test should evaluate comprehension and task completion, rather than whether the interface looks finished.