Ideas from CloudFlare: Help Center customization

There are many decisions behind Help Center customization and the design of a Help Center—both aesthetic and data-driven—that range from defining objectives to structuring content to adding custom touches. The process can be daunting, even with a setup wizard and themes designed to make implementation easy.

When first getting started, its sometimes helpful to look at examples from other customers. Perhaps you like what you see but wonder how to get there. What theme did they choose, and how did they make it their own? Or maybe you have an idea about what you want to accomplish, but find it challenging to communicate that vision to a web designer.

When a CloudFlare page visitor hovers over each image of a common error message, a short caption appears to briefly describe the error. Clicking the image redirects the visitor to the detailed article.

To learn how and why the team at CloudFlare arrived at this design, we met with John Roberts, Platform Lead, and Jaime Sparr, Visual Designer, at their headquarters in San Francisco (where, its worth mentioning, theres a pretty sweet indoor mural of a robot hoisting a burrito into the air).

Identifying goals and objectives
CloudFlare began their Help Center planning with a clear goal: to get customers to the answers they already had. In the early stages, Sparr spent a lot of time talking to the support team and to the founders. “It was helpful to have the support team involved because they had a good idea of what needed to come first on the page,” she said.

An early objective was to give CloudFlare’s primary customers, website owners, a way to quickly determine whether errors reported by their site visitors indicated an issue with CloudFlare, or with the site’s Web host. Providing a visual representation of the error messages (which involved some custom coding) seemed like a good first step toward that end.

Deflecting tickets was another key objective, and they chose the Swiftest Elk theme because it features a prominent search bar at the top of the page (which they also customize to occasionally deliver announcements to customers). “Most of the time people want an immediate answer, and so the search feature is really useful,” Sparr said. ”That theme just fit our needs really well and was easy for our web team to put together.”

From inspiration to implementation
How easy? Sparr was able to go from having conversations about concept and architecture to implementing the design in 3 to 4 weeks. It helped that the open source code editor integrated with Help Center was similar in functionality to the native text editor Sparr was used to working in. She also spent time looking at other Zendesk customer Help Centers, especially since CloudFlare was customizing their Help Center for the first time.

“It was all new to me,” Sparr said. “This was one of the first projects I built when I came to CloudFlare. I was still interning. They were like, ’Redo our support page,’ and I was like, ‘Well, thats terrifying.'”

“I approached it the way I guess I would approach any web design project,” she continued. “I was free to do almost whatever I wanted, which was really nice. I tend to come up with my concept first, and then search for things as I need them. Sometimes a plugin will inspire a design idea, but usually I know exactly what I want to do and will find the thing that will help me do it.”

In this case, she searched for and found a jQuery plugin called Capty to create the caption overlays for the error screenshots. A resource she frequently uses is Codrops, which is a library of beautiful jQuery plugins that integrate easily, she says, with Zendesk.

Design resources for doing it yourself
Help Center can be branded and customized without any additional HTML, CSS, or JavaScript, but if you’re interested in adding a background image, icons, or other customizations, here are a few resources that may help.

Ready to get started? Download this project brief template, created specifically for sharing your Help Center vision with designers. Need more inspiration? Check out other customer examples on Pinterest.