CS3240 Individual Design Exercise
Following article describe the process taken in designing an Electronic Medical Dashboard for an individual design exercise as part of CS3240 Interaction Design. I have documented on how I explored the problem, design solution iteration and justification of my design decisions.
- User research and market research
- Main Features (User Task)
- Design Decision
- Detailed walkthrough of user workflow
- Individual Patient Details Screen
a. Patient Information
c. Medical History
e. Lab Results
f. Scan Results
g. User Profile & Settings
- Hifi Figma Prototype
Although user research is not part the requirement, I conducted a small scaled user research and market research so that I know where to start from.
I conducted a small user research on my peers who are studying in Nursing and Medicine. Their experience from hospital attachments help me tremendously in designing the solution. In addition, I also looked into a few current and existing solutions in the market; namely the Healthcare Technology such as the followings:
I have to keep in mind that although fanciful designs are always sought after in the field of UI/UX. It might not be as appreciated in medical fields where users will focus on functionalities, simplicity and convenience.
After the research and considering Schneiderman’s 8 Golden Rules, I came up with the detailed Lofi designed. I made the decision to spend more time Lofi design as the solution will be focused on functionalities and simplicities anyway so if given a choice, it seems logical to prioritise the Lofi over the Hifi prototype.
Lofi link(done with balsamiq): https://balsamiq.cloud/say2f3r/pkl0owv
Hifo link(done with figma): https://www.figma.com/file/IuIllWi5EHAtTuxqamjHwf/Individual-Design-Exercise?node-id=43%3A1348
Main Features (User Task)
Main features of this dashboard allows users to track and update patients information just as stated in the task requirement.
In addition, another feature that seems to be lacking in most of the current solutions is the customisable dashboard. Doctors, nurses and healthcare managers working in hospital often have different wards, different floors or different patients under their duty. Having a customised dashboard that allows quick access to the patients under their duty would greatly increase the convenience and saves time as they would not need to go through the entire process of searching for a particular patient.
- Dashboard to access patients medical records
- Dashboard to manage patients medical records
- Dashboard to easily track a list of selected patients
User tasks 1 and 2 were covered by search function while user task 3 is covered by the customised dashboard.
Fig 2 shows one of the screens in the Lofi prototype. The colour scheme includes grey, white and light blue. This was a trend seen from all the current solutions in the market. The design solution targeted platforms are tablets or desktops. Mobile phone applications will not be optimal in the context of hospital where larger screen means more informations can be viewed at once and hence, mobile phone applications might not be suitable.
Detailed walkthrough of user workflow
Users will be at login page upon start up. Upon logging in, user will be at the customised dashboard. Currently, there is no patient added on the customised dashboard.
Fig 4. shows a selection menu that could be accessed the hamburger menu on the top left corner. It shows the two main functionalities Search function and Customised Dashboard.
Users can add patients after searching for a patient from a search window. Search window can be accessed by clicking on the “Add patient icon” on the customised dashboard or “Search” function in main menu selection.
In the search window (Fig 5), users could search for patients via NRIC, Name or locations (Wards No). These were mentioned as one of the most useful search functions by my peers in Healthcare.
Users could view the full medical information of the patient by clicking on the “Right arrow” icon or add patient to the customised dashboard by clicking on “Add patient” icon.
Upon adding the patient, he or she will appear on the customised dashboard as shown in Fig 6. It will also displays the vital information that the nurses and doctors need to constantly monitor. It includes personal details such as name and NRIC, vital signs such as temperature, pulse rate, breathing, BP, SP02, medication and medicine allergies if there is any. The vital signs displayed would be synced real time to monitoring system hooked up to the patient.
In the following section, we will explore the different tabs under individual patient record. Namely, patient information, visits, medical history, immunisation, lab results and scan results.
Individual Patient Information Screens
Clicking on the “Right arrow” icon would lead the user to individual patient medical record shown in Fig 7. In this screen, there are multiple tabs for the users to access different information regarding the patients and there is also functionalities for the users to update the information. Fig 8 to 13 shows screens for different tabs and functionalities implemented on each screen.
Users can toggle between summary view and detailed view by expanding each of the visit card.
A Hifi prototype was also done to demonstrate some of the interactions however, most of the functionalities and details are covered and explained in Lofi prototype instead.
Users can also submit new visit details by clicking on the “+” icon on the bottom right corner in Fig 8.1.
There is also a separate tab for the medical history. You may wonder where is this not together with the visit note, well, not all consultations or visits will lead to a diagnosis. Therefore, a separate medical history tab was created to allow users to have faster access to the patient’s medical history.
New diagnosis could be submitted by clicking on the “+” on the bottom right hand corner of the screen. The form rendered is similar to that of Fig 8.3
Users could access patient immunisation history under “Immunisation” tab. The data are specially presented in the chronological table format to allow nurses and healthcare workers to check vaccination expiry status. As vaccination needs to follow the dosage cycles, this format of presentation will be easier than to read than in any other format. The date chosen also follows the most common vaccination dosage cycle.
Users can click on any of the row to register the vaccination given to the patient. There is a field “Vaccine ID” in consideration that, in most of the hospitals and clinics, you are required to key in the vaccine ID to track for vaccines stocks or if there is any complications with the patients. Thus, the field was added in with consideration of this requirement.
Lab results are shown in a chronological table format to allow users analyse the trends easily if required when studying a patient history. A chronological order is deployed so that users can simply look at the latest results and ignore the earlier data if they wish. By clicking on “+” button beside each row, users can add in new lab results as shown in Fig 11.2 below.
Scan results such as X-rays or MRI scans can be accessed under “Scan Results” tab. On this screen, user could access the full details via the “down arrow” to expand each of the card as shown in Fig 12.2 below. New scan results can be uploaded by clicking the “+” on the bottom right corner. However, the interface is not covered in this design article as it depends on the external software that will be uploading the scan images.
User Profile & Settings
In addition to all the patient related screens, the last two screens to be covered are the User Profile and Settings. These two screens, or rather overlays can be accessed by clicking on the icons located on the top right hand corner of the screen.
Under user profile, user can check whether they are logged in as themselves. This is because patients information are sensitive and the records system has to ensure integrity. As such, editing or uploading of patient data will be monitored closely and users will have to play a part to ensure that they are only using their rightful accounts.
Under settings, there is “settings” where users could potentially adjust the font size or colour theme, however, it is not explored in this article. Lastly, there is a log out button where users can log out of the sessions after they have finished using the dashboard.
Hifi Figma Prototype
A hifi Figma prototype can be found in this link. https://www.figma.com/file/IuIllWi5EHAtTuxqamjHwf/Individual-Design-Exercise?node-id=43%3A1348
The Hifi prototype tries to animate the user interaction with the dashboard however, it is not as complete as Lofi prototype as its purpose is merely to illustrate the interaction, the graphics and colour scheme.
Throughout the process, the 8 design principle were followed as closely as possible. However, due to the short time frame of this process, some principles might not be implemented or elaborated as well as others.