Hestia War Room Storyboard Design Contest

Welcome to the Hestia War Room Storyboard Design Contest. The purpose of the Hestia WarRoom project is to convert the spreadsheet process into a browser-based web application for Hestia users. The focus of this contest is to design the Hestia War Room Storyboard application for website platform. We need you to create screens to help explain how the application layout and UI elements will look based on the completed wireframe.

At the end of this contest we are looking for a process flow and layout design of the pages mentioned below as part of the whole application. The application must be user friendly, intuitive, and easy to use. And remember to use Hestia Style Theme when building the design.

Round 1

For your R1 deliverables, please submit following screen for client review
1). Login
2). My War Room
3). Search
4). Input Prices
5). Adjustments
6). Freight
7). Branch Overrides
8). Administrator page
9). Vendor
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.

Round 2

Final Design will contains all following screen + any updates from client feedback
1). Login
2). My War Room
3). Search
4). Input Prices
5). Adjustments
6). Freight
7). Branch Overrides
8). Input Prices - CW
9). Adjustments - CW
10). Freight - CW
11). Branch Override - CW
12). Administrator page
13). Vendor
14). Products
15). Category
16). Market
17). Branch
Notes.jpg: Any comments about your design for the Client NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.

Contest Details
Hestia is a wholesale distributor of a variety of plumbing and building-related products. The War Room is an internal application that will help Hestia set pricing for a high-volume, price-volatile commodity, steel pipe.

In this contest we need to create a storyboard design based on our completed wireframe (WarRoom-Wireframe.zip). Keep Hestia War Room application storyboard design clean and professional!

IMPORTANT
- Put existing Ferguson logo in your design. You can re-use attached logo(Ferguson Logo.zip)
- We attached CPG-Storyboard.zip as reference of Hestia B2B Application for Catalog Price Generator. maybe you can use some design to start design for Hestia War Room application.
- You can grab some design elements from our Design Style Guide to help you design the Hestia War Room applications.
- Keep in mind, if you think layout of wireframe needs improvement in your storyboard, feel free to suggest any ideas to us. No restrictions to just follow the existing wireframe layout. Think about the great UX layout.
- Before you design the page, think about what the best layout is to accomodate a lot of data that will displayed, for example, in search results.
- For any textarea, input, scrollbar, checkboxes, radio etc, make sure your design still can build using standard browser style.
- Keep in mind, every pages of Hestia War Room applicaition must have minimum width of 1024px, and ability to automatically expand the width in wider screen. Your design must support that. 

Storyboard Design Requirements
In your submission, you need to create some pages to show page workflows:

1). Login
- Design Login page for user to enter the application
- After succesful login, it will take user to the My War Room page.
- How does the error validation looks?

2). My War Room
- This is main page of the application.
- Design the notification in the topside.
- "My Saved Filter" is flyout in the top side.
- Keep the table design consistent like our existing layout.
- In the main content area there are 2 tabs for "My Pricing" & "My Saved Filter".
- Click icons under "Action" column. Show us consistent look for the modal windows.
- How should the "Details" and "Remove" icons look?
- Notice there's arrow in the "Filter name" as sort indicator. Use a different sort icon if you like.
- Pagination must remain same like our existing style.

3). Search
- This is the 1st step of filter page where search results are retrieved based on the filters set. This page will be used in almost all aspects of the application. We need your design to implement a large set of selection data for a filter. 
- These following filter need show by default in this page:
-- Domestic / Import    
-- Vendors / DC          
-- Type 
-- Market
-- Branch
-- Category
-- Product Code
- For the multi-select element, in the future assembly, it will be built to contain lots of options. We need you think how design the form elements?
- We need you to create how the page looks before and after click of the "search" button.
- Filter box must have expand/collapse function.
- Search Results placed in the bottom side.
- Notice at the top side of search result table some buttons display as steps in the workflow. They are:
-- Input Price
-- Adjustments
-- Freight
-- Branch Override
-- Save Search (click this button will save the filter search into "My Saved Filter" section)
-- Export
- Notice in table there's highlighted rows for "Lowest Net Price". What proper background color for them?
- Use standard browser checkboxes in table.
- Design the legend of "Lowest Net Price".
- Match the table contents for every columns like in wireframe.

4). Input Prices
- After Search result show, a 2nd related filter page will be used to narrow/modify the result being displayed.
- There's "Input Price" filter in the top area of table on this page.
- How the radio options, increase/decrease function should looks like?
- Make sure you use existing datepicker design.
- Notice at the top side of search result table, the "Input Price" is hidden.
- Show us screen before and after "Modify" button clicked.
- Notice the differences with existing search result, as you can see there's input field under "New PPT" column.
- Match the table contents for every columns like in wireframe.

5). Adjustments
- This is the 3rd related filter page will be used to enter adjustments to prices by percentage, dollar amount (plus or minus), or by setting an absolute price.
- Notice at the top side of search result table, the "Input Price" & "Adjusment" button are hidden.
- Make sure the "Current Adjustment" highlighted the text color with red.
- How the tooltips design above the "Current Adjustment" cell?
- When user type on the input, there will show some tooltips to fill "Start Date", "End Date", and "Comment". Design this.
- Search results show more columns in table, how your layout design anticipate this?
- Notice the differences with existing search result, as you can see there's input field under "New Adjustment" column.
- Match the table contents for every columns like in wireframe.

6). Freight
- Override freight information from "Adjustments" section.
- Notice at the top side of search result table, the "Input Price", "Adjusment" & "Freight" button are hidden.
- Make sure the "Adjustment" & "Freight" highlighted the text color with red.
- Match the table contents for every columns like in wireframe.

7). Branch Overrides
- Branch overrides triggered from the "Adjustments" section
- Notice at the top side of search result table, the "Input Price", "Adjusment", "Freight" & "Branch Override" button are hidden.
- Make sure the "Adjustment" & "New Branch Override" highlighted the text color with red.
- Match the table contents for every columns like in wireframe.

8). Input Prices - CW
- This will be another version of Input Prices page if the type is "CW" selected in the main filter.
- You will see the new "Multiplier" options in the filter of search result area
- Also there some new columns in the table, match with wireframe.

9). Adjustments - CW
- This will be another version of Adjustments page if the type is "CW" selected in the main filter.
- Also there some new columns in the table, match with wireframe.

10). Freight - CW
- This will be another version of Freight page if the type is "CW" selected in the main filter.
- Also there some new columns in the table, match with wireframe.

11). Branch Override - CW
- This will be another version of Branch Override page if the type is "CW" selected in the main filter.
- Also there some new columns in the table, match with wireframe.

12). Administrator page
- This is administrator page, user need login as administrator to access this page. As an alternative, if the user has "Admin" rights, they will see the "Admin" tab.
- Suggest a proper layout for any form in admin pages.
- Match the table contents for every columns as in the wireframe.
- Create separate screens to explains the flow between pages.
- Are the  "Cancel" and "Save" buttons already placed in a good spot?
- Should we create some frontpage of administator page that will linked to these following pages below:

13). Vendor
1. Create New Vendor
2. Edit Vendor
3. Vendor Shipping Points
4. Create New Shipping Points
5. Edit New Shippping Points

14). Products
1. Create New Product
2. Edit Product

15). Category
1. Create New Category
2. Edit Category

16). Market
1. Create New Market
2. Edit Market

17). Branch
1. Create New Branch
2. Edit Branch

Target User
- Potential Customer
- Current Customer

Judging Criteria
- How well you design storyboard for Hestia War Room Application.
- Cleanliness of page layout and all UI elements in every page.
- User Experience of the application.

Submission & 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.