Vercel UI/UX Improvements: Project Card Density, Context Menus, and Customizable Widgets

Optimizing Project Card Display

Vercel has made adjustments to the project cards to reduce their vertical footprint. This involved tweaking padding and co-locating information, as well as omitting less critical data like the project branch, which is typically "main". The goal is to make the cards easier to digest by presenting information more tightly and tersely, ultimately allowing more cards to be displayed on screen.

Introducing Context Menus for Actions

A new context menu has been implemented for project card shortcuts, currently under feature flag testing. This change aims to clean up the card interface by replacing repetitive explicit buttons. The long-term strategy involves using more context menus due to their benefit of being activatable from anywhere on the surface, with discoverability mitigated by placing the same actions in a regular dropdown menu within the detail view.

Developing Customizable Widgets

Vercel is exploring the integration of customizable widgets to display various project metadata beyond the Real Experience Score. The intention is to allow users to tailor their dashboard to show insights relevant to their needs, such as Firewall status, LCP, web analytics metrics, or project-related alerts. Initial design attempts for widgets faced challenges in layout and visual form.

Widget Design Breakthrough

The design challenge for widgets was resolved by adopting a two-row layout instead of one. This change provides more space, reduces collision with existing labels, and allows widgets to be visually distinct from each other, improving scanability. This new approach enables a more dynamic and custom dashboard experience for users.