H1 Doctor Profile

Overview

My team set out to improve H1鈥檚 low customer satisfaction (CSAT) score by redesigning H1's most heavily trafficked pages in our B2B enterprise SaaS platform.聽

After 4 months, we rolled out a fresh, responsive profile layout that better showcased data, insights, and capabilities of the platform. This change resulted in a 21% increase in CSAT and played a part in retaining key clients. 馃帀

My role

Head of Design (player coach role)

The team

1 脳 Director of Product 6 脳 Engineers

Timing / Duration

2021 / 4 months

Background

What is H1?

H1 is a Series C B2B SaaS healthcare startup that easily connects pharmaceutical companies with doctors to advance scientific research (e.g. sponsor clinical trials, speak at conferences).

With over 10 million doctor profiles around the world, H1's core product serves the top Pharma companies around the world.

The User

Medical Science Liaisons (MSLs) are employed by major pharma companies to develop warm relationships with influential medical thought leaders.

MSL's use H1 to answer questions like:

  • "Which doctors should I engage with to run my clinical trial?"
  • "How do I find up-and-coming doctors who are my treatment area?"
  • "How can I find doctors who treat ethnically-diverse patients?"

The Problem

CSAT was bad...like really bad (36%).聽The page layout was cobbled together from MVP designs and subsequent feature releases bolted-on. After a UX audit, I identified the following issues:

  • Extensible design patterns were lacking, and information architecture needed rethinking to better showcase key data.
  • Design debt from rapid building in early startup days 鈥 lacking cohesion and visual consistency.
  • Mobile responsive was needed to be refined as users were starting to go 鈥榖ack to the field鈥 after Covid shutdown.

My Process

After interviewing 6 users, we discovered that users expected to:聽

  • Quickly answer the question, "What type of doctor is this?" -- view summary level facts, keywords, and KPIs聽
  • See latest and upcoming activities, so that they could plan to engage with them accordingly.
  • View trends about a doctor鈥檚 focus over time to see if they鈥檙e worth engaging with based on their recent research focus.

Conducted Audit

Analyzed layout against competitors and comparable products. Furthermore, I compared information architecture and navigation best practices. As compared to H1鈥檚 profiles, comparable product profile pages鈥

  • Use top and left navs
  • Give prominence to a single call-to-action (e.g. Follow, Tag, etc.)
  • Use sticky elements upon scroll (e.g. CTA, nav)
Audited LinkedIn, Pitchbook, Crunchbase, Avvo, Moncle and more

Design Studio

I then organized and led a design studio workshop where we performed a card sorting exercise in Miro.

Design Solution

Mocking with blockframes, I got quick signal from feedback on general layouts and information architecture.

I then moved to higher fidelity, to start see it come to life. Each module in this layout could be it's own case study, three of which I've outlined in the full case study presentation. I'll detail just one here.

Lefthand column (in focus)

The user story associated with the lefthand column was:

As a user, I want to view basic facts grouped with relevant profile actions, so that I can quickly & logically categorize doctors upon first glance.

V1 feedback take-aways were that the section...

  • 鈥淒oesn鈥檛 feel cohesive. Needs better hierarchy.鈥澛
  • 鈥淲hat is the main CTA of the page?鈥 More prominence to actions?

Iterations

  • Added hierarchy and standardized the look/feel of each element
  • Explored interaction design with collapsible sections and sticky column or subnav
Iterative cycles (Primary CTA tested well, yet collapsable sections test poorly)
Sticky header options (option 3 tested best)

Final Design

Challenges, Trade-offs

While designing, I encountered some challenges, foremost鈥

  • Data parity/completeness - designing for empty states; failing gracefully; difficulties with filters as not all data was filterable
  • Added scope - including foundational design decisions: header responsivity, body container width, data visualization, color
  • Viewport sizing - considerations for B2B users on small, company- issued laptops (e.g. ~1280x780px)

Outcome

  • 馃帀CSAT improved by 21%
  • 馃帀78% Extremely Satisfied (up from 23%) when answering 鈥淗ow would you rate your experience on this page?鈥澛
  • Set vision for x-functional design team to leverage consistent patterns including foundational Storybook design system componentry.

My Learnings

Strong opinions loosely held

  • Designing amidst changing strategic priorities focus &聽flexibility
  • The company pivoted it's longterm strategy in the middle of this project, so the vision had to pivot to match a more extensible solution for this second project

Know thyself

  • Realize when you're proposing scope creep, and work to reign it in
  • We should have broken this up into smaller pieces. Took 1 month longer than originally planned due to bloated scope