Observability Report

New Relic observability report is the largest study on observability made by New Relic and is updated annually. The report provides studies on how observability bring direct impact on a business. For the report, I suggested following improvements:

ROLE

UX and UI Designer

PROJECT TYPE

Long form content

Web system

WORK DETAILS

  • Design the customer front landing pages of the NRU including homepage, course catalog, and course detail page.

  • Provide strategy, wireframes, and high-fidelity prototypes for a seamless user experience. Create design files and work with developers to see the project to the end, and ensure quality across the website.

  • Create a separate brand and UI system that sets itself apart from the main New Relic brand.

Web based report

Before 2023, the reports were presented as a PDF document. However, I suggested that we turn this into web based report as we will be able to track user engagement, interest, and performance, which would open up the opportunity for optimization.

Templatized system

Similar to our main web system, the report would be created with component based ecosystem in Drupal. This would mean that the content writers can directly create and edit reports without further spending design or engineering resources.

Flexible yet robust structure

For this to work, we needed to find a balance between how flexible the components are, yet robust enough that whatever the writers do won’t break the system. We also wanted to expand the report system into other types of long form content.

General Template

Left Rail - Navigation

  • Logos are editable in both svg and image format

  • Navigation can handle up to tertiary nav items

  • Social icons can be turned off

  • CTA can be turned off and on

  • Separated scroll experience from the body content

Body

  • Mutiple layouts

  • Full option of typography

  • Callout section

  • Tables

  • Charts

  • Quotes

  • Icons and Images

Hero Area
Ability to use different background color or pattern

  • Can use eyebrow copy

  • 2 different h1 font sizes

  • Can use hero image or not

Right Rail

  • Stats callout

  • Icon/image callout

  • chart callout

  • Quotes

  • bullet and numbered lists

  • footnotes

  • Right rail can be turned off and for each row of content

Navigation

Hero

Right Rail

Body

Chart options

For charts, we used Chart.js. This allowed us to create charts directly in Drupal, work with various chart types, have responsive sizings, and add animations.

Example of items put together