Nielsen Design System Website
After Figma components and documentation started piling up, we decided that a full-blown website would be a better place to store all of this information.
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.
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.
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.