Paolat De la Cruz

UX/UI Designer

Siemens Kids App

UX/UI Case Study

About the Project

Siemens Mobility is making changes to the office's infrastructure, re-organizing them in a way that employees can bring their children with them, creating a harmonious space where children can be entertained in their parent's workspace.

The new offices will include furniture, toys, and other amenities for the children. One of the projects they had in mind to include was an app, where the children can learn more about where their parents work.

This was the Ironhack Berlin UX/UI Bootcamp Final Project for Siemens Mobility. Our contacts through the project development were: Carla Staccone, and Florian Schicktanz.

Requirements for the App

Goal: Children should have fun while getting in touch with the Siemens Mobility brand and product portfolio.
What the client wants: Design of an app, including one main screen with the option to choose between two different games.
Device: iPad.
Users: Children between 4 to 8 years.
Validated through children of the employees.
App language should be German.
Time frame to develop the MVP: 10 days

My Role

I worked solo through all the stages of the project: from researching about Kids experiences in other games and applications, creating ideas for the games, and testing; finally, developing the high fidelity prototype for the client.

UX Research

Business Analysis: Siemens

Siemens Mobility is the world’s leading provider of mobility solutions that enable the efficient, safe and environmentally friendly transport of people and goods – and help improve the quality of everyday life for millions of people on all continents. Driven by innovation, they develop intelligent solutions for the increasing digitalization of the transport sector. Our range of offerings includes rail vehicles, rail automation, road traffic management systems, rail electrification, and services

"We work with our customers to develop optimal solutions to help overcome their challenges." - Siemens Website

The portfolio of Siemens Mobility includes:

Full range of vehicles for rail traffic: Regional, as well as intercity and high-speed trains, metro cars, streetcars and light rail, passenger coaches, driverless vehicles, and locomotives
Signal and control technology for rail-based passenger and freight traffic
Electrification solutions for rail and road traffic
Maintenance and service of vehicles and infrastructure
Road traffic control and information systems, parking space management as well as electronic payment and toll systems for urban and interurban traffic
Consulting, planning, financing, construction, and operation of turnkey mobility systems
Integrated mobility solutions for intermodal networking of different traffic systems

A conversation with Stakeholders

I asked some questions to the Siemens executives, to better understand the requirements:

How would you describe success for this project and which positive change should it bring about? Success is that children and parents are happy with the app.

What worries you about this project? What is the worst thing that could happen? That no one in the company is interested in using it.

What are the communication tools/ messages/ strategies of Siemens for approaching the children? They do not currently have any available.

What are the technical limitations regarding the developers? There are no limitations.

UX Blueprint Canvas

This tool helped me a lot to focus on the UX strategy and the development of the project:

Challenge: Children get bored at Siemens office.
Aspirations: Children have fun in the office and learn about Siemens.
Focus Areas: Finding the best solution based on the research.
Guiding Principles: UX Kids insights, Siemens values.
Activities: interviews, research, competitive analysis, prototyping, and testing.
Measurements: children want to use the app while they are in the office.

Interviews: Users & Parents

Based on the requirements of the project, I proceeded to schedule interviews with parents and their children.

Questions for the Children

The main goal was to discover why they like certain games and what they can do on them; no matter if we're digital games or not. This information could help me to understand better why the children prefer certain activities, and why not.

Questions for the Parents

Having a conversation with the parents of the interviewed children helped me to compare answers and detect pain points at the time the children were playing digital games. The parents could remember patterns behaviors and describe them.

Interview 1: Highlights

Kimberly, 6 Years (Child) and David, 32 (Father)

Video call Interview

Digital games played: My Tom, My boo, Hollywood Story, Toca Boca games.
She likes the Hollywood Story game because she can: "Buy clothes, choose accessories, play minigames and explore the city".
My boo is like a Tamagotchi, where she can digitally take care of an animal.
Her father commented that when she spends too much time playing, she doesn't want to do any other activity. It's difficult for her to do another kind of activity.

Interview 2: Highlights

Lucas, 4.5 Years (Child) and Georgina, 36 (Mother)

Personal Interview

He plays digital games like 3 hours a day.
He changes games every 5-10 min.
He likes to show his mother his achievements in the games.
When he doesn't understand a game, he closes the window right away.
He knows how to download games.
He knows the rule of not playing violent games.
The mother says that the sound of the games is annoying for her.
Games used: Panda, My Tom, Ciborgmini, Crazy Labs, Merge Planes, Puzzles.

Competitive Analysis: Digital Games

With the research, I understood that there are studios that produce a large number of games, and conceptually these games can be connected.

Toca Boca: They create digital toys and everyday products filled with fun that children from any corner of the world can instantly relate to.
Voodoo creates short games for all ages.
Outfit7 is the creators of Talking Tom, a popular character that has many adventures in different games.
Nickelodeon JR: Tv Channels today not only stream shows for children but also have activities on their website for them.
Happy Meal: Big food companies have invested in apps for children, so they use them while they are visiting the restaurants.
Lego City App: Just like other companies, Lego has its online digital games for children.

