Help Center
Project Overview
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
Discovery & research
A content inventory captured our analysis of the existing articles including what changes were needed and what information was missing.
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.
Define the information architecture
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.
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 initial project scope.
Design iterations
The design iteration process allowed us to consider many potential ideas and quickly fine tune a solution.
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
Coding
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.
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.
Content
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.
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.
🛟 Support tickets submitted per site dropped by 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. It was added after launch.