Timeline
10 weeks
Software
Figma + Adobe After Effects + Adobe Illustrator
OVERVIEW
ZODIAC
The Chinese Zodiac is a sect of astrology that is based around the lunar calendar, and is popular in Asia. It is centered around 12 animals, with each animal having an assigned year in a 12 year cycle. Each animal has its own attributes, compatibilities, and associated lore. Everyone has a zodiac animal based on the year they were born.
Not many people know their Chinese Zodiac animal and the meaning behind them. As an American-born Chinese person, I find it important and meaningful to both educate others and learn more about my culture.
Goals
Emphasize interactivity
I wanted to create a more engaging experience than simply watching a video or reading a book. By being able to explore and learn about the animals first hand through an experience, they would be able to learn and understand more.
Make it engaging
My target audience was children and young adults. As the average attention span decreases in modern times, I'd need to find a way to keep their focus.
Personalize it
People love to learn about themselves and others. This is a big factor in why western astrology is so popular. Everyone has a zodiac sign, so people would be able to learn about themselves and their sign through this experience.
Competitive Analysis
Species in Pieces
Species in Pieces is a unique interactive web experience that focuses on 30 endangered animals, and what is harming them. It has excellent animation and theming - each animal is illustrated as a series of polygons, which disassemble and reassemble when swapping between animals.
Its strengths definitely lies in its aesthetics, but its user interface falls a little short. Buttons and icons are minimalistic so they don't draw attention from the illustrations, but it results in their functions being unclear.
Astrology.com
Astrology.com is a website that offers guides on star signs, horoscopes, tarot, and more. It includes a very wide breadth of information, which both helps and harms it.
On one hand, it can tout itself as a comprehensive guide to all things astrology. On the other hand, it makes navigating and parsing information tough since there's so much of it. It also falls into a pitfall of huge blocks of text, which can bore readers.
Curious Critters Club
This experience, "The World of Unknown Critters," focuses on exploring the world and finding unique creatures. Users can play as one of two characters, either Alex or Emma.
Its graphics are definitely the main selling point. Everything is polished and cute. from the characters to the micro animations. Its main drawback is that since it uses extensive 3D and animation, it may run poorly on certain devices. This could slow down the experience and frustrate users.
Visual Direction
I always start my projects by collecting inspiration. I selected images that I believed reflected my vision the most, which you can view in the moodboard below. The three keywords I wanted to base my designs off of were whimsical, colorful, and stylized.
Iteration
Style A
I wanted to explore a variety of styles for this project. This style would have heavy use of hand-drawn illustrations. The basis of this direction was to explore an open-world style map with the arrow keys, and talk to each of the twelve animals.
This direction was unsuccessful because it was too advanced for the project scope. Every asset needed to be painstakingly illustrated and then animated, which would require either a larger team or a longer working period.
Style B
Style B was supposed to be more whimsical and cartoony. Instead of hand-drawn raster images, it'd use vector illustrations. Similar to Style A, this direction was also based on exploring an open-world style map with the arrow keys, and talking to each of the twelve animals.
This direction was unsuccessful because it didn’t feel distinct enough. The vector style felt very generic to me, and left me feeling unsatisfied. Moreover, I was beginning to dislike the open-world map concept, and wanted to shift the controls to something different.
Style C
This style came about when I wasn’t satisfied with either Style A or Style B. It uses B as inspiration, and aims to be whimsical and stylized. In this style, the concept as changed from an open-world map to a long 2D map where the user can pan around and discover the animals.
Its style is monoline and flat, with each animal having individual animations and information cards. This direction was successful because it was both doable within the timeframe, and interactive in a creative way. This style was the one that I moved forward with.
Final Designs
I took Style C and built it out into the full experience that I was envisioning. In the final version, users would pan around the screen and discover each animal. When the found them, they could tap on their traits and compatibilities and watch the animal animate accordingly. Below, you can find the final designs, the full 2D map, and an animated prototype.
Takeaways
Overall, I am pleased with the outcome of this project. It taught me a lot about alternate methods of conveying information - there are many ways to show information that isn’t just blocks of text. I also learned that interactivity is a very important method of learning and teaching.
The project isn’t perfect - I feel some aspects of typography and animation could be improved - but I am still proud of what I accomplished during the time frame, especially with how much change it went through
The project isn’t perfect - I feel some aspects of typography and animation could be improved - but I am still proud of what I accomplished during the time frame, especially with how much change it went through
My main takeaway is to realize that there is only so much I can do in a limited amount of time. I was trying to complete the workload of a team of professionals, when I am just one singular designer. In the future, I will try and think more realistically and work within a doable project scope.
Want to chat more about this project? Shoot me an email at kellyjincreative@gmail.com!
