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.