Digital With You

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.

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.’

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

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.

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.

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.

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.

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.

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

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.

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.

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.