Vercel Project Cards

I started by tweaking the padding and co-located information to reduce the vertical space occupied by each card. Some data was also omitted, for example we realised that we don't need to show the project branch on the card which is generally always "main".

It's important to understand that these cards occupy a lot of space on the screen on this view. It's easier to digest cards when there are less rows on the card and information is tight and terse.

Here's a before & after of the changes. We even gained an extra row in the grid.

Context menu

Another change we made was to the project card shortcut menu. We're still testing this change behind a feature flag. At first it seemed like it would simply clean up the card since the ··· button repeats a lot.

Later we realised that we want to use more context menus in the future because they have an obvious benefit over an explicit 24×24 control because you can activate a context menu from anywhere on the surface. Of course there's a tiny issue with affordance and learning curves yada yada yada... but apps like Linear make it work, so ¯\_(ツ)_/¯

Our mitigation against context menu discoverability is to place the same actions in the detail view behind a regular dropdown menu. This way no one misses out on anything, the context menu is just a shortcut.

Widgets

Later I started wondering... projects are rich with metadata but we only show the Real Experience Score on the card.

Everyone uses the dashboard for different insights. More security conscious users might want to always keep a pulse on the Firewall status, etc...

Could we make this area more dynamic and custom?

Some obvious ideas were to include other page performance insights like LCP, web analytics metrics, or alerts related to projects, etc...

With @merycodes we threw a bunch of different forms of widgets against the wall but nothing seemed right.

We were trying to find the layout and visual form of widgets. It just didn't seem to fit in that lil corner well at all, with a background or without. We quickly also realised that it is useful to have widgets be visually distinct "characters" from each other and not just differentiated by text or color-based. This makes them easier to scan.

The unlock for us came when we used two rows instead of one. Now we are less likely to collide with the labels on the left, and have a more reasonable amount of space to work with.

The right corner becomes this lil rectangular area, along with others, that is satisfyingly tight instead of floating without purpose or relative alignment to anything else.

From there on we had a pattern to follow and we were no longer in the trenches creatively. Now it was just a matter of making all the various widgets.

Finally, we did some revs on the "widget switcher" which wasn't complicated.

Really we just went back and forth on whether the menu should contain data or not. We thought it would be helpful because this way you could use the menu to preview data from other widgets without changing the project card widget itself.

When a project has no data, the widget switcher gives useful overview over platform features, and even helps you enable them.