Topcoder TaaS Application Design Challenge

Welcome to The “Topcoder TaaS Application Design Challenge”.
The scope of this challenge is to design the application interface for our Talent as a Service program as part of a micro front-end solution for Topcoders customer-facing platform. 
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

Persona 1

1. My Teams Flow

2. Team Detail Flow

3. Feedback ( Client Side )

Persona 2

4. My Gigs Flow

5. Assignment Detail

Round 2

To be eligible to join the final round, you must submit your design from the initial checkpoint phase. Please refer to this guidelines of multi round contest if you are new to Topcoder

Persona 1

1. My Teams Flow

2. Team Detail Flow

3. Feedback ( Client View )

Persona 2

4. My Gigs Flow

5. Assignment Detail

6. Gig Work Opportunities

7. Payments

8. Feedback ( Talent View )

CHALLENGE OBJECTIVES

• To design the micro-app within our new Framing Application layout.

• Creating an intuitive and feasible concept that helps both client and talent to navigate using the TaaS micro-app(s).

• For this challenge you only need to focus on creating the web view, however this App(s) will be accessed through a browser, that includes mobile platforms, so please keep this in mind when you design your interface should look good on both devices. Please pay attention for accessibility as well, the design should accommodate this as well. 

 

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. We use it in cases where it makes more sense for the customer to work with defined resources rather than strictly with challenges. It is much closer to a traditional freelancing model where you and the customer work directly together as opposed to working through challenges. Anyone who is successfully placed into a Gig Work opportunity can expect to work directly with our clients on exciting and challenging projects, operating as a direct member of the client’s team and/or delivery model.
 

We just finished designing the Framing Application design that enhances the way users navigate between several Topcoder customer-facing apps that are already developed for different purposes, Now we are moving forward designing the content which is the micro-app that is nested using this design and TaaS is part of this micro-app.

This challenge is focusing on the TaaS micro-app interface within the new Framing Application, you will be provided with the base as a pointer and please focus on the app zone only where you will place the structure of your design. Follow the Topcoder branding, and your micro-app should feel like a part of the Framing Application itself, so follow the behaviour and interaction with the main Frame. There is no fixed solution on how the Application looks like, we are open to your creativity and ideas of how this will look. 

 

AUDIENCE

Topcoder Employees

Clients

Topcoder Member

PERSONA

Since there is two point of view here as a Customer and Talent, please refer to these persona objections as follow :

Persona 1
 

Name: Gary

Occupation: Topcoder Customer

Goals: 

• To easily use the TaaS Application for finding, shortlisting and seeing the potential talent for the specific project needed. 

Wants:

• Seamless experience to manage team, talent and execute the TaaS task in the micro-app

• Gary must be able to shortlist easily, seeing the potential candidates who match the skills and experience required. Curated candidates would be usually 20 people or less.

• To clearly see the list of projects, team involved, and feedback given by the end of each working period.

 

Persona 2

Name: Katie

Occupation: Topcoder Talent

Goals: 

• To easily use the TaaS for applying for new gig opportunities and track her performance and payments. 

Wants:

• Shortlisting current opportunities that matches her talent.

• To see how clients rate her based on previous assignments.

• Easily check her payment status.
   

 

USER STORY

Gary is a Topcoder client and excited to find new talent for his current project in the Topcoder platform. He opened the micro-app TaaS and here he can see all the teams he has been working with and find the new potential talent. He can shortlist, give feedback and check team status.

Meanwhile, Katie is one of the talented Topcoder members who is looking for new opportunities. From her side, the micro-app will be named My Gigs. Here she can see the latest opportunities available at Topcoder. When scrolling down she finds the potential gigs that she knows she could be an excellent fit for. Katie decides to apply for an opportunity. After a short while she gets confirmation that she has been selected to interview for the assignment and follow up with the next step in the process. With the micro-app Katie is able to monitor all the jobs she has applied for, check the assignments, and give feedback by the end of each working period. Assume the working period is a week.
 

DESIGN GOALS & PRINCIPLES

• Easy to use interface, The design should follow the Topcoder Branding, styling and behaviour.

• Framing application design is given to be used as a base where you can place your micro-app within the layout. So please make sure your design is consistent and feels like a part of this framing application.

• This micro-app will be accessed from different platforms such as mobile and tablet, so consider that your design should look good and fluid regardless of the device used.

    

EXPLORATION SCORE

Creativity: 6

1: barely new ideas

10: a utopic product with features not proven to be able to be fully implemented

Aesthetics: 6

1: low-fidelity design, wireframe or plain sketch

10: top-notch finished looking visual design

Exploration: 4 

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 from 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 from semi-independent microservices.

• Framing Application - You will see this phrase mentioned in the challenge, this is to refer to the Header and subnav design we provided in the branding guidelines.
   

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, utilize the header and sidebar nav options from Framing app navigation provided.

• Follow Topcoder branding, Keep it simple and technically feasible 

