Categories: General Knowledge Base

One awesomely designed support center and what makes it rock

Cross-posted from djst.org:

Inspired by Desk.com’s article titled 12 Awesomely Designed Support Centers and What Makes Them Rock, I decided to take the opportunity to demonstrate why our very own help center, support.mozilla.org (SUMO) is way better than all of their twelve help centers combined. ;)

Although their article reads more as a showcase of some of the companies that happened to choose them as their support service provider (which we would never do, since our site is powered by our very own, superior and open-sourced CMS Kitsune), it’s still interesting to look at what they view as great design decisions in a help center to see how we compare.

Here are the main themes of their feedback that I distilled:

1. “The site looks great on all devices from mobile to desktop … The layout of the site is clean and makes it easy to navigate on any device”

We’re mighty proud of the mobile-optimized view of SUMO. It’s one of the most beautifully designed mozilla.org web properties ever made and it works across all mobile platforms. Bram did a fantastic job with the design, and it will fit our future Firefox OS support site like a glove:

You can try this out right away by navigating to support.mozilla.org with your Android or iPhone device. And if you’re one of the lucky few with a Firefox OS testing device, our site obviously works just as well there. :)

2. “The uncluttered design and iconography makes it easy to find information … The iconography makes topics easy to identify and stand out”

Our design uses beautiful icons to organize the content into help topics based on what users most commonly look for on our website. We tested this with paper prototyping before implementing it to make sure that the taxonomy and overall design was ideal for our unique product portfolio.

Our help topics area has beautiful icons

3. “The ability to view support center by topics or by articles is a great way to organize content … The organization of content makes it simple to find the exact answers you need”

We really went the extra mile on this one. In our user studies, we noticed that users have different behaviors when it comes to navigating to the answer to their question. Some people want to start by picking a general topic, while others prefer to pick the product they want support for first. As a result, we made sure that both of these orders work just as well on SUMO.

products and services

You can pick a topic and a product, and then we’ll show you a list of articles that matches that query. From that point, you can even filter that list down even further with the Refine and Focus feature, which allows you to pick from a more granular list of topics:

Our Refine and Focus lets you pick exactly the topic you need help with.

4. “The design is simple, clean and easy to navigate … The colors and typography are solid, strong and consistent with branding … The design is simple and clean and doesn’t distract from the important content”

The look and feel of SUMO is consistent with the overall design language of mozilla.org. This was a specific design requirement since support is an extension of the product experience. Also notice the language selector on the right — our site is available in multiple languages, and the localization is done by our amazing community of SUMO volunteers: people like our new Spanish locale leader Avelper, or my great friends and veteran Italian localizers Michele Rodaro and Underpass.

The typography and navigation elements are consistent throughout our web properties.

5. “The support center articles are well written and easy to understand”

We took great care to make sure that our articles are engaging, easy to understand and that they have a friendly tone. We also really considered the target audience and even the mood that they might be in when visiting our site (e.g. frustrated because they’re trying to figure out a solution to a problem). Great support is an important extension of the Firefox brand and the values that Mozilla stands for, so it’s important that we get this right. Our awesome content manager Michael played a huge role in making this a reality. Here are some of the support articles that capture these aspects well:

6. “There’s a ton of helpful information from community questions to how-to videos”

Videos are very powerful because they can convey lots of information very quickly and demonstrate features in ways that no texts or screenshots can ever come close to. It’s a bit like the difference between reading an article about how to play barre chords and just watching someone do it.

A video showing how to restore your previous Firefox session.

So there you have it! I love reading articles like the one on Desk.com because they make me realize just how far we’ve come at Mozilla with SUMO. Our support site is the result of lots of hard work by several teams, including of course the SUMO team, the SUMO dev team, and the UX team. And this year we’ll get even better — I’ll blog more about our plans for 2013 soon.

One comment on “One awesomely designed support center and what makes it rock”

  1. Swarnava Sengupta wrote on

    nice blogpost :)