Challenge Summary
Welcome to the Hestia WarRoom Wireframe Finalization Contest. Hestia WarRoom purpose is convert the spreadsheet process into a browser-based web application for Hestia user. The goal of this wireframe contest is to update some page and flow based on our previous completed wireframe.
In the end of this contest we are looking for a process flow and layout design of the pages mentioned below that are part of the whole application. This application must be user friendly, intuitive, and easy to use.
Round 1
You Initial Wireframe for Review
1). Wireframe Consistency
2). Search Filter Optimization
3). Selection Flow
4). User Roles
5). Freight Rates
Notes : Any comments about your wireframe, make sure all pages have correct flow! If you made small updates, point to us in your notes!
Round 2
Finals Wireframe!:
1). Wireframe Consistency
2). Search Filter Optimization
3). Selection Flow
4). User Roles
5). Freight Rates
Notes : Any comments about your wireframe, make sure all pages have correct flow! If you made small updates, point to us in your notes!
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. The current method of determining pricing is via a series of spreadsheets. The goal of the War Room project is to convert the spreadsheet process into a browser-based web application. Beyond the existing spreadsheet functionality, the new application must provide the following: ability to record notes about every price change and adjustment; ability to upload certain data en-masse; ability to receive external feedback via web forms; ability to create reports.
The high-level workflow for the application is:
1. Enter the current prices from the vendors for each product.
2. Apply any adjustments to those prices based on the filters set.
3. Calculate freight based on origin and destination.
4. After review, apply price overrides (increase/decrease or absolute, similar to adjustments) also by the filters set.
5. Export price data to legacy ERP system.
We need an update of some pages and the flow in our exisiting wireframe. In this contest we need some page fixed per the details in contest spec below.
Hestia WarRoom Wirefame Requirements
Before you start the updates
We already made some updates on the storyboard design that are not yet reflected in wireframe. We need your help to fix them. Use Hestia War Room Wireframe Contest.rp as the base for your submission and check the breakdown below:
- On search filters, add Product Code. It can be off the visible page with the horizontal scroll bar, but we need to have an image of it being there. (Check 03b_Search_filter scroll.png)
- On search filters, switch position of Branch and Market. So order should now be: Vendor, Type, Market, Branch, Category, and Product. As above, Product should be off to the right when page is full size. (Check 03a_Search.png)
- On Comments pop-up dialog box on all adjustment pages, add User Name to dialog box (Check 05c_Adjustments_v2.png)
- Make sure pop-up dialog does not cover the entry box. Move it to the right or left. (Check 05c_Adjustments_v2.png)
- Update pagination and "jump to page". (Refer to 02a_My War Room.png)
- Update progress bar on My War Room % complete. (Check 02a_My War Room.png)
- Make sure all updates are implemented in all pages.
Please click around on attached wireframe to get familiar with the flow of Hestia WarRoom application.
Search Filter Optimization
"While reviewing the storyboard, we discovered that showing all the individual products across branches, or all the individual products found by the filters really won't work for the client. We had moved all the filter data in each record over to the right, off the page. To see the filter data you need to scroll to the right. Really what they want is more of a drill-down based on the filters selected. This is where the hierarchy of the filters matters. The hierarchy goes left to right in the search filter section. Vendor, Type, Market, Branch, Category, and Product. So maybe the search results should be displayed in a folder-type hierarchical model going from Vendor on down."
Selection Flow
We need show how selections from the left affect the choices in the filters to the right. So let's say Vendor 456 only supplies pipe of Type "Domestic ERW". When you select "Vendor 456", the Type filter should only show "Domestic ERW". Then when you select "Vendor 987" the Type filter shows "Domestic ERW" and "Domestic CW"
User Roles
- We need an update to the Admin section for "User", which should be just like the other Admin pages.
- User page needs Search, Create, Update, Delete User.
- Data need displayed in "User Role" page are:
-- First Name
-- Last Name
-- Phone
-- Mobile Phone
-- Fax
-- Title
-- Email
- We need a way where you can relate a user to one or more roles. It doesn't have to be like the Vendor and Vendor Shipping point, but just some way to select which roles a user can have. There is a Roles table in the databse, which should be loaded into a multi-select box on the User page - maybe a drop-down since there are not many roles. Current roles are: Program Manager, Adminstrator, Freight Manager, Branch Associate.
- We also need a way where you can relate a user to one or more branches. It doesn't have to be like the Vendor and Vendor Shipping point, but just some way to select which branches a user has access to.
Freight Rates
- Check spreadsheet with the data (FEI-CHR FlatbedRateMAtrix.xlsx).
- You need create progress steps in this page to explain relationships among them.
- Match the content based on provided spreedsheet.
- The steps are:
1. Destinations
- This is distribution centers where the pipe will be delivered.
- Need ability to add, delete, update, and display destinations.
- There is so little data per entry, use pop-up dialog to add/edit/delete entries.
- For display, a paging list is good.
2. Origins
- This is mills that produce steel pipe or ports where steeel pipe is imported.
- Need ability to add, delete, update, and display origins.
- There is so little data per entry, use pop-up dialog to add/edit/delete entries.
- For display, a paging list is good.
3. Origin to State Rates
- This is a matrix of rates provided by a major freight company. They gave a rate from origin to each state.
- So all destinations within a particular state receive the same rate from the same origin.
- The dollar amount represents the cost per mile for a truckload (20 tons) of pipe.
- Since there is so much data in the table, we need you create design to highlighted intersecting cells. If you have a different idea for presenting the data instead of a matrix, please show it.
- The yellow cells mean this is a minimum charge because the calculated amount would be less than that. There should be a text/input box somewhere that captures the minimum freight charge.
4. Matrix ZIP to ZIP
- The mileage in this table needs to be updatable.
- We need a text/input box to enter the "Fuel Surcharge".
- The "FSC" tab is present just ot show how it is calculated today. This tab does not need to be represented in the wireframe. We do need a text/input box for the value.
- Origins (columns) and destinations (rows) need to be able to be added with the corresponding mileage.
- There will option to display the "$" and the "Mileage", should it be two separate pages or can create some way to access them?
- You need freeze the the Destination column, so user can see track the actual freight info.
- Since there is so much data in the table we need you create design to highlighted intersecting cells. If you have a different idea for presenting the data instead of a matrix, please show it.
- The yellow cells are from the client using this spreadsheet. On this tab you can ignore them.
Target Audience
Internal users – Program Manager, Administrator, and Freight Manager
Judging Criteria
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow.
- How well you implement the required data and any suggestions, interactions and user flow you recommend (provide any notes or comments for the client).
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
Wireframes should be built in HTML, Axure, MS Visio or OmniGraffle. The resulting files are not critical in this contest. The most important point is that all the content is listed and the pages are linked together to show page flow. Keep your source files out from this submission folder.
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.