This API Client Has A Brilliant Landing Page Trick

These days I am spending most of my life force on a single point agenda, that of building an API product (will talk about what exactly it is about later).

And it so happens - that it also becomes my job and duty as a product designer - to study what's out there.

Historically - I've been a "study the masters, not the pupils" sort of person. I've stuck with various avant-garde stuff, too absorbed in abstract matters to care about the hustle and bustle of the market.

But then - with time - I'm noticing a transformation within myself - where I want to focus more on the market.

I thought - this would be a great example to share - where the market is so, so good at implementing excellent design principles - all in the service of the user.

The Landing Page in Question

I was casually looking at Apidog's landing page.

Apidog seems like an incredible product built by Japanese engineers (mostly) - given their changelogs, etc.

Something that is always of interest is - how is the product presented in the landing page.

What caught my eye was the following image:

What's In An Image?

First of all - what stuck me about the image - was the details.

Just a simple image - no video, no animation, no attention grabbing gibberish.

Plain and simple image.

Isn't that interesting?

Why'd the author do this - when they could've used a full-fledged video or something?

I sort of backtracked and tried to recall my own response to this image.

I recalled that - I had barely spent a minute studying what the image is trying to say.

Within that minute, I had grasped that:

1. Apidog supports collaboration (multiple pointers)
2. Apidog supports API mocking
3. Apidog provides schema validation
4. Apidog has built-in git client
5. Apidog can pretty much do anything Postman does (just an impression)
6. Apidog comes up with automation testing
7. Apidog has light/dark mode (the image changes in a super comfortable pace to demonstrate this)
8. Apidog engineers & designers have great taste and execution skills

And then I tried going through the rest of the landing page - scrolling, scrolling, and I realized that it is mostly saying the same thing as the above observations.

Then it hit me - why the designers of the landing page had chosen a static image: this carefully designed static image said everything I needed to know about their product within a minute while demanding bare minimum effort from my side.

I'd say - most of my processing happened in an unconscious way - with the powers of my "system 1" intuitive mechanisms (in Kahneman's terms).

This image alone was so effective that I didn't even need to read the rest of the landing page to "get" Apidog.

Brilliant stuff.

So What's the UI Principle at Play here?

A decade and a half ago, design wizard Bret Victor authored a wonderful document on software design called Magic Ink.

In this thesis - Bret argues that "Interactivity must be considered harmful (for information display software)".

He gives numerous examples that essentially prove that a well-designed info-graphic is superior to a moving picture to convey information.

This may come off as a surprise - why'd a still be more powerful than a moving picture in conveying information?

Some starters:

1. Still image allows comparison of various data points
2. Still image accounts for individual differences in processing speed
3. A still image is easier to "get right" than a moving image
4. A still image doesn't tax the memory - you don't have to recall much - if you forget something, just move the eye
5. A still image demands minimal work from the perceiver (eye movements, processing the symbols)
6. A still image "compresses" the information more than a movie
7. Once the user's "context" is known - a perfect graphic with compressed information can be designed for the highest impact

Essentially - Bret's thesis asserts that - once you know the user context - carefully designed infographics deliver the best results in most usecases.

And, I'd wager, he was right. The principle of the static infographic really has helped me grasp a complex API product's essence within a minute. Which is no mean feat.

So What?

You see, dear reader, I'm toiling away at an API product of my own called LiveAPI. And presently, here is how I introduce it:

Compared to Apidog's brilliant 1-framer, my approach looks quite primitive, undeveloped.

The conclusion to me is - I have tons of work to do - in applying Apidog's inspiration, and Bret Victor's principles.

I guess - this means - back to drawing board, it is.