Challenge Summary
Welcome to the Hestia New Platform Quotes Center Design Challenge. On the goal of this challenge is to quickly design the Quotes Center page with new features and requirements.
We have a FAST checkpoint so we can get you feedback quickly and turn the artwork around for sign-off this week.
Round 1
Your initial Hestia New Platform Quotes Center Design for client review on Desktop Size (1024px width, height up to your design)
Notes.jpg: Any comments about your design for clients
Round 2
Final Hestia New Platform Quotes Center Design on these following sizes:
1. Desktop Size (1024px width, height up to your design) and
2. Mobile Size (320px width, height up to your design)
Notes.jpg: Any comments about your design for clients
Hestia always looking to give their customers a better user experience by updating and enhancing the User Experiences of their existing websites and applications.
For this challenge we are looking for you to create the Quotes Center page within the Hestia application. The Quotes Center will allow customers to find their product quotes and also submit information for quotes. We need to allow a customer to view quotes, search/filter their quotes, and create product lists that they can submit for a quote.
Note: We are providing the site design - please focus on this specific page and user experience
Challenge Downloads:
Request Access on Google Drive below to these emails (amorehead@appirio.com & lunarkid@copilot.topcoder.com)
https://drive.google.com/folderview?id=0BxNVnWK-ZGA6QklwVmN1QmhVRjA&usp=sharing
These folder contains of:
- Current-Order-History.zip - Hestia New Platform Order History
- Wireframe-Screenshot.zip - Client Wireframe Layout
- My-List-Design.zip - My List Design Look and Feel
- Style Guides.zip - Expected Hestia New Platform Style
- Mobile-References.zip - Mobile Design References
IMPORTANT!
- Before you start designing - review the provided design!
- DO NOT introduce new branding - we are providing the branding guidance
- Focus on designing this specific page!
- Read submission sizes on Checkpoint and Final Deadline requirements!
Quotes Center Design Requirements:
1. Quotes Center
- See provided wireframe (screenshot: Wireframe-Screenshot/quote center basic rep-01.jpg)
- Note: This is just sketch, you need design based on detail requirements below.
- Use "Quotes Center" as page title
- Page layout divided by Existing Quotes, Create New Quote and “My List” Area
Search Area Update
- See attached screenshot (Wireframe-Screenshot/Search Area.png)
- Drop down to select Order on top left, then search input and button
- In the right side there’s Account Information with checkbox in the bottom
- Also, need show last 90days options
- Search value displayed next to date option.
Existing Quotes
- Here is the table columns order :
-- Quote Number (allow 11 characters, WQ######## , WQ must be the two beginning letters)
-- PO (max to 14 characters)
-- Expiration Date (Format: Dec. 12, 2014)
-- Job Name (max to 14 characters)
-- Actions ( No need display column title but show a column that will show these information)
---- Pending
---- Button “Review”
Create New Quote Widget Area
- This is NEW! We would like to Imitate how the "My List" works and use it as a widget within the page. (screenshot: My-List-Design/jpg/Copy of A2m_myLists_listDetail_moreActions.jpg)
- This widget would allow a user to create or take an existing product list and submit it for a quote
- Heading area need “Create A New Quote” button
- Display 2 buttons:
-- Copy/ Paste Products
-- Existing My List
Copy/Paste Products Modal
- When a user clicks on the Copy/Paste button it should open a modal window (See My-List-Design/jpg/A2n_myLists_listDetail_addMoreProducts.jpg)
- Show how the error would look on this page (See My-List-Design/jpg/A2o_myLists_listDetail_addMoreError.jpg)
Existing My List Modal
- Re-use existing modal content from (See My-List-Design/jpg/Copy of A1g_cart_saveToMyLists.jpg)
- Modal title need to be “Existing My List”,
- “Copy To” dropdown label should be “Create a quote from”
- “Copy” button label “Create Quote”
- Keep "No, thanks" button
- Remove the second dropdown field
My List Area
- We need way to access My List. what better way to do for this area? Displaying on page or triggered by the button to shows a modal window?
2. New Quote
- Create new separate page for New Quote
- This is read only page, similar like preview page with ability to input some values.
- This page will submitted to the internal team to review and provide the quote
List of items:
- Re-use My List for product table, refer attached My-List-Design/jpg/Copy of A2a_myLists_listDetail_default.jpg)
- No need displayed "2x" graphic and "Add to Cart" buttons (on the preview for quotes)
-- Image
-- Description
-- Sku
-- QTY
- No Price
- Expiration Date (Dec. 13, 2014)
-- Note: explaining the 30 day expiration “Quote will be removed from your view after expiration has passed”
- User can input > "Instructions" (freeform box)
- User can input > "Attn To" (abbreviation for "Attention To" )
- User can input > Enter "PO" (abbreviation for "Purchase Order" )
- User can input > "Job Name"
- "Download PDF" button
Additional Notes:
- Use dummy table information, do not have repeat table data (we want this to look real)
- Make it clear to the user what their search/filter criteria is
- Create an additional screen to show “no search results”
- (If anyone is familiar) this design will replace the current Find a Quote Inquiry used in the Hestia B2B application.
Target Audience
- Hestia Customers
Judging Criteria
- How well you create design for Quotes Center and keep things consistent with the existing site design.
- Cleanliness of your graphics and design.
- User Experience for application.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x768 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
Submit JPG/PNG for your submission file. Show correct order numbering!
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.