Challenge Summary
Welcome to the Hestia War Room User CRC-DPI Design Update Contest. Hestia War Room was designed to convert an existing spreadsheet process into a browser-based web application. In this contest we need to update the provided design and fix some user experience issues that appeared after we started testing the application.
Round 1
For your R1 deliverables, please submit following screen for client review
1.Update navigation scheme showing DPI and CRC
2. Dashboard screen
3. Export
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
Notes.jpg: Any comments about your design for the Client NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.
The War Room is an internal application that will help Hestia plan and analyze pricing for steel pipe.
Design Problem:
Hestia War Room was initially designed to handle one type of pricing system, either 'DPI (Market Price)' or 'CRC (Contract Pricing )'. We need to update the application to handle both DPI and CRC at the same time. What is the updated user experience?
Expected Solution:
- What is the user experience for using both DPI and CRC pricing?
- We are suggesting using tabs to solve the DPI/CRC pricing issue - how will this work/look?
- We also need to add two export buttons - how will these look and what is the user experience when a user exports the information?
IMPORTANT
- For the submission format, just submit all new screens required on this contest. You can re-use the provided design from attached war-room-storyboard-old.zip (This is old storyboard design, you can grab some graphic source as base of this contest requirements)
- For any textarea, input, scrollbar, checkboxes, radio etc, make sure your design still can build using standard browser style.
- Before you start suggest the updates, we need you click around on attached war-room-prototype.zip to get understanding of Hestia War Room flow.
Design Requirements:
1. Dashboard Page
Screenshot of current app: 1-dashboard-my-pricing.png
Prototype page: war-room-prototype/My_War_Room.html
- This is the Dashboard a user see's when they first log into the application
- We need some UX updates to this screen
A user will see this page first:
- Need to be able to quickly see "My Pricings" and "My Saved Filters"
- Need to be able to quickly get to CRC or DPI pricing tabs
My Pricing
- My Pricing needs to be updated where the user can edit/save the Search Criteria name
- Remove Progress column
- Remove Status column
- We need create a way to show 'Expiration Alert' on each row of My Pricing. Maybe use icon + tooltips to see details? Any ideas?
2. CRC/DPI navigation and pages
User will go from the Dashboard and either go to CRC pricing or DPI pricing.
Main navigation needs to have 'CRC/DPI' tabs. Show us how the updated navigation design should work.
Main Navigation items
- My War Room
- My Saved Filters
- CRC
- DPI
DPI purpose is to show specific Market Price information. CRC purpose is to show specific Contract Pricing information.
Both CRC and DPI use the same page content like Search page (Refer attached 4-search.png), but the user needs to know that they are on CRC or DPI Pricing.
Here's section need show up on both pages:
- Search
- Input Prices
- Adjustments
- Freight
- Branch Overrides
3. Export
Both DPI and CRC pricing needs 2 export buttons
- Where and how should these buttons work? The current placement might not be ideal
- Export Button 1 = DPI Export
- Export Button 2 = CRC Export
When a user clicks on the Export they need a popup or modal window that asks them to name and save the file to their desktop
Important
- Be aware of screen real estate and padding. The new navigation should not take up a lot of space - if anything it should be more simple/less padding so the user can see the content/results more then the header and navigation.
- The important area of this application is the table/results area
Target User
- War Room Application Users
Judging Criteria
- How well you update dashboard page and solve the CRC/DPI navigation 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.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.