Linkedin        About me

Xero

MOBILE PRICING PAGE


UI design, A/B testing


The Xero pricing page was causing confusion, with a lot of chatbot and help and support tickets being logged. Customers were unsure about total costs due to the lack of clarity around add-ons and features. They also had little understanding of paid add-on features due to the lack of explanations on the pricing page. Accountants and bookkeepers weren’t being redirected to their respective pages.

I redesigned the page, going mobile first. I designed it so that the price would be calculated according to the customer toggling add-ons, reducing confusion and mental load. I added descriptions for the paid add-ons. I also designed it in a way so that differences in plans could be easily compared, optimised for the limited real estate on the mobile screen.



Two step flow where the user first selects the plans they want to compare


User testing: I conducted some quick user testing on my prototype made in InVision. I gathered some great feedback, both from users and stakeholders around the business, and iterated on the prototype to create the final UI design.


I handed over the files to the front-end developer and we conducted A/B testing on it.

Results: The new design provided a 12% uplift in sign up success compared to the default, with 99% statistical significance. Overall, users were 145% more likely to sign up for Expenses (one of the add-ons), with 99% statistical significance. 


Linh Nguyen 2018