Recurly

Credit Invoices

UX Research + UI Design | Apr 2017 - Dec 2017

Recurly is a B2B2C subscription management platform that allows  merchants  to manage everything from plans and coupons to customers and payments. Recurly also provides invoices, emails, and account management to merchant’s end customers.

The business goal of my first project at Recurly was to align with accounting best practices and issue credits on their own documents. This would involve changes to every aspect of the app, including multiple workflows, as well as invoices and end customer emails.

Check out the final design →

Research

Armed with initial information from the feature request in Salesforce, I worked with the product manager to determine an initial list of questions that we had for merchants. We grouped these questions into a script so that we could skip around as the conversation flowed, and scheduled 6 interviews with merchants who requested the feature.

Our goal was to learn as much as possible to start work on the project, and then follow up with targeted learning during each testing phase. To start, we needed to know the scenarios that credit is offered, as well as what was expected of this new credit document. Not only did we learn this, but we learned how tedious the current process is.

Research Insights

Initial Design + Pain Points

Add Credit
  • - Initiated from account page
  • - Credits must be added one at a time
  • - Form fields are not displayed in alignment with user's mental model
  • - Credits are extremely difficult to track: they are included when generating an invoice, used, and any remaining credit is added back to the account as a new credit to be picked up

Design Exploration

Design Goals

After meeting with the rest of the team to discuss research findings and design goals, we decided that due to technical limitations and timeframe, I would only make minimal structural changes to the invoice design.

Invoice Exploration

On the invoice, I focused on information hierarchy and cleaning up the visuals a bit. Since users thought of credit memos as”negative invoices”, I designed a system with 3 types of invoices: normal charge Invoices, credit invoices, and refund invoices, which are a special type of credit.

Email Exploration

Emails are customizable and vary across merchants, who may wish to display multiple optional pieces of information, such as PO #, a link to view the invoice online, or additional subscription information. So I  had to design for over 45 use cases across 13 customer emails. I researched a lot of ticket and receipt design, drawing inspiration from years of high-density information display in digital and print.

User Testing

Since this was such a large project, we split the design and testing into 3 phases. This way, development could begin on Phase 1 as I moved to Phase 2 and built upon the system.

Test Phases
Phase 1: Add Credit + Invoice Design

Once we had an idea of the types of things we wanted to learn for the first phase, we decided to reach out to the top 8 credit creators in the app for testing and feedback. We were primarily testing for two things: the new add credit flow and the new invoice system.

Task 1: Add 2 Credits to an Account

I designed our tasks to cover multiple objectives from different angles. The first task was very open - to add two credits to an account - which allowed for multiple paths and options. I prototyped these options, and made sure to follow up after the task to learn about the options the user skipped over.

Task 2: Investigate a Subscription Change Scenario

The second task was to investigate a downgrade scenario. This is a very common occurrence for merchants, in which a user switches their plan mid-cycle, resulting in a partial refund for the previous subscription and a prorated charge invoice for the new subscription.

For this task, I wanted to test the new transaction history and subtotal sections, which show how credits and refund credits are used, as well as where they came from.

Test Results

Testing allowed us to validate our document system and confirm that the distinction between invoice, credit, and refund made sense to users. We also got a lot of positive feedback about the workflow and contextual improvements.

Testing went so well, in fact, that I gave a crash course to user testing presentation to the entire company.

Feedback from Users
"
YAY! You can do credit memos! We previously had to use Quickbooks.
"
The refund invoice tells me the story perfectly.
"
The note makes crediting 180 people for an out of stock item a lot easier!

Final Design

After each round of testing, I incorporated new findings and changes based on feedback and test results. Besides the new invoice system, I combined add charge, add credit, and issue refund steps with the creation of the appropriate invoice. The final design both simplifies and speeds up workflows in the app, resulting in a much improved user experience.

Issue Refund
  • - Clear options to refund by line item or amount
  • - Proration option moved from line item-level to refund -level
  • - Account note incorporated into the flow
  • - Ability to preview and edit the refund
  • - Addressed special use case to provide a refund for an invoice that was paid with credit, if the credit can be traced back to a cash payment

Learnings