top of page
title copy.png
PJBB TOP

An app created for parents to asses the mental well being of their child.

Type

Product Design - iOS Mobile app

Role

UX Design

User Interaction Design

Creative Direction

Tools

figmalogo.png
photoshop-logo-png-photoshop-cc-logo-vec

DEFINE

foxtail_2.gif

Setting Our Goals

Our primary "How to" directive was to create a psychological survey for children that is fun, enjoyable and that doesn't feel like a survey!

How might we create an enjoyable survey experience for children and parents? 
A.
B.
C.

Design an experience that is entertaining and pleasant.

Ensure the process is easy for a child to understand.

Use language and storytelling that would encourage a child to use the app.

tree.png

RESEARCH

Exploring the Landscape

As part of our initial dive into the world of child psychology we interviewed children between the ages of four and nine years of age and their parents.  We also observed them using their favorite apps and games in order to understand their thinking and awareness levels. 

 

Before we got started we used competitive analysis to investigate if there were any similar products out there in order to confirm that our idea was viable.

Keeping the "how might we" questions in mind I looked for inspiration in visual design, animation, interaction and overall user experience.

Inspiration

When looking for inspiration I was looking for ideas that would bring the idea to life.  It had to tell a great story, be  bright, fun and accessible.

Alex Pasquarella.png

STYLE AND MOOD

We looked for the right style of imagery that would help create the world where the story would take shape.

TELLING THE STORY

The use of parallax motion is a great story telling tool.  It is used to create seamless transitions and flow within the story.

BRINGING IT TO LIFE

Character animation brings a fun and engaging element to the experience.

Lean Personas

In order to get an idea of the targeted users and align the design around them,  lean personas were created.   These early personas are created using research cadences, basic user testing and the creation of empathy maps.   

Recent Parent

Aged 30 - 40

Any gender

Motivations

I want to better understand my child and do what's best for them..

I want to know how to better help my child handle stress and specifically what causes them stress.

Pain Points

It's hard to communicate directly to my child.

I don't want to go directly to a doctor or psychologist. 

Child

Aged 3 - 9

Any gender

Motivations

I like play games that have stories and adventures.

Sometimes it's fun to play games with my parents.

Pain Points

Sometimes I can't express what I feel.

I don't confusing stuff that makes me too much.

The Journey

This will be a journey that the parent and their child take together.  Out of this journey we targeted three essential steps.

1

You sit down with your child and open the app.  The splash screen is fun and entices your child to join in the adventure.

reading.png
2

As you move through the onboarding process, your child follows along as the story begins to unfold.

book.png
House.png

DESIGN

3

Your child runs through the questions as you quietly monitor and assist them.

storybook.png

Concepts, Ideas and Prototypes

One of the main design challenges was maintaining the effectiveness of the product while making it easy to use and entertaining for children. 

 

Custom animation and the use of motion also played a very large in the development of this app.  Imagery, motion and language had to combine to create a complete package.

Mid-Fidelity Wireframes

After sketching the ideas on paper, I moved on to the digital wireframes.  Organization of content, UX writing, animation and use of motion were all key elements of the design thinking.  For example, the use of parallax for story telling would have to fit perfectly within the design of the onboarding and question sections. 

ONBOARDING PG1.png
ONBOARDING PG2.1 - Keyboard.png
CHAPTER END.png

Onboarding

Chapter 1 - Q1.png
CHAPTER ONE V2.png

Questionnaire 

The mid-fi designs contained the essential elements that would later be expanded upon with interaction and visual design.  

Interaction Design

Both static design (glyphs, icons, changing colour, shape of controls) and animation of UI not only make an application stand out from the crowd,  but are key to the unique experience and usability of this app. 

The nature of the design is impacted by several key motivators:

empathy

environment

usability

accessibility

BUTTON FEEDBACK

A key element of interaction design, it was very important for the button feedback to flow with the environment, be easy to identify and playful.

Template_app.png
Template_app.png
foxjump.gif
foxtail_2.gif

CHARACTER ANIMATION

Animating the main character brings life to the story.  It is a playful way of encouraging the user to move through the different stages of the application.

Template_app.png
Template_app.png

PARALLAX TRANSITIONS

Horizontal parallax was used for scrolling of the images in the gallery.  Instead of a harsh transition between images the parallax scrolling created a level of connection between the images. 

Hi-Fidelity Prototyping

Once all the elements were finalized and a final round of testing was done, it was all put together into one complete prototype. 

tree3.png
tree3.png
Template_app.png
tree3.png
tree2.png
tree.png
foxtail_2.gif

Mood & Colours

A strong visual identity was key in establishing the branding and creating the right environment for the user.  Little Minds defines itself in the realms of learning, curiosity and adventure.  The mood and branding needed to reflect this spirit.  

Comfortaa

Aa

Baloo

Aa

bottom of page