Topcoder TaaS Admin App - Resource Bookings and Payments Design Challenge

CHALLENGE OBJECTIVES

• Create separate screens for Resource Bookings & Payments pages
• Improve existing TaaS Admin page to be more user friendly

Round 1

Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots.

1. Resource Bookings Page
2. Payment Page
3. Updated Working Periods Page

Round 2

Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.

1. Resource Bookings Page
2. Payment Page
3. Updated Working Periods Page

PROJECT BACKGROUND

Topcoder TaaS (Talent as a Service) allows customers to hire particular freelancers for some jobs. We have Topcoder TaaS Admin App: https://platform.topcoder-dev.com/taas-admin/work-periods which allows Topcoder managers to process payments for freelancers, see screenshot: https://monosnap.com/file/EIUGJYMioYc7JO2yMoLrvAsK3GCtcZ


Each freelancer can be assigned to some Job as a Resource Booking. Resource Bookings have start date and end date of the period when the freelancer assigned to the Job, and this period from start till end date is split into weeks called Work Periods, see screenshot: https://monosnap.com/file/0igU44Bu20RrTPObuw0No6c8MZJIdV


Topcoder Managers process payment to the Resource Bookings on the weekly basis, by entering how many days freelancer worked and processing payments for these days. Each Work Period can have multiple payments. For example we can process payments for 3 days, and one more for 2 days, to pay 5 days in total. We can also process some additional payment like bonuses and so on. Managers would like to be able to have a discussion attached per particular payment, see screenshot: https://monosnap.com/file/jMs8aOC6myzVKZml55YFVs0qgKRSjv


At the moment we have only 1 page in the TaaS Admin App where we show a table with Resource Bookings data for any particular week (Work Period). We allow seeing more details for each Resource Booking by clicking a row, see screenshot. We support the next functionality:

• Search and filter Resource Bookings (Work Periods)
• Edit Working Days per Work Period
• Process payments for selected Resource Bookings (for current week) or for all Resource Bookings at once (for current week)
• Changing Billing Account of Resource Booking

 

CHALLENGE ASSETS

• Storyboard: https://drive.google.com/drive/folders/1da3ij33YFtSpdr4lltONiIvbhkgQ9DpG?usp=sharing
• Demo Site:
  • TaaS Admin App: https://platform.topcoder-dev.com/taas-admin
  • TaaS App: https://platform.topcoder-dev.com/taas/myteams
    • Username: jcori
    • Password: appirio123

 

BUSINESS REQUIREMENTS

We've got the next new requests from business:
1. Allow adding a textual note per each Resource Booking which would stay there no matter what week (Work Period) is now. For example we could add notes like:

• "I've changed Billing Account from 89089080 to 12312312",
• "This RB would be on vacation from 10/07 till 20/07",
• "RB has problems with internet connection constantly" and so on.

