Graduation Project: All-In-One Patient View

Special thanks to Dr.Bartram from SFU, Shaolin Tsui, the manager of user experience and visual design system optimization at Fraser Health, and of course my wonderful teammate Donny Wu!

Design Problem

The current MediTech and UCI system use tabs and windows where every different type of information is located in different tabs, which is a pain point for the physician. When the physician in the hospital or the emergency room needs to find something, they will have to search within among the tabs and there is no way to compare data, resulting in large amounts of time being wasted due to the lack of flow, which one problem that Fraser Health is trying to improve. In addition, this increases the room for error. In addition, the physician will also have a hard time understanding the patient journey, which is a large collection of records including laboratory tests, imaging and so on. With the existing software, there is no way the physician can simultaneously look that the specific record existing at different tabs which can result in the physician forgetting what they were searching for. Most importantly, the patient records are being accessed by many doctors and it is hard for an individual doctor to see the patient’s big picture as they are handed off from doctor to doctor as they may only see results from their niche areas.

Quick Sample

Click here to view the actual prototype

Here is a 2 minute pitch video for the project.

Week 3/4


The primary user is the physicians of hospitals and emergency rooms but users may include nurses, technicians, and other hospital staff.


The stakeholders for this project include Fraser Health decision-makers because they will decide whether this new patient view will be implemented, the design team of Fraser Health since they have the power to persuade the policy makes of Fraser Health on whether they should adapt to this new system or not, and the users.

Initial Research

The first step was to look at existing patient views and try to identify problems with them. Currently, there already exist many Patient All-In-One Views where physicians can view patient data. The data includes lab results, medical imaging reports, clinical notes, and so on. The current existing ones are MyChart and MediTech.

Another example that we have looked at is the Patient Management System and OPD+ Clinic Software for Consulting Doctors, Physician, Family Physician, and General Practitioner. Currently, the other two are not used by Fraser Health, but they serve as ideas to inspire us to innovate new designs.

Through our visits to different physicians, we have noticed that some are old fashioned, using pen and paper to record data, while others use the computer. According to research from the University of Kansas and Central Florida, a uniform Electronic Medical Record (or EMR) can significantly reduce medical errors and cut healthcare costs, as physician data tend to be written in a traditional manner while nurses or other personnel enter data into an information system. A decade later, similar research was also conducted on the electronic documentation system stating that the quality of free-text subsections was significantly higher in the electronic vs paper notes with a score of 93 vs 78 with 100 being the highest score, assessed by the QNOTE instrument. Aside from accuracy, using paper will result in difficulties finding through all the data as papers can be lost, handwriting might now be readable by other doctors, and so on, increasing the complication for the physician. Through research done by Fraser Health and Shaolin, they have already identified that a Patient All-In-One View is necessary for the physician so they can relate all the information related to the patient on a single page to understand the entire patient episode of care at a glance.

Week 5/6

Finalized Proposed Solution

The proposed solution is an all-in-one patient dashboard, designed for physicians in hospitals including the emergency room, to help them find all relevant information regarding the patient. We have designed a timeline which allows the physicians to view a patient’s journey at any given point in time in order to understand what previous physicians based their decisions on. We have also implemented a workspace which allows the physicians to view results from multiple tabs to fully understand the patient’s journey. More importantly, we have added a notes function which allow physicians to communicate with each other and help them understand the patient’s big picture as the patient’s journey is being handed off from one doctor to another.

It would be nice for this dashboard to provide details such as background information, allergies, scans and so on that is easy to access. However, the main focus will be four categories being Clinical Documents, Laboratory, Imaging and Encounters, which are the most commonly searched categories by physicians in hospitals. This should be able to assuage the physician’s pain point of having to look through multiple tabs on MediTech. Our dashboard allows the physicians to view the records in detail, add and view notes of a record, build a workspace encompassing the records of their selection, search for a particular record with filters, name or time period, travel through time of the patient’s journey and view the records from that perspective, and highlight abnormal results.

Initial Sketches

Right after researching existing software and learning their strength and weaknesses, we began by generating sketches just to get an idea of which components exist in patient dashboards. Through sketching, not only do we have the opportunity to ideate, but we will have the ability to observe existing software in depth. Sketching has been done during every single phase of this project, so it will only be mentioned here to reduce redundancy.

Researching Fraser Health’s software, UCI

Fortunately, we were given screenshots on software that Fraser Health is developing, the UCI which aims to solve a similar problem. Similar to what we have done with sample patient dashboards, we were thinking of parts that we need to look at.

