Process

How MYOB solved a key asymmetrical design problem

by

on

View all posts

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:

Asymmetrical design problem

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?

Asymmetrical design problem

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?

Asymmetrical design problem

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:

Asymmetrical design problem

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

Asymmetrical design problem

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.

Read more posts like this
Author

Patrick Stafford
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.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.

Follow us