Overview

Moonly is a modern astrology and tarot-reading app designed to bring clarity, guidance, and self-discovery into users’ daily lives. My goal was to create a mystical yet intuitive mobile experience where users can explore their horoscope, check compatibility, draw daily tarot cards, and understand deeper aspects of their personality. Through a blend of bold gradients, neon illustrations, and seamless navigation, Moonly transforms esoteric concepts into a visually immersive, user-friendly journey.

The Challenge

Astrology and tarot apps often feel cluttered, outdated, or overwhelming. Users want spiritual insights, but they also expect:

• A visually enchanting experience that feels magical

• Clear and approachable navigation

• Accurate, personalized content based on their zodiac and birth data

• Smooth micro-interactions that enhance emotional engagement

The challenge was to strike the perfect balance between a mystical atmosphere and practical usability.

The Solution

I created a visually rich and highly structured mobile interface that makes complex spiritual content easy to explore. The app is built around clarity, engagement, and personalization.

1. Onboarding: Understanding the User’s Energy

Onboarding screens guide users through essential inputs like:

• Gender energy balance

• Relationship status

• Date of birth

Each screen combines spiritual symbols, progress indicators, and micro-animations, making the process feel meaningful rather than tedious.

The visual language—cosmic purples, soft glows, and illustrated zodiac icons—immediately sets a mystical tone.

2. Home Screen: Personalized Astro-Journey

Upon logging in, the user is greeted with:

• Their name and zodiac sign

• Animated zodiac icons

• Quick profile switching for viewing multiple people’s charts

• Key astro-data like sun, moon, and rising signs

• A daily horoscope categorized into Work, Love, and Life

Hierarchy and spacing ensure users can absorb spiritual insights without feeling overwhelmed.

A glowing “More Details” button guides them deeper into readings.

3. Compatibility Checker: Exploring Relationships

The compatibility section visually showcases:

• The user’s sign

• The partner/friend's sign

• A horizontal carousel of zodiac signs

• Connection indicators and emotional insights

Large illustrated zodiac icons and animated hearts make the experience interactive and fun.

A clear CTA — Check Compatibility — simplifies the decision-making flow.

4. Daily Tarot: Rituals in Motion

Daily Tarot introduces a tactile, ritual-like interaction:

• A spread of mystical cards

• Three main card slots (Career, Love, Overall)

• An interactive card-selection motion to simulate real tarot reading

• Vibrant, glowing card designs for visual impact

The user taps "Get Reading" or “Open Tarot Cards” to reveal insights, creating anticipation and emotional engagement.

5. Profile & Settings: Tailored Spiritual Experience

Users can personalize:

• Notification preferences

• App appearance (dark mode is default for immersion)

• Font sizes

• Subscriptions

• Saved readings and compatibility results

Even the settings maintain the celestial theme through icons, gradients, and soft glows.

UI Design Language

Color Palette

• Deep purples & midnight blues → create a cosmic foundation

• Neon gradients (pink, blue, violet) → add magical vibrancy

• Soft glowing accents → mimic celestial energy

Typography

• Clean sans-serif for readability

• Elegant spacing for calm, intentional rhythm

• Highlight colors for elements like zodiac signs or percentages

Icon & Illustration Style

• Hand-drawn inspired zodiac symbols

• Gradient-based, neon-effect illustrations

• Circular shapes to reinforce the theme of cycles and planets

User Experience Highlights

• Emotion-driven design: Visuals enhance spiritual engagement.

• Clear navigation: Four-tab bottom bar—Home, Compatibility, Tarot, Profile.

• Gamified interactions: Card flipping, animated icons, and progress bars.

• Highly personalized: Every reading feels tailored to the user’s identity.

• Consistent atmosphere: Every screen supports the mystical universe of Moonly.