Sofia Design
UX · UI Design Portfolio
Artboard.png

Kellogg's

Kellogg's

Kellogs Island.png

 

The Brief

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. 

 

Design Process

IMG_7100 copy.jpg

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.

UX K FLow.png

Storyboards

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

IMG_4493.jpg
STORY BOARDS.png

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. 

Kellogs_Game Mechaninc Flow.png

User Interface

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.

UI Copy.png

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.