Three Patient Stories

Fraser Health has provided us with three patient stories, being scenarios of the 3 most common cases for patients to enter into the Emergency Room. These three cases contain their entire treatment process including basic information and room transfers, appointments, lab tests and surgeries. In other words, it is the journey of the patient. The data is organized by categories, and within each category, it is sorted by date.

Compiling Patient Data

With the temporal data, we have separated it from the categories and sorted everything by date. For the Meditech Order Entry section, being lab tests, we have sorted it by service date which means when the tests are actually taken, rather than the order date, which is when the physicians delegate the tasks to technicians or specialists. For the location data, we have sorted the data by the start date. Moreover, for the Meditech Surgeries section, we have sorted the data by the Patient in Room time. This was done using Google Sheets.

Next, we have used the countif function to determine which lab tests are the most common, and rank the tests in order depending on the number of times it was done. After confirming with Fraser Health, the tests that were conducted most frequently are most often easy and use tests to conduct or that results vary quickly over time.

Building a Story

One task we have done with the compiled patient data was building a story. We constructed a story in words that conveys the process that the patient goes through from when they are first admitted to the ER to when they are discharged. The purpose of this story is to provide us with a sense of what the patient goes through, how complicated the process is, in what order are the tasks accomplished, are there tasks that are repetitive, and so on. With those insights gained, we can better understand what a dashboard needs to encompass.

Week 7/8

Building a JSON File

JSON file
This is an example of a JSON file that we have built.

Loading the data as a JSON file was the next step. We have created an array which contains different symptoms including abdominal pain, chest pain, and shortness of breath, which are objects. Within those objects, we have data for name, and more arrays being lab tests, admissions and so on. Within each array will be objects which contain even more information. That is our data hierarchy.

Researching Cheat Sheets to Identify Most Useful Categories.

We have received a total of 28 cheat sheets for different types of physicians and within each cheat sheet, it contains categories of data that they are frequently searching for. We have manually typed all the categories of data and questions asked into Google Sheets, resulting in one sheet listing all the categories and another listing all the questions asked (see Appendix 4 and 5 in the final report). Similar to what we have done to find the most common tests, we have used the countif function to find the most searched categories by ranking them in order of the count, and have done the same for the questions asked.

After looking at the data, we have decided to focus on the top 4 sorted categories which are clinical documents, laboratory, imaging, and encounters. We have selected these three and only three because the number of times they occurred in the cheat sheets is significantly higher than the one in fourth place being encounters.

Within each category, we have selected three most frequently asked questions to address focus on but we are trying to satisfy each question. For the clinical documents, the three most frequently asked questions are “how do I find documents from a specific hospital?”, “how do I find documents from VCH (Vancouver Coastal Health), PHSA (Provincial Health Services Authority) & PHC (Providence Health Care)?”, and “how do I view documents from VCH, PHSA & PHC?”. The three most asked questions for the laboratory category are “how do I find a patient’s recent lab results?”, “how do I find lab results From LifeLabs for BC Bio?” and “how do I search for specific lab results?” As for the imaging category, the most asked questions are “how do I find diagnostic images and reports?”, “how do I find the most recent CT scans?”, and “how do I find the most recent diagnostic imaging?”. As for encounters, the three most asked questions are “how do I see if a patient receives community care?”, how do I view a patient’s health care encounters?” and “how do I see if my client has been discharged?”. Moving forwards, we will keep these 4 categories and these questions in mind while we are working on a prototype.

Building a Flow Diagram

After researching the cheat sheets, we have tried to build a prototype; however, we realized that developing a flow diagram prior would be effective in helping us understand what types of information do the physician need at different stages. For example, a surgeon would need different information than a physician who is looking after the patient.

With the patient data that we have compiled and sorted by date; we have further looked at the data to break it down into categories. For example, tests that were taken during the day of the surgery should be critical information which decides whether surgery is necessary or tests that have been taken the day the patient is admitted should be useful for the admissions team. Once we have separated the patients’ records into sections, we have developed a flow diagram to help us understand the overall process (see Appendix 3 in the final report). In addition to the spreadsheet which contains the details of each phase, we can better understand what the different types of physicians will need during different phases.

Week 9/10

Developing the Wireframe

An example of a wireframe.

The next biggest step was creating wireframes because this will allow us to show Shaolin, from Fraser Health, our ideas rather than simply communicating them verbally which could be misleading. We have created a few wireframes with different ideas visualizing the same dataset. Once we have shown them to Shaolin, he told us points that he believed were really promising and parts that we should change. With the feedback we have received from Shaolin, we have combined the good points from our different wireframes and developed a better wireframe which we will program. Upon creating that wireframe, we have also made huge modifications so the final implementation is slightly different.

