UI Case Study | Little World’s Explorer App

How I tackled the challenge to design a mobile app that provides news to children.

Overview

This visual design challenge was developed in a 4-day design sprint as part of the User Experience Immersive course by General Assembly.

The following case study will take you through each step of my design process following some parts of the double diamond method: Discover, Define, Develop and Deliver.

The Brief

To create a visual identity for a mobile app that provides news to children age 6–10, with content tailored to their level of understanding of the world and reading skills.

It should be educational, accessible, and engaging, while parental supervision shouldn’t be required, but controls might be.

The deliverables included the following 4 pages:

1. Onboarding: what the user sees when they open the app for the first time;
2. Navigation: a menu allowing the user to move within the app;
3. Content Heavy Screen: news article page with ability to save for later;
4. User Profile/Dashboard: profile/account settings for parents and child.

Before we continue, perhaps it would be useful to touch on the concept of visual design:

“Visual design is the use of imagery, color, shapes, typography, and form to enhance usability and improve the user experience.” Source: Ux Booth.com

Discover

Competitive Analysis

To create a seamless design, it was important to to kick off researching the market and current competitors. So off I went to explore apps that deliver news for children. But to be honest I couldn’t find proper ones on App Store, so I decided to broaden the scope and include entertainment apps such as Nick Jr, Discovery Kids and Cartoon Network.

I could notice that most of these apps were very colorful, had fun and friendly typefaces and a simple language.

Similarly, I thought of businesses and apps that were not necessarily delivering news to children but would be a good source of inspiration and reference for my design:

To look at these companies was insightful and very helpful in understanding what colors and visuals I should be considering for this app’s visual identity.

Define

Brand Values

Before we start, what is a brand? A brand is a personification of a product, service or organization. It has a name, reputation and personality.

Your core brand values are the beliefs that you, as a company, stand for. They serve as the compass that guides your brand story, actions, behaviors, and decision-making process. James Winter

Therefore it was worth it spending time defining it assertively.

Initially I came up with 5 brand values:

1. Trust our Impartiality;
2. Experience some Fun;
3. Explore your Imagination;
4. Stimulate your Curiosity;
5. Have some Inspiration.

After receiving feedback and checking what some colleagues were creating, I realized that I didn’t have some key words such as learning, knowledge, education, challenge and discovery.

So after thinking further, I ended up with the following 6 brand values:

1. Trust our Impartiality;
2. Learn whilst having Fun;
3. Discover the Knowledge World;
4. Explore your Imagination;
5. Trigger your Curiosity;
6. Be Inspired.

Receiving feedback and iterating your work is as important as creating it from scratch, as some of these important worlds were not part of my initial values.

Brand Personality

Personality could be summarized as “the characteristics that people describe how they feel about your brand, rather than what they think it is or does.”

Reflecting about the values above led me to identify the following 6 personality traits for the kid’s app:

1. Impartial but not Apathetic;
2. Playful but not Over-the-top;
3. Inquisitive but not Rude;
4. Imaginative but not Naive;
5. Curious but not Distracted;
6. Inspiring but not Manipulative.

Defining the “but not” was key in establishing the limits of my brand, which prevented me from going too far and keeping this in check on my designs.

Brand Position

The next step was to position the brand by picking 5 sets of values from the list below and marking where the brand would sit on the scale.

Having worked on the values and personality, it became very clear to me where I should position the brand:

It would be more modern than traditional, strong, fun, colorful, accessible and neutral in terms of gender.

Sketched Word Association

To help me start visualizing ideas, I chose one keyword from my brand values to come up with a word association off the top of my head. I sketched and brainstormed words associated with “learn”, the keyword that better represented the app’s offering.

Sketched Word Association

This gave me great clarification of which elements could be part of the brand’s visual identity. Was also the starting point of creating the logo and thinking about which possible icons would be part of the app’s iconography.

Develop

Mood Board

Mood boards are a great design tool to visually define brand personality and app’s visual identity. It should include brand keywords and notes and should feel focussed and connected to those keywords.

First step: I gathered visual inspiration and reference related to the app’s keywords and to compiled these images into an art-board on Sketch.

Second step: I made notes and observations as to what was working and what was not when it came to represent the kid’s app keywords and the emotions it was trying to evoke.

Third step: I tidied up the mood board and notes, laying them out in a clear fashion so that it would be possible to understand where the apps’ visual identity was heading to.

Color Palette

As you can see on the mood board above, these inspirational images clearly set the path for creating the app’s color palette. I started doing it by grouping the most frequent colors present in these images.

Next up I played with their level of brightness (HSB) lightness (HSL) and gradients on Sketch, to have as many hues as possible and be able to combine them in the designs.

Typefaces & Hierarchy

The last step before start sketching would be identifying the typefaces that would be used in this project that communicate through their style those keywords in the mood board: fun, imagination, curiosity, learn and inspiration.

Therefore the range to be chosen from had to be sans serif instead of serif, once it is more modern, informal and friendly.

Looking at Google Fonts, Nunito looked like a good sans serif option and using the site fontpair.co I chose Roboto to pair it with. The first for body copy and second for titles and subtitles.

In addition to that, Butterfly Kids looked perfect to use for the logo’s title.

Deliver

Paper Sketches

Below you can find my very first sketch of the 4 screens that were part of the deliverables: onboarding, navigation, content heavy and user dashboard. Also, an idea for the logo and app’s name: Little World’s Explorer.

The logo showcased elements originated in the word association and mood board images: ferry wheel for fun; glasses for intelligence, lamp bulb for ideas, book and pencil for learning.

Logo Development

Below you will find the digital version of the logo. I created this compass on Sketch inspired by the one below found on Keynote.

Inspiration for the compass present in the logo.

Digital Logo — big and small version.

Afterwards I received feedback that this logo was not graphic and therefore difficult to be in a smaller version. So after feedback, I created the second one you can see above on the right.

Initial Digital Design

Drawing inspiration from my mood board and the initial competitive analysis, I designed the following screens using an iPhone 8 frame.

The idea behind these curved lines in the background was to show a path to be taken to explore this new world of possibilities and knowledge. Also, to represent movement and trigger curiosity.

The book on the first page and the mirror on the second one aimed at communicating imagination, one of the brand values.

The mix of colors intended to express fun, adventure and excitement.

Peer Feedback

I presented these screens to my colleagues and instructor from the UX Design Immersive Course and this was their contribution:

• liked the logo and fun look & feel;
• home page: book color too close to the background — work on contrast;
• icon to swipe left on the book wasn’t clear for them;
• navigation page: “It looks like a list of things and not buttons.” Suggestion to align the navigation to the center and remove dashes or add boxes with shadowing for each link.
• suggestion to frame the mirror in a square and not oval to better fit the text in it;
• find consistency amongst icons on the menu: not every button had icons and some were filled and some others were not;
• great feedback on the design of the third page. Suggestion to add a picture of the author to make it appeal more friendly.

Final Digital Design

After carefully considering their feedback, but also being confident about some of my design decisions, I iterated and designed these final screens:

Next Steps

Because this challenge was more focused on the visual identity, some UX steps were not followed, such as user interviews, personas, usability tests. So the next step would be to go through these and iterate my designs accordingly.

Thanks for reading!

If you would like to check other UX design projects or get in touch, please visit my portfolio by clicking here. See you there!