Nielsen Design System Website

Setting up Initial Site

When siting up the documentation website for the Nielsen Global Design System (GDS), I knew we wanted it to accomplish a few things.

First, we wanted it to be easy for anyone to open up and find what they need. The content that would be in the site isn't all that different from what is in Figma, but the website should be for EVERYONE. Not just designers or developers.

We also wanted to set a strong example with the website. This was our chance to create something using our own system. Getting to use all of the foundational principles of accessibility and responsiveness would be a great example to point to and say, "Look, this is how to do it."

The last thing that was essential for building out this website is to make it so that anyone could contribute to the content of the site. Being a large task, we wanted to open it up so that other designers could be able to help write content and bring it back to the system. So we would need some form of CMS to connect to the content pages of the site.

From all of these requirements, I decided that a Gatsby site, connected to Contentful as a CMS would be a great solution. I had not used Contentful in the past, but was assured from peers and external research that it would be a great solution for our needs.

Setting up the site was actual not all that difficult, it just required pre-planning of how I would organize the site, as well as designs to go off of to actual style the site how we wanted it to look. Aside from that, it was simply taking it piece by piece.

Foundations

The Foundations pages were a good place to start development, because these would remain mostly static, requiring minimal updates over time. This means that they were not required to hook up to a CMS for content. But it was a good place to start creating the page frames and styling everything from scratch, using our own design system as a styleguide.

In this section of the website, we have pages for Design Principles, Writing Guidelines, Accessibility, Design Tokens, Colors, Typography, Layout, Icons, and Logo. Each of these pages were custom implementation, each their own file with automated routing in the Gatsby project.

The most challenging part of this part of the website was figuring out how to add a Table of Contents section that was clickable but also automatically update as the user scrolls. I was able write a custom Javascript function, where it first searched for all of the "h2's" on the page and indexed them to certain positions, and then, when the user scrolls, it keeps track of you're current position on the page. When the users current position crosses over one of the h2's, the "active" section is updated in the table of contents.

Components

For the components pages, this is where Contentful gets involved. I was able to build this site so that each page was fed by a content model object from Contenful, where I was able to fetch things like page name, description, relevant links, and then page content. This means that there would be one "content" object for each page, or component in the website. This made it so that non-technical people on my designer team were also able to contribute to this portion of the site. There would be some learning curve to teach people how to use markdown, if they didn't already know, but not nearly as much difficulty as teaching them how to use Javascript frameworks or Github to make updates. In the Gatsby project, I was able to create one page template, that ingested all of this data from Contentful - automatically creating new pages dynamically. I also was able to link the Github repository to the Contentful space, automatically triggering a new build and pushing changes that were just made to the live site.

Custom Search Component

This was another feature I knew we wanted for the site, but at the time I started building, I wasn't quite sure how it would get done. I looked into things like Algolia and a few other search API's that I might be able to use for the site, but ultimately decided that a custom implementation was the way to go because of money and overall setup time needed.

Basically, how I was able to do this was create a reusable component in my Gatsby project took it two things: 1. A search term, that would be updated every time the user typed or removed a character from the input and 2. A HUGE object of all of the component names, descriptions, content, etc. that I would be searching through.

After spending a few days on this, I was able to finally get a component that would return the expected list of relevant pages. To add a nice little cherry on top, I added a "highlighting" feature that lit up which parts of the content page actually match the search term. This would help with understanding why a certain page populated in the search results.