(Iteration 2) Update What's New Feature - Update "Featured updates" Card

Problem

The Featured updates section in the What's new drawer presents an opportunity to enhance user engagement through improved visual design and optimized space utilization. Currently, the cards could benefit from illustrations and enhanced visual elements to ensure featured updates receive appropriate prominence within the interface. Additionally, there's potential to experiment with the section's footprint to maximize its effectiveness for content presentation.

To support future growth and content diversity, it would be helpful to develop a more flexible card design system that offers variety and reusability. By creating multiple card design options and optimizing the section layout, we can build a scalable foundation that accommodates different content types while ensuring important product updates are showcased effectively and maintain strong user engagement.

Solution

The direction for Iteration 2 will be to maintain the carousel structure, and proceed with the first option explored.

Iteration 1 Design Iteration 2 Design
What's New Drawer - Main - Iteration 1 - Card 1.png What's New Drawer - I2 - Main - Carousel Approach.png

Additionally there are 5 total styles for these cards, these cards are not becoming a Pajamas components for now, so we can start by creating the two styles outlined in the designs for this Iteration.

Solutions Explored

Solution 1: Maintaining the Carousel (Figma)

As a continuation of our Iteration 1 work, this solution allows us to apply the new card design to the existing structure. Clicking on the component would launch the documentation for the release in a new tab. For this case it would leverage the same links as the Iteration 1 release.

Benefits:

  • Leverages a subtle illustration design
  • Creates a clear distinction from the banner design we leveraged in iteration 1
  • Reduces the vertical height taken up by the Featured updates section, allowing for more release notes to be shown below

Considerations:

  • Following the release of Iteration 1 it will be worth while exploring the analytics regarding engagement with the carousel component, and how frequently the second card is engaged with.
Iteration 1 Design Iteration 2 Design
CleanShot 2025-06-27 at 10.39.26@2x.png CleanShot 2025-06-27 at 10.39.04@2x.png

Solution 2: Switching to a Stacked Layout (Figma)

This solution allows us to adopt the new design for the cards, while also iterating on the layout used. Clicking on the component would launch the documentation for the release in a new tab. For this case it would leverage the same links as the Iteration 1 release.

Benefits:

  • Leverages a subtle illustration design
  • Creates a clear distinction from the banner design we leveraged in iteration 1
  • Allows the user to immediately see all cards upon launching the drawer

Considerations:

  • Does add to the vertical height of the component
  • Does not scale as nicely to having 3-4 cards in the Featured updates section
Iteration 1 Design Iteration 2 Design
CleanShot 2025-06-27 at 10.52.03@2x.png

Requirements

  • Update the card style for the Featured options section
  • Ensure that cards have all necessary states (outlined here)
  • Align the copy + badges with what is shown here (no changes to copy from what appears in production right now)
  • When clicked card 1 (Granular access controls for GitLab Duo Core) links to same link as the Learn more CTA in production.
  • When clicked card 2 (GitLab Premium and Ultimate with Duo) links to same link as the Learn more CTA in production.
  • Carousel should work as expected, no changes from Iteration 1.
  • Card should appear correctly in darkmode.
Edited by Buck O'Leary