Visual Dashboard and Heads-up Display of Patient Conditions: … · 2012-08-15 · [Page 6] ©20 Visual Dashboard and Heads-up Display of Patient Conditions: Engineering Volume Damian

Visual Dashboard and Heads-up Display of Patient Conditions: Engineering Volume Damian Bendersky & Jihoon Kang, PIIM, The New School Last Updated: August 9, 2012

[Page 2]

Visual Dashboard and Heads-up Display of Patient Conditions: Engineering Volume Damian Bendersky, Jihoon Kang, PIIM, The New School Last Update: August 9, 2012

©2011 PIIM , THE NEW SCHOOL

Notes Revision History Date Notes Author 2/1/11 Document creation and formatting G. McNulty 7/28/11 Report on initial development status D. Bendersky 8/11/11 Removed obsolete information,

added screenshots and diagrams. D. Bendersky

8/11/11 Editing J. Kang 9/1/11 Updated progress on Messages

module D. Bendersky

9/14/11 General revision D. Bendersky 11/9/11 Updated details on progress for all

modules, and added details for the newly created Med. Records module.

D. Bendersky

1/24/12 Added details for the newly created Medications module, and updated details on Medical Records module.

D. Bendersky

1/25/12 Editing: Medications and Medical Records

J. Kang

3/8/2012 Updated a few completed tasks previously marked as “pending”.

D. Bendersky

5/9/2012 Added details for the Vital Signs, Educational Resources, and Exercise modules.

D. Bendersky

5/10/2012 Edit & revision: Vital Signs, Educational Resources, and Exercise

J. Kang

8/7/2012 Added details on Nutrition and Exercise modules. Updated details on progress for Home Page (User Login, Button View, and Widget View), Medical Records, and the redesigned Immunization and Medications modules.

D. Bendersky

8/9/2012 Edit & revision: Methodology, Home Page: User Login, Homepage: Widget, Immunizations Module, Medications Module, Exercise Module, Nutrition Module.

J. Kang

[Page 3]



INTRODUCTION

This is the Engineering Volume for the Visual Dashboard and Heads-Up Display of Patient Conditions. The purpose of this document is to provide a Concept-of-Operations for this system. It is expected that this document will change and evolve over each quarterly deliverable of this project.

The Visual Dashboard and Heads-Up Display of Patient Conditions project will be comprised of three main portals: The Patient Portal, The Provider Portal, and The Administrator Portal. This volume’s third release discusses the progress on the development of the Patient Portal. This includes details on the completion of specific modules, as well as a description of pending items. UNDERLYING TECHNOLOGY The Engineering Volume’s initial release discussed the implementation strategy to prototype the system in Adobe Flash; listing the seamless integration into other Adobe products as one of its main advantages, as well as Flash’s ActionScript scripting programming language’s advantages and potential compatibility with JavaScript should the need to use client-side technologies arise.

As explained on this volume’s second release, the implementation strategy was revised, and the system is being prototyped using the Adobe Flex technology instead. Adobe Flex applications are written using Adobe Flash Builder, and it is based on the Adobe Flash platform. It provides the advantages described for using Adobe Flash, and it also uses ActionScript as its core language.

In addition, Adobe Flex presents significant advantages that will positively affect the project’s development. Adobe Flex was particularly created to develop cross-platform rich Internet applications: It includes a library of rich customizable components that can be directly applied to the Visual Dashboard and Heads-up Display of Patients Conditions project. This will maximize efficiency in terms of development time, and may also improve the application’s performance by reusing components. Finally, Adobe Flex’s workflow and programming model will likely facilitate the project’s future maintenance. METHODOLOGY The methodology taken in this quarterly iteration of this Engineering Volume involved the continuation of the development process for the Visual Dashboard’s Patient Portal: Building the application based on GUI Design Volume specifications.

The approach taken in this stage was to complete the pending modules (Exercise and Nutrition), according to the Design Volume specifications detailing out layout and functionality. Then, the modules that had a significant re-design on the latest Design Volume version (Medications and Immunization) were updated on the prototype based on the new design. Pending functionality on the login screen and home page was also completed; specifically the “Create an Account” and “Forgot Password” screens, and more importantly the home page’s “Widget View” and “Widget Library”. The “Button View” was enhanced with drag/drop functionality, and the preferences menu was also implemented. Therefore, the core functionality and design for all modules on the Patient Portal have been completed. A list of minor fixes and secondary functionality is the only thing pending for the Patient Portal. The Provider Portal’s development will be the main focus for the next quarter.

The following report describes the progress on the Patient Portal’s modules:

[Page 4]



Home Page: USER LOGIN

Completed: The design for this module was completed according to the required specifications. The

functionality for logging in after entering a valid username and password has been completed, taking the user to the “Home Page”. Alternatively, if an invalid username or password is entered, then the corresponding error message is displayed on top of the input fields, and the fields containing errors get highlighted with a red border.

The “Create an Account” screen’s layout and functionality have been created. The user is required to enter his name, birth date, SSN, user ID, e-mail address, password, and password confirmation. Each field includes the customized form validation, i.e., the system will recognize and reject any invalid entries. For example, if an invalid date is entered in the birth date field, the system will highlight the field in red and display a message explaining about the error in the field entry. Entering numbers in the valid SSN format is also required along with a string with a valid e-mail address format. Leaving any field blank will generate an error message stating, “required field,” as well as when the selected user ID or password do not have the minimum required length. If the “password” and “password confirmation” fields do not match, a custom “password not confirmed correctly” error message will be displayed. Upon a valid registration entry, the corresponding account is temporarily created, allowing the user to log in using the created user ID and password credentials.

