Diya Health
Web applications aimed at bridging the gap of access to basic health care and ensuring healthier future for everyone
Customer
Diya Health Inc.
Location
San Francisco, USA
Project Time
2018-2024
Industry
Healthcare
What
2 Mobile Apps, 1 Desktop App & Website
Who
Cross-functional team of 5 people
Tools
Sketch, Zeplin, MarvelApp, Illustrator, After Effects, Jira
Diya Health founded in 2018 is dedicated to bridging the gap for underprivileged populations in accessing basic medical information and making informed healthcare decisions. Diya Health envisions a future where every individual, regardless of social or economic background, can confidently and proactively manage their health and overall well-being. Through its efforts, Diya Health strives to shape a healthier, happier, and more enriching future for everyone.
Problem Statement
In many developing countries, there's a critical absence of a centralized medication tracking system. Patients frequently receive treatments without comprehensive consideration of their medical history, increasing the risk of adverse drug reactions. Moreover, the scarcity of modern technology—often with families or entire villages relying on a single shared mobile device—further restricts access to vital health information. These combination of factors undermines individuals' capacity to make informed health decisions, putting their lives in jeopardy.
Opportunity
By developing a tailored digital medical record system, Diya Health can address significant healthcare gaps and improve health outcomes. This product would capture and store a vital health information and medication history, run safety checks for potential adverse drug interactions, and be designed for areas with limited tech access and infrastructures, ensuring its wide accessibility. Moreover, this platform holds potential for monetization through premium features and offers expansion opportunities for adoption by hospitals and private physicians.
My Role
I was the only UX/UI designer on the project. My responsibilities encompassed the entire design process, including gathering business requirements, setting acceptance criteria, defining target audience, conducting research, writing user stories, creating wireframes and prototypes, producing visual designs, designing marketing assets, logotypes, and illustrations, creating video tutorials, and effectively communicating design solutions to engineers.
Results
I proactively participated in evolving Diya from a single app focused on assessing adverse drug reactions into two specialized apps for doctors and patients, and then into a unified platform connecting clinicians, patients, and family members, designed for adoption in hospitals.
🏆Diya has been adopted by 10 US hospitals, including the well-known Mount Sinai Hospital in New York.
🏆Time spent by clinical staff on family communication and related workflow disruptions was reduced from 1.1 hours to about 30 minutes per day, producing around 55% time savings for clinical staff to spend on patient care and revenue-generating work.
🏆Patient satisfaction ratings increased by 20% due to reducing patient and family anxiety when they are in the hospital or undergoing a procedure. This is very beneficial to hospitals because in the US, hospitals are paid more when patients give higher ratings.
🏆Out of 1,100 patients and family members, there have been 0 user complaints! All feedback has indicated that Diya features a very easy-to-use and intuitive interface.
🏆I initiated a timely app and website redesign to incorporate and prioritize the quick symptom checking functionality during the early stage of the COVID-19 pandemic, thus helping the company and users to keep up with the turbulent times.
Design Process
Step 1
Step 2
📍Research Data Analysis
📍Information Architecture
📍User Stories, Scenarios & Flows
📍Interactive Digital Prototype
📍Design Concept Refinement
📍Wireframes
Step 3
Step 4
📍Preparing Design Assets for Development
📍Creating the UI Styleguide
📍Creating Jira Tickets
📍Testing Features
📍Providing Feedback
Step 5
Step 6
STEP 1
Discovery & Research
📍Kick-off Meeting & Competitor Analysis
📍Interviews & Personas
Kick-off Meeting & Competitor Analysis
The project began with a comprehensive kick-off meeting to understand the product's goals and requirements. Following this, I researched our direct and indirect competitors to identify opportunities to differentiate our product in the market.
After careful analysis, I discovered that no other products offered our killer feature of checking Adverse Drug Reactions (ADRs) and assessing risk severities. This discovery reinforced our belief that developing this concept would be a significant advantage in the market. To sum it up, I gathered all relevant data and created a detailed design brief to guide our team.
Interviews & Personas
As we developed the app with the aim of serving underprivileged people in developing countries, we faced the challenge of not having direct access to them. However, we conducted interviews with doctors working in India and individuals who had relatives living in rural areas to gain insight into their needs.
Using the information gathered from these interviews, I developed personas for our users. Initially, we had three archetypes: patients, doctors, and family members. Later, we expanded this to include three more: pharmacists, caretakers, and administrators. This enabled the team to identify all the necessary features and create user stories for each archetype.
STEP 2
Synthesis & Prototyping
📍Research Data Analysis
📍Information Architecture
📍User Stories, Scenarios & Flows
📍Interactive Digital Prototype
📍Design Concept Refinement
📍Wireframes
Research Data Analysis
Based on the insights received from the research, we were able to formulate our HMW question:
How might we design an accessible tool that enables underprivileged people in developing countries to quickly and easily check the potential ADRs associated with the medications they take, while considering their limited access to healthcare, medical information, and technology?
To meet the needs of our target users, we developed a list of essential features:
Check ADRs and group them into three categories based on risk level (our killer feature).
📌Generate ADR reports that can be easily shared with family members and volunteer/family doctors.
📌Recognize medications by taking a picture (typing them in manually can be challenging for our target audience).
Information Architecture. User Stories, Scenarios & Flows
My next step was to develop the information architecture for our upcoming app and website, encompassing the navigation system, user flows, and other key components. Additionally, I created user stories and scenarios to guide the development of the app's features, ensuring that we met all critical user needs.
Interactive Digital Prototype
Using Axure, I built a high-fidelity interactive prototype that included all the essential features of our product. This allowed us to thoroughly test and identify any potential interface issues before moving on to the implementation phase. Additionally, the prototype served as a visual aid for presenting our product to investors and volunteer doctors.
Design Concept Refinement. Wireframes
Following feedback from investors and doctors, we realized that our initial product concept needed refinement and we should develop two separate applications - one for patients (MyDiya) and another for doctors (RxDiya). This would facilitate better interaction between both sides and enable faster and easier information sharing and response. To adapt to these new requirements, we agreed to switch from building a high-fidelity prototype to creating low-fidelity wireframes that allowed us to speed up the design process.
MyDiya Wireframes
RxDiya Wireframes
STEP 3
Visual Design
📍MyDiya App Design
📍RxDiya App Design
📍Illustrations
📍DiyaGroup Website Design
MyDiya App Design
The first application that evolved from the initial version of the product was MyDiya, designed for patients. MyDiya allowed users to create and manage their medical records, evaluate health risks, access detailed medical information, and stay up-to-date with medication and preventative care.
The app also enabled users to share their records with doctors and receive immediate medical advice. To ensure a seamless user experience, I designed UI for all screens of the app, from onboarding to error/success notifications, and created custom illustrations to enhance the visual appeal of the app.
RXDiya App Design
My next step was to create a complementary application called RxDiya, aimed to provide doctors with critical patient data in the form of an intelligent synopsis, with details on side effects, contraindications, and ADRs for all locally available medications. This would help doctors get a thorough understanding of the patients’ health status and enable them to make well-informed decisions regarding their treatment.
To maintain consistency with MyDiya, I used the same layouts but updated the color scheme to differentiate the two applications. Additionally, I designed the screens that were missing in the MyDiya app to ensure that doctors had all the necessary information at their fingertips.
Illustrations
I designed custom illustrations for the onboarding screens, as well as for the error and success screens. I wanted to add a touch of humor and emotion to our serious medical apps, so I came up with a series of playful pill illustrations, which were well-received by the customer and representatives of our target audience. I also ensured that the colors of the illustrations were consistent with the color palette of both apps, which helped to create a cohesive visual experience.
DiyaGroup Website Design
There was a need for a website to effectively promote the products and communicate the company's vision and values to prospective users, partners, and investors. I started with creating wireframes to establish the structure and layout of the site, which I then transformed into responsive UI designs that conveyed our brand's identity and messaging.
STEP 4
Handoff & Design Review
📍Preparing Design Assets for Development
📍Creating the UI Styleguide
📍Creating Jira Tickets
📍Testing Features
📍Providing Feedback
I prepared all necessary design assets, including mockups, illustrations, and other graphic elements, and provided them to the developers via Zeplin. To ensure the developers had a clear understanding of the user experience and interactions, I created a clickable prototype in MarvelApp that covered the main user scenarios and component states. In order to ensure consistency across both applications, I developed a comprehensive UI styleguide. Additionally, I created Jira tickets and thoroughly tested all features to ensure proper implementation, providing detailed feedback as needed.
STEP 5
Additional Assets
📍MyDiya, RxDiya, DiyaGroup Logos
📍Promotion Videos
MyDiya, RxDiya, DiyaGroup Logos
As part of my responsibilities, I was tasked with designing logos for our entire product suite, including MyDiya, RxDiya, and DiyaGroup (which was later rebranded to DiyaHealth). I developed a variety of logo concepts and variations for each product. Following a collaborative review process, we selected the most effective designs to represent our products in the marketplace.
Promotion Videos
Another big challenge for me was to create a video to promote the product to a broader audience, even though I had no previous experience with video production. However, I did my best and created two videos in Adobe After Effects: one that conveyed the product's significance and impact on users, and another that highlighted its most important features.
2023 UPDATE
Over time, Diya evolved into a platform connecting clinicians, patients, and family members, fostering collaborative teamwork. This hospital-integrated platform optimized clinician efficiency and boosted patient and family satisfaction.
To build this platform I introduced features addressing communication gaps between hospitals, patients, and families, including common inquiries, access to top-rated health content, treatment clarification, and real-time collaboration on updates. Additionally, I redesigned the website to highlight new product benefits, resulting in improved user feedback and a clearer mission understanding.
