News Explorers

Overview

PROBLEM

The brief was to create a visual identity for a news mobile app, aimed at children aged 8–10, with content tailored to their level of understanding of the world and reading skills. It needed to be educational, accessible and engaging.

This project focused solely on Visual Design, rather than UX.

SOLUTION

I designed ‘News Explorers’ for kids to read current news affairs from around the world, with clickable cards and links to learn more.

I took the decision to focus on representation and mental health.

I wanted to bring inclusive representation into my work to ensure children saw someone like them in the app.

Screens were designed for a small viewport — 375 x 667 (iPhone 8).

MY ROLE

This was a solo concept project where I focused on inclusive representation and mental health in my designs.

I defined the brand vision, design styles, colours and typography to meet the requirements for my target demographic . I started with paper sketches and ended with a high fidelity prototype in Figma

DURATION

1 week design sprint

IMPACT

TOOLS

Although this was a concept project, I would considered the following KPI's to measure success:

Average time spent on app

Figma

Miro

Trello

Zoom

Slack

The Challenge

THE CLIENT

For our first Visual Design teaching week in General Assembly, the brief was to create a Visual Design for a News App. It needed to be educational, accessible and engaging. Other than that, we had free reign to design as we liked!

THE OPPORTUNITY

Although BAME (black, Asian and minority ethnic) children accounted for 32% of UK school students in 2017, just 4.3 % of children's books published that year featured a BAME character and only 1% included a person of colour as the main character (Positive News Magazine, Issue 103, 2020).

I wanted to bring inclusive representation into my work to ensure children saw someone like them in the app.

"Just 4.3 % of children's books published (in 2017) featured a BAME character"

- Positive News Magazine

THE PROCESS

1

DISCOVER

DEFINE

Branding

Design Styles Mood board

Colour

Typography

2

DEVELOP

Sketching

Wireframes

Iteration

3

DELIVER

Rapid Prototyping

Final Designs

Discover & Define

Branding | Mood board | Colour | Typography

DEFINING THE BRAND TO CREATE A VISION

The app needed to be informative, yet inviting and playful for children. The majority of the app would be focused on children users, with subscription pages aimed at parents.

I created brand values, word associations and images to reflect news and kids:

Using the above methods, helped me visualise the app, and concepts I could portray within it. I also came up with the name of the app, 'News Scouts' making the app feel fun, friendly and introducing an element of gamification by exploring within the app itself.

EXPLORING DESIGN STYLES

I wanted to explore colour and design styles that would represent News Scouts. The styles represent the educational yet fun feel of the app, making information easily digestible for young minds.

Based on the research, the app needed to be playful and fun, but still easy to use and understand for the children.

Bright block colours to create interest and keep children interested.

Include diverse range of friendly cartoon characters to allow children to see themselves in the app.

Colourful cards to allow for a clear UI.

Lots of images to break down text or topics to make it easy to read.

Smiley faces or emojis to represent emotions.

COLOUR

This was my first time conducting a test for accessibility with regards to colour. I first created a brand identity from my research and mood board, which allowed me to play with colours and styles which I thought would work well within the app.

I went for bold bright colours, which bring about feelings of trust, and were accessible to all.

TYPOGRAPHY

Typography was really interesting to explore, as I had children in mind.

When dealing with primary school children, certain considerations need to be made in order to make it reader friendly and resemble child-like writing by mimicking how children are learning to write the alphabet.

I looked for fonts where:

The lowercase 'a' had no top arch (also called ‘single story’).

The 'g' should be open tailed.

Wide spacing (tracking) of letters, to make it easy to read.

Rounded edges of title fonts, making it friendly and playful.

Left aligned to not interfere with children's ability to read text.

Size 16 for reading material for easy readability for children.

I decided on three font styles for the logo, headers and for body text.

The Logo typeface Amatic SC was a fun font, which mimics writing styles of children.

I did play around with this typeface as header text in the rest of the app, but it was not as legible in smaller sizes, so I switched over to Comfortaa

I used Quicksand for Subheadings and Body text. I liked its rounded edges, which gave it a friendly look.

