Challenge Summary
Welcome to The “Topcoder TaaS Admin App Design Challenge”.
The scope of this challenge is to design a seamless solution for admin handling and reviewing the working period from the TaaS gig. 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
SCREENS REQUIREMENT
Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots.
ROUND 1
1. Working Period Flow
2. Resource Booking Detail View
3. Filter, Interaction and picker design.
Round 2
To be eligible to join the final round, you must submit your design from the initial checkpoint phase. Please refer to this guideline of a multi-round contest if you are new to Topcoder
1. Working Period Flow
2. Resource Booking Detail View
3. Filter, Interaction and picker design.
CHALLENGE OBJECTIVES
- To design the TaaS Admin app within the Framing Application layout.
- Creating an intuitive and feasible concept that helps the admin review the active, upcoming and previous working period.
- For this challenge, you need to focus on finding the best solution on how to present data and reviewing the working period easier.
- ���Sketch file is the only accepted source type for this challenge.
APPLICATION OVERVIEW
Gig Work at Topcoder is part of our “Talent as a Service” or TaaS offering. It is one of several ways that Topcoder engages with its customers. This is the preferred method when a customer wishes to work more directly with individual resources as opposed to accessing the Topcoder Community via challenges. Please make yourself familiar with the Gig work or Taas Application from the current design provided to get you a sense of what TaaS is about, For this challenge, our focus is for the Admin side to manage the working period days and reviewing payment from each project of the Gig work.
There will be a series of action in the working period, such as inserting, adjusting working days, updating Billing Account, Updating payment rate, Where most of this still done manually, a simple wireframe will be provided as a guide for you to see the bigger picture, please don’t take it as it is figuring out if there is a smarter way to resolve the challenge, The current TaaS design file is provided please use this as your base, do not introduce a new colour or styling strictly using what is already there. What you should focus on the most is the flow of how the admin handles information.
AUDIENCE
Topcoder Admin
PERSONA
Name: Gary
Occupation: Topcoder Admin
Goals:
To easily use the TaaS Admin Application for reviewing, scheduling, updating working days, on rare occasions adjusting payments, and seeing the history of the working periods.
Wants:
- Seamless experience in schedule, adding or editing working days.
- ���Gary must be able to see the talent working history.
- The ability to customize, filtering various attributes in the table.
USER STORY
Gary is a Topcoder admin and needs to manage the current working period week payment/days, He opened the micro-app TaaS admin and on this page he can review all active talent on the current working period, and navigate to other cycles, adjusting payments, updating the future/upcoming working days if needed.
DESIGN GOALS & PRINCIPLES
- Easy to use interface, The design should follow the current TaaS Branding, styling and behaviour. So please make sure your design is consistent and feels like a part of the whole application.
- ���A simplified process managing working period actions. Utilize iconography, symbols to help analyze the data faster.
EXPLORATION SCORE
Creativity: 4
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 5
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design
Exploration: 3
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: 10
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success
GLOSSARY
- Micro-App - are a new pattern where web application UIs (front ends) are composed of semi-independent fragments that can be built by different teams using different technologies. Micro-front end architectures resemble back-end architectures where back ends are composed of semi-independent microservices.
- Framing Application - You will see this phrase mentioned in the challenge, this refers to the Header and sub-nav design provided in the branding guidelines.
- ���Working Period - Period of completion of the project based on a weekly timeline, TaaS as a business operates by billing a customer on a regular basis based on the agreed working period and rate. For example, a customer who is purchasing 1 resource for 4 weeks @ $1000, would be paying $1000 weekly for the four weeks.
SCREENS/FEATURES
Please make sure your design includes the following screens/sections. We are open to your suggestions about the structure of the screens as long as deliver the solution we are looking for.
Overall
- Must sit in the framing app design provided, please find this base on the design asset section, Header and sidebar should not be redesigned, you should however add the ticker where the user can switch from Taas app to the Admin app and label as needed.
- Follow Existing branding, behaviour and styling, keep it simple and technically feasible.
- Required Screen breakdowns are mandatory - you may add additional new concepts if you have a better solution as long as the requested page provided.
Please do not overboard with features unless requested from the requirements, stick to the technical request only.
1. Working Period Flow
When the user entering the admin app it would show the currently active working period table by default, to understand the working period each project will have a weekly based cycle, so ie: client is running a project run for 6 weeks and there is a total of 4 talent which we refer as Resource booking then this will be divided into 6 working period cycle, payment will be billed based on the weekly cycle. On this working period page, the table will be a list of all Active Resource booking from all active gigs we have on Topcoder on that particular week.
Refer to the basic wireframe provided, the user will be able to navigate between the previous and future working period. Where each working period will show each talent who is active and the admin will review and make sure the data is correct before executing the payment based on the days they work.
Data points need to be shown here :
- Handle
- Client associated with the gig
- Weekly Rate
- Start Date
- End Date
- [ Input Field ] Working Days
Features expected from this page
- Switching between working period cycle.
- Ability to see calendar view, a sample of practice is google calendar where you can navigate based on weekly timeline and you can switch to any other dates as well.
- Expanding and collapsing based on Handle, this section further explained in Section 2 below.
- ���A clear indicator of days already executed, payment status.
- When the admin finishes with the review he will be able to execute/confirm all the working period days in a go.
- There will be occasions where talent is possibly working on different clients, you need to separate this, each list only designated per project.
2. Resource Booking detail view
Detailed view when expand the Resource field, to understand this please have a look at the current TaaS design from the talent side when they are assigned a project, in that page, you would see the Resource booking is working for 9 Working periods the data of this cycles we need to show on the expanded view, please not copy those style directly to your concept, we want a better way to see details without taking too much space in addition other features need to be added here. Admin must work in lots of fields so try to make it efficient and help them execute the task faster.
Ideally, these details should be shown when the admin clicking to expand [+], figure out how you want to present these data in the best way possible.:
- Team Name
- ���Job Name
- Payment Status ( Is it already paid or pending) could be solved with colours/iconography
- Locking down the days worked field
- Links to challenges corresponding to payments ( The page is out of scope just provide a hyperlink for now).
- There is likely a need for a way to set Billing Accounts (BA) if it’s not assigned in the list, there will be an option to choose the BA using a dropdown list.
- An Iconography or conditional highlighting for a number of things like Billing Account Balance Low, Expired, No Billing Account assigned, and ResourceBooking End date approaching
- History of the previous working period, show the days, payment status, start-end date, and [input field ] Upcoming pre-fill working days, this is useful if talent already has fixed days for the next working period where admin can update it right away.
3. Filter and Picker design
Show how the filter would work, must-have in the filter to sort by Team Name, Payment Status, handle and a way to narrow the working period based on the date range, payment status ( late, completed, on the process, etc ). And we need a picker design which you can see on the top right of the app where the admin will switch from the TaaS app to here and vice versa.
BRANDING GUIDELINES
Use the Topcoder GUI kit as your base. Your design must be placed inside the TaaS design provided. The app will be accessed through multi-system ( IOS and PC) and different platforms.
SIZE
1400px width and height as required
DESIGN ASSETS / INPUT DATA
TARGET DEVICES
-
Web Browser
FINAL DELIVERABLES
- All original source files
- For this challenge, Sketch files the only accepted format.
- Marvel Prototype -
-
Upload your screens to Marvel App. You may combine the desktop and mobile view in one marvel project.
-
Send your marvel app request to seetakaurchamba@yahoo.com
-
Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
-
------------------------------------------------------------------------------------------------------------------------
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.