Project Brief

Mary The Fairy is a series of children stories about the adventures of Mary as she grows to become an older fairy. In the first installment, Mary Gets Her Wings, children can help Mary grow her wings through five challenging and intuitive adventures.

Project Goals

  • Design an interactive children’s story application for tablet and phones (Android)
  • Design the first chapter of the Mary The Fairy stories
  • Develop a product usable and engaging for children



UX Designer: Juan Cordoba


  • User research on users behaviours
  • Story Boarding
  • Character Design
  • User Interface Design
  • Collaborate with vendors in development
  • Interactive scenes creation
  • Animation Direction
  • Branding design

Story Boarding

A series of frames were designed in order to guide and facilitate the development of the application. 5 mini interactions designed and integrated into a linear narrative.

Mary The Fairy Story Board

UI Design

The user interface for this product did not only include graphic user interface elements but also character design and background illustrations.

Mary The Fairy UI

Interaction Design

Designing for kids is a big challenge. their attention span is very short and they can shift their attention to something else quite quickly. Keeping them engaged with interactions and an audiovisual experience was essential for the experience. We limit interactions to the basic touch gestures and included clear language and affordances to guide them through the narrative.

Mary The Fairy Mobile Mockup Adventure Screen

Demo Tutorial

An animated tutorial appears at the beginning of each interactivity explaining what the user needs to do.

Mary The Fairy Mobile App Game Screen


The use of affordances enables the user to perceive the possible action available in the screen. The arrows suggest the user to shake Mary’s wings up and down to make them dry.

Mary The Fairy iPhone Mockup Story Screen

Audio Guidance

Our goal was to retain our user’s interest and attention along the story. To do so we made use of text, animation, voice over and sound effects that support the narrative of the story. The objective with this is to retain the children’s attention along the whole experience.


This is what people have said about Mary The Fairy!

Mary The Fairy App Reviews

More Projects

Cocoluxe Body – Ecommerce

E-commerce design and Wordpress development for Australian skincare brand that sells products for babes around the world.

Yogiverse iPhone Mockup

Yoga Studio App, Check-in to class

“Yogiverse” is a back-office web application for yoga studio owners and managers to effectively run their studios.

Foxtel Go iPad Man Holding iPad Mockup

Foxtel Go Product Redesign

OTT Product redesign, to help users find content through recommendations and improved navigation.

Presto Platinum Signup

Presto Signup for foxtel

Delivering a signup process that allowed Foxtel customers to signup to Presto service using their existing credentials.