Ears for Peers Chat Platform Case Study
Reinventing an anonymous hotline's chat platform
4 month Masters Capstone group project
UI/ UX Design | Mobile UI | Mental Health
Our goal was to create a new chat platform for an anonymous overnight hotline, designing it to support both students using the service and the hotline operators, and ensuring compatibility with the needs of the organization.
MY TEAM
Kelly Chin
Olivia Galarza
OnKee Min
TOOLS
Figma, Canva
Whimsical, Miro
Qualtrics, Google Sheets
INTRODUCTION
A hotline's chat platform can do so much more than just connect two people.
A unique resource for the Tufts community, Ears for Peers (E4P) is an overnight peer support hotline that receives over 400 calls and texts from students in emotional crisis every semester. Given my team's shared passion for mental health, I pitched E4P as a client.
My team at Week 2 :)
E4P's current platform does the basics.
Created in a year by a JumboCode student team, the platform needs serious upgrading, from minor accessibility tweaks to new features that support the organization's needs and logistics.
OUR SOLUTION
1) a new mobile app for Ears on shift, and 2) a website redesign for Peers
In a hurry? Not a fan of reading? Check out my 3 minute overview of this project!
OUR CLIENT
A unique student-run mental health resource at Tufts, Ears for Peers is an anonymous overnight peer support hotline, operated by ~40 "Ears", who are trained to listen empathetically and provide support and resources to students in emotional crisis.
E4P handles calls and texts about various topics with a range of severity, from minor frustrations to serious crisis situations.
​
In the recent past, Ears have received ~400 calls and texts per semester, and their current chat platform desperately needs better functionalities.
​
Read more about my experience as an Ear here!
EMPATHIZE
Understanding the needs of our target users: Ears and "Peers"
Our entire user base was anonymous.
-
​Current Ears are required to stay anonymous.
-
Texters don't share their identity with E4P and reach out with very personal stories.
-
Ultimately, the societal stigma surrounding mental health is a huge barrier to users of the service sharing their experiences openly.
Our Strategy:
​
-
For 2 years, I was one of the Faces of Ears for Peers, representing the organization non-anonymously. I was able to leverage this position, my access to internal information, and my Ears alumni network to successfully conduct user research without compromising Ears' commitment to anonymity.
-
We found creative workarounds to overcome our constraints for user research.
Getting on the same page
I showed my project team how Ears use their current chat platform (which I'll refer to as the "Heroku platform") and organized a "mock chat" to familiarize them with the platform experience of both end users.
​
We also performed a stakeholder analysis and did a lot of reading about college student experiences with mental health struggles and support.
User Research Methods
Refining our user research protocols
After brainstorming questions together, we did mock "interviews" with each other to refine our phrasing and weed out unnecessary questions.
I like using this technique to keep things professional and meaningful.
Method #1: Focus Group
​
-
I reached out to 7 Ears Alumni from 2016-2022 as they are no longer required to be anonymous and have tons of insight into the organization's past.
-
I led the virtual focus group; my team took notes and asked follow up questions.
-
We learned about the Ears' experiences, pain points, and pros and cons of previous chat platforms E4P has used.
Method #2: Anonymous Survey
​
-
We distributed an anonymous survey to the Tufts community to understand why they did or did not use Ears for Peers, what made them come back, etc.
-
We received 55 responses, which my team mates analyzed.
Method #3: Questionnaire Section in Ears' Call Log Survey
​
-
After every chat, Ears fill out a Qualtrics survey to log the chat's duration, summary, etc. I added a new section to the survey to understand current Ears' real time experiences.
-
I pulled data from 52 responses across a few weeks, removing confidential content so as to share the results with my team (since they weren't Ears).
-
We identified Ears' device preferences, resources accessed, and factors contributing to response time and preparedness.
Analysis
We gathered our research findings and analyzed them to identify themes using Affinity Mapping on Whimsical as a team, ensuring that we were all caught up on each other's findings.
Key Findings:
​
-
The Ears' Room and shift logistics significantly impact Ears' interactions with the chat platform and their responsibilities.
-
Ears take longer to accept a chat request when they use the Ears Desktop and are asleep in the top bunk.
-
The platform doesn't support the overnight nature of shifts and the Ears' need for sleep.
-
The platform is not clear and informative to students accessing it.
-
Alternative resources are difficult to access for Ears and Peers.
Ears Shift Logistics
Ears take shifts in pairs from the Ears Room, with each night split into 2 shifts.
.png)
Let's say a chat request comes in at 3 AM. The Ear would have to wake up and climb down the top bunk to accept the chat at the desktop. After the chat ends, the Ear is expected to fill out a Qualtrics Call Log survey to summarize the chat.
Personal Reflection: Despite having been an Ear for 5 years, I discovered a lot of new insights into Ears' shift experiences that I wouldn't have thought to consider. I'm glad we conducted extensive user research instead of relying heavily on my knowledge of how the organization works! Plus, it was super nice to reconnect with Ears Alumni and reminisce :)
DEFINE
A hotline's chat platform can do so much more than just connect two people.
Project Scope
​
-
Design a mobile app for Ears on shift
-
Redesign the Peer end UI of the current E4P website
Goals and Objectives
​
-
Design a clean, calming UI that matches E4P's branding and mission
-
Support Ears on shift
-
Increase flexibility and ease of access to important information
-
Cater to organizational logistics
IDEATE
Brainstorming
​
-
Translating user needs into design requirements
-
Discussing design concepts and features to address needs of Ears and Peers
-
Reviewing ideas and suggestions from Ears Alumni
-
Conducting a task analysis for both groups of end users
-
Accounting for both interactions with software and users' physical environments
Information Architecture
_edited.jpg)
Laying out the Information Architecture of our proposed Ear and Peer experiences on Whimsical helped us visualize how different features would come together and identify key interactions that we could redesign or reinvent.
​
We then chose the essential concepts and interactions to demonstrate in our final deliverable, saving a lot of time!
It's 3 AM. You're asleep, in the top bunk.
A student who needs you reaches out, and you wake up, jump out of bed and rush to the Desktop... and it still takes you about 30 seconds to pick up. The student gets anxious waiting and hangs up before you can help.
Climbing down a bunk bed in a hurry in the middle of the night to get to the desktop is frustrating at best and incredibly unsafe at worst for the Ear. And it takes forever to do.
A new mobile app for the Ears' UX would take away the need to get out of bed.
Imagine having to download a new app in the middle of a panic attack!
We intentionally decided to just redesign the current Heroku website for the Peer UX.
Shifting to an app would create an additional barrier to access for students in distress, whereas the website can be accessed on a browser on any device.
DESIGN
We split up into pairs for our initial wireframing of the two deliverables.
I got to teach Olivia how to use Figma as we worked on the Peers redesign!
Graphics Layer
I created a Moodboard for our graphics layer, inspired by the calming blues of E4P's social media content and other iconography.
High Fidelity Wireframes and Clickable Prototypes
NOTE: My entire team collaborated at every stage of the design process until the end of our Capstone project.
After the semester ended, I took the initiative to refine our designs on Figma, redo our clickable prototypes, and prepare detailed documentation to ensure a seamless transition to my collaboration with JumboCode to implement the designs for E4P. The mockups and prototypes below represent my final versions of the design.
Landing Page During and Outside Hours
Goals:
-
Include important information about E4P: hours, social media, purpose
-
Improve accessibility by using high contrast colors to increase readability of text
-
Provide easy access to alternative resources when line is closed
-
Design UI that visually helps calm a texter in distress
Loading Page
Goals:
-
Reduce frequency of "hang-ups"
-
Include integrated Call button as an alternative to text
-
Provide Tufts Counselor-on-Call number for emergency crisis situations
A "hang up" is when a caller or texter hangs up or closes the chat tab within seconds, before an Ear can get to them.
​
From our research, we found that students felt anxious while waiting and changed their mind, thereby not receiving support.
​
To address this issue, we replaced the stressful loading icon with a calming breathing bubble, enabling the platform UI to support the student before the Ear can.
Chat Interface
Goals:
-
Provide clear way to end the chat (right now, texter must close the tab to do so)
-
Allow texter to continue the chat even if they navigate back to home page
-
Ensure easy access to Call option within the chat interface
-
Create cleaner chat interface that matches E4P's branding
Clickable Prototype: Peer Experience
Heroku Website
Our Redesign
Ear Experience: Mobile App
We'll go over some clever features and how they meet Ears' needs.
Design Objectives:
​
-
Prioritize Ears' safety (both physical and emotional)
-
Support shift logistics and E4P operations
-
Increase flexibility in meeting responsibilities
-
Provide easy access to resources to support Peers
App Navigation Structure
Chats
The Chats page is further divided into 4 Chat Categories described below. Ears manage incoming and ongoing chats here, with each chat being given a unique ID and icon similar to their current platform.
Resources
Ears need easy access to resources to recommend to texters. An in-app page with Resource categories and Copy buttons is more convenient than perusing Info posters on the walls of the Ears Room.
Account
Here, Ears can change their Notification Settings and app preferences (Dark/ Light Mode). Ears with Board positions would have additional permissions and privileges tailored to their roles (e.g.: sending announcements).
Chat Categories
Mine
Pending
Ear's ongoing chats
New incoming chat requests
View-only
Shift partner's ongoing chats
Closed
Chats that have ended
Why separate Ongoing and Pending chats?
-
Provide a clear distinction between:
-
ongoing chats with new messages to respond to, and
-
new chat requests that need to be accepted
-
-
Draw attention to Pending chats so the Ear accepts them quickly and doesn't leave the new texter waiting, thereby preventing hangups.
Pending Alert
Pending Tab
Both Ears on shift get the "Pending" request alert on their phones.
Once accepted, the chat moves to the Mine tab on the device of the Ear who accepts it.
Why give an Ear (view-only) access to
their shift partner's ongoing chats?
-
Ears often help each other with chats.
-
Currently, a chat can only be accessed on the device on which it was accepted. The Ear taking the chat would have to scroll up and explain necessary context to the other Ear to seek their help, requiring them to briefly stop responding to the texter.
-
Having view-only access to their shift partner's chats allows the Ear to gain valuable context to help, without distracting the Ear taking the chat.
.png)
View-only
Why have a separate tab for closed chats?
-
The Heroku platform erases chat history at the end of the shift, forcing tired Ears to summarize and log chats right away even if they end at 4 AM. Ears need sleep and might provide rushed, incomplete responses or skip the Call Log survey altogether.
​
-
On the other hand, the Closed Chats tab:
-
gives Ear access to chat history for 24 hours, allowing them the flexibility to complete the Call Log at a convenient time.
-
alerts Ear to complete Call Log survey for each chat, directs them to the external Qualtrics link, and tracks whether the chat has been logged.
-
allows Ear to focus on ongoing chats during their shift.
-
Logging Chats
Once the Ear fills out the Call Log survey for a chat, it is marked Complete on this tab.
​
Ears can only delete a chat once it has been logged.
Deleting Chats
Lastly, Ears can also transfer their chats to other Ears.
-
If the Ear's shift ends, they can transfer an ongoing chat to an Ear on the next shift. Currently, Ears have to stay past the end of their shift or ask the texter to reconnect, and the next Ear loses all chat history.
-
Ears' mental wellness is also important! If the chat topic is triggering for the Ear, they can transfer the chat to another Ear who can handle the conversation.
Transfer Sequence
Clickable Prototype: Ears Mobile App
EVALUATE
Usability Testing and Validation
​
-
How successful were we in meeting our goals through our design solution?
-
We tested both of our deliverables
-
Tasks chosen tested key interactions
-
Follow up questions regarding emotional responses and intuitiveness
A/B Testing to Evaluate Peer Redesign
We recruited 6 participants.​
-
3 tested Heroku; 3 tested our redesign
Testing Overview:
-
Assigned participants a series of tasks to complete with the designs
-
Encouraged them to think aloud
-
Asked follow up questions regarding satisfaction, ease of use, and emotional response to designs
-
Compared results for both designs
Mitigating bias: Participants are likely to evaluate a prototype differently than a fully functional and polished live website, due to the latter's perceived realism & functionality.
To reduce this bias and avoid interfering with E4P's operations, I created a simulated experience of the Heroku website on Figma using screenshots.
Feedback Highlights
-
Redesign was more visually appealing
-
Enjoyed breathing bubble
-
Felt more likely to call E4P due to the integrated call button
-
Resource page was helpful but needed clearer categories and layout
Testing Ears App with Expert Users
We recruited 2 past Ears.
-
Expert users of the Heroku website and can compare the two designs in meaningful ways
-
No longer anonymous
Testing Overview:
-
Assigned tasks corresponding to new features (transferring chats, accepting pending requests, finding resources, deleting chats, etc.) with cognitive walkthrough
-
Asked about ease of use, satisfaction, emotional response
Demo with current Ears
-
I demonstrated our designs at an Ears Board meeting and the feedback and response was overwhelmingly positive!
Overall, Ears were very excited about this app and said the new features were clever & thoughtfully designed.
Feedback Highlights
-
"I used to feel alone when taking a text, but I feel SO supported by this app"
-
"I wish I'd had this when I was an Ear"
-
"The mobile app would make overnight shifts much easier"
-
"I can't wait to see this built out!"
NEXT STEPS
Collaborating with JumboCode!
​​
-
Typically reluctant to take on a previous client again, JumboCode saw that our platform design is a distinct project from their first E4P project.
-
In the next year, a team of Tufts students will implement our designs for E4P!
-
My involvement with Ears, understanding of this design project, and basic knowledge of coding means that I can bridge the communication gap between all parties involved in this collaboration.
Coding our vision into reality
What makes our project unique and valuable:
​
-
Because of my involvement in this Capstone Project, we had the unique advantage of having a deep understanding of E4P despite its anonymous nature and access to Ears data and alumni, something JumboCode could not have when they developed the current Heroku website back in 2018.
-
We leveraged our Human Factors background to ensure that our design was backed by extensive user research, design principles, and usability testing.
REFLECTIONS AND TAKEAWAYS
I truly understood why you can't rely on your own experiences and opinions to meaningfully identify user needs. You gotta put in the work to empathize!
​
I got so much better at Figma and using Components to create prototypes more efficiently.
​
OnKee was an incredible project manager, and I learned a lot of skills from her that I got to implement in other projects.
​
I love conducting focus groups and interacting with target users!
​
I felt clever for thinking of workarounds and ways to reduce bias in A/B Testing.
​
When I care deeply about a project and its purpose, I put extra thought and effort into my work.
​