Kellogg’s is a multinational food manufacturing company, most known for their cereals and convenience foods. Kellogg’s believes in innovation to stay ahead of the competition. For their next campaign, the aim was to utilise AR technology to create an exciting and educational experience for children. From summer 2018, the AR experience can unlocked by scanning 4 different brands of cereal boxes, across 17 countries in 7 languages.
The Goal: To support re-purchase and cross-brand purchase
Brands: Coco-pops, Frosties, Rice Krispies & Miel Pops
User & Audience
The target users for the Kellogg's experience was children aged 5- 12. Kids don't have smartphones at this age and will most likely use their parents phones to play games. This means time would be limited, so shorter but repetitive game experience would be the best way forward.The parents would also be our direct consumers as they are the ones buying the cereal. Through our own interviews and data provided by Kellogg's, parents responded very positively to games that are both educational and fun, also know as 'edutainment' (education and entertainment). This was very important to the concept stage and delivering an experience that would be successful.
Team & Role
Having had previous experience designing for the product team, usually native iOs apps from the ground up, I led the UX/UI for this project. The rest of the team involved a creative director, a graphic designer, two 3D modellers/developers and a project manager.
I coordinated and led all the facets of design including: information architecture, user flows, interactions, game architecture and UX, visual, product and some prototyping. Given that the campaign was an AR experience (in a 3D scene), 80% of the prototyping was handled by the 3D modellers. I also conducted user research using methods such as focus groups at Kellogg’s London office, using their facilities and resources as well as using their own research gathered over the years on their customers.
The first step involved the creative team developing an initial concept. I then conducted follow-up workshops to connect the concept with a gamified AR experience.
After establishing an idea that satisfied the client's requirements, I created a high-level user flow to ensure that all aspects were covered.
The initial on-boarding to the experience is key as this would ensure that kids are captivated by the story and remain engaged. The client wanted the theme to be 'Back to School' as the campaign would launch late summer, right before school starts.
The client requirements:
- A consistent experience that can be launched off 4 different cereal boxes
- A captivating storyline
- 2/3 weeks game time
- Not be completable in one session
- AR face masks (similar to Snap) based on Kellogg's mascot characters
- 3 to 4 different mini-games within the experience
- An educational game that helps kids get ready to start school again
Game Mechanics & Game UX
The game mechanics are based on Stars (the currency of the game). Stars can be collected by either completing "Coconut Hunts" or replaying games. Each game can only be purchased with Stars once the previous one has been unlocked, ensuring that the games cannot be completed in one sitting. AR face masks can also be purchased with Stars.
The objective of the interface was to keep the app playful, simple, fun and in brand with Kellogg's existing design language. This was accomplished through the use of heavily rounded corners, vibrant gradients, big beautiful photos, and quirky, playful icons.
Initial "Coconut Hunt" Demo
Prototyping for this particular app was mainly done by the 3D modellers and developers, as 90% of the experience was based in the camera. There weren't many 2D screens that needed prototyping, so UI mockups, along with an explanation (as well as internal communication), were sufficient for implementation.
Outcome - Ongoing
The project is due to launch summer 2018 - the outcome will be updated post-release.