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 varying ages and genders about their experiences visiting a dermatologist for dermatosis. I also looked into their experiences with other medical practices if they don’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
I 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
I developed 2 personas that effectively represent the challenges and goals of my potential users, serving as a reference moving forward to align with user goals.
Customer Journey Map
To understand the potential feelings a users may experience when going through an 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 that provides telehealth.
Click here to view the full map.
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
I moved on to site mapping to help organize the app's initial structure and to determine its most essential features, such as onboarding, sign-up, guest mode, profile/settings, camera, calendar, doctor, and messages.
Formulating my site map was challenging as I struggled to translate my design ideas into a coherent flow. To address the confusion, I created a mock-up of the app’s potential home screen. This visualization not only helped me clarify the organization of the app's features but also improved communication when talking about my work.
Click here to view the full map.
User Flows
After sorting out the site map, I developed 3 user flows that showcases 3 pathways.
Click here to view the full map.
Low-Fidelity Wireframes
Sketching out the wireframes on paper helped me visualize the app's design. The main tasks developed included onboarding, photo analysis, locating a dermatologist, and requesting medication refills, all emphasized through a minimal and clean layout. I prioritized user needs to ensure the app would be beneficial for potential users.
Mid-Fidelity Wireframes
Following my initial sketches and my user flows, I made key adjustments based off of feedback I got from my mentor and group critiques. The medication refill request was located within the chatroom section, where it was intended to enhance communication, but there were concerns that the location may confuse users. It has been moved to the user profile, where they can request refills alongside managing personal info, doctor details, pharmacy location, case portfolio, and payment method.
After going over the photo analysis feature, I realized that the tracking option no longer made sense in my flow. And going over this flow with my peers, they agreed that the placement was 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.
I changed the use of the body map model, hoping it would be easier for users to circle the area of concern with their fingers. However, my mentor encouraged me to consider accessibility when it comes to the user. To resolve potential challenges for users with mobility issues, I redesigned the model to allow tapping and highlighting of specific areas instead.
Mid-Fidelity Testing
After making my adjustments, I contacted 5 participants to test 5 tasks to see if the flow of the frames and the organization of the features made sense. Although the feedback I got from my peers were positive, there were some suggestions 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.
**User has given me their consent to share our conservation**
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!
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
Onboarding begins with welcoming illustrations and features a straightforward, user-friendly sign-up process. Users can choose to upload their medical insurance information immediately or defer it for later use within the app, offering flexibility to customers.
The app’s mini tour, which appears after the user completes the sign-up process. Here, they are introduced to a friendly, empty state illustration on 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.
Upon receiving the diagnosis, users are given the option to consult a professional to minimize risk, but they can save the case study for later if they feel comfortable. If they choose to proceed, a pop-up will prompt them to enable location services to find nearby dermatologists. Users can filter options based on their preferences, review profiles and availability, book appointments, add their case file, and send optional messages.
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 connected with some previous participants and a few new users to gather fresh insights on the product. They completed various tasks while providing feedback on potential improvements. Overall, the feedback was predominantly positive, with only minor design adjustments needed.
“ 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.
“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
I’ve made adjustments based on feedback to clarify the features and enhance the design. I explored the camera feature for photo analysis, and a user suggested adding another frame for photo confirmation before proceeding. Additionally, allowing users to upload their own photos could improve the experience.
Minor design adjustments include highlighting the navigation bar icons for better user orientation within the app. Additionally, reducing the opacity of section-separating lines was suggested. Changing the accent color's saturation is also considered, as some users find the original shade too jarring.
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.