Topcoder TaaS Interview Scheduling App Design Challenge

Welcome to The “Topcoder TaaS Interview Scheduling App Design Challenge”.

The scope of this challenge is to design the application interface for our Talent as a Service Interview Scheduling 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. Set up interview flow

2. Interview confirmation page

Persona 2

4. Talent invitation flow

5. Interview confirmation page

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

Persona 1

1. Set up interview flow

2. Interview confirmation page

3. Interview page list

Persona 2

4. Talent invitation flow

5. Interview confirmation page

6. Talent interview summary page

CHALLENGE OBJECTIVES

• To design the scheduling 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 scheduling flow, 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.

• The sketch is the only accepted source file 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. 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 TaaS Application design, Now we are moving forward designing the content feature which is scheduling the interview for a potential candidate that fits the client criteria for working on the gig challenge they offer at Topcoder.

 

This challenge is focusing on the TaaS Interview Scheduling interface within the new TaaS Application, you will be provided with the base as a pointer and please focus on the designated page provided where you will expand the structure with your design and creativity. There is no fixed concept on how the design should look like, however, it must feel seamless with the current TaaS app so please refer to the branding of the design and interface.

 

AUDIENCE

Topcoder Employees

Clients

Topcoder Members

PERSONA

Since there are two points of view here as Topcoder Client or Talent, please refer to these persona objections as follow:

Persona 1
 

Name: Gary

Occupation: Topcoder Client
 

Goals: 

• To easily use the TaaS Application for scheduling, updating interviews with the potential talent for the specific project needed. 

 

Wants:

• Seamless experience to schedule, setting the interview in the TaaS task in the micro-app

• Gary must be able to see the candidates timezone so he can suggest a reasonable interview time range.

• The ability to view the scheduled interview and status of the invitation he sent.

 

Persona 2

Name: Katie

Occupation: Topcoder Talent
 

Goals: 

• To easily use the TaaS app to accept interview invitations and see the summary of the interview.

Wants:

• Able to see the list of new invitations and a scheduled interview.

• Able to see the summary of interviews from the selection of gigs she applied.

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 he is about to schedule an interview for the candidate he already shortlisted that fits the criteria he is looking for.  

 

Meanwhile, Katie is one of the talented Topcoder members who is looking for new opportunities. She is about to get an interview invitation from the gigs she recently applied for and she should be able to see the summary page of the scheduled interview, invitation and history of interviews from other gigs she applied.
 

DESIGN GOALS & PRINCIPLES

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

• TaaS application design is given to be used as a base where you can place your concept 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 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 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, Header and sidebar should not be redesigned, only on the content page as requested.

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

• The 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 )

 

1. Set-Up Interview Flow 

Refer to the designed page here as your starting point, When a client clicks on the schedule interview button he will be able to fill the form as follows.
Manual:

• Interview title & Handle: Automatically generated from the system

• CC options (emails of people who are to be invited to the interview)

• Interview slots (30 or 60 minutes only accepted)

  • Minimum of two options of dates and time slot per interviewee

  • The selections must be across at least two different days

  • Selections must be at least 24 hours in the future rounded up to the nearest day

• Video conference preference:  Zoom or own link, the client will decide the platform they would use for the interview if it’s Zoom an automatic link will be generated later.

 

When the client finishes with the setup and confirms a link is sent to each interviewee by email to complete the step.

Design Challenge: We are looking for your suggestion on how to set up the interview that makes sense for both parties, in real scenario time-zone will be a big factor, how do we show in the set-up page the timezone of his preferred talent against him so he can choose a reasonable time slot that works for both parties.

 

2. Interview confirmation detail 

A page for detailed confirmation of list interview invitation he sent to the talent, an interview detail page should contain:

• Candidates info

• Interview title and gig project title and gig short brief.

• Scheduled interview time

• Interview link, if the client chooses Zoom in the setup the automated link will be generated here, however, if the client chooses his own link please provide an input field where he must insert the invitation link here

• CC’ed attendees

• Button to add to the calendar

 

3. Interview page list
A page where the client is able to see the list of interviews he sent to candidates, a table of candidates name, interview schedule time and status of invitation : Confirmed, Waiting for Confirmation, Request for New date. 

 

If the client chooses his own link for an interview during the setup and gives some icon/reminder they need to add the link to the confirmation page, how do we approach this by making it as an alert on the page or strong icon they must take action from the list of tables?.
 

4. Talent Interview Invitation Flow 
This is for Persona 2 scenario, Katie is receiving an email of an interview invitation, when she clicks on it she is landing on this page, in short, this is a summary of the gig brief she applied, with the choice of interview schedule she can pick.  

 

The interview will have 2 different date and each date has some time choices offered, Katie see the time slot that fits her schedule, and decide to choose and confirm to accept the interview, in a very rare scenario if she is unable to pick either the date offered there should be a way to communicate with the client if she can suggest the date that works for her, how do we approach this? Maybe request to change the date button along with the choice of dates she is available? 

 

5. Interview confirmation page

When talent confirms the invitation, the page will show the summary of the interview, it would be the Gig project title, the dates and time of interview, link to the interview, and a button to add to the calendar.

6. Talent interview summary page 

This is a page of Katie's list of interviews, she would be able to see the list of new invitations, scheduled/accepted and the list of finished schedules from multiple gigs she applied in the past. Whenever she clicks on any of the invitation lists it should bring her to the interview confirmation page.

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 such as mobile and tablet. So make sure your design adapts well to any platform. For this challenge, we are focusing on the web view only.
 

SIZE
1400px width and height as required
 

DESIGN ASSETS / INPUT DATA

• Topcoder GUI Kit

• TaaS Application Design please check the forum for the link

• Marvel App Current Design

 

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

 

------------------------------------------------------------------------------------------------------------------------