Developer Website

New Relic One is an observability platform, which means you can build and host custom React apps that use your data to meet specific use cases you have. We needed to build a website to help people get started building these custom apps.

I started by understanding the information architecture of the new site. First, we assembled a list of page archetypes, mapping to the different types of content we wanted to put on the site.

page archetypes

Once we established the archetypes, the next step was to create a mental model of how we expected people to traverse these different types of content. We went for a an approach of starting at a high level overview and quickly descending to the details as needed. At any level of granularity, users could choose to either go deeper to skip to the next topic at the same level of granularity.

IA structure

Finally, following this structural framework, we assembled the archetypes into an IA diagram that would inform the development of the site and its navigation.

doc site IA

With this framework in place, we could proceed with the design and implementation of the site. Thanks to other sites in our portfolio, we had a partial pattern library to follow, so only had to design specific components. Most of my design effort was spent on the sidebar nav, header nav, banner, and right rail (for linking to related content, not pictured).

home page

As a stretch goal, we decided to support dark mode on the website. I paired with one of our front-end developers to come up with an appropriate color palette. It turned out quite nicely.

home page dark mode

Because our next project is to replatform the New Relic docs site, we wanted to reuse components from the developer site. To achieve this, the developer team created a new component library project, and I worked with them to identify candidate components to add to the library.