Key Information

Register
Submit
The challenge is finished.

Challenge Summary

Hestia is developing a small application called the Branch Admin Tool that is used to manage their accounts between branches. The purpose of this contest is to take the storyboards that currently exist in the Requirements document and develop the resulting HTML prototype for it.
Contest Summary For this contest, you will be developing the HTML, CSS and Javascript that are needed in order to implement the different UI screens that are defined in the Application Requirements document. The following screens need to be implemented: Primary Goals Run Conversion Application - This is based on Section 2.1 of the ARS. This screen will have 3 menu items:
  • Reports - This is based on Section 2.2 of the ARS. Note the "[+] Another Source Branch" button which may require additional input fields to be added. Also note that the buttons should be disabled until there is input on both the source and branch fields. A version should also be provided with the Error Message when there are no multiple branch customers.
  • Turn Customers On/Off - This is based on Section 2.3 of the ARS. Note that the button is disabled until the "Branch ID" field has been populated. Clicking on the button should lead to "Display Deactivate/Activate Companies" screen. A version should also be provided with the Error Message when there are no customers for the selected branch.
  • Select Active Customer - This is based on Section 2.4 of the ARS. Note the "[+] Another Source Branch" button which may require additional input fields to be added. Also note that the buttons should be disabled until there is input on both the source and branch fields. A version should also be provided with the Error Message when there are no multiple branch customers.
Activate/Deactivate Customers - This is based on Section 2.3.1.2 of the ARS. Two versions of the page should be provided, one with Activated customers and the other with Deactivated customers. Clicking on "Activate" should navigate to the version of the page with Deactivated customers and vice-versa. Note the "Main" link should link back to the main menu, and the "Go" button should be disabled while there is no Branch ID input. In the prototype, the "Go" button should simply link back to this page. Process Branch Customers to Keep - This is based on Section 2.4.1.4 of the ARS. Note that no radio buttons are enabled when the page loads, and also that one radio button can be selected for each grouping of Master Customer. Development Consideration This is a small, simple application, and thus the prototype should be kept as simple as possible. Some basic javascript may be needed to perform the functionality of adding input rows and disabling/enabling the buttons, but otherwise, it should be strictly CSS/HTML. Judging Criteria
  • Your submission will be judged on the following:
  • How closely the prototype maintains its layout and design schemes across all pages.
  • How closely the prototype matches the provided storyboards and spec.
  • How far the prototype goes further from the storyboards to go the extra mile.
  • Code Formatting - whether on not your code validates against W3C HTML Validation and CSS Validation.
  • How well the prototype renders in all browsers.
HTML/CSS Requirements:
  • Your HTML code must be XHTML 1.0 Strict compliant.
  • Validate your code - we will accept minor validation errors, but please comment your reasons for any validation errors in a text file you provide.
  • Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments.
  • Use CSS to space out objects, not clear/transparent images (GIFs or PNGs).
  • Proper use of structural CSS to lay out your page is strongly encouraged.
  • No inline CSS styles - all styles must be placed in an external stylesheet.
  • Provide as much semantic code as possible. Elements such as ABBR, ACRONYM, ADDRESS, CITE and CODE enhance the semantics of content when used appropriately.
  • Use strong and em tags instead of bold and italic tags
  • Only use table tags for tables of data/information and not for page layout.
Javascript JQuery 1.3.1 is allowed.

Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

CHALLENGE LINKS:

Screening Scorecard

SUBMISSION FORMAT:

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

CHALLENGE LINKS:

Questions? ‌Ask in the Challenge Discussion Forums.

SOURCE FILES:

You must include all source files with your submission.

SUBMISSION LIMIT:

Unlimited

SHARE:

ID: 30021528