Home Resources Blog

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:

  1. What is the problem we’re trying to solve?
  2. What is the context of the current solution?
  3. How do things look and work currently?
  4. 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:

Choice Question
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.

  • Robert

    Thanks for taking the time to share this valuable piece of advice and to expand on the process. :)

  • Craig

    I’m surprised by the results of removing the faces. The time it takes to read/figure out each option would definitely be increased/made more difficult without them. It would be interesting to actually time how long it takes for users to complete the form, with and without the faces.

  • James Santilli

    @Robert No problem! Was fun to look back on the project.

    @Craig I was too. Even without the faces the copy was short enough and it was quick to read left-to-right. We felt adding the faces would only make completion longer (or hold the user up). Getting through the form quickly was very important to us when considering the opportunity at hand. I’d love to do some A/B testing eventually! I’ll put it to the team.

  • hyderali

    Nice post James!

    I’m always attraceted to post like this where the user shares his experiement with people. I really like your opinion on replacing the smiley with a tick. Infact, when i saw your first image i was distracted by smiley. But one never knows whats going in a consumers mind. The latest feedback form looks good.

  • Ryan Hellyer

    This is a very nice post. Thanks for sharing your internal design processes like this.

  • Jeff Covert

    Thanks so much for sharing how you went about this.

    It clearly demonstrates how spending time on something that may seem trivial to others can really pay off over the long run!

  • Jack

    A beautiful final product but I’m not convinced by some of your workflow… You stated that you felt the design drew too much from your site and your director encouraged you to ‘to move away from this entirely and try something new’ – but the darker theme you settled on is lifted directly from your homepage. Also, I personally find the tick icon confusing. I would expect delays in form completion due to uncertainty when people try to submit negative feedback. Obviously your (impressive) results speak for themselves but perhaps the improved performance is due to the fact that you have applied your own branding to the page and so gained the user’s trust, rather than feeling that they are being brushed off to a third party?

  • James Santilli

    @Jack Thanks for your input. This particular job moved around a lot – beginning with personality, shifting themes, becoming leaner, and so on. Getting to the end result is never a simple process as I’m sure you’d agree. I went into some detail on the journey to be transparent about this.

    I’d disagree with your comment on the dark theme being “lifted directly” from the home page. I do agree with your comment about how we “gained the users trust” with an on-brand form, but I’d like to think our decisions with the copy, design and usability played a larger part in the result :)

  • Emily Brackett

    This was great to read. I always like the back story behind a design solution. However, is there any chance you can do a true a/b split test with and without faces? So many variables changed, and this is clearly better. But I agree with previous posters that the faces were an easy read and the sameness of the checkmarks make it a little difficult to figure out.

    But doing your current version compared to a similar one using faces would be interesting.

  • Jack

    @James Santilli Thanks for the reply. I rudely neglected to add – well done for writing an excellent article about your workflow; candid and detailed descriptions of a designer’s process is an invaluable tool to other web designers like myself. I hope you see it as a badge of honour that it has managed to spark debate. My comment aimed to underline the probability of a heterogeneous explanation to your improved performance. In a case study with so many variables it is difficult to attribute great significance to any specific design decisions but not sure I would explain such a huge leap in performance by pointing to aesthetic nuances… But again, well done on a beautiful piece of work :)

  • Spiros Martzoukos

    Hi James, thanks for sharing this up!
    Can you tell us how long the whole process took?

  • Buzz

    @Spiros The design and build process took about 5 days in all – once he was briefed, James was very quick in sketching and iterating through concepts until he was 100% happy. After that (thanks largely to the simplicity of the design) the HTML cut-up and API integration were pretty quick tasks.

  • Kristy

    Really great article thanks James!
    Like the others above have posted it’s nice to gain some insight behind the scenes of where and how input was received and decisions made.
    In regards to the form itself – well I would certainly fill it out – it looks clean and simple to use so it just invites feedback which is evident in your results!

  • Simon

    Very helpful and a good thought provoker. Cheers

  • Aaron

    Have you guys considered randomising or randomly reversing the order of the choices? Would be interesting to see whether the placement of the options has an affect on which one they choose….

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free