Design is both art and science. In this longer read we’ve got Starred UX Designer Mac Kozal sharing his research insights and creative process from the Feedback Form redesign.
We put a quote of Ken Blanchard at the bottom of our webpage: “Feedback is the breakfast of champions.” We want to make this breakfast more delicious for Starred users. In practice, this means we want to provide even higher response rates. That was our starting point for the long journey of redesigning the respondent experience. We also decided we won’t make any upcoming changes obligatory to users at first. They can adopt the new version if they want, and A/B test with the existing Starred feedback form.
Our ambition is to make feedback fast and fun for respondents on any device, in any country, within any context. If the survey form is short and sweet, it’s more likely that someone will make the effort to fill it out and submit it. It’s a serious challenge. To make it easier to execute, we set up 3 design rules before we even started sketching the first solutions:
- Put the respondent first
- Build on knowledge, not assumptions
- Easy access on any device
When we introduced the current Starred Respondent Feedback Form people answered most surveys on desktop devices. Right now, the proportion is quite different. Desktop computers are still super important in many cases. The majority of respondents use them as input devices during working hours. At Starred we’re also working with companies whose respondents will use mobile devices to give feedback two times as often as desktop ones. We expect we can increase user satisfaction and survey completion rates by equalizing the importance of both input devices.
Nowadays people use mobile devices at least as much as desktop devices to give feedback, and in many case even more.
Research & Design.
We initiated the redesign process with solid preparation and ensured we would be well-organized throughout. We measured and checked how people use our feedback form, and we examined Google Analytics. These studies, together with sentiment feedback from respondents, gave us a clear indication of what people were missing in the current version.
Respondents are happy with the ease of use of a Starred feedback form, but they pointed out it would be great to have bigger fonts and clickable elements, especially on a mobile version.
With this knowledge, we sat at the drawing board and began with interdisciplinary brainstorming and sketches. This approach allowed us to check and verify a lot of ideas reasonably quickly. Without forcing ourselves to design on a computer we felt free to experiment and find more interesting concepts.
A few initial sketches and explorations
When we became confident with our ideas we moved our design to computer programs. We published the first prototypes to check which versions performed better, and why. We made a lot of iterations of design solutions to be sure we’d choose the right one. We included a lot of small tests in our process. We proposed two solutions and asked users to choose which one they liked more. We didn’t want to forget we design for people and we care about their opinions.
One of our preference tests. We wanted to check which icon performs the best in representing the action of adding a comment.
Another of our tests. We wanted to check the readability of text on different backgrounds.
The design for the mobile version was quite straightforward for us. When we established our design principles we started to work on a desktop version of Feedback Form. Initially, we transferred the mobile design to bigger screens to check how it performs. In the first place, we weren’t satisfied with the result. Something was missing.
One of Starred’s promises has been to deliver surveys which fit on one single screen. This simply couldn’t be fulfilled with bigger elements and bigger fonts. During one discussion a rather radical idea appeared. Why not experiment with a version of the feedback form where users see only one question at a time? This was a big thing for us to deliberate – changing one of the unique characteristics of Starred.
We resolved that we would only take this course if it would benefit our users. Our promise to put the respondent first would still be the guiding principle in any changes to- or new features on Starred. We made a list of advantages and disadvantages of two versions and prepared two prototypes to test them among respondents.
Advantages of both versions taken from usability testing
We did both quantitative and qualitative user tests. We arranged appointments with respondents and a research expert. The results of the usability testing were clear. 70% of respondents preferred the version with one question per screen. They felt more confident when they saw a smaller amount of information on the screen. The majority of users think they can concentrate more on the questions and give better answers. Thanks to an animated progress bar they can estimate how much time do they need to fill the whole feedback form.
User preference: Multiple questions per page vs single question per page
We used a data collection technique called ‘Rainbow Matrix’ to effectively collect feedback from our respondents
We collected a lot of good feedback from our usability studies and we decided that we wanted to get the first version live. It needed to be responsive, animated and fun to use for respondents. We’re going to set up the first version as soon as possible and we will be upgrading it based on feedback and metrics from our clients and respondents.
We have an intention to provide a superb experience for our respondents. To fulfill that we came into a few principles that our feedback form should comply.
We’re proud to present the upcoming redesigned respondent feedback form. Let’s dive into how the design rules and testing we did is reflected in the new feedback form.
New Feedback Form on a laptop.
Similar experience regardless of screen size.
People use a lot of different devices right now. We aim for delivering the same experience regardless the computer or screen you use. Content should be readable and crisp on all of them. A user needs to be able to utilize every available function without extra effort and unnecessary thinking.
The card design principles are the same for all screens.
The general feeling of the survey remains the same on every screen size.
New Feedback Form on a small laptop…
…and on a big desktop computer.
The mobile version on a phone…
…and on a small tablet…
…and on a large tablet.
Controls are reachable and noticeable.
All controls and touchable elements should have the proper size and spacing to manipulate them with ease on every device. No one likes the feeling on mobile of wanting to perform an action, and the button being too small to handle..T We redesigned all the controls to make them easier to use and give instant feedback to the user.
The new grades design on bigger screens.
On mobile devices, a tooltip shows when you start dragging a scrollbar so you can always see the score, even if the indicator is covered by your thumb.
Layout with a good rhythm that supports the communication of the content.
We used a grid to support a vertical rhythm. A careful use of spacing between card elements creates a good vertical rhythm that supports the communication of the content hierarchy. A user knows what is the most important and what is expected of them.
One of our screens with the grid system projected on top of it.
Colors highlight information
Colors can convey information, especially in feedback. Colors can be very subjective, culturally- or even personally dependent. Using specific tones can help convey an overall impression. Our purpose was to make a clear division between positive and negative feedback, including taking account of color blindness.
A test we carried out to visualize how people with different kinds of color blindness see our color schemes.
A color preference test.
Subtle micro-interactions for a clearer and more enjoyable experience for the user.
During the usability tests, users told us they would like to see animations and microinteractions in a feedback form. Studies also suggest that good implementation of microinteractions inspires positive emotions, creates pleasure and increases happiness.
A transition between cards. The progress bar on top of the screen gives a clear indicator how much of a survey is already solved.
ed and they can concentrate on the comment itself.
We implemented enjoyable transitions between smileys.
The change to the new version will not be obligatory for our clients. We want to ask them first if they want to try the new version or keep the old one running. We want to learn from feedback more to make the future improvements and adjustments tailored exactly to our users’ needs.