DISNEY KITCHEN AR

Client - Disney

At Zappar, we were approached by Disney to make a set of experiences to coincide with the launch of Disney Kitchen.

Each experience had to be unique and was represented by a different Disney franchise. I was the sole UX / UI designer on this project and also created various VFX elements. This project has gone so well that we are making a whole new set of experiences for Marvel Kitchen.

My role

UX / UI

Animation

Ideation

Client facing

Image creation

Illustration

Programs Used

Figma

Photoshop

After Effects

Illustrator

Overflow

After a number of ideation sessions with the client, we came up with 6 individual experiences each represented by a different franchise;

  • Find N Seek - Winnie the Pooh

  • Colouring - Cars

  • Space Search - Lightyear

  • Sand Builder - Frozen

  • Quiz Time - Mickey Mouse

  • Star to Star - Disney Princesses

From here I was able to create the low fidelity wireframes. These showed the basic mechanics of each experience and how well they flowed as a product. All of these experiences sat under the Disney Kitchen umbrella so it was important to make all of the layouts and behaviours the same across the collection.

Once the layout and mechanics have been signed off we are safe to create the high fidelity wireframes.

As most will know, working in a busy agency means you regularly work in unison with other parts of the build. With most of my high fidelity wireframes, I will mock up the 3D elements using assets from the client style guide or just creating things from Google images . Usually 3d will still be in production long after the High fidelity wireframes are signed off so this is the best method to get the creative across as faithfully as possible.

All of the UI elements follow the Disney Kitchen branding and not each individual franchise. I wanted everything to look like they were part of a set under the Disney Kitchen umbrella to keep continuity and familiarity for the user. This also made the UI asset pack much lighter which is always a top priority for WebAR experiences that play directly off a devices browser.

Each experience starts off with a simple animated intro, Below are a few examples;

These are the core UI elements for the experience as a whole;

Find N Seek (Winnie the Pooh)

This was my favourite of the six micro experiences we built. Using the Gyroscope, we created a 360 environment where the players had to find Poohs missing items. Winnie the Pooh animates into the scene and the user is taken through a few instructions, then shown how to look around the scene. They simply need to tap on the item when they find one and Pooh will animate in with a celebration, once they have found all of the items, they all appear over a very happy Pooh.

I created three panoramic scenes using the original artwork from the classic WTP film. The backgrounds were all originally watercolour paintings so chopping them out and stitching them back together was no mean feat. I feel the final panoramic images came out really well though, I also created three layers of depth to the backgrounds to create a parallax effect when the user looked around the scene.

Colouring with Cars

This is an AR colouring activity in the world space. To begin the experience the user needs to place a scene from Cars on their table, the colouring image will appear on the billboard. The user can pick from dozens of Cars characters to colour in, they simply choose a colour from the bottom menu and tap on a section of the image to colour. Once they are happy with their creation they can save the image to their device.

Space Search (Lightyear)

This is a searching game where the player is asked to find words within the asteroid storm. The player needs to swipe left and right to change the position of the asteroid storm. Within the storm are different coloured rocks that spell out a characters name when viewed at a specific angle. There is also a prompt bar that acts as a hot and cold meter to help younger players find the word, the fuller the bar, the closer the player is to revealing the name.

Sand Builder (Frozen)

Users place a 3D beach scene on their kitchen table. They are then prompted to build a sand hill by swiping up on the screen, once the sand hill has got to a good height, they are then prompted to tap on the sand hill to reveal a sand sculpture of a character from Frozen. Playing again will allow the user create a different character.

Quiz Time (Mickey Mouse)

Users need to place the 3D park scene on a flat surface, Mickey walks out from behind the tree to host the Quiz Time game. Players have to answer questions by tapping on the food items that hover above Mickey. Every question teaches children about healthy food and healthy eating.

Star to Star (Disney Princesses)

Players need to move their phone around the space scene to join the stars together, once they have joined all of the stars together, a Disney Princess will be revealed.

We created a panoramic space scene and built the 360 environment using Gyroscope.

The final result!

Here is a little promo video showing all of the experiences.