Book a call

Digital With Oh Dear

Making the best all-in-one
monitoring tool even better

background

client
Immutable
industry
SaaS
services
concept / design
live site
ohdear.app
Sometimes, websites go down. To track this, there are countless tools out there that just ping the homepage and show a percentage of downtime. But Oh Dear goes waaaaaay beyond that. It’s basically an all-round ‘health checker’ with nine different core features. Most of those features are fairly technical, so the Oh Dear team reached out to us with the challenge of creating a website that explains these features in a more human, relatable, and visually appealing way. Oh, (pun intended) and as the icing on the cake, we got to do a full visual rebrand as well! In this case study, we’ll give you a proper breakdown of what went into creating this complete overhaul.

Jumping in

feet first

A logical starting point in a design process like this would be to start wireframing. Truth be told, we rarely do ‘logical’. The crux of this redesign was rethinking the way features could be explained and visualized. Their previous site simply used vague blown-up icons as an easy page filler. We needed to go beyond that, but there wasn’t a lot to work with. Sure, we could literally show screenshots of the product but that would A) look really boring to look at since a lot of screens look 80% the same B) it lacks a lot of additional contexts.

Our solution: a combination of interface snippets, visual metaphors, and subtle animations. In terms of page composition, Apple’s iconic feature grid served as great inspiration.

Features new design

Designed for conversion

Yes, the fold is a myth. That doesn’t mean what you show in the upper viewport isn’t really, really, really important. Especially with a SaaS product like this, where users decide in a split second whether they want to use your product and sign up for a trial or not.

We’ve got a couple of tricks up our sleeves to make that happen:

The headline

The old headline (‘Don’t just monitor your homepage, monitor your entire website’) assumes you know how an uptime monitor technically works. However, the product has evolved to a broader audience than developers alone, so we broadened that up to ‘The all-in-one monitoring tool for your entire website.’

Before

Headline old

After

Headline new

Sure, that’s not the most creative headline. But it’s a big claim non of their competitors make (because they can’t), and secondly, we obviously back that up below immediately

Subheading

Again, the old copy was very technical. Our recipe for a good subheader:

  • Defining a pain / agitate the visitor / show a potential frustration
  • Provide the solution / explain the value
  • Reassurement + social proof / testimonial

Before

Subheader old

After

Subheader new

Not showing the product

On the old website, your eye is instantly drawn to the screenshot of the product interface. It feels like a logical thing to do when designing a SaaS website. For a fancy app this can be really sexy, but you can’t just fit the complete OhDear story in one screenshot.

We figured it would be fitting to show visitors that, as the headline suggests, OhDear really is an all-in-one solution. If you divide OhDear’s nine main features into categories, you get 3 pillars: monitoring stuff, notifying people, and informing customers.

Before

Subheader2 old

After

Subheader2 new

Call-to-action

‘Get started’ isn’t necessarily a bad CTA. But it’s kind of vague. What are you actually starting? In this case, you’ll start monitoring your website. So why not just make the button copy ‘Start monitoring'?

Taking away potential objections by explaining the trial is free and you don’t need a credit card is already great. We added some extra spice by already showing the URL field. Small nuances like ‘instantly’ and ‘no account required’ take away any remaining objections.

Before

Cta old

After

Cta new

More social-proof

We expanded the social proof with some impressive numbers. Adding the target groups (developers, marketers,…) further plays into our mission of making OhDear appealing to a wider audience.

Before

Clients old

After

Clients new

Doing the math for you

As an all-in-one tool, OhDear completely replaces at least four separate tools. That’s a huge cost saving and obviously way more practical. By simply calculating the difference in cost for you, this becomes ultra clear. Little hand written comments add a welcome wink of playfulness.

Price overview

Rebranding

“So can we change the logo?”

Always an interesting question to ask. 9 times out of 10 the answer is no, but this time we hit the jackpot. The Oh Dear team basically gave us carte blanche. From a brand perspective, it would be confusing and unnecessary to do something completely different. So we made sure to create an evolution rather than a revolution. The typeface is still sans serif. The ‘error red’ got some orange added to it and the blue hues are slightly more purple.

Before

Branding old

After

Branding new

Introducing new style elements

A digital design language is more than just a typeface or a color palette. We like to go deep into the details, with multiple layers of design elements creating one big coherent story. Here are some of those shenanigans:

The final before and after

Old homepage

Homepage old

New homepage

Homepage new

Better product pages

Oh Dear’s features are very advanced and really useful. Still, it remains a rather technical product. We wanted to explain these features as ‘humanly’ as possible. The old feature pages felt more like blog posts describing every possible setting, command, or error. From a copywriting perspective, all copy was written from Oh Dear’s point-of-view, rather than focussing on the benefit for the actual user.

So, here’s how we took those feature pages to another level:

  • Changed the tone of voice to be more focused towards the user
  • Multiple CTA’s throughout the page, and each CTA written around the context of the current feature
  • Instead of giving a summary of every technical feature, we divided the page into steps, creating a chronological overview of how OhDear helps you want a certain irregularity occurs.
  • Every one of those steps got a custom illustration or interface excerpt
  • If you’re a developer and want to know all the technical ins-and-outs we’ve got a separate section for you. To make a clear distinction between the regular content, this content is set in a separate style
  • On the bottom of the page, we also link to the other features. If you haven’t signed up at this point, our other features might interest you more.

Old feature page

Feature page old

New feature page

Feature page new

Switch off the lights

Did we mention we implemented a full dark mode? Your eyes will thank us. We detect your browser setting, but you can also manually switch it in the upper right corner.

Mode dark
Mode light

The actual product

And for dessert, we gave the actual product a facelift as well. Aside from updating the look and feel to match the new branding, lots of small UX tweaks were implemented.

  • Changed the site overview screen and feature screens to show some relevant data and stats instead of just toggle switches or numbers and timestamps
  • Made it clearer which site you are actually monitoring
  • Fully responsive design

Documentation

If you’ve made it this far down this case study, you’ve probably realized redesigning a digital product + its marketing website is a lot of work. Well, there’s even more. We also redesigned the documentation subsite to feel way more mature and welcoming.

Instead of a dry welcome page, a well-structured overview page shows popular questions, an FAQ section, and the latest news and updates.

Old documentation

Documentation old

New documentation

Documentation new