Challenge Summary
Welcome to The Online Curriculum Ordering System Design Challenge!
We are looking for your help in designing out a series of responsive screens that will help users place orders and manage them. The types of items they are ordering are books and printed goods as well as software licenses, so there will be some variation in screens depending on what they are ordering.
The goal of this challenge to create clean, intuitive interfaces that a wide range of users can interact with successfully on both a desktop computer or mobile device. Please give close consideration to accessibility standards referenced in the style guide, as they pertain to visual limitations of some users.
To be successful in this challenge you must use the existing style guide.
Screen 2: 01-Printed-Materials-Step1
Screen 3: 02-Printed-Materials-Step2
Screen 4: 03-Printed-Materials-Step3
Screen 5: 04-Printed-Materials-Step4
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Screen 1: 00-Printed-Materials-Dashboard
Screen 2: 01-Printed-Materials-Step1
Screen 3: 02-Printed-Materials-Step2
Screen 4: 03-Printed-Materials-Step3
Screen 5: 04-Printed-Materials-Step4 + Terms and Conditions overlay
Screen 6: 05-Printed-Materials-Order-Details-Shipped
Screen 7: 06-Software-Step1
Screen 8: 09-Create a Case
- 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 to create clean, intuitive interfaces that a wide range of users can interact with successfully on both a desktop computer or mobile device. Please give close consideration to accessibility standards referenced in the style guide, as they pertain to visual limitations of some users.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Notes:
- Desktop: Design for display 1280px and height as required.
- Mobile: Design for display 750px x 1334px.
- 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.
Branding Guidelines:
- See attached Style Guide and fonts
Design Goals:
- Consider accessibility and how this applies to both the desktop and the mobile experience.
- Apply branding guidelines to functional elements as outlined in wireframe.
- Appropriate use of primary and appropriate secondary colors to highlight areas of importance, calls to action, links, etc.
- Consistent use of primary, secondary, and tertiary buttons
Required Content:
- The screens you design will act as templates for additional screens with similar content, so please consider this when naming and arranging layers in the source files.
Screen 1: 00-Printed-Materials-Dashboard http://gr3oec.axshare.com/#p=dashboard
- The user can either place an order from this screen, as a primary function, or view an existing order.
- Orders are either Draft, Completed, Shipped, Invoice Sent, or Pending Approval. Draft and Pending Approval orders can be cancelled, the others cannot. Clicking on one will let you view more detail. Or user can print an order from dashboard view.
- The list of orders should be sortable by date, with the headers ‘Placed By’ and ‘Status’ each containing additional actions for the user to sort. Order lookup is another way to sort.
- The various statuses should be highlighted using both color and text with appropriate contrast for greater accessibility, not relying on just an icon or color alone.
- The customer indicated that it might be useful to create a separate section for all completed orders. If you have some ideas about pulling these into a separate area/box/container on the dashboard, this is encouraged and would be greatly appreciated.
Screen 2: 01-Printed-Materials-Step1 http://gr3oec.axshare.com/#p=step_1__opportunity_program
- This view will show anywhere from 1-6 programs, depending on what each customer’s permissions are.
- Clicking on one begins the order and will include products that pertain to that one program.
Screen 3: 02-Printed-Materials-Step2 http://gr3oec.axshare.com/#p=step_2__select_items_quantities
- Selecting a subject or searching a keyword will populate the appropriate results below.
- User should be able to select one or many items to add to cart, and the total at the bottom will update.
- Please show some way to highlight that the quantity in the cart for one item has qualified them for a free item. The savings gained from the free item is also shown near the total.
- Once order is started, user can save draft at any time to return to Dashboard.
Screen 4: 03-Printed-Materials-Step3 http://gr3oec.axshare.com/#p=step_3__billing_shipping
- User can confirm Billing Name and Address, Shipping address, and edit their order.
- Clicking on Edit under Bill To Name and Address will show an overlay.
- If you have some other ideas about a better way to manage editing/adding/selecting Name, Billing Address, Shipping Address - this is encouraged and would be greatly appreciated.
- Credit card payment option is static text for now.
- Purchase Order payment option is manually entering a # or uploading a file.
Screen 5: 04-Printed-Materials-Step4 http://gr3oec.axshare.com/#p=step_4__confirm_and_place_order + Terms and Conditions overlay
- Final review before submitting order, user can edit quantity or delete an item.
- Clicking Place Order will reveal an overlay to ask user to agree to Terms and Conditions.
Screen 6: 05-Printed-Materials-Order-Details-Shippedhttp://gr3oec.axshare.com/#p=order_details_-_shipped
- This order summary shows an order that has shipped. Please allow for multiple Tracking links to be displayed for an order
Screen 7: 06-Software-Step1
http://gr3oec.axshare.com/#p=step_1__confirm_items_quanitites
- The Software checkout flow is different from Printed flow, since the user doesn’t get to select different software options. The options in the cart are predetermined for the user. Their cart defaults to all items they are qualified to order, with a quantity of ‘0’, and they then update the quantities as they wish. This view shows some quantities already updated.
- The ‘M’ denotes Member pricing resulting in a discount.
- Update the ‘0’ quantity to another number on US History line to see the "update cart" functionality. on US History line.
Screen 8: 09-Create a Case
http://gr3oec.axshare.com/#p=create_a_case
- Basic form creates a case on the backend, but we display this as “contact us”.
- User selects a topic, enters text, and uploads a file if they like.
- Case is logged on Dashboard so user can see its status.
Supporting Docs:
- Style guide
- Logos and imagery referenced in style guide
- Wireframes:
-- Here are the wireframes specific to the screens listed in this challenge: http://sf9upi.axshare.com
-- For your reference, here are the complete sets of wireframes that the challenge-specific screens were extracted from, for greater context around what you’re designing: http://5tz09y.axshare.com/ and http://82x7kv.axshare.com/
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
Judging Criteria:
- How well your design match the current designs and general user mechanics/ UX
- How well you execute the user experience and capture your ideas visually.
- Cleanliness of your graphics and 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
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Sketch.
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.
We are looking for your help in designing out a series of responsive screens that will help users place orders and manage them. The types of items they are ordering are books and printed goods as well as software licenses, so there will be some variation in screens depending on what they are ordering.
The goal of this challenge to create clean, intuitive interfaces that a wide range of users can interact with successfully on both a desktop computer or mobile device. Please give close consideration to accessibility standards referenced in the style guide, as they pertain to visual limitations of some users.
To be successful in this challenge you must use the existing style guide.
Round 1
Screen 1: 00-Printed-Materials-DashboardScreen 2: 01-Printed-Materials-Step1
Screen 3: 02-Printed-Materials-Step2
Screen 4: 03-Printed-Materials-Step3
Screen 5: 04-Printed-Materials-Step4
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
All designs to reflect feedback from checkpoint review.Screen 1: 00-Printed-Materials-Dashboard
Screen 2: 01-Printed-Materials-Step1
Screen 3: 02-Printed-Materials-Step2
Screen 4: 03-Printed-Materials-Step3
Screen 5: 04-Printed-Materials-Step4 + Terms and Conditions overlay
Screen 6: 05-Printed-Materials-Order-Details-Shipped
Screen 7: 06-Software-Step1
Screen 8: 09-Create a Case
- 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 to create clean, intuitive interfaces that a wide range of users can interact with successfully on both a desktop computer or mobile device. Please give close consideration to accessibility standards referenced in the style guide, as they pertain to visual limitations of some users.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Notes:
- Desktop: Design for display 1280px and height as required.
- Mobile: Design for display 750px x 1334px.
- 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.
Branding Guidelines:
- See attached Style Guide and fonts
Design Goals:
- Consider accessibility and how this applies to both the desktop and the mobile experience.
- Apply branding guidelines to functional elements as outlined in wireframe.
- Appropriate use of primary and appropriate secondary colors to highlight areas of importance, calls to action, links, etc.
- Consistent use of primary, secondary, and tertiary buttons
Required Content:
- The screens you design will act as templates for additional screens with similar content, so please consider this when naming and arranging layers in the source files.
Screen 1: 00-Printed-Materials-Dashboard http://gr3oec.axshare.com/#p=dashboard
- The user can either place an order from this screen, as a primary function, or view an existing order.
- Orders are either Draft, Completed, Shipped, Invoice Sent, or Pending Approval. Draft and Pending Approval orders can be cancelled, the others cannot. Clicking on one will let you view more detail. Or user can print an order from dashboard view.
- The list of orders should be sortable by date, with the headers ‘Placed By’ and ‘Status’ each containing additional actions for the user to sort. Order lookup is another way to sort.
- The various statuses should be highlighted using both color and text with appropriate contrast for greater accessibility, not relying on just an icon or color alone.
- The customer indicated that it might be useful to create a separate section for all completed orders. If you have some ideas about pulling these into a separate area/box/container on the dashboard, this is encouraged and would be greatly appreciated.
Screen 2: 01-Printed-Materials-Step1 http://gr3oec.axshare.com/#p=step_1__opportunity_program
- This view will show anywhere from 1-6 programs, depending on what each customer’s permissions are.
- Clicking on one begins the order and will include products that pertain to that one program.
Screen 3: 02-Printed-Materials-Step2 http://gr3oec.axshare.com/#p=step_2__select_items_quantities
- Selecting a subject or searching a keyword will populate the appropriate results below.
- User should be able to select one or many items to add to cart, and the total at the bottom will update.
- Please show some way to highlight that the quantity in the cart for one item has qualified them for a free item. The savings gained from the free item is also shown near the total.
- Once order is started, user can save draft at any time to return to Dashboard.
Screen 4: 03-Printed-Materials-Step3 http://gr3oec.axshare.com/#p=step_3__billing_shipping
- User can confirm Billing Name and Address, Shipping address, and edit their order.
- Clicking on Edit under Bill To Name and Address will show an overlay.
- If you have some other ideas about a better way to manage editing/adding/selecting Name, Billing Address, Shipping Address - this is encouraged and would be greatly appreciated.
- Credit card payment option is static text for now.
- Purchase Order payment option is manually entering a # or uploading a file.
Screen 5: 04-Printed-Materials-Step4 http://gr3oec.axshare.com/#p=step_4__confirm_and_place_order + Terms and Conditions overlay
- Final review before submitting order, user can edit quantity or delete an item.
- Clicking Place Order will reveal an overlay to ask user to agree to Terms and Conditions.
Screen 6: 05-Printed-Materials-Order-Details-Shippedhttp://gr3oec.axshare.com/#p=order_details_-_shipped
- This order summary shows an order that has shipped. Please allow for multiple Tracking links to be displayed for an order
Screen 7: 06-Software-Step1
http://gr3oec.axshare.com/#p=step_1__confirm_items_quanitites
- The Software checkout flow is different from Printed flow, since the user doesn’t get to select different software options. The options in the cart are predetermined for the user. Their cart defaults to all items they are qualified to order, with a quantity of ‘0’, and they then update the quantities as they wish. This view shows some quantities already updated.
- The ‘M’ denotes Member pricing resulting in a discount.
- Update the ‘0’ quantity to another number on US History line to see the "update cart" functionality. on US History line.
Screen 8: 09-Create a Case
http://gr3oec.axshare.com/#p=create_a_case
- Basic form creates a case on the backend, but we display this as “contact us”.
- User selects a topic, enters text, and uploads a file if they like.
- Case is logged on Dashboard so user can see its status.
Supporting Docs:
- Style guide
- Logos and imagery referenced in style guide
- Wireframes:
-- Here are the wireframes specific to the screens listed in this challenge: http://sf9upi.axshare.com
-- For your reference, here are the complete sets of wireframes that the challenge-specific screens were extracted from, for greater context around what you’re designing: http://5tz09y.axshare.com/ and http://82x7kv.axshare.com/
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
Judging Criteria:
- How well your design match the current designs and general user mechanics/ UX
- How well you execute the user experience and capture your ideas visually.
- Cleanliness of your graphics and 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
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Sketch.
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.