Connect Projects Dashboard - Concept Design Challenge

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

Audience

• 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
  • We collect a happiness score in projects. We need to display these results based on the feature: https://marvelapp.com/cj69j37 
• 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!

Screens/Features

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

03. Views
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
Folder: https://drive.google.com/open?id=1M9bISLbX2dI8n5oikRLC4fCLTWeF6DwC 

• 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: https://tc-marvel-app.herokuapp.com/challenge/30123075
  • 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.