Kids'table
The Kids’table is a digital product created for kids (and their parents) which has been developed by the Deode company. Through more than one hundred educational games, children will be able to enjoy, while also learning new things. It is available in four different colors (yellow, red, magenta and blue).
Problem
The client was not satisfied with some aspects of the structural design of the kids’table. He thought that there was a lack of consistency between its different interfaces.
Goal
To create a new styleguide that build visual consistency across the Kid’s Table.
Role
UI designer. I have designed a new visual appearance of the structural part of the Kid’s Table. This includes the following sections: Welcome screen, Advanced options , Sign up, settings, Backgrounds, and Launcher. I also created new graphic resources and components.
Target Devices
Kids’table. Screen size: FULL HD (1920 x 1080 px).
Time
Around two months.
Tools
Figma, Adobe Photoshop, Adobe Illustrator, Adobe Premiere, Type-scale, Color.adobe, Vecteezy.
Understanding the Product
As I have done in the past, before redesigning the Kid’s Table, I intensely studied the application. In this particular case, I spent a significant amount of time navigating it, analyzing the user flows and asking the stakeholders the appropriate questions to give them the best results.
If you would like to see the old version of the Kids’table, I invite you to watch a promotional short video about it.
UI Design
The best way to achieve a cohesive product is through a design system. But, before starting to define the visual style of any product, it is really important to have clear some concepts related to the information architecture or the programming languagues that developers will use to implement the design.
Information Architecture
Organizing the information architecture is an indispensable step. This will give you a more precise idea about the direction of your design.
Speaking to Developers
When working with a team, communication with the other members is a key factor to its success. In this case, from the beginning of the design process, I always tried to have open and fluid communication with the developers. For this project they used two main tools to implement the designs. Firstly, They used “Android Studio” to implement the structural design and, for the games part, they used “Unity”.
Creating a Brand Mascot
After a meeting with the CEO and the marketing team, we decided to give an amusing mascot to the kids’table. The purpose of creating a distinctive character will help children to increase their identification with the product. There were three candidates, finally, the chosen one was “Gogy”, a friendly alien.
Setting Up a Grid System
For this application, given that the display resolution is 1920 x 1080 px, I set up a Grid System of 12 columns with a margin on both sides of 100 px and a glutter of 20 px.
Choosing the Tipography
I selected two typographies for the writing content. One for titles and another for paragraphs, links or buttons. I then used type-scale.com to generate the different font sizes.
Designing the Color Palette
Any design needs to have its own style. In my opinion, a good selection of colors can enhance your design and give it a unique personality. Next, you can see the color palette that I chose for this work.
Spacing between Items
In the same way that music needs rhythm, design needs proper distribution of the elements to achieve a visual harmony that improves the user experience.
Iconography
Icons has an important role in UI Design because they provide a user with necessary information by visual means. As children are the potential users of the kids’table, I tried to use colorful icons, easy for them to identify.
Final Interfaces
Now, after completing the last steps, I started to design the interfaces that form the sctructural part following the styleguide created. Below, you can see some of them.
"Welcome" screen
"Advanced options" panel
"Users" panel
"Launcher" screen
Takeaways
Impact
The kids’table is a digital product that offers a wide range of possibilities. The main goal is trying to create a positive impact in the educational area, helping teachers to engange children in order to help them to develop their creativity in a unlimited way.
What I learned
Redesigning the kids’table was a challenge work that allowed me to understand the importance of combinating technology with education properly. In this way I learned new concepts like gamification. Before working on this project I didn’t know anything about this topic, but now, I think I would be able to give a speech about it 😉
Thanks for Scrolling!!
