Challenge Summary
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 design for a Checkpoint Feedback02. Dashboard Screen (Delivery User & Management User)
03. Dashboard Screen (Contract Admin)
04. Single Queries Screen (Contract Admin)
05. Bulk Queries Screen (Contract Admin)
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates01. Login Screen (All Roles)
02. Dashboard Screen (Delivery User & Management User)
03. Dashboard Screen (Contract Admin)
04. Single Queries Screen (Contract Admin)
05. Bulk Queries Screen (Contract Admin)
06. Setting Screens (Super User)
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
Our Business has reported revenue leakages due to the number of unbilled documents and the lack of visibility on the owner of the pending actions for overdue invoicing cases. Invoicing backlog completion depends on getting the missing information from many parties and the inputs/feedback cannot be automatically tracked. Workflow management and customer follow up are challenges for Operations due to manual interactions and obsolete ticket management technology using SharePoint.
This portal goal is to solve the problem and allow the users to:
- Manage and process all missing info queries for invoicing in a standardized manner
- Able to remove email, Skype or phone requests logging
- Improves our way to provide reporting, tracking and managing query
Challenge Goal
Our goal is to create the best UI and UX of the core portal pages that our users visit, ensuring that their first impression of the portal from a design perspective is positive, modern, usable and easy to use.
Design Consideration
- New, Professional, and Modern look and feel.
- Needs to follow our Branding Guidelines.
- Simplicity to find and view any necessary information
- Responsive Web Approach - Targeting Desktop for now, with a possibility to develop it further for responsiveness in Mobile and Tablet
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
- Looking forward to seeing some ideas beyond our concepts (Feel free to add more screen ideas related to our product!)
Target Devices
- Desktop: 1366px(w) & height up to your design
Branding Guidelines
- Colors: Follow Our Branding Guidelines
- Font: Follow Our Branding GUidelines
- Style: Open to Designers
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=631502
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.
00. General Requirements
- We provide the winning wireframes from our previous challenge.
- To open the wireframes, open the wireframe folder and click index.html.
- Notice that the wireframes have missed several features, and you might need to create some set of screens or interactions from scratch based on the details provided in each screen requirements
- In some screens, there are several features that have details which might need some interaction screens created to simulate the features.
01. Login Screen (All Roles)
Refer to Login Screen
- Needs to have login form (username, password)
- The login system will use SSO from client company
- Needs to have “Remember Me” and “Forgot Password”
- Needs to have login Error Scenario
- No need of Pin code on login screen
- This screen should be able to marketing the app purpose to the user
02. Dashboard Screen (Delivery User & Management User)
Refer to Dashboard - Delivery User
- After successful login, Delivery User will see a dashboard screen and will be able to see all the missing info queries that were assigned to their names.
- In the dashboard table, we need to add all the columns fields provided in the "Data Fields.xlsx".
- For each row in the dashboard table, we need to split the content into two parts, the “user view” part, and the “report view” part. By default, only fields from user view part will be shown on this screen, while the report view will be hidden/collapse and only appear when user click the expand arrow button in each row (there is no expand/hide arrow button functionality created for each row in the existing wireframes, we need to create this, refer to “sample of expand.jpg” for the layout suggestion):
-- User View Part Data Fields: Status, Query type, Query Sub-Type, Country, Account, AMP ID, SAP Contract No, Comments, Due Date, Revised Due Date, Attachments, Watchers, Date & Time Opened, Ageing, SDM, Rework, dMPS/pMPS
-- Report View Part Data Fields (Expand): Billing Index, Billing Start Date, Billing End date, Value to be billed, Currency, Date & Time Closed, SDM Comments, SDM Attachment, Rework Reason, Requestor
- The Delivery User roles will be able to do the following features on the queries list:
-- Sort/filter based on all the fields available in the header view
-- View and see the queries details
-- To download any attached file in the queries
-- To export the queries data in .xls format
-- To re-assign queries to a different Delivery User, if somehow it wrongly assigned by the CA or Management User
-- To add "Watchers" to any of the open queries
-- Select multiple queries and answer all of them at once; the comment and attachments for all answered queries will be common.
-- If the Delivery User is a backup for other Delivery Users, they will have the option to select "See all queries" and filter based on the assigned to/requestor name, and then they will be able to re-assign the open queries to themselves in order to be able to respond or receive responses for those ones.
-- When clicking on the "See all queries" button, all the queries with "New" and "Open" status will be visible on the Delivery User screen, even if they are assigned to another person. Only the "SDM" field will be editable and the Delivery User will have the possibility to re-assign the queries on the Delivery Username by changing the email address in the "SDM" field. Then all the fields will become editable and the Delivery User will be able to respond to them
- Responding single queries, When clicking on the Queries ID hyperlink, a pop-up screen will show up; all the details of that queries will be displayed, as described in the data documentation. Any text added in the Comments field will be stored in the DB on the "SDM comments" field. Any file attached by the Delivery User (SDM) will be stored in the DB in the "attachments" field. Once clicking on the "Submit" button, the portal will update the field "Status" in the DB, from Open to Closed
- Rejecting single queries, The Delivery User will be able to add the response comments in a comments field. When clicking on the "Reject" button, the list of "Rejection reasons" will pop-up and the user will have to select one in order to be able to close the query. The comments and the rejection reason will have to be updated in the "comments" and "Rejection reason" fields, that should be done via the interface and directly connected with the DB. Closure timestamp will also be captured in the "Closed time & date" field and the "Status" field will be changed from Open to Rejected.
- Multiple queries closure, When clicking on "multiple queries" button, a selection box will be made available for each and every open query. When selecting multiple lines and clicking on "Respond" the responding pop-up screen will show-up, displaying the list of selected queries. The "Comments", "Attachments" and "Rejection reason" (where applicable) will be common for all selected queries and will be stored in the DB accordingly. When clicking on "Submit"/"Reject", the "Status" field value will have to be updated in the DB for all the selected queries.
- When clicking on Download, the portal app will record the fields from the Delivery User view (it might be expanded or collapsed view) and allow the user to save a .csv / .xls offline copy. If data is filtered on the user screen, the .csv file will contain only the filtered data.
- Need to be able to receive and view notifications about new/pending queries
03. Dashboard Screen (Contract Admin)
Refer to Dashboard - Delivery User
- Dashboard screen for Contract Admin should be the same as Delivery User/Management User, except there are two additional buttons appear in this screen, "Bulk Queries Creation" and "Single Queries Creation"
- The Contract Admin will have the ability to do the following in this portal via their dashboard:
-- Able to view all missing information from the queries (no matter the status)
-- Needs to be able to see all submitted queries (no matter the status)
-- For each row in the dashboard table, we need to split the content in each row into two parts, the “user view” part, and the “report view” part. By default, only fields from user view part will be shown, while the report view will appear when user click the expand/hide button in each row (there is no expand/hide functionality for each row in the existing wireframes, we need to create this, refer to “sample of expand.jpg”).
-- Ability to upload attachments when responding in popup screen
-- Re-assign open queries
-- Add watchers to the open queries
-- Able to see query details
-- Receive notifications for closed/rejected queries
-- Extract reports
04. Single Queries Screen (Contract Admin)
Refer to Contract Admin User - Single Queries Creation
- Single Queries creation, Contract Admin (CA) will have the ability to log into the portal, access an online request form and update all the fields related to my missing information query (you can find the list of fields marked in green below in the "Data Fields.xlsx” file).
- If any additional information will be needed, they will have the ability to attach documents.
- They will have a button for creating new individual queries, which will open a pop-up screen with an online form, containing the fields marked with Green in the documentation file.
- The Submit button on the form will automatically update a new entry in the DB and will record timestamps
- Need to have a new screen to Create Query with reference, where Contract Admin (CA) will have the ability to create a new query on the Portal, with reference to a closed / rejected query that available in the portal. All the details, except for Attachments, from the referenced query, will be copied to the new query (this one is not available in the wireframes, please create from scratch for this interaction)
05. Bulk Queries Screen (Contract Admin)
Refer to Contract Admin User - Bulk Queries Creation
- Bulk Queries creation, A desktop automation (xls macro tool) will have to be able to connect to the portal DB and write new entries. Right now we are using upload features, is there another way to connect with the xls macro files?
- Before Contract Admin start the Bulk Queries upload process, they will be able to see some instruction somewhere on the screen clearly about how to perform this process (see “Bulk Queries Instructions.txt” for the instruction details)
- Creation timestamps will have to be updated on the entries.
- Contract Admin will have various contracts with missing information and they will want to send all the queries at once
- Contract Admin will access the Desktop automation app, import all open invoicing tickets from the SharePoint, select the ones with Missing Information and update the "Query type", "Comments" and attach files (if needed).
- Then they will click on "Create" button and the app will connect to the Portal DB and create a list of queries.
- Once done, the server/app will send a completion report, to ensure that all missing info queries have been created
- The wireframes not really intuitive and lacks of interactions, please create the interactions screens for the above requirements
- Bulk Queries creation fallouts, If there's going to be any error during the bulk query creation process, the portal will have to send an email to the requestor, referencing the items that were not created. Assumption: the desktop automation will use CA email addresses when connecting to the DB
06. Setting Screens (Super User)
Refer to Super User - Dashboard, KPI Settings, Roles, Email Notifications
- Super User will be able to manage User, Roles, KPI and Email notifications.
- By default, in Super User dashboard, there will be a list of recent active users and user will be able to manage all user from this page (Add, Edit, Blocked, Delete). Also, needs a filter and search feature to find particular user.
- In Roles sub screen, needs to create interaction screens where Super User have the ability to manage each roles about their privileges in the app
- In Email notification sub screen, needs to create interaction screens where Super User can manage the email notification for other roles
- Ability for Super User to edit SLA table from KPI menu:
-- SLA table from KPI settings can be editable
-- Needs to have pagination
-- Needs to have Filter
Important:
- 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/comment this link while you upload).
Target Audience
- Contract Admin User
- Delivery User
- Management User
- Super-user
Documentation
- Wireframes (as a starting point)
- Fonts
- Bulk Queries Instructions.txt
- sample of expand.jpg
- Branding Guidelines (ABC How-To-Guide.pdf)
- Data Fields (Data Fields.xlsx)
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 the 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 photoshop later), XD or Sketch (Needs to be added to zeplin) 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.