(Iteration 2) Update What's New Feature - Condensed Article View

Problem

There are two main problems that this design addresses:

1. When users open the What's new drawer, they can only see 1-2 articles at most. By condensing the article view, we'll give users a more immediate overview of our recent releases, all organized by release date.
2. Currently, articles are marked as read simply when a user opens the drawer. This new interaction will allow us to mark articles as read only when users click on them, giving us better insights into actual user engagement with the feature.

Solution

🔗 Figma File

🎥 Video Walkthrough

Access Point	Main Drawer Design	Article View Drawer Design
Same as Iteration 1

Requirements

Main view

• Redesign What's new articles to appear in a more condensed form.
  • Organize articles by headers indicating which release the article is connected to in the format Release 18.0
  • Content in the condensed article is the same as the main article. Leveraging ellipses once the article length exceeds the length of the text area (420px). Best practice to be put in place to have the headers less than 34 characters. Content in the labels will be the same as they are now, and applied in the same fashion.
  • The design of the labels will be updated to be the default Badge component with the info variant.
  • Include an 8x8 dot (using icon-color-danger) next to the header (4 px of padding) when the article is unread. Once article is clicked on, the dot will disappear. Only show the articles from the most release as unread: #550948 (comment 2608834825)

Article-only view

• Built out article-only view once an article is clicked on in the main page.
  • User returns to main feed by clicking on chevron icon button that is to the left of the "What's new at GitLab" header.
  • Clicking on the article marks the article as read.

Design Checklist

• Growth Review
• UX Review
• TW Review
• PMM Review