Connect Project App Delivery Management - Concept Design Challenge

Welcome to Connect Project App Delivery Management - Concept Design Challenge.

The projects dashboard provides a feature that allows managing the deliveries of a product during its lifecycle. Topcoder specialists can manage project plans and assets, as clients review these plans through specific phases.

We are looking forward to seeing concepts that articulate good information architecture practices, efficient ways to display the phases and timelines.

Round 1

01. Dashboard (No Project Plan) - Desktop
01.02. Topcoder Staff View

02. Build Project Plan - Desktop
02.01. Topcoder Staff View

03. Edit Project Plan - Desktop
03.02. Topcoder Staff View
 

Round 2

01. Dashboard (No Project Plan) - Desktop
01.01. Client View
01.02. Topcoder Staff View

02. Build Project Plan - Desktop and Mobile
02.01. Topcoder Staff View

03. Edit Project Plan - Desktop and Mobile
03.01. Client View
03.02. Topcoder Staff View

04. Interacting with the Project Plan - Desktop 
04.01. Client View
04.02. Topcoder Staff View

Challenge Objectives

• Create UI screens for a web app; desktop (all) and mobile views (three).
  • Seven (7) unique pages required, show all interactions.
• Provide a seamless flow to complete user goals.
• Create design concepts.

Application Overview

• Projects App is the client-facing application that helps clients, copilots, and Topcoder employees run, track, and report on projects.
• The goal of the users for this segment of the application are:
  • Topcoder Employees/Copilots: Build and manage project plans, in order to relate delivery information and collaborate on milestones with the Client.
  • Clients: Understand the delivery plan and interact with required milestones.
• The major obstacles in the existing UI are:
  • All Users: The timeline information can be overwhelming owing to the amount of details.
  • Topcoder Employees/Copilots: There is not enough flexibility to easily maintain the delivery plan (updating dates, adding/removing milestones).
• Apps ecosystem: Connect is Topcoder’s brand for customer-facing applications. A global framing allows navigating among the various applications, which have their own local navigation and features (i.e. dashboard, reports, etc). The scope of this challenge includes the Projects App only.

Audience

• Topcoder staff: Copilots, Project Managers
• IT related workers, tech savvy.
• Not all users have received training prior to using the application.
• World-wide accessible application.

Persona

• Name: Michael Bing
• Profession: Software Architect 
• Age: 34 years old
• Frustrations:
  • I want to create a project plan but it has many different phases to understand.
  • I spend too much time adjusting timelines for each specific phase of a plan.
  • It’s confusing to set the timelines and to realize their duration.
• Likes: 
  • Elegant, clean, well spaced UI
  • Identified actions or information needed from me

User Story
Michael just started working as a Topcoder manager. He must create a project plan for his new customer, ACME. He receives a link from the sales team to a new Connect project created.

Once Michael lands on the project dashboard, he has the ability to create a new project plan. He activates this process, and fills the required information in a flexible workflow that allows him to create brand new plans.

Michael needs to provide the key milestones of the project with related deliveries depending on the type of work. He finishes the plan. Now, the client is able to see the project plan with all the information provided by Michael.

Design Goals & Principles

• Clean Information Architecture: Be thoughtful about the amount of information to be displayed at one time. What is most valuable for the user?
• Efficient components arrangement and layout: Consider which elements are truly needed for the user in the screen space.
• Simple Workflow: The design should consist of frictionless paths to complete tasks. Avoid placing too many buttons or overcomplicating the workflow steps.

Exploration Score

• Creativity: 8
  1: barely new ideas
  10: a futuristic product with features not proven to be able to be fully implemented yet
• 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

Glossary

• Connect: Brand term for client-facing applications.
• Projects App: Client-facing web application to manage projects - (connect.topcoder.com)
• Project Plan: breakdown of the phases of a project.
• Delivery Asset: specific outcome the client receives (files, software, repositories, etc).
• Challenge: full format competition available to Topcoder members.
• F2F: short format competition. First submission that meets the judgement criteria wins.
• Task: a private engagement with a Topcoder member to complete a set of requirements.
• Direct: the client-facing web application to manage projects (soon to be deprecated).
• OR: Online Review, the competition management application.

