Categories
Case Studies Mobile

A mobile app for Ward Clerks at a medical facility — Medesk Case Study

View the original post

A mobile app for Ward Clerks at a medical facility — Medesk Case Study

Background:

Receptionists have clerical and administrative responsibilities and play an important role in the overall efficiency of a healthcare facility. They juggle several hospital duties daily and to help them perform those duties more efficiently a mobile app concept is been introduced.

Objective:

  • Help the ward clerks track end to end the patient journey in the hospital
  • Provide quick steps to book and view appointments
  • Create a quick prompt to handle emergency cases

Assumptions Made:

  • A unique ID is given to every ward clerk (receptionist)
  • Doctors also Checks In and Checks out using the app
  • Doctors share the digital prescription of each patient with the ward clerk
  • There is already an app for civilians to book appointments and for doctors to view those appointments and to manage their schedules.

Total Time Utilised

It took me around 3 weeks to research, ideate, iterate, and reach my visual solution.

Tools Used

Sketch, Invison Freehand, Figma

RESEARCH

Did online research to find out what are the key responsibilities of the receptionists at a medical facility.

Tried to find out the answers to these questions:

  • What are my user's main responsibilities?
  • How is their work environment?
  • How does their particular day at the clinic look like?

Key Insights gathered in online research

  • Ward clerks juggle several duties on a daily basis.
  • Their main tasks are:
  1. Process Intake and Discharge
  2. Organize, Update Medical Records
  3. Arrange for laboratory or other diagnostic services
  4. Handle emergency cases
  • Ward clerks work on different shifts like morning, nights, and evening
  • They organize post-consultation tasks like billing, suggesting medical shops, etc.

Link to the detailed document of online research:

https://docs.google.com/document/d/1ZWh8PgPAUfj409Fzr055qLajyhUPCCLExW-0LSo2vbA/edit?usp=sharing

USER PERSONA

Understanding the User

After online research, I tried to understand why users need this app. What are their goals and pain points?

EMPATHY MAP

Created the map to visualize and articulate what I know about a particular type of user. It also

1) Created a shared understanding of user needs

2) Aided in decision making

CUSTOMER JOURNEY MAP

I tried to understand and map the journey of a ward clerk in a clinic.

  • I visualized the users experience while using the app
  • Generated ideas based on each step
  • Found problem and its possible solution
Customer Journey Map

Key Takeaways

  • Tracking patients on the home screen
  • Quick and easy way to create appointments
  • Quick recommendations
  • Search option
  • Print and share details
  • Offers in partnered shops and diagnostic center

DESIGN HYPOTHESIS

BRAINSTORMING IDEAS

I brainstormed different possible ideas and tried to reason out which one works best for this problem.

Variation 1:

  • The main elements are the 4 tabs for upcoming appointments, creating an appointment, emergency cases, and medicine and diagnosis.
  • Search tab for finding the details of patients and their past and upcoming appointments
  • Notification and overflow menu for other application options beyond those included in the user interface of the application.

This variation has all the main features on the home page and is not overwhelmed by a lot of information so the user will have a clear-cut understanding.

Variation 2:

  • The bottom navigation bar will have appointments, patients, doctors, and medicine options and by clicking on each option a dedicated detailed page will open.
  • Search tab for finding the details of patients and their past and upcoming appointments
  • Banners of advertisements and offers on the homepage.
  • Notification and overflow menu for other application options beyond those included in the user interface of the application.

This variation also has all the main features on the home page but it has more information as compared to the first one. It is a more detailed version of the app and could be done later when we have more features to cater.

Variation 3:

  • It directly opens the upcoming appointment page and shows the details of the patients.
  • FAB for creating new appointments and for other features
  • Notification and overflow menu for other application options beyond those included in the user interface of the application.

I decided to continue with variation 3 as its serving a direct purpose to my main goal which is to track patients inside the clinic.

INFORMATION ARCHITECTURE

After choosing the variation I mapped the key screens of the app to have a clear picture while designing the wireframes

Main Categories of Home Page are:

  • Create Appointments
  • Upcoming Appointment
  • Emergency Case
  • Medicine and Diagnosis ( decided later)
  • Search
Information Architecture

Different Use Cases

As a ward clerk will be opening the app for different purposes, I tried to assume what could be the probable situations he could face while handling the patients in a clinic/hospital.

This use case is only for the “UPCOMING APPOINTMENT” category

Use Cases

WIREFRAMING

Low-fidelity wireframes
  • Made Low-fidelity prototypes for quick concepts.
  • Initial blueprints of the app focused on key purpose and functionality
  • Included the most basic content and visuals.
  • Helped to map out the shell of the interface, its screens, and basic information architecture.
  • Rather than sketching on paper, kicked off with very low fidelity wireframes in the sketch.

WIREFLOW 1 — UPCOMING APPOINTMENT

All Appointments

WIREFLOW 2— BOOK AN APPOINTMENT

Book Appointment

WIREFLOW 3 — EMERGENCY CASE

Emergency Case

WIREFLOW 4 — CHECK-IN AND CHECK-OUT

Check-In and Check Out

After designing the first cut of the wireframes I did a quick analysis of the experience to check everything has fallen into place.

Features I missed:

  • Patients Current Appointment Status ( Checked In — Checked Out — Billing )

Better Ideas:

  • Show All Appointments on the home screen
  • Show Checked In Users in a different section
  • Emergency Cases — Rather than sending prompt one can simply call the doctor

Final Designs

  1. The onboarding process includes three flash screens, enter mobile number, enter OTP and enter user details.
Onboarding Process

2. The home screen includes all appointments, checked in appointments, search icon, calendar icon, navigation drawer, and a FAB.

Home Screen

3. Book Appointment flow includes booking an appointment through FAB, entering patient details, and getting an appointment booked message.

Book Appointments

4. Check In and Check Out flow includes pop-ups that have all the patient's details and prescription.

Check In — Check Out

5. Emergency Case flow includes calling the doctor through FAB.

Emergency Case

5. Swipe Feature to Delete or Delay the appointment.

Swipe Feature
Final Screens

Conclusion

Based on the different research methodologies I did my brainstorming and created wireframes. In wire flow, I tried to cover different scenarios like upcoming appointments, check-in and out, appointment booking, and emergency cases. I created the final design which was solving the purpose of managing all the patients in the app itself.

What I am doing next?

  • Usability test of the prototype with users
  • Research about possible competitors
  • Select participants from different areas
  • Better UI

Learnings

  • This project made me empathize more with the ward clerks, as earlier I didn’t know they have so many duties on a daily basis.
  • It gave me an understanding of how challenging things could be even when designing for an app with fewer features.
  • I also enhanced my understanding of the broad spectrum of design, thinking about the limitations, and asking the right questions.

Feel free to provide constructive feedback.

Connect with me on:

Linkedin | Website | Instagram

Mail me at:

arushinayan00@gmail.com


A mobile app for Ward Clerks at a medical facility — Medesk Case Study was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.