Competitors: Toys

The clients explained in the meeting that the app is part of a program that is renewing the Siemens offices with elements attractive to children. They will also have toys.

Toys can also entertain children, so they can be considered as a competitor. I visited toys stores to familiarize myself with them, and I could describe most of them as:

Colorful
Intuitive
Interactive
With Sounds
Visual

Ikea's Play Corner

Similar Case: Ikea

In the interviews with the parents, one of them mentioned that IKEA had a digital game that children could use while parents were talking to the sales representative.

I went to Ikea to see it for myself. They have an interactive game where the child can do activities related to the brand and furniture: Construct furniture step by step, puzzles, paint a space, memory cards, and color objects.

These screens were placed on different points throughout the store: at the cafeteria, at some play corners with other toys, and close to the representative sales desks.

Insights about Kids UX

It was also necessary to research other UX Kids Cases so I could understand more about children and their interaction with digital screens. Here some essential points from UX Studio Team:

Less Text, More Images: Even if some children can read after a certain age, they don't like to read on screens. They understand by examples, intuition, and exploring the game.
Horizontal Scrolling: Children seen to be more intuitive with this interaction, as opposed to vertical scrolling.
Instant effects: Kids are expecting actions and sounds after they interact with the screen.
Boredom: it is difficult to keep a child interacting with the same game for more than 15 minutes.
Consistency: Children trust and remember, so they are expecting things to happen in the same way as they experienced them the first time on a platform.
Colorful elements: as happens with toys, children need color stimulation to be interested in the screens.

Kids age Range

For this project, the target age range is 4 to 8 years. Certain studies advise that children in this age range can be divided into two groups, according to an article by Mila Kosa, the different characteristics are:

3-5 years: Motor skills are still in development at this age, so the main role in UX is played by large pictures, instant visual and audio feedback, understanding of the total lack of user patience, keeping in mind the possibility of multiple clicks at the same time and the inability to distinguish different types of content, e.g., the ad banner from the part of the game.
6–8 years: At this age, children typically know how to read, so one of the critical skills in working with interfaces has been obtained, but the vocabulary is limited. The main UX task here is to use the vocabulary used by the child himself, avoiding unfamiliar words.

Defining

Affinity Diagram

Organizing all the information recollected from the research. Here are the essential points grouped:

About Siemens Mobility: ingenuity, trains, 170 years of history, traffic lights, tunnels, locomotive, street lights, metros, inventive.
Pains when kids are playing digital games: when they play for a long time they may not want to do anything else; they change the game every 10-15 min, and sounds are annoying for the parents.
Activities on a digital game: puzzles, races, roles, train games, mini-games inside games, explore spaces, recreate actions of the real world, create new stuff, get points, no ending games.
What children like about games: large pictures, challenges, stories, pretending to be a character, showing to their parents what they did, social games.
About Kids on Digital: they know how to scroll, they need explicit instructions, they close the game when they don't understand it, existing mental models help them to play, consistency is the key, they like to have instant feedback about their actions, sometimes parental controls are needed.
References: IKEA game space.

Empathy Map

The Empathy Map helped me understand better the children's’ situation when they are in the Siemens office with their parents:

What they need to do: They need to have fun while they are in the office with their parents.
What do they see: Colorful digital games and cartoons on their parents’ mobile phones, toys, maybe other kids, their parents working.
What do they say: Mama, can I play on your mobile? I'm bored, are there games here? What do you do here, mama? Can I see a video? Can I go outside?
What they do: They play with mobile phones and tablets, sing, watch movies and videos, play with toys, touch everything, walk around.
What do they hear: Parents saying "be quiet", "Mama needs to work", "We are at Mama's office." Adults talking about work. Other children employees talking about games and cartoons.
Pains: to be bored, not having attention from their parents.

User Personas

For this project, I defined three user personas: two kids from different age ranges and the parent.

User Journey

It was essential to describe the User Journey of Mathias with Julia at the office and to recreate the situations that can happen there. This was very useful because we could empathize with Mathias and be aware of his needs while he's in the office.

UX Lean Canvas

Another tool that helped a lot before looking for solutions is the UX Lean Canvas:

Business Problem: When the children of the Siemens employees come to the office, they need to be entertained while their parents work.
Users and Customers: Children of 4-6 years and 6-8 years; and their parents.
Hypotheses: We believe that the children will be entertained and learn about Siemens products if the games are playful and attractive.
Solution ideas: A colorful app, interactive, with one main screen, big font size, animations and sounds, examples drawn from real-life, simple language, clear instructions, Siemens products, receiving constant feedback, large pictures.
What's the most important thing we need to learn first: The app has to be challenging enough, attractive, not too hard to understand.
Business Outcomes: The children like the app and are looking forward to using it.
User Benefits: Have fun and be entertained, learn about my parent's job.
What's the least amount of work we need to do to learn the most important thing? Usability tests, competitive analysis, interviews, investigation on UX for children.

Challenge Redefined

