Skimmer Invoicing and Payments Design Case Study

Skimmer is a web and mobile application SaaS for pool service businesses. It enables pool businesses to support service techs in the field of pool cleaning and maintenance and allows them manage their business with customer invoicing and payments.

Challenge

The challenge was to design and build an invoicing and payments feature already in alpha development. This required integrating new design patterns with existing good patterns while addressing a few poor design patterns. Working with product management and utilizing user reasearch, the remainder of the work centered around making sure the feature set was complete and that the proper user experience was made. Not only was this a huge undertaking, but it also included a splitting some of my time to help with the total refactor of the front-end using React.

Design + Prototyping

The existing design was evaluated against the new product requirements stemming from customer feedback. This encompassed invoicing and payments and their various configuration defaults and options, invoice management including how invoices are made, sent and received, and payments management including entering, updating, deleting and customer self-payment. This also included customer visibility and communications of these invoices and payments.

The entire UI feature set, along with all of the dialogs, toasts, interaction widgets and modals, were mocked up using figma. With that mockup a functional prototype was created using Figma documenting the interactions and various user experience implementation notes.

Reflection

The final design of Skimmer's invoicing and payments not only met Skimmer's customer needs and expectations but set the tone for improving the experience and usability of other areas the app. The design and front-end standardization improvements also served as a focus points for Skimmer to build a distributed yet cohesive team that was balanced with world class product, design and engineering practitioners.