Hospital CRM Platform

Description

The Hospital CRM enables employees to easily check statistics, book patient appointments, manage the patient database, view payment history, and communicate with customers, among other functionalities.

In my design choices, I aimed to create an interface that is easy to use, understand, and navigate, while also ensuring it is visually appealing and consistent.

Information Architecture

The Information Architecture shows the structure and organization of the platform, as well as the flow and relationship between different sections and subcategories. IA is divided to Dashboard, Patients, Appointments, Payments, Messages, Doctors, and Employees Sections. Overall, IA aims to be intuitive to navigate.

Due to the specifics of the task, the research required for designing the Information Architecture (IA) of the project was based on case studies of successful IA implementations and existing case studies published on Behance. Additionally, the IA was crafted based on best practices from Smashing Magazine's weblog.

User Flow (Home Page - Dashboard)

User flow starts with the login screen. In case the employee has just started working at the hospital, they should request account credentials from the employer, as sign up is not allowed.

After entering credentials, the employee is navigated to the home section, which is the Dashboard. Here, the user can see overall statistics, access widgets (random fact: initially, I wanted to make widgets editable, meaning you could add new widgets and remove unnecessary ones based on needs, but because of time constraints, this idea was left out), and track appointments. The employee can book new appointments and change the status of existing ones. They can also add new appointments, and if it's for an existing patient, the data fills out automatically; otherwise, the data is entered manually. After that, a confirmation window pops up asking to verify the data, and that's it - the appointment has been booked.

User Flow (Patients Page)

Here, employees can access the patients' data table to view active, new, and non-active patients, among other things. Additionally, if a new patient arrives for an appointment but is not in our database, we can easily add them by clicking on their name and filling out additional data. For existing patients, by clicking on their name, we can navigate to the patient details page where we can access information specific to them, such as their last visits, payment history, and doctor's notes. We can also add new patients by clicking the "New Patient" button and filling out the required data.

Moodboard

Lo-Fi Wireframes

The Lo-Fi wireframes provide a rough outline of the different screens and sections of the platform, including the home page dashboard and the patients' page. These wireframes help to visualize the overall structure and flow of the application, allowing for early feedback and iteration before moving on to more detailed designs.

These wireframes are based on both direct and indirect research, meaning that not only were similar solutions observed, but also in unrelated areas, namely CRM dashboards from other domains and customer support platforms.

Typography

Inter has a clean and modern feel without being overly bold or trendy. This makes it suitable for a wide range of design projects. Moreover, the lowercase letters are tall and clear, making it easy to read text on screens, especially at smaller sizes.

Colors

Hi-Fi Wireframes: Dashboard Page

The platform design has been heavily influenced by the innovative concepts and practices employed by Pasha Holding. Quick widgets provide employees with numerical statistics, while a grouped column chart allows them to view patients within a week. The appointments widget helps employees observe and efficiently modify appointment statuses, as well as add new appointments.

New Appointment Pop-Up

When a patient calls our hospital, we initially only require basic information because we don't know if they will actually come to the hospital. If the patient does arrive, we will fill in the remaining half of the data (ID-related information) when we add the patient to the "Patients" database.

Appointment Confirmation

Before confirming the appointment, check for any mistakes. Even if an appointment with incorrect data is confirmed, it can be easily edited by pressing the "kabab" button in the appointments list widget.

Appointment Created Toast

A small toast to assure the user that the appointment has been created

Patients List

This section displays a list of patients. Here, employees can search for specific patients, filter and sort them based on different criteria, and add new ones, among other actions. By clicking on a patient's name, we navigate to the Patient Details page, which contains specific data about the patient.