Challenge Overview
Project Overview:
Welcome to the Aceso Hospital Mobile UI Prototype v1! The goal of this challenge is to create a 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.
IMPORTART: 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 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 if 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.
1. Landing Page:
- Customer opens the application and will show the landing page (01_1_Landing_page).
- Make sure header and footer of the screen are fixed and content will be scrollable.
- Show carousal with configurable timing in JavaScript (refer screens 01_1_Landing_page, 01_2_Landing_page).
- Only for logged in user, show notifications at top-right corner button with 3 alerts - pickup random alerts after some duration using JavaScript code.
- At header click notifications at top-right corner button with 3 alerts, navigate user to notification screen (01_3_Landing_page) (Alerts are only show if the user has logged-in)
- At footer show ER Appointment as green/orange colors (green if it is less than 15mins) as like screens (01_2_Landing_page, 01_4_Landing_page).
- Click on ER Appointment bar at footer, navigate user to ER appointment details screen (01_5_Landing_page).
- At header click on menu icon at top-left corner, slide open the left navigation (main menu) screen (01_6_Landing_page).
- Click on 'Patient Tools', it should slide open the left navigation (sub menu) screen (01_7_0_Landing_page), but user can't navigate inside the app using sub menu click.
- For logged in user, clicking ''Patient Tools', it should slide open the left navigation (sub menu) screen (01_7_0_Landing_page) and user can navigate inside the app using sub menu click.
- Please use dead links for other menu and sub menu items for now.
2. Locations Map:
- Once user selects 'Our Locations' from main menu (01_6_Landing_page), navigate user to locations Map view (02_1_Locations_map).
- Show google map on this page and location details on popup (02_2_Locations_map).
- Click on List view, then switch the locations into List view (02_3Locations_list).
3. Find a Physician:
- Once user selects 'Find a Physician' from main menu (01_6_Landing_page), navigate user to By Specialty view (03_1_Find_a_Physician).
- Click on By Physician view, then switch the page into By Physician view (03_2_Find_a_Physician).
- Click on 'Submit' button, navigate user to results page (03_3_Physican_List).
- Select any physician from results page, navigate user to physician profile page (03_4_Profile).
- Click on 'Message Physician', navigate user to send message screen (06_3_Send_Message).
- Click on 'View Schedule for Appointment', navigate user to calendar appointment page (03_5_Make_Appointment).
- Select any available date (green color), navigate user to request appointment page (03_6_Send_Request) - here user can enter or select favorite physician.
- Click on time, show screen (06_7__SetTime) and click on date, show the screen (06_8__SetDate).
4. ER Wait Times:
- Once user selects 'ER Wait Times' from main menu (01_6_Landing_page), navigate user to ER wait times screen (04_ER_Wait_Times).
- Use CSS3 to show clock with animations for the minutes remaining.
- Show tap on state colors on each clock items including text.
- Click on ER clock item, navigate user to ER appointment details screen (04_1_ER_Wait_Times).
5. Health/Medical Library:
- Once user selects 'Health/Medical Library' from main menu (01_6_Landing_page), navigate user to health/medical library screen (05_1_Health_Medical_Library).
- Search Library will be just field and no actions for now.
- Click on any item on this screen, navigate user to details screen (05_2_Health_Medical_Article).
- At header, click on back button at top-left corner on screen (05_2_Health_Medical_Article), navigate user to previous page.
- At header, click on share button at top-right corner on screen (05_2_Health_Medical_Article), show sharing options in popup (05_3_Health_Medical_Library_sharing_options).
- Click on close button should close the options popup and show the previous page.
6. My Schedule:
- Once user selects 'My Schedule' from sub menu (01_7_0_Landing_page), navigate user to my schedule screen (06_1_My_Schedule).
- Show calendar view control with previous and next month navigations.
- Show appointment schedule for some dates and once user clicks on these items, then navigate user to show appointment details screen (06_9_My_Schedule).
- Click on 'Message Physician', show user the send message page (06_10_Send_Message) and on submit show the success message (06_11_Sent).
- Click on 'My Schedule' at header toggle the sub menu (01_7_0_Landing_page) as shown on screen (06_0_patient_tools_quick_menu).
- On 'My Schedule' page, click on make an appointment, show user the create appointment screen (06_3_Make-Appointment).
- Once user selects 'Make an Appointment' from sub menu (01_7_0_Landing_page), navigate user to my schedule screen (06_3_Make-Appointment).
- Click 'Submit' button on create appointment, navigate user to my appointment screen (06_4__Appointment_List).
- By selecting any appointment from the list, show user the view appointment screen (06_6__View_Appointment).
- Click on 'Edit' button, navigate user to edit appointment screen (06_6__Edit_Appointment), on save navigate user to my appointment screen.
- Click on update time, show screen (06_7__SetTime) and click on update date, show the screen (06_8__SetDate).
- Click on back button, navigate user to the previous page.
7. My Profile:
- Once user selects 'My Profile' from sub menu (01_7_0_Landing_page), navigate user to my profile screen (07_1_My_Profile) which is not signed in view.
- Click on 'Sign in to your account' button, navigate user to my profile screen (07_2_My_Profile) and click on list of attributes, show the text details in accordion (expanded).
- Click on 'Create Profile' button is a 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.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Font Requirements:
Use font - Arial.
JavaScript Requirements:
Use following libraries:
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