Our customer service team is the backbone of what we do. They’re our face and voice to customers. They drive the direction of our software by channeling customer feedback and ideas. So, as our customer numbers and support team grows we want to make sure we’re maintaining our high standards of quality.
Any time a current or potential customer chats with our team, a reply will include a small link in the footer where they have the opportunity to give us feedback on that experience. It’s a simple, unobtrusive and totally optional way to get that feedback from customers who want to provide it. Here’s what appears in the footer, which is automatically inserted by our help desk software:
PS. Was I helpful today? Could you please leave some feedback here, it will only take a moment [link]
When the link is clicked, we show the following feedback form. Here they can select a positive, neutral or negative rating and leave a message about their experience.
We’d been using an out-of-the-box Nicereply page for a while. It did a reasonable job by displaying faces for moods and encouraging a message with a large text input area. However, the copy needed some work as did the colour and styling. The time had come for a redesign.
Starting with a design brief
As a new member of the Campaign Monitor design team, one of my first jobs was to rethink this workflow. Our Design Director Buzz put together a design brief and we ran through the usual questions a designer might have:
- What is the problem we’re trying to solve?
- What is the context of the current solution?
- How do things look and work currently?
- What goals are we aiming for?
For this particular task, the goal was to make small improvements to the usability and copy in order to increase conversion. We also wanted to re-design the existing user feedback form to be more inline with our new branding.
Sketching out ideas
When we make something at Campaign Monitor we always try to include a bit “personality” – adding that little something that makes the user’s experience more human.
My first sketch had a focus on the support member who answered the ticket. It would include the support members profile and location in the centre with emotions floating around them. A user would select the emotion that corresponded to their dealings with the support member.?
This solution was focusing on the support member a bit too much – and might result in feedback becoming too personal and mask the real problem at hand. We needed to change focus so I looked at another sketch.
My second sketch borrowed a similar, top-down layout but fell back to a more simple UI pattern. The user would scan a list of responses and select an option that fits. There would be some feedback to show the toggle was selected and they can fill out a message or be on their way.
The straight-forward nature of the large hit-areas started to make more sense. This design would also be leaner in size (and interaction) so it would be a win for all parties involved. This was the direction I settled on and would start to explore in more detail.
The design comes together
My first user interface design closely followed the look and feel of the existing page.
I found I was holding onto too much of the existing design here. Trying to match it closely to our website was also holding me back. Buzz encouraged me to move away from this entirely and try something new.
A quick search on Dribbble allowed me to hand-pick some dark-themed inspiration. I sold the team on this darker direction and moved onto laying out a new UI.
I started the design by trying to work in faces for moods. On review, we felt the titles of the responses should receive the primary focus and the faces were just distracting from that. In the second iteration, I replaced the faces with crosses – as if you were filling out a form with pen on paper. Presented this way, the crosses felt a bit too negative.
The third iteration replaced the crosses with a tick. This felt more positive than the last version, and would be visually more interesting than just using a radio button. I put it to the team that this is how our toggle should look.
The team were happy, but there was some discussion around whether or not having a positive icon for a negative option (in the third row) made any sense. We concluded the tick is for making a selection (regardless of the case) and it was decided we would run with it.
At this point, Dave also had the idea to customise the follow up question depending on which option a user selects. Theoretically, this would encourage a more targeted response than the standard “Do you have any additional feedback?” line. Here’s what we went with:
|Positive||“Thanks. Anything else you’d like to add?”|
|Neutral||“What could we have changed to make it even better?”|
|Negative||“Sorry to hear that. How can we improve?”|
I made further tweaks to the order, size and layout of elements. Here’s the final design:
A 65% increase in feedback volume
The new feedback form was plugged in and went live a couple of weeks ago. We’ve already had a 65% increase in users completing the feedback form which has blown us away! Taking the time to make the feedback process easier and more consistent with our tone is already paying dividends.
I hope you enjoyed this behind the scenes blog post. We’ll try and do a few more of these as we see fit. I’ve also been tasked with presenting this feedback data internally in a very exciting way, but I’ll share more about that next time.