Design

=  = =Low Fidelity Prototype Design =

**Contents: **

 * Templates of page design
 * Explanation of the location of elements
 * What are the elements and what they will do

**Motivation:**
====The purpose of our product is to create a web space that will be universally suitable for all users of various ages and disabilities. Whether you are a college student, to an elderly user with impaired vision, our objective is to construct an online user-friendly web page. Our product will allow any individual to access and set appointments online to their personal health institute. Our intention is to focus on usability, accessibility and functionality during our developmental process (Maximum 3 clicks to any functionality) ====

**Functions:**

 * ====Navigation bar: Will enable users to locate relevant content that they need. The navigation bar will contain a list of generally accessed URLs, a basic content area search function, and a list of all of the available categories of health information needed. ====
 * Icons / symbols: The icons available on the web browser will allow users to perform actions and tasks when clicked. Each icon has a different task and once an icon is clicked, a new page will be opened. Note: Alternate text on images – when cursor is placed over an icon, the image will shift to text to ensure users the task they are going to perform
 * Language options: Drop down menu options for Canadian Health patients are available in English and French (primary languages for Canada). However, there will be an option for other secondary languages (Italian, Portuguese, Chinese, Hindu, etc) to accommodate to those who cannot comprehend English and or French.

<span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">**Header links will include the following:**

 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">Home - The very front, log in-prompt page
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">Bookings – In this section, users will have the option of scheduling a booking, or cancel a booking. There will also be a table showing the next two appointments with a cancel option. Below the table in the right corner will have a display of all appointments - color markers on days where appointments are open for bookings.
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">Prescriptions – In this section, it will allow patients to notify pharmacies in advance for prescription pick-ups. Once appointment is set, an automatic invoice issued by a health specialist (patient’s doctor) will be sent to a pharmacy to pick up prescriptions.

<span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">Note: invoice is sent after patient has had doctor’s approval for prescribed medicine

 * ====<span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">My Profile – Allows patients to view and edit personal account information. Basic information such as name, age, address, city, contact number, and personal medical history will be placed in this area. Users also have the option to edit and update personal information – ‘Edit my profile’ segment where they can change contact numbers or current addresses ====
 * ====<span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">Log out – This option allows users to safely log out of their accounts and close all personal information. ====
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">Learn More – We plan to include a micro-site for learning more about the online medical community and other useful links that will educate and help patients learn more about our product
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">Help - Help section (both a text and video version) will help users learn and successfully use our applications thoroughly. The ‘Help’ option will guide first time users around our web site, however it is highly gratuitous because our goal is to create a user-friendly environment
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">Log in Page - In this section, each patient will be given a personal user ID and password that will grant him or her access to the healthcare database. The user ID will be the patient’s health card # which consists of 10 digits. For first time users, the password will consist of the last 4 digits of the patient’s social insurance number. Once the patient logs in with the user ID and password, the patient will then be given an option to change the password.
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">Appointments – Patients will be alerted of upcoming appointments or cancellations. These reminders will occur either through e-mail, text message or through an automated phone call within 24 hours before their appointment. This alert will also afford users the option to cancel their booking should they have the need to. A user can also modify this preference so that they may receive their alert in their chosen form.
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(4,98,21);">Summary page : - This page will contain all, if any relevant booking information to the patient. There will be links listed just below this information so that the user can easily make any modifications to their account. The three links will be: make a booking, cancel a booking, and edit profile.


 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(0,0,0);">Cascading Style Sheets (CSS) : they automatically fit the window to the size of the computer screen
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">Text alternatives for non-text content, like picture footnotes.
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">Simple layout (no frames) so the content can be presented using accessibility software
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">All functionality available from the keyboard
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">Navigation bars that tell you where you are. For example, the home button shows up as depressed or shadowed when you are on the home page
 * <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">All links should be introduced, and if the link isn't the address, the linked word should describe where the link goes.

<span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">
====<span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">Universal accessibility has been a key consideration throughout the process of the design of our web space. We have opted to keep the look and feel as simple as possible so as to avoid confusion and clutter. The main focus has been to ensure that the system delivers its main function in the user-friendliest fashion possible. To accommodate for this we have kept a very basic look and feel to the layout of our site. The gray border, which encircles the white background and black text, employs a very minimal use of colour, which reinforces our emphasis on functionality as opposed to an aesthetically pleasing design. This choice also provides the site with the best colour contrast for users who are vision impaired. Users with vision impairments will also benefit from the screen magnification options found in the top right hand corner of the screen. ==== <span style="font-size: 12pt; font-family: Arial,Helvetica,sans-serif;">
 * Low Fidelity Prototype Design**

