top of page
fatherkid photo.png
peqwhitelogo.png

UX/UI + DESIGN SYSTEM FOR PARENTALEQ, AN APP FOR PARENTS OF CHILDREN WITH ANXIETY

mockuuups-iphone-12-mockup-perspective-stand-right.png

PROJECT SUMMARY

ParentalEQ is a startup developing their first coaching app to help parents of children with emotional issues such as worries, fears and anxiety.

RESPONSIBILITIES

  • UX and UI Design (mobile)

  • Design System

  • Prototyping and testing

  • Information Architecture

  • User Research

  • UX Copywriting

INTERESTING FACT

Most work was undertaken remotely due to COVID-19 Restrictions.

TIMELINE

7 Months

OVERVIEW
benjamin-manley-QkflfhJn1KA-unsplash.jpg

ParentalEQ is a startup developing their first coaching app to help parents of children with emotional issues such as worries, fears and anxiety.

Frame 171.png

ParentalEQ wanted to determine the best navigation, flow, and visual design that would allow parents to easily apply lessons to real-life situations with their children and quickly derive value from using the app.

Target Audience:

Parents of children aged 5-12, who have been experiencing issues with worries, fears, or anxiety.

PROCESS
Frame 170.png

(Click to enlarge)

not-the-usual-office (1).jpg

DEFINING THE PROBLEM

I worked with the C-Suite to define a clear problem statement to ensure we would stay focused on achieving the goal of empowering parents to educate their kids about emotional wellbeing.

PROBLEM STATEMENT

“A parent with kids aged 5-12 who is struggling to navigate emotional health challenges with their children that are initiated by a range of triggers.

 

Currently, parents need to research strategies and information in books, courses, Facebook groups, Google or psychologists but they don't know where to start and the options can be complex and challenging to navigate.”

Screen Shot 2021-10-11 at 7.56.57 pm.png

USER FLOW FOR MVP

I developed a user flow to articulate the flow of the app and to discuss screens that would be deemed a priority.

 

We were able to refer to this throughout the development of the app and it would evolve as we gathered feedback in each round of testing.

Screen Shot 2021-10-11 at 8.36_edited.jpg

WIREFRAMES

I drew some paper wireframes to quickly get feedback from the team and iterate on some of the features, especially from the developer with regard to technical feasibility as we were working to a tight timeline.

 

Working this way allowed us to build the product quickly so that we could rapidly test it with regard to the flow and content.

We ended up selecting designs that would allow the developer to utilise certain components (like buttons and cards) from a component library which would allow us to move more quickly.

PROTOTYPE v0 (MVP)

Based on our discussions, I designed an interactive prototype in Figma to allow us to check if everything was ready to go for our upcoming usability tests.​

We called this version “v0”. It had around 17 screens.

By borrowing some components from a design library I was able to create the prototype fairly quickly.

Screen Shot 2021-10-12 at 3.17.30 pm.png
Screen Shot 2021-10-12 at 3.27.06 pm.png

A selection of v0 screens.

RESEARCH
10-homework-help-tips-article-4-3.jpg.parentsimagerendition.xl.680_edited.jpg

I created a discussion guide to find out more about our focus group and test our first prototype.

 

We wanted know the needs of our focus group and ascertain feedback on the “v0” prototype, so we arranged interviews that allowed us to do both consecutively.

USABILITY TESTING
& FINDINGS

We wanted to learn more about the parents, their situations, and get feedback about the concept in terms of content, features and navigation.

I could then rapidly make improvements and iterate accordingly.

App had no credibility.

 

Parents didn’t trust the source of information yet.

Several of the parents interviewed were divorced or separated.

 

The design of the app should be equally as appealing to them as it would for traditional-style families.

Frame 198.png

There was a general desire to skip ahead to modules deemed relevant to the parent.

 

Parents did not understand the importance of completing modules in order.

Frame 195.png

Resources needed to be more digestible as they were too large and included technical jargon. 

 

“They could add credibility if linked at the bottom of the resources as “further reading” for example, like a footnote”.

Frame 188.png

Email request - It was noted that the email page was kind of “forceful”.

 

“Everyone wants your email these days” -Parent

 

The timing of this page needed to be considered and perhaps presented at a different touchpoint.

Frame 187.png

