The Helpers Project

Developing for social good

To design a solution to a social problem is always an important but difficult task. There will never be a shortage of issues to solve so choosing which to pursue solutions for is just as hard as the task itself.

Mental health is an issue that almost everyone will eventually be forced to reckon with. Maybe its your friend, your family or yourself in crisis. When you find yourself in that moment knowing where to start is the first step.

When I conducted interviews with local mental health advocates and those who have needed to use such services a problem emerged that I knew I could design a potential solution.

I envisioned a place for people to start their journey through a mental health crisis, to be the waypoints that guide them. I called it The Helpers.

Competitive audit

Ideation

I conducted an audit of potential competitors to ensure that I had at the bare minimum the same features they did. I wanted to see the holes in their product and design around doing what they did but better and to plug the holes they left behind for an airtight design.

I identified 4 key gaps.

Accessibility
Support groups
Advocacy groups
Support in general

With these in mind I started my design process.

The one stop shop nature of the design necessitates easy to use search functionality and information at a glance.

Digital Wireframing

A large panel system for the visually impaired with clearly demarcated sections.

Education resources on the bottom of the homepage for quick access.

Two panel layout on the top with picture and message option drawing the eye.

Showcasing the human elements of organizations like support groups.

Lo-fi prototype

Click here to check out the lo-fi prototype - https://xd.adobe.com/view/da6bb4f7-1bcd-4067-b7f0-14a13ef770a3-8f38/?fullscreen

A moderated usability study gave exceptional feedback. Not a single participant failed to complete their task list! The feedback received told me that the buttons needed more depth but that the design was otherwise easy to understand and use.

Mockups and Hi-fi Prototype

I chose soft pastel colors to convey a softness to the design and to give users a feeling of safety. The contrast between black and the soft mint green and paper white make visibility high and the use of pink dividers allows for use of screen readers and enhance readability. The choice to include so many pictures in the design was made consciously to help draw attention to the most important portions of each page. The approach to this project was a mobile first philosophy and every size was designed with mobile in mind.

To see the Hi-fi Prototype yourself click the link here - https://xd.adobe.com/view/6a29f66b-b596-46f9-8153-a39adc642864-3f7a/?fullscreen

Responsive designs

The original mobile designed for small screens

Created for tablets and uses the screen size to add expanded descriptions in the search menu

The final design intended for desktop and takes advantage of the size to display menu options on the banner instead with definitions to common site language always available on the side bar.

Accessibility

Interactable elements are color coded using a soft pastel and dark black for high contrast visibility.
IA used alongside barrier lines to segment content in a way that is easy for screen readers and other accessibility tools to understand the page.
Large buttons and high drop shadow used to create an elevation that is simple and easy to see for users with sight problems.

Reflection

“This would make getting help something normal people could actually do” - Participant Damian.

This quote made me feel confident that the design was on the right track.

This project allowed me to flex my burgeoning design muscles in new ways that weren’t available before. Specifically a Mobile first approach and scaling the design to many different screen sizes.

Ambitions

If I were to revisit the project, I would want to touch up or improve these areas.

Increase the types of support showcased to include more obscure sources of mental health support.
Design the profile and search filter setups to increase the usability of the designs themselves.
Implement a system of tool tips to allow for the tag system to truly shine.

Page updated

Google Sites

Report abuse