CONSUMER-FACING WEB REDESIGN
Carina Messaging System
Context
Carina is a care-matching service that has connected caregivers to care seekers to deliver over 1 million hours of home care since 2017. In late 2021 through mid 2022, Carina underwent a full stack migration from Carinacare.com to Carina.org. During this time, I led the project on redesigning the messaging system used between caregivers and care seekers.
Team: 2 product designers, 3 engineers, 1 product manager
Contributions: User research, competitive analysis, design mockups, prototyping, developer hand-off
Duration: 2 months
Solution & Results
In a 2 month effort, our team rebuilt the messaging system from scratch utilizing the updated brand guidelines. We additionally resolved multiple usability issues relating to unresponsiveness which was a significant issue on the platform.
Although we were unable to test for success metrics for this project, we would ideally want to check the reduction of unresponsiveness user complaints and overall number of unread messages since launch of the new system to understand its impacts.
1/4
Research Process
We conducted usability tests to understand issues with the existing design. Competitive analysis helped familiarize ourselves with current trends and patterns with messaging design.
USABILITY TESTING
What were the problems with the current experience?
First, we needed to understand where the current messaging system failed in terms of usability. Our team conducted usability tests remotely through Zoom with over 20 active users on Carina to understand where there was confusion in responding to messages on Carinacare.com. Below were our main findings.
Notification Overload 📮
Users expressed frustration from getting too many email notifications about messages. This made users turn off notifications, resulting in unresponsiveness.
Inaccurate Representation ❌
Users thought new messages would appear automatically without needing to refresh the page - just like how instant messaging works. However, our system is more similar to an email inbox.
No Search Functionality 🔎
Attend to and take account of user complaints and track changes to report cases.
2/4
Ideation & Design
After conducting research we brainstormed potential solutions that could help resolve the issues that users on the existing messaging system.
Narrowing down potential solutions
After conducting user research and understanding where our previous design failed, we brainstormed several key features that we wanted to build to improve the messaging experience on Carina.
These key features were determined by our findings from competitive analysis and direct feedback from our users.
Search conversation by keyword
Give visuals cues so the messaging system looks less like IM and more like email
Encourage users to reply thoughtfully
Clearly display metadata of provider’s profile or care recipient’s job post
Show side panel with list of conversations
Design iterations
After multiple iterations, our team landed on a design that covered the key areas of user pain points we discovered from our research phase. Below is a diagram indicating the changes.
3/4
The Pivot
Just when we were ready to launch the new update on the messaging system, we unfortunately discovered that the new design was not ideal for resolution sizes lower than 1920×1080.
Although we were using industry standards for the updated design, we realized that this design was not ideal for our users.
Because our design system used enlarged font sizes and components by default, our designs appeared much too large for users who were viewing the messaging system at resolution size of 920×1080. This made our designs appear too cramped and difficult to navigate.
4/4
The Pivot
Based on what we learned from the pivot, we scrapped what we had and came up with an efficient design solution.
We simplified the design to increase visual breathing room and readability.
Because we were on a time crunch, we were unable to change the design system on a short notice. Therefore, we re-designed the messaging system to be more simple and concentrated on one main action at a time. To do this, we split up the messaging system into two pages: inbox and message thread.
In the inbox, the user must select a conversation to read, which will take the user to read and respond to a message. Below are the changes we made in the 2nd iteration which ultimately was approved by product management as the final design.
The Features
We still wanted to incorporate most of the key features from the 1st iteration, although there were a couple we needed to omit due to the constraints of our users using a scaled resolution screen. We wanted users to be able to easily find conversations in the inbox, make information on the page easily digestible, and change the design so users are encouraged to send one message rather than multiple at a time.
Reflection
From this project, I’ve learned that following industry standards in design is generally a good practice. However, it’s equally as important to consider the use case of the product in the perspective of the target audience. Because our users are generally those who use a scaled resolution, this negatively affected the way our product appeared for our users.