Key Features

• We encourage the exploration of ideas for how to display the project plan. For example, how would it look as a kanban board? What other ways could we present this information and the required functionality that is easily digestible for users? We can’t stress enough how important “thinking out of the box” is for this display.
• We want to provide a hassle-free experience for clients. They should know the information and updates from the project plan that they care about the most:
  • Status - What's Planned. What's In Progress. What's Complete.
  • Dates - Building off status, with dates articulated.
  • Milestones - Points where the client needs to engage.
  • Download - An ability to download the project plan as raw data or PDF.

Screens/Features
���Note:
Below are skeleton requirements, brainstormed features suggested to be used as inputs for this challenge. Feel free to come up with unique ideas and concepts for this web application. We are open to alternative workflows and features not listed here, that would help the overall application. 

Navigation
Use the provided global app frame (header and left sidebar) on all the screens. Find it in the source file. As left navigation, use an example from the existing projects:
Back button (directs users to All Projects view).

• Dashboard
• Discussions
• Files & Links
• etc.

01. Dashboard (No Project Plan) - Desktop
Users will see this view before any items have been created for the project plan.

01.01. Client View
View a section on the “Dashboard” tab of a project, with a message:

• Header: “Your Team is Building Your Delivery Plan”
• Description: “This is where you will see an overview of your delivery schedule and engage in key milestones with your team.”

01.02. Topcoder Staff View
View a section on the “dashboard” tab of a project, with a message:

• Header: “Outline Your Delivery Plan for Clients”
• Description: “Review the delivery plan and set-up the key milestone interactions you need with clients here.”
• View a “Build Plan” button underneath this message

02. Build Project Plan - Desktop and Mobile
Users will see this screen as they start to build the project plan. The user arrives at this screen after clicking on the “Build Plan” button.

02.01. Topcoder Staff View

• The user views:
  • The status as “Draft”
  • Two buttons next to the status:
    • “Save as Draft” - The user can click this button at any time.
    • “Publish” - The publish button will remain deactivated until all required fields are completed.
• The user is required to:
  • Provide a Title [Free Text Entry Field]. For example: Phase 2: Dashboard Design
  • Select a “Type” [Dropdown or similar]
    • Design
    • Development
    • Quality Assurance
    • Data Science
    • Other
  • Enter the Start and End Dates [date entry / calendar]
  • Option to “Add Milestone” [button]
  • Provide the ability for a user to add N amount of high-level milestones.
• The user has the optional feature to add N amount of second-level milestones within each high-level milestone:
  • The user will next select “Milestone Type” from a dropdown list of these options:
    • Reporting Milestone
    • Deliverable Review Milestone
    • Final Deliverable Review Milestone
  • Once “Milestone Type” is selected, the user is required to enter Milestone Start Date and End Date [date entry / calendar]
    • If the date is the same as the date on the project plan timeline, that date will be replaced with this schedule for the milestone.
    • The end date can be the same as the start date.
• Once all required information is provided, the Publish button on the project plan should change color to indicate that the timeline is publishable for client view.
  • The user can choose to click “Save as Draft” on the project plan screen, if they do not want the client to view this yet.
  • The user can choose to click “Publish” on the project plan screen, which will make this timeline viewable and intractable for clients in the delivery plan.

03. Edit Project Plan - Desktop and Mobile
This is the screen that users will see after a project plan has been created and either saved as draft or published in the delivery plan, and indicates their editing capabilities.

03.01. Client View
Clients may only view Published plans, and do not have editing capabilities for them. However, here is what the client should be able to view on a published plan:

• The Title
• The Timeline:
  • Think of the timeline components and deliverables. What would be an efficient way to deliver this information in a graphic fashion? Consider a timeline composed of up to ten (10) high-level milestones and five (5) second-level milestones.
  • This sample data can be used as one project plan instance. That’s what a real project plan would be composed of.
  • This graphic shows an example of our current milestones on a timeline for a challenge, not for a project as we intend to create in this challenge. DO NOT COPY IT, it is not accurate and not aligned to our new requirements. Take it as inspiration. We would like to improve this view by:
    • Viewing the full timeline without vertically scrolling.
    • Expanding milestone events to learn more information and interact with it when needed.
