01) CONTEXT
Over the summer, I worked at Pear Care, a startup working to increase transparency in healthcare by scoring medical practitioners on a standardized scale. My goal was to redesign the doctor profile page, as well as design the company site.
02) THE BRIEF
Potential customers want clarity and agency in the specialist selection process, not just recommendation.
How might we move beyond simple referrals and present the tangled information driving our engine in a way that's clear, cohesive, and easy for anyone to understand?
02) THE BRIEF
Potential customers want clarity and agency in the specialist selection process, not just recommendation.
How might we move beyond simple referrals and present the tangled information driving our engine in a way that's clear, cohesive, and easy for anyone to understand?
03) THE SOLUTION
The new doctor profile screen organizes information into four main categories, each one starting with a summary and expanding into more detail on demand. Profiles are cleanly structured for ease of use and comparison.
The doctor profile
Here's what you land on when you click on a profile.
Summary cards
Each
A detailed breakdown
It's easier to know what to eat when the options are right at hand.
04) PROCESS
Group Up!
Initially presented with 27 categories defined for the ML model, my first mission was reorganization for the human user.
I created a hierarchy such that users who want to stay on a level of detail can choose to do so. This both prevents information overload and encourages comparison between doctors, which users can swipe between on any given page.
I merged opposing categories such as "proficiency" and "ineptitude", and eventually settled on three main groups:
There were some more complex categories that didn't fit into any of these larger boxes, which affect overall score but aren't visible.
A Balancing Act
Level of complexity was the main challenge when figuring out how to display information. Although each piece of data was essential to the overall ratings, I had to ask myself:
If I were looking for a doctor, would I care about this?"
In most cases, no. Making the user care was almost always less important than presenting the information they already cared about.
In this case, people care more about whether their doctor does better or worse than the average, not how long it takes to get there. Although there's less information on the right, it's more readable, and the information provided is more important.
The Objectivity of Relativity
Another key issue I ran into was how to display measurements. Numbers don't tell the whole story. A surgeon who takes on complex and high-risk conditions could face a low success rate even if they are highly skilled.
However, relativity hides real values. A surgeon in the bottom 15% might have a 2% success rate difference from the top 15%, for example, which could be acceptable to the user but highly penalized by the engine.
Even when considering relative information, a numerical score ends up being more confusing than a simple description such as "high" or "low".
My solution was to use obviously relative terms such as "low" and "high" for subcategories, and use letter grades for overall scores. Each detail then has the original metric to justify decisions.
Visualizing
The team at Pear Care wanted a more unconventional, youthful approach to visualization. In order to avoid the clinical, data-heavy feeling of a typical health app, we avoided graphs and charts in favor of distinct, graphic based visuals.
I used a snap scroll to center the content and increase white space, focusing viewer attention. This also let me play with how to lay out information across the whole canvas.
Snap scroll allows me to create screens such as this, where I can center my graphics without worrying that the user might miss any following graphics.
The bottom bar
We prioritized the page’s primary actions based on why users arrive: to look up a known doctor, find one through filters, or to compare options. Because any of these goals can come up at any point in the selection process, the related actions need to be available at all times.
Animations
Page animations were created with the help of Figma's new animate feature, while data-driven and interactive elements were made on Rive.
To make the app more friendly and approachable, and to avoid the clinical vibe of talking to an AI, I animated the mascot: Pear-amedic.
05/ REFLECTION
Building this project was the closest I've gotten to a true 0-to-1 experience, and it changed the way I see the role of UI/UX design. Starting from scratch meant translating company goals and values to UI/UX guidelines, which gave me the opportunity to not just design pages, but make decisions that shape the entire product. Although working as the sole designer meant I had no one to shadow, I had the freedom to suggest more "out there" ideas and see them through instead of working within pre-established systems.
IMPACT
Presentation day
At the end of the first semester, we presented our progress to the student body and to the other teams. We received a lot of "Why didn't I think of that!" and many ScottyLabs members offered to join the team. I'm glad visitors didn't think it was too similar to what already exists on the market, and saw value in the idea.
@Timothy Yang
ttimothyy24@gmail.com
YOU INTERESTED?