Monday, February 9, 2015

Behind the scenes @ the Base CRM help center / How to build a winning SaaS support experience

From the Baseline Blog @ Base CRM we read: Recently we had the opportunity to do a full revamp of our support site. Using Zendesk as the framework, Director of Support Mark Stagi and Interaction Designer Harrison Wheeler collaborated to bring great content and usability to our support page. In an amazing 45 day rollout from conception to completion, our team worked fast and hard to bring a much needed lift to support. Here’s a behind the scenes look at how we approached creating a new customer support page at Base, and how we’re designing a framework catered to our customers.
With this project, we had a few goals in mind:
• Less Support, more education. We wanted to build a resource that went beyond saying “Here’s how you do this” and educate customers.
• Update the UX. Based on Google Analytics, we knew lots of people were going straight to search so we wanted a search optimized experience
• Audit our existing content.
• Make it easy to contact us.

Creating an education portal

Support pages always have lots of information, but where they lack is in having that information available in an accessible way. Our previous support center had tons of regularly updated content, but it was difficult to find the new content. Google Analytics showed us that visitors were going straight to “contact us” even when there was a great article answering exactly what they needed. While it’s simple to have a straight-forward “contact us” button, at the end of the day, that’s not as helpful as creating an educational environment where anyone can come to find information on anything. For Mark, this was a focal point in bringing a new perspective to the support page.

“Meeting customers on their own turf is important. We want to be available via email, phone and chat of course but even better yet, if someone has a question that is very simple and straight-forward, or just in terms of user education, we want them to be able to go to our website and get what they need.”

And so at its very core, the support page is an educational hub for all things Base; a useful space that our customers can turn to at any time to learn more about their sales software. Here at Base, it’s more about educating our customers and less about just providing a bullet point list of static information.

Breaking it down to make it easy

We wanted to make our support page an easy tool to navigate through, so we decided to divide all of the content into three sections: announcements, knowledge base, and videos. This helps create a more focused support page and helps user’s know exactly where to look for what they need. Whether you’re interested in reading about the latest Base features, watching a video guide or reading an in-depth article, our support page clearly maps it out for you so that you never have to spend countless hours combing through irrelevant content.

For Mark and Harrison, it was important to divide and conquer all of the content previously present on the support page to provide a more fluid experience for our users. As opposed to digging for content and scrolling through pages and pages of content, our users can now easily navigate from one feature to another without confusion.

We also did a full content audit where we went to each support page to evaluate the content, add updated screenshots and make sure everything was relevant. This was a huge help and we knocked this out in a day. If you plan to do this, grab your team, get some pizza and spend the day just auditing the content. Each team member can take an article, check it out, and give their stamp of approval. Otherwise it’s going to take forever to get through this step.
base design team
The Base Design team doing a final sync before launching the new help center.

Redefining the “simple” search

Search is a component of every support site. But for us, it was time to take the standard search feature and make it better. On our previous site, we saw see a lot of organic search coming from Google. People got to our support center looking for things like “SMTP email connection Base.” As Mark describes “we wanted our support page to be heavily based on search. We noticed a lot of people who found an article that wasn’t a full match on what they needed, and then wouldn’t know what to do from there. We wanted people to have more context once they went into an article.Search is always prevalent at the top to always give customers what they need.”

With new metrics in place to give our users the most relevant search results, they’ll never have to scroll through countless archived articles again. The placement of the search bar on every page of the support site was meticulously planned by Mark and the design team to create a site that allowed users to not just take charge but also take advantage of the abundant information at their fingertips.
base support team
Mark and the support team reviewing the new help center.

A human support experience

One thing we wanted to do throughout our whole process of reviving the support page was make it really easy to contact us. At the end of the day we’re creating a support page, and if our users have to spend 10 minutes to find a tiny “contact us” button, we haven’t done them any justice. For Mark and Harrison, this was a key factor in providing the support experience they wanted.

“We wanted to make sure that people could get a hold of us wherever they were too, on the site. So figuring out how to contact us is very easy. We have the bottom banner that’s persistent on every page. And pictures of the support team to add that personal touch. We’re human, and one thing we want to do, which is very important to support, is give people a very unique, human experience,” explains Mark.
We added team headshots to give our new help center a human feel and show our customers the team who is working to make them successful.
A “human” customer support experience. Interesting concept, but is it doable? Here at Base we not only think it is, we’ve based our entire support page around this idea. By focusing on giving our customers the most human experience possible, we hope to raise the standard for software support. Both Mark and Harrison focused on trying to do something that, at least in the web support world, is not hugely important: make something as automated as a web experience feel as personal as possible. For Harrison, “adding a humanistic aspect that the customer can feel and bringing a level of emotion” was at the heart and soul of every design change made to the site, and he’s working hard to make sure this thought process will have a ripple effect across all aspects of our site.

New but familiar design

In addition to taking a humanistic approach to support our team also wanted to create an environment that was familiar to our customers. “There’s a lot of iconography on the support page. That’s a lot of the same iconography that you’re going to see in the application on the mobile phones and on the web app. So that’s nice, the customer can go there and they have a sense of familiarity.” Creating continuity between our apps brings us one step close to bringing our customers a more seamless experience across platforms.

We want every Base user to have the same incredible experience they love and expect no matter where they are on our platform. This holistic approach to design acts as the very backbone of how we are hoping to transform the web experience here at Base.
The old Base help center (left) alongside the new Zendesk help center (right).

The big picture

In order to achieve success teams need a clear vision. From start to finish, our vision has always been bigger than the project at hand. In fact, the transformation of the support page is only a small piece in a much larger puzzle. “It’s a bigger picture type thing….we want to move everything into a framework and this is the first step,” says Harrison. Having an expansive view of what needed to be done allowed our team to be responsive and move fast, and has created a framework that will be applied across our entire website.

So there you have it, a little glimpse into how we built the Base support experience. Be sure to check it out for yourself. If you’re looking to give your support center a refresh, follow these steps:
1. Look at Google analytics, or whatever analytics tool you use and figure out what your users are doing on your support site. Where are they leaving your site?
2. Audit your content and make sure every article is recent and relevant.
3. Figure out the type of experience you want to deliver to the user. Is this self help? Easy to contact us?
4. Build a help center you want to use yourself. Write in a conversational tone and cut to the chase.