Based on the research, the initial task of creating an app for kids with two games needed to be re-defined:

Children getting bored after 15 minutes of playing a digital game confirms that the solution is not to have two digital games but rather to provide other activities as well.
A platform with different activities could be the solution and could let the age range grow because of the multiples activities it can have.

Now the challenge is to conceptualize a platform with activities for children, and one of them will be a digital game.

Ideation

Design Principles

Before starting brainstorming ideas, I needed to establish design principles that guided the ideation and prototype process.

For that, I took inspiration from Siemens Values and the needs of the child based on the research. Here's an explanation of Siemens motivations and values when they rebranded in 2017:

Ingenuity for life is the unique combination of engineering, genius, and innovation combined with our role to create value for our customers, employees, and society.

- Joe Kaeser, CEO Siemens

Based on this, the design principles to follow are:

Ideas for Activities on the Platform

Activities that the platform could include:

Guides to create projects: the Ipad can help the child step by step with Lego® bricks projects. These projects can be related to Siemens products and services.
Coding challenges: There are a lot of books and learning lessons for children (starting four years old) about coding basics. These activities are beneficial to the child because they are logic and concentration exercises.
Discovering around: Another idea is to position signs on the office, and with the iPad camera, kids can find and scan these signs, activating animations on the screen. These animations can relate to Siemens products and services.
Games: the central part of this project requested by the client.
Videos: on different topics, explaining Siemens history or working process with cartoons.

Ideas for Games

Finding the way: A lateral view of a car that has to go through tunnels and roads presenting different challenges and obstacles.
Coloring the metro: The child could apply colors to different metro models.
Inventing Machines: To create new transport, with different mechanical parts.
Snake trains: inspired by the Nokia Snake Mobile game, it's about a train that has to move continuously, and the child should guide it with the finger.
Place the light: based on the lighting roads Siemens service, in this game, the children should light the neighborhood.

Feature Prioritization

Here I considered features that the platform and the game could need:

Should have: back button, pause button, start/play button, a hand icon that shows how to interact with the app, German texts (or no text at all).
Could have: sound, timing, energy levels, connect to other Ipads to play.
Might have: save game, levels, ask age, text messages, mute button.
Not having: scores, login, sharing on social media.

Prototype and Testing

Visitings Siemens Kindergartens

I had the opportunity to visit the Siemens Kindergartens and test the paper prototypes with multiple children.

Game Paper Prototype

I was able to test one of the game ideas with the children. I chose to develop the concept of train races. First, they can choose a train (named after Siemens trains) and then they can move the train through the road until it reaches the station using their finger. A little hand icon will show the kids what to do. They always could go back and change the train model.

Feedback on Paper prototype

They liked to move the train fast.
They understand better the concept of "S-Bahn" rather than "Zug". (Zug is Train, and S-Bahn is Suburban train in German).
The little hand icon was a great helper.
They understood what to do very fast, so maybe other difficulties could be added to the game.
They played also with 2 trains at the same time.

Platform Sketches

Here the sketches of the platform and how the activities will be displayed:

The main screen with all the activities from which to choose.
Create bricks projects with the help of the iPad.
A scanning feature to look for symbols around the office.
Activities to learn to code.
The train Game.

Platform Sketches Feedback

Fewer activities on the main screen, maybe users could scroll horizontally to find more.
The Train game should include a play button after the train is selected.
The back button should be in the same place all the time.

Visual Design Process

Brand Attributes: Create, Play, Discover

Visual Design Elements

A Logo for the App

To differentiate the product from other projects, I developed a logo for the platform inspired by "Childhood" that is placed next to the Siemens logo.

Colors

It was mandatory to use the Siemens color palette, in this case, all secondary colors were attractive for the users.

Buttons

Several buttons were developed to guide the users through the platform. Big, colorful and simple.

Photography

All photography should have a white background.

Illustration Style

Illustrations styles should be simple and vectorial.

Molecules

Combining elements together was also necessary to establish the structure of the platform.

Final UI Design

After determining all the visual elements, here are the final screens with all the parts. On the home page, the user can scroll horizontally to find more activities.

Bauen (Construct): The platform will show the child different Lego® bricks projects, he can choose one, and the platform will show him what to do step by step.
Bahnrennen (Train Race): This is the developed train game.
Coden (Coding): Activities to learn to code based on the "Scratch Jr"® methodology.

More activities can be added.

I could work on an animation video on Principle Animation App. Note that the hover effect doesn't work for iPad/mobile. It was mainly created for animation purposes.

Conclusions

The prototype with final designs was tested again with the final user group and had a 75% of general acceptance.
Children today are having very different behaviors related to the digital world that are still new. Their limited vocabulary of defining feelings and explaining why they do things can make the process much harder to understand. That's why the development team should include an Early education specialist to complete the development of the games and activities.
The games need development on the difficulty levels, explore other options like multiple player games. For further development, the project needs a Developer that contributes with an approach on how the game can be coded, advising what is possible and what's not.
This project was given to Siemens Innovation Lab for further development.