Situation

After 10 years of development, FreshBooks’ code stack had become outdated and unmanageable. This created a major inhibitor of progress for both engineering and design initiatives. In order to remain competitive and deliver the best possible experience for its customers, FreshBooks committed to a from scratch redesign focusing on a modular, scalable UI system. My team and I were responsible for the ‘payments’ portion of the redesign.

FreshBooks’ Admins often receive cheques from their clients as payment. Before building the infrastructure for credit card payment systems like Stripe, Paypal etc. the team sought to create a low dev effort, high gain solution that gives FreshBooks Admins the ability to manually add payments of any type.

Task

• Research and design a method for admins to manually add and modify invoice payments
• Design a method for Admins to manually enter payments against the invoices that they have created internally or have sent out to clients

Action

Design Considerations

After reviewing key issues, goals and supporting research with my team's PM, I began sketching out key interactions.

Research indicated that 90% of the time, clients pay in full, with the most common payment type being cheque. To save Admins time, we prepopulated the preset payment field with the amount required to pay off the invoice in full.

Result

• Surfaced a clear narrative for Admins that let them know the result of their last action, and what they should do next
• Provided smart presets alleviate repetitive actions throughout the payments process
• Established satisfying product hooks that reward Admins for taking key actions within the payment cycle