Challenge Overview
Challenge Summary
Welcome to "Scheduling Tracking Application UI Prototype Challenge Part 2". This challenge is the 2nd prototype challenge that being launch with a purpose is to finishing HTML5 prototype for a Scheduling Tracking application using our wireframes and storyboard for user flow and the look and feel. This is straight forward prototype challenge with only one device (desktop/web) needs to be supported. We already finished the first part of the prototype and want to finish the rest of the remaining pages from the wireframes. Join us NOW!!
Existing Application Overview
The application is a scheduling/tracking application that allows our user to setup and manage updates to schedules for construction projects (tasks, subtasks, hours projected per week, hours spent per week, % complete, ...etc). There is also a materials tracking ability, a couple of different screens to report on the data, and a few different graphs displaying progress. The existing application was built using Powerbuilder, connected to an MSSql database as it’s backend.
This project goal is to renew the application using latest popular technology. In this challenge, we need your help to create HTML5 prototype for this application using our wireframes as your workflow references and storyboard for the look and feel. We already have base prototype that you can use to create the remaining pages.
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.
Note: In the previous challenge (part1) we developed several pages as the prototype base, and in this challenge (Part 2) we are targetting to finish and create all screens from wireframes and grouping it according to their user roles.
Important:
- The main goal is to create and finish all pages from wireframes and make sure everything is consistent.
- You are provided with prototype part 1 so you can use it as your starter guide and finish what we started.
Below are the required pages for the applications :
General Requirements :
1. The storyboard currently use 960px as the default width, we need to expand it to 1300px. The Prototype part 1 already cover this and we need you to apply this into the remaining screens.
2. All HTML page in Prototype Part 1 belongs to admin roles, please add them into Admin user roles (check wireframes for the navigation hierarchy).
3. Headers above tables (for ex. Project Information and Schedule Information in Schedule List - Current (Admin) screen) need to have expand/collapsible behaviour. For example, the “Project Basis Information” area on the "Schedule List - Current (Admin)” screen should hide/unhide similar to how the “Filter” button hides/unhides the filter. The client wants more room for the other information on the screen.
4. All tables should have behaviour where the data is scrollable but the headers needs to be fixed.
5. Change all “Save” buttons to “Submit”.
6. On tables that have indented tasks (Schedule - Summary (Admin) screen), add connecting lines to show tree structured.
7. Please NOTE, Many of the pages can be re-useable from our prototype part 1, and all superintendent pages will share similar layout like admin.
1) Login page
- Storyboard references 1_Login_1.png
- The real application going to use client internal login page, so this page actually not needed. We only need this page to be create for now so at first, user can choose whether they want to work as admin or superintendent in the prototype.
- No need for the error simulation, but need ability to login as two different user roles, admin and superintendendt.
Admin Roles Pages
1) Projects (Admin)
- Use and implement "projects-admin.html" from prototype part 1 to this page.
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
2) Project Create (Admin)
- Use and implement "project-create-admin.html" from prototype part 1 to this page.
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
3) Project Edit (Admin)
- Use and implement "project-edit-admin.html" from prototype part 1 to this page.
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
4) Project Permission (Admin)
- Use and implement "project-permission-admin.html" from prototype part 1 to this page.
- Notice in the "action" column of the table, there is user that don't have delete buttone, instead it have "-" added, please change the "-" into delete button.
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
5) Schedule List - New (Admin)
- Use and implement "schedule-list-new-admin.html" from prototype part 1 to this page.
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
6) Schedule List - Current (Admin)
- Use and implement "schedule-list-current-admin.html" from prototype part 1 to this page.
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
7) Schedule Create (Admin)
- There are 4 pages to create new schedule that needs to be implemented from prototype part 1 :
* schedule-create-admin.html
* schedule-create-step2-admin.html
* schedule-create-step3-admin.html
* schedule-create-step4-admin.html
- In "Tasks, Hierarchy, Hours" (schedule-create-step2-admin.html), Entering Dates should shade range of weeks selected, to aid hour spreading
- In "Tasks, Hierarchy, Hours" (schedule-create-step2-admin.html), when start and end date, when user click any date field and decides to not filled it, the date icons need to appear again, right now, after user click the fields, the date icon is disappear.
- In "Tasks, Hierarchy, Hours" (schedule-create-step2-admin.html), in Action column, the grouping square icons, insert row above and below also delete button need to be function/worked.
- In "Materials" (schedule-create-step3-admin.html), in Action column, the grouping square icons, insert row above and below also delete button need to be function/worked.
- In "Equipment" (schedule-create-step4-admin.html), Promise data column, when user click any date field and decides to not filled it, the date icons need to appear again, right now, after user click the fields, the date icon is disappear.
- In "Equipment" (schedule-create-step4-admin.html), in Action column, the grouping square icons, insert row above and below also delete button need to be function/worked.
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
8) Schedule Edit (Admin)
- There are 4 pages to create new schedule that needs to be implemented from prototype part 1 :
* schedule-edit-admin.html
* schedule-create-step2-admin.html
* schedule-create-step3-admin.html
* schedule-create-step4-admin.html
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
9) Schedule Weekly Update (Admin)
- Use and implement "schedule-weekly-update-admin.html" from prototype part 1 to this page.
- Do not break the page consistency.
- Equipments tab, Promise Date, when user click any date field and decides to not filled it, the date icons need to appear again, right now, after user click the fields, the date icon is disappear.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
10) Schedule - Summary (Admin)
- Use and implement "schedule-summary-admin.html" from prototype part 1 to this page.
- Do not break the page consistency.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
11) Schedule - Materials (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Materials (Admin)".
- All tree structure must follow our existing tree structure and needs to works well.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
12) Schedule - Materials Edit (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Materials Edit (Admin)".
- You can re-use schedule-create-step3-admin.html as base for this page.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
13) Schedule - Materials Chart (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Materials Chart (Admin)".
- tab design can be taken from schedule-summary-admin.html
- Chart does not needed to be created, it will be implemented in later phase. please provides some placeholder area to put chart in this page.
- There should be some way for user to get back to Schedule - Materials (Admin)
- Make sure all navigation items (breadcrumb, link, buttons) worked.
14) Schedule - Equipments (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Equipments (Admin)".
- We don't have storyboard for this page, so let's re-use layout from existing prototype, let's use "schedule-create-step2-admin.html" as the base layout (adjust it to match with the correct content like shown in wf).
- when user applied the filter, filter area needs to be closed.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
15) Schedule - Equipments Add (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Equipments Add (Admin)".
- We don't have storyboard for this page, re-use layout from existing prototype, maybe from "project-create-admin.html".
- Make sure all navigation items (breadcrumb, link, buttons) worked.
16) Schedule - Equipments Edit (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Equipments Edit (Admin)".
- We don't have storyboard for this page, re-use layout from existing prototype, maybe from "schedule-create-step4-admin.html".
- Make sure all navigation items (breadcrumb, link, buttons) worked.
17) Schedule - Remarks (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Remarks (Admin)".
- We don't have storyboard for this page, re-use layout from existing prototype, maybe from "schedule-list-current-admin.html".
- Make sure all navigation items (breadcrumb, link, buttons) worked.
18) Schedule - Remarks Add (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Remarks Add (Admin)".
- We don't have storyboard for this page, re-use layout from existing prototype, maybe from "project-create-admin.html".
- Make sure all navigation items (breadcrumb, link, buttons) worked.
19) Schedule - Remarks Edit (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule - Remarks Edit (Admin)".
- We don't have storyboard for this page, re-use layout from existing prototype, maybe from "project-create-admin.html".
- Make sure all navigation items (breadcrumb, link, buttons) worked.
20) Schedule Graph (Admin)
- This is a new page requirements.
- Content for this page can be seen from wireframe references "Schedule Graph (Admin)".
- We don't have storyboard for this page, re-use layout from existing prototype, maybe from "project-create-admin.html".
- Chart does not needed to be created, it will be implemented in later phase. please provides some placeholder area to put chart in this page.
- tab design can be taken from schedule-summary-admin.html
- Make sure all navigation items (breadcrumb, link, buttons) worked.
Superintendent Roles Pages
1) Projects (Superintendent)
- This page will share similar layout like "Projects (Admin)"
- Content for this page can be seen from wireframe references "Schedule Graph (Admin)".
- User won't be able to delete or set permissions to the project (hide it).
- User won't be able to create new project. hide the button.
2) Project Edit (Superintendent)
- This page will share similar layout like "Project Edit (Admin)"
- Make sure all navigation items (breadcrumb, link, buttons) worked.
3) Schedule List (Superintendent)
- This page will share similar layout like "Schedule List - Current (Admin)"
- There are several action menu that should be disable for user, hide the disable features.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
4) Schedule Edit (Superintendent)
- This page will share similar layout like "Schedule Edit (Admin)"
- Similar to admin, there are 4 pages to edit schedule and the layout can be found below :
* schedule-edit-admin.html
* schedule-create-step2-admin.html
* schedule-create-step3-admin.html
* schedule-create-step4-admin.html
- Copy and rename the HTML pages above to navigate to superintendent pages.
- Make sure all navigation items (breadcrumb, link, buttons) worked.
5) Schedule Weekly Update (Superintendent)
- This page will share similar layout like "Schedule Weekly Update (Admin)"
- Content should follow Schedule Weekly Update (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
6) Schedule - Summary (Superintendent)
- This page will share similar layout like "Schedule - Summary (Admin)"
- Content should follow Schedule - Summary (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
7) Schedule - Materials (Superintendent)
- This page will share similar layout like "Schedule - Materials (Admin)"
- Content should follow Schedule - Materials (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
8) Schedule - Materials Chart (Superintendent)
- This page will share similar layout like "Schedule - Materials Chart (Admin)"
- Content should follow Schedule - Materials Chart (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
9) Schedule - Equipments (Superintendent)
- This page will share similar layout like "Schedule - Equipments (Admin)"
- Content should follow Schedule - Equipments (Admin).
- Hide any action that should be disable for superintendent (delete button).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
10) Schedule - Equipments Add (Superintendent)
- This page will share similar layout like "Schedule - Equipments Add (Admin)"
- Content should follow Schedule - Equipments Add (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
11) Schedule - Equipments Edit (Superintendent)
- This page will share similar layout like "Schedule - Equipments Edit (Admin)"
- Content should follow Schedule - Equipments Edit (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
12) Schedule - Remarks (Superintendent)
- This page will share similar layout like "Schedule - Remarks (Admin)"
- Content should follow Schedule - Remarks (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
13) Schedule - Remarks Add (Superintendent)
- This page will share similar layout like "Schedule - Remarks Add (Admin)"
- Content should follow Schedule - Remarks Add (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
14) Schedule - Remarks Edit (Superintendent)
- This page will share similar layout like "Schedule - Remarks Edit (Admin)"
- Content should follow Schedule - Remarks Edit (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
15) Schedule Graph (Superintendent)
- This page will share similar layout like "Schedule Graph (Admin)"
- Content should follow Schedule Graph (Admin).
- Make sure all navigation items (breadcrumb, link, buttons) worked.
HTML/CSS Requirements
- Your HTML code must be valid HTML5 and follow best practices
- You're encouraged to use and take advantage of CSS3.
- 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.
- 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. You are allowed to use the JQuery JavaScript library and D3.js library for this challenge.
Browsers Requirements
- IE9 to latest version
- Firefox Latest Version
- Safari Latest Version
- Chrome Latest Version
Documentation
- Wireframes (Attached in forum)
- Storyboard (Attached in forum)
- Application Flow (Attached in forum)
- Latest Prototype (Attached in forum)
Technology
- HTML5
- CSS3
- Javascript
- Framework Js allowed : D3.js, JQuery
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.