• This challenge we are building the web version only however this will be accessed through Desktop and mobile platform so please keep it in mind with your design layout.

• Required Screen breakdowns are our ideas - you may add if necessary if it makes sense to reach the solution as long as they logically show all the essential data in an intuitive manner. 

• Winner may be asked to write a style guide outlining the design standards they used as an additional paid task. This guide could be used across future Topcoder apps. 

• Please do not overboard with features unless requested from the requirements, stick to the technical request only.
   

Persona 1 Screens - Topcoder Client Side ( Gary )

Application Name: TaaS
1. My Teams view

Contains a list of all taas teams the customer has hired.

Essential Data points:

Team Name

Start Date / End Date

Time Remaining

Weekly Cost

Number of team members
 

2. Team Detail View

- Accessed from the My Teams view, Must include a button to return to previous My Teams view. Essential Data :

Team Level Data

Team Rate (assume weekly)

Time Remaining (amount of time that the team is booked for. Assume furthest end date of all team members)

- List of all team members

First Name / Last Name

Handle (hyperlink to profile)

Rate (assume weekly)

Skills Matched (This means the skills the customer requested for the project which the team member has, expect there could be many and it may need to be a modal/mouseover or other UI element)

TaaS Rating (1-5 stars - uber style)

- List of open positions on the team

Role (Developer/Designer/Data Scientist)

Skills requested for each role (there could be many)

Start Date

End Date

Rate (assume weekly)

Status (Sourcing, Candidates Available for Review, Staffed)

Candidate Selection Action (dependent on status field being = Candidates Available for Review) - this will open a screen with candidate details

- Essential Actions:

Report an issue button
 

- Candidate Selection: (only can navigate to this via the above action from Team Detail), Display pages of candidates. Assume there could be a large number of candidates for design purposes, In reality could be up to 20 Candidates.

Essential Data points:

Name (first/last)

Handle (link to topcoder profile)

Candidates skills (highlight somehow the skills they possesses which match the needs for this role)

Download Resume

Essential Actions

Schedule Interview

Not Interested / rejection button

Select button (confirm this is the preferred candidate)

 

3. Feedback : There is room for creativity here. These requirements illustrate the function of feedback, So there will be two types of feedback, one is the working period feedback, assuming the working period here is weekly. Clients should be able to rate the weekly performance of the talent. This is useful as a metric and to monitor if there is any issue. Then, there is a Final feedback which is overall at the completion of assignment. The final feedback will be a combination of interpersonal, technical and social skills of the talent.

- Provides list of teams with open Feedback requests (also can show items with no pending feedback, but prioritize display of pending requests)

- Each team can be expanded or drilled into. When this is done, the user sees a list of working periods for that team.

Working periods have the following data points: Period Start and Period End

Working periods can be drilled down or expanded.

When drilled down, it should show all members of the team who worked that week

There should be an option for each member to rate 1-5 stars for that working period

Optional comment field

Provide an option to apply a rating to the full team

 

Persona 2 Screens - Topcoder member ( Katie )

Application Name: Gig Work

This will not show as “TaaS, but as “Gig Work”. This is essentially a different app, but also uses the frame. Intended user is a Topcoder member doing Gig Work projects

Since in frame it will have its own nav options. Members do not see the options or screens from persona 1 at all.

Screens:

4. My Gigs

Displays a list of gigs the person has been assigned to, and Gigs they are actively interviewing for.

Active teams on top, inactive teams below

Ability to expand ot drill down to Assignment Detail
 

5. Assignment Detail (designers can choose how to separate gigs assigned and candidacy)

- For an Assigned Gig: Accessed via My Gigs, shows a single assignment in more detail. 
Essential data points :

Customer Company Name

Team Name

Gig Status (Not yet started, Active, Complete)

Gig Time Zone

Availability Window (hours in which the member of generally available for collaboration on the Gig)

- Customer Contacts - contact info for customers involved

Name (first / last)

Topcoder handle

Email (mailto)
 

- List of work periods on the projects, Show all work periods along with following details:

Period Start

Period End

Period Rate

Customer Rating (1-5 stars)

Payment Status (Paid, Pending)

- Essential Actions:

Report an Issue

- For a Gig being actively considered

Essential data points

Customer Company Name

Team Name

Gig Status (Not yet started, Active, Complete)

Gig Time Zone

Availability Window (hours in which the member of generally available for collaboration on the Gig)

Interview Dates
 

6. Gig Work Opportunities

Displays a list of all open opportunities. Members can use examples from the current gig work opportunities on topcoder.com as a placeholder in their submissions.

 

7. Feedback
Talent will only be able to see their overall final feedback from the client, this screen will be active once the assignment is complete and talent can give their overall feedback towards the customer team. 
- Displays all working periods in which the gig work was assigned. 

- Allow the gig work to rate the working period (1-5 stars)

- Optional follow on questions:

How was your workload?

Feedback for customer team:

8. Payments

List of all gig work related payments

Gig Name

Period End date

Amount