Camille Brunette — Invoicing for ANNA Money

Invoicing for ANNA Money

I improved the experience of invoicing in the ANNA app using research and design.

My role was to:

Year

• Conduct research
• Define UX
• Create UI mockups

2019

Who is ANNA?

ANNA Money offers two main solutions to small business owners. Bank accounts, and digital tools for business admin.

The challenge

We wanted ANNA invoicing to be a better experience for our customers, but we were uncertain about which improvements and additions to focus on.

Our objective

Our aims were to:

Find usability problems and improve them with new design and build.
Test ideas with users, get feedback and decide which ones to continue with.

Who was on board?

1 Product Design Lead – Me
4 Developers
1 Product Owner
1 Visual Designer

My contribution

I conducted UX research and created UI mockups. A visual designer helped with some of the icons and components.

Time frame

2 months to research, design and build a number of solutions, along with other projects.

Step 1

Discovery: User research

I conducted research to uncover problems and obtain feedback on ideas.

Research and testing

First I learned from users where they struggled with invoicing, by observing them use the tool in the mobile app.

I recruited users and tested in the physical world – in 2019 before there were plenty of online testing tools around!

I tested concepts with customers as well, showing them prototypes of our feature ideas and gathering their feedback.

Shaing results

Within our small product team and also company-wide, I shared the usability issues I had uncovered during testing and the feedback on our feature ideas.

This helped us discover what was valued by customers, and enabled us to prioritise our backlog.

Step 2

Mockups and flows

Based on the learnings made, I began creating wireframes, UI mockups and flows, suggesting solutions to the team.

Conversation flows

ANNA’s invoice creation experience uses conversation design as an interaction model.

I wrote up improvements that engineers could work from, improving wording based on feedback, making it easier for users to create and send invoices.

Quick UI mockups

I created rough mockups using existing UI kit elements to explore solutions and discuss scope.

This example was for customisable email templates, a new feature that users had requested. I explored how to include editable copy and how to represent details that would be sent on the actual email.

Improvements

Take a look at some of the improvements made for ANNA invoicing.

Easier to create an invoice

To update our invoice creation chat flow, I showed users a Typeform prototype and documented their feedback. They were impressed with remembered items. One tester said “Oh good, it’s being intuitive now"! This helped us validate our idea.

Users had told us they wanted to add more details to their invoices – it shouldn't be too basic for them. I added the ability to include multiple invoice items and descriptions to the invoices.

I also observed users struggling to find the invoice PDF. A visual designer was managing icons and graphics, so I briefed them to design a PDF icon to add for more noticeability.

New features

Take a look at some of the new solutions released for ANNA invoicing.

Recurring invoices

In testing, I heard mixed responses regarding the value of recurring invoices. Some people felt they would be useful, others felt they would be losing too much control. However, we thought recurring invoices might positively impact customer stickiness, so we continued. Having empathy for the customer, for those that wanted to use the feature, it would be a big time-saver, not having to create repeat invoices by hand each month.

I designed the experience shown here to create a recurring invoice. I picked out simple UI controls from our design kit for a first release that would not take too long to develop.

I also suggested we protect users by creating a ‘reminder’ chat skill, to prevent any repeat invoices mistakenly being sent out automatically.

Read receipts

Read receipts for invoices rated highly in the user research. In our customer's eyes, this gives them insight to follow up about getting paid. I designed the experience that showed when invoices and reminders had been seen.

I used the word “Seen” with a tick, because it is similar to the Whatsapp approach that people already understand.

The overall solution is expressed in a timeline format, because it works well with the natural stages of an invoice, which includes being created, sent, chased, and paid.

Customisable email templates

Customers told us they wanted to be able to write their own email copy when sending an invoice through ANNA, to make sure the emails contained the tone of voice they prefer. I tested a concept with them and learned more about their needs – that they would also prefer to not have the ANNA logo on their invoice email.

I designed a new experience that let users customise their email copy and even save the text as a template.

I also designed a chat skill to help the user hide the ANNA logo and have unbranded emails. We also tested including a plan upgrade for this feature.

The impact

We optimised conversion of the invoicing flow, and we’ve had steady growth in this product area in terms of adoption.

More invoice completion

With users being able to add all the preferred details to their invoices, they were happier with the product. Our completion rates of creating an invoice end to end improved.

Feature adoption and retention

Users took up our new features including read receipts, recurring invoices, international invoices, and customisable email copy. Retention rates improved after our features were released.

A backlog prioritised

With the feedback gained on our conceptual ideas, we had better direction as a team, and knew what to focus on.