Zodiac Pet Rock Maker
Make your own zodiac pet rock!
I was assigned to create a mix-and-match character-creation tool for mobile. After spending some time exchanging funny ideas with my roommate, I was reminded of my fascination with pet rocks as a child. I decided to create a digital version so I can have pet rocks on my phone! I looked up examples of pet rocks and saw potential in adding life to the rocks with facial expressions, hair, accessories and different backgrounds.
I found photos of real pet rocks that inspired the elements I created for the character creator tool
I wanted to create a tool where the user feels fun, as well as a sense of ownership in their creations. When thinking of ownership, zodiac signs immediately came to mind. I thought giving each rock unique, yet relatable, character that can belong to any user is a good way to help guide the user at the beginning of the creation process.
I looked up gemstones for each zodiac sign and picked ones I thought would be cute and interesting to draw.
I made a list of pretty stones associated to different zodiac signs
I then spent delightful hours drawing the different elements on Illustrator and Photoshop that would make up the pet rocks.
After I was done creating most of my assets, I sketched out a quick mockup of how I wanted to lay out the interface on a mobile screen. I was set on creating tabs for each asset category with preview thumbnails. Drawing the different elements out helped me structure the different divs.
My initial UI design incorporated a vertical scroll box that housed each asset category, which was later changed to a horizontal scroll to save space and accomodate smaller devices
For my first version, I set up multiple canvases on Javascript to draw the different categories of assets. That method worked fine, but didn’t allow me to download the creation as one single image. I went through a few different versions before settling with this final execution.
One of the most challenging parts about this process was making sure that my Pet Rock Maker looks good and is functional on multiple screen sizes, especially on smaller phones. I had my roommates, who both have different phone sizes, test out my platform a few times before I got to the final product.
Step 1: Choose rock (based on your zodiac sign, or not)
Step 2: Choose face
Step 3: Choose hair
Step 4: Choose accessory
Step 5: Choose background
Step 6: Download pet!
Source code:
After presenting my project to a guest critic who hasn’t seen it before, I was given a feedback to provide a placeholder image on my empty canvas, to not leave the user confused with a blank screen.
I also got a lot of my classmates to create their own unique pet rocks! I’m really happy with the way they turned out, all with various personalities and emotions.
