IKEA Heroes
A web game of 18 unique stories made for IKEA.
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](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/578a491c88d369f92a535aa9_ikea-heroes-macbook.png)
![Ikea-Heroes-Tablet](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/577ec2ba7c62eea7204663f4_ikea-heroes-tablet.png)
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](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/57877774ccda65ac618c7ebd_ikea-heroes-wireframes.png)
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](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/578504ad845ba5842f13b69e_moodboards.jpg)
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](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/57803baab6252cfa4f56f5db_animation-flow.png)
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](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/57841bfca263c0a608f056b8_character-design-example.gif)
![Characters](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/578424b77236afe1083cb9ef_characters-heroes.jpg)
![Start Page](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/578587efe5e18fa37e6400e4_start-page-heroes.jpg)
![Story Page](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/57858bed2be464af0fef376a_story-page.jpg)
![Story Page](https://cdn.prod.website-files.com/577702b9c00e788f24904beb/578788df10c15d96514475d8_Asteios-tablet.jpg)