Challenge Overview
Challenge Summary
Welcome to "Scheduling Tracking Application UI Prototype Challenge Part 1". This challenge's purpose is to create an 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. Join us NOW!!
Challenge Details
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.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Notes
- As possible we need all pages in this prototype linked each other. Let us know if you need clarification about the flow.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- Match All Fonts like on storyboard. Use @font-face technique if necessary.
- Provides hover state look for every buttons and links. Make sure the style not far off from our current storyboard.
- For any layout elements style that don't have screen referenes, use our GUI Kit for your early references and ask in forum for more explanation about it.
Required Pages :
General Requirements :
1. 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.
2. All tables should have behaviour where the data is scrollable but the headers needs to be fixed.
3. Change all “Save” buttons to “Submit”.
4. On all weekly update screens - change text above line items: "Week 7 - 18 Aug 2014" to be formatted as "Week 7 - Beginning Monday, August 18th”
5. On tables that have indented tasks (Schedule - Summary (Admin) screen), add connecting lines to show tree structured (we will provides the updates storyboard asap).
1) Projects (Admin) Page
- Storyboard references 2_Project_List_Screen_1.png.
- Make sure expand/collapse filter area working (2_Project_List_Screen_2.png)
- All actions in table must be working (Edit Project, User Permission, Delete Project).
2) Projects Create (Admin) Page
- Storyboard references 3_Create_Schedule_1.png
- Date picker needs to be working.
- Provide us invalid values and error condition for this page. (No references, use your judgement).
3) Project Edit (Admin)
- Storyboard references 3_Create_Schedule_1.png
- Same as Project create, but this time all form element must have value.
4) Project Permission (Admin)
- Storyboard references 2_Project_List_Screen_2.png
- Notice that clicking "add More users" will show popup to add new user to project.
- Filter expand/collapse functionality needs to work.
- Action for delete user from project needs to be simulated.
5) Schedule List - New (Admin) and Current (Admin)
- Storyboard references 2_Project_List_Screen_2.png
- If user select one project and the project don't have any schedule, show Schedule List - New (Admin)
- If user select one project and the project already have schedules, show Schedule List - Current (Admin)
- Filter expand/collapse functionality needs to work.
- Clicking Action button in each row will show bubble message, we don't have any UI for the bubble so please create it base on your judgement.
- Action button UI can be taken from 3_Create_Schedule_2.png, the left icons in table.
6) Schedule Create (Admin)
- Storyboard references 3_Create_Schedule_1.png and 3_Create_Schedule_2.png.
- There are four steps here needs to be create, "Basic information", "Tasks, Hierarchy, Hours", "Materials", "Equipment".
- In "Task, Hierarchy, Hours", clicking "Upload Task Data" will open popup (3_Create_Schedule_3.png, 3_Create_Schedule_4.png, 3_Create_Schedule_5.png, 3_Create_Schedule_6.png and 3_Create_Schedule_7.png).
- In "Task, Hierarchy, Hours", clicking "square group" left button in actions column will show bubble for row content settings. Make sure create this one. We don't have any UI for this, so please use your judgement.
7) Schedule Edit (Admin)
- Storyboard references 3_Create_Schedule_1.png and 3_Create_Schedule_2.png.
- Same as Schedule Create (Admin), but this time all form elements have value.
8) Schedule Weekly Update (Admin)
- Storyboard references 4_Schedule_Summary_1.png to 5_Schedule_Summary_6.png
- There are 4 tabs here needs to be create, they are :
* Schedule
* Materials
* Equipments, in each row, there are edit and delete equipments button, each has some functionality, make sure to create these.
* Remarks
9) Schedule - Summary (Admin)
- Storyboard references 4_Schedule_Summary_1.png to 5_Schedule_Summary_6.png
- Only create summary tabs page.
- Clicking "Graph" or "Print/Export" will show additional action choices in bubble/dropdown UI. Please make sure create it (No references, use your judgement).
- Make sure expand/collapse functionality in the table content working.
- Pay attention to the row coloring, make sure apply the appropriate colors.
- Clicking "graph" button in each row will show bubble/dropdown UI for graph selection.
- WTD% column has minigraph which will show real values to the graph. 100% will be full green bar, 0% will be full grey bar.
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)
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.