Pluto - Customer Request Dashboard Web Application Design Challenge

Welcome to the “Pluto - Customer Request Dashboard Web Application Design Challenge”! In this challenge, we need your help to design a customer request dashboard which will allow user to track number of ticket raised with their status and reassign tickets.

Round 1

Submit the following screen requirements for checkpoint feedback:
01) Dashboard
02) Assignment Update
03) Internal Form Access

• 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 the following screen requirements for checkpoint feedback:
01) Dashboard
02) Assignment Update
03) Internal Form Access
04) Access Level

• 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.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

• Create 4 screens UI design for the dashboard application.
• Design a modern and intuitive dashboard application that focuses on enabling users to easily track number of ticket raised with status and reassign ticket.
• Provide intuitive user journeys and seamless user experience.

• Our client is a technology giant which planned to abandon their manual form input using spreadsheets and digitize their form input using a web portal which already covered in previous challenge with winner submission attached in challenge forum.
• As the form is submitted, we need our front office employee to assign those forms as tickets to the team so they can process each form and close it 

• Creativity: Conservative; barely new ideas, use what is already proven to work.
• Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
• Aesthetics: Hi-fidelity design; provide a top-notch finished looking visual design.
• Branding: Strict; carefully follow the provided guidelines and stick to them.

• Pluto front office employee: who will use this dashboard to track number of ticket raised with their status and reassign ticket.

• CSSM: CSSM Is a person responsible for the customer online catalogues and in some regions also fully responsible for the address request and accuracy, therefore he/she will gather the customer address details and will request the address creation. This is a customer facing role with a high impact on customer experience. 
• ISR: The ISR, or the Internal Sales Representative, is a person who managed the customer business, making sure all works smoothly with the ordering process. In some regions, the ISR is responsible for the customer address requests, therefore he/ she will gather the customer address details and will request the address creation. 
• AOM: The AOM or the Account Operations Manager, is a person who managed the customer experience end to end. The AOM is mainly the escalation point and he/ she coordinates all the customer facing Operational activities. Sometimes, the AOM is the one gathering the Customer address details and requests the address creation, making sure the accuracy and data quality have a high rate and that customer expectations are met. 
• PlutoB2B: The PlutoB2B is a web platform for online ordering. It's the commercial platform where customers can order products online, but have the option to manage addresses and address details in a digital manner, send the address request to the CSSM/ AOM/ ISR who will pick it up and complete the set up to allow the customer to purchase online. 
• COTF: Customer On the Fly. To do something on the fly is to do it quickly. This is code name for form digitalization platform that client already build.
• SC: SC stands for Sales Contract. This is a grouping of customer legal addresses and contractual attributes that can stand for an Order Template. It contains specific set up instructions to allow the Ordering Process teams to know upfront the logistic details, invoicing customer preferences, country specifics etc.  
• PlutoD: This is the ticketing system used by the operational teams to pass activity requests in a centralized and controlled manner. It helps metrics calculations for management to better track the team performance and Turn Around Time for different teams and allows strategic teams to identify process gaps by analyzing data behind bad metrics. 

• Name: Frank Smith
• Occupation: Lead of Front officer
• Role: Assigning and processing request that sent to his team.
• Pain Points:
  • Manually processing the form request using spreadsheet is tedious and prone to error.
  • Hard to assign to team member.
• Wants: Easy to use and intuitive request dashboard.
• Proposed Solution: Provide a dashboard to allow ticket status tracker and assignment features.

• Frank log in to customer request dashboard and presented summary of number of ticket raised with each status and easily can tracker how many ticket which assigned to his team. 
• He planned to take an annual leave for a week and foresee there will be numbers of ticket will be delayed because of his plan. He then selected those tickets and reassign to his team members using bulk assignment or he can assigned it one by one. 
• After finishing the reassignment he then continue his work for today. Frank select one of the ticket to view details of the tickets and update any details if needed. He then save it. If the ticket is solved, he can change the status to close.

