OVERVIEW
BACKGROUND
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.
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.
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
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
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.
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.
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.
CLICKABLE PROTOTYPE
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
