Helping the Help

Mid 2018
Zattoo

TL;DR Redesign of a Customer Service page; Data-dive to Understand the Scenario; Mini Design Sprint; Highlighting what Matters; Zendesk Templating

Live at: support.zattoo.com ⇲

Discover

Something Will Go Wrong

Designers are constantly trying to make complicated things less complicated so that users don’t fall into experience traps that lead them to frustration — sometimes we fail.

There’s absolutely nothing catastrophic about it but when it does happen, we are not the ones that come to their rescue: Customer Service professionals are 🦸.

On this project, we wanted to understand which kind of journey our users in distress usually go through, and what we could do to ease the frustration of not having something working as it’s supposed to.

The old state of the Customer Service page
Understand

Talking to the Experts

Naturally, the best way to gather qualitative data about possible use cases was to partner up with the Customer Service team and get some precious insights from the experts on that matter.

On the top of that, we also analysed raw data from several sources:

Google Analytics

Zendesk Analytics

Heatmaps & Scrollmaps

Stakeholder Interviews

Heatmap and Scrollmap
Define

Focusing on What Matters

To be able to make fast decisions, we design-sprinted our way through the scenarios and major areas of improvement that we wanted to address.

Once the usage patterns were understood, we reshaped the information architecture around them and, as a result, we decided for dividing the main page into 4 major clusters:

Account Help

Something is Broken

Tips

Help per Device

Art Gallery: Results
Art Gallery: early stages
Design

An Exercise of Empathy

To best represent the new distribution of elements defined on the previous stages, we went through a handful of low/high definition prototypes until we settled for one that would be suitable to our needs.

When defining the visual language, we pledged to the understanding that users go to the customer service page not because they want to, but because they are in a moment of need. With that in mind, we opted for a color palette and imagery that would convey a strong sense of safety and reassurement.

Improvements on the Spotlight

All-You-Can-Need

The prime spot of the main page was used to display a curation of topics that covered the majority of issues experienced by our users

Better Search

We improved the search field with instant results and also set that as the selected element by default so they can start typing right away without the need of clicking on the input field

We've Got Your Back

We optimised the look and placement of customer service contact options, such as Email and Chat

Tomato, Tomatsumlorem

We revised the copy in favour of a more human-centric way of speaking instead of intimidating and super technical jargons

Learnings

Design Sprint + Data = ♥

  • The quantitative data available helped us tremendously on the validation of concepts
  • The sprint format allowed us to iterate quickly and make fast decisions
  • Further research indicated that the funnelling of clicks/taps worked exactly as we intended to
  • I underestimated how long it would take me to read Zendesk’s documentation so I could code for it
  • It’s really tough to measure the short-term efficiency of the changes we make due to the seasonal nature of people seeking for help