Re-imagining the Home page experience for BILL + Divvy customers in the new, integrated product offering

Who did I work with?

What did I do?

I worked with PM Trevor Fullwood and Design manager Sean Crowe to come up with the strategic direction for this initiative. I worked closely with Divvy designer Morgan Williams, who was working on a re-design of the Divvy Home page while I was working on this project.

I collaborated with the Bill.com Experience Foundations team to define and align the strategies for notifications across the One Stop Shop offering and the standalone Bill.com product.

I consulted with the Onboarding and Mobile teams to shape our shared strategy for how a new Home page would function for new users and in our mobile apps.

I put together research plans, conducted moderated interviews, and tested design concepts with the help of my UX Research counterpart, and worked with Content Design to ensure that my content was clear and consistent with our brand voice.

I worked with the Design Systems team to implement our brand-new Design System into this project, and to contribute necessary components and documentation to the Design System.

I worked closely with the engineers on my squad to determine the technical feasibility of my ideas and scope the work for contributing new components to the design system.

When I wasn’t in zoom meetings doing all of the stuff I just listed, I designed the interface for this thing.

Company context

BILL is the leading software solution for managing accounts payable for small, medium, and enterprise businesses. Divvy is a leading spend and expense management tool. Acquired by BILL in June 2021, Divvy has been hard at work alongside partners from BILL to integrate our separate solutions into a single “One Stop Shop” offering.

Discovery and Definition

What do our customers actually even do, anyway?

Before my team got started on this project, we realized that we had some pretty large gaps in our understanding about the ins, outs, and what-have-you’s of the typical workflows in a financial back office. We understood well enough what Divvy did for folks, but Divvy only represented a small part of the day-to-day work of our customers’ finance teams. So we rallied around a few key questions:

• What does the typical financial back office workflow look like?
• What does the “lifecycle” of a transaction look like? How do customers move from the point of sale to closing the books at the end of month?
• What are the shortcomings of existing processes? What sucks?
• What are we (Divvy + BILL) well-positioned to address?

We learned a few interesting things after 30 hours of interviews:

The primary shortcoming of using multiple “point solutions” for managing accounts payable, corporate cards, employee expenses, accounts receivable, accounting, and occasional Enterprise Resource Planning software is that the “source of truth” ends up being either the accounting or ERP software.

• This means that the most reliable insight into “what’s going on with my business financials?” is a lagging indicator, rather than a leading indicator
• The non-communication between various point solutions makes it hard to prioritize work and track the status of different bits of work

For us, this meant that consolidating AP, AR, and Spend + Expense data into a single solution allowed us to offer:

• Leading, real-time indicators of cash flow and financial health
• Workflow optimization by consolidating tasks and notifications into a single software solution

Taking inventory

Once we had a clear idea of the fundamentals of the problem and we had been assigned to work on the Home page for our new combined product, we decided to take a look at both the competitive landscape and the current state of Divvy and BILL Home pages.

What we found was bleak.

Spoiler: Most companies land their customers on a dashboard, which is full of summaries for monitoring.

As I dug deeper, I came to a few conclusions.

• Everyone is terrible at dashboards (sounds like a joke. isn’t a joke.)
• Divvy and BILL are also terrible at dashboards (happens to the best of us)
• The reason everyone is terrible at dashboards is because they don’t articulate a clear purpose for them
• Because most dashboards lack a POV, they become one of two things:
• A bunch of analytics tools for monitoring status (poorly)
• A “junk drawer” of scattered, unfocused widgets

Putting a stake in the ground

Our Home page POV

We’d decided that we did not want to build a Home page that would be a crappy analytics dashboard. We also wanted to avoid another junk drawer.

Knowing what we didn’t want to build helped me to clarify some guiding principles:

• The Home page should orient people to their most important tasks
• It should facilitate the efficient prioritization of work

I believed that if we built the Home page properly, it should help people to do their jobs more effectively.

