Challenge Overview
Project Overview:
Welcome to the Poseidon Responsive UI Prototype Challenge! The goal of this challenge is to create an HTML5 Prototype application for iPad/iPhone based on provided storyboards for Poseidon Application. The prototype must follow our standards and our guidelines. Please see more details below.
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/JS code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application is using Bootstrap 3 (http://getbootstrap.com/getting-started).
IMPORTANT: As per the project schedules the review timelines are very close. Reviewers please note the review timelines for further reference. Please request us if you need additional time for review in case we get more number of submissions.
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 HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Required Pages:
- Note: iPad Landscape, Portrait and iPhone Portrait mode need to be supported.
1) Splash page:
- IPad_Page_1_Splash_Screen.jpg & Page_1_Splash_Screen.jpg.
- User opens the application and will see splash page.
- After the application finished loading (mock it up) the user will be redirected to landing page.
2) Landing page:
- Ipad_Page_2_Landing_Page.jpg & Page_2_Landing_Page.jpg.
- Clicking on ”Getting Started” button will redirect user to login page.
3) Login & Create New Account Pages:
A- Login Page
- Ipad_Page_3_0_Login_Screen.jpg & Page_3_0_Login_Screen.jpg.
- Clicking on ”Login” button will redirect user to dashboard page.
- Clicking on ”Create New Account” link will redirect user to create new account page.
B- Create New Account Page
- Ipad_Page_3_1_Create_New_Account.jpg & Page_3_1_Create_New_Account.jpg.
- Clicking on “Create New Account” button will redirect user to dashboard page.
4) Dashboard page:
- Ipad_Page_4_Dashboard.jpg & Page_4_Dashboard.jpg.
- From this page the user will be able to access all the application pages.
- Clicking on ”Assignment” will redirect user to assignment page.
- Clicking on ”Special Request” will redirect user to special request page.
- Clicking on ”Profile” will redirect user to profile page.
- Clicking on ”Alert” will redirect user to alert page.
5) Assignment pages:
A- Assignment Page:
- Ipad_Page_5_0_Assignment.jpg & Page_5_0_Assignment.jpg.
- User will be able to move between days to see his assignments from the 2 arrows at the top.
- Use a placeholder for the weather widget.
- Clicking on ”Plus” icon will redirect user to add assignment page.
- Clicking on ”Ship Name” or the right arrow will redirect user to assignment detail page.
B- Assignment Detail Page:
- Ipad_Page_6_Assignment_Detail.jpg & Page_6_0_Assignment_Detail_1&2.jpg.
- Clicking on ”Edit Entry” will redirect user to edit assignment page.
- “Send Message” & “Phone” are dead links.
C- Edit/Add Assignment Page:
- Ipad_Page_7_Edit_Assignment.jpg & Page_7_0_Edit_Assignment_1&2.jpg.
- Ipad_Page_8_Add_Assignment_.jpg& Page_8_0_Add_Assignment_1&2.jpg.
- Clicking on ”Save” & “Cancel” will redirect user to assignment detail page.
- Notice the active status for “Status” & “Alarm”, user should be able to toggle them on click.
6) Special Request pages:
- Those are duplicates from Assignment pages, so duplicate them and change the name of the files.
- The only difference is in Edit/Add special request we have a new “Rejected” status under status.
7) Profile pages:
- Ipad_Page_13_0_My_Profile_open.jpg & Page_13_0_My_Profile_open.jpg.
- ”X” icon will be a dead link.
- Clicking on ”Edit” icon will redirect user to edit profile page.
- Clicking on ”Ship Name” or the right arrow will redirect user to edit assignment page.
- User have 3 tabs here:
- Open Cases Tab:
-- Ipad_Page_13_0_My_Profile_open.jpg & Page_13_0_My_Profile_open.jpg.
- Rejected Cases Tab:
-- Ipad_Page_13_1_My_Reject.jpg & Page_13_1_My_Reject.jpg.
- Completed Cases Tab:
-- Ipad_Page_13_2_My_Profile_complete.jpg & Page_13_2_My_Profile_complete.jpg.
A- Edit Profile Page:
- Ipad_Page_14_Edit_Profile.jpg & Page_14_Edit_Profile.jpg.
- Clicking on ”Save” & “Cancel” will redirect user to profile page.
8) Alert pages:
- Ipad_Page_15_0_Alert_High_Priority.jpg & Page_15_0_Alert_High_Priority.jpg.
- ”Add” plus icon will redirect user to add new alert page.
- Sliding the alert from right to left will show “Delete” & “Edit” options:
-- Ipad_Page_15_1_Alert_High_Priority_Slide_Function.jpg & Page_15_1_Alert_High_Priority_Slide_Function.jpg
-- Clicking on “Edit” icon will redirect user to edit alert page.
-- Clicking on “Delete” icon will delete the alert and the user will see “Delete” entry modal
--- Ipad_Page_15_2_Alert_High_Priority_Slide_Function_Delete_Confirm.jpg & Page_15_2_Alert_High_Priority_Slide_Function_Delete_Confirm.jpg
- Clicking on ”Alert Name” or the right arrow will redirect user to alert detail page.
- User have 3 priority tabs here:
- High Priority Tab:
- Ipad_Page_15_0_Alert_High_Priority.jpg & Page_15_0_Alert_High_Priority.jpg.
- Medium Priority Tab:
-- Ipad_Page_15_3_Alert_Medium_Priority.jpg & Page_15_3_Alert_Medium_Priority.jpg.
- Low Priority Tab:
-- Ipad_Page_15_4_Alert_Low_Priority.jpg & Page_15_4_Alert_Low_Priority.jpg.
A- Alert Detail Page:
- Ipad_Page_16_Alert_Detail.jpg & Page_16_Alert_Detail.jpg
- Clicking on “Cancel” will redirect user to alerts page.
- Clicking on “Edit” will redirect user to edit alerts page.
B- Edit/Add Alert Page:
- Ipad_Page_17_Edit_Alert.jpg & Page_17_Edit_Alert.jpg
- Ipad_Page_18_Add_Alert.jpg & Page_18_Add_Alert.jpg
- Clicking on “Save” & “Cancel” will redirect user to alerts page.
9) Menu & Misc:
- Ipad_Page_5_1_Assignment_with_Menu.jpg & Page_5_1_Assignment_with_Menu.jpg.
- Clicking on ”Home” will redirect user to dashboard page.
- Clicking on ”Assignment” will redirect user to assignment page.
- Clicking on ”Special Request” will redirect user to special request page.
- Clicking on ”Profile” will redirect user to profile page.
- Clicking on ”Alert” will redirect user to alert page.
- Clicking on ”Log out” will redirect user to alert login page.
- Notice the active state of the menu.
- Clicking on “Back” will take you to previous page.
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 layout 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 used must not have any copyrights to any 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.
- You are allowed to use JQuery for this contest.
- Bootstrap 3
Browsers Requirements:
- Safari Browsers on iPad and iPhone
- Chrome Browser on iPad and iPhone
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
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.