Bill.com Inbox

Bill.com Inbox

This is a fairly comprehensive detail of the process of a particular project. There are several embedded PDF’s below using the Google embedded viewer – no plugin needed. The page may take a moment to load.

Since joining Bill.com this effort has been one of my biggest projects and one of my biggest pain points with regards to usability. The current model is cumbersome, visually noisy and not engaging in the least. The inbox concept is not the typical model you’d expect for receiving items and therefore the idea is to simplify and streamline something we know our users use daily as part of dealing with their finances without deviating from the original concept so as to alienate the user. Below is a fairly in-depth view of the process.

The beginning – The map of functions

Before I could tackle this I needed to determine what everything was, did and where it went. Basically, a map of the existing functionality.

 

PHI – Single file drag and drop upload

Everything to this point required multiple clicks to do a simple, single file upload to the inbox. To make things easier for the user they need to be able to drag files onto the browser window (think gmail attach file) to upload and handle these simple everyday tasks.

 

PHII – Multi-file drag and drop upload (skipped due to having PHI completed so quickly)

PHIII – Containing several updates, this phase laid a lot of the ground work for the final reimagining of the inbox feature. TLDR; there are six embedded pdf’s below that detail use cases and specs and some hi level concept design.

Flow once item is processed

 

Process items coming in with attachments as a separate inbox item

 

Make the primary navigation navigation consistent for all use cases of processing an item

 

Add sort functionality

 

Add shortcuts to make processing faster and easier

 

Now for a little before and after – the fun stuff

Before…
Visually this is very noisy which creates a giant learning curve for new users.

 

After…
A much cleaner streamlined approach. Put what matters front and center – the item that was sent to the inbox. This allowed me to present 16 items per page as opposed to 9

 

Before…
An individual item

 

Before – Same item with the pull down menu

 

After – New item…

 

After – New item exposing the primary functions (left icon = New bill, single most used function. right icon = all other functions)

 

After – With the menu… (mouse over – no clicking to show)

 

There are a lot of updates that occurred in this evolution.

  1. Click reductions to get to features
  2. Major upgrades to phased items listed above
  3. Sweeping effort to streamline visuals
  4. Making the basic functions, i.e., drag and drop upload, behave more like existing paradigms already in use

I’ll leave you with one last upgrade for what really makes using the inbox a lot easier – the tool bar.

Before…
The tool bar contained simple functions like sort, uploading files, and deleting files (one at a time mind you) and pagination. Additionally, these functions are displayed as an overall list of functions or actions for the user to take advantage of. They are separate and don;t feel quite complete.

 

After…
I pulled everything together and added in the function of it being always visible. As the user scrolls, the tool bar hovers over the items keeping them always in view. Additionally, the whole page is “hot” – meaning the user can drag a file(s) anywhere on the active browser window to perform a file upload to the inbox. Also added in the multiple select feature. The same feature you see in most inboxes for selecting and unselecting multiple files.