Jon Brick - Enterprise Accounting App Case Study

Background

In the spring of 2019, I had the opportunity to redesign the internal accounting product for Funding Circle, known as FinOps Admin. I had worked on the product in 2018 and helped to launch it in the US that fall. We were preparing for a global roll-out to the UK and CE and I had the opportunity to fix usability issues, while continuing to deliver new features.

Highlights

10+ Months (March 2019 - Feb 2020)
Research, Wireframing, Prototyping, Usability Testing, Interaction Design, Systems Design, Product Management, Project Management
Desktop Web

Overview

Problem

Redesign a 30+ page enterprise accounting application, FinOps Admin, to be used in 4 different countries for at least 5 different types of users, and work with 4+ product and engineering teams all while delivering value and new features to business. Additionally, there were dozens of existing pages that had inconsistent designs, or no design at all. This application is accessible on desktop only. We don't allow team members to access it on their phone for security reasons.

Solution

A new Design System that proposed an entirely reimagined product. The new system included standard behaviors and account structure, page templates, standard and extensible components, and documentation. Also created a road map for planning out the conversion or enhancement of current pages.

Result

Launched a new feature to test the new design system and still provide business value. Still early but users have been celebrating the new designs and usability improvements. Existing pages are currently under conversion in accordance to the road map.

Original Design

New Design

Discover

Understanding the problem

I had worked on FinOps Admin the year before and it had currently been live about 6 months. I wanted to understand what problems the users were facing on a day-to-day basis and what impact that had on the business. I generated about 40+ issues from two full weeks of shadow sessions with the US Payments, Financial Operations, and Collections teams.

Synthesizing research

Problem Statement

“How might we increase of user's trust of the system and increase user's efficiency while performing tasks?”

Problem statement developer by me and the cross-platform Senior PM

Define

Defining the Scope and Structure

I mapped out what I had heard and seen from research and I met 1:1 with the various Product Managers to validate my research and assumptions. Additionally, I played back everything I had heard to stakeholders and users. While I was doing this work, I was also designing a new feature and used these new standardization flows in that new feature as a test-case. I used the framework from The Elements of User Experience as my inspiration.

Standardizing Interactions

Standardizing Architecture

Develop

While I was working on the new feature, I was constantly referring to the huge list of user pain points users to see how I could solve multiple pain points at once. Additionally, I worked with the front end engineers to come up with a revamped design library that could support my proposed system. We ended up landing on Ant Design as the new library and I proceeded to build out a robust system and style guide.

Create a Design System

Prove System with old pages and new pages.

Product Enhancements

New Navigation

I proposed a side navigation that could show many more top-level navigation items than a simple top navigation.

Example of collapsible side navigation with hover

Search vs Filter

Tables were currently using a filter logic that caused major performance issues. I proposed more of an "Advanced Search" that would only show results after clicking the search button, making it easier to enter multiple search fields at once.

Example of results not loading until search button is hit and hitting reset returns to default state

Customizable Columns

Different users used pages for different problems. I proposed making the UI as flexible as needed and let the users define what columns were visible or hidden and what their order was.

Example of turning columns on and off in different tables

Truncate UUIDs and shortcuts

Our app is full of sensitive information and makes robust use of UUIDs, unique IDs. Users needed to cut and paste these IDs for a variety of purposes, or navigate to the appropriate URL for the parent ID. I proposed a way of truncating the UUID where the page could still be accessed on click, but the user could also click an icon to copy the full ID.

Example of opening new window and copying the field value

Type-ahead and multi-select

Some select fields might have 20+ options, way too many for short term memory or to display at once. I proposed type-ahead and multi-select inputs that could easily be tabbed between for our power users.

Example of tabbing through and changing inputs use keyboard only

Proving designs work with new and existing pages

Deliver

Shipping one feature and queuing dozens more

After I had proven that the Design System could work, I had to make a plan and communicate the upcoming changes to multiple teams across the organization. The new product feature also received a ton of praise, being featured at a quarterly all hands meeting. The whole team is really energized at what the future of FinOps Admin will look like!

Successful Launch

A few prototypes for you to click through. Access a withdrawals page, a repayment tracker, investor reporting, or the new feature, subledger reconciliation.

Enterprise Accounting Application