The “Forgot User ID or Password?” screen has been created. This screen allows the user to enter his/her e-mail address, which generates a “Temporary Password Sent” message upon entering a valid e-mail address. If the address entered does not resemble a valid e-mail address, an error message is generated and the user is asked to enter a valid address.

A smooth and short transition animation was added when navigating between the “Login,” “Create an Account,” and “Forgot Password” screens.

Pending: None.

[Page 5]



Home Page: BUTTON VIEW

Completed: The design and functionality for the buttons linking to their corresponding modules

have been completed. The functionality of rearranging the buttons (through click-and-drag) has been completed; including a small green (+) icon representing a valid drop target, and a red (x) icon representing an invalid drop target.

The header containing the logo, user profile link, logout link, and gear menu has been completed: The user can click on his/her name to display his/her profile. Clicking on the “Logout” button will effectively log the user out. The design and functionality for Settings (“gear” icon) have been completed. Upon clicking on the Settings menu, a custom dropdown is displayed showing “Homepage Options,” “Types and Units,” and “Notifications.” Clicking on each item launches a popup screen where the user can select the corresponding options. The popup screen also includes navigation within the three previously mentioned options, so the user does not have to re-open the gear menu. From the “Homepage Options” preferences, the user can effectively switch between “Button View” and “Widget View.” The layout for “Type and Units” and “Notifications” has been completed.

Pending: There is currently no animation in place when the user rolls over a button.

Home Page: WIDGET VIEW

[Page 6]



Completed: The dashboard and widgets have been completed according to the design specifications. Widgets are gateways to all modules, while displaying concise information of each module. Each widget is a custom component, consisting of the “header” and “content” sections. The header of each widget contains an icon that allows the user to collapse or expand each widget. It also displays the module’s name, and an arrow; both of which link to the corresponding module. Its background is a gray gradient, which may be highlighted in red in case there is a warning in a given module (i.e., Immunizations), along with a red warning icon. Users can enter the corresponding module by clicking on anywhere of the header. The functionalities of the content section vary in module by module:

The “Messages” widget contains a list of the four newest messages on the inbox, along with their corresponding urgency indicators, date, sender, and subject. Clicking on any message will not only direct the user to the Messages module, but also open the corresponding message. Below this list, there is also a “View All” link that points to the module.

The “Appointments” widget contains details on the next appointment, including the date (in calendar format), time, type, doctor, and phone number. The widget also contains custom navigation functionality, allowing the user to view details on both previous and future appointments, without entering the module.

The “Immunizations” widget contains a list of the four due or past due immunizations (if any), ordered by due date; including an icon representing the immunization’s status, the immunization’s name, and the number of days until due or past due.

The “Medical Records” widget includes details on the medical record where the doctor may have suggested next steps. The record’s type, date, doctor, next step description, and recommendation link (functional) are included.

The “Educational Resources” widget includes a list of recommended readings, each of which is a link pointing to the corresponding article in the Educational Resources module. There is also a functional search box, which will display search results in the Educational Resources module upon submitting.

The “Medications” widget contains a chart with all current (active) medications taken by the user (patient), and a graphical representation of which medications were taken or not taken during the current time bracket (i.e., one week) along with the number of daily intakes. The chart is slightly different than the one appearing in the Medications module, considering that it does not include the Medications categories. On the widget it has smaller icons and different grids on the background.

The “Nutrition” widget contains the “My Plate” (see the Nutrition module for details), representing the users daily food consumption per food type. Icons representing consumptions in sodium, sugars, fats &

[Page 7]



oils, and alcohol are also included. Finally, a summary of total daily calories is included, calculated from calories consumed and calories burned.

The “Vital Signs” widget contains a series of line charts representing each measure, along with the most recent measures in characters (letters and figures). Each line is interactive and allowing the user to rollover different points on the chart which in turn updates the measures corresponding to the highlighted point on the timeline. Each individual vital sign includes the date of the most recent entry. Each graph may be collapsed/expanded, and the height of the widget gets readjusted accordingly.

The “Exercise” widget contains collapsible/expandable components. First, the “Most Recent PRT” scores are displayed on a polar chart. Then, the “Physician-assigned” and “Personal” exercises are displayed on line graphs, consistent with those used in the Vital Signs widget. The exercise minutes (and “miles” when appropriate) are displayed beside the chart, and their values are updated accordingly as the user rolls over different points in the chart. The height of the widget gets automatically readjusted when any chart is collapsed or expanded.

All data displayed on the widgets is connected to the same data sources displayed in the modules. It also means the same data shown in both widget and module are live. Any updates submitted by the user will immediately update the data displays on both widget and module.

The Widget Library has been completed. This is accessible from the bottom of the widget view screen, and it may be collapsed/expanded. Once it is expanded, an “X” icon appears on the top-right corner of each widget, allowing for it to be “closed” or “minimized” onto the widget library. The library contains icons for each module. Open widgets are represented by an “enabled” icon, while widgets that have been closed/minimized are represented by a “disabled” button, which re-opens/maximizes the widget back to its original position when clicked.

Pending: None.

Home Page: USER ACCOUNT

Completed: The layout for the “User Profile” page has been completed according to the specifications. In addition, the functionality to edit and save the user’s information has been implemented. The saved information is stored in a local variable, meaning it is discarded when the user session is closed.

