Website Design and Build
The Montfort Academic Family Health Team
In addition to general information for the team’s patient population, the site provides online booking for vaccine and special clinics, a file upload for patients to send information to their healthcare provider, and a system to collect email consent forms from patients who wish to receive email communications from or clinic.
See it live at esfam.ca.
My Role
- Visual design; layout, images
- Development; Front end and back end
Skills & Technologies
- HTML
- CSS
- JavaScript
- Python
- Flask
- Responsive Design
- Bootstrap
- Photoshop
- Illustrator
- Amazon S3
- DynamoDB
Flu Shot Appointment Booking at esfam.ca
Scenario
In 2020, due to the COVID-19 pandemic, influenza vaccines were administered off-site at a large specialized clinic. There was a particularly high demand for flu shots, which posed a challenge for staff to get patients booked into appointment slots in a timely manner. The clinic needed a way for patients to self-book their appointment for this clinic. A solution would have to be ready in 2-3 weeks.
Design and Rationale
-1.jpg)
I designed a webpage on the esfam.ca site where patients are able to view flu shot appointment availability, and book an appointment.
Since the clinic serves many families, I wanted to allow appointments to be booked as a group. I allowed up to 8 people to book their appointment for the same time.
I started the booking process by asking how many people the appointment is for, so that I could ensure that there was a time slot that could accommodate the booking. It's quite annoying for users to find out at the end of the process that there`s no appointments available.
If there were no appointment slots available to accommodate the size of group being booked, the user would get a message telling them that there were no appointment times available for a group of that size.
-2.jpg)
-3.jpg)
Next, users had to select the date for the appointment.
To simplify the experience, only dates with available time slots are shown. This, combined with the fact that the clinic was only running a couple of times a week, makes the list of dates fairly short. Given the shorter list of dates, I chose to use a drop-down menu, which allows for faster selection of dates than a date picker.
I formatted the date to include the day of the week to make it easier for users to decide on a date.
Once the date was selected, the time drop-down list would be populated with the available appointment times.
In order to allow users enough time to complete the booking form, I designed the booking system to hold their chosen appointment time for 15 minutes.
I added a countdown timer to inform the user of the amount of time remaining to complete their booking.
The countdown timer is in a "sticky div" so that it is always visible, even for larger bookings where users would have to scroll more in order to add the information for each person.
-4.jpg)
-5.jpg)
Once the appointment booking is successfully completed, the screen shows a confirmation and the details of the appointment.
Since an email confirmation of the appointment would contain personal health information, the user is given the choice of whether or not they wish to send it.
If the user chooses to send the information by email, a message showing that the email has been sent is displayed. The send email button becomes disabled, and in order to help prevent spam attacks the server will not accept additional requests to send an email.
-6.jpg)
Areas for improvement and feedback from users
- While working as an admin for the day at the vaccine clinic, I had the opportunity to speak with patients and get their feedback. They were generally happy with the appointment booking process and found it easy and efficient.
- There were a few people that signed up for an appointment who were not patients of the clinic. In most cases these patients were then given their vaccine from public health or from our clinic's nurse. To solve this for next time, I added a verification step to the booking process, where the health card number is checked against a list of hashes.
- A small number of users entered their email address incorrectly, resulting in a bounced message. This could be avoided, if necessary, by adding a step where the patient confirms that the address entered is correct.
- Creating an admin page on the clinic's intranet site would allow reception staff to handle cancellation requests. Any cancellation requests had to be handled by myself or my work colleague; we had to locate the booking in the database and delete it.
File Upload at esfam.ca
Scenario
At the beginning of the COVID-19 pandemic, the clinic had to quickly transition to virtual appointments. The healthcare providers were finding that sometimes it was difficult to see things like skin rashes during a video appointment. There were also medical forms that patients needed to have filled in, and there was no easy way for patients to securely send us the information via the internet.
Design Requirements
- Allow photos and PDF documents to be uploaded from the patient's mobile or desktop device to the clinic.
- Only allow uploads when requested by a healthcare provider.
- Once a file is received by the clinic, staff needs to be able to identify who the patient is and which provider made the request.
- Limit the number, size, and type of files allowed to be uploaded.
- Ensure a secure file transfer.
Solution
I designed a webpage on the esfam.ca site where patients are able to upload files to the clinic.
-1.jpg)
-2.jpg)
-3.jpg)
- When a provider is requesting information from a patient, a unique code is generated from within the clinic's EMR system. This code is shared with the patient either by email or by telephone, depending on their preference.
- Using this code, along with their health card number, patients go to the esfam.ca website and upload their files.
- The files are received by reception staff and added to their patient record in the EMR. The requesting provider is notified.
Areas for improvement and feedback from users
- Some patients have expressed frustration in not being able to send their healthcare provider information whenever they want to. As this was a design requirement requested by the physicians, this will not be changed.
Collection of Consent from Patients for Email Communications
Scenario
In order to communicate with patients via email, their consent needs to be obtained and recorded as part of their patient record. Patients must be informed of what types of information they may receive by email, any limitations, and potential privacy risks in communicating by email. A system to collect consent from patients wishing to communicate by email was needed to be developed.
Design Requirements
- Obtain informed consent — letting patients know what information could be sent, the limitations, and the privacy risks.
- Allow the collection of email addresses for patients consenting to email communication for themselves, or their dependents.
- Obtain a copy of the "Patient Agreement and Liability Release" with the patient's name and email address, to be saved into their patient record.
Solution
I designed a webpage on the esfam.ca site where patients are able to sign up to receive email from the clinic. Patients can view the clinic's email policy, as well as the risks and limitations of email communication for health care related matters, prior to submitting an enrollment form.
-1.jpg)
-2.png)
-3.png)
- Patients can fill in the form on the website to opt-in to receiving emails if they choose to.
- A PDF file of the "Patient Consent and Release" for email communication with the patient's name, email address, and IP address is generated and sent to the clinic.
- The "Patient Consent and Release" file is saved into the patient's medical record.
Areas for improvement and feedback from users
- A number of patients have expressed that they would like to be able to send an email to their healthcare provider; our email is outgoing only, no-reply. As one-way email communication is requested by the physicians, this will not be changed.