FirstDermCoverPhotoMinimalist.png

First Derm — Image Search AI

FirstDermCoverPhotoMinimalist2.png
 

First Derm: AI Skin Image Search

 

CLIENT: 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.

 
 
 

CHALLENGE & SOLUTION

The Skin Image Search was technically working, but it was very much an MVP.  The client wanted the re-designed flow 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

In order to address these goals, I re-designed the landing page, simplified the user experience of uploading photos, and added in subtle animations to enhance the process. 

 
 
Challenges&Solutions_Catamaran.png
 
 

 
 

TL;DR

A before and after look at the landing page that I re-designed for the Skin Image Search. More below about the process.   

 
 A before and after look at the First Derm Skin Image Search landing page with custom logos that I designed to go with its updated look.

A before and after look at the First Derm Skin Image Search landing page with custom logos that I designed to go with its updated look.

 

 
 

USER Research 

We kicked things off by running user interviews and usability tests with 10 people.  We made sure to select participants that fit the demographic of First Derm’s current majority user.  Although First Derm’s Skin Image Search appeared to be fairly simple at first, users pointed out several pain points for us to focus on improving. 

Most businesses face the challenge of persuading users that they are reputable and trustworthy, but this is particularly poignant for companies that offer medical services.  With half of our test users voicing that they didn’t trust the site at first glance, instead thinking it looked like a scam, we had found a major pain point right out of the gate. 

 
 
 Results from our usability test on the original Skin Image Search site

Results from our usability test on the original Skin Image Search site

 
 

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

 
 

USer FLow 

I was surprised to see that even in the most simple case, a user had to take 12 different actions just to upload photos and see results.  Every time a user is forced to take a new action, companies risk losing the user to confusion, frustration, boredom, etc.

Hoping to cut down the effort needed to use the app (and thus increase the rate at which users complete the expected flow of actions), I consolidated steps and drew out a new flow that had 50% fewer actions.

 
 
 
 Original task flow compared with a new task flow that I drew to decrease user actions

Original task flow compared with a new task flow that I drew to decrease user actions

 
 

 
 

IDEATION

With the new task flow in mind, I started sketching.  I spent a long time considering the balance between minimalism and thoroughness.  On the one hand, we wanted a design that was simple and fresh.  On the other hand, we knew our test users were getting confused about the previous flow’s directions, so we needed to make it crystal clear what to do at each step, especially now that we had reduced the number of actions by half.

 
 Sketches I drew for the new image upload flow and a storyboard I presented during our team's design sprint

Sketches I drew for the new image upload flow and a storyboard I presented during our team's design sprint

 

 
 

LOFI TESTING

After working through a design sprint with the whole group to finalize the new task flow and brainstorm related screens, we agreed upon the flow to push forward and began mocking up lo-fi versions.  We again ran usability tests with 10 representative users to see how things had changed.

Although users were able to navigate the new flow with fewer hiccups, there was still plenty of room for improvement.  For example, the copy helped the users understand the basic use of the service, but they had no idea that it was using AI (a key component the client wanted to emphasize).

 
 
Lofi_Landing_Test_Catamaran.png
 
 

 
 

ANIMATION

Another challenge that the client wanted us to tackle was adding animation to the product. Animation is often showy and eye catching (or eye distracting), but it was my goal to keep it subtle so that it enhanced the user's experience instead of pulling their attention away from the actual value of the product.  One area that I worked on was prototyping options for the loading screen while the AI retrieved match results.

 
 
 
CircleLoad_Animation.gif
LogoLoad_Animation.gif
VideoAd_Animation.gif
 
 

 
 

THE EVOLUTION OF THE LANDING PAGE

Moving into hi-fi design, I not only fixed up the issues that jumped out from our last round of lo-fi user tests, but I also made sure to keep in mind the earlier discovery from our initial interviews of the existing product: that users thought it was a scam.  I worked through many iterations, trying to boost professionalism while aligning to the core goals of the project (clearly stating the unique value proposition; clearly guiding users through the actions needed).

 

 
LP_Iterations_V16.png
 

 
 

Result

After bouncing back and forth between user tests and Hi-Fi iterations, I eventually got the landing page and flow to a much-improved state to be implemented by the client.  User feedback on the final version makes it clear that the most significant pain points from the initial usability tests of the existing product were largely addressed, and I can’t wait to see more people use First Derm to get simple AI-guided medical advice.

 
 
Before_After_FullScroll.png