Simple and Scalable Dashboards

Problem to solve

Many stage groups are creating unique, one-use dashboard solutions - an approach that doesn't align to our product strategy of a delivering a unified, feature complete platform at speed.

Proposed solution

Develop a simple and scalable GitLab dashboard design framework. The framework could use shared design standards and reusable components to makes it easy for multiple stage teams to rapidly release valuable and consistent Gitlab dashboards.

MVC Goals:

  • Focus on solving for 80% of user needs, simply (avoid configuration and interaction for 20% needs)
  • Work with relevant stage teams to plan and incrementally develop a simple and scalable dashboard design framework and reusable components that are aligned to GitLab team and user needs
  • Ensure dashboard design framework and reusable components are easy to understand and use so teams can quickly release valuable and consistent dashboards
  • Avoid one-use design solutions, unless absolutely necessary

Intended users

  • All GitLab teams creating dashboards
  • All GitLab users that consume dashboards

Further details

This effort supports Gitlab's product goals:

  • Efficiency and Feature Complete - Allows us to rapidly release valuable and consistent dashboards to get to feature complete, faster.
  • Convention over configuration and 80/20 - Dashboards focused on 80/20 user needs allow us to deliver more value, faster.

Today's one-use dashboards:

  • are expensive and slow to release
  • not delivering on our promise of a unified platform experience
  • prone to fall short of design best practices

Proposal

Define and incrementally build a simple and scalable unified dashboard framework based on reusable design components:

MVC requirements:

Dashboard

Responsive Layout

  • Grid-based Components
  • Dashboard Title
  • "Global" Dashboard Filters - Apply/Reset Filter Types; Display Filter Criteria;

Widget

Responsive Layout

  • Size options
  • Dividers Components
  • Title
  • "Local" Widget Filters - Apply/Reset Filter Types; Display Filter Criteria; Apply "Local" Filter Criteria to "Global" Dashboard Criteria
  • Data - Visualization, Grid or Hybrid; Hover Details; Click to Select Data

Widgets must be:

  • Independent of each other - One widget for each unique user need (i.e. Merge Request Speed by Number of Total Commits; Merge Request Speed by Time from Last Commit to Merge) and only Global filters impact more than one widget
  • Focus on 80% needs not 20% - Reduce complexity by focusing on 80% need
  • Aligned to Dashboard Grid and Widget specifications - This enables Gitlab-wide UX and dev consistency, scalability and speed

Widget & Dashboard Filter Modal

  • One dashboard to add/edit/remove dashboard and widget filters

Permissions and Security

Documentation

Testing

What does success look like, and how can we measure that?

What is the type of buyer?

Links / references

@valexieva @matejlatin @cperessini

Edited by 🤖 GitLab Bot 🤖