Document Manager
Allowing staff at St. Paul's Hospital in Vancouver to manage and send informational materials to patients
Responsible for:
Ideation, UI, UX, User Testing, Wireframes, Supervision of development team
Tools:
Sketch, Pen & Paper
THE PROBLEM
Many departments at St. Paul's Hospital were looking to transition from printed informational booklets to digital versions.
-
Informational booklets detailed important hospital information such as surgical instructions, general anesthesia info, etc. These booklets were given to patients in person. However, it was often difficult for patients to come in person to receive these printed materials, and the hospital was looking to for ways to send these booklets to patients via digital means.
​
My task was to design a Document Manager platform which allowed users to manage and send informational booklets to patients at St. Paul's Hospital.
Document Manager helps hospital staff easily and efficiently send informational materials to patients.
My goal was to create a platform that was intuitive and accessible, as the hospital staff who would be using this platform varied greatly in age range and comfort level using technology.
My main priorities as I designed this platform were to design in accordance with web accessibility standards, ensure icons and call to action buttons were clear, and ensure all text on coloured backgrounds passed the WebAIM colour and contrast checker.
THE SOLUTION
USER FLOW
How did hospital staff currently manage their informational booklets? How do I re-frame their current methods into a digital workflow?
One of my first steps was to map out the way hospitals currently operated, and determine a workflow for how they would use the Document Manager platform.
In this workflow, MOA stands for Medical Office Assistant, those who work within hospitals to upload and manage informational materials for patients.
After observing MOAs in person at St. Paul's Hospital, and hearing observations from other UX designers on shadowing MOAs at hospitals and clinics, I talked out the daily process of how a MOA performs tasks with my UX team.
From here, we decided that the 3 key actions an MOA would need to perform with their informational booklets on a digital platform were:​
-
Uploading documents
-
Deleting documents (In non-digital terms this also meant throwing away paper documents)
-
Replacing existing documents (In non-digital terms this meant taking all the old copies of an educational material, throwing them away, and replacing them with a newer, more updated version).
LOW FIDELITY WIREFRAME SKETCHES
How can I translate the user flow and user observations into a digital platform for St. Paul's Hospital?
I drew out a series of wireframe sketches for a web Document Manager platform.
USER FEEDBACK
I visited St. Paul's Hospital that week, and asked hospital staff within our partner offices about this design. This was the feedback I received:
-
Seeing the file size was not actually useful.
-
The hospital staff wanted to preview the files.
-
The hospital staff wanted the "upload documents/add new material" area to be separate from the actual Document Manager.
-
The hospital staff were worried about accidentally deleting documents, and wanted either a place to store deleted documents, or a restore function.
FINAL SOLUTION
The final solution was a Document Manager system which included the following functionality to deeply meet user needs:
-
A way to preview informational documents
-
A way to delete informational documents
-
A way to add new informational documents
-
A way to archive informational documents
-
A way to restore informational documents
-
Meet accessibility needs such as colours passing WebAIM's colour and contrast checker, and adding tool tips for icons.
Preview Documents Functionality
Based on user feedback that hospital staff wanted a way to preview their documents, this functionality allowed users to click on a document's name to preview the file.
Tool Tips
I made sure to always show tool-tips for icons, for accessibility purposes. The comfort level hospital staff had with technology varied greatly, and I wanted to make sure actions and icons were as clear and accessible as possible.
Delete Document Functionality
Users had the option to delete documents if they wished.
​
Challenges and Compromises:
Some documents' delete icons are greyed out. After much consulting with the product team, it was decided that documents which had already been sent to patients would not be able to be deleted, because deleting the sent document would mean the patient would no longer have access to the file.
It was a tough call between not showing the "X" icon at all for sent documents, or merely displaying it as greyed out, but in the end we decided to not hide UI, and have the "X" icon show as greyed out instead.
Add New Material
Based on user feedback that hospital staff wanted the "add new material" section to be separate from the rest of the document manager, users can click on the "add new material" button which will take them to a separate page.
​
The reason for making this a coloured call-to-action button was because adding new materials was a task hospital staff had indicated that they would be performing extremely often, thus, having it as an eye-catching call-to-action button made this task quick and easy to navigate to.
Archive Documents
Based on user feedback that hospital staff that hospital staff were worried about accidentally deleting documents and wanted a space to store and recover old documents, users can archive their documents instead of deleting them permanently.
Restore from Archived
This functionality was designed to allow hospital staff to recover their archived documents.
1)
2)
3)
4)
FINAL STEPS
As my last steps in this project, I assigned the creation of this Document Manager platform to the development team in Jira, and assisted in overseeing, supervising, and answering questions the developers had around building this platform.
Designing this platform was a very rewarding, humbling experience, as I got to conduct weekly visits to St. Paul's Hospital to chat with customers, hear their frustrations, listen to their day-to-day work, and bring that back to the office to really advocate for their needs! In the end, I got to design a product which not only helped our users, but empowered them to have more agency over their work - and that, to me, is a large part of why I love to design.
I love getting to see the impact of my work, and I know that as I move forward, I will continue to seek opportunities where I can use the power of design to drive meaningful change.