A MOMENT TO CONSIDER MENTAL HEALTH

When researching kids news, a lot of considerations around mental health were highlighted. For many children, reading or watching the news can be frightening and leave the child feeling anxious or worried.

The Mental Health Foundation points out that it is no longer possible to always shield children from upsetting news. They suggest to let children know the facts.

"If children have access to clear and honest explanations of what is happening, and know that it’s okay to talk about scary or tricky subjects, it can give them the confidence to reach out about them…The best way to communicate safety is by talking about worrying news with open, confident, clear and truthful facts."

- Mental Health Foundation

I wanted to incorporate a feature which would allow children to indicate their emotional reaction to news stories, and to share this with their parent or guardian.

Develop

Sketching | Wireframes | Iterations

SKETCHING INITIAL IDEAS

To represent the findings I created a persona whose likes and frustrations were inspired by research observations and would guide the design decisions moving forward.

I tested this with a young user in the age bracket, and the name was too much of a tongue twister, and tended to be associated with just boys. This was changed to ‘News Explorers’ as to add an element of intrigue, and giving children the opportunity to feed their curiosity about the world.

‘Children are naturally curious and love to explore and learn about new things, especially in their early years. The world is big and children seem to want to know about everything about it.’

- Mumslittleexplorers.com

I decided on the overall layout of the four screens of the brief and also particular features, such as locked subscription pages, targeting parents rather than children. These screens purposefully were designed slightly differently with softer colours to reflect a more grown up tone.

ITERATIONS

Main iterations from sketch to mid fidelity, and finally to high fidelity included:

Adequate spacing - The homepage designs needed to be updated because picking a character functionality was too small.

Clickable Areas - needed to be a minimum of 44px by 44px.

Layout of Article pages - the text needed to be broken up with images, taking the full width of the screen instead of half.

Menu - Subscription page was for adults only, so a lock function and icon was added to ensure children did not enter.

Iterating to mid-fidelity in Figma

Deliver

Rapid Prototyping | Final Designs

RAPID PROTOTYPING TO HIGH FIDELITY

The next iteration was moving to high fidelity, with the introduction of colours, fonts and images that represented the findings from my mood board.

Key elements:

Diverse Characters: the child could pick a character that looked like them, and this character would be their avatar throughout the app, allowing the child to see themselves in the app.

Mental Health Awareness: This character would be asking questions, and checking on the users emotional reaction after reading news articles. The reaction of the child is monitored within the app. If an article makes them upset or worried, the parents receive a notification. They can then discuss worrying topics in person, which ties in together mental health awareness that I was keen to include.

FINAL DESIGNS

My final designs can be seen in Figma here, this is a static view of ‘News Explorers’ viewed on a mobile device.

SO, HOW DOES THE PROTOTYPE TACKLE THE BRIEF?

I created a visual identity for a news mobile app, using bright and bold colours, aimed at children aged 8–10, with News Explorers.

I ensured the content was tailored to the users level of understanding of the world and reading skills, and also accessible. The content was broken up with imagery and videos, the typeface reflected how children are learning to write the alphabet and the size was larger for easy readability for children.

I needed the content to be engaging, so I introduced the idea of an avatar on the launch page, allowing the child to see themselves in the app. This character is then on every page the user visits and asks questions. I ensured the characters used in the avatars are diverse, allowing for representation.

In addition, I was keen to include mental health awareness in the app. In order to monitor the child's emotional reaction to the news article, the character would ask for the users reaction using emoji's. If they indicated a negative reaction, the parent or guardian would be notified.

Final Thoughts

I really enjoyed learning about the visual design process, and in particular its application to children. The balance of communicating complex concepts in an easy to understand way, whilst also keeping the users engaged, was a real focus for me in this project. I found researching mental health awareness in children extremely valuable. I tried to keep this top of mind when thinking through my design decisions.

This project also highlighted the responsibilities we as designers have to create things that empower children, especially with regards to diversity and representation.

This was my first project in Visual Design, it was a great learning about UI considerations and I really enjoyed incorporating it into my designs!

READ THE FULL CASE STUDY