Language Selection: Design Process: Before logging into your user account, the first page that will appear is language selection. Here, the user is prompt to select their language preference. The option of English or French will be a default setting, however with the implementation of secondary languages such as Latin, Chinese, and Italian to name a few, will be inserted to reach a wide scale user base. The colour scheme selected was black, white and red. To keep it simple, we wanted to have the user focus on the center of the page. We chose red as the buttons because it is a strong colour that would have the user direct their attention to selecting their preferred language. We felt that red creates a sense of urgency, which would visually direct

Log in Page: Design Process: Once language setting is selected, the user will be relocated to a log in page. In order for first time users to log into their account, they must log in with their Ontario Health Card Number. Their initial password will be their last 4 digits of their home phone number. Once they are logged in, the user is prompted and must change initial password. The colour scheme selected in each template is medical green, and dusty rose. Our aim was to create an environment that is soothing and relaxing to the user. These selected colours reflect a calm and subtle atmosphere for our users. The log in text was placed on the left side of our screen because users read from left to right. We placed the log in box on the right side of the page because it is where most attention is placed when users scan left to right. Once user inserts identification number and password, there is a warning label under the log in box that explains to users to protect their privacy at all times.

Summary Page: Design Process: This page will contain all, if any relevant booking information to the patient. There will be links listed just below this information so that the user can easily make any modifications to their account. The three links will be: make a booking, cancel a booking, and edit profile. Upcoming appointments and Find a doctor will also be on the home page. This will allow the users to access important information instantly once they are logged in. Our goal here is to make important information accessible for the user. Accessing upcoming appointments, seeing doctor availability, and searching for specific doctors are implemented on the home page. The layout with information access is set out on the left panel of the page because the user will see all relevant information instantly while scanning the home page from left to right. On the right side, there is a welcome panel that will display current up to date information for the user. We kept it on the right side of the page because most frequent users will not need to focus on the information, however novice users will find this information useful, as they are new to the program.

Appointment Availability: Design Process: Users can search for availability dates with family physicians, or briefly scan through their schedule on the home page. Scheduling will be determined on month, date, and time of setting an appointment. When the user wants to make an appointment with their default family physician, there will be a drop down panel for them to chose a specific month and date. Based on availability, the date with blue text will display availability times with the doctor, however if the date selected is black, the doctor will not be available to schedule appointments.

Booking Page: Design Process: Patients will be alerted of upcoming appointments or cancellations. These reminders will occur either through e-mail, text message or through an automated phone call within 24 hours before their appointment. This alert will also afford users the option to cancel their booking should they have the need to. A user can also modify this preference so that they may receive their alert in their chosen form. Our goal here was to create a scheduling system that would allow users to create and edit their appointments. The doctor’s name, date, time, details, and cancellations will be displayed for the user. When user scrolls down to each appointment date, a pop down display will appear and display relevant information based on the date chosen for booking.

Find A Doctor: Design Process: Find a doctor is placed on the right hand side of the page. Here, the user can search a specific doctor based on their last name specialist area, city, or postal code. The specialist area and city will be drop down buttons for specificity. Similar to setting an appointment with your family physician, finding a doctor is also accessible for our users. Once you have searched for a doctor with their listed information (specialist area, city, postal code) a list of physicians will appear in a display box. Once the physician is found, will be able to see their availability schedule and book an appointment with them. Month, date, and time of appointment will vary between physicians.

My Profile Page: Design Process: This page will allow patients to view and edit personal account information. Basic information such as name, age, address, city, contact number, and personal medical history will be placed in this area. Users also have the option to edit and update personal information – ‘Edit my profile’ segment where they can change contact numbers or current addresses/contacts. The purpose of this page is for patients to view their personal information and contact information that physicians will have access to. All personal information is confidential; therefore this content will be disclosed between physician and patient. We decided to keep all relevant information on the left side of the page because it is a quick and easy scan for patients to view. With an ‘Edit’ link beside each information segment, it will be easy and accessible for patients to edit and change information. When user clicks on the ‘My Profile’ button, a drop down button of their ‘Medical History’ will be displayed for future reference with physicians.

Medical History Page: Design Process: Medical history is designed for the physician’s reference on patient’s physical health, and for the patient’s awareness. The Medical History is a detailed report on past diagnoses on the patient given from their medical institute. All information stored in this segment is confidential and will only be accessed by physician and patient. With the interconnection between Medical History and My Profile, users can easily access both information using the drop down button on the navigation bar. All relevant information is displayed on the left panel for quick and easy scanning. Diagnosis, date, and medical condition will be listed to each medical brief. The more medical visits will implement a scroll down bar. Medical History will vary between users.

Log Out Page: Design Process: Once the user is finished setting appointments, checking upcoming bookings, searching for a physician, or editing their profile, they are prompted to log out of their account. The log out function will allow users to safely close all personal information. We want to keep it simple, and sleek. Just to let the user know that they are safely logged out and must close their browser to avoid personal information. Our warning text is displayed in red to show the urgency of this information to the user.

= Previous Section//Next Page =