Asset Tracking and Invoicing - Web App Design Challenge

Welcome to “Asset Tracking and Invoicing - Web App Design Challenge”.  In this challenge, we want to build the best possible UI/UX screens for our Asset Tracking and Invoicing responsive application that will be used by different roles to simplify the asset serialization and invoicing process within supply chain operations for the corporate customers that lease hardware from us. 

Recently we completed a wireframe challenge to create the UX flow for a responsive web app - now we want to take up those wireframe screens and further create the best possible UI and also improve the overall UX wherever possible.

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 designs for checkpoint feedback:

1. End Customer 

• Feel free to add any screens which are necessary to explain your concept
• As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your design
• Make sure to include a URL/comment the link to your marvel app while uploading your submission
• Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final designs with all checkpoint feedback implemented:

1. End Customer
2. Leasing Partner
3. Supply Chain Team 
4. Installation Partners
5. Manufacturing Unit

• Feel free to add any screens which are necessary to explain your concept
• As a part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your design
• Make sure to include a URL/comment the link to your marvel app while uploading your submission
• Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
• You MUST submit in the 1st/checkpoint round to be eligible to participate in the 2nd/final round!

• The client of this challenge is a global electronic device and its related components manufacturer 
• They would like to improve the efficiency/turn around time in their manufacturing-related supply chain sub-process(s)  and ensure its transparency by providing the status of electronic device(s) / component(s) at various stages, visible to all the concerned stakeholders through the digital technologies like Blockchain and form the blockchain consortium among the various stakeholders as mentioned below
• The solution also will automate the process across manufacturing unit, 3rd party leasing company, 3rd party installation party, invoicing unit, customers and multiple internal departments involved throughout a device leasing cycle
• Currently, the sub-processes like Invoicing process and Asset Tracking are considered for this challenge:
  • End Customer
  • Leasing Partner
  • Supply Chain Team
  • Installation Partners
  • Manufacturing Unit

• We are looking for an intuitive, easy-to-use, corporate, modern design
• Best Practice for Responsive Web Application (Focus on Web/Desktop only for this challenge)
• Use color, visual comparison, and drill-down charts to highlight a comparison
• Easy to navigate the investment process, encourage iterative experimentation
• 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

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=720956

• All UI needs to be easy to customize. Since we will be using this to showcase multiple partners, applications must be themed in a way that suits individual organizations. This typically includes: Logo, Primary color, Secondary color, Font (family and size), Spacing, etc
• We need a clear screen flow in your design. When creating screens for particular roles, make sure to use the correct user in it. In this challenge, each role should have the following user profile so we know the screens flow:
  • "Gary" for End Customer
  • "Nate" for Leasing Partners
  • "Tom" for Supply Chain Team
  • "David" for Installation Partners
  • "Leo" for Manufacturing Unit
• IMPORTANT! Create GUI KIT for your design so the user can customize the design elements easily in the future, you MUST submit a GUI KIT in the 1st round/checkpoint to get proper feedback from the client!

• WF Reference: login
• Create a simple login screen where the user can enter their username and password
• Provide the “Remember Me” option
• Provide a way for the user to retrieve their password
• Treat this page as a marketing area where non-logged in user can understand the app purpose

• WF Reference: S1 01 Dashboard
• Provide global search, notifications, photo thumbnail of the person logged in and an option to logout.
• The main navigation will need to include the following: Dashboard, Orders, Invoices, Acceptance, and Settings
• The dashboard will be almost the same for all types of users.
• Orders: Show a visualization as well as a table data of orders with an option to view all the orders
• Acceptance: Show a visualization as well as a table data of Acceptances with an option to view all the Acceptance
• Agreement: Show a visualization as well as a table data of Agreements with an option to view all the Agreements
• Invoices: Show a visualization as well as a table data of Invoices with an option to view all the Invoices

• WF Reference: S1 02 Orders Listing
• This page needs to show the list of all orders
• Need to show the summary/statistics of the order type (Open, In-Production and Closed)  as shown in the wireframes
• We need to allow the users to search for an order based on a date range or filter through the list of orders based on the status
• Order status needs to be indicated by color code, think on how best to represent the status of each of the order
• Users will have the option to sort the table
• Provide pagination as there would be many orders

