Topcoder Earn App Gig OnBoarding Process Design Challenge

WireframingResponsive Web DesignDesign Tool

BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$50‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

CHALLENGE OBJECTIVES

  • Design the “Onboarding Process” of "My Active Gigs" based on challenge requirements.
  • The goal is to help Gig Work onboarding process and manage Active Gigs once they are Placed in a gig.
  • Sketch file is the only accepted design tool/source type for this challenge.
  • Create responsive screens for challenge submissions.

Important!

We will awarded extra Rolling Checkpoint with $50 prize for each accepted submissions if you able to submit before Thursday, August 19th 2021 8AM EST


 

Round 1

Submit your initial designs for checkpoint feedback on Desktop screen size
01) Elements Updates
02) Onboarding Process
03) Manage Gig
04) Report a Work Issue Flow
05) Report Day Off Flow
  • 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

 

Round 2

Submit your final designs with all checkpoint feedback implemented on Desktop, Tablet & Mobile screen size:
01) Elements Updates
02) Onboarding Process
03) Manage Gig
04) Report a Work Issue Flow
05) Report Day Off Flow
  • 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
  • If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

 

CHALLENGE SUMMARY

Welcome to “Topcoder Earn App OnBoarding Process Design Challenge”.

Gig Work at Topcoder is part of our TaaS (Talent as a Service) offering and it is one of several ways that Topcoder engages with its customers if they prefer to work directly with individual resources as opposed to accessing the Topcoder Community via challenges.

This challenge will focus on updating My Active Gigs detail page. After applying the Gig, detail page should help integrate the newly hired Gig Workers into Topcoder culture, rules & policies. Also, allowed Gig Workers to track & manage their Active Gigs once they are placed in the gig.

We provide the EARN base design 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 Gig Detail page should handle information.

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!

DESIGN GOALS & PRINCIPLES

  • Easy to use interface, The design should follow the current  Branding, styling and behaviour provided in this challenge. 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: 9
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented

Aesthetics: 8
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: 10
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success

TARGET AUDIENCE

  • Gig Worker Candidates / Topcoder Member
  • Please consider that 60% or more of our Gig Worker candidates may know nothing about Topcoder.


PERSONA

  • Name: James May
  • Occupation: Front End Developer
  • Goals:
    • Manage applied gig/job applications easily in the system
    • Quickly access the actions items need to fulfilled for the Onboarding process through the Topcoder system
  • Frustrations:
    • Currently, he needs to reach out and contact the Ops team/Recruitment team and wait for them to provide any information which takes time and is less efficient.

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

DESIGN ASSETS

FEATURES REQUIREMENTS


01) Elements Updates
Screenshot: 1-onboarding-process.png
  • Please use this page as base update SCREEN/02_3_My-gigs.png
  • Update My Gigs menu on the left sidebar
    • Update Gigs to Active Gigs
    • Remove Feedback
    • Remove Payment
  • Remove My Challenge
  • Remove My Tasks
  • Remove Rating Star
  • Remove Logo Title, just need the Gig title.
  • Remove Availability Window
  • Remove Report an Issue button
  • Add Topcoder Contact emails on the right box
02) Onboarding Process
Screenshot: 1-onboarding-process.png 03) Manage Gig
Screenshot: 2-work-periods.png
  • Once a user has completed ALL onboarding steps, the user should be able to manage their gig.
  • This screen will use existing SCREEN/02_3_My-gigs.png with small edit: Display button on top right with Report A Work Issue text.

04) Report a Work Issue Flow
  • When the user clicks on the "Report a work Issue" button, a modal window should appear.
  • Modal window should be pre-filled with
  • Subject title: "Gig Work Compliant"
  • Sent to: gigwork@topcoder.com
  • Sender address should be from the users email address
  • Also include user's Topcoder handle
  • And Gig title & url.
  • Create a success & error state when sending the form.

05) Report Day Off Flow
  • When the user clicks on the "Report Day Off" button, a modal window should appear.
  • Modal window  should be pre-filled with
  • Subject: "Gig Work Day Off Request"
  • Sent to: gigwork@topcoder.com
  • Sender address should be from the users email address
  • Also include user's TC handle and
  • And Gig title & url.
  • Create a success & error state when sending the form.
 

BRANDING GUIDELINES

TARGET DEVICES

  • Web/Desktop: 1400 px width and height as required
  • Tablet: 1080 px width and height as required
  • Mobile: 375 px width and height as required

SUBMISSION AND SOURCE FILES

Submission File
  • Submit JPG/PNG image files based on Challenge submission requirements stated above
  • MarvelApp link for review and to provide feedback
  • Declaration files document contains the following information:
    • Stock Photos Name and Links from allowed sources
    • Stock Art/Icons Name and Links from allowed sources
    • Fonts Name and Links source from allowed sources
    • Full Details of the Topcoder Policy can be found in this LINK

Source Files

  • All source files of all graphics created in Sketch 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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2022 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Sketch

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30200839