Creating a product like Helio is an incredible experience. One moment you’re flying high brainstorming possibilities, and the next you’re grinding through bugs trying to figure out why your new feature works totally fine except for iPad iOS 12.9. Then you release and do it all over again, the reward, of course, being when what you’ve been working on helps people.
We added Rank Order questions to Helio this week, the newest feature in our summer launch party, following MaxDiff. As they say, it’s not about the destination, it’s about the journey. That’s exactly what product design is a journey. We’ll never be “done” building and improving Helio and we’re happy to have you on this journey with us.
In speaking to our customers, we knew that Rank order questions ranked high on our list to produce this summer. Folks that conduct remote surveys were looking for the next steps of learning after some initial research has been done. This could be asking participants to rank items or features based on their preference or what they deem important. This differs from MaxDiff because you’ll gain insight into the spectrum of their preferences. Pretty awesome stuff.
The Journey was fraught with danger ⚔️
When we set out to build Ranking within Helio we wanted to bring a way to open up possibilities for researchers to collect more signals that create a clearer picture into the distribution of choices over an array of items.
In building Rank Order questions we had to make some tough decisions in order to make it great. We had so many suggestions on how people would interact with the questions, drag & drop being the most popular. Ultimately, the choice to not create a drag and drop experience was hard but necessary because it didn’t align with the three tenets that we felt was the most important for our customers:
Helio is:
Fast
Scalable
Mobile-friendly
For this iteration, drag and drop would not hold up to those tenets. Here’s an early idea of what drag and drop looked like.
The idea here was that participants would drag the toppings and drop them in the order from “Best” to “Worst”. We even attempted to pair drag and drop with a number input, but instead of this making it easier things got a little more complicated. There’s a lot going on and becomes confusing for the participants. This version is also not mobile-friendly, it’s pretty much the opposite. This is our mobile-unfriendly version.
Button? Button? Who’s got the radio button? A radio button matrix was another version we explored. They’re great because radio buttons are really common in surveys so participants understanding how to respond isn’t an issue here. They’re also easy to build and we could have built off of our MaxDiff component. The drawbacks here are that even though this is a pattern people have seen in surveys it is visually overwhelming and even with five choices, takes up a lot of screen real-estate. Bringing us back to the mobile-friendliness We moved on from this iteration.
We then attempted to simplify the rank choices by adding a stepper to the list item. This version is easy to understand and interact with and is mobile-friendly because participants are asked to tap the arrows to position their choices. The drawback here is that in order to submit or move on to the next screen the participant would need to interact with the list, so for example if the rank order list was presented in the way the participant would have selected, they would need to move an item and then return it to its spot in order to move forward. That’s not user-friendly and could really skew the data being collected because not everyone would move the item back. It’s also not super friendly when it comes to larger differences in placement. If pineapples are a #1 topping for someone, they’d have to tap the pineapple arrow “up” 4 times, along with all the other toppings to get them in the correct order. That’s a ton of taps, so we moved on.
We then arrived at what you’ll experience for yourself in Helio, the tap! We found that asking participants to “tap” items into the order they preferred was really easy for them to understand and interact with. Although, reordering items with drag and drop would have been the easiest method. We’re already looking at what the next iteration could look like by adding reorder arrows or something else that makes changing an answer easier. For now, we’re really proud of our take on Rank Order questions, it’s fast to take, easy for us to build and scales and best of all, it is mobile-friendly.
Top of the mountain 🚩
We really hope that you enjoy Rank Order questions in Helio and would love to know what you think. We’ve made it easy to give Helio a try with our open audience link. With our Conversion User Test Kit, you can see how you can improve your products and give Ranking a try!