Completely overhaul the product's help center, including platform, design and content, to increase the ease of access, timeliness and clarity of information available to clients.

Problem

Due to the difficulty of updating, the help center content was sparse and stale. Thus, clients found it to be only minimally useful and ineffective at answering most questions.

Project goals

  • Increase quality, quantity and timeliness of content through:

    • Migration to a platform that is easy for internal teams to update

    • Improvement of information architecture

    • Updated and expanded content

  • Create a clean, branded, responsive design that allows visitors to focus on content

Project scope

  • To minimize development time it would be a stand-alone site, not contextual within the product.

  • To ensure that any team could assist with future content updates, it would be built using the company's own CMS.

  • To release it before school started in the Fall we had to work fast; design and implementation would be completed by the product team as to not conflict with other development priorities.

Team

VP of Product, UX & UI Designer (me), plus people in supporting roles in UX, product management, marketing, content creation and QA

Role / contribution

Project lead, research, interface and visual design, interaction design, production coder, information architecture, content writer and editor

Tools

Adobe Illustrator, InVision, Confluence, TextMate and Koala

Deliverables

Content analysis, content architecture plan, new help articles, guide for future content creators, wireframes, prototypes, svgs, final designs and production code in Sass, CSS and HTML

 

Process

A content inventory captured our analysis of the existing articles including what changes were needed and what information was missing.

Discovery & research

First we, the product team, inventoried and analyzed the existing help articles looking specifically at subject matter, audience and content freshness. Then we outlined all the current features in our product to locate the gaps.

Next, I researched our competitor's help resources noting their perceived target audience, usability, topics and thoroughness, as well as identify opportunities to leapfrog their help centers.

 

Considering the roles and experience of information seekers as well as their topic focus gave us a more complete understanding of the approaches they might use to find information.

Define the information architecture

To structure the content appropriately we needed to understand who would be visiting the help center and what their goals would be.

The entire product team worked together to consolidate information from as many sources as possible including:

  • our previously defined personas for people who use the product

  • questions that people asked in tech support tickets and in phone calls to client services

  • onboarding information sent by project managers to new clients

  • instructions frequently conveyed to clients during training sessions

  • help articles about the product that clients had created for their own staff

This process gave us a reasonable guess of the skill levels and goals of those who would visit the help center. We also recognized that some visitors would have specific questions to address while others would wish to explore and discover content casually.

Constraint
While my team and I pushed to include search capability for user experience, it was deemed outside the project scope.

 

The design iteration process allowed us to consider many potential ideas and quickly fine tune a solution.

Design iterations

I created a series of wireframes & prototypes as we quickly refined the look to better meet the project requirements.

Design requirements for information seeking:

  • easy access to skill-level appropriate articles

  • support multiple paths to same information

  • simple to find contact information

Design requirements to allow people to focus on content:

  • easy to read typography

  • plenty of whitespace

  • minimal extraneous design elements

  • responsive

  • non-intrusive branding

 

Sass is a combination of what I like best about css (making pictures with code!) & java (variables! functions!). Plus it saved a lot of time to use the production team's code libraries, when appropriate, instead of re-inventing the wheel.

Production

To take advantage of the same website tools and continual improvements available to our clients, the new Help Center was built on the company's client-facing CMS. This also ensured that any team–support, training, marketing, product, dev–could efficiently assist with future content updates.

Following the same approach and tools as our production team, I brought the final design to life using Sass & CSS. I also created svgs from marketing-supplied images. 

 

 

While our team was the first to create articles in the new help center, we would not be the last. To share that responsibility gracefully, I put together a minimal style guide.

Content

The product team, myself included, transferred and updated the articles from the old help site into the newly defined content structure. Then we wrote new articles to fill the gaps we discovered, keeping in mind that our audience appreciated step-by-step instructions with images and videos for both common and obscure tasks.

I also set up a simple and brief style guide for future content editors, thus allowing the support and marketing teams to easily add and update articles as needed in the future.

 

Results

The Help Center went from being minimally used and mostly overlooked to being frequently viewed by clients, updated regularly by multiple teams, and often shown off during sales demos.

praise-help-center-Amanda-27-July-2017.png
praise-help-center-Annie-18-Aug-2016.png

In addition, the number of support tickets submitted per site dropped 30%, a decrease which the support team ties directly and strongly to the Help Center overhaul.

Lessons

Encouraging and enabling content updates by multiple teams eases the burden on time-constrained teams and allows for fresher content.

People expect search capability on content-rich websites.