First Derm is a telehealth mobile app that provides dermatological consulting without having to visit in person. They offer a fully anonymous service, assuring the user that their images will never be shared online or attached to their name.
First Derm needed help building trust and showing their users that they have credible doctors while keeping information on both sides anonymous through both iOS and Android redesigns.
Through some brainstorming we came across several issues we needed to address, with one that stuck: How can we, through design, build trust and show credibility in an anonymous telehealth app?
Role and Timeline
I was one of 6 designers on the research team, and one of 7 designers on the UI/UX team. I focused on the "More" section and solving the navigation issue. The research portion ran for 2 weeks, and we are 2 weeks deep into the UI/UX process.
We kicked off our initial research by doing an analysis of the existing competitors to better understand the telehealth market. We also reviewed the audience of First Derm's demographics to better understand the average user.
Taking into consideration First Derm's existing demographic and groups they are trying to target, we boiled it down to two main personas: the worried, young parent and the millennial with minimal health insurance. The key difference between these two personas is that the mother is proactive in terms of both their own and their child's health, while the millennial tends to be reactive with their health, seeking professional guidance when they head into "freak-out mode."
In order to fully understand our personas, we conducted 45-minute interviews with mothers and millennials, asking them about their most recent visits and interactions with any sort of doctor. Through these interviews, we gained insight into the thought process of both groups when making appointments, visiting doctors, and receiving diagnoses and recommendations.
After the contextual interview, we had each interviewee recall the last time they had to go to a doctor for a specific issue. They wrote each step on a sticky note and placed it on our "map", determining how freaked out they were in that moment.
Through both the contextual interviews and the journey mapping, we were able to pull some key insights:
1. Participants across demographics wanted to make medical experiences less transactional
2. Moms wanted as much insight as possible to their child's pediatrician
3. Millennials headed to the internet for answers - googling for both self-diagnosis and for ratings of apps and doctors
4. When both parents and millennials freak out the most and feel the most at-ease:
Lastly, we conducted tests of the existing mobile app on both iOS and Android, uncovering any issues with the usability and overall comprehension. This also helped us discover the users' comfort with discussing health matters online.
We asked users to perform tasks that are central to the apps purpose: create a new case, view an existing case, find a doctor, find a pharmacy, share the app.
We synthesized our findings to figure out which pain points occurred most commonly on both the iOS and Android platforms. From there, we organized each pain point on a 2x2 graph to figure out which have the biggest impact on First Derm and the user.
We pulled out three main issues to address for the next steps:
1. Users immediately denied push notifications - First Derm's way of notifying users about answered cases
2. Users were confused by the instructions given for taking the photos - mostly by the fact that they had to take both a close up and an overview picture
3. Users lacked general comprehension about the app and did not trust them enough to pay
UX Ideation and Lofi Testing
Our goal during this process was to improve overall usability by: simplifying task flows, improving onboarding, and keeping iOS and Android consistent in both navigation and task flows.
Through brainstorming and initial user tests, we moved forward with simplifying the "add a new case" task flow and number of screens the user has to go through.
We made several changes in our redesign, and did some user tests in order to validate these changes. From there, ended up on our v2:
In addition, we moved push notification alert to show up after choosing to add a new case. We also added a precursor screen, letting the user know why First Derm needs the ability to send notifications.
Based on our findings from lo-fi testing, we began creating the hi-fi mockups, defining the new visual configurations. Upon creation, we ran some more usability tests and created a few more iterations of the app.
NAVIGATION AND "MORE"
I focused on solving the navigation issue as well as the "more" page with one other designer. Here is a side-by-side comparison:
THE FINAL iOS PROTOTYPE
Conclusion + Lessons Learned
This app required a deep trust by their users and I learned a lot about how to instill trust and reassure users through copy, information architecture, and flows.
The team was very large for this project and as such we divided up different parts of the design. At the end it proved to be difficult and a lot of work to synthesize all of the designs and make sure everything was consistent. In the future I would make sure to define a grid system and elements early (via "symbols" on Sketch).