Our core hypothesis

We hypothesized that all of the information that could potentially live on the Home page could be divided into 2 major categories — Notifications and To-do’s. For our purposes, we defined each as follows—

Notifications

• Are informational in nature
• Typically only allow the user to go to the object’s page to see it
• Example: “A new monthly statement has been generated.”
• Trigger an indicator when unread

To-do’s

• Are actionable in nature
• Typically have a task associated with them
• Trigger an indicator until the task is resolved

With this hypothesis, we were primarily solving for 3 things:

• Let me know things that I should do to better manage my company’s finances. (to-do’s)
• Keep me up-to-date on other information that may assist me in managing my company’s finances. (notifications)
• Let me quickly access suggested actions.

Sniff testing our core hypothesis

Before we felt comfortable diving in, we wanted to quickly evaluate the strength of our hypothesis. I wanted to know:

• Did our hypothesis actually align with customers’ mental models?
• Would they categorize things into “to-do’s” and “notifications”?
• Would they categorize into “to-do’s” and “notifications” along the same actionable/informational axis that we anticipated?

A quick hybrid card sorting exercise was enough to give us a clear signal that our framework was sound.

How do we actually build this thing?

Quick recap —

By now, we were confident that Notifications / To-do’s was a sound framework.

We were also confident that “orienting users to their most important tasks” and “helping them efficiently prioritize their work” was going to be best-supported by prominently featuring To-do’s on the Home page.

We had a few burning questions —

• How should we group To-do items?
• What might our layout look like?
• How do we treat “importance” and “urgency”?
• If we’re going to include any data visualization, what data represents a value-add when surfaced on the Home page?

When in doubt, sketch it out

Most of my early explorations drifted toward grouping “to-do” items by their parent data objects. This led to both an extremely boring UI, and some weird layout tradeoffs.

During this phase, I collaborated heavily with Morgan, who was tangling with many of the same problems in his re-design of the Divvy Home page.

I also worked closely with my manager, Sean, who was also functioning as a kind of “Design architect” across all of the teams involved in the broader “One Stop Shop” initiative.

What became apparent through all of my explorations was that there simply weren’t enough potential to-do items for each parent data object to warrant a dedicated UI component for each object.

Progress in the right direction

I started considering what it might look like to have a single, unified to-do list that covered everything a customer could need to do.

As I iterated in this direction, the designs started to converge around 4 main elements:

1. Some kind of “welcome messaging”
2. To-do list
3. Credit line visualization
4. Accounts Payable visualization

Developing a sense of what these elements should do

For each of these main elements, I wanted to develop some principles to guide my decision-making around them. To do that, I asked and answered the question — “what should this accomplish?”

With a better sense of what each of these elements was trying to accomplish, I turned again to the layout problems that had been plaguing me since the beginning of the project.

After exploring different layouts, presenting them to other designers, and fielding lots of feedback, I landed on a sort of “hybrid” approach of some previous explorations that I decided to make the foundation of what I would test with customers.

A concept worth testing

After a few takes at a high-fidelity version of the “hybrid” layout, I landed on something strong enough to put in front of some customers to get their feedback. Working with Veena, we put together a research plan and scheduled some interviews.

What we wanted to learn

We had hypothesized that the most important elements on the Home page would be:

• To-do list
• Some kind of “important info section” for high-impact notifications
• Credit line visualization
• Accounts payable aging visualization

We wanted to know:

• How close were we?
• What might we be missing?
• What might be unnecessary?
• What’s the best grouping for to-do items?
• Urgency?
• Ownership?
• “Parent object”?
• Something else entirely?
• Are these data visualizations the most important?
• What might be missing?
• Do the current layouts of the credit line and AP aging visualizations make sense?
• If not, how do they need to change?

After some customer interviews, we got some strong signals

What we learned:

We made some decisions based on what we’d learned

Running headfirst into challenges and constraints

Design system constraints

New product. New design system.

