Overview
An early pioneer in teledermatology, First Derm’s latest innovation is an image-trained A.I. that can identify skin issues quicker than a human diagnosis.
After launching their initial Skin Image Search site, they sought to update the web app to improve the user experience.
Key Product Features
Improving Credibility & Usability
Finding that many potential users mistrusted the original site, the redesign prioritized highlighting its value while establishing credibility through a more professional aesthetic & improved usability.
Landing Page
Quickly Answering the ‘Can This Help Me?’
Photo Uploading Page
Better Instructions = More Accurate Results
A.I. Searching Page
‘Watching It Work’ rather than ‘Waiting’
Search Results Page
Results Users Can Quickly Understand
Skin Condition Details Page
Anticipating Questions & Having the Answers Ready
Paid Service Lead-in Page
Helping Users Find a Solution
Design Validation
Is It a Better User Experience?
Research
What’s Working & What Could Be Improved?
What does the data say? Unfortunately the client’s Google Analytics configuration severely limited the data available.
How do users perceive the current site? User interviews highlighted specific areas to focus our attention.
How can we build a better experience? A Competitive Analysis explored ways use aesthetics to garner user confidence and efficient ways to present dense health information.
The User Group
First Derm’s previous teledermatology experience and the site’s limited initial data revealed common user traits such as:
Tendency to self-diagnose health issues
Willingness to use online healthcare services
Values privacy and confidentiality
Average age range of 25-35yo
User Interviews
To understand users’ experiences, a screener identified potential users who were then observed using the tool to address skin issue concerns.
Key Interview Insights & User Concerns
Hard to Trust
Skeptical of the Landing Page
“Doesn’t look like a credible site”
Informal, condescending tone
Difficult to Use
“How does this work?”
Photo requirements are unclear
A lot of text
Confusing Results
Ambiguity in the results
“What do these numbers mean?“
Poor organization
Competitive Analysis
We reviewed leading healthcare sites for design inspiration and best practices for creating a professional aesthetic, addressing health concerns and gaining users’ trust.
Below are a sample of sites we referenced:
General Healthcare Guidance
Dermatology-Specific Guidance
Design
An Easy Tool with Obvious Value
Through various design exercises we explored ways to build trust and clarity throughout the process. We focused on three key areas to better serve users looking for reassurance, guidance & help:
Key Components
A More Credible Feel
UI more similar to modern tools & healthcare sites
Increased transparency in Results Page
More professional tone in copy
Guiding Users with Simplified Instructions
More specific instructions
Less text, more illustrations
Clarified & Better Organized Information
Content grouped by topic
Medical terms explained with common terms
Info presented in order of user interest
Design Focus
Improving the Landing Page
As the most important page of the site, it was imperative the landing page create a welcoming, professional appearance and quickly shows its value to users.
After formulating solutions for the three major issues, additional user testing was used to guide revisions and validate the final design:
Landing Page Issues & Solutions
Landing Page Revisions
Photo Page Revisions
Design Focus
Looking Good on Any Device
While users primarily viewed the web app via their phones, our responsive approach insured the experience was consistent across all devices.
Final Thoughts
Data-Backed Designs Convince Clients
Early in the process the client had strong ideas of what users wanted. Therefore, it was important that user testing guide our process as well as provide evidence to the client supporting the design direction.
To this end, our process included four rounds of user testing to identify the initial issues issues, refine our solutions & validate the final product.
Want to learn more about my process or discuss this case study? I’d love to chat! ZachDierberg@gmail.com