SAS - Web Application UI Prototype Challenge

Contest Introduction:

Welcome to the SAS - Web Application UI Prototype challenge! In this challenge, you will need to build the UI Prototype for the new SAS web application based on the Storyboards and Wireframes that have already been created.  This contest will produce the full UI Prototype for the new SAS web application.

Project Introduction:

The Global Service Activity System (SAS) is a hosted web based application used to track project related service activities. Users can create and edit service activity data, perform on-line inquiry, filtering/sorting of that data, and generate either a service activity summary or detailed reports. The reports can either be on demand or the user can setup a schedule for the report and it is then emailed based on that schedule. The user can setup and maintain N number of reporting schedules. The tool provides a dashboard area that the user can add canned graphs that show services activities by date for a specific division. The user can add a graph for each division present in the data set and then reorder them. There is also an administrative function to create and maintain the Areas that are used in the tool.

This project will design and develop a new Service Activity System (SAS) web based application by re-writing the existing FLASH based system to a JAVA based system with an improved architecture.

Primary Goals:

For this contest, we are asking you to put together the UI Prototype for the SAS web application based on the Storyboards and Wireframes that have already been created.  The attached storyboards and wireframes show the screens required for this application, which you will design for this contest. A breakdown of the screens to submit for the contest is listed in the instructions below.

General Requirements:

The following are general guidelines you must follow in building the prototype:
- Produce a UI Prototype that can be used to demonstrate all screens / mentioned functionalities as required in the Storyboards / Wireframes.
- Your design must represents all pages and flows from Web App Storyboards / Wireframes.
- Screens should be numbered correctly to match the storyboard flow.
- Please check wireframe notes on each page to see the various interactions in those pages. You need to include those in your submission.
- Implement hover state for all buttons and links.
- All elements (such as the select boxes, radio buttons and checkboxes) will be browser based.  If any screen design elements look different in the storyboard (like the style in safari / Mac OSX) and cannot be styled exactly the same way for a web based UI prototype, it is okay for the UI prototype to use the closest web browser look and style match (they should follow the provided example prototype).

 

The following are specific requirements for HTML, CSS and Javascript files:
- Your HTML code must use the same doctype as the provided example protototype from a previous project (attached to forum)
- 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 tabular data and not for page layout.
- No inline CSS styles, all styles must be placed in an external stylesheet.
- 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".
- 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 for this contest.
- Pagination is required to be included where necessary
 

UI Prototype Pages:

The following pages should be included in your UI prototype:

1) Dashboard
2) Service Activity
3) Reporting
    a) All Reporting functionality, including Reports Wizard.
4) Admin
5) Help

SCOPE: All the screens in the "Submission" folder from the SAS Storyboards are in scope for this contest.

 

Documents Provided:

- SAS Storyboards (and source files)
- SAS Wireframes

Final Submission Guidelines

Submit a zip file contains all HTML/CSS/JS/images and another required files into Online Review.