[Design stage] Weight and progress information in roadmap epic bars

User need

When using the roadmap, there is currently no way to know if an epic is on track to be completed by the assigned end date. A user needs to understand at a glance how a unit of work is tracking so that they can report progress outwards, provide additional support as necessary to lagging items, and get better visibility into where they said they were going and how they are progressing towards those goals.

Acceptance criteria

• Visual feedback on the progress of an Epic (by weight completed vs. weight outstanding)

Analysis and ideation

Sketching based on competitive analysis

For better or worse, it seems to be the industry convention to show progress on the epic bars themselves. This makes sense for users who want to view the roadmap as a standalone without relying on any sort of gannt chart or table. However, this could get confusing as we already display epics with no start or end date with a use of color gradient. It may also be confusing coupling completely the notion of progress with the epic bars themselves which are displayed in units of time.

Design considerations

• Epics with no start or end date are currently indicated by color. How might we make this more accessible?
• How might we utilize hover states to provide more context?
• Allow users to consume the roadmap at a glance without relying on a table
• For MVC start with industry convention of depicting progress on the epic bars themselves

Rough wires of ideas

We could experiment with different ways to display progress on the epic bar itself along with indicators of epics with no start or end date through patterns, but this breaks down when the time span (or slice of the epic in view) of an epic is short. The progress bar is overlapping the pattern displaying that an epic has no start or end date which could cause confusion to our users.

For Epics with no start or end date, decoupling this from the epic bar and displaying that information on an icon allows us to display other information like progress on the epic bar itself without the cognitive overload of a pattern. However this may overemphasize the fact that some epics have no start or end date when this is probably not the most important information for users to digest at a glance.

Major challenges

• Displaying a lot of information on a roadmap item with either a small value (ex 1 day) or only a small value in view of the roadmap (ex a user has scrolled to the last day of an epic). This gets very complex if we using the roadmap item's color itself to depict both progress and presence of start or end date like many other products do.

When ideating with the awesome Jeremy Elder, he liked the idea of having a separate progress bar on the epic bar itself (similar to inspiration #3 (closed)). This is great because it allows us to show progress at a glance while also giving a more subtle indicator of epics with no start or end dates. We may even able to show epics with no start AND end dates now if that is a use case.

Variations

Future scope

• Allowing a user to configure their roadmap through some sort of settings area
• Allow users to choose which metric in which to measure progress
• Investigating a roadmap vs gannt view or being able to view both at once
• Having an Epics "sidebar" where users can configure their epic's color, labels, parent, etc
• Is the popover fulfilling our needs here?

Proposal

General flow

roadmaphover

Design file

progress/alexis/plan/ee#5164-roadmap-progress.sketch

Interactions

View specs here: https://gitlab-org.gitlab.io/gitlab-design/hosted/alexis/ee%235164-roadmap-progress-spec-previews/

Epic bar

• Give epic bars greater hierarchy. They should be indexed above the date grid and "today" indicator.
• Epic bar color:
  • Epics with start and end dates: #1b69b6
  • Epics without start or end date: #ffffff with 1px #1b69b6 border
• Progress bar color:
  • Epics with start and end dates: Filled progress: #ffffff , Unfilled progress: #ffffff with 30% opacity.
  • Epics without start or end date: Filled progress: #1b69b6 , Unfilled progress: #1b69b6 with 30% opacity.
• Icon and text color:
  • Epics with start and end dates: #ffffff
  • Epics without start or end date: #1b69b6
• Font
  • Size: 14
  • Weight: Medium

Epic bar hover state

• Epic bar color:
  • Epics with start and end dates: #17599c
  • Epics without start or end date: #ffffff with 1px #17599c border
• Progress bar color:
  • Epics with start and end dates: Filled progress: #ffffff , Unfilled progress: #ffffff with 30% opacity.
  • Epics without start or end date: Filled progress: #17599c , Unfilled progress: #17599c with 30% opacity.
• Icon and text color:
  • Epics with start and end dates: #ffffff
  • Epics without start or end date: #17599c

Popover

• Use our popover component