Connect Challenge Set-Up Workflow - Concept Design Challenge

Welcome to Connect Challenge Set-Up Workflow - Concept Design Challenge.

We are rethinking the way we set up new challenges and tasks within our platform. As part of this effort, we are iterating on concepts to conceive a client-facing tool that helps create new challenges.

Round 1

Submit your design for a checkpoint feedback.

01. Challenge Set-Up Workflow

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final design plus checkpoint feedback.

01. Challenge Set-Up Workflow
02. Design Variation
03. Development/QA Variation

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Objectives

• To create UI screens for a desktop web app.
  • From one to three unique screens required, with many variations (interaction).
• To provide a seamless flow to complete user goals.
• To create concepts to iterate upon.

Application Overview

• Connect is the client-facing application that helps clients, copilots, and staff to run projects, track status, and provide reports.
• The current way the users create new challenges is using a platform called Direct. Users will be able to perform this operation now within Connect.
• The major obstacles for creating new challenges/tasks:
  • Direct throws frustrating errors during the edition of forms, often losing the work in progress.
  • It takes a considerable amount of time to create a well-formatted challenge. Copy/paste content from a doc (Google, MS Word) to the form editor breaks the format, creating inconsistency.
  • Time management for challenges is confusing.
• The new challenge set-up workflow will rely on a user-focused experience to optimize the time to create a challenge.

Audience

• All Topcoder users
  • Clients
  • Copilots
  • Project Managers
  • Admins
• Multi-industry related workers, from manager to C-level representatives.
• World-wide accessible product.

Persona

• Name: Rachel Bing
• Profession: Software Architect
• Company: Agile Hackers
• Age: 39 years old
• Frustrations:
  • I don’t understand what is needed from me to create a challenge
  • Why is there so much information needed from me?
  • It’s confusing to set the timelines
• Likes: 
  • Elegant, clean, well-spaced UI
  • Identified actions or information needed from me

User Story
Rachel Bing receives an email from her coworker to find out she is running a private team of gig workers through Topcoder that will help their company complete a software project. The email lands her on the project view page for their company. 

She needs to set up two challenges. The first to explore a design idea on a component, and another to code a handful of components she already owns (she will provide the designs). 

The Challenge Set-up workflow guides her through an easy-going inquiry process, gathering the necessary information to articulate her needs into competition community language.

Once Rachel activates the challenges, she sits back and waits for results, while monitoring the progress of the challenges she has created.

Design Goals & Principles

• Self-explanatory: the concept must answer and diminish the main user frustrations immediately. The user must not spend time thinking about what to do and how to get from point A to point B.
• Affordance: The actions available on the UI should be clear and user-focused.
• Progress health: Owing to the length of the form, the status should be communicated to the user. Think of a way to provide feedback to the user's progress.
• Clean arrangment and layout of components: Be thoughtful about the elements that are truly needed for the user in the screen space.
• Simplicity: The design should consider frictionless paths to achieve the goals. Avoid placing too many buttons or overcomplicating the workflow steps.

Exploration Score

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

Glossary

• Challenge: A full format competition available to Topcoder members.
• F2F: A short format competition. The first submission that meets the judgment criteria wins.
• Task: A private engagement with a Topcoder member to complete a set of requirements.
• Connect: A client-facing web application to manage projects - connect.topcoder.com
• Direct: A client-facing web application to manage projects, soon to be deprecated.
• OR: Online Review, functions as the competition management application.
• TC/Copilot User: Topcoder staff or Copilot.

Functional Workflow

• TC/Copilot User accesses challenge/task set-up workflow
• TC/Copilot User clicks “New Challenge” button
• The following information is pre-populated, or can be selected/modified:
  • Connect project ID and name
  • Billing account
  • NDA
  • Group options
• TC/Copilot User describes the challenge with the following criteria:
  • Required manual inputs:
    • Challenge Type
    • Challenge Type Dependent Questions
    • Teaser Title
    • Overview
    • Detailed Description
    • Prizes
  • Defaulted required inputs, that can be modified:
    • Copilot
    • Reviewer
    • Scorecard
    • Timeline
    • Submission restrictions
  •  Optional inputs: Attachments
  • Advanced settings: For several questions there are “Advanced Settings” options.