Users will land to this page after they successfully verify their credentials (out of scope). Here is details to be shown in your design:

• On the dashboard, user can see a summary of: 
  • Tickets raised with its status ( New, Draft, Open, Resolved, Canceled)
  • New requests coming from PlutoB2B external form
  • Completed status
  • Pending status
• Internal team can view table of ticket with status from open to resolved, and able to see request which coming from external form.
• The table need to show these details: 
  • CSSM and AOM assignment with link to populate the table based on the CSSM and AOM.
  • PlutoB2B request number (client request id coming from external form)
  • COTF ID.
  • PlutoD ticket number for ticket raised.
  • Email address of the request submitter PlutoB2B customer.
  • Date of submission from PlutoB2B.
  • Date of submission to PlutoD
  • Status of request (New, Draft, Open, Resolved, Canceled).
  • Status Reason of the Request (see this table for details)
  • Name of the account based on information coming from PlutoB2B /eCanvas.
  • Name of the account based pn information coming from PlutoD (once the ticket is submitted).
  • Market headquarter.
  • Catalogue ID
  • Org ID
• Users can do filtering based on columns eg. date filtering.
• Have a button Reassign so user can reassign the ticket to other member.
• Type of request to be flagged as “New SC ID” and “Updated SC ID” but allow any potential sub types to be added as well.

• On this page, users able to update ticket assignments to any member of the team even the user themselves. 
• Change the assignments in case of backup or account team structure, so that they don't lose any request.
• Show ability to do bulk update assignments. Reassign of bulk tickets (so users can reassign a few to users backup or assign a few in case users are on leave).
• Show notification sent to new assignment person/s.
• Show how the transferred lines to dashboard of the new person assigned.

• Customer information as preview in CoTF form
• Access customers inputted data before they can decide on Global T1 account flag, Business model, Program type, Master contract id, Leasing type selections
• Fields to display - Market of Ship to, Country of ship to (will be populated based on customer inputs in the Ship to address detail)
• List of info coming from PlutoB2B / Customer : Country of ship to, Market of Ship to, Sold to, Payer, Bill to, Ship to, End customer and Lessee, legal names and legal address, Postal code, City, Country, Tax details+VAT id, Account payable details name and email address, Bill to attention to details, Invoice distributions method, Invoice to last  name and email address if invoice distribution method is pdf invoicing.
• Allow users to only preview, no submit button needed here.

• See all items and filter based on relevant attributes to refine search and view. 
• The access level is same for all users so they can have access to all items on dashboard
• Users can filters for all columns based on the view (eg. open, private, closed). All open requests is a view and all closed requests is another view
• Access to view can be personalized and saved. Eg. as private view. This is about creating views. If a user creates some views/profiles, that user should be able to select any of the views later. 
• Private view can be made public later on.
• Upper level of views that can be created: 10 items.

• Show additional interaction when needed to make your overall experience rich and complete.
• It can be a modal, pop-up, error state, etc.

• Font:
  • Exo. Sizing is open but make sure it's easy to read as this will be a long form.
• Colors:
  • Primary: #0096D6, 
  • Secondary Blues: #142341, #43679B,  #8DAED8, #CCDEF5
  • Secondary Teals: #006867, #008F85
  • Secondary Greens: #007956, #3E9462
  • Secondary Red: #AC0000, #901C3A 
• Icons: Preferred line icon. You may create icons from scratch or use any free for commercial use stock icons in your design. 
• Logo: please use a placeholder. Please avoid using any real logo in your design or you will fail screening.
• Style: clean, simple, and modern
• Form: avoid box model button and field. Client prefers to have a line version instead.

• Web: 1366 x 768px, with height adjusting accordingly.

• Adobe XD
• Figma
• Sketch

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum
• 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/comment on this link while you upload)

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources 
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources

• All source files of all graphics created in either Adobe XD, Figma or Sketch.

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
• Winner will having a task opportunity to adjust their design so its align with client branding, eg. replacing font, adjusting color, feel and look.