Building a Flowchart to Ensure We Incorporated Most Asked Questions

As we are building our finalized dashboard, we have also generated a flow chart. This flowchart provides answers for the most frequently asked questions which we have sorted from the Fraser Health Cheat Sheet documents for physicians. For example, if the question is how to find lab results, the flow chart will walk the physician through the steps necessary to find what they are looking for. By completing this chart, we know that we have addressed the pain points of the physicians.

User Testing with Shaolin and his Team at Fraser Health

Week 11/12

Final Prototype with Functionalities

A sample image of the final prototype.

Our final Prototype has a few key functions which will assuage the physicians’ pain points on retrieving records (lab tests, imaging, and others): view the records in detail, add and view notes of a record, build a workspace encompassing the records of their selection, search for a particular record with filters, name or time period, travel through time of the patient’s journey and view the records from that perspective, and highlight abnormal results.

View Records in Detail -> Right-click a record to select it and details can be viewed in the details tab. The details tab will show the number of times that a particular task has been done and all the past results. For example, if it is a complete blood count, it will show the number of times this test was done and the past results of that test.

Adding Notes -> In order to read or write notes, the record must be selected first by using the right mouse button. Notes can be viewed or added in the details tab or on the left end side. To commit the notes, press shift and enter.

Building a Workspace -> To build a workspace, CTRL-click and select the records that the physicians want to view. They may view results from different categories. For example, they can view an image and a lab test.

Search and Filter -> To find a particular test, the physician can use the search and filter function to find the record. Searching uses fuzzy search so if the physician misspelled the word, they can still find the record they are looking for. If they do not know the name of the record but know which stage of the patient journey or date of when the record is created, they can use the timeline to scroll to the appropriate date.

Travel Through Patient Journey -> The physician can use the timeline to travel through the patient journey and land at a specific event or time period. Once landed, they experience what data are available to the physicians at that particular time and understand what lead to the decisions that they have made.

Instantly Identify Abnormal Results -> Abnormal results will have a red highlight to the record and red font size for the data. This will allow the physician to easily sport any abnormal results and instantly bring them to their attention.


Under intense time constraints, and a period of natural disasters (Fraser Health is occupied with the Covid-19 Epidemic), we are extremely successful in addressing the pain points of physicians on the current MediTech system and innovate a new dashboard which assuages them. This prototype allows the physician to view the records in detail, add and view notes of a record, build a workspace encompassing the records of their selection, search for a particular record with filters, name or time period, travel through time of the patient’s journey and view the records from that perspective, and highlight abnormal results. Most importantly, it allows any physician to easily understand the chaotic patient journey consisting of laboratory tests, imaging, and so forth through a click of a button. By using our timeline, the physician can easily understand the patient at a chosen time. Moreover, they can select important results that are laid out for them and view them simultaneously in the workspace tab which is not present in MediTech or the UCI software. With the latter software, the physician has to constantly look through tabs and windows which is more time consuming and more probable of error because they may forget what they were looking for. Lastly, our prototype allows physicians to record notes next to any results of the patients’ journey, which can aid the next physicians’ understanding as they are trying to understand the big picture of the patient.

Even though we were unable to get physician time due to the epidemic outbreak, we were able to get four experts working on system operation from Fraser Health to view our prototype and provide suggestions (see Appendix 7 in the Final Report). Considering that the feedbacks received came from expert designers, the majority of the feedback we received were about how this software will help physicians perform their tasks, but more about design principles. For example, User 2 mentioned about hierarchy between title and result and Gestalt principles for the note adding section, and User 4 mentioned contrast and white space (see Appendix 7). Ironically, User 1 mentioned that he wants us to implement windows rather than tabs, which was the opposite of the purpose of this prototype which replaces windows with tabs; however, User 4 really liked the idea of tabs (see Appendix 4). Due to limited time, we are only able to incorporate a few while the majority of them are for future improvements such as design issues.

As future directions, we will implement the improvements from the design perspective to our prototype to provide it with an even more pleasing aesthetical look. Most importantly, we will aim to get feedback from actual physicians because how they will interact with our prototype will be completely different compared to the design team. By getting their feedback, we can improve the user interaction portion of our project which will invigorate our prototype.

Download Files

Initial Presentation Slides PDF

Project Proposal PDF

Final Presentation Slides PDF

Final Report PDF