CASE STUDY: Accounting Subsystem UX
The original accounting subsystem, while rich in features, was a primary source of user complaints due to poor navigation, unintuitive workflows and missed opportunities for automation and bulk processing.
For this case study, I’ll focus on the pilot project, created as a design foundation showcase for user testing, SME review and leadership approval.
STRATEGY: DEFINING A SCOPED PILOT
I recommended creating a prototype that contained the entry screen and one primary set of workflows in hi-fi for SME review and user testing. The prototype would also include a fully wired up navigation using placeholder screens in lo-fi for future planning purposes.
That way we could iterate on test results and fine-tune new solutions before extensive design and prototyping work.
This strategy was approved and adopted. Workflows involving an invoice payment and a reconciliation were chosen for the pilot.
Years of user-reported pain points provided a strong starting point, allowing me to focus on solution exploration rather than extensive discovery. To build a clear picture of the legacy system and its challenges, I:
Thoroughly studied training documents and videos to understand the existing design.
Reviewed all relevant pain point tickets.
Interviewed users and customer support SMEs for a better understanding of top complaints.
Interviewed the VP of Product, our top accounting SME, to fill knowledge gaps and identify workflows ideal for the pilot project.
Major pain points discovered through this research included the following:
Cumbersome experiences while working on higher order processes such as reconciliations.
Missed opportunities for better automation and bulk processing across the subsystem.
STEP 2: INFORMATION ARCHITECTURE OVERHAUL
I conducted a full IA mapping of the accounting area in Coggle.it and collaborated with SMEs, a select group of end users and our VP of Product to refactor and optimize it over multiple iterations using card sorting and tree testing.
Setup screens were moved to a dedicated root-level branch, reducing confusion.
Redundant categories were merged, streamlining navigation.
Hierarchical issues were corrected, improving findability.
This overhaul gave me a scalable foundation to improve workflows, redesign navigation, and plan for design and prototyping beyond the pilot project.
STEP 3: BLOCK-LEVEL LAYOUTS & LO-FI PROTOTYPING
I used blocks instead of wireframes to be more expressive by incorporating known design system elements like basic colors, predefined layouts and recognizable placeholders for content and interactive elements.
Starting from the top, I first created two layouts for a new accounting home screen with two modes:
A dashboard style entry similar to the original, with traditional menubar navigation.
A structured screen of workflow trailheads with options for "What would you like to do?" and "Where would you like to go?".
Using the updated IA, I fully wired up the new navigation as a clickable prototype using lo-fi placeholders for all navigation targets.
This prepared us for the incremental plan to raise each accounting area to hi-fi, once the pilot project was iteratively completed, tested and approved.
Early hi-fi versions of the two entry screens can be seen below.
STEP 4: HI-FI DESIGN & FUNCTIONAL LAYOUTS
The Create/Update screen for an invoice was improved by relocating its navigation tree from the top-right to a more intuitive left hand side, and allowing the header to expand to take the entirety of the top.
This layout was reusable for the reconciliation screen too (block level layout seen further below), but there were pain points with the mental modeling and workflow there.
A PAIN POINT RESOLVED – RECONCILIATIONS
The old design involved pulling in all invoices associated with a carrier/insured combo via a link that ran a pre-filtered search. Users would then mark the invoices they wanted to include in the reconciliation.
After this step, if a user had to leave the process and return, the only way to retrieve the selection was to run the pre-filtered search again, and take an extra filtering step to drop all the unselected ones for a concise list.
To resolve this, I successfully argued for thinking about a reconciliation as an entity rather than a real-time process.
This required some brainstorming with an accounting SME on the customer support team and a presentation to the product VP, gaining approval to user-test the solution.
The approach allowed me to give reconciliations their own persisted internal IA. That in turn allowed importing or excluding invoices and having the selection persisted in a tab instead of just marking them in a list of search results.
Gaining the ability to easily leave the process and have progress saved was well received during testing.
Pre-filtered links were all relocated into an area called Quick Filters on the left and were removed from the tree, leaving a small enough list of options to drop the tree presentation entirely and employ a more intuitive tab group instead.
In-progress lo-fi layout can be seen below.
PILOT PROJECT COMPLETION & OUTCOME
After several rounds of testing and iteration, the pilot resulted in a clickable prototype showcasing the new accounting IA, along with a strategic set of high-fidelity screens defining the new design approach.
Positive reception from users and stakeholders led to the approach being approved as the design foundation for the full accounting subsystem overhaul.