Fall 2022
Remote, Conceptual

Providing  a safe community for healthcare professionals so that they can better manage their mental health and the rigors of their job

6 minute reading time

Project Details
(Conceptual)

My Role
UI/UX Designer, Research Lead
Team
Myself, Yara Afshar
Duration
November 14 - November 30 (2 weeks)
Tools
Figma, Notion, Photoshop

Overview               

What is Sero?
Sero is an application created in collaboration with Doctor's Under the
Radar. In a field where practitioners are regularly faced with life or
death situations and tough conversations, mental acuity is at a premium,
while mental health conditions run rampant. Therefore, Sero hopes to
provide Doctors with a safe community platform where doctors can meet,
find resources, support, create groups and events to better manage their
mental health and the rigors of the job.

The Design Process

UX Research Plan

As a team, we performed user research, C&C Analysis, User Interviews,
User flows, created Personas, Journey Mapping, Wireframes, and Low
and High-fidelity prototypes.

Competitive Research   

We conducted a competitive and comparative analysis to fully understand
what our competitors has and also familiarize ourselves with mental health
applications. Afterwards we conducted user interviews to decide what
features must be in the application.

Here were our findings compared to our final product:
C&C Analysis
Upon finding out each website's features, we decided it was imperative for
Sero to include a community, journal, and mood tracker. Reading the reviews for
these websites, we found that the those features helped users alleviate
stress regarding their mental health; therefore, the next steps for us were to
find out what doctors would need and implement features that would benefit
them.

User Interviews 

I conducted a total of 8 interviews over the course of a week. The interviewees
consisted of doctors, medical students, and a nurse.

Our goal was to understand and empathize with medical professionals to
better understand their needs when it comes to their mental health. We also
wanted to identify pain points and patterns and implement that to our final
product to make the user flow experience seamless.
Demographic

Creating a Persona

After conducting the interviews, we created two personas: a medical student
and doctor. Albeit Doctors Under the Radar, our collaborator, was a website
mainly for doctors, medical students were also struggling. If they were able
to address their issues early on, their habits will carry on when they become
physicians themselves.

We noticed some recurring elements in these interviews:
Users felt uncomfortable discussing their mental health at work
"I don’t want to tell people at work about my mental health, it’s private and inappropriate to talk about during work."
- Anesthesiologist
Users feared there were repercussions if they talked about their mental
health at work or to someone

"Due to power dynamics and potential consequences for grades/career, I feel somewhat limited in ability to always talk about these issues."
- Medical Student, year 3
Users already had a therapist they went to for help
"My therapist is the main resource I go to for mental support. I enjoy being able to talk to her freely without judgment."
- Nurse
Users enjoyed to engage in fun activities during their free time and would browse websites like Twitter
"I like to use twitter or Tik Tok to relieve stress - watching something funny uplifts my spirits."
- Family Physician
From these interviews we created two personas:

Identifying
the Problem

From these personas, we were able to concisely identify the problem:
Medical professionals need a better way to address their mental health.
While they are burnt out, stressed, and have bottled up emotions, they find
it difficult to express themselves due to stigma and time constant. Because
of this, they are unable to properly look for ways to maintain a healthy
well-being.

HMW Statement

How might we create a safe environment and community for users so that
they feel comfortable enough to express their emotions and be able to process it.

Research Synthesis

We collected a lot of data on the users we researched and were able
to condense the information in order to prioritize the main focus areas
so that it can align with our research goals

Interview Takeaways

In order to properly synthesize our research findings across all users so
that it can aid in our decision-making when it came to what features we
must include in our final prototype.

Top Takeaways

After synthesizing the data, we deduced that these functions were imperative
and must be included in Sero.

The Solution

Sero mobile app proposes a variety of mental health well-being practices to
support medical professionals. It will provide resources to help them create a
sense of community anonymously
through maintaining emotional support
and better quality of life.

Low-Fidelity
Concepts

I first created user flows for the discussion aspect of the application and applied it
to my low-fidelity prototype afterwards.

The goal was to create an anonymous interaction but also provide areas to the
community that would protect the users like providing a trigger warning for posts
that contain sensitive material and having them agree to community guidelines
before engaging.
(Click to enlarge)

Here are some key features we included and the reasoning behind it:

Community: Here users are able to interact with one another anonymously and have access
to resources/articles that would help them better understand their struggles in mental health.
From the interviews, we noted that many users used websites like Reddit and Twitter - so I
wanted to build something that would be familiar to them so it would be like second-nature
to first-time users exploring this application.

Progress Tracker: I read some studies that stated that being able to recognize patterns and changes in behavior is essential for one's mental health (especially if they're trying to work towards it). Being able to see the graph and quickly identify events that caused a stressful date for instance will help one's mental health.
Here is a link of a study I read: Click Here

UI Refinement

After creating our low-fidelity prototype, we began our design process.

Building a
mood board

We built a mood board for inspiration before creating the complete design system.

We took inspiration from other apps/competitors and created a shared Pinterest
and shared vectors that would bring our application to life.
Something I thought was important was the color story - I wanted to have colors that
evoked calmness when users signed on. The color commonly associated with calmness,
peacefulness, etc. was blue. Upon that, I was greatly inspired by our very own organs -
the brain and the heart. This application will work to not only aid in your mental health
(brain) but help you love yourself more (heart). From that, I wanted to add in a reddish
orange color and the color pink to symbolize that.

Establishing a
Design System

Once we agreed on the overall visual feel we wanted for our application, we decided on a
design system to ensure consistency across all screens and ease the development process.

Gathering
feedback

After implementing the design system into our prototype, the next step was to conduct
usability testing to receive feedback. In order to create a seamless and efficient product,
we had 3 users complete the task of interacting with the "community" part of the app
and have them give us their thoughts.

Questions to
consider

1. How effortless was it for users to complete the task?
2. How well does our assumed user flow align with our users' approach?

Journey Map

After receiving conducting usability tests, we were pleased to see how effortless the users
were able to accomplish their tasks. In addition, users desired a back button which we
included in the final prototype.

Below is a visual of the combined experiences our users had:

Final Designs

The gifs below exhibits the features I designed and presented. Each design was driven by
research, user interviews/stories, usability testing, and the feedback we received.

Demos

Start page and Onboarding
When users open the app, users have the option to login to an existing account or signup for
a new one. Before reaching the signup page, users are able to see what features the app has
during the onboarding process.
Community
From the main page, users are able to go to the community, create a post or interact with
posts other anonymous users have already posted. There are safety precautions such as
censoring sensitive posts, community guidelines, and being able to report a user/comment
or block a user.

High-Fidelity Prototype

Reflections

This was my first time working with a partner in a UI/UX project and I really enjoyed every
moment of it. We used Notion to help ourselves keep track of everything and I found it
to be incredibly useful. Moodboarding and deciding on a visual together was invaluable as
we combined and compromised our ideas for a design.

I was also the one in-charge of interviewing and had to interview physicians according to
their schedule. Because of this, I was able to see a bit more into their world and empathize
with their lifestyle - constantly working or studying, immensely busy. From my interviews
with a variety of physicians, it fueled my passion for creating an application that will help these
busy, burnt out humans. Truly connecting with these individuals contributed greatly to the final
design of this app and I could not thank them enough for sparing some time out of their day to
talk to me. The knowledge I gained from this experience was immeasurable.

Moving forward I can't wait to dive into more team projects and be able to talk to even more
people from different backgrounds. The next steps for this particular project is to include
more features and design the mood tracker, journal, etc.
← Previous: STEM MuseNext: The Last Bookstore →