Cosmic Crossroads
Project Link:
Role
Project Lead, UX Designer, UX Developer
Timeline
August 2024 - April 2025
Tools
Figma, ReactJS, TailwindCSS, GSAP JavaScript, GitHub, Google Forms (for user surveys), Aseprite.
What is Cosmic Crossroads?
Cosmic Crossroads is a web-based interactive story game. This is my Studio Thesis project for my Masters program at University of Central Florida.
Cosmic Crossroads teaches players about the traditional malefic and benefic planets in astrology through a fun, interactive web environment. Players embody the malefic planet Mars. Their choices influence the story’s path and ending, leading to multiple narrative outcomes.
Cosmic Crossroads was designed for fellow astrology enthusiasts and curious gamers who want to learn more about traditional astrology.
Objective
The goal of this project was to showcase my interactive UX design and development skills through a passion of mine which is astrology. I wanted to create an engaging, educational, and visually compelling interface. I also wanted to explore interactive narratives, and explore the different techniques of digital storytelling.
Ideation & Inspiration
This idea came from wanting to create an interactive experience through a hobby of mine. Since Cosmic Crossroads was a year-long project, I wanted to make sure I fully utilized my creativity and my passions. I was inspired by an open source tool called Twine, which is used to create interactive fiction in a web based environment. I also had influences from popular astrology platforms such as CHANI, and the Astrology Podcast. I wanted to show my creativity as well as my knowledge in traditional astrology concepts in a fun, interactive user experience.
Design Process
I initially designed this project to be for a Twine story, but realized that I had some limitations in using Twine, so I decided to start designing for a ReactJS interface that utilized a horizontal scroll. I also knew that I wanted to experiment with new technologies such as Aseprite and GSAP Scroll Trigger. I used some open source assets from Itch.io, but fully designed the interface, and pixel art in Cosmic Crossroads.
I created all of the pixel art using Aseprite—this was my first time working with pixel art software. I knew that I wanted Cosmic Crossroads to have a pixelated old time arcade game style, while incorporating modern technologies.
I wanted to ensure that users were not overwhelmed with a bunch of information at once, so I tried to lay out the text and dialogue in a fun way that had users interact with the information.
For color palette and aesthetic choices, I incorporated my pixel art, itch.io assets, and TailwindCSS to have a space themed interface.
Design Guide
Early Designs
Implementation
The project was built using a tech stack that includes ReactJS and TailwindCSS, with GitHub Pages used for hosting. A responsive design approach was implemented using relative units to ensure adaptability across screen sizes. GSAP ScrollTrigger was incorporated to add scroll-based animations.
During development, I encountered challenges with implementing GSAP animations in a horizontal scroll format, which led me to pivot to a vertical scroll layout to improve performance and usability. Additional challenges included managing z-index for overlapping components and finding a balance between narrative exposition and effective use of screen real estate.
User Testing & Iteration
For user testing, I sent out user surveys to a number of participants including friends, family, graduate school peers, coworkers, and professors. I wanted to make sure I tested Cosmic Crossroads with people who were beginners in astrology information, or did not know a lot about astrology.
I was mainly testing users for their understanding of the information, visual hierarchy, accessibility in the design, and how the users enjoyed the overall experience. I was able to collect 18 survey responses which helped me gain feedback on the initial version of Cosmic Crossroads.
Key Findings:
Users were confused by the scrolling, and wanted more direction in the introduction of Cosmic Crossroads so they could understand how to play better
Users reported that the original font was difficult to read
Users wanted more planets to learn about / to play as different characters
The scroll animations and effects were the highlight of the users’ experience
Survey Results:
Changes Made:
While time constraints meant I couldn't implement every piece of feedback, I prioritized high-impact changes that significantly improved the user experience
Changed font of the body text
Added more instructions on the introduction screen
Added different styling to differentiate what was a character dialogue and what was an informational fact
Simplified choice buttons with clearer language
Generative AI Tools
Throughout the development of Cosmic Crossroads, I incorporated generative AI tools like GitHub Copilot and ChatGPT as assistive collaborators, not content creators. These tools supported my workflow in the following ways:
GitHub Copilot helped speed up repetitive coding tasks and offered syntax suggestions within my React components, especially during UI development and state handling.
ChatGPT served as a sounding board for UX strategy, game flow ideas, and technical troubleshooting. I used it to:
Draft initial structures for user surveys
Explore possible narrative logic branching
Clarify best practices for React/Tailwind positioning and responsive layout
All creative decisions, visual design, narrative writing, and code architecture were developed by me. AI tools were used as support mechanisms to enhance efficiency and problem-solving—not to generate final content.
Reflections
What I Learned
Merging UX storytelling with astrology is a unique challenge that requires balancing thematic depth with usability. Translating complex astrological concepts into interactive narrative arcs taught me how to present abstract ideas in a grounded, engaging way, without overwhelming the user.
Importance of Responsive Design for an Immersive Experience
Ensuring the game’s interface responded fluidly across devices was essential in maintaining immersion. I learned that responsive design isn’t just about layout—it's about preserving the emotional and narrative flow of the game, whether it’s being experienced on a laptop, tablet, or phone.
How to Conduct and Apply User Feedback Meaningfully
User testing revealed unexpected behavior patterns and helped refine everything from dialogue pacing to UI clarity. I learned to listen deeply, prioritize recurring pain points, and translate feedback into tangible design adjustments that improved the overall gameplay experience.
If I Could Do It Again
I learned a lot about underestimating how long processes will take, which led me to narrow down my scope. If I had to do this project again, I would narrow down the scope from the very beginning, be solid in my choice of technologies, and prototype the user flow and decisions sooner. If I had more time, I would add more character choices, more planet environments, and overall expand on the full narrative.