• TC/Copilot User launches the challenge.
• TC/Copilot User views challenge in challenge/task manager worklist
• TC/Copilot User receives submissions

Screens/Features
Note:
Our last iteration generated the following artifact: https://marvelapp.com/114cga0e

• We tried a wizard approach. It doesn’t work out for our model.
• Display all questions/answers into a single screen, with clearly defined sections.
• Incorporate an “advanced settings” mechanism.

01. Challenge Set-Up Workflow
Work Type
In the challenge set-up workflow, the user should see two buttons: [Challenge] and [Task]. 
Clicking [Challenge] will open the challenge question and answer workflow.

Pre-populated & Editable Information
Project ID & Name

• A dropdown list with Connect projects associated with the user will display.
• The Connect project ID and name will be displayed.
• The user selects the project from the dropdown list.

Billing Account

• The billing account will be auto-populated based upon the selected Connect project. You can use “Project Billing” as content.

NDA

• The NDA will automatically be displayed as “Enforced.”
• The user can adjust the default NDA setting in the “Advanced Settings” panel.
• Opening the advanced settings panel displays a dropdown from which the user can select from a list of NDAs.

Intended Work Group
Intended workgroup options can be filtered by:

• The Connect project
• The billing account
• The portal (private crowd) reference code

If there is only one group available, the option is prefilled in a dropdown menu.
If there is more than one group available, the dropdown default is blank and the user must select the intended group.

Group examples: Blockchain, TC Community, TaaS, Contractors.

Challenge Type Selection
This question displays: Desired Challenge Outcome?
Answers are available in a dropdown menu, as follows: https://take.ms/h65AU 

Design-Specific Questions
If a design challenge is selected, then the following questions will be asked.

• Stock Art Acceptable: [Yes/No Radio Buttons, defaulted to No]
• Brand Guidelines Required: [Yes/No Radio Buttons, defaulted to No]
• Specific Color/Themes Required: [Yes/No Radio Buttons, defaulted to No]
• Specific Fonts Required: [Yes/No Radio Buttons, defaulted to No]
• Final Deliverable Formats:
  • Primary answer: [Checkboxes, filtered to most common types]
    • Layered PSD files created in Adobe Photoshop or similar
    • AI files created in Adobe Illustrator or similar
    • EPS files created in Adobe Illustrator or similar
    • Vector AI files created in Adobe Illustrator or similar
    • Vector EPS files created in Adobe Illustrator or similar
    • Sketch
    • Other: allows a manual entry through a free text
  • Advanced Settings: Additional formats available under advanced settings.

Selecting “Yes” for brand/color/font questions will trigger file or link sharing options to display next to the question. Sharing a file or link here is optional.

Development & QA-Specific Questions
If a development or QA challenge is selected, then the following questions will be asked.

• Environment: [Free Text]
• Code Repository: [Link sharing, optional answer]

All Challenge Type Questions

• This question is required, regardless of the type of challenge selected.
• This question displays: Technology Tags
• This question sub-text displays: Describe the technology stack and platform.
• Answer format: [Responsive type-ahead]
• Answer functionality notes:
• Type-ahead results match character entry
  • There is no limit on the number of entries
  • Manual entry of tags that do not match database results are not saved

Teaser Title Description

• This question is optional for all challenges.
• This question displays: Work Teaser
• This question sub-text displays: Generate interest in this work with an eye-catching teaser.
• Answer format: [Free text entry]

Overview Description

• This question is required for all challenges.
• This question displays: Challenge Overview
• This question sub-text displays: This description will be viewable on the work listing page.
• Answer format: [Free Text Entry]
• Answer functionality notes: Markdown enabled (example | guidelines). User should be able to enter the content either in rich or in Markdown format.

Detailed Description

• This question is required for all challenges.
• This question displays: Challenge Details
• This question sub-text displays: This description is only viewable to challenge registrants.
• Answer format: [Free Text Entry]
• Answer functionality notes:
• Markdown enabled
• Based on the challenge type, there is a default template inside the free text field. The user can delete parts of the template as needed, but this will serve as a guide for outlining the work requirements clearly.

