Rauno's Field Notes #2

🗂️ Vercel Project Cards

The initial focus was on optimizing the layout of the project cards. By adjusting the padding and grouping related information more closely, the goal was to minimize the vertical footprint of each element.

One specific optimization involved removing redundant data. For instance, we determined that displaying the project branch was unnecessary, as it is almost always main.

The core philosophy here is simple:

Because these cards consume a significant portion of the screen real estate, they are far more digestible when the row count is minimized and the information is presented in a tight, terse manner.

Layout Comparison

---

🖱️ The Context Menu Shift

We also overhauled the shortcut menu for project cards. While the initial motivation was purely aesthetic—removing the repetitive ... buttons to declutter the UI—the vision expanded.

We realized that context menus offer a superior UX compared to static $24 \times 24$ pixel controls because they can be triggered from anywhere on the component's surface.

"Of course, there's a tiny issue with affordance and learning curves yada yada yada..."

However, since high-productivity tools like Linear have successfully implemented this pattern, we decided to move forward. To ensure users don't get lost, we implemented a safety net:

By mirroring the actions in the detail view via a traditional dropdown, the context menu remains a powerful shortcut without becoming a barrier to accessibility.

---

📊 Metadata & Widget Integration

While projects contain a wealth of metadata, we initially only displayed the Real Experience Score. We considered adding more "pulse" metrics for security-conscious or performance-driven users, such as:

• Firewall status
• Largest Contentful Paint (LCP)
• Web analytics metrics
• Project-specific alerts

Working with @merycodes, we experimented with various widget formats. We were essentially searching for a visual language that fit the available space.

The struggle: Initially, nothing felt right in that small corner, regardless of whether we used a background fill or not. We discovered that widgets need to be visually distinct characters rather than just differing by a color or a text label.

The Solution

We defined a specific rectangular zone in the right corner. This transformed the area from a floating, purposeless space into a satisfyingly aligned grid. Once this pattern was established, the creative "trench work" ended.

To represent the "Digestibility" of the card, we can think of it as: $\text{Digestibility} = \frac{\text{Information Value}}{\text{Vertical Space} \times \text{Visual Noise}}$

The Widget Switcher

Finally, we refined the widget switcher. The main debate was whether the menu itself should display live data. We decided yes, because it allows users to preview metrics from other widgets without actually swapping the active widget on the card.

{
  "widget_switcher": {
    "preview_mode": true,
    "empty_state": "Show platform features & enablement links"
  }
}

In cases where a project lacks data, the switcher serves a dual purpose: it provides an overview of platform capabilities and guides the user on how to activate them.