2. Support discussion per each Resource Booking which would stay there no matter what week (Work Period) is now. Unlike "note" , there is only one textual field which can be edited by anyone. The discussion allows managers to have a chat regarding a Resource Booking similar to what we have in Connect App (screenshot: https://monosnap.com/file/W34W0NoiPJJ5ychM7VpHO40bZW9APj ). In particular users should be able to mention (aks @anotheUserHandle) so mentioned users would be notified about the message. For example this might be needed for the cases when one Manger asks another manager to process additional payment for the Resource Booking, like

• "Hey @max, please process extra $300 for the overtime done during this weekend", and reply could be like
• "@manager, it's done, $300 is processed, see link".

3. Support discussion per each Payment to clarify why particular payment was done, ask to cancel the payment, adjust the payment amount and so one. The same as for Resource Bookings, the discussion should have similar features like for Connect App (screenshot: https://monosnap.com/file/YTjsFvDlJVuQwHkv1SS5Z6M8m2CW2x ).

4. One of the major features of the discussions for Resource Bookings and Payments is the ability to mention users. When a user is mentioned they are supposed to get a notification email (like on screenshot: https://monosnap.com/file/5DKtF4rgBqFmqZkrZ9LcpLnxfCOXOa ) or in-app notification (like on screenshot:https://monosnap.com/file/Od11bFi7Lpn4Lo8q6zyAzP5zSW06QB ). And this notification would have a link which should lead to a place where user can see:

• the actual post of the discussion
• the Resource Bookings / Payment details to which this post/discussion is related to

5. As this application is for Topcoder Manager/Admins which usually make many operations we would like to reduce the amount of clicks for them when performing operations.

• We would especially like to avoid page changes as much as possible, so managers/admins should be able to perform as many operations without leaving a particular page as possible.
• To speed up development and reuse components which we already implemented it would be nice to:
  • Reuse existent design elements styles from TaaS Admin App https://platform.topcoder-dev.com/taas-admin
  • if something is not implemented in TaaS Admin App but we have it TaaS App, then reuse design elements and styles from TaaS App if possible https://platform.topcoder-dev.com/taas/myteams

SUBMISSION REQUIREMENTS

1. Resource Bookings Page

Should have the next features:

• Resource Bookings Discussion
• Show Resource Bookings Details
• Apart from Resource Bookings itself show some data about related Job and Team so we know where this Resource Bookings belongs to.
• Ability to edit Resource Bookings Details without leaving the page, still we have to make sure that we would not change data accidentally, maybe using in-place editing?
• In particular we should also be able to edit a "note" - the new things we are adding.
• We should also have some clear feedback from the UI if the change we've done was successfully saved on the server or some error happens. What would happen if an error happens? Would value revert to previous and we should edit it somehow again? Or would it stay edited to a new value but we could re-try server requests somehow?
• Show validation errors like in TaaS App or other way, see screenshot: https://monosnap.com/file/8pGDhnqZsRn3UgtqQQg1DCylU7BZcA
• Show the list of all Work Periods of the Resource Bookings (this is what we currently show in the history when clicking Resource Booking line, as on screenshot: https://monosnap.com/file/KuQfXCtGeGpzUpgRuSeoV2wfNd2f3Y )
• We should be able to perform all possible operations related to this Resource Bookings and its Work Period on this page without a need to leave this page. Basically this means that we should support the same operations which we support in the main list of Resource Bookings.

2. Payment Page

Should have the next features:

• Payment discussion
• View Payment Details
• don't have to be able to edit payment details as there are specific rules for that we would reuse existent dialogs
• Payment details are listed in the model definition https://github.com/topcoder-platform/taas-apis/blob/dev/src/models/WorkPeriodPayment.js#L36-L80 and some of them could be seen on the Work Period payments list screenshot: https://monosnap.com/file/jMs8aOC6myzVKZml55YFVs0qgKRSjv
• View some data about related: Work Period, Resource Booking, Job, Team so we know where this payment belongs to.
• Cancel payment using existent cancel payment dialog, see screenshot: https://monosnap.com/file/w8bfYTR5zQZnYQqL7aEVEFYoQNwkLT
• Edit payment using existent payment edit dialog, see screenshot 1: https://user-images.githubusercontent.com/146016/127998025-acc6802e-f7b1-4924-a401-3f8d45c3cdf0.png , screenshot 2: https://user-images.githubusercontent.com/146016/127998792-13ffaaa9-b177-42ae-a0ed-fa1bf6211b19.png

3. Working Periods

We would also like to make a couple of small updates to the table page.

• For each Resource Bookings which has some posts inside the discussion we would like to be able to know about that from the list page. For example, show some kind of an icon with the number of posts in the main table page.
• Show the same kind of icon with the number of posts for payments inside the table.
• Consider allowing us editing "note" for Resource Bookings inside the table as I guess we could find a place for that.
• Here are some of our ideas just for understanding the task, don't have to follow it, see screenshot: https://monosnap.com/file/ZwDqUZdnZMyjUChdfWHRKSq9dK4s2d

EXPLORATION SCORE

Creativity: 3
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented

Aesthetics: 9
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design

Exploration: 5
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application

Branding: 9
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success

AUDIENCE

• Topcoder Manager/Admins

DESIGN GOALS & PRINCIPLES

• Professional, simple and clean look & feel.

BRANDING GUIDELINES

• Following existing TaaS Admin App & Earn App styling.

SCREEN SIZES

• Desktop: 1400px width and height as required

FINAL DELIVERABLES

• Original source files: Follow existing design source
• Marvel Prototype:  
  • Upload your screens to the Marvel App.
  • Send your marvel app request to challenge forum
  • Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
• Challenge winners need to fix the MarvelApp Handoff to be able to  extract all the element styles and download all the icons/images as SVG from there.