Submit a solution
The challenge is finished.

Challenge Summary

Welcome to Connect Projects Dashboard - Concept Design Challenge.

The all projects dashboard provides valuable information and features to the persons involved in Topcoder work. We are redesigning the way we display insightful information to our Topcoder staff in an actionable way, considering the value of the items we decide to display.

We are looking forward to seeing concepts that articulate good information architecture practices, actionable items and a set of views (roadmap, calendar). 

Round 1

01. Updates
01.01. Header
01.02. Left Panel

02. All Projects Dashboard
02.01. Listing

03.01. Versus View
03.02. Calendar View

Round 2

01. Updates
01.01. Header
01.02. Left Panel

02. All Projects Dashboard
02.01. Listing
02.02. Search Results

03.01. Versus View
?03.02. Calendar View
03.03. Roadmap View
Challenge Objectives
  • Create UI screens for a desktop web app.
    • Five unique pages required, show all interactions.
  • Provide a seamless flow to complete user goals.
  • Create design concepts.

Application Overview
  • Connect is the client-facing application that helps clients, copilots, and Topcoder employees to run projects, track status, and provide reports.
  • The goal of the users for this segment of the application are:
    1. To see their portfolio of work in one place, and quickly view the most critical information about it.
    2. To quickly find the project they are either working at or looking for.
    3. To obtain a summarized understanding of important stats per project (ex. project status, action items).
  • The major obstacles in the existing UI are:
    1. The all projects dashboard is crammed with information, needed or not, which location and value needs to be rethought in the UI.
    2. An exaggerated amount of important information being presented in one space. It could easily feel overwhelming for users to figure out what they are looking at, so a very clean and focused UI is going to be crucial.

  • Topcoder staff
    • Copilots
    • Project Managers
    • Admins
  • IT related workers, tech savvy.
  • Users receive training prior to using the application.
  • World-wide accessible product.

Design Goals & Principles
  • Clean Information Architecture: thoughtfulness on the amount of information to be displayed. What’s valuable for the user?
  • Components arrangement and layout must be clean: 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
    10: top-notch finished looking visual design
  • Exploration: 10
    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: 6
    1: don't care at all about the branding just functionality
    10: it needs to 100% accurately adhere to the branding

Key Features
  • Happiness survey results
  • Action item checklist
    • Users must clearly understand the immediate actions needed from them for each project. For example:
      • Project invitation - actions: join/decline.
      • Pending messages - actions: reply/mark as read.
      • Design Review - action: Provide Feedback
      • Budget Utilization at 25% - action: adjust budget
      • And so forth.
    • It is not a duplicate of the notifications system. Our initial approach is to use the notifications for items of information type (e.g. project X was created, project X was marked as complete), items that don’t require any action.  Think of the overlapping that can occur. This is a problem we need help with. Ideas?
  • Project Progress / Status
  • Budget Utilization
  • Chatbot: where can this possibly be included, open to your ideas!


01. Updates

01.01. Header
  • Keep Topcoder Connect Logo
  • Remove search bar
  • Incorporate global navigation (see file in the assets section)
  • Remove Profile/dropdown
  • Remove notifications bell

01.02. Left Panel
  • Allow the user to create a new project / we are open to ideas on the placement of the “New Project” button - the main thing is it needs to be placed in a prominent location.
  • Keep ‘All Projects’ tab
  • Remove the “Notifications settings” tab
    • Notifications will be replaced with a new feature called Action Items
    • “Action items” are not required to be shown as part of the main navigation however, it will be shown as a part of the navigation within a project.
  • Add ‘Reports’ Tab with two sub-sections:
    • My Projects
    • Company
  • Add ‘Topcoder Process & FAQs’ tab
  • Add ‘Contact Support’ action
  • Move first/last name, handle, member since display to the bottom and introduce an icon which on click shows a flyout with below sub-navigation
    • ‘Profile Information’ link
    • ‘Notification Settings’ link
    • ‘Account & Security’ link
    • ‘Logout’ link

02. All Projects Dashboard

02.01. Listing
  • Remove Grid and List views icons (grid view feature will be removed)
  • Remove All the status (All Projects, Active, In review, etc) that are shown as tabs
  • Column Selection Feature:
    • If we can have a flyout with the list of columns that allows the user to choose columns to be seen and clicks on Ok to view the table with the selected columns.
  • Project Name
  • Challenge Stats (Active Challenges Vs Completed)
  • Message Notifications
    • Think about how to showcase overlapping with the action items. These can’t be duplicated. A user could have action items generated when they were specifically tagged in a message (i.e. respond to this message). So would just want to make sure that the total count of new messages is helpful/clear.
  • Topcoder team (or) client team 
    • Think through on how useful it is to show these data in the table / we are open to suggestions
  • Action Items (Maybe show number of pending action items Vs completed)
  • Budget (Actual Vs Planned)
  • Progress Stage (Design -> Development) - can be shown as a progress bar, open to thoughts!
  • Overall Project Status

02.02. Search Results
  • Simple Search (by project Name)
  • Filter
    • Date Created
    • Date Completed
    • Type of project/solution
    • Client Team Handle (s)
      • Think through on how useful it is to show these data in the table / we are open to suggestions
    • Topcoder Member / Admin Handle (s)
      • Think through on how useful it is to show these data in the table / we are open to suggestions
    • Copilot Handle (s)
      • Think through on how useful it is to show these data in the table / we are open to suggestions
    • Project Status
    • Project objective flag response (Ex. I need work done now, demo, etc…)
      • Based on the response received from clients when they enter project details is shown as options to filter the projects. Options will be:
        • I need work done now
        • Demo
        • Internal project
    • Client’s company name or “new client”
      • This will allow the users to filter out whether the project is from a “new client” or an existing client “client name”
    • Has Account Executive (Y/N)
    • Has Expert Services (Y/N)
  • Sorting 
    • Alphabetical Order - Project Name: 
    • Recent Projects
    • Action Items (Overdue to Normal Priority)
    • Status of Project

This is a new addition to the existing version of TC connect. Currently, we don’t have views. Open to ideas on how to display them.

03.01. Versus View
“My Projects” vs. “All Projects” toggle switch view
  • Allow the user to toggle between “My Projects” and “All Projects”
  • My projects will show only the projects in which the user is the main person handling the project
  • All Projects will show all the projects, this will include projects even if they are just part of it as a collaborator.

03.02. Calendar View
  • Challenge listing with their deadlines as per the date.
  • We assume a good start point is having a monthly view.
  • There should be a mechanism to show only projects that are active, only my projects to be shown, also would be good to have a switch that allows viewing overall project schedules or challenge schedules (that shows individual milestones).

03.03. Roadmap View
  • Overall executive/high-level view that helps see the overall plan of design and development
  • An initial approach could be to display "Active projects and My projects" as a Gantt chart or timeline view. Open to ideas.

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

Branding Guidelines
Follow the provided Connect design for style, colors, and typography.

Design Assets
  • Connect Platform Design: original source files of Connect (recommended baseline for your work - page: Project Listing - Join/Decline). 
  • UI Library Kit: extract global navigation from the components page > Navigation > Logged in User.

Judging Criteria
  • How well you plan the user experience and capture your ideas visually.
  • How well you implement the challenge requirements.
  • Cleanliness of your graphics and design.
  • Creativity and ease-of-use is key to success as it must be engaging to 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:
    • 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.

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.


2020 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 "" file.
  3. Place all of your source files into a "" 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.


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

  • Layered PSD files created in Adobe Photoshop or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit


ID: 30123075