Datadog Corpsite Menu Redesign

Redesigned a navigation dropdown menu to showcase products effectively while ensuring scalability and responsiveness.

Role
UX/UI Design

Year
2023 — 2024

About the Project

Founded in 2010, Datadog has experienced rapid growth, continuously expanding its product line and services. As a result, the old menu on our corporate site struggled to keep up with the evolving needs of the business, presenting significant usability challenges.

User Flow Audit

Challenges

Scalability

The menu does not account for the addition of new products and categories.

Functionality

High product density makes scanning difficult.

Design

Inefficient use of space, lack of clear category definitions, and an outdated look that fails to differentiate it from other dropdowns.

Positioning

Branding and navigation placement are not optimized for maximum impact.

Datadog’s Old Menu Flow

Research and Discovery

  • Logo Placement: Users are 89% more likely to remember logos placed in the traditional top-left position compared to those on the right. Positioning the logo in the top-left maximizes brand recall.

  • User Engagement: Left-aligned navigation and branding optimize user engagement, as web users spend 80% of their time viewing the left half of the page and only 20% on the right. The highest concentration of user attention is approximately 600 pixels from the left edge of the screen.

  • F-shaped Reading Pattern: Left-aligned navigation follows the F-shaped reading pattern, where users focus more on the first lines of text. The first few words on the left side of each line receive the most attention, making them crucial for usability and engagement.

  • Page Viewing Time: Users spend approximately 57% of their page-viewing time above the fold. The distribution of viewing time across page quarters is as follows:

    • 1st quarter: 31%

    • 2nd quarter: 34%

    • 3rd quarter: 21%

    • 4th quarter: 13%

    This highlights the importance of placing key content and branding elements in the upper sections of a webpage for maximum visibility and engagement.

Sources: Kathryn Whitenton, "Website Logo Placement for Maximum Brand Recall", Nielsen Norman Group, https://www.nngroup.com/articles/logo-placement-brand-recall/. Kara Pernice, "F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)", Nielsen Norman Group, https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/.Therese Fessenden, "Horizontal Attention Leans Left", Nielsen Norman Group, https://www.nngroup.com/articles/horizontal-attention-leans-left/.Therese Fessenden, "Scrolling and Attention", Nielsen Norman Group,
https://www.nngroup.com/articles/scrolling-and-attention/.

Solution and User Flow

Using Current Grouping + Featured Products

Other Solutions