Challenge Summary
Welcome to "COTY - Customer Order Dashboard Design Challenge". In this challenge, we are looking for your help to create the best possible UI/UX dashboard design for our new tool to display all customer orders data that being retrieved from our various system and show/highlight any issues regarding their orders with us, so our delivery team can handle and solve the issues asap. Your dashboard creation needs to be creative, intuitive, simple, easy to use, and offer a great focus to the user.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Dashboard Screen
02) Overview of Order, Totara and Visit by Market
03) Summary of Order status from All the system
04) Order status and count (from Order backend)
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Dashboard Screen
02) Overview of Order, Totara and Visit by Market
03) Summary of Order status from All the system
04) Order status and count (from Order backend)
05) Comparison Between Store backend and SAP System
06) Displays iDOC failed order status for a given duration
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We need to create a Dashboard design that able to show and highlight some data issues related to our customer orders. We are using a manual process right now to do this by extracting data from various systems and running it into Excel reports. Resolving these issues in a timely fashion is critical for us to maintain a good relationship with our business customers.
Challenge Goal
The goal of this challenge is to develop UI/UX Dashboard that shows the best possible way to drill down on the customer orders data so the user can be notified proactively if there are any issues before customer raise the issue
Design Consideration
- Simple, Clean, Professional and Intuitive look and feel
- Simplicity to find any necessary information
- Needs to offer a great focus to the user
- Best Practice for Responsive web app (Think of future support for other devices)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=668271
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Dashboard Screen
- From all available systems in our company, there are 4 systems running in our company that related to our Customer Order, they are:
-- Customer Orders from Order App
-- Customer Orders from Totara App
-- Customer Orders from Visit (Store) App
-- AYS (BE/NL) App (app for integration measurement - out of scope)
- All customer orders from these systems will be sent to the SAP app where this app act as the core system with 15+ systems feeding in data over interfaces to the SAP app.
- In this screen, we’re gonna need to show/display summary status about Customer Orders from all of these systems and also show the orders that available in the SAP app too (comparison).
- Show summaries of the customer order data extracted from all systems related to it on various form graphs, charts, tables, etc. The following information needs to have it’s own visualization (as a widget or section in various chart/graph/table/etc) in this screen:
-- Overview of Order, Totara, and Visit by Market
-- Summary of Order Status from all the system
-- Order status and count (from Order backend)
-- Comparison Between Store backend and SAP System
-- Displays iDOC failed order status for a given duration
- On click of those will take them to the individual reports page
- Probably show label and master data status too to help the user easily understand the content (see tabs ‘Errror Status’ and ‘list’ from the spreadsheet for label and master data)
- We are going to need additional report visualization for the following items (see noname.mht for more details about the content):
-- History of Orders (Order App / Visit / Totara)
-- Open Ticket Status (Total=39, Order=9, Totara=17,Visit=13)
-- Problem Record Status
- Please refers to the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
02) Overview of Order, Totara and Visit by Market
- This screen displays the Order count (Expected and Actual) and it’s status by Application (SAP, ORDER, STORE and Totara) and by Job. Refer to this image for more details
- Please refer the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
03) Summary of Order status from All the system
- Displays Order history for last 1 year (provide filter so user can choose what data that they want to show, based on country, time, apps, etc). Chart displays the order count by date for the current month and by months for the remaining of the year (be creative on the data visualization here). Refer to this image for more details
- The above chart displayed all the system’s order data.
- User can drilldown/click on the data to see the order history by System (SAP or Order APP Or STORE Or Totara) with option to view the data in table report format like shown in this image
- Please refers the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
04) Order status and count (from Order backend)
- Display order data of SAP/ORDER/STORE/Totara system for the given date (default One day data) By country and Status (Can be grouped by status and the country). Refer to this image for more details
- For Order data from SAP, user should be allowed to further drilldown to get the order count by ORDER or STORE and Receiver like (9999IWSLE2 , 9999IWSLN2, etc)
- Order Can be a graph instead of table
- Please refers the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
05) Comparison Between Store backend and SAP System
- Comparison of order data between 2 systems (Order and SAP, Store and SAP, or Totara and SAP) for a given date. Refer to this image for more details
- Number of Orders sent from Totara
- Number of Orders received at SAP
- Number of Orders received at SAP for Order and Store/Visit
- Please refer the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
06) Displays iDOC failed order status for a given duration
- Failed idocs and idoc text- Order (04th March to 11th March). Refer to this image for more details
- Please refers the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
Important:
- Be creative on the visualization, we want various of chart/graph that can make the user easily read information from these apps
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comments this link while you upload).
Branding Guidelines
- Open to Designers (Color, Font, Style, etc)
Documentation
- Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx (raw data content for dashboard)
- noname.mht (open this file in IE browser or MS.Word - contains various of reports that need to be visualized in your dashboard creation, this file showing manual report that client are currently sending to the customer. The overall objective is to have a visual treat of these reports and improve user experience and usability by introducing a dashboard and drill down reports to show detailed report)
Target Devices
- Web-Based Application
- Desktop: minimum 1366px Width with Height adjusted accordingly
Target Audiences
- Service delivery team
- Customer IT Team and their heads
- Customer Business leads/country heads
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into solving the problem
- The Overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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 image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial dashboard design for a Checkpoint Feedback01) Dashboard Screen
02) Overview of Order, Totara and Visit by Market
03) Summary of Order status from All the system
04) Order status and count (from Order backend)
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates01) Dashboard Screen
02) Overview of Order, Totara and Visit by Market
03) Summary of Order status from All the system
04) Order status and count (from Order backend)
05) Comparison Between Store backend and SAP System
06) Displays iDOC failed order status for a given duration
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We need to create a Dashboard design that able to show and highlight some data issues related to our customer orders. We are using a manual process right now to do this by extracting data from various systems and running it into Excel reports. Resolving these issues in a timely fashion is critical for us to maintain a good relationship with our business customers.
Challenge Goal
The goal of this challenge is to develop UI/UX Dashboard that shows the best possible way to drill down on the customer orders data so the user can be notified proactively if there are any issues before customer raise the issue
Design Consideration
- Simple, Clean, Professional and Intuitive look and feel
- Simplicity to find any necessary information
- Needs to offer a great focus to the user
- Best Practice for Responsive web app (Think of future support for other devices)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=668271
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Dashboard Screen
- From all available systems in our company, there are 4 systems running in our company that related to our Customer Order, they are:
-- Customer Orders from Order App
-- Customer Orders from Totara App
-- Customer Orders from Visit (Store) App
-- AYS (BE/NL) App (app for integration measurement - out of scope)
- All customer orders from these systems will be sent to the SAP app where this app act as the core system with 15+ systems feeding in data over interfaces to the SAP app.
- In this screen, we’re gonna need to show/display summary status about Customer Orders from all of these systems and also show the orders that available in the SAP app too (comparison).
- Show summaries of the customer order data extracted from all systems related to it on various form graphs, charts, tables, etc. The following information needs to have it’s own visualization (as a widget or section in various chart/graph/table/etc) in this screen:
-- Overview of Order, Totara, and Visit by Market
-- Summary of Order Status from all the system
-- Order status and count (from Order backend)
-- Comparison Between Store backend and SAP System
-- Displays iDOC failed order status for a given duration
- On click of those will take them to the individual reports page
- Probably show label and master data status too to help the user easily understand the content (see tabs ‘Errror Status’ and ‘list’ from the spreadsheet for label and master data)
- We are going to need additional report visualization for the following items (see noname.mht for more details about the content):
-- History of Orders (Order App / Visit / Totara)
-- Open Ticket Status (Total=39, Order=9, Totara=17,Visit=13)
-- Problem Record Status
- Please refers to the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
02) Overview of Order, Totara and Visit by Market
- This screen displays the Order count (Expected and Actual) and it’s status by Application (SAP, ORDER, STORE and Totara) and by Job. Refer to this image for more details
- Please refer the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
03) Summary of Order status from All the system
- Displays Order history for last 1 year (provide filter so user can choose what data that they want to show, based on country, time, apps, etc). Chart displays the order count by date for the current month and by months for the remaining of the year (be creative on the data visualization here). Refer to this image for more details
- The above chart displayed all the system’s order data.
- User can drilldown/click on the data to see the order history by System (SAP or Order APP Or STORE Or Totara) with option to view the data in table report format like shown in this image
- Please refers the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
04) Order status and count (from Order backend)
- Display order data of SAP/ORDER/STORE/Totara system for the given date (default One day data) By country and Status (Can be grouped by status and the country). Refer to this image for more details
- For Order data from SAP, user should be allowed to further drilldown to get the order count by ORDER or STORE and Receiver like (9999IWSLE2 , 9999IWSLN2, etc)
- Order Can be a graph instead of table
- Please refers the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
05) Comparison Between Store backend and SAP System
- Comparison of order data between 2 systems (Order and SAP, Store and SAP, or Totara and SAP) for a given date. Refer to this image for more details
- Number of Orders sent from Totara
- Number of Orders received at SAP
- Number of Orders received at SAP for Order and Store/Visit
- Please refer the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
06) Displays iDOC failed order status for a given duration
- Failed idocs and idoc text- Order (04th March to 11th March). Refer to this image for more details
- Please refers the data and information from "Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx" spreadsheet and "noname.mht" for detail content.
Important:
- Be creative on the visualization, we want various of chart/graph that can make the user easily read information from these apps
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comments this link while you upload).
Branding Guidelines
- Open to Designers (Color, Font, Style, etc)
Documentation
- Copy of EU JobStatusDDMMYY_AYS_Update 0803.xlsx (raw data content for dashboard)
- noname.mht (open this file in IE browser or MS.Word - contains various of reports that need to be visualized in your dashboard creation, this file showing manual report that client are currently sending to the customer. The overall objective is to have a visual treat of these reports and improve user experience and usability by introducing a dashboard and drill down reports to show detailed report)
Target Devices
- Web-Based Application
- Desktop: minimum 1366px Width with Height adjusted accordingly
Target Audiences
- Service delivery team
- Customer IT Team and their heads
- Customer Business leads/country heads
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into solving the problem
- The Overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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 image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer
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.