Pending: The functionality to change the user’s profile picture is yet to be completed.

[Page 8]



APPOINTMENTS MODULE

Completed: The appointments module has been completed in its majority in terms of both design and functionality. The main challenge for building this module was dealing with the fact that entire module is built around a working calendar, considering that Adobe Flex does not include a pre-built calendar component. For time efficiency purposes, instead of creating an entire working calendar from scratch, it was decided to look for existing online resources that offered an open-source Adobe Flex calendar; which could be customized to meet the project’s requirements.

After a careful revision of all available online calendar resources, the open-source calendar that best fit our project’s requirements was selected. The calendar’s visual design was modified to match the required specifications, for both the “Month view” and the “Week view”. “Today” is highlighted on the calendar’s “Month view” as defined in the specifications. The “List view” was created accordingly. The functionality for the calendar’s navigation works as expected; allowing the user to navigate from one week to another, or one month to another. The ability to navigate back to the home page is also functional.

The appointments system was completed according to the specifications. In order to request an appointment, the user may click on “Request an Appointment” and a form is displayed asking the user to enter a reason for visit. The user may also select a reason from a list of common reasons, or a full list of reasons. Upon entering a reason for visit, the user is automatically switched to the calendar’s “Week View”, where a list of buttons is displayed with the available time slots for the requested appointment. Furthermore, the user can click on such buttons to effectively request an appointment at the corresponding date and time; which is represented on the calendar’s different views. Also, the text legend at the top of the module is updated accordingly, using the format “You have X appointments in the coming week”.

Existing appointments are displayed across the calendar’s different views, allowing the user to select them individually. Upon selecting an appointment, its details are displayed on the module’s right panel, displaying “Event Details”. Along with the detailed information about the appointment (which differs on whether the event is an appointment or a class), the user has the ability to cancel the selected appointment by clicking on the corresponding button, which shows a warning message asking the user to confirm before proceeding. The “Event Details” panel also displays a link to message the corresponding doctor (or instructor if the event was a class), which links directly to the “Messages” module (described below), and automatically creates a new message with the corresponding recipient and subject pre-selected. When an appointment is selected in any of the calendar’s views, it is also selected in the rest of the views, allowing for a more intuitive navigation.

[Page 9]



The user may also click on the “Find a Class” button to view a list of available classes and their corresponding descriptions, as described on the project’s specifications. The functionality for reserving a seat in a class has been completed as well the functionality for cancelling a class reservation.

The design and functionality for the left column has also been completed, showing a list of upcoming appointments (which gets updated each time the user adds or cancels an appointment), along with a list of recommended activities and working links for each (such as taking a class or scheduling an appointment).

Pending: The legend displaying an appointment’s length under the “Request an Appointment” form is not functional, nor is the “help menu”, or the alphabetical scroller under the “full list” in the same form. The “Prerequisite Form” is not in place yet. The “Export” button is still nonfunctional. The ability to search for appointments has not yet been implemented. The format in which dates are displayed under “List View” needs to be revised. IMMUNIZATIONS MODULE

Completed: The immunizations module has been completed in its majority in terms of both design and functionality. The “timeline” display for the immunizations was completed successfully, both in terms of design and functionality. The “points” in the graph representing immunizations are not drawn manually, but instead they are displayed according to data provided in an XML file. This XML file contains all the data related to each immunization, and it can be easily modified by anyone, or it could even be automatically generated by a web application; allowing for a patient’s immunization history to be imported in a straightforward manner. The immunizations’ position on the timeline, as well as their color, are dynamically generated based on the dates and completion status indicated on the XML file, taking into consideration the current date.

The different “time range” views for the timeline were completed accordingly: the user can view time spans of 1 month, 3 months, 1 year (default), 3 years, 5 years, or 10 years. Furthermore, an immunization’s status and due date are displayed when the user rolls over an immunization’s icon on the timeline, whereas an immunization’s description is also displayed when the user rolls over an immunizations label. “Today” is represented on the timeline with a blue line, according to the specifications. The functionality to display only “required” immunizations has been completed (whether an immunization is required is indicated in the XML file). The right-hand column listing the patient’s allergies has been completed. Also, the text legend at the top of the module showing “You have X immunizations due or due soon” is updated accordingly. A link to the

[Page 10]



“Educational Resources” module has been included in the header. The ability to navigate back to the home page is also functional.

The ability to click on a specific immunization’s icon to view all the corresponding details about the selected immunization (also provided in the XML file) was completed accordingly. The user may also view the immunization’s details by clicking on the immunization name on the vertical axis of the timeline. The details of the selected immunization are displayed on a separate tab including a list of “Vaccination Details” and “Vaccination History.” The design and functionality for the tabbed navigation, including the function to close tabs, was implemented consistent with the Messages module (see “Messages Module” for details). Under “Vaccination Details,” patient’s age at any immunization’s date is calculated by the system, as well as the immunization’s status, based on the completion and requested date. “Vaccination Information Statement” options appear on top.

The “list view” screen has also been completed accordingly, displaying more details on the data shown on the “timeline view” provided by the XML file. The colored icon representing the immunization’s status has been added to the list view according to the specifications, as well as rollover description by hovering an immunization’s name. The user may also open any immunization’s details page by clicking on the immunization’s name on the list. The functionality to sort the data by any category is included.