Attachments

• This is optional for all challenges.
• Displayed underneath the detailed description section, users have the ability to share files or links as desired.
• Any shared files or links should only be viewable to challenge registrants.

Copilot

• This question is required for all challenges.
• This question displays: Copilot Required

Answer format: 

• Primary Answer: [Yes/No Radio Button, defaulted to Yes]
• Secondary Answer: When “yes” is selected, a responsive type-ahead field is displayed where the user can type the copilot handle.

Answer functionality notes:

• If “yes” is selected and there is a copilot on the Connect project, then that copilot’s handle is auto-populated in the field. User can delete and replace if necessary.
• If “yes” is selected and the user creating the challenge is a copilot, their user handle is auto-populated in the field. User can delete and replace if necessary.
• If “no” is selected, the secondary answer option should be hidden.

Reviewer

• This question is required for all challenges.
• This question displays: Reviewer Required
• Answer format: [Community Reviewer/Internal Reviewer Radio Button, defaulted to Community Reviewer]

Scorecard

• Scorecard selection is defaulted based upon challenge type. 
• Defaulted scorecard’s description should display.
• User can select an alternative scorecard under “Advanced Settings.”
  • Options from a dropdown or selection mechanism should be available.

Submissions
Submission options are defaulted to:

• Unlimited submissions 
• Submissions remain viewable after challenge completion.
• User can modify submission settings under “Advanced Settings.”

Prizes
The user can indicate:

• Prize type
• Prize amount [numeric entry]

If copilot is selected as “yes,” the copilot fee is automatically displayed.
If a community reviewer is selected, the community reviewer fee is automatically displayed.

Under “Advanced Settings,” the user can increase the payment amount for copilot or community reviewer, if desired.

Timeline
Timeline is defaulted to:

• Challenge
  • Start date to current date
  • Default challenge duration
• Review
  • Start date matches challenge end date
  • Default review duration

For design challenges, the user indicates if there will be 1 or 2 feedback rounds.
Under “Advanced Settings,” the user can:

• Add a milestone, title the milestone, and set the milestone’s start date and duration
• Modify the challenge or review start date and time
• Indicate if the challenge will require final fixes, which will modify the timeline

Launch Work
User clicks “Launch Work” when all required fields are complete.
If required fields are incomplete, the user is prompted to complete prior to “Launch Work.”

02. Design Variation

• Display a clear workflow to create a design challenge.
• Display all the interactions with the UI fields (design related)
• Display all the interactions with the advanced settings feature.

03. Development/QA Variation

• Display a clear workflow to create a development challenge.
• Display all the interactions with the UI fields (development related)
• Display all the interactions with the advanced settings feature.

Screen Specifications

• Desktop: 1440px width. Height as much as needed.
• Make sure your work is in a vector format, for retina scaling and high fidelity.

Branding Guidelines

• Use the Topcoder logo.
• Follow the provided Connect design for style, colors, and typography.

Design Assets
Folder: https://drive.google.com/open?id=1v4lMyyR2fLDtp5sdh_6dioSTHufFJf1u 

• Create Challenge Screens: the existing version of the application that creates challenges and tasks.
• Topcoder logo.
• Connect Platform Design: original source files of Connect (recommended baseline for your work).

Judging Criteria

• How well you imagine the user experience and capture your ideas visually.
• How well you implement the challenge requirements.
• Quality of your graphic and design elements.
• Creativity and ease-of-use is key to success, as this app must be engaging to all users.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop, Adobe XD or Sketch.
• Numbered/Ordered JPG screen files.
• Marvel Prototype
  • We need you to upload your screens to Marvel App.
  • Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30122849
  • Do not use the forums to request for MarvelApp.
  •  Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).

Stock Artwork (Illustrations, Icons, Photography)

• Stock artwork is allowed for this challenge.
• Make sure to declare all your assets properly or you might fail screening.
• You don’t want to fail screening? Read this.