Our Executive Design Leadership made the decision to build a totally new design system that adopted pieces of each of the existing Divvy and BILL design systems for the new product we were building.

Trying to innovate on the Home page experience with a design system that was still in its infancy put me and my team in a bit of a pickle. The main components that were complete enough for me to use in designs and for the engineers on my team to use in code were a generic “Content tile” container component, and the various permutations of a “list item” component.

With those constraints in place, I worked to develop each of the major components of the Home page with the tools I had available.

This also introduced a few challenges to the level of documentation needed in my design files. Because these components and their properties were all relatively new to the developers on my team, I needed to be highly detailed in how I documented their composition and usage.

Despite this major constraint, I was able to design something that felt like it had a lot of potential.

Collaboration and political constraints

Fairly late into this effort of designing and beginning to develop the Home Page, my team was introduced to the Experience Foundations team from BILL. They were introduced to us as a critical collaborator, since they were working on updates to notifications for the core Bill.com product. We learned that they would also be the owners of the notifications strategy and implementation for the One Stop Shop initiative.

As it was designed, the Home page included two areas that were considered “notifications” in BILL — To-do’s and “Important information”. This put our two teams at odds over the question of who was ultimately in charge of making decisions about how my team would move forward.

Without any single, designated “decision maker”, our teams found ourselves in a gridlock.

I was convinced that if we could align on the principles that guided our collective approach to notifications and to-do’s, differences in tactical approach or implementation between our two teams was totally fine. The experiences would still feel cohesive, even if they weren’t 1:1 consistent.

The Experience Foundations team was less convinced, and more insistent that our two teams’ approaches needed to adhere to the same details of implementation.

Changing PMs and charters deep into a project

Amidst the back-and-forth between my team and the Experience Foundations team, we lost our PM. After a few weeks of interviews failed to produce a replacement for Trevor, our Director of Product assigned a newly-hired PM from a different team to my team.

With this change, it was decided that our team would not be the long-term owners of the Home page, but that our charter would eventually become “Insights and Analytics”, to take advantage of our new PM’s background in data products.

Redundancy

All of the collaboration between Morgan and I on the Divvy and One Stop Shop Home pages had led us down very similar paths, toward very similar conclusions. We planned to use many of the same components and similar layouts to solve the problems of our respective home pages.

Beyond that, we knew that an update to the Divvy Home page that served as a “soft launch” for the eventual migration of Divvy customers to a One Stop Shop solution was a positive thing.

However, engineering and product directors flagged the massive overlap between the work our two teams were doing as an operational inefficiency, which put pressure on our teams to reduce the overlap of work.

Winning is more important than scoring

With the cumulative effects of our changing team charter, a new PM who was low-context on the history of the work, the large overlap between the work that Morgan and I were doing, and the pressures of coordinating work between 3+ teams without any clear “decision makers”, I worked with our Director of Product, Stacia, to decide that it was ultimately in the best interest of this project to shift the work to Morgan’s team.

They would take the work of completing the rest of the Home page across the finish line, and my team would dive in to Insights and Analytics for the foreseeable future.

It was hard to let go of something that I’d poured so much of myself into for so many months. But, one of my values as a designer is that I’m not a “ball hog”. I don’t care about who scores the winning point. I care about winning on behalf of our customers, and I think that this was the decision that was most likely to yield the best outcomes for BILL and Divvy customers.

Dead on arrival

Immediately after shipping the first set of features for the “One Stop Shop”, we experienced some major organizational shake-ups. Our Chief Product officer retired, and was replaced by a new CPO. Our new CPO made some sweeping changes, which included halting the “One Stop Shop” initiative in favor of taking a distributed “Unified Platform” approach to our work.

This meant that while some of the ideas that were primed for the Home page might eventually make it into some future version of whatever platform offering we ship, our original vision for the Home Page was dead in the water.

You know what they say — all is fair in love, war, mergers + acquisitions. On to the next project.