Pending: There are certain design details that need to be adjusted; there is an issue with a horizontal line appearing on the timeline chart by error (bug in the Flex software). The specifications indicate dotted lines across each immunization in the timeline, which have not been included. The “All” and “Custom” time range views have not yet been implemented. The horizontal scrolling functionality within the timeline chart has not been implemented. The “help” link for the immunizations has not been implemented. The ability to search for immunizations has not yet been implemented.

MESSAGES MODULE

Completed: The Messages module has been completed according to specifications in its majority in terms of both design and functionality. The design and functionality for the tabbed navigation pertaining different folders and messages has been completed, including the functionality for closing tabs directly by clicking on a tab’s “X” button. The design and functionality for displaying a list of messages in each of the main mailboxes (Inbox, Drafts, Sent, Trash) according to the specifications has been completed. This includes the functionality for displaying the messages’ icons according to each message’s data, such as the

[Page 11]



urgent / somewhat urgent / urgent color indicators, or read / unread / replied icons. Furthermore, the functionality for highlighting unread messages with a darker color and bold letters has been completed, as well as displaying and updating the number of unread messages in parentheses next to the “Inbox” link, and also in the text legend at the top of the module. The ability to delete an individual message by clicking the corresponding “X” icon on the inbox has been completed. The ability to delete or “mark unread” multiple messages at once has also been completed, along with the ability for the user to select “all”, “read”, or “none” of the messages. The functionality for showing “all” messages or filtering only “unread” messages has been completed. The feature for sorting messages by “Date received”, “Sender”, or “Urgency Level” is functional. The navigation between each of the main mailboxes has been completed, displaying the corresponding messages. The functionality for opening and displaying a message from any of the main mailboxes has been completed.

The functionality of organizing messages in “thread” or “conversation” format has been completed according to specifications. This means that when a user replies to a message, each individual response is not treated as a separate message, but instead as a part of a “conversation”. Therefore, when opening a message conversation, the user can see each response in chronological order in the same screen. Concurrently, it is possible that a message conversation is displayed in more than one mailbox at the same time (i.e. Inbox and Sent), since the conversation contains both messages that have been received as well as responses that have been sent. The functionality for replying to messages has been completed (responses are added to the existing message conversation, and the “replied” icon is displayed on the messages’ list). Also, when viewing a message conversation, the user may click on the “Delete” button to move the message conversation to the Trash folder.

The functionality for creating one or more new messages in new tabs by clicking on the “New Message” tab (and automatically select the new message) has been completed. The layout for the “New message” tab has been completed according to specifications. The functionality for sending a message has been completed. The ability to close a “New message” has been completed. Additionally, if the user has written any text before clicking the “Cancel” button, a popup message prompts the user to confirm if he wants to disregard the message. The “Subject” and “To” fields are not text fields, but instead they are pre-defined dropdown menus, as indicated in the specifications. The functionality for automatically selecting the recipient based on the subject selection has been completed. Also, when selecting a subject, the tab’s label changes from “New Message” to the selected subject. The user may also select the message’s urgency level on the corresponding dropdown menu. The default urgency selection for a new message is “Not urgent”, whereas the default urgency selection when replying to a message matches the last message’s urgency level, as indicated in the specifications.

The functionality for adding attachments to messages has been completed according to the specifications. The user may attach any file(s) by using his/her operating system’s “Open” dialog box. If the attachment(s) is an image (jpg, gif, or png formats) then it is displayed as an image preview on top of the message. To remove the attachment(s), the user may click on the corresponding “X” on the top-right corner of the image preview. Non-image attachments are listed at the bottom of the message field, along with the corresponding file size(s), and an “X” button to remove each attachment. This is functional when creating a new message, and also when responding to an existing message. When opening a message with attachment, these are displayed in the same manner. The ability to download attachments is also functional, allowing the user to select the local directory for download. The functionality for saving a draft message with attachments has been completed, as well as opening a draft message with attachments, and sending it.

The entire functionality for “Drafts” has been completed. This involves creating a “Draft” from a “New Message”, and also from a reply to an existing message. The functionality for opening and retrieving a draft message, and re-saving it or sending it has been completed. Also, when showing a list of messages for

[Page 12]



any of the main mailboxes, a “(DRAFT SAVED)” legend is displayed before the message’s subject if a draft has been saved. The number of draft messages appears in parentheses next to the “Drafts” link.

If a message conversation contains more than one message, then a legend is displayed before the message’s subject indicating the number of messages the conversation contains. Also, a message’s “preview” is displayed in the list of messages (for any of the main mailboxes) containing the first few words or sentences of the last message in the conversation. If the message is longer than the preview, then the preview is truncated and an ellipsis is added at the end.

The functionality for message searching has been completed. Searching is performed and refined as the user types each key, without needing to hit any search buttons. Any matches found in messages’ body text, subject, or correspondent’s name will be displayed. A “No messages found” legend is displayed when appropriate (similarly, a “No messages in this folder” legend is displayed when opening a folder with no messages). Furthermore, a “Clear” button was added to clear and reset the search. The functionality for sorting or selecting multiple messages is also available within the search results.

The label for the “active” mailbox is always highlighted in orange. A mailbox becomes active when the user selects it from the mailboxes menu, or when selecting a message tab that belongs to a specific mailbox. The total number of messages for the selected mailbox is displayed on its top-right corner. Also, all the dates displayed in this module are formatted according to the current date: If a message was sent “today”, then only the time is displayed (i.e. 10:05am); if a message was sent yesterday, then only “Yesterday” is displayed; and if a message was sent before yesterday, then the entire date is shown (i.e. November 29, 2011).

