If you’ve been reading the Recurly blog lately, you know we’ve been rolling out some updates. Thanks, in part, to the growing design team at Recurly, we’ve updated the marketing website design as well as refreshed the subscription creation process flow. Most recently, with the introduction of manual payments, we rolled out an updated interface to invoices in the application.

In light of the effort we put into the invoice changes, we’d like to share some of the goals we had in mind and the process we went through as a design team in approaching this work.

The Design Challenge

We knew the existing invoice view was problematic. Not only was it confusing and difficult to scan and understand, but it had not been built with the future of manual payments in mind and was already pushing the limits of usability. With the integration of manual payments and invoice billing we were going to be adding more information and controls and needed a structure that could scale.

The old invoice detail view

In the past, the invoice detail view primarily served to show merchants invoice line items and whether the invoice had been paid. With the new features, the same interface would now also have to handle:

  • Differentiating between automatically collected invoices (credit cards and PayPal) and manually collected invoices (checks, wire transfers, etc.)

  • Recording payment details for a manually paid invoice

  • Marking an invoice as failed to stop collection and dunning emails

  • Allowing downloads of the updated invoice PDF design while still temporarily providing access to the current design

In redesigning invoices, we needed to incorporate more information and add a number of complex interactions, while at the same time simplifying the interface and not overwhelming the user.

The Approach: Working Lean

As one of the first large projects our growing design team has tackled, updating the invoice view and integrating manual payments provided an opportunity to implement aspects of the Lean UX methodology in which we strongly believe.

The primary tenets we incorporated in this case were, and continue to be, working iteratively with cross-functional teams and reducing the time spent on static visual assets.

Our work began with a number of whiteboarding sessions to flesh out the assumptions related to the design work as well as identify the information and controls we needed to display. The result of these sessions was a clear understanding of the various use cases for which we were solving and the relationship between the information displayed and the actions users take.

Whiteboarding the necessary information and related actions

In order to limit the time and energy spent creating static Photoshop mock-ups, we moved quickly to sketching and whiteboarding a variety of interface solutions followed by discussion and debate with the various cross-functional team members. From there we moved quickly to low-fidelity wireframe prototypes to test out various ideas and gather internal feedback.

Whiteboarding initial interface concepts

Initial Iterations

The initial solutions focused on just getting the new information and interactions into the interface. While this got us part way there and required few clicks, it attempted to force too much information into a single pane creating visual noise and an ambiguous prioritization. Additionally it was not extensible in a way that would allow us to add more information or controls over time.

Initial designs with too many options

Eventually we moved to a more tabular system allowing related actions (and information) to be grouped within a particular tab. This approach helped reduce visual noise, but didn’t scale well when tabs were added or removed.

The initial tabular solution

The Solution

Ultimately we settled on a collection of expanding and collapsing drawers stacked vertically on the left with the invoice details on the right. This stacking metaphor allows for an unpredictable number of items and can grow or shrink given the state of the invoice. Additionally, it separates the available actions (and actionable information) into the left column while the static (read only) information related to the invoice content is all on the right.

Updated invoice layout

Using sensible defaults, the drawers are ordered and automatically opened to the pane of most relevant action to the merchant for the selected invoice. For example, an open unpaid manually collected invoice defaults to showing the “Record Offline Payment” panel so that a merchant can quickly enter payment details and apply the payment to the invoice, whereas an automatically collected payment in a past due state, opens with the option to easily attempt another collection.

Final version with stacked expanding and collapsing drawers

As with any interface design there were tradeoffs related to the solution we settled on. In this case, the most necessary and important actions are visible immediately on viewing the page and secondary actions are one click away. While this requires additional clicks to access certain functions, it greatly limits the overall visual noise.

Polishing

When this particular solution was selected, the engineering team began to implement the code in the application while the design team polished the final interface. With the growing design team, we’re taking advantage of the opportunity to introduce updated styles and visual language when redesigning significant portions of the application.

The last year at Recurly has been largely focused on infrastructure upgrades and other mission critical improvements (like SAS 70 Type II compliance and an additional data center). However, with the growing design team we've begun to think through the future of the app (and the brand) and introducing new styles, elements, and colors.

These visual updates are most notable in the recent changes to the marketing website as well as the monthly newsletters. There you’ll see a new color palette and a flatter, more subtle aesthetic beginning to take shape.

The new invoice interface begins to introduce some of these more modern touches: subtler gradients and drop shadows as well as brighter colors and playful animations. At the same time, for the sake of familiarity, we’ve retained other common elements such as the rounded purple buttons for primary actions and grey buttons for secondary.

These visual changes indirectly affect the functionality of the various information and controls, allowing the interface to feel cleaner, brighter, and less distracting, enabling users to focus on the tasks at hand quickly and easily.

Final updated visual design

During this final phase we worked through a number of remaining questions and introduced helpful interactions and visual appeal often difficult to demonstrate in static mock-ups. As we moved through a beta release and towards public launch, design and engineering worked closely through the final touches, sitting side-by-side, tweaking and adjusting.

Moving forward, of course, we’ll be actively monitoring usage via event tracking analytics to see where and how users are interacting so that we can continue to streamline and improve the invoice experience. Design work is never done and we’ll keep making improvements to this interface to provide our customers with the best Recurly experience possible!

We welcome your feedback on these and other changes you’ll see in the coming months. Please don’t hesitate to post a comment or reach out directly to us at support@recurly.com.