Last month, Datadog asked me to redesign their landing page.

I find that a lot of SaaS landing pages with lots of screenshots but it almost defeats the purpose from a marketing standpoint. So, I decided to release my inhibitions and give Datadog a major makeover without straying from their brand image and colours.

Track Illustration.png

Redesigning Datadog’s Landing Page

2018

Overview

With full creativity to explore my options, I used Datadog's current colour palette to create the futuristic look and feel without stepping away from what makes Datadog, Datadog. I also curated a collection of icons, illustrations, and text to help potential/returning customers with a refreshing, minimalist approach.

By the time I finished the redesign, I personalized icons and illustrations for their features to enhance the interactivity—appealing and fun, right?

I approached my redesign on 3 things:

  • Brand Identity

  • Core Experience

  • Visual Interface

Planning

I was inspired by Digital Ocean's Dribbble shots and their use of gradients, 3D illustrations, and colour consistency. So, I tried to replicate the feeling of high-tech with a little more glamour through brightly coloured gradients and illustration style.

I started with researching how other analytics companies have designed their landing pages:

New Relic

Zoho

ZoHoScreen.png

App Dynamics

AppDynamicsScreen.png

There are a lot of similarities between the 3 landing pages:

  • Very product focused (obviously)

  • Icons are used in their storytelling/branding 100% of the time

  • Supportive apps/languages to showcase versatility across most platforms

In my opinion, I felt like there was something missing. So, I followed my intuition and worked on some sketches. Through that exercise, I arrived at my "eureka!" moment: these landing pages haven't demonstrated a good use of interaction design to help engage the user. 

My goal was to make sure there was a healthy balance of information and design to ensure that the users/visitors are interacting and fully engaged with the information that's presented to them. For me, interaction with the product is very crucial to if the user will return more or less frequently.

The cool, 3D, and vibrant seemed like the right thing to do at the time. In hindsight, if I had some good screenshots of the program working it's magic (and more time would be nice, too), I could've carried the information side with more grace. At least, I was able to curate (with my illustration) a broader story of the brand interlinked with its users. 

STYLEGUIDE1.png

Icons

I did a lot of illustration work for the icons and artwork of the redesign. I researched the definitions of the word to try to fixate on a image that would scream the word if it was an animate icon. A lot of it was inspired by things I've seen in the past while testing and trying out new apps on the iPad and iPhone. 

Wireframes & Sketches

I didn't want to sway too far off what Datadog originally had because at the end of the day, it was still something that had to be simple, informative, and captivating. 

 
 

Design

My idea for this was more user and interaction focused. I wanted to curate a feeling for Datadog.

 
Landing Page.png

Summary

In hindsight, I should've made it comparably different by either having each "feature" be hidden with just a strip and a header. If the user is interested and chooses to interact, the experience is enhanced with expanding motion. Shown below:

<insert image of drop-down features>

I'm pleased with the overall presentation. My objective was to make it more engaging and interactive for the user to stay engaged, which it now is, and hopefully people will admire the details in the icons. The next step is to animate it. 

Through this project, I have come to understand the value of my drawing and photography background in relation to UX design--to be able to visualize things in alternative perspectives and assemble the best possible outcome.