The functionality for moving a “deleted” message to the Trash folder has been completed, as well as the ability to view the list of deleted messages in the Trash folder, and opening them. If the user attempts to delete a message from the Trash folder, a warning message will pop up asking to confirm if the user wants to delete the message permanently.

Furthermore, the tabbed navigation for viewing messages was enhanced by preventing the creation of duplicate tabs: On one hand, when trying to open a message that had already been opened, the system automatically selects the open message instead of reopening the message in a new tab. On the other hand, when creating a new message, the system first checks if a “blank” new message is already open. In that case, it automatically selects the tab containing the “blank” new message instead of creating a duplicate. This is done to make navigation more efficient and user-friendly.

Pending: There is an unfixed bug when opening a new message: the “open new message” tab remains enabled when it should appear disabled. The button dropdown functionality has not been completed.

[Page 13]



MEDICAL RECORDS MODULE

Completed: The Medical Records module has been completed according to specifications in its majority in terms of both design and functionality. The “timeline” graph that displays the medical records history has been completed. These records are read dynamically from an XML file, which includes all relevant data for each medical record, such as the type of medical service, reason for visit, classification, dates, etc. This XML file could be easily modified by anyone; it could even be automatically generated by a web application; allowing for a patient’s medical records history to be imported in a straightforward manner. The graph distinguishes outpatient services from inpatient services, as specified in the documentation. The functionality for allowing the user to collapse and expand each service group at the left column of the timeline has been completed. The “Time Range” buttons on the graph are functional. The “list view” displaying the same XML records has also been completed. The following two components below the timeline have been completed: “Total Service Usage” and “My Next Steps.” The contents displayed in these areas are not static; they are dynamic data calculated or read from the XML file. The main features on the “My Next Steps” component are functional. The action items such as “Mark Completed”/“Unmark Completed” and “Remove” are functional. The “History” link is also functional; it triggers a popup showing the “Next Steps History” as depicted on the specifications. Also, the “Gentle Chair Yoga Class” recommendation link is functional, linking directly to the Appointments module and displaying the corresponding class information, allowing the user to view the class availability and request a spot. The tooltip that appears when hovering over the nodes on the “timeline graph” has been completed following the design specifications. When clicking on a record within Medical Records, either on the timeline graph or the list view, the “Service Details” are displayed. The tabbed navigation for the module was implemented to be consistent with that of the “Messages” module. This navigation is also enhanced through the prevention of duplicate tabs being created; if the user tries to open “Service Details” for a record that is already open, then the open tab gets selected automatically instead of creating a new one. The information shown on the “Service Details” tab changes based on the service type. For most services types, “Visit Details,” “Next Steps,” and “Visit Summary” are displayed. For lab services, “Lab Details,” “Next Steps,” “Lab Results,” and “Comments” are displayed. For services like radiology or procedures, “Procedure Details,” “Next Steps,” “Attached Images,” and “Procedure Report” are displayed. The “Search Medical Records” feature has been implemented. Searching is performed and refined as the user types each key without needing to hit any search buttons. Any matches found in a medical record’s

[Page 14]



name, reason for visit, provider, classification, date of service, or next steps will be displayed. A “No matching results” legend is displayed when appropriate, and a “Clear” button was added to clear and reset the search (consistent with the Messages module). Pending: Similar to the Immunizations module chart, there is an issue with a horizontal line appearing on the timeline chart by error (bug in the Flex software). Also, the specifications indicate dotted lines across each immunization in the timeline, which have not been included. MEDICATIONS MODULE

Completed: The Medications module has been completed according to the specifications in its majority in terms of both design and functionality. Upon entering the module, the “Tips for Keeping Track of Your Medications” popup is displayed. The “timeline” graph that displays the medications has been completed. These records are read dynamically from an XML file, which includes all the relevant data for each medication, such as the type of medication, intake dates, doses, directions, refills, etc. This XML file could be easily modified by anyone; it could even be automatically generated by a web application to allow the patient’s medications to be imported in a straightforward manner. The graph distinguishes “Scheduled” and “As Needed” medications with different icons and colors that follow the design specifications. Medications are grouped under “Prescription Drugs,” “Over-the-Counter Drugs,” “Supplements,” and “Herbal Medicines” categories. The functionality for allowing the user to collapse and expand each category at the left column of the timeline has been completed. When a medication has no refills left, a red marker automatically appears next to the medication name, with a “No refills left” tooltip. The “Time Range” buttons on the graph are functional. The “list view” displays the same XML records and has also been completed, including the red markers that appear as a warning when there are 0 refills left.

The “Add Medication” functionality has also been completed; it displays a popup that allows the user to type in the name of the medication to be added. The “auto-complete” functionality for the “medication name” text field has been completed; it automatically suggests the matching medication names while the user is entering words. This functionality has been customized to match any part of the medication’s name, and also to match possible misspellings (when the Levenshtein distance is equal to 1) as requested in the specifications. The following screen that allows the user to enter the dosage, quantity, frequency, and reason for taking has also been completed. Frequency may be entered as a number of daily intakes, or “As needed”. Based on this user-entered data, the medication’s graphical representation will be displayed on both the chart

[Page 15]



and the list view, creating medication icons at the indicated frequency; the user may mark these as “taken” (explained in the following paragraph). The validation form has been added to the medication text field, alerting the user with a custom warning message if the new drug can affect any active medications or possibly cause an allergic reaction, as specified in the documentation. For the demonstration purposes, if the user types or selects “Aspirin” or “Acetaminophen”, a warning message is generated accordingly.

