StarCrossed
Rebranding and reimagining an astrology app through micro-interactions and a fresh visual identity
StarCrossed is a rebrand of “The Pattern”, an astrology app with strong content but flat visuals, repetitive screens, and disengaging interactions. I redesigned the app to infuse personality, garner attention, and create playful, engaging micro-interactions centered around user compatibility and astrology. The result is a smoother, more delightful experience aligned with the emotional and whimsical tone of the app’s theme.
DEMO/LIVE PROTOTYPE
ROLE
Solo UX/UI Designer
TIME
3 Months
TOOLS
Figma, Jitter
INITIAL RESEARCH
What problem am I trying to solve?
The Pattern’s original design lacked visual variation from page to page, effortlessly smooth navigation, and interactive movement.
These issues made the experience feel monotonous and uninspiring.
PROBLEM
Understanding Feelings Behind Astrology
Why is the problem important?
Users of astrology apps seek meaning, connection, and play. For them, interactions are part of the emotional experience. In fact, Gen Z makes up over 60% of online astrology users, with most seeking relationship guidance, underscoring the need for emotionally engaging design.
Source: Astroyogi Survey
Who am I solving for?
Target Audience
Young adults (18–28), interested in spirituality, self-discovery, and connection—especially those who use astrology apps to check compatibility and explore personality traits.
User Persona
Maya, a 20-year-old art student who enjoys spiritual apps with unique aesthetics and engaging, creative content. She values intuitive navigation, visual storytelling, and interactions that feel fun and personalized.
PROBLEM STATEMENT
“As a young adult interested in astrology, I find existing apps either too generic or overwhelming, and I want a more personal, engaging way to explore compatibility and daily insights based on my birth chart.”
REDESIGN GOALS
To focus my work and add intention
1
Rebrand for personality
Create a name and brand identity that feels magical, fun, and emotionally resonant.
2
Add excitement through micro-interactions
Incorporate delightful, intuitive animations to guide users and enhance engagement.
3
Improve flow and structure
Redesign the compatibility-check flow to reduce friction and increase clarity.
DESIGN PROCESS
Task Flow
Started off by selecting the “compatibility check” feature, one of the coolest and most defining features of the app, as the core flow to redesign. I outlined all key screens from start to result.
App Flow
Mapped out every interaction using the four key elements of interaction design: Trigger, Feedback, Rules, and Loops & Modes—to create interactions that respond smoothly and guide user behavior.
Rebranding
Renamed the app StarCrossed—a fun play on words as well as a name to describe a relationship—to reflect the compatibility theme.
Built a vibrant, playful brand using:
Colors: Pastel tones to convey whimsy and emotion
Typography: Be Vietnam Pro and Darker Grotesque for clean, friendly appeal
Iconography: Custom astrology icons to reinforce theme
App Interface Sketches
Sketched 30+ concepts to explore layouts and visual elements—sun/moon buttons, zodiac icon nav bars, and astrology-themed micro components. Although this step took quite a bit of time, it was one of my favorites because I was able to see my ideas for the task flow come to life.
USABILITY TESTING
Heuristic Evaluation
To get an understanding of how my redesign stood on a usability scale, I created an excel sheet with a Nielsen Norman usability heuristic ranking system and shared it with three users in the target audience. Here’s what some users had to say:
“There’s no third-party support of citations or testimonials to check if this information is true.”
“I would suggest adding in the Yelp link or some FAQ’s to help users.”
“Where can I see that the content is up to date and trustworthy?”
My biggest takeaway from this step of the process was that my redesign lacked user trust elements like “last updated” dates or reviews, and needed to have some credibility indicators.
Visual Representation of Areas to Focus On:
FINAL TOUCHES
Wrapping up with evidence-based fixes
Based on the heuristic evaluation, I implemented some changes to my designs. I added:
Micro-interactions (e.g., image hovers, icon animations)
A reservation/contact form
Integrated Google Maps + external review links
I then conducted a second heuristic evaluation with new participants of the target audience for an unbiased response, and got a 100% success rate with a 12/12 usability score across all categories and across all three sizes of my designs!
RESULTS
The redesign fulfilled all initial objectives:
Created varied, eye-catching page layouts
Enhanced content clarity and page hierarchy
Introduced interactivity to increase engagement
This project was my first time fully redesigning a website for all three device sizes. I thoroughly enjoyed the process of balancing creativity and usability through ongoing research, feedback, and iteration.
Check out my redesigns!
TAKEAWAYS
Things that I learned
Redesigning a restaurant experience taught me how important it is to align visual identity with the brand’s personality and target audience. I gained hands-on experience balancing aesthetics with usability — making sure that every design decision, from typography to layout, supported a seamless, inviting experience.
Next Steps
If I were to take this project further, I’d conduct more in-depth usability testing with real customers and restaurant staff to refine the user journey. I’d also explore designing a digital ordering or reservation system that integrates smoothly with the brand identity established in the redesign.