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.
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
Adobe Illustrator, InVision, Confluence, TextMate and Koala
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
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.
- 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
- 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.
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.
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 by 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.
While my team and I pushed to include search capability for user experience, it was deemed outside the project scope.
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
- non-intrusive branding
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.
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.
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.
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.
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.