The functionality for marking and unmarking medications as “Taken” has been completed. Taken medications are denoted with blue, whereas medications that have not been taken are denoted in gray. The tooltip over each medication icon has been completed. The popup box that appears when recording a medication intake has also been completed; it allows the users to input any comments and to adjust the time when the medication was taken (it will be reflected visually on the chart). The user may also input the quantity (in tablets) and frequency for the day’s intake, which will be reflected visually on the chart. When the user enters certain quantity or frequency other than what was directed (which is selected by default), then the blue icon is replaced by a red warning icon, representing an overdose or “underdose” (also indicated on the icon’s tooltip). If the user enters a higher frequency for a medication marked “As Needed,” then multiple icons will appear on the chart for the corresponding day, representing the number of times the user took the medication. When marking multiple medications as “taken”, it is not necessary to close each popup individually—they will close automatically by simply clicking on each medication icon in the chart, as requested in the specifications.

When hovering the medication names to the left of the chart, the tooltip with the medication’s description appears. When clicking on the medication’s name (accessible from both the chart view and the list view), the “Medication Details” are displayed. The tabbed navigation for the module was implemented, consistent with that of the “Messages” and “Medical Records” modules. This navigation is enhanced through the prevention of duplicate tabs being created; if the user tries to open service details for a record that is already open, then the open tab gets selected automatically instead of creating a new tab.

The information shown on the “Medication Details” tab includes a list of “Refills and Renewals History”, “Intake History” (updated dynamically when the user records any intakes), any “Pharmacy Comments”, and all data related to the medication.

The “Request Renewal” functionality has been completed—the user may click on the “Request Renewal” button when viewing a particular medication’s details or when looking at the “Medication History” (main tab). A popup will display a list of medications with 0 refills left, allowing the user to select the prescriptions that he/she wants to renew. A confirmation message is displayed upon submission.

The “Search Medications” feature has been implemented. Searching is performed and refined as the user types each key without the necessity to hit any search buttons. Any matches found in medication’s name, type, dose, prescription, directions, pharmacy, or filled date will be displayed. A “No matching results” legend is displayed when appropriate (consistent with the Messages and Medical Records modules).

The vertical blue highlight for “today” has been completed, as well as the right panel containing additional patient information.

The dropdown filter, which allows users to view either “Active” or “All” medications, has been completed. Inactive medications are denoted in the list view with a light gray type, as requested in the specifications. Pending: Similar to the Immunizations and Medical Records modules’ charts, there is an issue with a horizontal line appearing on the timeline chart by error (bug in the Flex software). Print and export buttons are not yet functional.

[Page 16]



VITAL SIGNS MODULE

Completed: The Vital Signs module has been completed according to the specifications in its majority in terms of both design and functionality. The landing screen has been completed accordingly, showing a summary of each of the user’s vital signs with a custom “sparkline.” Each “sparkline” is a line chart embedded in a custom made component that allows the user to expand/collapse each chart, and drag/drop the charts to rearrange them freely. Each tracker (e.g., Weight) is also custom made so that only the latest entry is highlighted by default. As the user rolls over the chart, each entry is highlighted while the others are deselected. Information on each entry point is also displayed in text form to the right of the charts, and updated accordingly as the user rolls over the chart. The chart also distinguishes between patient entries and provider entries with different designated color and shapes. Comments are also displayed with a custom chart, which allows users to read past comments entered by either provider or patient. The entire dataset for the user’s vital signs can also be displayed in “List View,” consistent with the other modules. Besides displaying all trackers with data entries in a sortable and draggable list, the “List View” also automatically highlights entries that indicate a problem with a red triangle, such as hypertension or overweight, and a detailed explanation as the user rolls over the triangle symbol.

The form for “Record Vitals” has been completed; this UI component allows the user to enter any desired vital records and comments for any specific date. Upon submission, the charts and additional information get updated accordingly. The functionality allowing the user to click on any point in any of the charts has been completed; triggering a popup box that summarizes all the vital records at the indicated date.

The “Detailed View” for the “Weight” and “Blood Pressure” trackers has been completed. Each detailed view displays the changes over time, and compares the user’s status with the goal and references. In this view, the user can also distinguish who entered each record differentiated by color and shapes. The background of chart includes useful color references, allowing the user to easily recognize the connotation data. Above the charts, the users can view written information associated to the selected entry, or the last data entry if no selection is made. This includes difference in values compared to the previous data entry, along with colored triangle-arrows indicating increase/decrease in values. This information is updated accordingly when the user rolls over any point in the chart.

On the “Detailed View” screen, the user may also change the chart’s “reference,” which updates the chart’s background colors and Y-axis accordingly. For example, the user may change from the “Weight” reference to a “Body Mass Index” reference within the “Weight” screen. For the “Blood Pressure” which records two attributes (systolic and diastolic), the user may choose between “Systolic” or “Diastolic” references.

[Page 17]



The “Edit Goal” form is completed and fully functional; the user may adjust the goal for any vital sign, and the new goal will be reflected visually on the charts (both “Detailed View” and “Summary View”), as well as the information above the Details View charts. The “Add Tracker” popup windows have been completed according to specifications, allowing the user to add either pre-defined or manually-defined trackers.

Pending: “Help,” “Delete,” and “View History” buttons for each tracker in the “Summary View.” The blue vertical line that appears when rolling over any point in the “Summary View,” and the selection of all vital signs’ nodes at the selected date has not yet been completed due to limitations in the software. The functionalities of editing entries, deleting entries, and adding comments have not yet been completed.

