top of page
Group%20480_edited.png

PeerTECH 3.0

A mobile and web platform that encourages people with severe mental illness towards recovery through peer connection.

Overview

PeerTECH is a tool that facilitates peer support for individuals with lived experience of mental illness.

With my background in anthropology and passion for deep empathy, I strove to improve the UX / UI of the existing mobile and web sketches from the previous team to creating a product which both sparks joy and is simple and accessible for all users.

Project Details

Skills

UX / UI Design

User Testing

Team

4 developers 

2 designers
1 project manager 

Duration

10 weeks

A Lack of Mental Health Support

Existing mental health resources lack supportive strategies necessary to learn and implement habits that are crucial for overall health. 

As a result, people with serious mental illness have much shorter life spans, dying on average 30 years earlier than individuals without serious mental illness. 

This challenge was inspired by our partner, Karen Fortuna, a Professor of Psychiatry and The Geisel School of Medicine.

Group 8.png

Objectives

Group 461.png
Group 462.png
Group 463.png

Designing for Mental Illnesses

PeerTECH's Users

There are 4 distinct users of PeerTECH: Super Admin, Admin, Peer Support Specialists, and Service Users. To ensure the best experience possible, it was important to understand the roles of PeerTECH users. 

Group 3.png

Super Admin

Owners of PeerTECH who have access to all PeerTECH users and organizations via web

Admin 

Owners of the workspace for their specific organization

 

Peer

Trained individuals with experience of mental illness who support the service users in completing the PeerTECH curriculum.
 

Service User

Individuals with experience of mental illness who work with their peer support specialist toward recovery.

Project Timeline

The design timeline for PeerTECH as it had already gone through a complete design process before I joined the team. 
 

However, one of the best things about design is that there is always room to improve on the existing UX / UI. 
 

During 10 weeks with PeerTECH, I was the most challenged and passionate about improving the Service User's Goals experience.

Group 464.png

Let's talk about goals.

User Empathy

Let's be honest - setting goals and achieving them is really hard!

With our users in mind with live experiences of mental illness, it was crucial to develop a goals experience that both made them

feel great and celebrate their achievements.

Group 465.png

Setting goals is a process.

Here's how we do it at PeerTECH.

Personal Growth

After meeting with the previous designers, we discovered areas of improvement for their current goals feature.

 

While they had done a great job, there were still ways to enhance these designs to ensure the best experience for Service Users. 

Screen Shot 2020-08-30 at 1.14.26 PM.png
Group 475.png
Group 474.png
Screen Shot 2020-08-30 at 1.14.31 PM.png

Sketching it out

I started to sketch out a variety of ideas that included layouts, editing, adding, and viewing progress. 

Screen Shot 2020-08-25 at 10.03.52 AM.pn
Screen Shot 2020-08-25 at 10.04.18 AM.pn
Screen Shot 2020-08-25 at 10.04.00 AM.pn

Putting Ideas Into Action

Once I had a clear idea of some of the main features and views, I opened Figma and started designing. 

Each design iteration was accompanied by user testing from PeerTECH users and feedback from Karen.

Screen Shot 2020-08-30 at 1.39.37 PM.png

Pain Point
"There is no way to differentiate between completed and in-progress goals, and the icons are confusing."

Iteration
Completion Color: I added green once a goal is accomplished to reduce the cognitive load of users.

Pain Point
"The goal label text is too small and does not provide enough information."

Iteration
Linear View: allows users to be able to see more information about their goals.

Screen Shot 2020-08-30 at 1.47.22 PM.png
Screen Shot 2020-08-30 at 1.39.57 PM.png

Pain Point
"I like the specific icons, but add goal interferes with the scrolling."

Iterations
Add Goal: Adding goals should be easy and encouraged. I extended the add goal bar.
 

Icons: Incorporated action-specific icons for users to customize their goal experience.

Pain Point
"I want a more qualitative way to view my progress.

Will I have to endlessly scroll to see complete goals?

Iterations
Add Goal: button was not placed in the proper hierarchy.
 

Color: Incorporating green for completed goals. Colored emojis are more fun!
 

Progress: individual progress bar is below each goal for users to stay motivated.

Screen Shot 2020-08-30 at 1.40.38 PM.png
Screen Shot 2020-08-30 at 1.40.54 PM.png

Pain Point
"I can't find an easy way to edit my goals. What if I complete a daily goal, but it's not fully accomplished?"

Iterations
Accomplishments: The prior design limited users from viewing their achievements if the scroll got too long. 
 

Progress: Overall progress is displayed at the bottom, while individual daily iterations are beside each check-box.
 

Iterative goals: Because some goals repeat, a goal will not be moved to "Accomplishments" until it has been 100% accomplished.

The Goal Solution

After several rounds of user testing and feedback, we came to our final designs of the Service Users' goals. 

The Service User Goal Flow

While the primary goal screen is important, so is everything else in between. 

Screen Shot 2020-08-29 at 10.57.18 PM.pn

Main Features

After rounds of testing and iterating, below is a breakdown of the primary features within the goal setting process. 

Active and Accomplished Goals

Toggle between screens to view your current and past goals.

goals - accomp.gif
ezgif-7-98bb75282e81.gif

View Your Current Goals

To preview a goal, users simply click on it to directly edit. 

Edit Goals

Editing goals is easier than ever, and reaches accessibility needs. You can change your icon, and all the details!

edit.gif

Conclusion

Reflection:

1. Nothing is ever too simple. 

Many of our screens may appear as unexciting. However, Karen informed us that animations and too many graphics may cause hallucinations or seizures.  We knew that for users to enjoy PeerTECH, the app would need to be as accessible as possible. 

2. Design for accessibility 

Even though iPhones and Androids have accessibility settings with text size, as designers it is our responsibility to ensure that the user experience for everyone is enjoyable. I followed the accessibility design rules with contrast and text size.

3. Color makes everything better 

Service Users have been surrounded by clinical apps and terms for years. While setting goals, it should be fun, colorful, and fulfilling. 

Next Steps:

1. Peer & Service User Onboarding

Now that we have developed the mobile app and web platform, our users will go through the onboarding process to understand all of our features. 

2. Notifications 

Service users are interested in receiving push notifications to remind them to meet their goals. I hope to run user testing on the effectiveness of the current goals feature. 

3. Development 

The goals feature is currently being coded by our PeerTECH developers, and will be available in the next update!

Illustrations by Freepik Stories
bottom of page