Challenge Summary
Welcome to Citrix - Sales Quote Shopping Cart Design Challenge!
Citrix sales reps currently use a quoting tool that helps them configure and price various products and services. To include products/services in a quote, they are selected and added to a “shopping cart”. From within the shopping cart, the sales rep has several ways to customize and update the products. The current tool has several pain points that make it difficult for them to understand all the options available, or what to do next.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
Good luck and we look forward to your design!
01 Cart Initial View
02 Cart Quick View
03 Line Item Actions View
04 Cart Expanded Options View
05 Cart Expanded Options View More View
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
01 Cart Initial View
02 Cart Quick View
03 Line Item Actions View
04 Cart Expanded Options View
05 Cart Expanded Options View More View
06 Alert Abandon Cart View
07 Overlay Adjust Price View
08 Overlay Price Ramps View
09 Overlay Pricing Guidance View
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description:
The goal of this challenge is to help the seasoned users build quotes more efficiently, and minimize the effort it takes for new users to learn the new layout.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Notes:
- This is going to be a web App.
- Colors are open to designers.
- Desktop view: 1280px width and height as required.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Objectives:
- Visual design that allows for intuitive interaction with the shopping cart, using consistency and patterns to allow users to learn new system quickly.
- Make actions stand out more; styling should allow for logical groupings of actions that make sense to the user.
- Present large quantities of information in easier to read format that minimizes scrolling (wireframe shows one solution with the “View More” option, but feel free to suggest other solutions if you have a good idea).
- Group actions together (wireframe shows one solution next to each line item with this icon (...) and actions menu, but feel free to suggest other solutions if you have a good idea).
Required Screens:
01 Cart Initial View:
- Please refer to 01-cart_initial-view.png
02 Cart Quick View:
- Please refer to 02-cart_quick-view.png
03 Line Item Actions View:
- Please refer to 03-lineitem_actions.png
04 Cart Expanded Options View:
- Please refer to 04-cart_expanded-options.png
05 Cart Expanded Options View More View:
- Please refer to 05-cart_expanded-options-view-more.png
06 Alert Abandon Cart View:
- Please refer to 06-alert_abandon-cart.png
07 Overlay Adjust Price View:
- Please refer to 07-overlay_adjust-price.png
08 Overlay Price Ramps View:
- Please refer to 08-overlay_price-ramps.png
09 Overlay Pricing Guidance View:
- Please refer to 09-overlay_pricing-guidance.png
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Supporting Documents:
- Wireframes (wireframes.zip).
- Wireframes screenshots (Citrix-shopping-cart-screens.zip); this is just to make sure you did not miss any interaction in the wireframe.
Target audience:
- Sales representatives.
Judging Criteria:
- Is the design styled to be appealing and desirable?
- Is the design visually resolved and does it evoke an emotional connection with the user?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Is the design easy to use and understand?
Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
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, or Adobe Illustrator as a layered AI 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. We may ask you to update your design or graphics based on checkpoint feedback.
Citrix sales reps currently use a quoting tool that helps them configure and price various products and services. To include products/services in a quote, they are selected and added to a “shopping cart”. From within the shopping cart, the sales rep has several ways to customize and update the products. The current tool has several pain points that make it difficult for them to understand all the options available, or what to do next.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
Good luck and we look forward to your design!
Round 1
Submit your initial design for a checkpoint feedback:01 Cart Initial View
02 Cart Quick View
03 Line Item Actions View
04 Cart Expanded Options View
05 Cart Expanded Options View More View
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final design plus checkpoint feedback:01 Cart Initial View
02 Cart Quick View
03 Line Item Actions View
04 Cart Expanded Options View
05 Cart Expanded Options View More View
06 Alert Abandon Cart View
07 Overlay Adjust Price View
08 Overlay Price Ramps View
09 Overlay Pricing Guidance View
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description:
The goal of this challenge is to help the seasoned users build quotes more efficiently, and minimize the effort it takes for new users to learn the new layout.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Notes:
- This is going to be a web App.
- Colors are open to designers.
- Desktop view: 1280px width and height as required.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Objectives:
- Visual design that allows for intuitive interaction with the shopping cart, using consistency and patterns to allow users to learn new system quickly.
- Make actions stand out more; styling should allow for logical groupings of actions that make sense to the user.
- Present large quantities of information in easier to read format that minimizes scrolling (wireframe shows one solution with the “View More” option, but feel free to suggest other solutions if you have a good idea).
- Group actions together (wireframe shows one solution next to each line item with this icon (...) and actions menu, but feel free to suggest other solutions if you have a good idea).
Required Screens:
01 Cart Initial View:
- Please refer to 01-cart_initial-view.png
02 Cart Quick View:
- Please refer to 02-cart_quick-view.png
03 Line Item Actions View:
- Please refer to 03-lineitem_actions.png
04 Cart Expanded Options View:
- Please refer to 04-cart_expanded-options.png
05 Cart Expanded Options View More View:
- Please refer to 05-cart_expanded-options-view-more.png
06 Alert Abandon Cart View:
- Please refer to 06-alert_abandon-cart.png
07 Overlay Adjust Price View:
- Please refer to 07-overlay_adjust-price.png
08 Overlay Price Ramps View:
- Please refer to 08-overlay_price-ramps.png
09 Overlay Pricing Guidance View:
- Please refer to 09-overlay_pricing-guidance.png
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Supporting Documents:
- Wireframes (wireframes.zip).
- Wireframes screenshots (Citrix-shopping-cart-screens.zip); this is just to make sure you did not miss any interaction in the wireframe.
Target audience:
- Sales representatives.
Judging Criteria:
- Is the design styled to be appealing and desirable?
- Is the design visually resolved and does it evoke an emotional connection with the user?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Is the design easy to use and understand?
Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
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, or Adobe Illustrator as a layered AI 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. We may ask you to update your design or graphics based on checkpoint feedback.
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.