1 of 52

Profile

Design

Spring/Summer 2021

​

​

Scott Christensen,

H1 Design Director

2 of 52

Contents

  1. Summary

​

​

​

​

​

Spring/Summer 2021

Case Study – Profile Redesign

3 of 52

Summary

Let’s cut to the chase…

4 of 52

What did I do? Why should you care?

Case Study – Profile Redesign

Summary

My team set out to improve H1’s low customer satisfaction (CSAT) score by redesigning H1's most heavily trafficked pages in our 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. 🎉

​

4

5 of 52

What’s the context?

Case Study – Profile Redesign

Summary

PLATFORM/OS

Responsive Web

ROLE

Design Director, ‘player-coach’

TEAM

Director of Product, 6 Devs, & Yours Truly

TIMELINE

4 months

5

6 of 52

The Product

7 of 52

What is H1?

Case Study – Profile Redesign

The Product

H1 is a global healthcare data company that connects disparate parties in the healthcare ecosystem.

7

8 of 52

What is the product?

Case Study – Profile Redesign

The Product

H1’s core product helps pharmaceutical companies more easily connect with doctors to advance the field of science

(e.g. sponsor clinical trials).

8

9 of 52

The Problem

10 of 52

What was the problem?

Case Study – Profile Redesign

The Problem

CSAT was low.

​

Page layout was cobbled together from MVP and subsequent feature releases.

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.

10

11 of 52

What was the problem?

Case Study – Profile Redesign

The Problem

CSAT was low.

​

With more research, we discovered users expected to:

Quickly answer "What type of doctor is this" by viewing 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.

11

12 of 52

The Research

13 of 52

Started with internal feedback

Case Study – Profile Redesign

The Research

Gave our team initial some direction and hypotheses to validate.

13

14 of 52

Decided on research methods

Case Study – Profile Redesign

The Research

14

15 of 52

Decided on research methods

Case Study – Profile Redesign

The Research

15

Natural use of product

Scripted use of product

Decontextualized

(not using product)

User Interviews

Intercept surveys

Observational studies (Fullstory)

Analytics

Moderated remote usability studies

Customer feedback

(Zendesk)

Concept testing (prototypes/mockup feedback)

16 of 52

User Interviews (6 total)

Case Study – Profile Redesign

The Research

16

Novartis Japan team member

17 of 52

Competitor Audit

Case Study – Profile Redesign

The Solution

As compared to H1’s profiles, competitors profile pages…

  • Emphasized more data visualization (heuristics)
  • Succinctly summarized information
  • Gave significance to recent activity

​

17

Veeva Onco

18 of 52

Competitor Audit

Case Study – Profile Redesign

The Solution

As compared to H1’s profiles, competitors profile pages…

  • Emphasized more data visualization
  • Succinctly summarized information
  • Gave significance to recent activity

​

18

Komodo

19 of 52

Competitor Audit

Case Study – Profile Redesign

The Solution

As compared to H1’s profiles, competitors profile pages…

  • Emphasized more data visualization
  • Succinctly summarized information
  • Gave significance to recent activity

​

19

Monocl

20 of 52

Comparable Product Audit

Case Study – Profile Redesign

The Solution

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)

​

​

20

Pitchbook

21 of 52

Comparable Product Audit

Case Study – Profile Redesign

The Solution

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)

​

​

​

21

Crunchbase

22 of 52

Comparable Product Audit

Case Study – Profile Redesign

The Solution

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)

​

​

​

22

Avvo

LinkedIn

23 of 52

Kickoff with x-functional stakeholders

Case Study – Profile Redesign

The Solution

Held card sorting exercise with internal stakeholders, including:

​

  • Sales team
  • Customer support team
  • Implementation team
  • Strategy team
  • Legal council

​

View Zoom recording

​

Passcode: d!97U%k9

(IA design studio starts at minute 27)

23

24 of 52

The Solution

25 of 52

Lo-fidelity Iterations

Case Study – Profile Redesign

The Solution

25

26 of 52

Lo-fidelity Iterations

Case Study – Profile Redesign

The Solution

After testing blockframe lo-fidelity iterations in exploratory user feedback calls, the team decided on this layout because…

​

​

26

27 of 52

Lo-fidelity Iterations

Case Study – Profile Redesign

The Solution

After testing blockframe lo-fidelity iterations in exploratory user feedback calls, the team decided on this layout because…

