Newskidz — A play-learning app

Visual design | UX\UI design | Concept Project | 4 days sprint | Solo

Deborahbperera
6 min readMar 22, 2021

Overview

In the brief, I was tasked with creating the visual design of a news mobile application, aimed at children aged 8–10, with content tailored to their level of understanding and reading skills.

The project was completed as part of a 4-day design sprint.

The deliverables were:

  1. On-boarding — What the user sees when they open the app for the first time
  2. Navigation — A menu allowing the user to navigate within the app
  3. Product Display Page — A page featuring information about the product and the ability to “Add to basket”
  4. Article page — A blog post

Other than this, the brief remained flexible — so deviating was possible.

Discover —

Defining brand values and identity

The very first step I took in embarking on this visual design exercise was to attempt to define the brand image for this product.

I used a variety of brainstorming and mind mapping techniques to come up with the main keywords that define the brand, whilst also match with images that visually describe the chosen words to communicate their brand and personality.

Mood-board

I decided to extend this practice to further define detailed brand guidelines:

Fun but not silly
because it is smart fun

Imaginative but not unrealistic
because is adventurous

Learning but not boring
because is educational by doing

Trusted but not restricted
because is safe

Inspiring but not over exciting
because you read about real facts

I conducted a direct competitor analysis based on popular apps that kids love at the moment. Those are the ones that I decided to analyze and get inspiration from and have an idea of where Newkidz will stand in the market.

Competitor Analysis — key findings

Two of the main points of the brief are: the app has to be educational and engaging and to achieve those goals I aimed to base my app on a learn by playing idea. The concept behind my idea was engaging and to entertain the child by playing an adventure. I created a word map that helped me to explore related topics and ideas and what stood out was the detective (kid) who will have to look for clues (educational games) to solve the mystery (learn something new).

When we’re having fun, the reward center of our brain is activated and it feels good. Actually, there’s no better way for babies to develop and learn, and that’s why they spend so much time playing. Nurturing this state of play means saying yes to instant adventures, to unexpected good ideas.

Define the structure of the idea behind the app

Define —

Creating a visual identity

Keeping in mind that my primary users will be not just the primary school children but also their parents. I researched how can be a user interface attract attention and express trust by analyzing the most used apps for kids and what they do.

After gathering insights into the brand values, I searched and defined the inspirations that will represent the design style of Newskidz. The goal of a visual identity is to make an emotional connection between the brand and consumer through the colors, shapes, and illustrations.

Based on my research, the app needed to communicate fun and inspire children and keep that imagination and curiosity going.

  • Black lines simple and genuine
  • Hand made drawing supporting and less dominating, inspired by the kids drawing
  • Abstract shapes help with organizing content by creating structure and clarity, leaving plenty of room for discover-ability and interpretation
  • Bright colors catch children’s attention
  • Buddy fictional character that will help the kid through the tasks

Colours & Typography

All the research resulted in me defining a color palette and typeface and set up a style guide.

Colour palette + accessibility testing

Then, I defined the typeface, bearing in mind the necessity to have a clear and simple font. Gotham Rounded was the chosen font. Serious. Sometimes.

Gotham rounded — styles used

It is a technical font that goes from friendly to high-tech to cheeky with ease. Gotham typeface, inspired by signs on buildings, is the lettering of engineering: the marks on precision instruments, blueprints, stencils, and templates. We are modeling and improving the skills of people of the future.

This text style that I’ve been using:

Text style — Gotham Rounded

Fictional character — illustration

Buddy is the little helper who is always ready to give guidance when it needs it, and he’ll help to solve all the mysteries.

Develop and deliver

Sketching wireframes

Initial Sketches

The concept idea finally became concrete — visual through the sketching.

Based on the play by learning approach the kid is brought in an adventure where they can find interesting, short, and fun articles with an engaging prompt and a visual image and they’ll have to complete the article by playing and finding the missing words.

The goal is to turn the reading experience fun by playing and completing the missing words creating that unique emotional value

Buddy will always be around, ready to offer suggestions and guidance

Defining the logo

Considering the above-mentioned points, I developed the idea of a logo symbol that would reflect the adventure. Also, it had to look fun and simple to immediately connect users to the theme of games.

“Newskidz” logo design

Creating high-fidelity UI designs

I drafted an onboarding page using the abstract shapes and then used this as the basis for the development of the following pages. I echoed elements of the onboarding page in all the following pages to create a sense of consistency and cohesion throughout the app’s visual identity.

on-boarding — final Hi-fi screens

I’ve done a round of user testing and I receive some very useful and constructive feedback, that inspired the next iteration. The general impressions of the visual design were very positive.

The main screen allows the parent to sign in and create an account for their child. The idea is to further develop a parent's area, where they can see what the child is learning and practice together, keeping track of the worlds learned, alongside weekly goals.

Sign in — final Hi-fi screens

Moving forward on developing the homepage where the child can see all the subjects that they can interact with and the main screens that show how different articles will be shown and how the missing words will be inserted in the article.

One of the main goals that drove the decisions of the structure of the article and how to present the content is how learning facts can be fun and engaging. A child can and should be driven by that too.

Homepage and game— final Hi-fi screens

Demo prototype

Reflection

I really enjoyed the visual design process, as it was fun and interesting. Especially to be able to develop a product in an informal learning environment for children, backed up by a theoretical notion of play as a core activity in a child’s development.

Thanks for reading!

Thank you very much for reading my case study. If you’d like to know more about the project, my process, or simply just would like a chat, feel free to say hi on LinkedIn, or visit my portfolio.

--

--