A dashboard customers build themselves

Context

• Platform: responsive web, desktop and mobile.
• Team: PM, tech lead, analyst, 3 SWEs, 3 QA.
• Timeline: December 2025 – July 2026.

The problem

The dashboard was meant to be the customer's personal space — like the home screen on iOS or Android, where everyone arranges widgets their own way. But the only thing you could change was which widgets were on: a checkbox list on a separate settings page. On top of that, mobile only showed color on the collapsed sheet — expand it, and the dashboard turned gray.

Desktop had an XS widget size a third of the row wide that mobile didn't — a dashboard assembled on one platform would fall apart on the other, so this grid made customization impossible.

My task

• Drop the XS widget size and bring desktop and mobile onto one shared grid
• Bring color back to the sheet on mobile
• Design an edit mode: moving, deleting, and resizing widgets
• Turn the checkbox list into a widget gallery with full previews and size selection
• Come up with a way to promote widgets

The solution

1One grid across every device

The first call was dropping XS. It paid off two pieces of design debt at once: the tiny block that needed every widget state drawn separately disappeared, and the desktop and mobile grids finally matched.

2Color came back to the whole dashboard

It turned out the gray dashboard came from a technical limit in mobile browsers: the status bar couldn't be transparent and could only take one solid color. Color settings, meanwhile, lived on the checkbox page, a change was confirmed with nothing but a toast, and the only place you could see it was the collapsed sheet.

I masked the seam between the sheet and the status bar with an overlay gradient and moved color settings straight onto the dashboard — hit "Edit" and watch it repaint live.

3The dashboard became editable

Moving, resizing, or deleting a widget used to be impossible anywhere — edit mode is new. I modeled it on iOS jiggle mode: jiggling widgets are a language people already know from their phone's home screen, and our mobile audience skews heavily iOS. For a livelier jiggle, I wrote the CSS with a randomized phase for each widget.

4A checkbox list became a gallery

Widgets got cover art, previews, and size selection before you even add them. Illustrators drew the covers; the art director and I signed them off together.

5A promo block and a new-widget notification

A "Featured widgets" carousel appeared below the dashboard: new widgets land there, and product teams can promote theirs. When a new one lands, a notification dot appears in two places: on the widget itself and on the "Add widget" button.

The result

The dashboard now assembles around the user: color, widget mix, size, and order match across desktop and mobile.

The "Featured widgets" carousel alone drove 2.5K widget adds in June. In the first two months after release:

+12%

clicks into "Edit" month over month

+60%

weekly widget adds within a month

Takeaways

• Customization started with aligning the grids — nothing else made sense without it
• One simple fix — an overlay gradient — brought color back to the sheet
• The gallery redesign moved the key metrics, and that tracks: people choose with their eyes

← Previous case — Search

Next case — Credit cards →