Kyle Thacker —

Service bubbles: messaging system

Introduction

At it’s essence, Bench is a communication system between our bookkeepers and our clients. With this in mind, we explored the existing ways people were communicating within the Bench app and developed a new system to complement and evolve client and bookkeeper conversations.

I was the lead designer on this project.

Messaging Feed.

Our messaging system is the primary tool in which bookkeepers and clients communicate in our app. It has evolved over time from a threaded view to a more approachable messaging system that mimics chat UIs people are familiar with.

The Service Bubble

When we looked at how bookkeepers and clients were interacting, we noticed that a lot of conversations revolved around objects spread throughout our app. Whether it was a bookkeeper needing client input on a transaction, or a client needing to reconnect a bank account, users were being redirected to different pages, shifting their context and occasionally causing them to forget instructions.

To resolve these issues, we developed the Service Bubble: an enriched message that either pulls information from where a link would originally send them to, or is a gateway to accessing a workflow on the page (before and after example below).

Categorization Service Bubble

Categorization

To evaluate the viability of Service Bubbles, we dug into how bookkeepers and clients collaborate on identifying and categorizing unknown documents. We mapped out the current interaction flow and looked at what we could take away.

Tabular View of Transactions

From there, we looked at how users were communicating around expense and revenue categorization and identified who we should be designing for.

Tabular View of Transactions

We created a first pass of how categorization could work, and built a rough workable prototype into our app, exposing it to a small amount of clients. When the feedback came back positive, we started to further develop categorization and how it could function not just now, but in the future.

The categorization workflow is launched from a link, and eventually an enriched service bubble that displays progress and state of the workflow. Clicking into it launches the workflow in a modal above the messaging system. It can be opened and closed without losing progress.

The information revolving around categorizing transactions lived in table cells, but we wanted to optimize the UI for easily reading and identifying transactions. We landed on a card system that allowed us to maintain consistency between where items are placed, and a focused space for quickly identifying information.

Phasing the Launch

We developed a phased approach for releasing categorization. The first phase was designed to closely mimic the existing user workflow—to write a comment on a transaction. This phase affected a minimal change for the client, but also for the bookkeeper.

Tabular View of Transactions

The next phase was introducing Suggestions. A bookkeeper produces a set of 1-3 suggestions that they are quite certain a transaction falls within. This is a bit more work for a bookkeeper, but a much quicker interaction for a user than typing out the category.

Tabular View of Transactions

The final phase was to introduce basic machine learning to provide bookkeepers an automated list of 1-3 categories the system thinks a transaction could be. A bookkeeper approves the list of suggestions before they’re sent to the client. Over time, the system should learn how to automatically categorize transactions so that it requires less input and categorization eventually becomes infrequently used.

Categorization was very successful in phase one, with the unforeseen side effect of it making categorization so easy that users were quickly completing long lists of outstanding transaction categorizations that bookkeepers were not expecting to be available in such short timeframes compared to the previous workflow.

The project is currently in phase two with great results.

Tabular View of Transactions

Mobile

We launched the categorization workflow on both our mobile and web apps, simultaneously. We designed the experience to be consistent across both platforms, so that a user could easily jump off their computer and continue categorization on their mobile device. Learn more about my work on mobile.

Tabular View of Transactions

The Future

The process for building and introducing the categorization service bubble worked out well, and has laid a foundation for how other service bubbles are built in the future. The next service bubbles we’re planning on exploring are how we’re presenting account connection errors, how clients book calls, and how we can improve conversations around individual transactions.