Skip to content
All work

Hevo Data · 2024

Redesigning a technical blog by watching people read it

The redesigned article page.
My role
Visual design intern
With
Mridul Kathuria (SEO)
When
Jul — Aug 2024
Result
+40.8% views per session

My third-year placement brought me to Bangalore and to Hevo Data. Their blog was one of their biggest sources of new customers, and I got to redesign how people read it, and then prove it worked with an A/B test.

Hevo’s blog got plenty of traffic, but people left fast

Imagine your data pipeline just broke. You search the error, land on a long guide, and can’t tell in a few seconds whether it answers your question. So you hit back.

Hevo writes long technical guides about data pipelines, warehouses and SQL. Getting people to the blog wasn’t the problem, because Google already sent it plenty of traffic.

The problem was what happened after they landed. With that much traffic, even a small improvement adds up to a lot.

Before: dense, uneven spacing, and no way to see what an article covers.

I watched people read to find out why

I watched recordings of real reading sessions in FullStory and noted every spot where people paused, scrolled back up, or gave up. I took apart the blogs of the best companies in the space, section by section. And I asked Hevo’s engineers and analysts which parts of an article mattered most to them. Their answer: tables and code.

Looking at what the best blogs do, one board per pattern.
My whiteboard sketch of the blog home page.

If people could see what an article covers, they’d stay

The goal

Get people who land on a technical article to stay longer and read a second one, on desktop and on phones.

My hypothesis

People weren’t leaving because the content was bad. They were leaving because they couldn’t tell, fast, whether the article answered their question. Let them see the whole article at a glance, and make the code read the way engineers like, and they’ll read more.

How I’d know it worked
  • Views per session go up: people open a second article, not just spend longer on one.
  • Engagement rate goes up on the article itself.
  • Both measured new page against old page in a two-week A/B test, not a before and after guess.

I rebuilt the article page around what I saw

01

Show what the article covers, up front

The new article page, up close: headings you can scan, and the next read always in view.

A table of contents that stays on screen and a short summary at the top let you check, in seconds, whether an article answers your question, and jump straight to the part that does. I also moved related articles to the side, instead of hiding them at the very bottom.

02

Let the people who read code pick the code style

The code block options I tested with the team.

I showed purple, dark and light code themes, with coloured and plain text, to the engineers and analysts who actually read these posts. Then I picked the one they liked best, not the one that matched the brand colours.

03

One card, one rhythm

Card variants, all on one spacing scale.

I rebuilt the article cards, spacing and text sizes on one simple scale. The blog now feels like one system, and it’s easier for the content team to add new categories.

Views per session went up 40.8% in a two-week A/B test

We ran the new page against the old one in a two-week A/B test.

Back to what I said I’d watch

Yes

Do people read a second article?

Views per session went up 40.83% on the new page.

Yes

Do they engage more with the article itself?

Engagement rate went up 9.09%.

The redesign went alongside the SEO research I did with Mridul. Together they contributed to 1.3M more organic clicks and a 16% better average position in Google search.

“He backs his design decisions with data, ensuring they’re both creative and effective.”Mridul Kathuria, Growth, Hevo Data

It’s live on hevodata.com/learn.

Most of my ideas came from watching recordings

  1. Data can be where the ideas come from.This is the project where session recordings stopped being something I skimmed. Most of my ideas came from watching them. It’s also why every part of SEO Sorted ends with an action today.
  2. Decide how you’ll judge it before you ship.Agreeing on views per session up front meant the result was a number we could all read, not a debate about taste.
  3. Let the people who use it choose.I wouldn’t have picked the code theme the engineers chose. It didn’t match the brand, and it didn’t need to.

Traffic was never the problem

I thoughtThe blog needed more people.

Turned outGoogle already sent it plenty of traffic. People were arriving just fine. They were just leaving fast.

I thoughtReaders would care most about how the page looked.

Turned outThe engineers cared about tables and code more than anything else I’d drawn.

like what you saw?

Let’s build something good.

Open to product design roles. Email is fastest.

LinkedIn ↗Résumé ↓