Project Overview
Project Overview
Our project aims to design a mobile application that lets users find doctors nearby and book an appointment. The users can see doctors' qualifications, specializations, languages spoken, and many more details which will be helpful. The application also allows for rescheduling and canceling of an appointment. This application is not only useful for ex-pats/immigrants, but also for anyone who is in Germany and looking for a doctor. It also enables easy communication between patients and doctors.
The problem
The experience of finding a doctor and booking an appointment can be difficult and overwhelming when you live abroad, especially when you don’t know the language.
My role
UX Research, Interface Design, Usability Testing
The goal
The goal of our project is to simplify this process by developing a user-friendly application that mainly targets expats and immigrants in Germany.
Tools Used
Figma, Miro, Procreate, Google Forms
Design Process
Design Process
We have followed a user-centered design approach to deliver a user-friendly application that will potentially be used by millions of people. Starting from the basic definition of our goal for this project, we have done extensive research, conducted interviews, designed, iterated, and conducted user tests before arriving at our final application.
The four major principles we followed throughout this process was:
Having a clear understanding of our users and their needs
Determining requirements and designing based on user feedback
Involving users at early stages to evaluate the design
Constant iteration based on user feedback
Research and Analysis
Research and Analysis
Our goal was to understand the market and develop a deep understanding of our users’ needs and requirements. We identified people who would use our product, what they will use it for, and under what condition they will use it. We did a detailed competitor analysis to find out about existing applications and users’ opinions about them. It was followed by an online questionnaire and online interviews. We wanted to understand both users' and doctor's point of view. This initial research stage was not only crucial for our project, but also the most challenging.
Competitor analysis
For the analysis, four competitors were chosen to evaluate their strengths and weaknesses. This information helped us to understand what the trends are across all the competitors, their unique differences, and why users might choose a particular service over another.
Key Takeaways
Main Features
Good filtering options
Making appointments
Appointments history
Video consultations
Appointment remainders
Building huge database of doctors across the country
Ways to improve
User friendly application design, that could also be used by older people
Ability to switch application language
Protect user data and privacy
Online Questionnaire
We created 2 different questionnaires in google forms. One for the Doctors and one for the patients. We had a hard time reaching out to doctors as we were not getting any responses. We specifically looking for doctors in Germany, as the initial idea was to create an app targeted for German market (then the idea was extended to an application for any country).
We had a similar criteria for the patient side, they should be located in Germany, and have some experience of booking an appointment with a doctor.
Doctors Results 🩺
Patients Results 👨🏼💼
Key Takeaways
Based on the results, we can make a conclusion that both doctors and patients might be interested in using an app for making and managing medical appointments.
Features insights:
The reminder feature can be useful, as doctors face the issue with patients forgetting about appointments. Language filter, as patients are interested in finding doctors who speak their language. As doctors mentioned that they are not that interested in online consultations, this feature can be skipped.
Monetization model insights:
Not all of the patients are ready for paying for the app, so we should consider another way of monetization besides subscription. Some of the doctors may be ready to pay a fee for using the app.
User Interviews
We conducted interviews with both Doctors and Patients to gain deeper insights into their lives, experiences and challenges.
Doctors 🩺
Goal
To discover:
Context of Use
Required Patient information
System that is currently used by doctors for making appointments
Marketing strategy (whether doctors are ready to pay for the app, or not)
Questions
Demographic data
Context of Use:
A typical day at work
How often do you come across patients who forget their appointments?
How often do you check your schedule?
Do you do online consultations?
Patience information:
Do you mostly have regular or new patience?
How do you prepare for the appointments?
What information about the patients do you need?
Marketing:
Have you done any kind of marketing/promotion to attract patients?
Would you be willing to pay a small fee to promote yourself and attract patients?
User Need and requirements
User Needs and Requirements
User Needs
Contact doctors easily
Be able to search for a doctor using different criteria (speciality, laguage, type of insurance, distance)
Be informed about the appointments in advance
Be able to make and manage their appointments easily
Gain knowledge about German medical system
User Requirements
Making appointments
In-app messages for staying in contact with a doctor
Filters: doctors specialization, language, type of insurance, distance
Notifications and reminders about the upcoming appointments
Canceling and rescheduling appointments
User Persona
Based on the user interviews and online surveys, we created user personas for both patients and doctors. This gave us a point of reference throughout the development cycle, to help ensure that progression aligns with genuine user needs. By asking questions like "How would Devanshu or Teresa feel about using this feature" we were able to empathize with the users.
User personas are highly helpful in growing and enhancing a business because they reveal the various ways individuals use products, allowing us to concentrate on improving the experience for real people and use cases.
Empathy Mapping
An empathy map is a simple, easy-to-digest visual that captures knowledge about user’s behaviors and attitudes. It is a useful tool to understand users better. Much like a user persona, an empathy map can represent a group of users, such as a customer segment.
The mapping process helped us synthesize research observations and reveal deeper insights about user needs. A common UX empathy map is divided into four quadrants, outlining notes on four different aspects of the user’s internal experience. The quadrants can vary based on needs and preferences, but almost always contain:
Think & Feel: User’s emotional state and thought process
See: What the user sees
Say & Do: User’s behaviour in general or specific situations
Hear: What the user hears from third parties
Storyboarding
A storyboard is a mean of structuring a story graphically that shows a visual sequence of events. They're designed to tell a tale and depict the process and experience of a particular event.
We were able to walk in the shoes of the users and see the products in the same way. This helped us to understand existing interaction scenarios, as well as to test hypotheses about potential scenarios.
Devanshu is from India and recently moved to Germany for his higher studies. He is not very fluent in German.
One day Devanshu was not feeling good. He had a high fever and cold. Coming from a tropical country, he couldn’t handle the winter.
Since he is new to the country and doesn’t know German very well, he is worried about finding an English-speaking doctor.
He immediately asks his friend if he knows any good English-speaking doctor.
His friend recommends him to try out the DoctoScan app to find a doctor and book an appointment.
Devanshu downloads the application and finds an English-speaking doctor who’s nearby and book an appointment.
He gets a reminder on his phone one hour before the appointment time.
Devanshu visits the doctor on time and gets himself treated.
We sketched out the experience of using our product from the shoes of a typical user. By creating this scenario, we were able to better understand the users and decide what features they might find the most useful. It also helped us in keeping the teams' vision aligned ensuring that we are thinking about the user experience at all stages.
User Flow
We mapped the features to separate user paths and later used this to create an information architecture. We created a path in such a way that the users' time is not wasted in the application. When users can easily flow through an interface without hesitation or confusion, there is a greater likelihood that they will use the application again. User flows are a great tool for any designer’s toolbox as they can assist in evaluating the efficiency and simplicity of a creative design.
Sample: User flow - Booking an appointment
Sample: User flow - Rescheduling an appointment
Information Architecture
We created 2 information architectures, one for the mobile application used by the patients and one for the desktop application used by the doctors. The most challenging aspect of creating a new information architecture was constructing it hierarchically. Different features on different screens were put together separately and then combined
to create a visual hierarchy.
Information architecture for the mobile application
Information architecture for the desktop application (Doctors)
Design and Testing
Design and Testing
Low-Fidelity Prototype
Due to time constraints, we skipped the rough sketches and started directly with the low fidelity wireframes. A low-fidelity wireframe is a skeleton of a digital screen, web page, or an application. It’ll have the bare-bone elements that will be included in the finished project. It gives an idea of where images, text, buttons, and interactive elements might be placed.
The low-fidelity wireframes were created in Figma and later prototyped to test with the users. The low-fi wireframes for both mobile and web platforms were created, but the scope of this project is only to design and test the mobile application for patients. Therefore, the prototype was only created for the mobile application and not the web.
Onboarding screen
My Profile
Home screen
My appointments
Doctor Profile
Messages
Dashboard (Web application)
Patient List (Web application)
Had issues with booking an appointment (could not find an English-speaking doctor, were not sure if the doctor accepts their health insurance)
Used different ways for making an appointment, but the most popular one is via phone
57.1% of participants are interested in video consultation but not ready to pay a fee for the app
Patients sometimes don't speak German
Patients sometimes forget their appointments
Doctors may be interested in using the app
Online video consultations are inconvenient
May be ready to pay a fee
Doctors
Patients
Selection criteria
Doctors with at least 1 year of working experience. As the goal was to discover the context of use, as well as to find out which patient information is important for doctors, at least some experience was needed.
Participants
2 participants (2 females)
25, 31 year old
Nationalities: Russian
Responses
Patients often miss their appointments
Demographic data and visiting history is important for the doctors
Analytics and filters are really important (diagnoses, visiting history, patience filters)
Doctors refresh the calendar all the time to check whether there are any changes
Doctors are not willing to pay the fees for the app
Results
General information about patients and their previous history should be avaliable for doctors in the app
Notifications about rescheduling or canceling appointments can be useful (with the possibility to turn it off not to distract the doctor)
Patients need the reminders about the time and date to reduce the percentage of missed appointments
Patients 👨🏼💼
Goal
To discover:
Context of Use
Criteria and process of searching for a doctor
Current patients experience with the appointment booking system
Questions
Demographic data
Experience of searching for a doctor
Which criteria are important while searching
Experience of booking appointments
Experience of visiting a doctor
Would they like to have online calls with doctors in the app
Which features could be useful in the app
Whether the participants are ready to pay for the app or not
Selection criteria
Participants should have some experience with making appointments and visiting a doctor, especially abroad, because the app is focused on searching for a doctor that speaks particular language.
Participants
2 participants (1 female, 1 male)
25, 40 year old
Nationalities: Indian, Mexican
Both are living in Germany
Occupations: Student, Working Student (Designer)
Responses
Participants visit doctors only in urgent cases
Both participants firstly used the websites (Doctolib in the first case, and a clinic’s website in the other case), and they had to make a phone call to confirm the appointment
If the participants would like to look for a new doctor, they search for them and check the accepted insurance and language, or ask their friends
Would like to have online consultations with doctors
Language, time filters, health insurance, doctors specialty could be useful in the app
Participants are not ready to pay for the app
Results
The idea of the app is useful, as there is a lack of such solutions on the market,
especially in GermanyLanguage and health insurance filters are crucial
Online consultations could be interesting
Patients are not ready to pay for the app. The subscription model could be probably
is useless, as they visit doctors only in urgent cases.
Questionnaire and Interview Analysis
Based on the conducted interviews and the questionnaires, we decided of what should be taken into account for the app development.
First of all, the following features should be implemented:
Filtering doctors by:
- Type of health insurance
- Language
- Distance
Reminders about the next appointment date and time for patients
Although patients showed their interest in online consultations, the feedback from doctors was controversial. Some of the doctors said that for them it is crucial to look at the patients for analyzing the symptoms. Furthermore, certain privacy policy issues should be taken into account to implement this feature, so we decided to skip it.
The initial idea is to create an app for making appointments in Germany. However, the app realization can be then expanded to other countries.
Concerning monetization model - neither doctors nor patients are willing to pay extra fees for the app. One of the reasons for that in doctors' cases can be that the interviews were conducted with doctors who don't run private practice (so more interviews with doctors should be conducted). In contrast to the interview we found out from the questionnaire that both doctor participants may pay a fee for promoting themselves. So the model of extra fees for doctors promoting can be an option, although we should not fully rely on this channel.
In general, the feedback about the idea of the app was positive from both doctors and patients. Participants mentioned that they would like to use an app like this.
Initial Usability Test
Test Procedure
The usability test was conducted as a moderated remote usability test of the DoctoScan interface created in Figma.
Webex was used as the tool for conducting online sessions. Users were observed while completing the tasks. Their verbal comments, as well as their interaction with the interface, were recorded for later analysis.
The test had the following plan:
Welcome part with the explanation of the testing procedure
General questions about participants
Home page tour to let the participants explore the main page
Usability tasks
Probing. Gathering feedback about users' experience of interacting with the interface.
Six users each carried out four tasks on the interface in separate test sessions.
Each test session lasted between 40 and 60 min, including the time of answering questions.
Three usability testers were attending interviews (one moderator, and two observers).
After each interview, the results were discussed in a group.
Participants
6 participants (1 male, 5 females)
5 out of 6 participants are living in Germany, 1 - in Russia
Nationalities: Russians (2 users), Indian (1), Mexican (1), German (1)
23-40 year old
All of the participants are students of German universities, one of them - is also working as a Designer
Questions
Pre-session questions:
First, what’s your occupation? What do you do all day?
What kind of app do you usually use?
Do you have any favorite apps?
Post-session questions:
Was it easy to navigate through this app for you?
Was everything clear?
Was there anything confusing during registration or finding a doctor?
Do you think there are elements or features that can be added?
Do you think there are any unnecessary elements or features in this app?
Do you have any questions?
After conducting the interviews, interview findings were documented and divided into positive and negative feedbacks.
Positive usability findings:
Easy and fast registration process
Easy navigation in the app
“That’s nice it’s possible to book an appointment right from the searching list”
Book and reschedule buttons always work without any problems. Users could easily found it.
“Nice design”
Negative usability findings:
We chose the most common issues, and changed the interface based on the feedback and our expert knowledge directly to our high fidelity prototype.
High Fidelity Prototype
A high-fidelity wireframe is a realistic prototype that closely resembles the final design of a project. Using the feedback received from the low-fidelity test, we updated the design to fix the previous issues or confusion.
We followed the Material Design guidelines (Google) for the designing of high-fidelity wireframes. The entire design and prototype were done in Figma. The goal was to create a product that looks close to the final product with pixel-perfect elements. The users will be able to click around to test all the essential features for the functioning of the application. The prototype supports booking appointments, filtering doctors, rescheduling appointments, canceling appointments, and many more.
The high-fidelity prototype enabled us to test the application at a much more detailed level, which resembled a real-life scenario. It helped in identifying any final issues that might have been missed in the first user test.
Onboarding screen
Home screen
Map view of doctors nearby
My appointments
Booking an appointment
My profile
Usability Testing
The goal of the test was to evaluate how well the app meets the main objectives, and check the user behaviour after the iteration of changes. The usability test was conducted as a moderated usability test of the DoctoScan interface created in Figma. Webex was used as the tool for conducting online sessions.
Users were observed while completing the tasks. Their verbal comments, as well as their interaction with the interface, were recorded for later analysis. 2 out of 8 interviews were conducted as in-person tests, while the other 6 interviews were conducted remotely. Each test session lasted between 30 and 40 min, including the time of answering questions.
Selection criteria
Participants should speak English, as the interface is presented in English and had experience with booking an appointment with a doctor.
Furthermore, users shouldn't have taken part in Low-Fi testing to prevent the skew between the results. As users familiar with the app could behave unnaturally due to their previous knowledge about the app.
Participants
8 participants (6 males, 2 females)
24-36 year old
Nationalities: Indian (5), German/American (1), Pakistani (1), Russian (1)
Occupations: Students (3), Designers (2), Data Analyst (1), Lawyer (1), Project manager (1)
Questions
Pre-session questions:
First, what’s your occupation? What do you do all day?
What kind of app do you usually use?
Do you have any favorite apps?
Post-session questions:
What can you say about the app?
What did you like the most about the app?
Is there anything that can be improved?
Do you have any questions?
Test Tasks
Test tasks were chosen based on the main users goals and typical user paths:
Login into the app
Booking an appointment
Adding a note to an appointment
Importing Google Calendar meetings to the app
Rescheduling an appointment
Checking a new message.
Task 1
Create an account (registration)
Task 2
Check the doctors location on a map
Book an appointment with a Family Doctor who speaks English, 1 Dec 15:00
Task 3
Add a note to the appointment
Task 4
Import your appointments from Google Calendar to the DoctoScan app
Task 5
Reschedule an appointment with Christopher Weber from 26 Nov at 9:00 to 26 Nov 11:00.
Task 6
Please check a new message
Results
Based on the results, we can state that users can easily navigate inside the app, and conduct the main tasks. However, there were some minor recommendations that could be found.
Summary
Next steps
Learnings
This project provided valuable hands-on experience in applying UI/UX principles and methodologies to real-world problems, preparing me for future endeavors in the field of usability engineering. Working in a team of three on a project like this helped me learn the importance of effective communication, collaboration, and division of tasks. Each team member brought unique perspectives and skills to the table, enriching the design process. And of course, no project is perfect, we hit a snag, we had our differences, but this never stopped us from arriving a solution which at the end of the day is the best for the user. I’ll carry forward everything i learnt from this project onto my future projects.
"Finding a doctor" button is not perceived as the registration button.
Description: Initially, there was the button with "Finding a doctor" instead of “Get started” text. After users feedback about the confusion, the text was changed.
Before
After
Separate button for “Messages” section is needed.
Description: There was the same button for “Notifications” and “Messages”, so users were confused where to find the message.
Before
After
Lines above "Book" button in the card are disturbing.
Description: There was a division line on a doctor’s list page. Users were confused about the line, so it was moved to make the division between doctors descriptions clear.
Before
After
Brand Guidelines
Brand guidelines are a set of rules and standards that describe how a company should be represented to the rest of the world. Brand guidelines assist businesses in maintaining consistency and showcasing who they are, what they do, and what they stand for.
Logo Design
Having a logo is an integral part of making a brand successful. The right logo says everything without saying a word. A good logo is the foundation of the brand identity. It grabs attention, makes a strong first impression, separates us from the competition, and fosters brand loyalty.
Our logo represents a stethoscope in form of a search, symbolizing the primary feature of the app - search and find doctors.
Brand Colors
Color plays a significant role in determining the success of your brand. It is important because it’s a tangible component of a brand that people notice first and foremost. A color increases brand recognition up to 80%. The purple color is often associated with wisdom, bravery, and uniqueness. It stands apart from the competitors' usual blue or red color.
Primary Color
Accent Color
Black and Grey
Secondary Colors
#6750A4
#F3EDF7
#FF0000
#000000
#C4C4C4
#79747E
#E5E5E5
#C2AAFF
#E8DEF8
Typography & Icons
Most tasks were done easily
Had difficulties navigating because the menu had the name only for the current item
Wants to export the doctor appointment to his calendar app of choice because his entire schedule is there
Wanted the language written on the doctor’s photo
Needed changes to validation marks during registration, as it looks like checkboxes now
Synchronisation icon looks like refresh button
Participant 1
Participant 2
Participant 3
Participant 5
Participant 7
Participant 4
Participant 6
Participant 8
Really liked the one-step registration
Could finish the tasks easily
Didn’t see the map in first attempt, and thought it was a logo (because it was placed on top of the page)
Suggested to move the map icon near the search bar
Struggled initially because the user was confused with the next available date and time
Didn’t face much issues in other tasks
It was easy to get around the app once the user got familiar to the UI
All tasks were done easily
Suggested to place the synchronisation feature inside the profile as well
Expected pre-selected date while rescheduling, not the current date
The google calendar feature was unnoticeable
Suggests more colors would be nice
Liked the overall idea of the app and how it can be useful for a diverse group of people
All the tasks were done easily
Suggested to the change the synchronisation icon
Wanted to buy medicines through app after seeing the advertisements
Wanted to see a confirmation at the end of booking process with all the details to make sure
Suggested to split the booking process into multiple steps and having clear indication of current step
Positives ✨
Room for improvement 📈
It was easy for the users to navigate once they got used to the UI
Overall users had a smooth experience
Messaging & Rescheduling feature was well received
Some icons like synchronisation and maps are confusing
Menu is difficult to navigate only by icons
Highlighting a language that a doctor speaks on his profile picture could be useful
Booking the appointment could be divided into multiple steps because there is no clear indication of what’s filled and what’s not filled
Expanding the app to more regions
Adding more features:
video consultation
symptom checker
analytical tools
buying medications
Application
for doctors with appointment managment features
