Charles Kim
 
 
 
 
first derm hero header.png
 
 

OVERVIEW

 

COMPANY

First Derm is an online service that bridges the gap between an internet search and an in-person dermatologist consultation. Their AI application known as Skin Image Search™, helps assess any skin condition within seconds of uploading user-taken images. First Derm also gives users access to a team of dermatologists ready to provide expert input on any skin concerns.

 
 

CHALLENGE

Building off the existing MVP, our team's goal within a 6 week span was to:

  • Redesign the visual identity of the Skin Image Search™ as a trustworthy and modern looking product.
  • Rework the information architecture to increase engagement in uploading photos to train the convolutional neural network (CNN)
  • Help guide users to next steps in hopes of driving revenue and simplifying the user flow. 
 
Screen Shot 2018-08-28 at 8.14.37 PM.png
 

ROLE

We conducted user research, created low/high fidelity mockups, and a working prototype for web responsive platforms. I redesigned the detailed skin condition page and the photo uploading flow on mobile web. 

 
first derm working.png
 
validation end results.png
 
 
 
 
 
 
 
 
 
 
First Derms Final Screens - End Results Section v2.png
 
 

USER RESEARCH

 

TESTING THE MVP

We ran usability tests with 10 participants who fit into First Derm’s demographic. Based on our assumptions with the existing product, we wanted to validate our hypotheses while discovering new areas of friction. Here are some of the issues we saw users struggle with:

  • 0/10 Users found the product easy to use
  • 3/10 Users uploaded the two required photos without issue
  • 3/10 Users would recommend to a friend
 
existing problem quote.png
Screen Shot 2018-08-28 at 8.14.37 PM.png
 

INSIGHTS

Users were able to pickup right away that First Derm offered a medical service, but not in a positive light. The impression they got was that it felt like a scam and questioned the site's credibility. Many of them were also thrown off by the medical jargon and weren't sure how to digest some of the information. After identifying every issue that our users ran into, we grouped them together based on business goals vs. user goals. We found that the most pressing pain points were in the following areas

 
Screen Shot 2018-08-28 at 8.14.37 PM.png
 
 
 
 
 
 
 
pain points existing UI.png
 
 

DESIGN

 

CONTRAST CHECK

Because we were tasked with redesigning the Skin Image Search, we had to abide by First Derm's existing style guide. One of the first things we noticed is that their main turquoise didn't pass the standard contrast check for accessibility. Following the WCAG 2.0, we recommended two passable color options to the client.

 
 
 
 
 
 
contrast checker v.png
 

WIREFRAMES

After a few design studios, we took our best ideas and began mocking up low fidelity screens for testing. Although we wanted to reduce the amount of steps, we wanted to make it clear as possible to users on the requirements for each photo to upload, not just on the landing page.

On the detailed pages for each skin condition, I reorganized the information so users could easily navigate between sections like causes, symptoms and treatment. I also focused on presenting the images in a less jarring manner by adding a carousel so users could preview more photos, in case they were too graphic. The CTA was designed as a sticky button to the bottom of the screen so users could easily access the "Ask a Dermatologist" service, which is the site's main source of revenue.

 
 
design sprint photos.png
First Derm Lofi Screens.png
 

HI-FI PROTOTYPE

After another round of testing with our lo-fi screens, we made a few tweaks like moving a verified disclaimer below the images to bolster credibility and let it be known that all photos were reviewed and certified by real dermatologists. Below are the results for the Photo Upload Instructions and Detailed Results Page. There is a full clickable prototype as well. 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
first derm final screens v4.png
 

CLICKABLE PROTOTYPE

 
 
 
firstdermbackground.png
 
 

CONCLUSION

 

SUGGESTIONS

Along with the final deliverables, here are some of the future suggestions we proposed:

  • Add supportive data such as user reviews, press and testimonials to build more trust and credibility. 
  • Emphasize accuracy and severity when viewing results
  • Provide an option for users to add more photos when sending a case to a dermatologist

First Derm's technology has proven to be promising. They've received a few buyout offers from investors including Google. The newly redesigned Skin Image Search is due to launch by the end of 2018.

 
 

The team I worked with was really great at taking and giving feedback. It was motivating to see how receptive my teammates were, ensuring that we all wanted to create the best product. Through this process I learned how to articulate my design decisions better while identifying the weight behind each choice I made. 

REFLECTION

 
 
Screen Shot 2018-08-28 at 8.14.37 PM.png