UX/UI + DESIGN SYSTEM FOR PARENTALEQ, AN APP FOR PARENTS OF CHILDREN WITH ANXIETY
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
ParentalEQ is a startup developing their first coaching app to help parents of children with emotional issues such as worries, fears and anxiety.
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
(Click to enlarge)
.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.”
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.
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.
A selection of v0 screens.
RESEARCH
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.
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.
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”.
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.
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.
No one realised the tick that indicated the module was complete once they had played the audio.
Interviewees complained about the audio player controls. They wanted more control over scrubbing, pausing, etc.
Resources were not clear on what type of document is being downloaded.
“It could say “download PDF” for example.”
- Parent
FEATURE PRIORITISATION
(Click to enlarge)
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:
The submit interaction of the journal was confusing for some, directing them to the track page when they wanted to go back.
Improvement:
Problem:
Improvement:
Discard/continue language was confusing. “Continue” was misconstrued to mean “Continue cancelling journal entry”. I changed the wording of “continue” to “make entry”.
Problem:
Improvement:
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.
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
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.
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.
ONBOARDING DESIGN
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.
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.
(Click images to enlarge)
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.
