Creating a visual identity for a kids’ news app through visual design methods

UI Concept Project | 4 Days | Individual

Overview

As part of General Assembly’s design course, I created a visual identity for a kids’ news app which I named “The Little Explorer”. I designed the app for kids to read current news affairs from around the world, with clickable cards and dictionary terms within the articles to learn more.

Deliverables

Creating word and image associations, a mood board, style guide, and low and high fidelity wireframes.

Viewport

Designing screens for a small viewport — 375 x 667 (iPhone 8)

Highlights + Challenges

It was truly exciting and somewhat challenging for me to design the screens, as I took the decision to focus on accessibility which was very personal to me. More importantly, given that two in every 1,000 children have a severe vision impairment in the UK and also suffer from hearing loss, I wanted to bring inclusive design into my work. I loved researching what visual colours, elements and typography works for kids and weaving that into my designs.

Defining the brand values to create a vision

First and foremost I needed to understand what the app stood for and what specific brand values to follow through with. I wanted the app to be accessible, yet inviting and playful for both parents and kids as there was a high chance parents would be using the app with their kids.

I created the following rules to abide by so I didn’t go off track:

The Little Explorer’s core brand values

Creating word and image associations allowed me to build relationships and connections between elements to inform my designs

The creation of brand values then led me to create associations for educational news. What words and images could be associated with education, learning and news, but moreover news for kids? I created a map of words I could potentially work with and icons that embodied learning, discovery and play.

Rough notes of word and image associations that would help me later.

The ones I was most interested in were the magnifying glass, globe, and newspaper as these images really captured what the app would be about. This exercise helped me visualise the identity, which would later inform specific components on the screens.

After I formed a clearer picture of the values and identity I wanted to portray, I expressed these through colour and design by creating a mood board

After I formed a clearer picture of the values and identity I wanted to portray, I expressed these through colour and design by creating a mood board. The colours and styles represented below are warm, playful, eye catching and simple to understand. The goal was to stimulate kids’ minds through colour and shape, so reading the news could be a fun learning experience.

My initial mood board for style ideas.

The app needed to be playful and inviting, yet structured and easy to understand for accessibility.

  • Bold images using shapes would create a sense of play.
  • Overlapping images would encourage the combination of ideas and thoughts.
  • Structured boxes will draw upon honesty, learning and education.
  • Friendly illustrations will invite kids in and create a warm + safe environment.
  • Cut out illustrations will make complicated topics easy to understand.

Creating a colour and typography style guide that was accessible by those with visual impairments was not as straightforward as anticipated

Colour

At this point, I hadn’t yet conducted a deep dive into the accessibility of different colours. By creating an identity first, my aim was to build a foundation from which I could play within the realms of colour and style within the colours of my mood board. This wasn’t as straightforward as I had anticipated. The colours from my mood board did not directly pass the WCAG’s 2.0 (Web Content Accessibility Guidelines) accessibility tests, so I spent a fair amount of time digging down on which colours did pass the tests but also matched the style I wanted. Unfortunately the reds that I initially wanted to carry though didn’t work, but I played around with contrasts and shades until I found a perfect match!

My colour style guide

Typography

Next, I moved onto choosing the typefaces for the app which was also a challenge and very interesting to explore. The typefaces not only had to have varying fonts available for accessibility purposes, but they had to have letterforms which were easy for kids to read.

As young readers are also learning to write, it was best for me to use a typeface that was very close to the letterforms that matched this. For example, using a one storey lowercase “a” and “g” rather than a double-storey form. Also, my research indicated that typefaces with larger x-heights are generally easier to read than those with short x-heights for kids.

I decided on four styles, however, I made several changes in the end and the typeface for the body copy I researched and used for the first draft of my screens was not the one I ended up using in the app. I realised that Gill Sans Infant was legible for kids, but not readable when arranged in a body of text! I also deviated away from Heiti TC and towards Century Gothic, which had more rounded letterforms. My final type styles can be seen below.

Typography style guide

There were key considerations I took into account before designing the screens

Ideally, before starting any screen designs, I would have tested the colour scheme and typography with visually impaired individuals to ascertain if they were comfortable with both. However, due to time constraints I mimicked colour blindness using an online simulator.

The main issues that needed to be addressed for parents and kids were:

  1. Anything indicated by colour needed to have a secondary way for it to be distinguished.
  2. For text to be readable or other elements to be distinguishable they needed to have sufficient contrast with the background.

Once the style guide was established (although it was adapted throughout the project), I started sketching the wireframes

I came up with the name “News Globe” and decided on a general layout with specific features — e.g. a security-enabled parental controls menu for payment and subscriptions. I later changed the name to “The Little Explorer” as it sounded more investigative.

Sketches for the main pages
More detailed wireframe sketches

The sketching provided a basis to work from to create the low fidelity wireframes

The sketching provided a basis to work from to create the low fidelity wireframes. By creating the digital screens, I could understand the dimensions of an iPhone 8 screen better in order to create space between elements.

Low fidelity wireframes made using a 4 column layout and a 4px grid.

However, the article page was still far too busy and I needed to create more space between the images and video. While I got a feel for the layout I wanted, there was still a lot of work to be done to address accessibility needs before colour could be added. The main point being that any clickable area needed to be 44px x 44px, with a minimum font size of 16, apart from small text which could be size 14.

  • I ensured that all interactions would be accessible and all the fonts would be readable.
  • I ensured all colours passed accessibility standards and were compatible with each other in the context of use.
  • I ensured that there was enough spacing between elements and there was consistency.
  • I continued to develop my screens by adding an audio option to listen to the article, and the ability to increase the text size from font 16 to 20.

I created the high fidelity screens by bringing in elements that captured the essence of my initial mood board

I created different elements throughout the screens to capture the essence of my initial mood board. I also made several iterations of the onboarding screen, but in the end brought together ideas of exploration, news and playfulness from my brand values and word/image associations.

Final high fidelity screens — 1st onboarding page, menu, subscription page. Credit given to freepik for the illustration on the onboarding page.
Final high fidelity screens — article page. Credit given to freepik for the illustrations.

Final thoughts

I immensely enjoyed learning about accessibility and how it translates to digital applications. It was invaluable for me to experience the visual design process from an idea to high fidelity screens, and the thinking behind changing specific components between iterations to improve it. With more time, I would couple the visual design with in depth research and interviews to ground the design decisions further and develop them.

I believe this project opened my eyes to creating products that are not only functional, but visually appealing to kids to encourage usage.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store