First Derm V3.png

First Derm

First Derm Cover.png
 

Enhancing user experience for an AI dermatology product

 

COMPANY: First Derm                              ROLE: Product Designer, Interaction Designer                              TOOLS: Flinto, Sketch, Marvel

 
 

Company

First Derm is an online dermatology service and the creator of the Skin Image Search, an AI product that evaluates skin conditions. Customers upload photos of their skin issues and within seconds the AI identifies their medical condition.

 
 
 

TL;DR

The ‘Skin Image Search’ was technically working, but it was very much an MVP.  The client wanted a quick refresh of their flow to further validate their product, specifically hoping to:

  1.  Encourage users to upload two photos upon visiting the site to use as data to train the AI

  2.  Modernize the site with animation and interaction design

Within our team addressing these goals, my focus was to redesign the landing page, simplify the user experience of uploading photos, and add some subtle animations to enhance the process.

 
 
 

IF THIS LOOKS INTERESTING, ASK ME ABOUT:

Building trust among users for an AI medical product

  • Building trust among users for an AI medical product

  • Using Flinto for animation

  • Figuring out how to increase photo uploads

  • Running usability tests

 
 
A before and after look at the First Derm Skin Image Search landing page with custom illustrations

A before and after look at the First Derm Skin Image Search landing page with custom illustrations

 

 
 

USER Research 

We kicked things off by running user interviews and usability tests with 10 people. 

One of the most striking findings from these tests was that users didn’t trust the site at first glance and thought it looked like a scam.

 
 
Results from the usability test

Results from the usability test

 
 

 
 
There weren’t any images when I opened the site so it felt a bit wordy
— User Interviewee 2
 
 

 
 

USer FLow 

Mapping out the original flow for Skin Image Search revealed the complexity users faced uploading photos (12 actions!).

Hoping to increase user conversion through the funnel, I mapped out a new flow that had 50% fewer actions, using this as a starting point to ideate UI solutions.

 
 
 
Original task flow compared with a new task flow

Original task flow compared with a new task flow

 
 
Sketches and a storyboard to present to showcase how the new user flow could work

Sketches and a storyboard to present to showcase how the new user flow could work

 

 
 
 

user tested landing pages

In addition to the updated photo capture flow, I rapidly iterated several landing pages to tackle users concerns about trust and further improve conversion.

 
 
LP_Iterations_V16.png
 

 
 

ANIMATION

As the final touch, it was time to tackle the client-requested challenge of adding animation to the product. Animation is often showy and eye catching (or eye distracting), but it was my goal to keep it practical so that it brought clarity to the user's experience. I focussed on prototyping options for the loading screen while the AI retrieved match results.

 
 
CircleLoad_Animation.gif
LogoLoad_Animation.gif
VideoAd_Animation.gif