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 ⇲
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.
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:
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:
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.
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
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 optimised the look and placement of customer service contact options, such as Email and Chat
We revised the copy in favour of a more human-centric way of speaking instead of intimidating and super technical jargons