Challenge Overview
Welcome to the "Heritage - Hybrid HTML5 Mobile UI Prototype" The goal of this challenge is to create a HTML5 Prototype application for various mobile device such as iOs/Android based on provided storyboards.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML code.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in latest safari browser in iPhone 4s, iPhone 5, 5s. 6 and 6 Plus and latest Android browser.
Required Pages:
Below are the required pages in Portrait orientation only. This prototype should support retina display. We would prefer to use single page app using AngularJS templates.
01. Login Scenario Screens
Reference 01-0_Login.png to 01-4_Login_Map.png
- splash screen needs to appear for few seconds before show login screen.
- Make sure provide error login interactions.
- Register button can be dummy for now.
- Click/Tap Urgent Care Center will bring user to 01-3_Login_Map.png.
- Loading screen needs to be smooth and animated (the progress bar)
- Provides Map interactions to show current location.
02. Landing Page Scenario Screens
Reference 02-1_Landing Page.png to 02-5_Landing Page_Select Nav.png
- by default, show 02-1_Landing Page.png after successfull login.
- This page will show navigation solution to explore the applications.
- Make sure font setting, notifications, hamburger menu, and all the navigations have the correct flow an works.
03. CCM Summary Scenario Screens
Reference 03-1_CCM Summary.png to 03-7_CCM Summary.png
- In Outstanding Tasks and ICT Team Member Assigned, the table content should be scrollable horizontally.
- Provide a general overview of all pertinent information related to the patient's CCM status
- Displays the recommended program, clinical profile, social & family profile, assigned Interdisciplinary Care Team (ICT), education history and outstanding followup tasks
- Bottom area of the screen have expand/collapse tab created (Recommended program, ICT Team Member assigned, etc). .
04. CCM Care Plan Scenario Screens
Reference 04-1_CCM Care Plan.png to 04-5_CCM Care Plan.png
- Care Plan is a tool to document and address the individual needs of a patient based on their health conditions.
- A comprehensive care plan identifies goals for the patient, according to their needs and priorities, and barriers in achieving those goals.
- This page helps to monitor the progress of a patient and is continuously used to reassess the needs of the patients in terms of clinical, behavioral, social and cultural necessities.
- Care Plan gives the ability to document chronic conditions, pain assessments, assess mental health, activities of daily living, life planning activities, caregiver resources, and community resources.
- Follow up tasks can be assigned to various ICT members who are involved in providing care to the patient.
- Links to various assessments like PHQ2, PHQ9, Home Safety and Mental Health are provided, which can further be printed out as a survey and/or narrative, and provided to the patient or the PCP.
05. Disease Management Scenario Screens
Reference 05-1_Disease Mgt.png to 05-5_Disease Mgt.png
- Summarize all pertinent information related to disease management for a specific patient.
- The summary identifies the recommended disease programs and the patient's enrollment status.
- It also identifies the criteria to be managed/followed up for each disease management program.
- For each criteria, the goal and the latest values are shown.
- The case manager, after reviewing the information, can document the actions taken and set up future follow up task.
- The case manager can also complete any open follow up tasks.
06. Medical Reconciliation Scenario Screens
Reference 06-1_Med Reconciliation.png to 06-5_Med Reconciliation.png
- Used to document all of the medications that the patient is currently taking. It allows the user to review the patient's history of prescribed medications and add specific medications to the current list. It also allows the user to search and add for a specific medication from a comprehensive data warehouse
- Contraindications are displayed to reduce potential/actual adverse drug interactions which may cause harm to the patients
- Follow up action items can be assigned to ICT
- Attestation is required by an ICT that is a physician, pharmacist, physician assistant, nurse practitioner or registered nurse
- After a recent hospital discharge, a post discharge medication reconciliation letter and form can be generated in PDF for the provider to review and make any appropriate changes
07. Profile Scenario Screens
Reference 07-1_Edit Profile.png to 07-3_Edit Profile.png
- Standard settings to edit user profile.
08. Member Send Email Scenario Screens
Reference 08-1_ICT Member_Send Email to 08-2_ICT Member_Send Email.png
- This application needs to provide additional features to send emails to ICT Team members.
Specific HTML/CSS/JavaScript Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent")
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. We would like to use following JavaScript libraries:
- jQuery
- AngularJS
Browsers Requirements:
- Safari Browsers on iPhone 4S, iPhone 5, iPhone 5S, iPhone 6 and iPhone 6+ (iOS 5+)
- Latest Android Browser.
Documentation Provided:
Storyboard screens and PSD files: Posted in Forum.
Final Submission Guidelines
Submission Deliverables:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
For each member, the final submission should be uploaded to the Online Review Tool.