UI / UX / VISUAL DESIGN
Mechanic Design
Collaborated with cross-functional teams to design new mechanics for our users to play and interact with within their core puzzle gameplay.
As a lead visual designer, I was responsible for hosting a brainstorm to generate ideas for the visual metaphor that would suit the gameplay, creating high-fidelity visuals, outlining the sprite breakdown for the engineers to implement in Unity, and creating the mechanic tutorials, icons, and social posts to share the new mechanic.
Metaphor Brainstorm Session
![](https://cdn.myportfolio.com/402ec386fb24f80c4f12488e83e074c3/e6e19c73-6e4d-4dd0-afe3-25efab83aefa_rw_3840.png?h=6fd9cbccbbf10af0a69c5e711baf717d)
Visual Metaphor Directions
![](https://cdn.myportfolio.com/402ec386fb24f80c4f12488e83e074c3/c6575d3a-e43a-4f5d-b21b-b2b629c4c1c3_rw_3840.png?h=e79f6708e69a0a7614f0d98f469ae965)
Sprite Breakdown and Final Visuals
After the final visuals are completed, I breakdown the visuals into individual pieces so that it could be imported into Unity and be able to be color customizable for implementation and animation. I also outline how the colors would look for the UI of the color theme editor in Unity.
![](https://cdn.myportfolio.com/402ec386fb24f80c4f12488e83e074c3/fe8fedf8-ae53-4d02-8c3c-2ad87822a2fd_rw_1920.png?h=b5a56f46322fb1a714e2cd2a9f9d9f25)
Color Theme
We make a new color theme whenever we release a new Mechanic. I made a color theme editor in Figma using its robust Component system, to expedite our custom color theme-making process. It was a challenge to match the visuals 1:1 to how they were implemented in the actual game but I managed to make it work using a combination of blend modes and masks.
![](https://cdn.myportfolio.com/402ec386fb24f80c4f12488e83e074c3/7b689079-ed54-4b55-98ec-698e618a11b2_rw_1200.png?h=27fb07d4862a200e4d7e731aa19188d7)
![](https://cdn.myportfolio.com/402ec386fb24f80c4f12488e83e074c3/7e6de9e5-e16e-4ad6-acd2-b0bc6a219511_rw_1200.gif?h=f532ac104ec40e569b6043fabf5bc648)
Mechanic in-game Tutorials design
![](https://cdn.myportfolio.com/402ec386fb24f80c4f12488e83e074c3/41f0addb-2d41-4f12-ad17-7eece5aa9533_rw_1200.png?h=73f84e6fd1fa5073cb16cab3e59efe35)
Social Post
After the mechanic is complete, we introduce it to our players through a social post, animated in After Effects.
![](https://cdn.myportfolio.com/402ec386fb24f80c4f12488e83e074c3/41260faa-35ad-42ba-8548-cf880a6616e1_rw_600.gif?h=c1730f1ad4f3d41f104a49083aaf2bb7)
Credits for the Potions Mechanic
Game Designer Bryce Williams
Art Director Laura Gatti
Designer Jaymart Yabo
Technical Artist Alvaro Villa
Engineer Ethan Gottlieb
Sound and Music Ross and Cody