Gantt Chart Redesign

Overview

The Gantt Chart is an important feature built for the engineers to use to log their ongoing projects. Users are able to break down their projects by work package, and view them all in a timeline view. We wanted to redesign the Gantt Chart to be more visually pleasing, and improve the editing and filtering functionalities.

Stakeholders

Product Stakeholder: @tripbrown, @justinkang-1, @shreyashsinha2004
Software Stakeholder: @RChandler234
Reference Users: Sofia Varner, @ziptol

User Story

1. As a head, I realize that I am behind schedule on a project and want to easily change a work package deadline. I want to use the editing feature in the Gantt chart to drag a work package and change the deadline.
2. I am an engineering head, wanting to outline a new project for the upcoming months. I want to use the Gantt Chart to create a skeleton of the work packages and the dependencies to complete the project.
3. As an engineering team member, I want to use the Gantt chart to view the timeline of upcoming projects
4. As an engineering team member, I want to use the update filter feature to easily navigate to their desired team view

Success Metrics

The product should help smoothly support the tracking and coordination of projects/work packages, including but not limited to blocks, edits, and filters. The editing feature should be intuitive and efficient for engineers to use.

Rollout Plan

This feature is nearing completion and is ready to begin testing at any time. Users are looking to test the improvements made to the editing function.

Out of Scope

• add a feature to the Change Request Confirmation view that can shift between the original and edited views

Background / Context

Currently, engineering teams are primarily using Google Sheets to track project timelines, and only using Gantt Charts during meetings as visual references. In order to make Gantt Charts the main platform for project tracking, we improved the usability of the editing feature. We also made layout improvements to tackle the following issues:

• Difficult to look at projects in different systems at the same time
• Unclear colors
• Couldn't see the exact start/end dates
• % done feature is not polished

Acceptance Criteria & Mock-ups

Below is the updated home screen when first clicking on the Gantt Chartt page in FinishLine:

There are two main features that were added or enhanced to the Gantt Chart:

1. Editing Feature
2. Visualizing and Confirming Changes
3. Filter Feature

Editing Feature:
To toggle to editing feature for a team, you press the pencil button beside the team name. Once this feature is engaged, the view's shade will become lighter and look like the below:

Once toggled, you click and drag different projects and work packages to alter their timeline, add projects, work packages, and blocked bys directly from the Gantt Chart, and remove work packages and blocked bys. Each add/remove feature is listed below along with the pop-up that accompanies the feature.

Create Features:

• To create a feature, press the appropriate add button beside the team name you are editing

• Creating Projects:

• Creating Work Packages:

• Creating Blocked Bys

Delete Features:

• Delete Work Packages by pressing the trash can icon to the right side of the Work Packages

• Delete Blocked Bys by by pressing on the "!" triangle on the work package and clicking the trash can icon to the right side of the blocked by in the drop down

Visualizing and Confirming Changes

After clicking save to save all the edits made in the Gantt Chart, you will be directed to a change request confirmation page. This will show all of the edits made in the previous editing session in the form of change request confirmations. To save all the previously made edits as change requests, simply confirm each edit pop-up one by one until none are left. As each pop-up is confirmed, it leaves the queue on screen and once none are left, the editing process is done and all edits should be change requests.
The user who made the edits will have to confirm the edit by filling in a box that is either Yes or No, select the reason for the edit from a drop-down menu (like current change requests), and add a brief explanation of the edit and why it is necessary.

An example of the view before it has been filled out is seen below:

Filter Feature:

• Filter button is top right in a red box
• Filter button is clicked, shifting down the gantt chart and displaying all filter options

- Filter options include

1. Cars
2. Team type (Business, Electrical, Mechanical, Software)
3. Teams (Ergonomics, Low Voltage, Software, Tractive, Data and Control)
4. Overdue

• Filters work on a multi-click system where the user can select multiple teams, as well as multiple filters at the same time.
• Once filters are clicked they are immediately applied to the gantt chart
• After selecting your filters and clicking off, gantt chart shifts back to original position.

Tickets

• #2139
• #2364
• #2365
• #2366

Gantt Chart Post-MVP

• #2414
• #2415
• #2416
• #2417
• #2418
• #2419
• #2420
• #2421
• #2422
• #2427
• #2428
• #2499