Completion screens did not allow parents the ability to ‘skip’.

 

One person noted that he had no choice but to give a rating and he didn’t like being forced to do so.

Frame 193.png

No one realised the tick that indicated the module was complete once they had played the audio.

Frame 241.png

Interviewees complained about the audio player controls. They wanted more control over scrubbing, pausing, etc.

Frame 194.png

Resources were not clear on what type of document is being downloaded.

 

“It could say “download PDF” for example.”

- Parent

FEATURE PRIORITISATION

Screen Shot 2021-10-12 at 9.53.23 pm.png

(Click to enlarge)

Screen Shot 2021-10-12 at 9.53.06 pm.png

As a group we generated ideas that would help overcome the issues uncovered through usability testing. We then ranked them on a prioritisation matrix so we could start making high impact improvements.

RESULTS

The following images show some of the changes which were easily implemented.

Problem:

Frame 245.png

The submit interaction of the journal was confusing for some, directing them to the track page when they wanted to go back.

Improvement:

Frame 246.png

Problem:

Frame 247.png

Improvement:

Frame 248.png

Discard/continue language was confusing. “Continue” was misconstrued to mean “Continue cancelling journal entry”. I changed the wording of “continue” to “make entry”.

Problem:

Frame 200.png

Improvement:

Frame 212.png

It was not clear to parents how much they completed and how far they had progressed through the modules. We needed to look for familiar patterns to potentially improve this aspect of the experience. In this case I added a simple progress bar.

The activity page was ok but people said they wouldn’t always have time or feel like making a journal entry. We needed to look at simplifying the journal writing process.

 

Our psychologist advisors recommended to us that journaling would be a very valuable tool for parents, but parents were reluctant to do it. We needed to make the process of journaling simpler and more engaging.

Frame 182.png

OTHER FEEDBACK

Being placed directly into the modules was a bit jarring.

We needed to gently onboard parents and introduce the content so they felt welcomed.

DESIGN
Frame 253.png

I studied other apps for patterns that would assist me to address my goals of orientating parents in the program and rewarding progress.

 

By studying apps across different categories such as meditation, gaming and learning, I could get a wide variety of ideas to draw upon for inspiration.

Screen Shot 2021-10-13 at 3.51.53 pm.png

By taking ideas from other applications it saved time and I was able to advocate for established design patterns that were already used in popular apps.

WIREFRAMES

I adapted the best and most suitable features which I incorporated into a new series of wireframes.

 

The wires were then evaluated by the team and I started work on the next iteration of the prototype.

APP REVISION (v1.0)

After discussion with the developer and product manager, I was able to make the next clickable prototype.

Screen Shot 2021-10-13 at 7.57_edited.jpg

ONBOARDING DESIGN

Frame 251.png

Based on feedback about the app having a “hard landing”, I user Framer X to make onboarding screens that introduce the program and help new users to better understand how to use the app.

APP STORE / PLAY STORE SCREENS

I designed the Apple App Store and Google Play Store screens so that we could deploy the app to the public. 

Frame 252.png
Screen Shot 2021-10-14 at 3.31.27 pm.png
DESIGN SYSTEM

As the team had now grown, I needed to create a design system and style guide so that we could share a visual design language and common voice that would be consistent across all platforms (app, web, social media). 

 

Selection of system shown.

Screen Shot 2021-10-14 at 3.31.27 pm.png
1.1 Primary Brand Colours.png
2.2 Logo Padding with letter ratios.png
(Click images to enlarge)
3.2 Typography - Website.png
3.3 Calls to action.png
5.1 Composition - waves.png
5.5 Composition guidance.png
7.2 Illustration - Do.png
2.8 Logo Padding.png
2.5 White logo usage guidelines.png
5.4 Grid Setup - page 3.png
6.1 App Icons - page 2.png
7.3 Illustration - Don't.png
Screen Shot 2021-10-14 at 3.31.27 pm.png
WRAP-UP

I worked with ParentalEQ in rapid prototyping and development of the first version of the product.

 

With this version ParentalEQ was able to obtain two pilots with UK schools and over 400 paid downloads.

 

Based on this project, ParentalEQ obtained the support of Skalata Ventures - Seed investment program. 

Like what you see?
Let's chat.

mockuuups-man-holding-iphone-12-mockup-white-skin.png
bottom of page