Gantt Chart Redesign

[RChandler234]

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

• [x] #2139
• [x] #2364
• [x] #2365
• [x] #2366

Gantt Chart Post-MVP

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

[RChandler234]

Try breaking up the paragraph about the edit feature into bullet points that focus on each feature

[RChandler234]

Overview

Think of this section like an abstract in a technical paper, you shouldn't have any past tense/ what we did, it should purely be for someone who has no idea what we do looking at this to get context for what a "Gantt Chart Redesign" means. That means no past tense, and probably no first person

User Stories

These are looking pretty good, I'd focus more on the advantages of using the Gantt Chart rather than just saying they wanna use the Gantt Chart if that makes sense. Like "I want to use the Gantt chart to view the timelines of upcoming projects in relation to each other". "I want to use the filter feature to easily limit the scope of projects that I'm looking at (e.g. all the electrical projects, all powertrain projects, or all projects in a certain status)"

Success Metrics

I would include in this part, that this feature should make interacting with the change management system (specifically the deadline editing part) more intuitive so that engineers keep the data in FinishLine more accurate and up to date.

Rollout Plan

Rollout plan should more so be, what is the timeline for fixes any bugs after the release, what do we want testing to look like? (Y'all should be testing it first for a week or so, make a list of bugs, and then we set a specific date to make the engineers start using it in earnest)

Out of Scope

The bullet looks weird since there's only one. I see what you're getting at, try to word it a bit more clearly/ focus on the meat of what you're saying (you should be able to see the old view and the edited view at the same time without losing your changes). I would also add potential future improvements: making adding/ removing items more intuitive from a UI perspective, make view for viewing edits and confirming changes better (this is vague, but I'm pretty sure we could iterate on this design in the future and make it better)

Background / Context

Very good, can u add a link to an example of a google sheet the engineers use rn

Acceptance Criteria & Mock-ups

• I'd add a section for visualizing changes in addition to editing/ filtering
• Change 'Add' to 'Create'
• Change 'Remove' to 'Delete'
• When you reference the "!" triangle on the work package, you should add a picture of what it looks like
• Make the change confirmation section it's own section and make it a bit more descriptive (what's the info that's already prefilled, what do they have to add, maybe include a picture of a generated change request)
• You should list out filter options in a bulleted list so it's easier to read
• Filters should stay persistent even after you click out of the filter, there should be an added button for clearing the filters
• Specify how the filters work more (if no filters clicked everything shown, as soon as you click on one team/ car, it'll only show that selected car/team's stuff)
• Please include closer up screenshots of the filters pop up
• There should also be a section in the pop up for team type (electrical, mechanical, business, software)
• There should be a mock for the popup that comes up when you hover over a timeline

[RChandler234]

Look into adding a zoom in/out feature built into the gantt chart because people will probably wanna be able to view the timelines at different levels of granularity