Zone KOZM
Interactions, UI, and character animations for a touchscreen vaporizer.
Role
Lead Designer
Icon & Character Design
Animation & Motion Graphics
UI Design
Industry
Consumer Products
The display makes use of storytelling to merge the branding and the user experience together seamlessly through the character’s actions and animations, along with the overall style of the UI. This was a fun and unique way to provide interactive feedback on settings and device states.
One of the biggest challenges was making sure the animations communicated their information as quickly as possible, so all assets could fit on the device’s internal memory, while keeping the timing smooth and enjoyable to see.
Puff Sequence
Preheat
Find My Device
Passcode Login
Sketches
Device Screen Flow
The main items to focus on when designing the UI were:
- Creating a fun way to change modes, which alter how the device’s hardware functions.
- Continuing the branding and character animations into other settings, so the device has personality throughout all of its screens.
- Displaying the usage data in a way that’s relevant to the device, to give users different levels of insight into their usage.
Coordination with Engineering
Because this device does not have an OS, all functions and graphics were hard-coded into the screen itself.
The lack of an OS actually offered more freedom to be creative with functionality that normally would be restricted to the OS-level, when designing an app.
I needed to be very specific when handing off designs and assets to engineering, to ensure the UI was built to spec, and the animations and interactions were implemented in the MVC as intended.
