Sep 2020 - Feb 2021
Sep 2020 - Feb 2021
Visual & motion designer
Visual & motion designer
The Donut King: promotional sticker app visual branding for documentary
The Donut King: promotional sticker app visual branding for documentary
During my 6-month contract work at interdisciplinary creative studio Chapeau Studios, I led the design process for the promotional sticker app The Donut King, which ranked top 15 in the Movies & TV category on the App Store the day it was released. I worked on creating the visual assets for the branding and UI elements of the app, the user flow and UX sequence, as well as the interface for the possible future extension involving AR.
During my 6-month contract work at interdisciplinary creative studio Chapeau Studios, I led the design process for the promotional sticker app The Donut King, which ranked top 15 in the Movies & TV category on the App Store the day it was released. I worked on creating the visual assets for the branding and UI elements of the app, the user flow and UX sequence, as well as the interface for the possible future extension involving AR.
Background
The Donut King - Main Title Sequence
The Donut King - Main Title Sequence
The documentary follows the story of Cambodian refugee Ted Ngoy, who had built a multi-million dollar empire by baking America’s favorite pastry - the donut. Our team at Chapeau had created this animated sequence as the teaser and trailer for the main film.
The documentary follows the story of Cambodian refugee Ted Ngoy, who had built a multi-million dollar empire by baking America’s favorite pastry - the donut. Our team at Chapeau had created this animated sequence as the teaser and trailer for the main film.
Animated stickers
Animated stickers
As part of the publicity campaign for The Donut King, our team created marketing messaging stickers that captured the main essence of the documentary such as visual iconography of LA culture, main characters, and typography.
As part of the publicity campaign for The Donut King, our team created marketing messaging stickers that captured the main essence of the documentary such as visual iconography of LA culture, main characters, and typography.
Branding
Logo & logotype: iteration process
Logo & logotype: iteration process
I pulled from both the visual language of the documentary and the stickers to create these first iterations of the messaging logo. The main specs that I had considered were the color scheme of the original documentary and stickers as well as the size and recognizability of the logo because of how they needed to reside in the menu bar in iMessage.
I pulled from both the visual language of the documentary and the stickers to create these first iterations of the messaging logo. The main specs that I had considered were the color scheme of the original documentary and stickers as well as the size and recognizability of the logo because of how they needed to reside in the menu bar in iMessage.
I landed on these three iterations for my final choices. After soliciting feedback, we decided that we would either choose the single donut or typography, since these were the easiest to recognize and had the cohesive and iconic pink color palette.
I landed on these three iterations for my final choices. After soliciting feedback, we decided that we would either choose the single donut or typography, since these were the easiest to recognize and had the cohesive and iconic pink color palette.
Interface background: iteration process
Interface background: iteration process
During the iteration process, I had designed multiple iterations of the visual assets from the sticker pack that involved deconstructing the branding elements.
During the iteration process, I had designed multiple iterations of the visual assets from the sticker pack that involved deconstructing the branding elements.
During the iteration process, I had designed multiple iterations of the visual assets from the sticker pack that involved deconstructing the branding elements.
UI design
My iterations of button component designs for adding stickers into the app
My iterations of button component designs for adding stickers into the app
Previously designed UI buttons incorporated into Android screen mockup.
UX design
Initial proposed flow
Initial proposed flow
As for the actual implementation of the sticker app interfaces into the UX flow, I created two slightly different UI’s - either interactive hotspots on the screenshots as the tutorials or three different instructional screencaps.
As for the actual implementation of the sticker app interfaces into the UX flow, I created two slightly different UI’s - either interactive hotspots on the screenshots as the tutorials or three different instructional screencaps.
Option 1
Option 1
Option 2
Option 2
Mockup iterations & notes
Mockup iterations & notes
After meeting with my colleagues and manager as a focus group for the user flow, I took notes on the different pain points or confusing problems that both of the initial iterations had contained as well as initial ideations I had for solving these problems.
After meeting with my colleagues and manager as a focus group for the user flow, I took notes on the different pain points or confusing problems that both of the initial iterations had contained as well as initial ideations I had for solving these problems.
Final iterations
Final iterations
I landed on these two designs, which I took into consideration the feedback regarding the intuitive design of the instructional feed and more specific textual and visual cues regarding where in the page to navigate to.
I landed on these two designs, which I took into consideration the feedback regarding the intuitive design of the instructional feed and more specific textual and visual cues regarding where in the page to navigate to.
Option 1
Option 1
Option 2
Option 2
AR sticker app
As an extension of the iMessage app, we took inspiration from Snapchat and other social media apps heavily focused on camera filters. I helped mock up this AR sticker app, which would allow users to dynamically add these animated stickers into the “real” space for fun snapshots of photos and videos.