​

  • Simplified, appropriate hierarchy to bio information and CTAs
  • Prioritized more key information to be in at-a-glance
  • Afforded easily-digestible navigation UI pattern
  • Strategic/realistic alignment with future roadmap
    • Played nicely with legacy pages that wouldn’t be redesigned with this work
    • Aligned with ancillary entity pages (e.g. clinical trials page)

27

28 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

28

29 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

Initial vision

  • Have data visualization ‘modules’
  • Set of page x-module filters, and module-specific view filters
  • Exploratory/novel ways to showcase data

29

30 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

Lefthand column - In Focus

​

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

​

30

31 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

Lefthand column - Feedback

  • “Doesn’t feel cohesive. Needs better hierarchy.”
  • “What is the main CTA of the page?” More prominence to actions?

​

31

32 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

Lefthand column - Actions taken

  • Added hierarchy and standardized the look/feel of each element
  • Explored interaction design
    • Collapsible sections
    • Sticky left rail
  • Designed sticky subnav as alternative to sticky lefthand column (I opted for this solution)

32

33 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

Lefthand column - Final

33

34 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

Recent works - In Focus

34

35 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

Recent works - In Focus

As a user, I want to view a summary of scholarly works over time, so that I can find patterns and quickly answer “what kind of researcher is this?”

35

36 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

Recent works - Feedback

  • “A chronological summary view is nice to see, but isn’t as important”
  • Impact vs. effort didn’t provide the justification for viz
  • Overlaying datasets proved difficult and provided less signal than we anticipated

36

37 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

Recent works - Feedback

  • “I’d like to see upcoming, recent content.”
  • “I’d like to see content since I last visited.”
  • “I want to see content surfaced at the top level – names of publications, congresses, and clinical trials. Don’t bury it.”

37

38 of 52

Hi-Fi Iterations

Case Study – Profile Redesign

The Solution

Recent works - Final

Exhaustive states

38

39 of 52

Challenges, Feedback, Trade-offs

Case Study – Profile Redesign

The Solution

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)

39

40 of 52

Final Version

Case Study – Profile Redesign

The Solution

40

41 of 52

Final Version

Case Study – Profile Redesign

The Solution

Extensible, consistent design patterns established with clear information architecture

41

42 of 52

Final Version

Case Study – Profile Redesign

The Solution

Extensible, consistent design patterns established with clear information architecture

Design debt cleared from rapid building in early startup days – brought about cohesion and visual consistency.

​

42

43 of 52

Final Version

Case Study – Profile Redesign

The Solution

Extensible, consistent design patterns established with clear information architecture

Design debt cleared from rapid building in early startup days – brought about cohesion and visual consistency.

Mobile responsive was needed to be refined as users were starting to go ‘back to the field’ after Covid shutdown.

43

44 of 52

Final Version

Case Study – Profile Redesign

The Solution

Quickly answer "What type of doctor is this" by viewing summary level facts, keywords, and KPIs

44

45 of 52

Final Version

Case Study – Profile Redesign

The Solution

Quickly answer "What type of doctor is this" by viewing summary level facts, keywords, and KPIs

See latest and upcoming activities, so that they could plan to engage with them accordingly.

​

45

46 of 52

Final Version

Case Study – Profile Redesign

The Solution

Quickly answer "What type of doctor is this" by viewing 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.

​

46

47 of 52

Final Version

Case Study – Profile Redesign

The Solution

Sticky nav for contextual navigation

47

48 of 52

Impact

49 of 52

What was the impact?

Case Study – Profile Redesign

The Product

  • Subsequent quarterly CSAT up 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.

49

50 of 52

What did I learn?

Case Study – Profile Redesign

The Product

  • Have strong opinions loosely held
    • Designing amidst changing strategic priorities requires rigorous focus yet complete flexibility.
    • The company pivoted it's longterm strategy in the middle of this project, investing to build ancillary add-on product that would inherit this and many other designs -- The vision had to pivot to match a more extensible solution for this second project
  • Know thyself
    • Help PM’s to limit scope when they struggle to do it themselves
    • We should have chunked this out into smaller pieces -- took 2 months longer than originally planned because of the massive scope
  • Share early and often
    • Aligned with stakeholders by sharing often in broad/public slack channels to get expansive feedback across the internal team

50

51 of 52

Demo

HCP Profile Redesign

Prod

Doctor profile (full)

Doctor profile (failing gracefully)

Institution profile

​

51

52 of 52

Thank you!

View more work samples at ScottChristensen.design