Aceso Hospital Mobile UI Prototype v2

Project Overview:

Welcome to the Aceso Hospital Mobile UI Prototype v2! The goal of this challenge is to create Responsive HTML5 Mobile App Prototype based on provided storyboards using AngularJS framework and Bootstrap.

NOTE: This application will use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML code.

IMPORTANT: As per the project demo and presentation schedule the review timelines are very close. Reviewers please note the review timelines for further reference.

Competition Task Overview:

The main task of this competition is to develop a Responsive HTML5 Mobile Prototype based on the provided storyboard designs. We need to demo/present this next week - so its very important that as many pages and user flows are "clickable". 

Your prototype must work properly in all the required Mobile browsers. The MOST IMPORTANT browsers (what you should test in first!) being Safari Mobile & Android Mobile (example: iPhone, Android Smart Phones).

Final Fixes:
As part of this contest you will need to document all HTML5/CSS3/JavaScript code in final fixes as needed. We need clear explanation of the code to help us figuring out all HTML5/CSS3/JS codes function and make it easier for future developers.

PhoneGap: We will need the prototype to be packaged using PhoneGap  (http://phonegap.com), for our presentation. We may need PhoneGap build package during Final Fixes phase. If this is an issue - please let us know in the forums.

Required Pages:

Below are the required pages in both Portrait and Landscape orientations.

0. Landing Page:

• Customer opens the application and will show the landing page (0_0_landing_page).
• Customer logged out the application and will show the logged out page (0_1_loged_out).
• Make sure header and footer of the screen are fixed and content will be scrollable.
• Click on 'ER Wait Time' at footer, navigate user to ER wait time screen (0_2_er_wait_time_loged_out).
• At header, click on menu icon at top-left corner, slide open left navigation (main menu) screen (0_3_menu_loged_out).

1. Login Page:

• Once user clicks 'Login' buttons, navigate user to login page (1_1_log_in).
• User text entry, show active text instead of placeholder text (1_2_log_in_active).

2. Dshboard Page (user logged in):

• Once user logs in, show user the dashboard page (2_1_home_loged_in).
• At header, click on menu icon at top-left corner, slide open left navigation (main menu) screen (2_2_menu_loged_in) for logged in user.

3. Map & Direction:

• Once user selects 'Direction' at footer, show user the map page (3_map).

4. ER Wait Time (user logged in):

• Once user selects 'ER Wait Time' at footer, show logged in user page (4_er_wait_time) with all data.

5. Physician:

• Once user selects 'Physician' at footer, show logged in user find physician page (5_1_find_physician).
• The search/find physician should filter user entered physician from the list.
• Click user selects a Physician, navigate user to Physician profile page (5_2_physician_profile_detail).
• At header, the back button at top-left corner should navigate user to previous page.
• Click on send message button, navigate user to send message page (5_3_Send Message) and on submit show successful message (5_4_Sent).

6. Schedule:

• Once user selects 'Schedule' at footer, show user the schedule screen (6_1_schedule).
• On schedule page, show current month schedules with previous and next month navigations.
• At header, click on 'Add new schedule' icon at top-right corner, navigate user to add new schedule page (6_2_add_new_schedule).
• Click 'Cancel' button, navigate back user to previous page.
• Click on 'Add new schedule' button, navigate user and show newly added schedule on main schedule page (6_1_schedule).

7. Create/Edit Profile:

• Once user clicks 'Register' button from login page (1_1_log_in), navigate user to create profile screen (similar to 7_0_edit_-profile) having create profile as page title & create profile button.
• Once user clicks 'User Name' from dashboard page (2_1_home_loged_in) or menu screen (2_2_menu_loged_in), navigate user to view profile screen (7_1_edit_-profile), make the background image of email auto expandable as per text width & upto max width as shown in current design.
• Click on 'Update Profile' button on profile page, navigate user to edit profile screen (7_0_edit_-profile).
• Allow user to change profile picture by uploading new image.
• Click on back button, navigate user to previous page.
• Click on 'Cancel' button, navigate user to previous page without any change.
• Click on 'Update Profile' buuton, navigate user to previous page (dashboard/manu page) with changed values.

8. Help Page:

• Once user selects 'Help' from menu (2_2_menu_loged_in), navigate user to find help page (8_1_find_help).
• Once user filters on help page, show user the search result page (8_2_search_result).
• Once user selects 'Content' at footer, show user the health content page (8_3_health_content).
• Once user selects any health content, navigate user to details page (8_4_health_content_detail).
• Once user selects 'Video' at footer, show user the medical video library page (8_5_video_library).
• Click on back button, navigate user to previous page.
• 'FAQ' at footer should be dead link for now.

Specific HTML/CSS/JavaScript Requirements:

• HTML/CSS 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.

Font Requirements:
Use font - Arial.

JavaScript Requirements:
Use following libraries:

• jQuery
• AngularJS
• Bootstrap 3

Browsers Requirements:

• Safari Browsers on iPhone
• Android 4.1+ Chrome Browsers on Mobile

Documentation Provided:
Storyboard screens and PSD files: Storyboard.zip

Final Submission Guidelines

PROTOTYPE GOALS:
- The design should work with fluid/flexible nature, so the prototype supports both Portrait and Landscape orientations.
- We need clean documentation of the code as possible please create detailed comments for the different HTML5, CSS3 and JavaScript code.
- Please note, we are expecting the HTML5 prototype to work on mobiles.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Remember, all pages should link where possible. Please help us show correct page flow.
- Please note, the prototype should support PhoneGap implementations.
- Please use Bootstrap 3 for mobile development.
- Please use AngularJS framework for data binding.

TECHNOLOGY GUIDELINES:
1. HTML5
- Provide comments on the page elements to give clear explanation of code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts
- Make sure all HTML files pass Validation without Error/Warning.

2. CSS3
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.

3. JAVASCRIPT
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
- Please use Bootstrap 3 and AngularJS for mobile development.

4. ANGULAR JS
- Angular models are plain old JavaScript objects. Use JSON objects for data binding with view.
- Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
- Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form.
- Use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) to populate JSON data.

5. IMAGES
- For mobile development, images should be properly compressed while still having good visual quality.
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference