Let's Design a Feedback page…
The minute I had the opportunity to work with my team in changing Restorando’s feedback page, I knew it was gonna be great; so this is a small compilation of what I learned and why I’m proud of the process and results we achieved.
The problem: Why do we need a "Feedback page"?
Many companies focus only on how well they sell you their big ideas or services from an acquisition point of view.
In Restorando we have a different approach, we don’t only focus on that, we take care of getting to know our customers and achieve a great relationship with them.
If you ever have friction or some trouble, we will literally call you to fix it or at least to find out more about it. We really love this, we are pretty good at it and our customers really love it.
The Feedback page is a way to collect useful information about the users experiences with our product.
Research process: What requirements do we have?
After research we realized a few facts/constraints that were vital for this project to be successful:
- Users don't have the time
They don’t want to spend more than 2 or 5 minutes answering this questions. - Some users don't feel it's important
Many users don’t answer feedback questions because they don’t know why it is important for them. - Some users will drop the page anyway
Many users close the feedback in the middle of it, due to frustration, laziness, cell phone signal o just because. - The feedback page will eventually change/grow
We need a way to make a project that can grow in questions in a relatively easy way. - Embrace complexity
We need to be able to have a more complex logical structure, improve the user experience and ask questions in a smarter way.
Design process: Mixing constraints and solutions
As we researched about it, we came up with an amazing idea: split the page in steps so that it can grow in questions if needed, and also, give the user the possibility to drop or skip steps whenever she/he wants.
Wireframe state
First Wireframes
At first we want to communicate many contextual information to help the user to remember her/his experience. After some research, we realized that despite that we thought, most of our feedback responses came less than a day from the actual dining moment.
A more focused approach
So we “trimmed the fat” by focussing on showing only the main information: Restaurant info, reservation info, and the current step/question to answer.
High fidelity state
Card design and navigation
We took the card approach because it gave us a recognizable pattern of a container for each question. For the navigation, we force the user to make more interactions, because our main users are middle aged that need more navigation control.
Card animation
Animations are really tricky! They need to have a reason to exist, you don’t want a low performance interface just because you added a lot of cool animations. Each animation gives feedback to the user and lets her/him know what she/he did or what she/he has to do.
We want to let the user know if she/he was going forward or backwards on the flow. It’s really subtle but it gives a sense of movement that keeps the flow agile.
Navigation animation and states
We realized that we needed navigation styled states that guided the user through the possible actions. We divided this steps into: “Main active action”, “Secondary action” and “Validated/focused action”.
- Main active action: Lets the user know that she/he can skip the step but doesn’t encourages him too much on doing it.
- Secondary action: Lets the user know that she/he can perform this action but with low visual hierarchy.
- Validated/focused action: Encourages the user to keep going on the flow. (with a really cool css animation ❤)
Clickable and simple answers
Users don't want to spend much time in each step, so every type of answer must be simple and easy to use.
Implementation: REACT
I’m not gonna write about the actual implementation.
I'm only going to mention the awesome work of @JoaquinStankus on doing it. If you want to know more details about the REACT implementation of this Feedback page please checkout Joaquin Stankus post about it!
Joaquin Stankus : coming soon…
What can we learn from this?
- Feedback pages gives us new information that can be useful for many areas in our company.
- Learning from the user feedback lets us grow near your user, that way you'll be always thinking in him before ourselves.
- Take some time to know your users to be accurate in the way you ask them for information.
- Compare your ideas with data to be sure about your decisions.
- Be bold and simple, you can't ask for much time.
