Business growth thanks to a 2-way data sync
What do you do if you want to make syncing between two systems as easy as possible for your customers?
Billhop wanted to make it as easy as possible for their customers to pay their Xero invoices with credit cards. Not all suppliers offer the option to pay with credit card, but thanks to this integration, it would be made possible. Billhop is a company that enables credit card payments to suppliers that only support invoice payments. Xero is an accountancy platform where customers can create and pay invoices, besides managing their bookkeeping. During this project I designed both the payments and connection experience. This case is mostly highlighting the connection experience since that was were most of the complexity occured.
3 months
Duration
Main designer in crossfunctional team
Role
Billhop AB
Company
Problem
It was important that the data between Billhop and Xero would be in sync, so that the customer could easily import new invoices to Billhop and see updated payment statuses. Another requirement was to ensure the initial connection was done properly. For example, payments could only happen if the customer connected their credit card to both Xero and Billhop.
When I started on this project, engineering had already built a placeholder UI for me to start working from. When assessing the quick fix implementation it was clear that it needed a progress indicator so we could better guide the customer through all the connection steps.
Discovery
Since the integration between the two systems was quite complex, it was important to map out the different flows and do a competitive benchmarking analysis. The mapping of the flows was particularly helpful to determine how we would handle the log in credentials of a customer. if a customer was not yet logged in, we ensured we would handle that case and then route them to the connections page to continue their job to do.
Iterations
During this project I experimented with the 'Ditto Words' Figma plugin to manage the copy. It is a helpful tool that allows for easy collaboration through comments and a version history. I collaborated with the copywriter to finalise the different strings across the touchpoints. One of our goals with the copy was to limit the amount of technical terms and keep the strings as concise as possible.
I also validated the design with moderated usability testing with accountants whom we managed to recruit with the support of Xero. I created a script and high fidelity prototype to do the testing and documented the feedback. Most feedback was around the copy and not the flow, which I assessed and actioned together with the copywriter. One concrete action we took was to closer align certain terminoligy with terms specific to the Xero ecosystem.
Solution
The final solution had to cover a lot of different states. I wanted to make sure the customer had the freedom to skip steps when connecting, so they could first explore the Billhop platform if they wanted. We expected many new customers from Xero, thanks to a planned marketing campaign, so there was a large chance that Xero customers would see Billhop for the firs time. Letting your customers explore your product first, before commiting to share senstive data like invoices is a way to increase the trust levels.
The final solution had a clear progress and status indicator for the customer, so they knew what was expected from them during each step in the connection flow.
Learnings
Most of my time was spend on the "unhappy" paths, due to the freedom I wanted to give the customers. Since they could go anywhere, I had to ensure they could pick-up the connection flow from anywhere in the Billhop system. Allowing customers to explore is one thing, but it needs to be made very clear which functionality is awaiting the completion of the connection flow. Otherwise customers might question the platform functionality, instead of understanding that some things are not unlocked yet.
