Camille Brunette — Xero Pricing Pages

Xero Pricing Pages

I redesigned Xero’s pricing page to convert to signups at a much higher rate.

My role was to:

Year

• Assist research
• Define the UX
• Conduct UI Design

2016

The client

Xero provides accounting software for small business owners. I here when they were scaling up – reaching 1 million customers in the first six years.

The challenge

Use best practices in research, design and A/B testing to improve conversion of the Xero.com pricing page.

Our objective

We would track one key metric:

Number of account signups on xero.com via the pricing page.

Who was on board?

1 UX/UI Designer – Me
2 UX Researcher
1 CTO

My contribution

I conducted UX and UI Design. Our Head of Design signed off the solution.

Time frame

3 months to research, design, user test, and build. Along with other projects on the go.

Step 1

Wireframes and user testing

I explored solutions in wireframe format and tested prototypes with real customers.

Wireframes

The UX Researcher, Head of Design and I threw around ideas on how we thought the page might convert better.

I drafted wireframes for our solutions, and shared them for feedback.

User Testing

Once we had settled on what we thought were our best ideas, I created an interactive prototype that included a few different formats and interaction patterns for the pricing page.

Results

In testing, we observed that anything that was overly interactive was not appreciated. Simple was better.

We identified the two most valued options and refined these a bit further based on feedback.

Step 2

UI Design

Now that we had validated our assumptions about a better design, and had taken on board the feedback from testing, it was time to fully design the details.

Crafting UI for regions

There were a number of special offer treatments that we wished to include, and these I designed for a number of regions, including New Zealand, the UK, the USA, and Australia.

Step 3

Our A/B testing plan

After I finished design, I made a testing plan overview so that collaborating with the CTO around delivery went smoothly.

Split testing options

We would test a 2 page designs against the original page. So it was essentially and A B C test with 3 variants.

We also tested micro-content inside a pricing widget that would be displayed inside a number of marketing landing pages.

Final solutions

Take a look at the final design solutions I made that were published online and tested live in the market.

Two final variants published

Our final solution was to test a pricing page with a table against a pricing page with cards. In both cases, I designed the pages to be clear and simple, with all information included, using help tips, etc.

I established a way for users to interact with a visual device that gave clear feedback when a room is available for 1 hour, 30 minutes, etc.

A new page to capture signups

In testing I noticed that users clicked the big price on the pricing page a lot. I suggested we created a signup from from that click, which also showed key relevant information for that pricing plan. This helped immensely for signups.

Designing for in-page micro content

I also designed final UI solutions for how pricing content should be displayed on other pages as opposed the main pricing page. I used accordions to hide and show information so the main content was scannable at a glance.

The impact

We got exceptional results.

26% increase in signups

Our winning pricing page increased signup conversion by 26%. This provided an outstanding financial benefit to Xero.

New pages that convert

I had also provided a new page based on testing insight that helped to move the needle considerably.

Better experience

The pricing page was much more pleasant for viewers to use. One small win for a busy small business owner!