Challenge Summary
Welcome to the Hestia WarRoom Wireframe Contest. The purpose of Hestia WarRoom is to convert the spreadsheet process into a browser-based web application for Hestia user. The goal of this wireframe contest is to design an easy-to-use, efficient browser-based application.
At 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
Your submitted solution for client review.
Hestia WarRoom initial wireframe page(s)
Notes : Any comments about your wireframe, make sure all pages have correct flow!
Round 2
Final pages of wireframe
Final Hestia WarRoom initial wireframe page(s)
Notes : Any comments about your wireframe, make sure all pages have correct flow!
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.
In this contest we need to get initial page & workflow. More details are stated below. There will be a separate contest to complete the application wireframe.
Hestia WarRoom Wirefame Requirements
General
- Your wirefame solution must be useful so it can save a web designer so much time and energy!. All pages/elements must linked to each other. Show us correct flow.
- You're encouraged to bring a new feeling of the application by providing any clever idea that represents any functions for all pages.
- Please check attached WarRoom_Filter.xlsx about pages requirement.
- All requirements below are only a guide to start. You create the wireframe flow. Any new ideas that represent the workflow will improve your chance that your submission will be the winner. Impress Us!
In your submission, you need to create pages to show this page workflow. Note, there area some scenarios that need to be designed based on the situation in a particular section. Read carefully the detailed requirement!
1). Login
- Design Login page for user to enter the application.
- After succesfully login, it will take to the main search page.
2). Search
- The main page is the 1st filter page where results are retrieved based on the filters set. This page will be used in almost all aspects of the application. We need solution ideas for multi-select filters where there is a large set of selection data for a filter. Refer to "FilterSearch" sheet in xls file.
- These following filter need show by default in this page:
-- Domestic / Import
-- Vendors / DC
-- Type
-- Market
-- Branch
-- Category
-- Product Code
- For the multi-select filter elements there will be many options. We need you think how to create a good solution.
- The main goal in this contest is to get a good idea on how to select the different values for the filters. With lots of data in each filter and the need for multi-select (e.g. need to select branch "Orlando" and branch "Pensacola" from a list of some 200 branches). And then the layout on the right side "FilterSearch" is what needs to be presented for the initial search/filter
- We need you to create how the page looks before and after click the "search" button.
3). Input Prices
- After Search result shows, a 2nd related filter page will be used for fast input of the price per ton from different vendors. There will be a feature to narrow/modify the result being displayed. See scenario below:
- Check example of the last table that only show "Product Code", "Vendor", "Current PPT", "New PPT", "Type", "Category" columns.
- The filter fast input only show after user see search results, and they will change for Vendor in that it is usually a multi-select filter, but for fast input, it will be single select only. What happens is that a vendor sends a price sheet. The user will enter the new prices one vendor at a time while referring to that vendor's price sheet. So we think we need a menu somewhere for "Search", "Input", and "Adjustments".
- The last table only show "Product Code", "Vendor", "Current PPT", "New PPT", "Type", "Category". We're thinking that there might be a menu item called "Input Vendor PPT" and the filter for Vendor will be single-select, not multi-select. The other filters can be selected so as to limit the products for the data entry. The user is entering data from a new price sheet from the vendor. So we are showing the current PPT and they are entering the new PPT from the vendor's price sheet.
4). 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. The adjustment will be applied to all products in the filtered set. The challenge with some of the filters is the amount of data available in the filter selection, and the fact that multiple selections need to be possible in almost every filter. A simple dropdown or even a multi-select dropdown don't seem to be good options since there could be 200 branches, 20-30 categories, 50-100 markets, etc. The SKU, or part number field is one of the fields where a text entry with type-ahead search would probably work okay, since it would be a single-select filter.
- Check "Adjustment" sheet from xls file for data need displayed.
- There could be 200 branches in the multi select drop down, several hundred in the market multi-select drop down, etc. We need you come up with solutions to support the options. And make it easier for user to use it.
5). Freight
- Goes to freight information.
- We need show the freight amount here.
- You can ignore the Admin section requirement. There will be separate contest to handle this.
6). Branch Overrides
- Branch overrides can be entered.
- Branch overrides triggered from the "Adjustments" section. In the workflow, this is after the freight calculation. So they have the "final Net Price", but they want to adjust that. So similar page to Adjustments. Maybe same page. Just info goes to a different spot in database.
7). View Low Net
- Page with only lowest final net per branch
- This will be separate page. It needs the filter so they can see different slices, but only for the branches that have the lowest final net price for each product. Showing this as a Search Results page is sufficient.
8). Export pricing
- Macro to create and export csv file with prices per SKU per branch.
9). Admin
- Administrative, such as user roles, etc. Can also get to Freight Rate Admin from here.
From informations under "Master Data 1" sheet, the task will capture:
- Vendor
- VendorShipPoint
- Product
- Category
- Market
- Branch
- User Roles
- Freight Rate
Target Audience
Internal users – Program Manager and Administrator
Judging Criteria
- Our main concern is to get great User Experience of the Search Filter!
- 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.