Challenge Summary
For this challenge, we need you to create a Web Design (Storyboard) for a new survey interface to the Praxair Quote Management System, as well as the administration section to manage the quotes. In other words, your goal will be to come up with a new web design for the existing system (existing system screens are provided).
The Praxair Quote Management application has two parts: a quote survey for users to fill out and an administration section to manage the quotes. The goal is to create a consistent look and feel for the users completing the multi-page survey as well as the administrator building the proposal based off of the quote survey.
Each page will need to handle validation on required fields where a message will be displayed. This can either be per control or a message area. Furthermore, creating stylized check boxes, radio buttons and text fields is encouraged as that is the main purpose of survey.
The existing design will be provided for a reference but emphasis should be placed on improving how users interact with the page so that the survey is easy to understand. If transition effects will improve the user experience, please explicitly note them in the design.
We look forward to seeing your creative designs!
Round 1
Round 1 will focus on the following screens for the existing application:
1) Survey Section
a) Survey Step 1 - Create new quote
b) Survey Step 2 - On this screen show how clicking "Current Customer" vs "Competitive Account" will effect the page, as well as where the validation message will go such as "This question is required"
2) Admin Page
a) Admin Review Pending Quotes
b) Review/Edit Response (the two existing pages can be combined into one)
c) Approval of the quote (should be factored in there somehow - it doesn't have to be its own screen like it is now, but it needs to be part of the design).
NOTE: See the screens in "Praxair Screens.zip" (existing application screens) to understand the screens / functionality. Additional descriptions of these screens are also included in this challenge spec.
Round 2
In Round 2, you will need to include all Round 1 screens (updated based on milestone feedback). For Round 2, you must also include the all following screens from the existing application (see attachment "Praxair Screens.zip"):
1) Survey Section
a) Survey Step 1 - Create new quote
b) Survey Step 2 - On this screen show how clicking "Current Customer" vs "Competitive Account" will effect the page, as well as where the validation message will go such as "This question is required"
c) Survey Step 3
d) Survey Step 4
e) Quote Summary
2) Admin Page
a) Admin Review Pending Quotes
b) Review/Edit Response (the two existing pages can be combined into one)
c) Approval of the quote (should be factored in there somehow - it doesn't have to be its own screen like it is now, but it needs to be part of the design).
d) Master Build Sheet
NOTE: See the screens in "Praxair Screens.zip" (existing application screens) to understand the screens / functionality. Additional descriptions of these scre Primary Goals For this challenge, we need you to create the Storyboard design for a new survey interface to the Praxair Quote Management System (including the administration section to manage the quotes). Project Description The Praxair Quote Management application has two parts: a quote survey for users to fill out and an administration section to manage the quotes. The goal is to create a consistent look and feel for the users completing the multi-page survey as well as the administrator building the proposal based off of the quote survey. Each page will need to handle validation on required fields where a message will be displayed. This can either be per control or a message area. Furthermore, creating stylized check boxes, radio buttons and text fields is encouraged as that is the main purpose of survey. The existing design has been provided for a reference, but emphasis should be placed on improving how users interact with the page so that the survey is easy to understand. If transition effects will improve the user experience, please explicitly note them in the design. General Requirements: - Produce a front-end design (Storyboard) that can be used to demonstrate all screens / mentioned functionality as required in each round. Branding and Guidelines: - Your design must fit 1024 pixels wide screen resolution. It should also be able to scale up to larger displays. Navigation: - The new design should include a type of breadcrumb that allows the user/administrator to go back to previous pages. Storyboard Requirements: Overall: Screen Descriptions: Home Page Quote Survey Survey – Step 2 Survey – Step 3 Survey – Step 4 Survey – QuoteSummary The main design change in this page is going to be group organization with the ability to collapse certain groups. Also note that the navigation at the bottom has changed to include “Submit for Approval” and “Save as Draft” this should be factored into the design. The navigation does not necessarily need to be at the bottom, as long as it is accessible throughout the page. Administration Screen Review Pending Quotes Review Quote - Response Review Quote - Master Build Sheet Review Quote - Approval Project Documentation: 1) "Praxair Screens.zip" (attached) - Screens from the existing application. Your Storyboard Design should be based on these. Target Audience Judging Criteria - Overall look and feel of the design What to Submit Final Fixes
The goal of this project is to design a new survey interface to the Praxair Quote Management System, as well as the administration section to manage the quotes.
- Required designs are for a web application (the new Praxair Quote Management application).
- The design must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in contest round details (and described in the contest spec / screens from the existing system).
- Your design must represents all pages and flows from the existing system screens mentioned in contest round details. You should use that as a guide, but if there is better way to display any information, feel free to reflect that on your design.
- Screens should be numbered correctly to explain the storyboard flow to us.
- Please check existing screens notes for each page in the challenge spec to see the various interactions in those pages. You need to include those in your submission.
- The client will need some use of the green that is present in the top banner and logo of the existing screens. Beside that, any color combination that fits well is open to the designers to come up with.
- Use web-safe fonts for the pages content. Please make sure to declaring your fonts according to the Studio font policies.
- Show all the hover states for all UI elements you create (buttons, hyperlinks, dropdowns, etc).
- Follow the workflow and layout guidance from "Praxair Screens.zip" (screens from the existing app). You need to create storyboards to cover all the pages in these screens mentioned in contest round details. The news screens should flow pretty much the same as the existing system (including navigation with tabs, pills, or some other horizontal navigation). The only changes designers can make is to remove the Review/Edit screen and combine them into one.
- Make sure to provide screens for popups, collapase/expandable features, error forms, and so on.
- As a suggestion, look at all the buttons in the forms to understand the interaction features of the application.
- Pay attention to the notes included in this challenge spec.
Based on a user’s role they will see different links. For example, a basic user may only see “Create New Quote” and “Edit Existing Draft” while an administrator will see all of the settings. Make sure the design is fluid enough to handle this requirement. Also, the links should be more apparent.
On the current home page design there is a message area. It is not a requirement to have the message area be embedded into the page, it could also be a modal.
Survey – Step 1
Ensure that the design factors supports required fields. Also, feel free to come up with logical form groupings such as “Address Information”, “Contact Information”, and “Other Information”. These groupings are not required but should be used if they create a better organization of the data.
Note that in Step 2 the selection of Current Customer vs Competitive Account has different fields. The design should factor this in.
The boxes on the right change based on the values from the plate layout and use the width/length proportion to determine shape of each rectangle.
The goal of this page is to determine the percentage of each material. This is currently being performed through manual text box entry, but a more creative method could be used. The only requirement is that the sum total of all percentages must equal 100%.
This page reviews all quote surveys submitted that have not been approved. Some type of link will need to transfer the administrator to a “Review Quote” page for each pending quote.
The administrator will need the ability to Review and Edit the responses from the survey. This does not necessarily have to be done on two separate tabs, but needs to be intuitive that editing the responses is possible.
There are machines that can be selected that will change the parts list on this page. The administrator needs the ability to change the machine, select which parts to include (checkbox), update the quantity, and then save the changes.
The administrator will need the ability to approve the quote once all of the changes to the response and master build sheet are complete.
Users of the existing SAS application.
- Simplicity and Consistency in the design
- Completeness and accuracy of how the design matches the screens / flow of the wireframe.
- How well you follow the client's branding / design guidelines.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client)
Preview JPG/PNG Image File
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 ZIP File
All requested contest requirements/screens as JPG or PNG files.
Source ZIP File
All fully editable original source files of the submitted design as required by the contest under "Source Files" in the side bar.
As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.
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.