Project Overview
Problem Statement: Users were curious about their zodiac signs and traits but wanted a fun, interactive way to explore them instead of traditional text-heavy websites.
Goal: Design and develop an engaging, intuitive Zodiac Generator website where users can enter their birthday and explore their zodiac sign, traits, and a Jellycat-themed character illustration.
My role: UI/UX designer and Frontend Developer
Duration: 3 months
Tools and Technologies: HTML, CSS, JavaScript, Procreate
Context and Problem Definition
In my scripting class project, I'm tasked with creating a web-based application utilizing a provided zodiac algorithm. My objective is to develop an interactive website where users can input their birth dates to discover their Western zodiac signs. I want to allow users to easily recalculate their zodiac signs for different dates.
To enhance the experience, each zodiac sign will be visually represented in a unique way, accompanied by distinct sound effects. This will make the exploration of astrology both engaging and captivating. Additionally, I'm incorporating a helpful guide within the app to ensure users can navigate and enjoy its features seamlessly.
Target Audience: Young adults and teens interested in astrology, who appreciate visually pleasing and playful elements in their online experiences.
Challenges:
- Balancing aesthetics and information in an engaging and intuitive layout.
- Ensuring the website was responsive across devices to maintain accessibility.
Ideation and Concept Developemt
Brainstorm Sessions: I focused on creating a fun experience with Jellycat-themed characters representing each zodiac sign, using brand pastel color palettes and whimsical illustrations.
Low-fidelity Prototypes: Developed a low-fidelity prototype in Figma to refine the layout and content placement.
Layout sketches for zodiac generator website from Procreate
Development and Implementation
HTML and CSS: Structured the website with clean and semantic HTML. Used CSS for layout design, focusing on a consistent visual theme.
JavaScript: Developed the zodiac calculation logic using JavaScript. Users could input their birthdate, and JavaScript functions determined the corresponding zodiac sign and displayed relevant information along with the Jellycat illustration.
Features Developed:- Data Selector: Input field with a user-friendly calendar picker.
- Zodiac Calculation Logic: Determined the user's zodiac sign based on the date provided.
- Dynamic Content Display: Showed Jellycat-themed zodiac illustrations, traits, and descriptions based on user input.
Solution and Final Design
Final Screen: One single page screen displays a simple, interactive date selector with 12 zodiac that allows user to find out their zodiac sign by entering birthday date or click on each zodiac box to explore more information.
Outcome and Reflection
Project Sucess: The website effectively achieved its goal of providing an engaging and visually appealing platform for users to explore their zodiac signs. User feedback confirmed the design choices and highlighted appreciation for the cohesive theme and overall user experience.
Lesson Learned:- Focusing on the balance between aesthetics and functionality is crucial to maintaining a clear and engaging user experience.
- Prototyping and iterative feedback allowed me to make key adjustments early in the design process.
- Introduce more animations or interactions to enhance engagement.
- Make it more mobile-friendly and have more information.
Takeaway and Conclusion
Creating the Zodiac Generator website was a rewarding project that allowed me to combine creativity with functional design. By focusing on playfulness, simplicity, and accessibility, I was able to craft an interactive and enjoyable experience for users interested in exploring their zodiac signs.