First Derm: AI Skin Image Search
CLIENT: First Derm ROLE: Product Designer, Interaction Designer TOOLS: Flinto, Sketch, Marvel
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:
Encourage users to upload two photos upon visiting the site to use as data to train the AI
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.
A before and after look at the landing page that I re-designed for the Skin Image Search. More below about the process.
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.
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.
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.
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).
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.
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).
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.