Creating a news app for children

Kylie Chung
6 min readApr 17, 2021

--

Learning the practices of visual / UI design and brand design

Duration: 5 days individual project

My Roles: UI Design, Visual Design, Brand Design

Tools: Figma, Adobe Color, Coolors, Mood board, Google Fonts, Able plugin

This is a visual design project I finished during my time studying General Assembly’s UXDI remote course. The visual design part of the course lasts for 2 weeks, but this case study will just be about the 1st week. For this week the goal was to learn the basic practices of visual and brand design and to implement what I learned by designing a mobile app for a children’s news called NewsKidz.

picture of a girl holding a phone while reading it

The brief:

To create 4 pages with the provided details and pictures by our instructor:

  • Onboarding
  • Product detail page
  • Article page
  • Navigation

Designing a brand

Branding is important in creating a reputation among customer expectations because it is what the consumer will identify with the product. It is important to design a brand with values that will be attractive for the customer to choose this product over other products or return for more.

I will be showing the three-step process of designing the brand for NewsKidz.

First step — Word Association

To start creating building blocks of our brand values, I came up with a bunch of words that I thought are good descriptors for the values I wanted for the news app. Afterwards, I narrowed them down to 5 words that best represent the values I wanted for the news app.

a screenshot of the words i came up with & the narrowed down key words: inviting, captivating, curious, structured, knowledge
a screenshot of different phrases i came up with to sum up the meaning of the key words i chose

I then wrote these words down in phrases to pinpoint the meaning of these values and also to guide what values I don’t want the brand to be associated with.

Second Step — Brand Affinity

Brand affinity is the concept of what customers think about a brand.

By creating a brand affinity map of the associated brands I can visualise the brands I want NewsKidz app to be associated with and have similar values to.

This practice helps me to stay on track with designing base on the brand values I have prepared for.

brand affinity board containing different brands like nasa, animal planet, scishow that represent similar brand values
brand affinity

After gathering the research together in a visual way to represent the brand values, it was time to create a moodboard.

Step three — Moodboard

A mood board is a visual representation of a collection of images and texts to represent an idea or feeling.

I created this so I don’t lose track of my brand design and values, and too also help inspire the designs for the prototypes later on.

moodboard showing my key chosen words and other images that represent the brand values and identity for NewsKidz
moodboard

Designing the User Interface

After preparing all the research and completing my brand design for NewsKidz, I can start designing the UI of the app.

Pages to design:

  • Onboarding
  • Product detail page
  • Article page
  • Navigation

1 — Sketching Ideas

In the brief, I was already given the information and certain features for the app. I created 4 pages of low fidelity wireframes that contain the features and information from the brief. By doing this I don’t need to worry about missing out any features, as I already planned where they should go in the app pages. They are however not totally locked down, so I can make changes to their placement as the designing process goes on.

sketches of the initial ideas of my design. it shows 5 pages in simple wireframing style
sketches for the pages

I also thought about ways the onboarding page can look like.

3 sketches of different onboarding page ideas
onboarding sketch ideas

2— Low fidelity

I transferred the sketches into digital wireframes. I kept it at low fidelity but with all the buttons and content that would be present.

low fidelity wireframe containing content given by the brief
low fi prototype

3 — Colours

After creating the low fidelity wireframes, I began to prepare the colours I will use for the interface. To start I looked at my moodboard and decided which colours to use. I constructed a colour scheme that will show the primary, secondary colours and any other colours that will be used in my design.

To help with this process, I used a tool called Coolors which helped to create a gradient palette, which I used for creating my neutral colour palette.

Using the colour scheme it helped me to keep my colour choices consistent with the design plan. During my second prototype, I started placing illustrations and colour in the wireframes.

I also used Able plug-in to check the accessibility of these colours. I made sure they were at least at a double-A standard so that it can be accessible to readers with viewing disability.

In this process, I started making my design look more alive and ‘pretty’. I really enjoyed this process because it felt like the brand values I was researching and putting together earlier is starting to become more put together.

mid fidelity prototype which i first started using colours
mid fi prototype of colours

4 — Typography

After adding colour, I prepared the typeface style for the project.

I used google font to help choose my pairing and to see what fonts would look best on my design. In the end, I chose McLaren and Patrick Hand font. I put together a typeface sheet, similar to the colour scheme sheet, it will be used to keep my font consistent throughout the pages of my design.

A typeface sheet can also be used for developers to use as a guide for implementing designs too, so learning this process is very important.

typeface style sheet of the fonts I used for my design. it contains the font size, type face and examples for me to reference

I added the font style into my prototype. While I was working on this, I also went onto making some illustrative backgrounds and changed some details in the design.

screenshot of mid fidelity prototype with typography, colours and illustrations done
mid fi prototype

5 — Final Design!

After a bit more tweaking I reached my final prototype!

You can view the design here

picture of final prototype

Hope you enjoyed the read! Please consider leaving a like if you enjoyed what you read, learned something new, or simply scrolled to the bottom of the page!
You can read about other projects I’ve worked on here in Medium or you can view them in my portfolio!

Portfolio
LinkedIn

--

--

No responses yet