With chronic illness prevalence expected to continue rising, it's important that patients are able to monitor their condition(s) and provide their medical team with a clear picture of their disease status. Furthermore, the disruptions which COVID-19 has brought to healthcare systems across the globe system makes it easier for new symptoms of disease progression to potentially be missed until a later stage.
To tackle this problem, I have devised a patient portal application called MediTracker. MediTracker allows chronic illness patients to take control of their health by keeping logs of their disease symptoms over time. They can demonstrate these logs to their medical team at appointments to provide them with a more accurate account of their disease activity. In addition, these logs help medical professionals to provide better patient care by seeing their disease activity over time.
Please note, this project is for educational purposes only. Do not share your own personal medical information.
- Purpose
- User Experience Design
- Website Structure
- Features
- Technologies Used
- Testing
- Deployment
- Credits
MediTracker's Vision is to empower chronic illness patients to take control of their health. Its Mission is to provide patients with a secure web application which allows them to keep logs of their medical records and report it back to their medical team.
The target audience for this application are both medical professionals who want to provide better patient care and chronic illness patients who want to take control of their health by improving their record keeping of their disease symptoms for their medical team and also for their own personal reference.
- As the application owner, I want to improve the standard of care between patients and medical professionals
- As the application owner, I want to provide medical professionals with a patient portal application to share with their patients so they can better monitor their health
- As the application owner, I want to provide chronic illness patients with a way to create, read, update and delete medical data
- As the application owner, I want to empower chronic illness patients to take control of their health
- As the application owner, I want to provide a secure application to patients and medical professionals
- As a medical professional, I want to improve the standard of patient care
- As a medical professional, I want to provide my patients with a secure patient portal
- As a medical professional, I want to empower my patients to take control of their medical condition(s) by keeping their own logs
- As a medical professional, I want to better understand my patient's disease activity
The end users of this website will be chronic illness patients and their user stories are outlined below:
- As a patient, I want the main purpose of the website to be immediately apparent upon entering so I understand what the site is used for
- As a patient, I want a web application which is easy to navigate on both mobile, tablet and desktop devices
- As a patient, I want a website which is visually appealing and looks professional so I feel confident in storing my medical data
- As a patient, I want to be able to register to create my own personal account and feel that my information is secure
- As a patient, I want to be able to update my health profile with my personal details
- As a patient, I want to be able to record my medical symptoms and have the ability to edit and delete data I no longer wish to record
- As a patient, I want to be able to request an appointment with my medical team
Before developing this application, I dedicated time to exploring patient portal application design online and websites for hospitals and GPs to gather design inspiration. I used applications such as Pinterest, Behance and Google. These provided me with a richer understanding of the typical user interfaces for medical applications and the type of colour schemes used.
From my research outlined above, it was evident that the colour blue was very standard across many medical website designs and this is because blue is often "associated with credibility, trust, knowledge, power, professionalism, cleanliness, calm and focus".
However, I came across a patient portal mockup for Orlando Health which in contrast used a deep red for its colour scheme. This really stood out to me as it was something different and memorable.
Although red seems to be more uncommon in medical website design, as we often associate it with danger, the deepness of this particular red made it more subtle and less provoking of the feelings of danger and alert. Thus, I decided to use this as the main base colour for MediTracker as it's a distinctive brand colour and the application is not directly that of a hospital or General Practicioner's website.
I used Adobe Illustrator's colour picker tool to identify the hexadecimal value for this colour, which was #9E0035. I then used Adobe Color to generate more monochromatic shades from this base colour which I used on the homepage. The result was a strong brand colour for MediTracker.
For the typography, I researched popular fonts for medical websites and discovered a site which lists the Most Used Google Fonts on Hospital Websites. I used this as a basis for choosing a font and decided to go with Open Sans for the headings and Montserrat for paragraph text. These are both sans serif fonts and I imported them into the CSS file from Google Fonts.
I created the logo using Adobe Illustrator. It consists of Lato Bold for the font and the 'T' in the same red used on the website.
I created wireframes for this web application using balsamiq:
Desktop wireframes:
| Desktop Wireframes | Mobile Wireframes | Tablet Wireframes |
|---|---|---|
| Homepage | Homepage | Homepage |
| Register | Register | Register |
| Sign In | Sign In | Sign In |
| Dashboard | Dashboard | Dashboard |
| Health Profile | Health Profile | Health Profile |
| Add Log | Add Log | Add Log |
I also created some high fidelity desktop mockups for the key pages on the website. This provided me with an opportunity to sample my chosen colours and ensure the layout I had wireframed looked visually appealing. Please see desktop mockups below:
| Desktop Mockups |
|---|
| Homepage Mockup |
| Register Mockup |
| Sign In Mockup |
| Dashboard Mockup |
| Health Profile Mockup |
| Add Log Mockup |
MongoDB was used to set up the database for MediTracker. The database consists of six collections: users, logs, gender, status, height_metric and weight_metric.
I used Canva to illustrate the collections, along with their documents, in the image below:
I also used Canva to design a sitemap for this website as displayed below:
MediTracker is a fully responsive website which offers users a login to a private dashboard area. Below I have gone into greater detail on how the website's features meet each of the user stories identified at the beginning of the README document:
As a patient, I want the main purpose of the website to be immediately apparent upon entering so I understand what the site is used for
- The website displays the MediTracker logo in the top left corner which remains fixed across all site pages
- The homepage includes a clear title and website description over the hero image which is immediatebly visible to users upon entering the site
- The homepage includes an 'About' section which provides the user with further information on the application
- The homepage displays a large and relevant hero image
As a patient, I want a web application which is easy to navigate on mobile, tablet and desktop devices
- The website is fully responsive and rescales to preserve user experience across all device sizes
- The website provides users with full functionality across different device types
- The navigation menu resizes into a hamburger icon on smaller devices
- A 'back-to-top' button is provided for users on the dashboard page to reduce scrolling when multiple logs are created and subsequently increase page length
- A site wide footer which includes links to other pages, copyright and social icons
As a patient, I want a website which is visually appealing and looks professional so I feel confident in storing my medical data
- The website uses consistent colours and styles throughout providing a pleasant user experience
- There is a strong use of whitespace which helps to position items on the page and provide an intuitive design for the user
- The strong brand colours and focus on UX/UI indicate a website which is secure and experienced in its offering
As a patient, I want to be able to register to create my own personal account and feel that my information is secure
- Registration functionality is provided to users to access their own private dashboard area
- The form provides users with a GDPR statement on storing their data and they are required to consent to this
- The form requires users to create a username and password with a minimum of 5 characters
- Sign out functionality is offered so users can exit their dashboard if using a shared device
- All registered users can use the sign in functionality
As a patient, I want to be able to update my health profile with my personal details
- The profile section on the dashboard is fully customisable by the user so they can create, read, update and delete their profile data
- The profile section allows users to add an image, gender, date of birth and height to their profile
- Defensive programming is use on the user dashboard to ensure nothing can be deleted without a two step approval
As a patient, I want to be able to record my medical symptoms and have the ability to edit and delete data I no longer wish to record
- The dashboard provides users with functionality to create new logs to record their medical symptoms
- Edit and delete functionality are applied to all new logs created by the user
- Users can view all of their newly created logs on the dashboard
As a patient, I want to be able to request an appointment with my medical team
- 'Request Appointment' buttons are provided to the user on both the homepage and dashboard
Given the scope and timeframe for this project, not all features could be implemented. Other features to be added in the future include:
- Filter logs by the date and status and display logs in order of date added
- A 'Forgot Password' functionality
- Add pagination to reduce scrolling and set the max number of logs displayed to 5 on the dashboard
- Implement emailjs for the Request Booking functionality
- Have the functionality to upload an image as opposed to using an image URL
- Provide users with a walk through tutorial on how to use the Dashboard and update their profile and add logs
- Provide the user with the last date they logged in on their Dashboard
- Implement a medical professional login in a future release so they can access their patient data online
- HTML was the main language used to create this website
- CSS was used to add bespoke design
- JavaScript was used to create interactive elements on the website
- Python was used for the backend of the website
- Flask was the chosen micro web framework
- Bootstrap was used as the front-end framework
- Google Fonts was used to find, sample and import fonts for the logo and website
- Font Awesome was used for icons across the website
- Adobe Illustrator was used to create the logo and high fidelity mock ups
- TinyPNG was used to reduce the size of all the images on the website
- balsamiq was used to create low-fidelity wireframes of the website
- Git was used as the version control software to add, commit and push code to the GitHub repository
- Gitpod was used as the development environment to write my code
- GitHub is the hosting site used to store the source code for the Website
- MongoDB Atlas was used for the database
- PyMongo provided tools for interacting with MongoDB from Python
- Jinja was used for templating
- Heroku was used to run the application in the cloud
- W3C Markup validator was used regularly to check for any errors in the HTML on the site
- W3C CSS validator was used regularly to check for any errors in the CSS on the site
- Web Accessibility was used to test if website was accessible to people with disabilities
- JSHint was used to test the JavaScript code for errors
- PEP8 Online was used to check for PEP8 compliance
Manual and automated testing has been carried out across the site for all user stories and features. The testing results can be found in the TESTING.md file.
This project was created on GitHub using the following steps:
- A new repository was created using the CI full template tempates
- I gave my repository a meaningful name and clicked 'Create repository'
- Once the repository was created, I opened it on GitHub and clicked the 'Gitpod' button to build the workspace
- Version control was used throughout the project using the following commands:
- git commit -m "descriptive updates" - This command was used to commit changes to the local repository
- git push - This command was used to push all committed changes to the GitHub repository
Setup Files
- Tell Heroku which applications and dependencies are required to run our app by setting up a requirements.txt and Procfile:
pip3 freeze --local > requirements.txt
echo web: python app.py > Procfile
Create Application
- Login to Heroku account
- Click on the 'New' button
- Select the 'Create new app' button
- Create a unique app name
- Choose relevant region
Connect App to GitHub Repository
- Select GitHub from the 'Deployment Method'
- Enter the repository name for the project and click search
- When the repository has been found, click to connect to this app
Set Environement Variables
- Click on settings tab for your app
- Click on 'Reveal Config Vars'
- Securely tell Heroku which variables are required using the key value pairs listed below:
IP = 0.0.0.0 PORT = 5000 SECRET_KEY = YOUR_SECRET_KEY MONGO_URI = YOUR_MONGODB_URI MONGO_DBNAME = DATABASE_NAME
Enable Automatic Deployment:
- Go back to the 'Deploy' tab
- In the 'Automatic deploys' section, select to enable automatic deploys
The following steps are required to run this locally:
- Go to the GitHub repository
- Click the 'Code' dropdown menu
- Copy Git URL from HTTPS box (https://github.com/JessicaJuliet/meditracker.git), or select to download the ZIP file
- If usings the Git URL, open a new terminal in your IDE and type the 'git clone' command in the CLI and paste the copied URL
- A clone of this project will be created locally on your machine
- Alternatively, if you download the ZIP, unpackage locally and open in your IDE
- Bootstrap Navbar - https://getbootstrap.com/docs/4.0/components/navbar/
- Bootstrap drowdown menu - https://getbootstrap.com/docs/4.0/components/dropdowns/
- Back-to-top button - https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
- Daisy Mc Girr's workshop on testing proved to be invaluable for creating my TESTING.md document
I would like to thank the following people for helping me with my project:
- All of the tutors at the Code Institute who have supported me through various obstacles which I came up against
- My mentor Simen Eventry_mentor for his guidance and motivation throughout this project