Redesigning Usabilla’s Feedback Form
One of the coolest experiences I’ve had as
’s Product Designer is seeing the feedback form I designed live on some of my favorite brand’s sites.For instance, I use Europcar quite often. For a recent road trip through Italy, I went on their site and I was able to click on the Usabilla feedback button and see my design! It always makes me happy to see the form that fits their brand look and feel.
I’m also a huge fan of MailChimp for my personal projects. They have an amazing implementation of the new Usabilla feedback form.
Usabilla allows our customers to collect feedback across multiple channels: apps, web, email, in-page feedback, slide-outs, full-screen surveys, links to recruit participants to longer surveys, as well as general feedback.
We offer many ways to collect feedback, which all use some version of a feedback form. Previously, the design of the form varied across the channels (email, web, in-page, and mobile). It was about two years ago that I was given a great task to create a fresh, unified new style for the Usabilla feedback form.
Challenge accepted!
Here’s how I unified and redesigned the feedback form:
The Usabilla feedback form is the heart of our solution. It is the way end-users interact with Usabilla and provide their insights to our customers. It has to be smart, user-friendly and beautifully designed.
We are all about unification lately, because it really doesn’t matter where your users want to leave feedback, the experience should always be the same.
Why? Well, unification elevates the feedback experience by providing consistency and fluidity to the end-user. Consistency in the digital experience is paramount to the end user’s satisfaction, encouraging them to leave feedback again because the experience was easy to use regardless of channel.
Imagine one user–let’s call her Rita–finds a bug while booking an appointment online. She initially leaves feedback about it via Usabilla’s feedback form. After her appointment, she gets an email with a link to a post-transaction survey measuring her satisfaction. Later, she opens the company’s app to look up an article and finds an in-page widget. All of those various forms for Rita’s feedback have to look and feel like the same experience so Rita has a simple and rational experience that makes her want to leave feedback again.
Unification and Customization
Because our software is used by various customers across their digital experiences, it’s important that they can customize all surveys, widgets, and forms to appear in the same quality. They can adapt the colors, shape, font, logo, etc. to fit their brand guidelines, language, and philosophy.
Sounds easy enough, right? So then, why was this such a huge challenge?
We had to balance customizability to fit brand needs without losing Usabilla’s user-friendly look and feel and we needed to prepare for a plethora of limitations in our design choices. Animations needed to be very light, designs had to display in a wide variety of browsers and devices, while also staying accessible and highly customizable.
Before Redesign: Gathering Feedback
As part of the refresh of the feedback form, I decided to give the Usabilla smileys a fresh and modern look. Smileys are integral to understanding customer sentiment. TNW reports, scientists have discovered that when we look at a smiley face online, the same parts of the brain are activated as when we look at a real human face. Using emojis in our feedback forms allows end-users to easily leave their sentiment.
I browsed through the countless number of emojis out there and analyzed the range of emotions users feel about digital experiences in order to find the most representative smileys.
Then, I sketched different smiley options and sent out a randomized survey asking all sorts of users which smiley best represented which emotion, and which emotion best represented unique digital experiences. For example, does a bug at checkout make you sad, angry, or frustrated? Which smiley best describes that feeling?
We made sure the smileys were also globally understood as we operate in 139 countries. What looks like “angry” for one culture might be completely different in another.
Lastly, the smileys needed to work in every color that fit the customer’s brand.
Once we gathered feedback on the new feedback form smileys, we were ready to tackle each challenge in unifying the design.
Limitations and challenges in redesigning the feedback form
Challenge 1: The new design needed to cater to over 450 customers and fit each brand’s unique needs.
Solution: Design principles for color, font, and style.
Colors
The customer is able to choose the background color, text color, button color and the accent color that is used in all the form elements. Still, I needed to have some base colors for the elements like different shades of gray that could be used for the borders and shadows that would work with various background colors.
Fonts & Sizing
In order to allow customers to choose their own font size, I used an EM ratio that would keep a consistent relationship between the titles and the text based on their preferred base size. Still, I pre-selected an input font with a fixed size to optimize readability for the end-user — that was something we couldn’t compromise on.
Style
One of our design principles is playful, which is a huge part of the Usabilla brand and personality. I wanted to keep that by using micro-interactions and animation.
In order to achieve the perfect balance between too much animation (there is such a thing and it can be very disruptive!) and a bland, unengaging amount of animation, I defined some guidelines and personality to the animation behavior.
The process of giving feedback should be as natural as a flow of conversation. It needs to be clear and straightforward, avoiding unnecessary movements. I aimed to make the process of leaving feedback fun and playful but not silly. The behavior should feel human, the movements aligned with the laws of gravity and all the interactions made with the same logic.
My main objective in using micro-interactions was to guide the user to the next step and to show the relationship between elements.
Also, to facilitate customizability I designed two default visual styles, a playful rounded corner style, and a serious look and feel with sharp edges.
Challenge 2: The design needed to address accessibility best practices with each element of the new feedback form.
Solution: Consider and update established principles of accessibility at the beginning of every new design.
At Usabilla, we believe all users should be able to leave feedback on their digital experiences and so do our customers, which means we need our platform and our feedback forms to be highly accessible. After all, you can’t be truly customer-centric when excluding 15% of the world population.
It’s one of the many roles of a Product Designer to watch out for users with disabilities in each step of building a product. A developer can make accessibility work, but it’s the Product Designer that must first think about it. That is, if you want to do development on a design that’s not accessible, it simply won’t be accessible.
Accessibility is an ongoing effort, and can always be improved. To read more about how I designed the new feedback form with accessibility in mind, check out my second article in the Design Series, outlining the ingredients for accessible design, including color contrast, keyboard navigation principles, semantic HTML and more.
Challenge 3: With clients all over the world and over 500 million feedback items processed per day, adaptability was critical.
Solution: Emphasis on consistency, responsiveness, and RTL Reading.
Maintaining Consistency
The two things I had in mind with every decision I made was that I had to redesign 11 components that appear in 6 types of forms across all the different channels of feedback collection.
You might be thinking: wait, what? Let me explain. Our customers have quite some flexibility in designing their feedback forms, picking and choosing which elements they want to include across their various channels. Elements included mood score and star rating, NPS and rating score, tags, text input field, dropdown, radio button, checkboxes and more. I had to keep in mind the relationships between various elements in the feedback form, and how forms differ on apps versus desktops so that everything would flow together.
Note the micro-interactions here. Subtle yet playful animations add engagement and fluidity to leaving feedback.
Responsiveness
Usabilla’s software is used globally by over 450 brands. That means our product has to work with very different browser types or digital experiences. Think Mozilla Firefox, Google Chrome, Edge, Internet Explorer, Safari, and more. The form has to be extremely responsive to different digital environments. As a designer, it’s a welcome challenge as it presents a new set of digital principles to follow.
RTL Reading
Some of the brands we work with use RTL type instead of standard English left-to-right (LTR). Luckily for me, I speak Hebrew and am very familiar with RTL reading. My background definitely helped me design for this facet of adaptability in redesigning the feedback form, as I kept RTL reading top-of-mind in the design process. That way, we never had to go back and make changes to the design for different clients, the new feedback form seamlessly rolled out and was adaptable to any language reading type.
Some last thoughts
The feedback form is where Usabilla meets “face-to-face” with the end-user, allowing them to leave their thoughts, opinions, and insights for the brands we have as customers. I was so excited to take on this project and design an even better feedback form that facilitated seamless feedback collection. The new form has been live for 2 years now!
As a company whose software is dedicated to making user experiences more human, more engaging, and more seamless–customizability, accessibility, and adaptability are paramount to our design.
If you’re a Usabilla customer and haven’t updated your feedback form to the new theme yet, get in touch with your CSM to get on board!
To read more blogs in the User-Centric Mindsets Series, click below.
This is part 3 of the User-Centric Mindsets Series (read part 1, 2 and 4).
