Skip to content

Improve Empty State Page for Environments

Summary

The current empty-state designs in the Environment area are very simple, don't offer a lot of support for new users and are also visually different from one another.

Environments
Screen_Shot_2022-08-19_at_11.05.19_AM

There could be an opportunity here to make the pages easier to understand, and lead users towards the first action they need to take to start using Release tools on GitLab.

UX Proposal

Environments Empty-state

  • Move CTAs to below body content and adjust CTA language to fit empty-state template.
  • Create an environment links to: /environments/new
  • Learn more links to: https://docs.gitlab.com/ee/ci/environments/#types-of-environments
  • Remove search bar.
  • Remove stopped and available.
  • New illustration - to be done in a follow up iteration.
Proposal
Screen_Shot_2022-10-04_at_11.05.23_AM

Technical Proposal

We update app/assets/javascripts/environments/components/empty_state.vue to add CTAs via the primaryButtonLink, primaryButtonText, secondaryButtonLink, and secondaryButtonText props.

The links should be passed into the empty state via inject and provide from the HAML mount in app/views/projects/environments/index.html.haml and app/assets/javascripts/environments/index.js

The title should be moved from the #title slot to the :title prop.

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

  • Increase in new user adoption of both releases and environments.
Edited by Andrew Fontaine