TGNC-Aware 
Telehealth Clinic
Onboarding

Many transgender or non-binary individuals are unable to access the care they desire close to home, either because a local doctor isn’t available or because the available doctors aren’t experienced in the practice. On top of the logistical complications are the emotional ones—the decision to undergo treatment or even say out loud that you’re considering it is a big step.
‍
Telehealth services provide a pathway to care for those who can't find it locally, but telehealth can feel impersonal, particularly for new patients who haven't yet had the chance to speak to connect with a human doctor. Additionally, most existing services aren't designed to accommodate patients who fall outside of the common gender binary, so even when a new startup was formed with those patients in mind, they weren't able to rely on white-labeling existing products whose lack of inclusive user experiences was the reason a new provider was necessary in the first place. 

For this provider's onboarding product, it was important to go further than the typical intake form to make users feel like they were signing up with a service that would understand their specific needs and treat them with respect.

Traffic analytics and survey data from the organization’s research efforts revealed some helpful facts. A majority of our users would be under 30 and not heavily experienced at managing their own care, so we’d need to anticipate foundational questions along the way and provide resources where possible.

Well over 80% of users were accessing the site on mobile rather than desktop, so it made sense to design for mobile first and expand that into a desktop experience after.

Additionally, there was a need to account for HIPPA regulations about what information we could collect and/or store before certain disclosures were confirmed and the formal relationship began. This led to the idea to create a persona specifically for users we’d expect to be ineligible so we could still think about how to make their experience meaningful where we could.

The first version of the wireframes was a fairly literal recreation of the original flow with in order to get a sense of how the steps would translate into individual screens, particularly given the mobile-first emphasis. This was a good place to start, but resulted in a few more steps than we'd like, plus translating the journey to actual screens revealed some places where the original flow wouldn't quite make sense in practice.

The UX writing was important to get right early on as well, as using community aligned, trans-informed language would play a big part in making the user feel at ease. The tone would be light and conversational to help convey that there were actual humans on the other side of the form, and simply starting out by asking for the user’s chosen name and pronouns sends the message the we care about the user as an individual and understand their identity.

Prioritizing the mobile experience lent itself to asking less questions per screen and reducing the need to click around too much. Collapsing some screens into pop-ups would allow for more ways to convey information and answer questions without having to divert from the critical path, and we narrowed the scope of business objectives like newsletter signups to keep the path more linear.

Finally, reviewing the flow with the clinicians also proved useful—they were also a kind of user in that they needed the product output (patient data) to do their jobs properly. Understanding what they needed to know and what questions they commonly encountered from new clients helped refine the information we provided and collected.

For the first pass at evolving from wireframes to high-fidelity mockups, I wanted to start by lightly applying brand colors and typography, and refining a couple of key elements like the progress indicator.

In order to properly respect the community, it's important to remember that this is a medical intake form first so it's not the time to incorporate an abundance of branding akin to a social media post or print campaign. Nonetheless, this version felt a bit flat, so some additional refinements were called for to elevate the experience both visually and functionally.

A number of changes occurred from the previous version to land in a much better place. Bringing in a second brand color both brought some life to the overall look, but also helped to subtly indicate actions the user could take on each screen and help guide them through the steps.

Many interactions were changed as well, making them more intuitive or more efficient for screen space. The pronoun field was changed from a dropdown to an open-ended text field, giving users more flexibility in how they identify and reducing the impression that some choices are better or more "normal" than others.

Click the top-right arrows to expand to full screen and view the completed prototype built with Figma.