Software businesses that offer multiple products usually use comparison tables. With good reason: They’re simple and clear to understand. But how do you compare asymmetrical products?
That’s the challenge we faced at MYOB this year. We’re in the middle of reorganizing our website, making information easier to find for millions of annual visitors. That includes our unusual comparison page.
Here’s how we did it.
A tale of two products
To understand why our solution worked, I should explain our products.
We make two accounting software products. One is a straightforward but comprehensive web-based app (Essentials). The other is a more detailed desktop app (AccountRight).
Related: How asking why can solve your design problems
Usually, smaller businesses use Essentials while bigger businesses use AccountRight. Yet, they both have features the other doesn’t. So our comparison table looks like this:
Nothing wrong with it, but it takes customers a while to read (according to our analytics). We want to speed up the time it takes to make a decision.
Understanding the product: Muddled motivations
Typical software works progressively. Basic users buy tier #1, more advanced users buy #2, etc.
But with our products, you might be a “small” business and still need “big business” features like inventory. Or, you might be a “large” business that makes $20 million a year, but only sell consulting services. So you only need basic accounting.
The crux of all this is that we can’t easily upsell users from one product to the other.
How could we possibly compare two products that don’t easily sit side-by-side?
“What users say and what users do = two different things.”
Starting from scratch
Step one: we got rid of the table. Traditional design solutions don’t always work for non-traditional products
, so we needed something new.
Instead, we started thinking about ways customers could make a quick decision. What information would be relevant for them?
The answer was pretty clear: We needed to focus on the features that would cause a prospective customer to shift from one product to the other. The answer lied in inventory and job tracking—AccountRight has those, but Essentials doesn’t.
We had our point of difference. But how could we quickly give users critical information and still show the features of both products?
Cracking the visuals
We started thinking about display. Could we just… ask users a question?
Maybe. But simply providing a list of features out of context doesn’t make sense. It could very well just confuse anyone using it.
What about a simple table that only lists differences?
Better. But it still doesn’t solve our main problem. How can we let users quickly decide on a product based on two features alone?
We needed to go bolder.
Introducing… the toggle
You’ve seen these toggles before:
We use these to switch between settings. Information, not so much.
The UI designer on our team had an idea: What if we used one to switch between displaying the two products?
Now, that approach makes an assumption—that people will know how to use the toggle at all in a new context. It’s also choosing to display one product by default, an important business decision.
We took those assumptions and ran with them.
Putting the toggle into practice
Any new design with the toggle needed to please four design criteria:
1. The information needs to be instantly comparable
First, we figured out key features that both products contained and distilled them to a core list of eight.
Then we figured out another four that apply only to AccountRight. It’s applying that “tiered” approach that a traditional comparison table would use, but in a different context.
2. The information needs to read quickly
We came up with new descriptions for the products—specifically calling out the two key features that would differentiate them. Users need to understand at a glance what they get, or what they don’t.
3. The information needs to be visually interesting
Our UI designer got to work in turning a traditional comparison table into something bold and easy to read, with iconography. This way, users aren’t just relying on text.
4. The information needs direction
To guard against users not knowing how to use the toggle, we added a clear direction: “Compare and meet your match.”
The final result
It definitely looks great—and it’s a visually interesting way of giving people the key information they need. But does it work?
User testing
According to our users, it doesn’t really work. When we put the toggle and standalone table in front of them, they preferred the table. They liked the “toggle” but they didn’t quite know how to use it.
As web designers and copywriters, we should never be attached to a particular idea. But we were pretty surprised. Where did we go wrong?
We decided to prove it to ourselves and put both the toggle and the simplified table into an A/B test. The results surprised us.
“Don’t just try and cram unusual products into an existing design solution.”
In practice
The toggle won. By a lot. In a one-month period, we saw click-through rates rise by more than 20%, and trials increased by double digits.
After the user testing, this was clearly a welcome surprise. Why the difference?
Hard to say. We think it may be because even though the toggle looks a little more complex at first, it actually does a better job of leading customers to actually choose a product, not just ruminate over a list of features. Once they’re through to the product page, the comparison page has effectively done its job.
What did we learn?
We still have a lot to do on our website (like letting users click through to feature pages from the comparison page itself).
But this test proved a couple of theories:
- Don’t just try and cram unusual products into an existing design solution
- What users say and what they do are two different things
There’s always room for design innovation, especially if your products are different from the norm. It just takes a little effort. Trust us—it pays off.
Patrick Stafford is an experienced digital copywriter and journalist, having worked at companies including MYOB, PwC and Private Media. His journalism has appeared in Rolling Stone, The Atlantic, Polygon, and Lifehacker, among others. His business, Stafford Content, provides copy for many businesses including KPMG, SelfWealth and Data Republic. He doesn’t like coffee—but loves video games and books.
