The “One library for all your needs” section is one of my favourite parts of our new landing page. It took many iterations to get here.

Mobbin’s product design reference library has many types of content. We needed to show the full range without making the section feel cluttered. Getting this right meant that users can easily tell what they’ll get from Mobbin at a glance.

Trying to say too much

We started with a storytelling approach because a marketing page felt like the right place to give ourselves more room for personality. This meant longer copy, numbers to back up our claims and richer visuals, like the folder with different images bursting out from it.

But these drafts didn’t make it immediately clear what Mobbin offered. Even I had to work too hard to understand the message.

A few other things bothered us too:

• Showing multiple types of content in a single visual felt cluttered.

• The numbers felt like a hard sell.

• The long description and rich visual competed for attention.

Scroll-jacking isn’t always cool

So we tried to explain Mobbin simply: “One library for all your design needs.” We expected to land somewhere between this and the earlier drafts but surprisingly, this version resonated.

The two-column layout felt like a safe bet. We’d already used something similar on our MCP product page. As you scroll through the content types on the left, the visual on the right changes.

But it relied on scroll-jacking, which interferes with how you’d expect scrolling to work. It also made the section much longer than it needed to be. We should be showing the range of content at a glance, without making you scroll through each type.

Showing one content type after another also gave them an order of importance we didn’t intend.

Finding the right grid

A bento grid was the natural next step. Each content type could have its own space, and users could see the full range at a glance. But there was still plenty to figure out. Which layout would work best? What should we show in each card? And how should we use animation?

So I went to town, playing Tetris but with bento cards.

(Un)fortunately, we had tons more drafts that would never see the light of day.

We settled on a simple 3×2 grid with six equal-width cards. Some of the other layouts were more interesting to look at, but we wanted users to notice the content first. Six cards was quite a lot to take in, so a predictable layout made that easier.

Notice how the second version feels cleaner? I dropped “design” from the title because the rest of the page already made it clear what Mobbin was about. Moving the labels inside the cards also pushed the “Animations” screenshot to the bottom edge to match the other cards. One less variation and the whole grid felt much neater.

Bringing the cards to life

Each card would cycle through examples to show more of the library. The challenge was to do this without making the grid feel busy.

In theory, making the cards change at the same time should have kept the grid orderly. In practice, all six cards changing within 500ms competed for attention. I found it hard to focus on any one card.

So I let each card change independently and made their transitions subtler. This immediately felt better: livelier without being busy.

The content needed just as much care. I picked screenshots that looked good together while showing the breadth of the library. That meant balancing light and dark screens and avoiding screenshots with too many tiny details, which added clutter.

Simple is considerate

Our final tweak was to change the App card to show three apps instead of one. A single app could give the wrong impression that everything in the other five cards came from it.

This brings us to this final version we shipped:

It looks simple, because it is.

But simple is often harder to get right because there’s less to hide behind. It forces you to be intentional about what stays and what you don’t ship.

I think it’s more considerate to design this way. The work we put into simplifying it is work the user no longer has to do.

Bonus

If you’ve made it this far, here are some of my favourite drafts from the other sections that didn’t make the cut.

Nerd out about design with me on X or LinkedIn.

And thank you David, Alex and Rebekah for collaborating on this landing page. Without them, this would not have been possible.