Scheduling Tracking Application Storyboard Design Challenge - Part 1

Welcome to "Scheduling Tracking Application Storyboard Design Challenge - Part 1". It's time for a new start! Our client has an old scheduling application used for construction tracking. It was created with powerbuilder over 20 years ago and we'd like to bring this application into 21st century with a modern HTML design.

In this challenge, we need your help to create the look and feel for the application. Wireframes are provided for this challenge and only 5 screens need to be created. Join us NOW!!

 

Round 1

01. Projects (Project List Screen)
02. Schedule Create (Schedule Creation Screen - "Basic Information")
03. Schedule Create (Schedule Creation Screen - "Tasks, Hierarchy, Hours")
04. Schedule Summary (Schedule Summary Screen)

- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

01. Projects (Project List Screen)
02. Schedule Create (Schedule Creation Screen - "Basic Information")
03. Schedule Create (Schedule Creation Screen - "Tasks, Hierarchy, Hours")
04. Schedule Summary (Schedule Summary Screen)
05. Schedule Materials
06. Additional requirements - GUI Kit

- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

This application we're recreating is used by the customer’s internal employees to manage construction projects. It's a multi-user application and a key part of their business process.

This storyboard challenge focuses on creating a representative set of 5 screens developed during our wireframe challenge. There are several notes and minor changes to to the wireframe that we'd like to ensure are reflected in the storyboard. Those are summarized below. Beyond these changes, please use the wireframe screens as a guide for this challenge. The wireframes do not need to be followed exactly, we're mainly interested in capturing all of the content and functionality.

General Requirements
- Create a simple logo for the application. The old application used a bulldozer image as the logo. Something similar to that would be great - it doesn’t need to be the same thing, just something to represent construction. 
- Design it for web/desktop only.  
- Please use modern usability principles in your design.

Typical User Interaction Examples
- User logs into the systems -> Views the project list -> Chooses a project (taking them to a schedule list) -> Chooses a scheule -> Views cheduled details
- User views the project list -> Creates a new project -> Creates a new schedule for that project

Screen Requirements
There are 5 screens that need to be created from the wireframes, all screens can be found in the winning wireframes attached in challenge details -> attachment section. Please check details below :

01. Projects (Project List Screen)
Wireframe references "Projects (Admin)" page.
- Remove the 3 tabs, just need a single tab (or no tabs at all). This will have a single view of the projects.
- Add "Status Current" checkbox to filter box (default checked)
- Remove Overall "Sync. Selected" button
- Remove individual Sync buttons from rows
- Remove "Delete Selected" button
- Remove left-hand column check-boxes (not needed, we won't be syncing from this screen)

02. Schedule Create (Schedule Creation Screen - "Basic Information")
Wireframe references "Schedule Create (Admin)" page.
- Remove "Schedule Type" line
- Needs a header, displaying the Project info (info for the project we're creating the schedule for). The header can be the same as the "Project Basic Information" header shown in the Schedule List screen.
- "Contract Type" should be a drop-down list with the ability to override it.
- Move "Award Date" above "On-Site Date"

03. Schedule Create (Schedule Creation Screen - “Tasks, Hierarchy, Hours”)
Wireframe references "Schedule Create (Admin)" page.
- "Final Issue" checkbox not needed - remove
- On the right hand "Weekly" columns, change the header to "Wk 1" with the specific date of the week underneath and remove the "Hours" text.
- In the grey area under "Unspread Hours", add a text label indicating that the fields to the right are "Baseline Weekly Hours". (other ideas to indicate this welcome)
- General Note - when a subtask is added to a task, the Baseline Hours, Start and End date of the parent task will no longer be editable - they will instead reflect a "roll-up" of it's child tasks.
- To represent different level of subtasks, use indentation, fonts, background coloring,...etc to differentiate. Looking for it to be clear, wherever you are looking (within the row) what level that row's task is on. For example potentially shading the whole row. Use a consistent method to visually represent subtasks across all screens.
- Looking for ways to maximize the number of weeks shown on the right hand side
- Near "Upload Task Data" button need "Export to PDF, Export to Excel, Print" buttons

04. Schedule Summary (Schedule Summary Screen)
Wireframe references "Schedule - Summary (Admin)" page -> summary tab.
- Replace "View Format" radio buttons with a combo-box (or similar) with the following selections : Weekly Hours, Weekly %, Cumulative %, People, Cumulative People, Weekly Productivity, Cumulative Productivity, Classic View.
- Change "Show/Hide Information:" to "Hide Columns:"
- Add "Forecast" to "Hide Columns:" options.
- Remove "Weekly Update" button (this functionality will be linked from the Schedule List page)
- Print and export options could be combined into one pop-up (please be creative here)
- Would like 7 or more weeks visible in the scrolling "Weeks" area (looking for suggestions on this)
- Tasks of all levels should have two lines in the "Weeks" ares - right now, the "Level 1" tasks only have one row of numbers - they need to have an "S" row and an "A" row (see the subtasks for context).
- Add option to "View Level / Subtasks" before the "1" for "Total's Only" (this will show no tasks as all, just the totals at the bottom).
- In blue totals area (underneath all the tasks):
- Remove the first two lines ("Baseline Weekly % Complete" and "Actual Weekly % Complete") and move those up to the grey Grand Totals are in a similar format (with the individual "S" and "A" rows).
- Remove the word "Approx" from the last two blue lines
- Add new section under the bottom blue area that functions in the same way as the blue rows. This will include three lines and a title row with the text "Extra Work Hours". The three rows are : CCO Hours, Addenda Hours, Totals with CCO and Addenda
- To represent different level of subtasks, use indentation, fonts, background coloring,...etc to differentiate. Looking for it to be clear, wherever you are looking (within the row) what level that row's task is on. For example potentially shading the whole row. Use a consistent method to visually represent subtasks across all screens.
- The current week will typically be highlighted in this view. To represent that, please highlight the column for Week #3 in yellow. Other suggested methods welcome as well.
- The title area of the Weeks sections, change the text "Week" to "Week (40 hour week basis)"
- The "WTD %" column should have background shading proportional the the percentage number in each box.

05. Schedule Materials
Wireframe references "Schedule - Summary (Admin)" page -> materials tab.
- Remove "Weekly Update" button
- Add a button for "Chart" (this will be a pop-up menu to select a specific chart type)
- Print and export options could be combined into one pop-up (please be creative and consistent across other screens/views that have this option.)
- Update "View Format:" area as follows:
- There should be two radio button groups. One group with "Quantity" and "Percent" and the other group with "Weekly and Cumulative"
- Remove the "Chart" option all together.

06. Additional requirements - GUI Kit 
- Please provide complete GUI Kit for this application.
- Form elements set, textbox, textarea, drop down, checkbox, radiobox, etc.
- Buttons and links style.
- Table style (header, footer, etc).
- Color palletes.
- Any other GUI Kit set that you think should be added

Design Considerations
- Make sure your design is clean, good looking and very usable.
- Create a design that is easy to navigate, information needs to be arranged and organized in a logical, clear manner.
- Give consideration to the overall layout and how a user would interact with the contents on the page.
- For Web/Desktop, please use a minimum width of 1024px with height adjusting accordingly.

Branding Guidelines
- Font and colors : available in challenge forum. 
- Style : available in challenge forum.

Attachment
- winning_wireframes.zip

Target Audience
- Contractors and also any general user.
- Administrator.

Judging Criteria
- Cleanliness of your graphics and design.
- How well you capture the above requirements in your designs
- User Experience!

Submission and Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.