UI/UX Study Case of Hospital Queue Mobile App Called “Medira App”
The impact of digital platforms has been massive during the pandemic situation. Unfortunately, it hasn’t been practically used in many sectors. After we went through 2020, we noticed a couple of things that are urgent and really need some efficiency, improvements, and help. Because of some reasons those urgent things haven’t been given any solutions. One of them is the case that we brought today in our UI/UX project led by Summer Program 2021 of Islamic State University of Malang.
The case we chose came from our own experience. As we live here in Indonesia, we struggle a lot with the queue system in the public hospital. A sick person is expected to wait for 1 hour or more, sitting in the hospital waiting room, all that just for a 20 minutes check-up. It has gotten worse since the pandemic happened back in 2020. Whereas, those ill people are in need of medical help but also in need of keeping themselves safe from the virus by practicing social distancing.
So, we are trying to make a realistic solution in that case by making a UI/UX design of a mobile app called Medira (Longer Version : Medical Rakyat/Citizens Medical Help App) that hopefully will have a real good impact on the problem.
The Team
Lailatul Fadilah | 21, Amila Fadhila, Muhammad Faiz Alfarros, Firdausi Rohmah, Fauliarahma.
Problem
The current pandemic has changed general activities in various fields, especially the health sector. Health is currently very influential for the community, but the existing facilities in Indonesia are still lacking.
Hospitals are currently very much needed. Many people come to the hospital because of their condition. But many people are also worried because of the large number of people gathered at the hospital, especially when people are queuing for treatment. The following are problems that arise due to hospital queues during this pandemic.
- Hospital queues in Indonesia are mostly too long, and the queues are unpredictable in terms of time.
- During the pandemic, social distancing should not be carried out and not assembled in the same room.
- There is no maximum queuing limit for patients in some hospitals
- Sick people spend a lot of time getting a handler because of the long queues.
Therefore, we created an application to facilitate queues at the hospital.
Design Thinking
We used design thinking as the design method. It consists of a few steps that will be explained below.
Empathize
This is part of the steps where we are reaching out to the potential targeted users and observing their behaviors and feelings about the situation and the idea of the app.
We spread google form that contains several questions to some people. We have 20 people respond to it. Here are the results.
50% of the respondents noticed the same thing about the case
70% of the respondents experienced waiting for hours in the hospital
60% of the respondents said averagely, they have to wait for more than 1 hour
95% of the respondents agree that it will be very helpful for them if the Medira App is made
From the app they expected 1) to be notified if their time is coming, 2) able to take queue number from home, 3) able to look up for the hospital that has the least queue line at the moment.
As additional questions we asked two more questions related to their bad experiences while using mobile apps and feature suggestions for Medira App. Some of them mentioned some things such as laggy, error, signal and other technical problems to the first question.
The interesting thing about the next question is… some people actually responded with genius ideas. Those are :
- QR Code for the queue ticket,
- Queue prediction and tracker,
- Notification for when the queue is less than 5
After we analyze the questionnaire results. We made an Empathy Map to group the answers and to understand them better.
Define
The second step is Define. In this step, we analyzed the information that has been gathered through Empathize. This step is very helpful in solving the users’ problems since we can find the key problem. We are expected to define the user scenarios, user personas, and user journey map as the results of this step. Since we have two interviewed users, here the parts will be divided into two. First, we will show the Define result of Septafani. After that you can see Mrs.Fitri’s.
These are the Define results such as User Scenario, User Persona, and User Journey Map of Septafani.
The Define results of Mrs. Fitri will be shown in the following pictures.
Ideate
Ideate is the step to develop some ideas related to the app through Brainstorming. All ideas will be gathered to solve some problems based on the Define results.
In this step, we collected some ideas from our team members that can be used to solve the users’ problems. We determined the problem statement based on the Define results that we got from targeted users, Septafani and Mrs. Fitri. Then, each member of our team submitted their ideas about the app’s features according to the problem statement.
After that, we sorted out the submitted ideas into two categories, Features and Socialization. We discussed which idea would be the main feature of our app. Three ideas were chosen to be the most suitable features for the app :
- Searching features for the nearest hospital or hospital with the least queue (2.1)
- Queue registration feature (3.2)
- Queue’s notification feature (4.1)
Then we sorted them from the least suitable (Rank 3) to the most suitable idea (Rank 1). And after some discussion, we determined that the idea number 3.2, queue registration feature, as the chosen idea, would be the main feature of our app.
As for the next step, we developed User Flow and Sitemap as the follow up action of the Ideate step.
User Flow is the path that a user will follow while using our app through the interface to complete a task. User Flow helps in understanding how the system interacts with user behavior. Here is the User Flow of our app.
Site Map is like a table of content of the app. It contains some important information such as features about our app. And here is the Site Map of our app.
Prototype
What we did first in this step was creating the Low-Fidelity (Wireframes). It is used as the base and the framework for the design as a whole. It shows the general image of our app, such as button, navigation, text, etc.
Then, what we did next was creating the High-Fidelity (Mockups). It is basically a visual design of our app, in much more detail. We added some elements such as colors, pictures, icons, in our app’s design. High-Fi Prototype (Mockups) actually defines the interactions between elements of each page in our app. It also shows the users about how the app runs generally.
We used Figma to create the prototype of our app as you can see here.
Test
For this step, we used the Maze website to gather feedback from our users. There are 10 blocks in our testing form, with 9 missions and 1 opinion scale :
- Onboarding
- Registration and Login
- Searching for Hospital
- Calling Hospital
- Hospital Queue Registration
- Notification
- Queue Code’s Detail
- Hospital Service Rating
- Profile
- Users’ Opinion about The App
These are the results of our app’s testing from users :
- Onboarding
2. Registration and Login
3. Searching for Hospital
4. Calling Hospital
5. Hospital Queue Registration
6. Notification
7. Queue Code’s Detail
8. Hospital Service Rating
9. Profile
10. Users’ Opinion about The App
Conclusion
So, that was our journey creating the protoype of Medira app.
From the whole design thinking process of making Medira App, we conclude that this app already has the features that our targeted users wanted. Those are QR Code feature, Nearest hospital tracker feature, Queue notification feature, and Queue registration feature. We also added other side-features such as location map, screen boarding, etc. From the ideate process, we agreed to make the Queue Registration feature as Medira’s main feature, that’s why it is shown in the main page of Medira App. But the testing hasn’t given us the best results. From 16 testers, only 10 testers finished the missions. And the final result said that only 50% of them agreed that the ux experience of Medira is quite friendly.
What we learn from this process is designing and creating the prototype of an app is so challenging yet so much fun. We are so thankful to all of our friends and mentors who help us in this process. We will be very honored to receive opinions and suggestions about our app. Surely we still need to improve our skill in order to get a better result in the future project.