Creating a news app for children
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.
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.
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.
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.
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.
I also thought about ways the onboarding page can look like.
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.
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.
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.
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.
5 — Final Design!
After a bit more tweaking I reached my final prototype!