• Download button/link (the plan would be downloaded as PDF or raw data).

03.02. Topcoder Staff View

• Once a project plan has been created and either saved as draft or published in the delivery plan, these users see:
  • The Title
  • The Status (Draft/Published)
  • The Timeline
• The user should be able to click on an edit icon on the project plan and:
  • Publish the plan, if it is in Draft status. 
  • Delete a plan, if it is in Draft status.
  • Update the Title at any time
  • Add/Remove/Modify Milestones at any time
  • Modify dates at any time

04. Interacting with the Project Plan - Desktop 
This is the screen showing the interactions that users can have during the delivery process on a project plan.

04.01. Client View

• This user can click onto a Reporting Milestone once the milestone is active (date has arrived), and: 
  • View any progress notes left by the delivery team
• This user can click onto a Deliverable Review Milestone once the milestone is active (start date has arrived), and:
  • Access submission links
  • Provide Client Feedback [Free Text] per submission
  • Provide Client Rank [Rank Range determined by # of submission rows] per submission
  • Provide Client Overall Feedback [Free Text] for the checkpoint
  • View Delivery Team Feedback per submission
  • View Delivery Team Rank per submission
  • View Delivery Team Overall Feedback
  • Click “Save” if they want to save their work, but do not have it completed yet.
  • Click “Submit Feedback” once they have completed the review.
• This user can click onto a Final Deliverable Review Milestone once the milestone is active (start date has arrived), and:
  • Access submission links
  • Provide Client Feedback [Free Text] per submission
  • Provide Client Rank [Rank Range determined by # of submission rows] per submission
  • Provide Client Overall Feedback [Free Text] for the checkpoint
  • View Delivery Team Feedback per submission
  • View Delivery Team Rank per submission
  • View Delivery Team Overall Feedback
  • Click “Save” if they want to save their work, but do not have it completed yet.
  • Click “Submit Feedback” once they have completed their review.
    • After clicking this, the client will be prompted to complete a second action.
    • They will see two buttons appear, with helper text that reads:
      • Header: Are you ready to accept your winning deliverable?
      • Button 1: [Accept Deliverable]
      • Button 2: [Request Final Fixes]
    • If Button 2 is selected, they will specify what they would like fixed in a free text field. It will be up to the delivery team to determine whether or not to accommodate the request. 

04.02. Topcoder Staff View

• This user can click onto a Reporting Milestone on the timeline at any time, and:
  • Add a note about progress, which will be viewable to the client
• This user can click onto a Deliverable Review Milestone at any time, and:
  • Provide submission(s) links
  • Provide a Descriptive Title [Free Text] per submission
  • Provide Delivery Team Feedback [Free Text] per submission
  • Provide Delivery Team Rank [Rank Range determined by # of submission rows] per submission
  • Provide Delivery Overall Feedback [Free Text] for the checkpoint
  • View Client Feedback per submission
  • View Client Rank per submission
  • View Client Overall Feedback
  • Click “Save” if they want to save their work, but do not have it completed yet.
  • Click “Submit Feedback” once they have completed the review.
• This user can click onto a Final Deliverable Review Milestone at any time, and: 
  • Provide submission(s) links
  • Provide a Descriptive Title [Free Text] per submission
  • Provide Delivery Team Feedback [Free Text] per submission
  • Provide Delivery Team Rank [Rank Range determined by # of submission rows] per submission
  • Provide Delivery Team Overall Feedback [Free Text]
  • View Client Feedback per submission
  • View Client Rank per submission
  • View Client Overall Feedback

Screen Specifications

• Desktop: 1280px width. Height as much as needed.
• Mobile: 750px 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/drive/folders/1UivlzdWVgWW29S6mTbIHKVG9R3msgDRw 

• Connect Platform Design: original source files of Connect (recommended baseline for your work - page: Work Card Creation). 
• Timeline: example of milestones on a timeline.
• Framing App: implementation of new global and in-app navigations for Connect.
• Project Timeline Example: mock up data.

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