INTRODUCTION

This project was completed as part of a three-week design sprint in partnership with CirrusMD. CirrusMD is a Denver-based telemedicine platform through which users can chat with doctors and medical professionals from their phone or computer. CirrusMD is in developing functionality allowing parents to chat on behalf of their child-dependents. This case study outlines the process we took to design a user flow and UI that introduces the new feature.

MY ROLE

My partner, Mike Redkey, and I worked in close collaboration throughout the project. I led rapid design and strategy sessions, through which we developed our user flow, on boarding concept, and survey. I also designed our interview guide and initial mockups and co-led user research and usability testing.

UX TOOLS

Take a look at my clickable prototype.

Usability Testing

Prior to our joining the project, CirrusMD designed a user flow to allow clients to switch to a child's profile. They provided us with their hi-fidelity assets (pictured below), which had not yet been tested. To get a baseline understanding of what was working well and what was not, we created a clickable prototype in InVision with these assets and conducted in-person usability testing.

Hi-fidelity mockups provided to us by CirrusMD at the outset of the project

What we learned

Users go directly to channels of care (e.g. pediatrics, neurology); they do not switch profiles, even their question is about another family member
Upon discovering how to switch profiles, users were surprised
The display names shown when a user was chatting on behalf of another family member did not clearly indicate who was speaking on behalf of whom
Users perceived the green circles, meant to indicate availability, as decorative

Phase I

Sketching | Rapid Prototyping | A/B Testing

The usability tests confirmed that the current flow to switch profiles did not make intuitive sense to the user, so we began our redesign there. We sketched and whiteboarded different way to display and toggle between profiles.

And we played around with how they would look in-app (you'll also notice we changed the status indicator to a more familiar green dot). To determine which version provides the most affordance to the user, we A/B tested them using rapid prototypes I created in InVision.

Version 1 - Stacked: We thought the stacked profile may lend more affordance, suggesting that there are multiple profiles that can be accessed by clicking on them.

Version 2 - Dropdown: Again, we utilized the stacked profile picture but maintained the dropdown menu included in the initial designs; the dropdown menu is appealing because text size can be larger and more accessible, and the users full name can be listed.

Version 3 - Unstacked: In this version, all profiles are always shown; if there are more than 5 profiles in a household, arrows would appear and the user could scroll to access any off-canvas profiles. — **Version 3 - Unstacked:** In this version, all profiles are always shown; if there are more than 5 profiles in a household, arrows would appear and the user could scroll to access any off-canvas profiles.

What we learned

The stacked profiles in versions 1 and 2 did not stand out; users overlooked them
When prompted to switch profiles, users found version 3 most intuitive
Version 3 was the fastest way to switch profiles
When prompted to contact a doctor on behalf of their son, rather than just to switch profiles, users continued to navigate immediately to urgent care; they did not switch profiles

Phase II

Pattern Research | Sketching | Rapid Prototyping | Usability Testing

We now understood that an intuitive display enough was not alone; we needed to proactively alert users to the added feature, so we researched different on-boarding patterns.

some considerations

Users most often use this service in times of emergency, so any on-boarding screen(s) we create cannot be too time-consuming or block the user from accessing care immediately
Users may expect on-boarding screens when they first sign up for an app, but were are mostly working with returning users. What are unobtrusive ways to on-board users to new features?

We opted to use coach marks to onboard the user, as they provide a lightweight, on-screen mechanism to orient the user to the new feature, which we designed to match the brand's aesthetic. Again, we researched, sketched, and created a rapid prototype, allowing us to get quick feedback.

what we learned

Some users read only the coach mark about the consultation history, not the coach mark about profile switching
Users that read the coach mark about the profiles thought they would be immediately sent to the child's profile after tapping it from the help overlay

Phase III

Rapid Prototyping | Usability Research

Still not quite hitting the mark, we went back to the drawing board one final time. This time, we asked ourselves "what if we don't leave discovering the new feature up to chance? What if we design a flow that required users to actively select the person about whom they wanted to chat?"

Again, we created rapid prototypes of what this could look like and set out to test the approach. Upon logging in for the first time after launch, all users would be prompted to select a profile, which was followed by an explanation that introduces the feature. On subsequent logins, users are able to turn off the modal and use the avatars at the top of the screen to access other profiles.

success!

This version tested with 100% accuracy
Although it increased the number of screens, they were so straightforward that the flow actually decreased time on task
It is still unclear if the second modal is necessary
Users appreciated the ability to turn off the active selection feature after they learned how to use the new feature

Accuracy here is important not only to create an enjoyable experience for the patient but also to ensure physicians have a way to chart encounters. When patients begin an encounter in their profile, and the issue pertains to another person, the physician cannot chart it. This has been a pain point for providers.

First login after launch

Returning user

ADA Compliance

Another primary concern of ours throughout the design process was accessibility and compliance. We researched ADA compliance requirements, HIG accessibility best practices, and used Stark, a color-blind simulator and contrast checker, to ensure our designs were accessible to all.

Some tweaks

We changed the text bubbles from light blue to dark blue and removed the gradient in the header to increase the contrast ratio

We added icons to visually differentiate the channels of care, making them more recognizable, memorable, and friendly to non-English speakers.

We mocked up what the chat bubbles would look like at different text sizes, using iOS HIG guidelines, to ensure that the layout would still be readable.

Next Steps

Extending this project beyond a three-week sprint, I'd dive deeper into the following:

Perform usability tests on the survey to better understand how this experience meets user needs and where it falls short
Build out encounter analytics to think about how we can analyze the data we collect to improve user experience
Enhance search history
Ideate on well visit functionality and encouraging users to use the product not only in emergency situations but also to be proactive about their health

Take a look at my clickable prototype.