My team set out to improve H1’s 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. 🎉
Head of Design (player coach role)
1 × Director of Product 6 × Engineers
2021 / 4 months
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.
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?"
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 ‘back to the field’ after Covid shutdown.
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’s focus over time to see if they’re worth engaging with based on their recent research focus.
Analyzed layout against competitors and comparable products. Furthermore, I compared information architecture and navigation best practices. As compared to H1’s 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)
I then organized and led a design studio workshop where we performed a card sorting exercise in Miro.
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...
- “Doesn’t feel cohesive. Needs better hierarchy.”
- “What is the main CTA of the page?” More prominence to actions?
- Added hierarchy and standardized the look/feel of each element
- Explored interaction design with collapsible sections and sticky column or subnav
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)
- 🎉CSAT improved by 21%
- 🎉78% Extremely Satisfied (up from 23%) when answering “How 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.
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
- 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