PRODUCT DESIGN

Give Me Five

Mental-health Platform for Youth in Schools

Did you know

In the last 10 years, depression among 14-17yrs olds increased by more than 60% in the USA alone.

Problem

  • No platform existed to successfully detect and report mental-health issues at scale.
  • Paper based mental-health check-ins are slow to roll out and difficult to gain insights from.
  • Seeking help has many obstacles for you, especially within a school setting.

We set out to create a friendly and accessible platform to detect mental-health problems in youth because it's such a huge and increasing problem.

Solution

We set out to create an engaging and easy-to-use platform for school children, parents & school staff.

I proposed a separate interface for youth, teachers and an admin dashboard for clinicians to easily consume collected data and rapidly identify issues.

My Role

My role was to lead Product Design, working closely with all stakeholders including including the CEO, CTO, domain experts (PHD Psychologists) and the software engineers to understand, define, build and launch a the platform.

Research was led by the psychologist colleagues, guided by my input on what questions to ask and usability best practices.

I oversaw development team to ensure the product remained on track and stayed true to our design and vision.

Empathise with users

PHD Psychologists on our team brought with them years of experience in the field working with children. Both of which are clinical psychologists specialising in working with children—and also parents themselves.

At this stage, qualitative methodologies would prove most valuable.

Types of inquiry:

  • Several rounds of stakeholder interviews (unstructured) → gave us deep insight into the problem
  • Moderated Usability testing was carried out with youth and staff - using clickable prototypes & early stage dev work →
  • Classroom focus groups were ran with early prototypes across multiple classes → useful for sentiment insight

The key success to this project was to understand how youth would feel about completing a short questionnaire.

Define the problem

The design thinking framework was slightly out of order for us as the psychologists on the team brought with them a deep & granular understanding of the greater problem.

Key problems identified:

  • Paper based mental-health check-ins are slow to roll out and difficult to gain insights from.
  • School counsellor's need a quick overview data to see overall school wellbeing
  • Users are too shy / scared to ask for help
  • Younger children require supervision and facilitation using apps.
  • Teachers & parents need ability to input information
  • Language usage was vital so as not to alarm

The key to a successful product was to translate the psychological problem into a psychologically sound, easy to use platform.

This problem is particularly challenging due to the sensitive nature of mental health, privacy & compliance.

Ideate solutions

From here we took our understanding of user needs and came up with a proposed solution;

Employ a graphical interface in which to wrap a proven psychological test, a small questionnaire, to gather insights into youth mental health.

Develop 3 separate interfaces for each demographic:

  • Youth facing: GUI for children → fun, engaging, colourful, incredibly simple
  • Adults facing: GUI for adults → more serious, more functionality - adults don't want to use a kids app
  • Dashboard: Dashboard view for school staff & clinicians → simple overview + allow deep dive

Prototypes

Being a startup, initial round of prototype began with high res mockups, as designs had to be presented to investors. From there, designs were assessed against usability standards, refined then put through their paces in user testing.

Quick scroll to prototypes:

Prototype round 1

Youth Interface

Student flow → Friendly onboarding followed by 5 simple questions

Problems with this design:

This slider interaction relies on having a default selection. In user testing, students would blast through the questions without any consideration, thus skewing the results.

Prototype round 1

Adult Interface

Teacher flow → Allows ease of interaction with a class of 30+ students

Student

User goal

• User receives link in email
• Taps link which takes them to a web page
• They see a welcome screen, greeting them by name
• User answers question regarding themselves
• User reviews then submits answers
• They see see a final message screen.
• They close the browser

Context

context:
• User could be on their phone or parents phone at home
• User could be using shared computer in school classroom / counsellors office

High res prototype → Parents & teachers can give input on child wellbeing

Problems with this design:

While space saving, multiple questions on one page, causes confusion for users

Prototype round 1

Counsellor's Dashboard

Dashboard view for school staff & clinicians → overview + deep dive

High res prototype → Counsellor's dashboard.
Shows the overall health of the school at a glance

Problems with this design:

Humans are inherently bad at reading pie charts.

Users could not easily gauge the percentages of students in need.

User Testing

User testing was carried out by our team psychologists in schools with around 60 children.

Along with school testing, supervised usability testing was carried out with selected children in a care facility.

Supervised usability testing was carried out with selected children in a care facility.

Key Learnings:

  • Problem: Students will most likely be using shared iPad
    → Solution option:
    Implement simpler login method
  • Problem: Defaults cause students to blast through answers
    → Solution option: Design an interface that cannot have default 'mood' selected
  • Problem: Younger students wont be using phones
    → Solution option: Login will have to be facilitated by teachers
  • Problem: Students were confused with what to do
    → Solution option: implement friendly onboarding
Prototype round 2

Student Interface Revised

  • Revised designed moved to iPad as default
  • Improved onboarding put students mind at ease and gave an idea of the time it will take to complete
  • Improved facilitation with backend support for teacher to log in and out of the interface
Wireflow of one onboarding for student interface

Revised Design Animation→
New interface that adheres more to psychological best practices - user must choose instead of having a default selected

Onboarding screens put student's mind at ease,
informing them of what to expect.

Design Revised:

This design fixes previous problem of having a defaults selected. In this use case, increasing friction and slowing down the user was a good thing, encouraging more though for these important questions.

Prototype round 2

Adult Interface Revised

  • Changed to single question per page
  • Added improved functionality for teachers

Revised Design:

Changed to one question per page design which increased comprehension, reducing confusion.

Prototype round 2

Counsellor's Dashboard Revised

Revised Design:

Simplified interface is easier to consume and understand. At a glance, counsellors can see what action needs to be taken and act quickly to help students.

Summary

We set out to create a digitised mental-health checkin tool for youh.

[Product]’s look and feel and created a unifying design system that merges usability guidelines with aesthetic appeal. These changes impacted every corner of [Product]’s website, including key interactions.

Mental health is an super important area of health.

With mental health, many considerations come into play that aren't usually such a big deal, such as being delicate and deliberate with choice of language, and even use of colour.

As well as that, developing experiences for children has many unique roadblocks and intricacies and eccentricities.