NewsKidz- expanding children’s galaxy of knowledge

A UI focussed mini-project.

Bootcamp: General Assembly
Length of project: 1 week
Team: solo
My role: UX/UI designer

After lots of research, synthesising, and mapping for my first few projects at General Assembly, we were given a purely visual design brief, so that we could work on our UI skills. We had a choice from designing a knitting app, plant app, or a news app for kids aged 8–10. I chose the latter, as I felt designing for kids would allow me to play with bold colours in a way that I hadn’t got to in previous projects. Having previously worked as a language teacher, I know that design is so important for learning, so I was excited to see what I could come up with. Since this was purely UI focussed, we did not have as many deliverables as previous projects. The requirements were:

  • Onboarding- what they kids will see when they open the app for the first time.
  • Navigation- a menu allowing them to navigate within the app.
  • Product listing/product display page.

Though we were not tasked with the usual user interviews, journey mapping and personas, I still wanted to conduct some competitive analysis to see what else is out there. As a field I had never looked into before, I found out that there are very few kids news apps available- and many that exist look like they need an update.

Though I personally quite enjoyed the nostalgic feel of this app, there was something about it that didn’t feel very 2021- such as the small icons bunched to the left side on the navigation bar (picture 2).
This design looked more thought through than News-O-Matic. However, things feel cluttered and definitely could be improved.

Since we were branding from scratch, we were encouraged to think about where we want our brand to fit in the marketplace. We used a ‘brand personality scale’ to start us thinking about the tone of the brand.

NewsKidz brand personality scale

Though branding is not explicitly a part of what UX designers have to do, I really enjoy this creative side of things. I created a mood board to get an idea of colours and fonts I liked:

I was really drawn to galaxy imagery (left), with the idea of expanding our universe of knowledge- for an educational app, this seemed appropriate. It also made sense to use bold colours since children typically respond well to these. Though blue is the most typically used colour in educational design (said to evoke calmness and concentration), I didn’t want this as the main brand colour, since the app also has games and comic books, and has an element of creative learning about it. This is why I chose purple for my main brand colour, as it evokes playfulness and creativity, and is less serious than blue. Conveniently, it also happens to be my favourite colour! I also took an interest in the idea of using an off-white colour as a background, so it could be reminiscent of reading a real newspaper. I liked the creamy hues such as that in the Art Newspaper.

Making the logo first helped me to think about secondary colours that could be used. I used a sunny orange for the stars in the logo, and after trying out this same colour in the app as an accent colour, I liked how this looked, and enjoy the contrast with the purple. Though I wouldn’t use these colours right next to each other, they work being dropped into small elements throughout the app for subtle contrast. I also made a much lighter hue of the bold purple to use for elements such as backgrounds.

Examples of my primary colour (purple) and secondary (sunny orange) used in tandem.

Onboarding

I knew that a simple, eye-catching onboarding would be the best for this app. This was the perfect place to introduce the galaxy theme, so that users see a brand identity from the get go. The onboarding I had seen for other kids news apps were either clunky, or bland:

Onboarding for the Newsela app- a news app designed for slightly older children than NewsKidz. Though the simplicity of this onboarding, with the ability to ‘swipe and skip’ was on the right track, I felt I wanted something much more visually enticing for my NewsKidz users.

A ‘tour’ style onboarding was not particularly needed for my app, so my main aim was to inform and excite the users in a brief manner, with the ability to navigate to the next page, or skip if desired. I chose a 3- step onboarding where the visuals were at the centre, outlining the key features of the app in a punchy manner, under the titles ‘Learn’, ‘Play’, and ‘Grow.’ I used these positive verbs as titles so users are made aware of how the features can enhance their daily lives (as long as they don’t spend too long on their phone!) I loved creating these bold visuals, and found a great font, Roboto Slab, to use for these titles. The font is playful yet still rather sleek and modern, in-keeping with the brand personality I wanted to create.

NewsKidz onboarding

Having decided on the brand tone and imagery, it was time to think about the content. We were encouraged to think about gamification, and this is where I started to have some fun with the UX writing, using the galaxy theme of the NewsKidz brand. I had fun naming the different levels, which I called ‘Shimmer’ (level 1), ‘Twinkle’ (level 2), and ‘Glow’ (Level 3), which I accompanied with the appropriate starry visuals. We were also required to do a product listing page, which in the case of this app was a subscription page. Similarly, I wanted to come up with some engaging names, so I created ‘Little star’, ‘Big star’ and ‘Superstar’ for the tiered subscriptions. This can all be viewed in the prototype below:

Learnings and next steps:

Though this project was mainly UI, and did not involve the full double diamond process, I really enjoyed thinking about brand identity and how it can be seeped into different elements of the product. I also really enjoyed designing for an age group very different to mine. If I was to take this project further, I would definitely try to source some kids of the target age group for some usability testing.

I hope you enjoyed this read. If you have any questions about my designs- or anything else- feel free to contact me on LinkedIn.

Junior UX Designer