Your calendar doesn't know how you feel.
Ayika is an energy-aware calendar add-in that scores events based on your body's natural rhythms. I designed the product across two platforms with radically different constraints, then built a marketing website with a phase calculator to drive early adoption.
Calendars treat all time as equal.
Your calendar knows when you're free. It has no idea whether you'll have the energy for what's scheduled. A brainstorming session at 3 PM during a low-energy phase is set up to fail, but your calendar doesn't know that, and neither do you until you're sitting in the meeting wondering why your brain won't cooperate.
Ayika's founder came to me with a PRD built around a core insight: the body cycles through predictable energy phases that should inform how we schedule. My job was to turn that concept into a product that works inside the calendar apps people already use (as an Outlook and Google Calendar add-in, not a standalone app). That constraint defined everything.
The Ayika Score – 0 to 100
Energy tracking for every body.
The product concept started with menstrual cycles, a well-documented source of predictable energy fluctuation. But that would exclude half the population. The Ghost Cycle was the design decision that made Ayika universal.
Ghost Cycle maps energy phases to the lunar cycle, a 29.5-day rhythm that anyone can use regardless of biology. It's not pseudoscience; it's a structured framework that gives non-menstruating users the same phase-based scheduling benefits. Both tracking modes ship in the MVP, with a third (Custom Pattern, powered by ML) planned for post-MVP when mood tracking is introduced.
Menstrual Cycle
Four biological phases with documented energy, creativity, and focus patterns. The most precise tracking mode.
In MVP- →Renewal – rest & reflection
- →Manifestation – growth & creativity
- →Release – peak energy & focus
- →Nurture – analysis & structure
- →Restore – review & prepare
Ghost Cycle
Lunar-based 29.5-day rhythm for anyone. Same phase structure, same energy insights: biology-independent.
In MVP- →Same five energy phases as menstrual mode
- →Mapped to lunar cycle instead of biology
- →No period tracking required
- →Inclusive for all genders
- →Automatic phase detection from moon position
One product. Two platforms. Completely different rules.
The hardest part of Ayika wasn't the concept. It was making it work inside calendar add-in frameworks that each have their own restrictions. I worked closely with the dev team to map every constraint before designing a single screen. What I learned: Outlook gives you room to be creative. Google… doesn't.
- ✓Custom styling and backgrounds
- ✓Stylized score cards with visual hierarchy
- ✓Custom icons as native elements
- ✓Tab navigation (Overview, Tracking, Forecast)
- ✓Richer interaction patterns
- ✓Flexible layout composition
- ✗No custom styling or backgrounds
- ✗No stylized cards – plain text only
- ✗Custom icons only as images (performance cost)
- ✗No tab navigation
- ✗Limited interaction types
- ✗Restricted layout options
The choices that shaped the product.
Scores live on the event, not on a separate page
When you open any calendar event, Ayika shows the score right there: phase energy percentage, time-of-day factor, event demand. 'Find Better Time' appears inline. The user never leaves their calendar workflow.
Teach the phases before showing scores
Before users see their first score, a two-step tutorial explains the five energy phases: Renewal, Manifestation, Release, Nurture, Restore. Understanding why a score is 85% matters more than seeing the number.
Proactive suggestions, not just scores
'This time may not be optimal for your energy levels.' 'Good match: Wrap phase supports high energy activities.' The system doesn't just score. It explains and recommends, including nutrition (protein-rich vs processed) and exercise guidance.
Show the math behind every score
Score Factors break down exactly how the 85% was calculated: phase energy, time-of-day alignment, event demand, and event load. Users learn their own patterns over time instead of trusting a black box.
What to ship now. What to hold.
The hardest part of designing a product with this much potential is deciding what not to build yet. I designed the full vision (forecasting, mood tracking, custom ML patterns, data import from other apps), but the MVP needed to prove one thing: do energy scores on calendar events change how people schedule? Everything else is a feature. That's the hypothesis.
Shipped in MVP
- Connect calendar (Outlook + Google)
- Menstrual Cycle tracking mode
- Ghost Cycle tracking mode
- Ayika Score on every event (0–100)
- Score factor breakdown
- Find Better Time suggestions
- Phase tutorial onboarding
- Contextual insights (nutrition, exercise)
Designed, Held for Later
- Custom Pattern mode (ML-driven)
- Energy & mood tracking
- 4-week forecasting view
- Import data from other tracking apps
- Team scheduling insights
- Historical pattern analysis
The website as conversion tool.
I designed and prototyped the marketing website from scratch: concept, strategy, copy, design, and a coded prototype with micro-interactions to guide the dev team on implementation. The centerpiece: a phase calculator that lets visitors experience Ayika's core value before installing anything.
Phase Calculator
Input your last period start date and cycle length. Instantly see your current phase with today's focus recommendations. A taste of the full product, designed as the primary conversion funnel.
Waitlist → Phase Result
After calculating their phase, users see a result card with their phase name, cycle day, and tailored recommendations, then a 'Join Waitlist' prompt while the insight is fresh. Conversion at peak interest.
Coded Prototype
I prototyped the website in code to demonstrate micro-interactions for the dev team: transitions, scroll behaviors, hover states. Not a static Figma handoff but a living reference the developers could inspect.
Building a system from a brand document.
I received the brand guidelines (colors, fonts, and logo) and built a full design system in Figma: variables and tokens, component library, and the visual language that needed to work across two add-in platforms with radically different rendering capabilities and a marketing website. The challenge was creating a system flexible enough to look polished in Outlook, functional in Google's stripped environment, and expressive on the web, all from the same token set.
In beta. Proving the hypothesis.
Designing for platforms you don't control.
Ayika taught me something fundamentally different from Spotta (where I controlled everything) and Trainest (where I worked within an established product). Here, I was designing for someone else's platform, with someone else's rules, handed off to someone else's engineering team. That's a different design muscle entirely, and arguably the one most relevant to working at companies like Notion, Linear, or Figma.
Constraints reveal priorities
When Google strips away custom styling, tabs, and rich cards, you discover what actually matters: the score, the phase, the action button. The stripped version forced clarity about what the product really is.
Design with dev, not for dev
I couldn't design the Google add-in without understanding what the framework allowed. Working with the dev team to map constraints before opening Figma meant zero wasted screens and zero 'this isn't possible' moments.
Prototypes beat specs
Building a coded website prototype communicated micro-interactions for the dev team more effectively than any annotation layer. The dev team could inspect real CSS transitions instead of interpreting my descriptions of them.
Inclusive design is product strategy
Ghost Cycle isn't a feature checkbox. It doubled the addressable market. The most impactful design decision I made wasn't visual. It was deciding that energy tracking shouldn't require a menstrual cycle.
iOS App + Trainer Platform for fitness gamification.