Cereal Code | Branding, Packaging Design, UI/UX
With Cereal Code, people can customize their own bowl of cereal. Cereal Code provides students and employees with a nutritious and easy meal at school and office. Cereal Code’s accessible vending machine and wide selection of items help everyone to build a bowl of cereal for a perfect meal.
Year
2017 (Team), 2022 (Personal)
Role
Research, Packaging Design, Branding, UI/UX design
Team
3 UX/UI & Branding Designers
Tools
Adobe XD, Adobe Photoshop, Adobe Illustrator
Awards
Red Dot Award, A Design Award
Keywords
Research
Sketches
Development
Illustrations
Mockups
To create a packaging solution that could hold both cereal and milk, we researched different types of packaging such as plastic cups, snack containers, and yogurt containers.
Vivid colors and fun illustrations of milk and cereal make enjoyable experiences.
Logo
A “code” is needed to create a new value in a computer. Buttons on vending machines may behave like the “code.” Our customized bowls of cereals are the result of our codes. The combination of milk, cereals and toppings you selected is a customized cereal made just for you.
Revision - Vending Machine Screen
Wireframes & Iterations
(2017 Ver.)
Earlier versions of the vending machine screens were designed with a layout that focused on making the Cereal Code simple and easy to use, using alphabets and numbers.
(2022 Ver.)
During the redesign process, the vending machine screens were reorganized to align with the functionality of the Cereal Code and customer needs. To improve ease of use, options for milk selection, code combinations, nutritional information, and progress were all incorporated onto a single screen for better comprehension.
To improve the user experience, I went through multiple design iterations to find a layout that effectively conveyed the meaning of the "code" and "combination" feature of the vending machine.
I experimented with different layouts featuring images and illustrations to make it easy for users to identify the milk, cereal, and toppings when using the vending machine.
Final Wireframes
Vending Machine
Make My Code - Flow
On the touch screen, select “Make My Code” or “Recommendation”. “Make My Code“ gives you various selections of milk, cereals, and toppings to build your own bowl.
Recommendation - Flow
“Recommendation” gives you a perfect combination of “codes” for instance, D g 1 8 is a protein bowl.
