A women-centric application that provides for the best of a women’s healthcare needs
Project Overview
Background
Proactive For Her is an application that provides women’s healthcare solution from anywhere at anytime. This is an all in one application that let’s you book a doctor’s appointment, book a medical test and also provides programs that a person can undergo to solve a problem
Roles & Responsibilities
To create a fully functional app and website for end-users and Dashboard for Care coordinator, Doctor and Admin along with wireframes, user personas, high and low-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on design
Tools used
What we did
Design Process
Creating a user persona helped us understand who will be using the product, their goals, frustrations/pain-points and for what purpose they will use the product.
Discover
User Research & Interviews
Our main goal here was to find and understand a user’s problem and resolve them. Our target audience are females from the age of 18 onwards who need to easily and quickly find a doctor of their choice and conviniently book an appointment. We interviewed 5-6 users’s to better understand their challenges, motivations, overall experience and needs that the user faces. Below are some of the questions that were asked :
Competitor analysis
Analysis of the competitors is critical in determining the performance of the app compared to those of competition. The competitor analysis we carried out is closely linked to the usability of the platform and the features made available to the users. We identified some competitors and analyzed their features to determine the pros and cons related to PFH
Pros
Pros
Pros
Pros
Pros
Pros
Define
Personas
Creating a user persona helped us understand who will be using the product, their goals, frustrations/pain-points and for what purpose they will use the product.
User Painpoints
We learned about a lot of problems during user research and interview phase where we identified that a lot of users share the same behaivour and pain points. Below are some of the common problems most of the users shared
People have had bad experiences where the doctor would ask them to take unnecesssary tests and the treatment is not effective.
People don’t like waiting for long-hours for their at hospitals or clinics
People avoid visiting a doctor due to their busy schedule, lack of accessibility, high fees, bad reviews or no good doctors in their locality
Empathy Map
Empathy mapping helped us gain perspective on Users' thoughts and feelings. This process was done to define the target audience with more clarity as well as illustrate their needs and actions
Ideate
User Flow
After extracting essential information from users through research we made this user flow diagram after several iterations that shows the entire path that the user takes while exploring this product.
Information Architecture
We created an Information Architecture where we structured the content so it’s easy for users to find what they are looking for
Information Architecture - Doctor, Care Coordinator, Admin Dashboards
Mid - Fidelity Wireframes
We made wireframes to lay out content and functionality which takes into account users need and users journey.
High-Fidelity Wireframes
Visual Style Guide
Style Guide is an essential part of a project as it helps create a standardized system of colours, fonts, text input and many other components that will be combined and displayed on users screen
Typography
We used Inter for app and Open Sans for website and dashboard. Inter is a variable font family carefully crafted & designed for computer screens, comes with a wide range of weights and styles that provided us with more flexibility. Whereas, Open Sans is a humanist sans serif typeface and we chose this since it has excellent legibility characteristics in its letterforms.
H1 Proactiveforher 24px
H2 Proactiveforher 20px
H3 Proactiveforher 16px
H4 Proactiveforher 14px
P1 Proactiveforher 16px
P2 Proactiveforher 14px
P3 Proactiveforher 12px
H1 Proactiveforher 32px
H2 Proactiveforher 24px
H3 Proactiveforher 20px
H4 Proactiveforher 16px
H5 Proactiveforher 14px
P1 Proactiveforher 16px
P2 Proactiveforher 14px
Color palette
Style Guide is an essential part of a project as it helps create a standardized system of colours, fonts, text input and many other components that will be combined and displayed on users screen
Primary
#D3776E
Primary
#43536E
Primary
#43536E
Primary
#43536E
Primary
#43536E
Secondary
#122839
Success
#6BBEA6
Primary
#B0D1EA
Primary
#CBD9C0
Secondary
#E7BFAD
Secondary
#86A5D9
Success
#E9D189
Primary
#8C5149
Primary
#F7EDE4
Iconography
Style Guide is an essential part of a project as it helps create a standardized system of colours, fonts, text input and many other components that will be combined and displayed on users screen
Iconography
The Component library was created to facilitate the interaction between designers and developers and preserve the visual concept of the application.
Visual Design
Patient side
Simple Log in/Signup process
Users can log in or sign up using their mobile number. This is the fastest and easiest way for the users to quickly access/explore the app and resolve their purpose
Homepage
After successful log in/sign up the user will land on the homepage where he can explore the app, get important information, find doctors, find test centers and health programs
Diagnostic Tests
Users can take desired diagnostic tests available where they can either take the test from home or visit a test center. Users can take multiples tests at once, view test results in the app, cancel or reschedule the test as per their convinience
Programs
Proactiveforher offers women with treatment programs to undergo where they can treat their PCOS or Vaginismus problems with the help of experts and frequest consultations. Users can take an optional free quiz to know if they are suffering from an issue
Website Screens
Doctor Dashboard
Appointments and Consultations
Details of all the patient bookings and consultations can be seen in the Dashbord. The status of the appointment, appointment ID , the type of consultation can be seen here. We made the Dashboard very simple and easy to use.
Calendar for scheduling activities
Calendar is essential for planning activities. Here the doctor can set his availability and check for upcoming meetings and appointments
Prescription
Prescriptions can be added as and when the appointment is successfully completed. This prescription uploaded by the doctor stays in the medical record of the patient and can be downloaded or printed
Care Coordinator Dashboard
Care Coordinator is able to see and manage all the doctors apponinments, upcoming and past consultations, programs and diagostic tests. The coordinator can track orders, coordinate with the doctors and patients regarding any updates or change in availability. The Care Coordinator plays a vital role in the application
Admin Dashboard
Admin will be able to see all the activities related to doctos, labs tests, programs, The admin will be able to add different specilaities, symptoms, tests and will be able to manage articles, testimonials and coupon codes.
Test
Usability Testing & Implementing Feedback
After the Visual design was complete we evaluted the design on the target audience. We collected feedback from users within our organization, who under the testing phase were given the link of wireframe. Further we evaluated the pros and cons of each feedback received from them in terms of applying them in practicality and how it can affect in functioning of the final product.
Conclusion
Designing the app has been challenging and a satisfying journey. The challenge was to conduct user research and prepare the whole flow to create a complete prototype-friendly app with smooth and clear usability and most important of all, accessibility to Users, Doctors, Care coordinators and Admin.
720 +
Hours spent
560 +
Screens made
12 +
Weeks
03 +
Resources
Thanks for watching
Work with us!
Contact us at www.cupsaucer.studio