EDUCATIONAL RESOURCES MODULE

Completed: The Educational Resources module has been completed according to the specifications in terms of both design and functionality. All the pages documented on the GUI Design Volume have been created accordingly. This includes: the landing screen, the “Food & Diet” category screen, the “Facts About Fat” page, the “Food & Diet > Related Links” subcategory, the “Search Results” pages, the “Diabetes Basics — Symptoms” page, the “Heartburn / GRED” page, the “Physical Conditions” category, the “Digestive Disorders” subcategory, and the “Mental Conditions” category. The navigation for the module has been accomplished accordingly. This allows the user to navigate the content of the module through the vertical menu on the left. The “Back” button displayed when appropriate, the links that may be active in any of the completed pages, and the fully functional breadcrumb navigation menu that is updated at the top of the page. The search feature is also functional, displaying only search results for “Diabetes” and “Heartburn” for the demonstration purposes. Furthermore, the “Bookmarking” functionality has been completed, allowing the user to bookmark and rename any page or category by simply clicking on the “Bookmark” icon. Removing a bookmark is also as simple as clicking on the “Bookmark” icon, similar to the existing bookmarking functionality from standard web browsers. Bookmarks may be retrieved from the “Bookmarks” dropdown menu available at the top of the screen. Pending: None.

[Page 18]



EXERCISE MODULE

Completed: The Exercise module has been completed according to the specifications in its majority in terms of both design and functionality. This module is comprised of four tabs: “Summary,” “Physical Readiness Test,” “Physician Assigned,” and “Personal.”

“Summary” screen: the radar chart that summarizes the status of the user’s PRT results has been completed. This chart is interactive; it updates its values to display PRT results at any point in time, which is controlled by the user when rolling over the icons on the timeline below the chart. The selected icon is color-highlighted based on the type of entry (patient entry or PRT test results). This also updates the detailed values available in the “Physical Readiness Test” box, which also includes colored smiley faces to represent the user’s performance level. This box, the “Physician-assigned” box, and the “Personal” box have been completed successfully.

“Physical Readiness Test” tab: The landing screen for this tab has been completed; it includes sparklines that represent an overview of the trends in each of the patient’s PRT records—namely “Avg. PRT Score,” “1.5 Mile Run,” “Curl Ups,” and “Push Ups.” Consistent with the design used in the “Vital Signs” module, each sparkline is a line chart embedded in a custom made component that allows the user to expand or collapse each chart, drag and drop the charts to rearrange them freely. Each tracker of the PRT record is also custom-made so that only the latest entry is highlighted by default. As the user rolls over the chart, each entry is highlighted, while the others are deselected. The icons representing each PRT exercise have been included accordingly. The “passing score” is denoted in the chart with a red line. The information on the selected entry point (represented as a node) is also displayed in text form to the right of the charts along with colored smiley faces representing the user’s performance level, and updated accordingly as the user rolls over the chart. The chart also distinguishes between patient entries and provider entries with different designated color and shapes. The functionality that allows the user to click on any point in any of the charts has been completed; triggering a popup box that summarizes all the PRT records at the indicated date.

The “Detailed View” for the “1.5 Mile Run” measure (under the “Physical Readiness Test” tab) has also been completed. This detailed view displays the trends in history, and compares the user’s status with the goal and references. In this view, the user can also distinguish who entered each record, depending on the color. The chart’s background includes useful color references, allowing the users to easily recognize their results’ connotation. Above the chart, the users can view more information associated to the selected entry, or the last data entry if there are none selected. This includes the colored smiley faces representing the user’s performance level, and difference in values compared to the previous data entry along with colored triangle-

[Page 19]



arrows indicating increase or decrease in values. This information is updated accordingly when the user rolls over any point in the chart. Furthermore, the “Edit Goal” functionality has been completed: a popup window is displayed allowing the user to enter a new goal either by typing it into a text field or by dragging an interactive slider that automatically updates the corresponding text fields. The new goal may be either a point-goal, or a time-goal. Upon setting a new goal, the goal line in the interactive chart is adjusted accordingly.

The “Physician Assigned” tab: The landing screen for this tab has been completed; it also includes sparklines that represent an overview of the trends in each of the patient’s physician-assigned records—namely “Run / Walk”, and “Bike”, along with a tracker for “Comments”. The features and functionality for these sparklines are consistent those used in the “Physical Readiness Test” tab, and the “Vital Signs” module (namely dragging/dropping, expanding/collapsing, interactive rollovers, exercise icons, detailed window when clicking, etc.) The functionality for “Record Results” has been completed, allowing the user to enter any exercise records for any specific date. The “Record Results” form allows the user to enter exercise data either manually, or to import it from a file containing downloadable data.

The “Detailed View” for the “Run / Walk” measure (under the “Physician Assigned” tab) has also been completed. Besides the detailed chart showing trends in history and a comparison to the user’s goal, this detailed view includes a complete breakdown of the exercise’s details: the metadata for assignee, date of assignment, goals, reasons for assignment appear at the top. Detailed data associated with the selected entry appears above the chart, which is updated as the user rolls over any point in the chart. Historical data appears below the chart.

