GoFundMe Heart Playground

Heart Playground is a Next.js app for designers and PMs at GoFundMe to prototype with real design system components. I designed the interface in close collaboration with the lead engineer who built the playground, MJ Miller.

Web2026

The design of the interface is simple. The front door is a dashboard with recent contributors, so you can always see what’s the latest. And there’s a chart of activity below, so who has the most isn’t the focus, but rather who’s the most active right now. Both of those features are designed around discoverability. We want our team to be able to see each others work, inspire each other, and help push each other.

Inside each prototype is simple too. The Heart Playground chrome itself is very minimal and easy to hide, while providing a handful of features for things like leaving annotations. And the prototype properties are generated by request and depending on what inputs are needed.

As a design systems team building this, our advantage is knowing what good looks like. Anything that doesn’t faithfully render real production ready components was not going to cut it. Similar enough was not an option we would accept. That led to some clever architecture and agent skills. Now any designer or PM can prototype in our real design system components.

To read more about the technical set up, check out the write up from the lead engineer who create the environment, MJ Miller on LinkedIn.

Design

  • Lance Barrera (that's me)
Next Project

GoFundMe Heart Design System