Robyn Chmelyk | Graphic Designer

The Brief

Design a feasible
mobile app

Tools

Figma & Adobe Illustrator

Duration

5 weeks

When

Oct 2019

'Frend' E-Mental Health App

background with multiple app screens layered on top

The Brief

Design a feasible
mobile app

Tools

Figma & Adobe Illustrator

Duration

5 weeks

When

Oct 2019

The Problem

The problems addressed are the main barriers to individuals accessing mental health support; cost and shame.

Recent studies suggest 970 million people are affected by mental illness globally - approximately 15% of the total human population - and access to proper therapy can drastically affect the outcome of someone’s condition.

The Research

The most common mental health conditions and symptoms are:

Anxiety

• persistent worrying or anxiety

• overthinking plans and solutions

• perceiving situations and events as threatening, even when they aren't

Depression

• feeling sad, irritable or having excessive worries

• not wanting to do activities that one used to enjoy doing

• experiencing difficulty with doing usual activities

Addiction/PTSD

• taking alcohol and/or drugs, leading to problems in carrying out usual activities

• recurrent, unwanted distressing memories of a traumatic event

ADD/ADHD

• difficulty concentrating, or the feeling that your mind "goes blank"

• being unable to sit still

• acting without thinking

The main goal of the project was to create a
low to no cost e-mental health support.

The Solution

A combination of two existing technologies:

Habit Tracking

Soft and hard (user-input) user data is used to track the user's progress in a variety of wellness-related tasks, such as their physical activity, mood, and sobriety.

AI Therapist

The AI-chatbot acts as a form of digital therapist that can support the user and, ideally, help them ease their chronic mental illness symptoms.

Personas

The personas are based on one of the four most common mental illnesses.

Site Map

User Flows

Onboarding Phase

Add & Delete Widgets

Initial UI Sketches

I began my design process by sketching the pages of the app.

Through the low and mid fidelity wireframes, the features of the app were given a cohesive style.

Mid-Fidelity Mockups

1 / 10

2 / 10

3 / 10

4 / 10

5 / 10

6 / 10

7 / 10

8 / 10

9 / 10

10 / 10

❮ ❯

User Testing Insights

I conducted a series of user tests and user's reported:

Difficulty Clicking Elements

Some overlay elements require a background colour to improve readability.

Hotspots for buttons need to be made larger as users were having issues clicking them.

Text size is too small in some areas of the app and needs to be increased.

Some Element's Purposes are Unclear

Elements that are clickable should read more clearly as clickable buttons.

Use different animations to help the visual flow of the prototype.

Desire for More UI Customizability

The users wanted the ability to go back and change information in the onboarding phase.

The users wanted to change the UI to different colour schemes.

High-Fidelity Mockups

Dashboard

Chatbot Screen

Habit Tracking

UI mockup of the app's data tracking page

Adding Widgets

Live Prototype

Style Guide

The app was designed as a 'dark mode' and with high-contrast colours.

The UI was designed like this because higher contrast images are easier to read for someone with vision impairment or colour blindness. As well, light sensitivity and migraines are common for those who experience depression, anxiety, PTSD, and addiction, so the app has been designed as a dark mode to make it easier more accessible to these users.

Project Reflections

Through my app design process, I learned:

Always Focus on the End User

Maintaining a complex design system can be super difficult and adhering to a strict style guide is essential in producing aisually appealing app without having to constantly update small details.

Balance Everything

Telling a clear story using UX/UI design while optimizing the app for what is feasible, functional, and usable is a difficult balancing act!

Use Illustrations

Next time, I would definitely incorporate illustrations to help humanize the content within the app and make it feel more inviting.

The Brief

Tools

Duration

When

'Frend' E-Mental Health App

The Brief

Tools

Duration

When

The Problem

The problems addressed are the main barriers to individuals accessing mental health support; cost and shame.

The Research

The most common mental health conditions and symptoms are:

Anxiety

Depression

Addiction/PTSD

ADD/ADHD

The main goal of the project was to create a low to no cost e-mental health support.

The Solution

A combination of two existing technologies:

Habit Tracking

AI Therapist

Personas

The personas are based on one of the four most common mental illnesses.

Site Map

User Flows

Onboarding Phase

Add & Delete Widgets

Initial UI Sketches

I began my design process by sketching the pages of the app.

Mid-Fidelity Mockups

User Testing Insights

I conducted a series of user tests and user's reported:

Difficulty Clicking Elements

Some Element's Purposes are Unclear

Desire for More UI Customizability

High-Fidelity Mockups

Dashboard

Chatbot Screen

Habit Tracking

Adding Widgets

Live Prototype

Style Guide

The app was designed as a 'dark mode' and with high-contrast colours.

Project Reflections

Through my app design process, I learned:

Always Focus on the End User

Balance Everything

Use Illustrations

'Beo' E-Commerce App

'Autumn Peltier' Awareness Campaign

The main goal of the project was to create a
low to no cost e-mental health support.