The “Personal” tab: the landing screen for this tab has been completed with the sparklines that represent an overview in trends in each of the patient’s personal records—namely “Bike” and “Hike” for demo purposes. The tracker for “Comments” has been implemented. Features and functionality for these sparklines are also consistent with other tabs in the module. The user may view his/her exercise records in either chart view or list view. One difference in this tab is the ability to add trackers, both “trackable” and “untrackable.” Trackable exercises are those that have associated attributes assigned to them (i.e., distance, duration, and speed), whereas any other exercises will be considered untrackable; they do not have predefined attributes. The user can keep track of untrackable exercises with text entries, which are distinguished with custom charts showing text icons instead of the sparklines used for trackable exercises. When adding a trackable exercise, the options include “Run/Walk,” “Bike,” “Swim,” “Elliptical Machine,” “Yoga,” and “Weight Training.” Each of these has a specific set of options the user can choose to track—for example if the user wants to track a “Swim,” he/she can choose from the 4 common strokes (i.e., freestyle, fly, breast, and back), enter distance, date/time, duration, speed, and calories burned. Additionally, the user may choose to import his data from a device instead. If the user chooses to add an untrackable exercise, the options include the exercise name, date, and comments.

Pending: When rolling over any chart on the “Physical Readiness Test” tab, the “View History”, “Delete”, and “Help” buttons need to appear. There is a minor alignment issue that needs to be fixed on the “Switch” dropdown menu, under the 1.5 Mile Run PRT sparkline.

[Page 20]



NUTRITION MODULE

Completed: The Nutrition module has been completed according to the design specifications. This module is comprised of three tabs: “Summary,” “My Food Plan,” and “My Food Journal.” When entering the module, a popup showing tips appears.

The “Summary” tab: this screen includes a section for the user to record his/her daily meals and water intake, the summary of the daily food journal, and the food plan. The “Record a Meal” section is functional, allowing the user to select a meal type (breakfast, lunch, snack, or dinner), and either select a saved meal or manually submit a new meal. Then, the user can indicate the portion, and enter comments (optional). Upon submission, the “My Plate” pie chart, the “Calories” bar charts, and the “Calories from Extras” icons under “My Food Journal” get automatically updated, representing the nutritional and caloric values according to the meal entered by the user. The “Record a Meal” section includes a help menu in popup form, allowing the user to navigate different help sections. The “Record Water Intake” section is functional, allowing the user to enter how many water cups have been taken by clicking on the cups. The cups get filled upon clicks representing the intake. There is also the “My Health Focus” section, which includes suggestions and links to other modules in the application, such as Medications, Exercise, and Vital Signs.

The “My Food Plan” tab: this screen shows details on the food plans assigned by the dietitian, physician, or both. On the top, the user can read the start date, reasons for plan, and any additional directions. A plate-shaped graph, also known as “My Plate” originated in U.S. Department of Agriculture (USDA), includes the number of recommended servings per food type. The plate graphic includes a rollover functionality displaying additional information on food examples and serving sizes per food type (e.g., grains). To the right, icons indicate the recommended intake amount for sodium, fats & oils, sugars, alcohol, and water. Below, images indicate which “Foods to Increase” and “Food to Limit.” The “Notes from My Doctors” section includes a list with healthcare providers’ recommendations, which the user can “Mark Completed” / “Unmark Completed,” as well as remove permanently. Also, the bottom-right of the screen shows a list of “Suggested Meals for a Day.” Finally, the “Download Worksheet” button is functional, displaying a popup asking the user to confirm downloading the food plan worksheet.

The “My Food Journal” tab: this screen shows a graphical summary of the user’s food consumption on a daily, weekly, or monthly basis. The “My Plate” graph, the “extras” icons, the “Calories” bar chart, and “Calories from Extras” bar chart display a visual representation of the meal(s) entered by the user. The “Total Calories” and “Calories from Extras” bar charts are custom-made; a warning color is used in the case the user consumes more calories than suggested (budgeted). If “Calories from Extras” exceeds the bar chart’s limit

[Page 21]



(500), this limit gets updated as specified in the design document. The textual representation of “Total Calories Consumed” gets updated accordingly. The “Learn How to Cut Calories” link is in place; this link points to the corresponding “Food & Diet” page in the Educational Resources module. When switching to “weekly” view, the individual “Calories” bar chart gets replaced by a comprehensive bar chart showing a calories intake representation of the entire week, including highlights of the days when the user went over the daily calories budget. The “Average daily calories consumed for this week,” text-based, is calculated accordingly. The user may navigate to previous weeks; this action will cause the charts and icons to get updated with the corresponding values for the selected week. Similarly, when switching to the “Monthly” view, an interactive line graph is displayed showing calories intake representation of the entire month. This line graph includes a red horizontal line representing the daily calories budget, so the user can easily recognize days he/she went over the limit. The user can also navigate to previous months, which will cause all charts and icons to get updated with the corresponding monthly values. Below, there is a table showing “What I Have Eaten Today/This Week/This Month” (based on current time range selection), which includes details of every recorded meal, along with any comments the user may have entered. Some meals (i.e., “Spinach quiche”) include the rollover functionality, showing the meal’s calories breakdown in a popup form as specified in the design specifications. Furthermore, this table includes a functionality to “Save” a meal. This action confirmed after clicking on the “Confirm” button will cause the meal to appear in the “Saved Meals” menu when recording future meals. The user can also manage the saved meal (e.g., deleting meals listed in the “Saved Meals”).

Documents

Visual Dashboard and Heads-up Display of Patient Conditions: … · 2012-08-15 · [Page 6] ©20 Visual Dashboard and Heads-up Display of Patient Conditions: Engineering Volume Damian