Case Study · Product Design · Front-End Development · 2024–2025
The spiritual wellness space is fragmented. People interested in tarot, astrology, moon cycles or numerology typically bounce between multiple apps and websites, none of which talk to each other or share a visual language.
For the final project of a Professional Certificate in Front-End Web Design, I set out to build a unified platform that brought all four together. Not just as a coding exercise, but as a fully considered product with its own design system, visual identity, and working interactive features.
Everything was designed in Figma first, then built in AstroJS with custom JavaScript for the interactive features including the live numerology calculator and dynamic moon phase detection based on today's date.
Everything. User research, Figma wireframes and high-fidelity designs, complete design system, AstroJS build, JavaScript for interactive features, deployment to GitHub Pages.
Live and accessible at katie-ucd.github.io/dailyDivination
Users interested in spiritual wellness had no single destination. Tarot apps, astrology apps, moon calendar apps — all separate, all with different visual languages, none designed to work together.
I wireframed every screen in Figma before writing a line of code. The visual identity came first: warm blush tones, illustrated zodiac symbols, antique tarot card imagery. Then the design system. Then the build.
A fully responsive, live product with working tarot draws, real-time moon phase detection, interactive horoscope accordions, and a numerology calculator that computes your life path number from any date of birth.
The challenge was building four genuinely different content types — cards, horoscopes, moon calendars, a calculator — without the product feeling like four separate things bolted together.
The answer was a tight design system. Shared typography, a consistent colour palette of warm blush and soft lavender with an amber accent, and a visual language rooted in antique illustration that runs through every feature.
Single card draw and three-card spread. Each card pulled from a full deck with illustrated imagery and interpreted meaning. Randomised on each visit.
All 12 signs in an accordion layout. Illustrated zodiac symbols, date ranges, element and ruling planet. Expandable readings for each sign.
Real-time moon phase detection based on today's date. All eight phases documented with meaning. Lunar photography throughout.
Enter any date of birth to calculate your life path number. Working JavaScript calculator with interpretations for all 12 numbers including master numbers 11, 22 and 33.
Explored existing apps in the spiritual wellness space. Identified the fragmentation problem and defined the four features to unify.
User ResearchLow-fidelity mobile wireframes for all screens and states. Interaction patterns defined before visual design began.
FigmaHigh-fidelity designs in Figma. Colour palette, typography, component library, illustration style all defined and documented.
FigmaBuilt in AstroJS with custom JavaScript for interactive features. Deployed to GitHub Pages. Tested across mobile, tablet and desktop.
AstroJS · JavaScript · GitHub
One of the things I care about with personal projects is that they ship. Daily Divination is live on GitHub Pages, responsive across all screen sizes, and fully functional.
The numerology calculator works. The tarot deck shuffles. The moon phase updates daily. It's not a prototype.
View live site →
"I wanted to prove I could design something beautiful and build it properly. This was the project where those two things finally came together."Katie Flynn, Designer and Front-End Developer
Tarot, horoscope, moon phases and numerology in one coherent platform.
A fully documented design system in Figma before a line of code was written.
Deployed to GitHub Pages. Responsive. Working interactive features. Not a prototype.