IKEA Heroes

A web game of 18 unique stories made for IKEA.

Client
IKEA
Company
Ogilvy & Mather
Role
UX/UI Designer & Illustrator
The background story

Since 2013, Ikea Greece has been donating school furniture and equipment to preschools and daycare centers in need. This program, called "Stathmoi Haras", was highlighted through a TV spot created for Ikea Greece in 2015. The ad emphasized the importance of putting the children first and creating beautiful and nurturing spaces to help them express themselves. During the ad, some character traits (creative, brave, dreamer etc.) appeared on the screen and were attributed to the children shown.

Ikea-Heroes-Macbook
Ikea-Heroes-Tablet
About the project

Based on this concept and with the intention to underline the company's child-centered view, we proposed the creation of a new web game for IKEA. "Ikea Heroes", as presented below, contains 18 different stories for young children where they become the heroes themselves. The stories are personalised by filling in the child's name and choosing a character trait from the options given (i.e. funny, brave, dreamer ecc.), before the parent starts reading. While parents read, the children can explore the stories by clicking on the interactive illustrations. At the end, each personalised story can be printed.

Wireframes
The web game's wireframes (for desktop & tablet)
Design inspiration

We researched kids games, apps, fairy tales, and crafts exploring the visual elements, colors, use of typography, and textures. We utilized moodboards to help us envision the aesthetics of the web game.

Start Page Animation Flow
Challenges and solutions

While creating the initial wireframes and first drafts of the game, we came to the realization that parent and child should have a very simple and comprehensive experience. Based on that thought, we came up with a one page story/game for every character. This specific structure required the game to have a clear step by step process, a goal which we reached by using a gradual animation flow. Taking everything we explored and learned into account, the menu of the game formed as follows:

  • Start page
    Title of the game - Description of the web game - Call to Action Button
  • Homepage with story
    Step 1: General instructions text - Select kid's gender - Write kid's name
    Step 2: Character Selection
    Step 3: Read the story - Discover the Illustrations
Start Page Animation Flow
Sketching solutions for a smooth navigation experience.
Final design

Our target group is parents and children (ages 4-10). The parents will be reading these stories to their children and they will be exploring the interactive illustrations at the same time. Older children can also read and interact with the story/game more independently.

We consulted a kindergarten teacher on illustration details and found out that children do not focus much on how detailed a character is or is not depicted. Additionally, we wanted the illustrations to connect with IKEA’s brand style . As a result, we selected a simple style created with watercolor photoshop brushes. We combined them with some realistic textures (used for the characters’ clothes) which, we believe, built a better visual connection with IKEA's products. The paper texture we chose helped us connect illustrations and text. Finally, we used specific characteristics, such as different hair types, to correspond with the different characters’ traits.

Character-creation
Characters
Start Page
Web game's start page.
Step 1: The user selects his/her kid's gender.
Step 2: The user writes his/her kid's name and  chooses a character trait.
Step 3: The user selects a character trait. The option "read the story" shows up.
Story Page
Step 4: The user can read the whole personalized story.
Story Page
Step 4: The user can read the whole personalized story (tablet version).
IKEA logo, the brand name, images and products are copyrighted materials protected by International laws and belong to IKEA.