Creating a visual identity for a kids' news app through visual design methods
UI Concept Project | 4 Days | Individual
Deliverables
Creating word and image associations, a mood board, style guide, and low and high fidelity wireframes.
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.
Software
Sketch
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:
Creating word and image associations allowed me to build relationships and connections between elements to inform my designs
The list of brand values 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.
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.
My notes on word associations. This allowed me to explore several themes that the app could embody.
My notes on image associations. This made way for potential icons, visual assets and app names.
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 tool.
The main issues that needed to be addressed for parents and kids were:
Anything indicated by colour needed to have a secondary way for it to be distinguished.
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
By creating the digital screens, I could understand the dimensions of an iPhone 8 screen better in order to create enough 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 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 page and subscription page. Credit: freepik for the illustration on the onboarding page.
Final high fidelity screen - article page. Credit: freepik for the illustrations.