# User Problem

## User

_What persona, persona segment, or customer type experiences the problem most acutely?_

* Project manager
* Project member
* Team lead

## Problem

_What problem or job does the user have?_

* In project organizations users often work in different projects in parallel.
* Larger project organizations are often organized in a matrix structure. So teams might provide their expertise in several projects.
* Projects itself need multiple teams from different organization units to deliver on their project goals.
* Gantt charts do allow for operational planning across multiple projects.
* It is not possible to schedule tasks in boards view (list are not connected to dates).
* The daily activities are not aligned with strategic goals. It is hard to see the "big picture" in daily operations.

## Pain

_What is the primary workaround that users perform that we could remove or replace? Why is it painful?_

* There are many organization that have physical planning boards in their office.
* People spent a lot of time in lengthy status meetings to keep everybody on the same page.
* For team leads it is hard to understand what their team members are currently working on and to communicate priorities.
* It is also hard for team members to show their supervisors what they are currently working on.
* It is almost impossible to limit the number of work-in-progress-items. Working on too many things in parallel harms the team's productivity.
* Project plans (Gantt charts) are not linked to operational activities.
* Project plans are outdated most of the time.

# Business Case

## Reach

_About how many users, customers or potential customers currently have this problem? (Low / Worst Case)_

* Significant reach because basically all project organizations are faced with the same problem.

## Impact

_Among relevant customers or prospects, how much value do they get from a comprehensive solution to this problem? (Conservative case)_

* High-impact since focussing the team's capacity on the right things increase the results significantly (working on the right things). Additionally it makes daily operations and alignment more efficient (doing it right).

## Confidence

_What are the top risk factors that could inhibit our ability to deliver this solution? Please consider how we can mitigate these risks._

* High confidence since we have seen this pattern in very many organizations.
* Sponsoring organizations.

## Urgency and Priority

_What is the relative priority of this opportunity in your backlog? What tradeoffs must you make? Is there a hard deadline or could this wait?_

* There is no external deadline such as a change of legal requirements.

## Solution

### The module

There is a new module called "Team planner". It also has a new module icon (available in a range of formats including SVG in Figma).

* This has to be enabled and has three permissions:
* "View team planner"
* "Manage team planner" and
* Make it public/private (phrasing to be confirmed)
* The work package module will have to be active for the team planner to be active.
* Is also based on fullcalendar.io but is separate from the Calendar module.

This new module, once enabled, is visible in the sidebar as "Team planner":