• WF Reference: S1 03 Order Details
• Order details will show the order id and its associated details
• List of all the status of the order needs to be displayed, and show what status is completed and highlight what is the current status of the order, what will be the next stage (In the wireframe, you can see the current status is highlighted in green) - Come up with ideas on how this can be shown well
• Within each order, there will be multiple items and each of the items will have more details - so that needs to be represented along with its overall status

• WF Reference: S1 04 COA- Listing
• This page needs to show the list of all acceptances
• Need to show the statistics based on the order type (Accepted, Not Accepted)  as shown in the wireframes
• We need to allow the users to search for an acceptance based on a date range or filter through the list of acceptances based on the status
• Acceptance status needs to be indicated by color code, think on how best to represent the status of each of the acceptance
• When the status of the acceptance is “Not Accepted” it will have a “Sign” button that will allow the user to sign the acceptance
• Users will have the option to sort the table
• Provide pagination as there would be many acceptances

• WF Reference: S1 05 COA By Sign
• This page will show the product details and allow the user to sign/accept that products were received in good conditions
• List of all the status of the acceptance needs to be displayed, and show what status is completed and highlight what is the current status of the agreement, what will be the next stage. (In the wireframe, you can see the current status is highlighted in green) - Come up with ideas on how this can be shown well.
• Please follow the details from the wireframe
• Also, create an uneditable page similar to this as shown in S1_06 Signed Acceptance

• WF Reference: S1 08 COA By Agreement
• This page will show the agreement details and allow the user to sign
• List of all the status of the agreement needs to be displayed, and show what status is completed and highlight what is the current status of the agreement, what will be the next stage. (In the wireframe, you can see the current status is highlighted in green) - Come up with ideas on how this can be shown well.
• Provide a “Sign” button and provide interaction for the signed status (click the sign button)
• Please create the "Signed" screen too  - S1 09 (Signed) COA By Agreement
• Please follow the details from the wireframe

• WF Reference: S1 11 Invoice Details
• This shows the invoice details with the list of products
• Provide option to download the invoice

• WF Reference: S2 08 Create Acceptance Agreement Details
• This is similar to "S2 07 Create Acceptance Agreement Details", but on this screen, we have few editable details, we are looking for your thoughts on how to allow the user to edit these details
• Clicking “Add COA” will trigger the modal window to add COA, provide this screen in your design
• Remove the options that are shown to export 
• Please follow the content from the wireframes

• WF Reference: S3 11 Create Invoice
• Ability to mark the invoice as "Active" or "Cancelled"
• Allow the user to “Add Items” to the list and also provide an option to remove the items
• Ability to remove/delete or add item in "purchase orders"
• Once all items are added, the user will click on the “Create Invoice" button
• Also, provide an option to cancel the creation process

• WF Reference: S4 03 Order Details
• This screen gives installation partners user the ability to change the item/device status based on their activity related to the items.

• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance
• Focus on User Experience / how the user interacts within the dashboard

• We need you to upload your screens to the Marvel App
• Please request the Marvel app in our challenge forum 
• Clickable Prototype is preferred (and might give you advantages in the review process)
• You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).

• Google Drive: https://drive.google.com/drive/folders/1Vtc_D6O9CZjBv6g7mrdb78p2QbVFz6n6?usp=sharing
  • Offline Wireframes - View the online version from this link: https://asset-tracking-invoicing-v27.herokuapp.com/
  • Original User Flow
  • Sample_data_v2.xlsx

• Branding is open to the designers
• We will be partnering with many different company, so it needs to be easily customizable 

• Responsive Web Design
• Focus on Desktop for this challenge: 1366 x 768px

• Corporates Companies (End Customer)
• Leasing Companies Partners
• Supply Chain Team
• Software Installers Partners
• Device Manufacturer

• How well you plan the user experience and capture your ideas visually
• Cleanliness of your graphics and design
• The overall design, UI and user experience
• Consistency across the UX/UI

• 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.

• Submit JPG/PNG for your submission files
• Submit Marvelapp as part of your submission

• All original source files of the submitted design. Files should be created in Adobe Photoshop, XD, or Sketch!

• 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.