Web-based Mobile Application
Mellow.
A mobile application
to help youth in crisis*
*Crisis: any situation that has caused someone emotional or physical distress where they felt unable to cope.
Mellow is a web-based app that helps youth in crisis by offering a holistic resource for them to develop their own support plans, access community-based services, and encourage self-reflection as alternative methods of crisis-management.
The Role.
UI/UX Designer
-
Product Design / Research / Personas / User Journey Map / Facilitating Workshops / Idea Jam / User Flows / Wireframing / Prototyping / Visual Design / Icon Design / Web Design / Email Design / Front-end Development / User Testing / Marketing / Advertisement Design / Design Guidelines
The Clients.
Featured.
2019 Digifest (Toronto) / 2019 Mental Health and Technology Symposium / Applied Arts Magazine Awards 2018 / 2018 CICan Innovative Showcase(Ottawa) / 2018 CHI Design Competition (Montreal) / ACM CHI Conference on Human Factors in Computing Systems / ResearchGate 100+ views & 3+ citations / www.crisisplanning.ca
The Challenges.
Youth who experience crises often do not receive appropriate support and end up in emergency services.
10.1% of Canadians aged 15 or older, reported symptoms consistent with at least one of six mental health disorders
Youth may hesitate to engage and receive traditional mental health and crisis support because of cultural barriers, availability of resources, ease of access, stigma and/or socioeconomic barriers
Overview.
Mellow is a community-based five-year research project that was initiated by the Centre for Addiction and Mental Health (CAMH)
We worked collaboratively with marginalized youth located in the Region of Peel - which is the most culturally and ethnically diverse region in the Greater Toronto Area.
Co-Design Method.
We integrated stakeholders throughout the design process to collaboratively design the solution
10 community leaders, service providers, friends and family members / 40 Peel youth
The Framework.
Key Findings from Research.
Trust and Privacy.
Youth stressed to us the importance of keeping their information secure and private
Culturally Inclusive Design.
Youth experiences crisis differently & it can be an extremely isolating experience when cultural and language barriers are involved
Peel Crisis Capacity Network Crisis Plan Pocket version.
Crisis Planning and Management.
Youth needs an alternative to the traditional paper based approach to crisis planning and saw value in a digital solution (Trust and Privacy)
Design.
Design Brief.
Click the image to see more details about the design mission, functions, objects and user requirements
Avatar.
Set-up facilitated by Avatar
Trustworthy friend to the users
Personalized push notifications and resources
My Plan.
Holistic support planning without the counsellors physically supporting youth
Support contacts
Short video clips for hands-on tips
Daybook.
• Writing, audio recording and emoji posting
• Timeline for tracking past emotions
• Emailable report to counsellors
Community.
Find related services and organizations
A locator for services based on the user’s personal preferences
Mellow Call.
Fully optional companion app for support in emergency situations
*All the contents are available offline for the youth who have limited access to the Internet or devices.
The User Journey Map.
The Style Guide.
Typography.
Colour Palette.
Text Colours.
Navigation Tab.
Buttons.
Secondary Buttons.
Icons.
Forms.
Usability Testing.
We conducted a series of usability testings at different stages of the project and employed human factors and ergonomics principles and practices to ensure that the final design is in-line with user requirements as well as relevant design principles and guidelines.
Twelve youth, six counsellors and four family members were asked to walk through functions of the app and to comment on the usability of different features.
This helped the team to understand how a counsellor would the use app with a client in addition to youth using it on their own.
The feedback led to design recommendations and was later reflected in the final version of the mobile application.
The Learning.
There were many biased languages that are inappropriate or triggering and we had to request additional feedback from counsellors in terms of how best to write a crisis plan.
Building trust, making everyone feel comfortable and encourages participation parts were not easy during the co-design process since many of the youth are shy and some were as young as thirteen years old.
It was interesting to see youth got more empowered in each phase of co-design and user-centered design.