Patchify
A telehealth app designed to identify various dermatoses conditions with the help of an extensive AI library. This can also help assist users with remote appointments, and medication refills.
Design Process
Research
UX/UI Design
Branding
Prototyping
Usability Testing
Timeline
NOVEMBER 2024 - JANUARY 2025
(2 month)
*Working on a part-time 20hr/week schedule
Problem
Many people deal with various skin issues and face daily challenges. Seeing a dermatologist can take weeks or even months due to high demand. Contacting a live agent for medication refills or urgent questions is often hard. These long wait times can frustrate patients, making them consider other care options.
Solution
Offer an app that helps users get a general diagnosis using a large AI library. It will suggest next steps if they want to consult a professional and connect them with nearby dermatologists. Make medication refills easy without the hassle of calling or waiting.
The Research
With the problem and goal in mind, I began to plan out my research by gathering insights through 3 different methods:
Competitive Analysis
In my competitive analysis, I was able to find 3 dermatology apps that offer telehealth services. Here I discovered similarities, differences, and opportunities between the companies.
User Interviews
I spoke with 5 participants of different ages and genders about their experiences visiting a dermatologist for dermatosis issues. I also considered discussing their experiences with other medical practices if they didn't seek dermatology care.
**Key findings from my affinity map**
-
Offer online skin care diagnosis and treatment services
Have a secure and private way of storing user information and data
Accessible to users of all ages
-
Aysa seems to use AI technology, while DermatologistOnCall and First Derm use real live dermatologists
The costs and payment options for these services vary
-
Include follow-up appointments to build patient to doctor relationships
Highlight credentials and educate users on AI diagnostics
Explore prescription integration for medication refills
Streamline account management, and address user concerns efficiently
-
Reaching a receptionist due to long wait times
Limited availability with specialists
Finding establishments that will accept certain insurances
Bookings dates being weeks or even months away
-
Clear communication, guidance, and follow-ups
Access to medical records and information about their medications
Credentials and qualifications of the professionals are important
Value respect and transparency from doctors
-
Since the app involves medical records, users are stressed the importance of privacy and security. Such as acknowledging the importance of HIPAA and data security.
Users prefer a visual library mixed with brief explanations over FAQS to be the most helpful when pinpointing conditions.
Secondary Research
Besides conducting a competitive analysis, and users interviews, I have also took the time to do some online research to gain more statistics on how often users need dermatology help, how many people suffer from dermatoses issues, and so on. Here are the key findings from my research:
It is estimated that approximately 9,500 people in the U.S. are diagnosed with skin cancer every day
1 in 4 ( out of 84.5 million Americans ) were impacted by skin disease
A dermatologist should be seen annually in some cases, every few months. Many begin seeing a dermatologist around the age of 12.
This helped me gain a deeper level of empathy for potential users in my product and what are important features to include.
User Personas
Based on the insights of my affinity map, I developed 2 personas that effectively represents the challenges users may face. Some challenges consists of avoiding long hold times just to talk to a representative, or finding an office that will accept their medical insurance.
Customer Journey Map
To understand the users emotions while using the app, I created a journey map to visualize the frustrations and delights of a customer.
This helped me grasp how someone would benefit from an app like this, and how to keep them coming back to the app to help with their needs. For example, with my customer Chelsea, she needs help identifying a rash she developed after handling too many cosmetics and skincare.
Key Findings:
Users seek professional advice, a smooth sign-up process, and the ability to explore the app’s features before sharing personal information.
AI-powered photo analysis is intriguing but sometimes inaccurate. Reliable image comparisons reduce stress and misinformation for users seeking answers in difficult situations.
Users appreciate professional communication, timely appointments, and realistic solutions to help treat their skin concerns.
Users value the ability to filter doctors by preference (in this case: insurance and/or availability), this will help the users find appointments that align with their schedules.
POV and HMW Statements
With the research data, personas, and journey map in mind, I made it my goal to tackle these 3 questions:
Site Map
With the HMW statements in mind, I moved onto site mapping to help organize the apps initial structure, and to determine it most essential features. Such as: on-boarding, sign-up, guest mode, profile/settings, camera, calendar, doctor, and messages.
A challenge I faced when formulating my site map was translating the design in my head onto a flow. When I would try to explain my layout, there was a bit of back and forth.
So to help clear up some confusion and to better visualize it when showing my process, I was recommended to create a mock set-up of the apps potential home screen. This helped me better explain the organization of the apps features, as well as minimize any confusion.
User Flows
After sorting out the site map, I developed 3 user flows. These flows show the 3 pathways a users may go through when tackling the main features. Such as: camera analysis/tracker, finding a dermatologist, and medication refills. Making the flows also helped me identify any pain points and opportunities I may encounter along the way.
Low-Fidelity Wireframes
Looking back between the site map and user flows I developed, I sketched out my wireframes on paper. Sketching it out on paper was also a nice break from the screen and allowed me to easily conceptualize the appearance of the app.
The key tasks I developed consist of the onboarding and sign-up process, photo analysis and tracker, finding a dermatologist, and requesting medication refills. While sketching out the frames, I focused on making a minimal and clean layout. Keeping in mind of potential users that can use this app to their advantage.
Mid-Fidelity Wireframes
After conceptualizing the design into low-fi wireframes, I refined them in mid-fidelity, following my initial sketches and user flows to ensure clarity before testing. Along the way, I made key adjustments based off of feedback I got from my mentor and group critiques.
One major change was relocating the medication refill request. Initially, the feature was placed under messages to reinforce communication. However, placing it under there could confuse users. Instead, I integrated it into the user profile, where they can request refills alongside managing personal info, doctor details, pharmacy location, case portfolio, and payment method.
The next adjustment made was removing the tracking option after realizing it didn’t fit under the photo analysis feature. Initially, the tracker let users monitor progress on their dermatology concerns, like a rash improving with medication, and share progress with doctors. However, my peers found its placement confusing—one noted, 'When I hit the camera button, I expect to take a picture.' Since photo analysis is the app’s main feature, I moved tracking to the calendar and adjusted the navigation bar, keeping the profile button prominent for better clarity.
Finally, I changed the use of the body map model. Originally, I thought that it would be easier for the user to circle the area of concern with their finger. But my mentor advised me to think about accessibility when it comes to the user. Having the user circle an area might be a challenge for those who had mobility issues. So to resolve this, I redesigned the model to allow the user to tap and highlight a specific area.
Mid-Fidelity Testing
After making my adjustments, I wanted to move onto user testing. So, I got in contact with 5 participants to test out 5 tasks to see if the the flow of the frames and the organizations of the features make sense.
Although the feedback I got from my peers were positive, here are some of the suggestions they gave to improve the user experience of the app:
“ Some of the icons were a little hard to touch and see, so maybe making them a little larger would help. “
“ The photos in the instruction section was maybe a bit too big but the section is very helpful otherwise.“
“ Instead of the date outside of the cards, place date within the case card and instead of ‘today’ put ‘recent activity’ or ‘your medication’ and ‘your appointments’. “
“ I like adding thing to my calendar, so I would like a pop-up option for me to add it to my iphone’s calendar! “
“ Maybe pop-up message would help me because seeing that the app pre-selected my area i got confused...”
Logo Design
I had several logo ideas for my product, focusing on its core feature—photo analysis. Inspired by real-life practices and app store designs, I narrowed it down to a magnifying glass and created 7 variations.
Since I made too many, it was really difficult to decide on which best suited the product. So, I took it to social media and grabbed unbiased opinions by creating a poll. And to my surprised, people were very responsive and helpful!
On the right is a screenshot of a piece of feedback I got from one of my followers on Instagram:
**User has given me their consent to share our conservation**
Branding
While designing the frames, I aimed to create a product that embodies trust, reliability, inclusivity, and empathy—key values for any medical-related brand.
To achieve this, I incorporated warm, and friendly illustrations to enhance storytelling, especially during onboarding. For the color palette, I chose shades of blue, a familiar color in healthcare, complemented by a pop of green for a modern, fresh touch.
High-Fidelity Wireframes
Using the feedback I gathered and the branding I developed, I moved on to creating the high-fidelity wireframes. Starting off with the onboarding, I placed illustrations at the start to welcome users and introduce the app’s purpose.
The sign-up process is made to be straightforward and user-friendly, allowing allowing the user to seamlessly input their information. While also providing flexibility by making certain input field optional. For example, users can choose to upload their medical insurance immediately or later as they continue using the app.
Next is the app’s mini tour, which appears after the user completes the sign-up process. Here they are introduced by a friendly, empty state illustration at the main homepage that presents them with their first indicator to start interacting with the app. To keep users engaged, I highlight each icon as they learn its purpose.
Once the user finishes the tour, they are prompt to start using one of the apps primary feature—the photo analysis. Here the user is able to snap a photo of a specific area of concern, fill up a quick questionnaire, and allow the AI to process their information for a general diagnosis.
Once the user reviews their diagnosis, they are advised to consult a professional to reduce risk. Here the user can also save the case study for later if they aren’t too worried. But if they want to proceed, a pop-up will prompt them to enable location services to find nearby dermatologists.
Here the user can filter out their options that will best benefit them, read through their profile and reviews, see their availability, book an appointment, add their case file, and send them an optional message.
Finally, the user can remotely request refills of their prescriptions from their profile. Here they are also able to see their personal information, current doctor, case portfolio gallery, default pharmacy, and current payment method.
High-Fidelity Testing
I was able to get a hold of a few of my previous participants from the last testing session, along with a couple of new users to see the product with fresh eyes. I asked them to complete tasks from each section while inquiring about what I can do to further improve the experience.
With a mix of old and new participants, I was happy to hear that the feedback was mostly positive. To my surprise, there wasn’t much for me to adjust other than a few minor design aspects.
Here are some of the comments that were made:
“ Maybe consider changing the color of the green and make some paragraphs larger ( a bit ) to help with older eyes. “
“ Maybe fix the green shade...maybe make the arrow drop down icon a bit later to hit easily... ”
“ Maybe fix the green shade and make the arrow drop down icon a bit later to hit easily... ”
Getting Expert Advice
During both of my testing phases of my project, I was able to get the help of a co-worker and friend who currently works as a UX Writer.
She gave me excellent feedback on how to further improve the speech and language of my text to better resonate with the user, as well as providing reasoning on why one language should be switched one way or another. These tips allow me to think thoroughly about how I should communicate with the user, since writing for my projects has always been a challenge for me.
Below are some of the feedback they gave from the mid-fi and high-fi stages:
“Add ‘your’ between 'dermatology’ helps with personalization ”
“Replace ‘no’ with ‘start’ or ‘start your first analysis’—helps with action“
“Add an extra frame separate the photos to confirming the photo—add an upload icon to get photo from in phone gallery…“
“Change the order of the yes and no options—helps with patterning…“
“Say something more like ’ensure the problem area is in focus to help the AI pinpoint the diagnosis’—makes it less wordy ”
Iterations
With the feedback in mind, I’ve made the proper adjustments that made the features clearer to understand and cleaned up parts of the design.
First, I explored the camera feature to for when the user has to use photo analysis. One user has noted that making another frame would help make it clear that they can confirm the photo before moving forward. And making it an option to add their own photos would also be delightful.
Other minor adjustments were on the design side. One was to highlight the icons of the navigation bar to help the user know what section of the app they are on. Another option is to reduce the opacity of the lines that separate different sections of the app. As well as changing the saturation of the accent color, because a couple of my users says that the initial shade is a little jarring to the eyes.
Prototype
Click the link here to try Patchify for yourself!
Conclusion
There are many opportunities to expand the usability of this app. Such as adding a tracking feature of patients progress, push notifications, chatroom and messaging, or a symptom log between patient and doctor. Since this project only covered the MVP, there’s a lot of room to grow.
A lot of my users were very excited about the product, and some have mentioned how they wish telehealth were as intuitive and convenient as mine. Not only did this boost my confidence for future projects, but it also made me feel accomplished in achieving the goal I set for my users in this project.