* Clicking on "Team planner" in the project sidebar drills into the "Team planner" sub-menu.
* The first item is a back button with the title "Team planner"
* In this sub-menu, there are four possible headers in the sidebars:
* "Favorite team planners" visible only if there are team planners that have been favourited
* "Public team planners" lists all saved team planners that are public
* "Private team planners" lists all team planners that are marked as not public
* Begin of the insertion~~TheEnd of the insertion Begin of the deletion TheEnd of the deletion "Create team planner" only ever has on item (New team Begin of the insertionplanner)~~End of the insertion Begin of the deletion planner)End of the deletion
* Begin of the insertionThere is a "+ New team planner" button that is stickied on the bottom edge of the sidebar. _(This button replaces the "Create new planner" sidebar entry in the current implementation)._
* This must mean that in case of a particularly long list of team planners, the overflow/scrool area should end 16px above the button.
* End of the insertion The "first" team planner (so the first of either the favorited ones, public ones or the private ones, in that order) will the one that will be automatically loaded.
* If there are no existing team planners, Begin of the insertionan empty/unintialisedEnd of the insertion Begin of the deletion the 'NewEnd of the deletion team Begin of the insertionplannerEnd of the insertion Begin of the deletion planner' item under "Create team planner"End of the deletion is loaded automatically.
* Within each view, the list of team planners is arranged alphabetically, allowing users to also prepend numbers to govern this
* To navigate to other saved planners, the user has to pick a different planner from the sidebar.
* Begin of the insertion~~TheEnd of the insertion Begin of the deletion TheEnd of the deletion last header "Create new planner" has only one item, "New team planner". This is essentially the "Create" function (now that we don't have an index/list view for this Begin of the insertionv1).~~End of the insertion Begin of the deletion v1).End of the deletion

### A basic (empty calendar)

Clicking on Begin of the insertion"+ New teamEnd of the insertion Begin of the deletion "Create newEnd of the deletion planner" Begin of the insertionbuttonEnd of the insertion Begin of the deletion loadsEnd of the deletion an empty planner.

* The top header is by default in edit mode, much like when the user creates a new board; the user is able to type a name for the calendar and click on the save icon to save the calendar.
* _Note: there is no back button at the level of this top header (unlike when a new board is created; this should eventually also be changed in the boards)._
* The right side of the top header has three buttons:
* The standard "filter" action, with two specifities
* The assignee attribute is disabled/not available
* The time frame attribute is disabled/not available
* The full-screen icon.
* The "more" action with three vertically-stacked dots, with these functions (that exist already today in the context of work package list/table view).
* Rename
* Save
* Save as
* Delete
* Visibility settings
* The secondary toolbar has these elements, and is common to new and existing calendars:
* Begin of the insertionAll buttons should currently use the old (existing) rectangualr style and not the rounded version, until these newer components are ready in the design system.
* End of the insertion On the left edge:
* Begin of the insertion"+ Add existing"End of the insertion Begin of the deletion Nothing (for now; post-12.1, we will have the "Add existingEnd of the deletion button Begin of the deletion here).End of the deletion
* Centered:
* The current date range visible, either Begin of the deletion the month ("August 2021") orEnd of the deletion a week Begin of the insertion("9–15End of the insertion Begin of the deletion ("6–10End of the deletion August 2021") Begin of the insertionor two weeks ("9-22 August 2021")End of the insertion
* On the right edge:
* Begin of the deletion A "today" button to return to today
* End of the deletion Left/right buttons to go forwards and backwards in time (in increments of week or month, depending on the current view) Begin of the insertion
* A "today" button to return to the week (or weeks) containing today's date
* In case of a two-week calendar, today has to be in the first 7 days
* A toggle to switch between the "Week" and "Two-week" views.
* Please note that "Two-week" needs to be in the singular, and therefore does not have an s (because it is used as an adjective here and not as a noun).End of the insertion
* No filters are enabled by default in a new team planner
* The calendar area is empty in a new team planner (no work packages are visible since no assignees are added yet)
* There is a message on the calendar that says "Add assignees to set up your team planner."
* An "Add assignee" button allows users to add assignees to get started (this button is described below).

### **Main view**

The calendar week view is the main view:

* There is an "Assignee" column on the left edge.
* The other columns are dates, displayed as "{day name} - {date number}", as in "Monday - 9".
* This is shortened to "Mon - 9" in smaller windows when the cell is not wide enough to display the full version.
* The team planner, when opened, will always show the current week by default.
* If a user changes the dates (week) displayed by going forward or backwards, a refresh of the current page should fetch this same Begin of the deletion sameEnd of the deletion modified date range, and not the current one. (**Open:** is this possible?)
* The current date is highlighted also in the column header, with the same yellow highlight as in the current calendar.
* As soon as assignees are added (and filters optionally enabled), work packages are displayed as strips (as they are currently in the Calendar module),
* Please see next section "Work package strips" for details.
* There is no upper limit to how many strips are displayed per assignee row. (**Open:** there should probably be a technical upper limit).
* There is an "Add assignee" button at the bottom, on the left edge. Begin of the insertion
* The button is places directly under the table of assignees, after the last assignee. However, to ensure that the button is always visible (along with the "remove assignee and start/end dates" drop zone next to it when the user starts dragging), it has to be sticky once it reaches the bottom end of the available screen height. Starting from this point, the team planner calendar area will need to scroll vertically, keeping that add assignee button anchored to the bottom.End of the insertion
* **Open** what is the loading animation while:
* Loading the work packages for the current week upon initially visiting the team planner
* Loading the work packages for the switched to week when browsing between weeks via the calendar buttons (next/previous week)

### Work package strips

* A work package strip is a visual representation of the work package in the calendar part of the team planner.
* A basic strip is almost identical to a work package strip in the current Calendar view.
* It starts on the start date and extends till the end date (either of which can be out of view)
* There is one line of text that represents the work package name
* The Begin of the insertionstatus is displayed in brackets, after the work package name, like so:
* _"Work package title (In development)"_
* TheEnd of the insertion background colour Begin of the insertionof each stripEnd of the insertion represents the work package Begin of the insertionstatus _(instead ofEnd of the insertion type Begin of the insertionas it is currently implemented)_End of the insertion
* A milestone is displayed:
* As a strip spanning a single day, that can be dragged around to change date or assignee, but does not have the drag edges (and thus cannot be resized; the duration is always 1 day).
* Clicking on a work package strip opens it in a classic split screen view (see below).

### **Dragging and dropping behaviour**

One of the primary advantages of the Team planner is the ability to adjust start/end times and change assignees simply by dragging work package strips.

* Small "drag handles" on either end are always visible and allow the user to extend the work package to the left or to the right.
* The left handle modifies start date.
* The right handle modifies end date.
* It is possible that for certain work strips, only one (or indeed none!) of the edge handles are visible, when the start and end dates are beyond the date range visible in the calendar.
* The user may drag a work package strip horizontally within the same assignee row to adjust the start and end dates (keeping the duration constant).
* The user may drag a work package vertically from one row to another to assign it to another user (can also be done simultaneously with a horizontal scroll, ie., one can move the start date and change assignee in one drag-and-drop movement).
* When a work package is being dragged, the "target" date cells--the ones over which the work strip will be moved to--become blue (same as when a date range is selected) to create a new work package. This is also how fullcalendar.io natively does it. _(For visual reference, see added screen below under "Visuals")._
* The modifications are executed immediately on release.
* The work package snaps to position upon release (from its free-floating state when being dragged).
* If the work package duration is longer than the time interval shown (e.g. two weeks), and when either the start date or end date are not visible, we will provide additional feedback to the user when dragging so that the user can Begin of the insertion"preview"End of the insertion Begin of the deletion ""preview"End of the deletion the new dates before dropping via "date tooltips" on each end that is out of view. (See visual below, or on Figma).

### Begin of the insertionTwo week view

* Clicking on the "Two-week" option in the toggle in the toolbar extends the calendar to two-weeks.
* Since the notion of non-working days is not yet implemented, this will mean that the calendar will simply show 14 days _(eg. from Monday – Sunday of the week after, depending on which day the week starts in the selected region)._
* Please note that, as specified above, the day headings go from "Monday 9" to "Mon 9" to save space.
* Ideally, the entire two weeks are visible without requiring a horizontal scroll. (**Open:** See Figma. Is this possible?). This is important so that users are able to drag elements between the two weeks; if a scroll is required from the start, the user could achieve almost the same thing simply by clicking on the forward/back icons.
* A horizontal scroll maybe introduced when there is no more room to show display even the shortened day markings "Mon 9" etc.

###End of the insertion **Split screen view**

The split screen view is invoked either when:

* the user drag-selections a range of dates to create a new work package (described below)
* a work package strip is clicked to view its details.

The split screen behaves like it does in a work package list view:

* It anchors itself to the right.
* It pushes the main view (secondary header + calendar) to the left, and introduces a horizontal scroll
* Allows the user to change any attributes that they have the permission to change
* Any changes to the start/end dates or assignee are reflected immediately (**Open:** how immediately?) on the calendar view.

### **Add assignee button**

Clicking on this button adds a row to the calendar, with focus on the the assignee name search input (or if focus is not possible, an empty drop-down field with an "-"). This dropdown is the same as when one clicks on the "Assignee" drop-down in a work package full view or in a work package list.

* As the user starts typing, a list of users who correspond to the search terms displayed as:
* An avatar and
* Their full name
* Clicking on a particular user assigns the newly added row to the assignee, keeping its position (last row).
* On refresh, the assignee rows are re-organised alphabetically? **To discuss:** Or shall we display the assignees in the order in which assignees were added?
* It is possible to add a group as an assignee. (This allows the user to take a work package assigned to a group and assign it to a particular member of that group).
* Individuals in that group can nevertheless be added separately.
* The work packages in the group row then only show those explicitly assigned to the group, not those assigned to members of that group

### **Creating new work packages directly via the team planner**

In 12.1, adding existing work packages is not possible. This will be done in the next release via an "Add existing" pane to the left. Nevertheless, it is possible to create a new work package:

* A new work package is created by using fullcalendar.io's native drag-select functionality to allow the user to select a date range, which will trigger a "create work package" split screen. In this new work package split screen, these attributes are pre-filled based on the user's drag-select:
* the start date,
* the end date and
* the assignee
* If the user clicks on another work package whilst editing a new work package (without saving it), the behaviour is the same as when this happens in a work package list; a browser-native dialogue overlay asks them: _"Are you sure you want to cancel editing the work package?"._

### Adding existing work packages

The mechanism to add existing work packages via the &quot;Add existing&quot; feature is described in this child work package: <mention class="mention" data-id="40031" data-type="work_package" data-text="#40031">#40031</mention>.

### Removing work packages from the team planner

Work packages are never really &quot;removed&quot; from the team planner, since the team planner is merely a view (and neither property of the work package, nor a defined container). It merely shows all work packages for a list of assignees that meet the filter criteria for a particular date range.

The only ways to &quot;remove&quot; a work package from view are to:

1. Add a filter that would exclude that work package.
2. Remove the assignee, or change to one that has not been added to the planner (and is thus not visible).
3. Change the start/end dates so the currently visible date range does not fall in between them.

We offer users a way to combine the last two actions -- remove assignee along with the start and end dates -- in one easy action:

* When a user starts dragging a work package, along with different date ranges on the calendar being highlighted, a drag zone appears to the right of the &quot;+ Add assignee&quot; button.
* The drag zone spans the width of the calendar module.
* It contains this hint: &quot;Drag here to remove assignee and start and end dates.&quot;
* When a work package is dragged to this zone, the state of the zone changes (blue fill) to communicate that the drag zone has an acceptable work package, and that dropping it there will perform an action.
* On mouse out, the work package is &quot;removed&quot; from the current view (it disappears) and a blue information snack bar informs the user: &quot;Assignee and start/end dates successfully removed.&quot;
* The work package becomes available again via the left-hand add existing search pane.
* _**Open**: this might require a refresh to the search term? <mention class="mention" data-id="87" data-type="user" data-text="@Jens Ulferts">@Jens Ulferts</mention> ._ Begin of the insertion
* Please note that, as specified above, the &quot;+ Add assignee&quot; button and the remove drop zones need to be sticky once they reach the bottom of the available vertical space in the viewport.

End of the insertion Begin of the deletion



End of the deletion ### Features specific to planning view

Planning view, once assignees have been added, affords the users more functionalities than is available in month view:

* Hovering on Begin of the insertionan assigneeEnd of the insertion Begin of the deletion theEnd of the deletion cell Begin of the insertion(withEnd of the insertion Begin of the deletion withEnd of the deletion the name and avatar of the Begin of the insertionassignee)End of the insertion Begin of the deletion assigneeEnd of the deletion displays a &quot;remove&quot; icon, that allows users to remove that assignee from the current view.
* The row will have a min height of x (by default the space needed to display the assignee name and icon + spacing), but can grow almost arbitrarily (see Open in &quot;Error handing&quot;).
* To make sure this drag-select functionality is available even in cells that are particularly full (i.e, with lots of work packages on the same day), we will leave a +12px bottom padding on each assignee row. This is to ensure the user always has some whitespace available to drag-select to create a new work package.
* If the height of taken up by the assignee rows is more than the available screen height, Begin of the insertionverticalEnd of the insertion scrolling is to be applied to Begin of the deletion entire page (or, ifEnd of the deletion the Begin of the insertioncalendar area, keeping the &quot;+ add assignee&quot; button (and the associated remove drop zone) sticky. If theEnd of the insertion split screen is open, Begin of the insertionits scroll is independent.End of the insertion Begin of the deletion the main area not including the split screen).End of the deletion **To discuss:** is this technically feasible?
* **To discuss -** When dragging a work package that spans more than the week, so that the start and end date is not displayed, we Begin of the deletion canEnd of the deletion display an overlay Begin of the insertion(a date tool-tip)End of the insertion above the work package Begin of the insertionstripEnd of the insertion Begin of the deletion strip,End of the deletion on the edge that is cut-off, indicating the start date (see [Figma prototype for Begin of the insertiondemo](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1422%3A84436)).End of the insertion Begin of the deletion demo](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Planning-Calendar?node-id=923%3A38919)).End of the deletion

### Enterprise edition

* The team planner will be an enterprise only feature.
* The calendar module will be kept non enterprise with all improvements carried over from team planner included (e.g. persisting filters)

### **Error handling and exceptions**

#### Error management

* **When dragging or extending work packages**
* In this, first version, as I understand it, it is not possible to know in advance which work packages have relations or are read-only for any number of reasons (see list below). This means that we will not be able to communicate to the user that that work package isn&#39;t extendable or draggable _before_ they try modifying it, or _during._
* In any of the following cases, our (very imperfect but pragmatic) proposition for this v1 is to simply throw an error with a snackbar after the &quot;offending&quot; action is executed. An [example of the error in Figma is here](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1178%3A56096).
* **Examples of success and error messages are included in work package** **#39486** **(related to drag-and-dropping work package strips).**
* Some cases where we might need to do this are:
* The work package has been invalid before, e.g. a required custom field is not set
* Moving the work package would violate a constraint (e.g. a preceding work package limiting the start date)
* For work packages with follows/precedes relationships.
* In case two work packages displayed on the same planning calendar at the same time are in a follows/precedes relationship _(for now treated the same as when they aren&#39;t on the same view; we&#39;ll need to make a distinction later when we&#39;re able to drag/drop work packages with relations)._
* the user not having the permission to edit work packages (the permissions might be different for two work packages within the same team planner if they are in different projects)
* the work package being a parent
* the work package having a locked status
* a constraint imposed by relationships on the start date is violated

### Visuals

_**An empty, initialized team planner**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26806/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24065/content"></div></figure>End of the deletion

_**A populated team planner with four Begin of the insertionassignees. Note that the work package strip colours are now based on status instead of type.**_End of the insertion Begin of the deletion assignees**_End of the deletion

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26807/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24064/content"></div></figure>End of the deletion

Begin of the insertion_**The same team planner with two-week view selected**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/26808/content"></div></figure>

End of the insertion _**Hovering on a work package strip**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26809/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24066/content"></div></figure>End of the deletion

_**Dragging and dropping a work package strip (with blue background on target Begin of the insertioncells) to change assignee**_End of the insertion Begin of the deletion cells)**_End of the deletion

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26810/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/26291/content"></div></figure>End of the deletion

**Dragging a work package strip that extends outside of the current visible date range (with date tooltips)**

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26811/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/26292/content"></div></figure>End of the deletion

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26812/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/26293/content"></div></figure>End of the deletion

_**Split screen view of a work package Begin of the insertionstri**_End of the insertion Begin of the deletion strip**_End of the deletion

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26813/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24067/content"></div></figure>End of the deletion

_**Drag-select a date range to create a new work package**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26814/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24068/content"></div></figure>End of the deletion

_**An error message when a work package is moved, extended or shortened but the user does not have the necessary permissions**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26815/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/24069/content"></div></figure>End of the deletion

**Removing a work package from the team planner by dragging it to the remove drop zone**

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26816/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/26296/content"></div></figure>End of the deletion

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26817/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/26295/content"></div></figure>End of the deletion

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/26818/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/26294/content"></div></figure>End of the deletion

Other screens are visible in the [Figma prototype](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487).

**Mockups in Figma**
Figma prototype can be accessed at: Begin of the insertion[https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487)End of the insertion Begin of the deletion https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487End of the deletion

_(Please note that the relevant screens are on the &quot;Team planner&quot; page; the above links takes you to the correct page)._

## Out of Scope for the MVC

_What should NOT be in the minimal viable change, and can be considered for future iterations? Why? Please order them by importance._

* Contributions to the fullcalendar-library
* Begin of the insertion~~ViewsEnd of the insertion Begin of the deletion ViewsEnd of the deletion other than weekly (including the two-week Begin of the insertionview)~~End of the insertion Begin of the deletion view)End of the deletion
* The ability to identify assignees with overdue work packages (and view those in an overlay)
* More detailed work package strips that display important attributes without needing a hover
* Work package planning stages (done, planned, overdue)
* Altering the order of assignees by dragging-and-dropping entire assignees rows
* Begin of the insertion~~AEnd of the insertion Begin of the deletion AEnd of the deletion shortlist of work packages form which the user can drag and drop work packages to the calendar (and a way to filter this Begin of the insertionshortlist)~~End of the insertion Begin of the deletion shortlist)End of the deletion
* Any form of automation (associating certain work package status with certain planning stages)
* **Mobile views**

## Differentiation

_What do you believe will differentiate us from the current experience or competitive experiences?_

* Redmine does not have Boards
* Jira does not support Gantt charts.
* MS Project (desktop) does not have a collaborative environment.

## Next iteration

_What is the next solution that would allow us to release meaningful customer value quickly?_

* Show planning iterations in the Gantt charts.
* Set work package type by hierarchy level
* Example 1: Epic -&gt; User Story -&gt; Task
* Example 2: Deliverables -&gt; Work package -&gt; Activities
* Coding schemes: 1.1.1, 1.1.2, 1.2.1, ....