Let’s Chocolate
An information design that aims to bring sweetness and joy
Duration
5 weeks
Project Type
University challenge, solo project
My role
Design research, ideation, illustration, lo-fi and high-fi prototype, usability test
Toolkit
Figma, Procreate, Photoshop
Prototype Display
How did it start?
The information design “Let’s Chocolate” was motivated by a local survey reporting that about ¼ New Zealanders considered suicide or self-harm in 2021 during the COVID pandemic. The astounding report inspired me to create a design that brings audiences joyful experiences. The subject “chocolate” was inspired by my last trip to Switzerland where I saw an ample amount of chocolate. Chocolate has an anti-depressant effect due to the chemistries and hormones that cacao triggers in our brains. It is also a popular snack and dessert, which people often associate with sweetness and happiness.
User experience goals
Informatic, intuitive, engaging, fun, aesthetically harmonious and pleasing
Research
Primary research: Observation at Wellington Chocolate Factory
- Chocolate-making process
- Ingredients of chocolate
- Production and sales
- Consumption of chocolate
- Visual inspiration – cacao tree
Desk research
- Fun facts of chocolate
- Moodboard
Ideation
The chocolate box invited the users to participate from the start. By interacting with the design in all three sections, the users became part of the creative process.
Wireframe and Lo-fi prototype
What can users do it the design?
- They can get an overview about the production and consumption of chocolate in a global scale
- They can treasure-hunt in a cocoa tree to find out fun facts about chocolates
- They can choose to read the recipes of different types of chocolates
- They can open the information design with an interactive animation
UI design
Color pallete
- Include a wide range of hue, saturation and lightness in order to reflect the rich variety of chocolate
Illustration
- A blend of Skeuomorphism and flat design. It will help users feel that they are interacting with realistic chocolate while avoiding visual clutters
- Watercolor is a popular medium for art therapy. The light tone and semi-transparent pigment bring calm and peace of mind
Typography
- Script font Italianno – visually elegant with a European style where modern chocolate originated from
- Poppins – an intuitive san-serif font on the screen that contrasts with the script font nicely
Hi-fi Prototype and usability test
Testing the prototype was an important step of my process to check both the usability of the system and if instructions were easy to follow. I tested the system with classmates, in order to collect insights from experienced and like-minded fellow designers.
An example where I made the design more user-friendly was adding flashing light effects the cacao pods in section two. It gave a hint that the cacao tree was not merely a still illustration, but an interactive piece.
Another example was that I added a histogram on each world map, so that audiences could compare each ranking visually. This helped the users to understand what those numbers meant on a global scale.
An example where I made the design more user-friendly was adding flashing light effects to the cacao pods in section two. It gave a hint that the cacao tree was not merely a still illustration but was interactable.
Another example was that I added a histogram on each world map so that audiences could compare the rankings visually. This helped the users to understand what those numbers meant on a global scale.
The cacao pods do not flash. It just looks like a still picture
The cacao pods flash to indicate that the tree is interactable and invite users to click on the fruits
Without the histogram, users lack the information to understand the rankings
The histogram gives the scales and comparisions of the data group
Reflection and next step
Overall, “Let’s Chocolate” synthesized knowledge about chocolate, visual illustration and multiple micro-interactions to achieve an informative and entertaining information design.
I enjoyed the whole process of research, painting and prototype design and testing. Knowing that my art and design will bring smiles to my audiences always makes me feel happy.
Given more time, I would like to include a whole new section about the chocolate-making process. I would like to present it in the form of animation. This would add more fun and valuable information about chocolate.