CASE STUDY

Redesigning Expense8 — A Scalable, Accessible UX for Government- Grade Financial Software

Redesigning Expense8 — A Scalable, Accessible UX for Government- Grade Financial Software

Redesigning Expense8 — A Scalable, Accessible UX for Government- Grade Financial Software

About 8common & Expense8

About 8common & Expense8

About 8common & Expense8

8common is a leading Australian SaaS company that provides financial transaction and expense management solutions to large enterprises, governments, and non-profits. Its flagship platforms, Expense8 and CardHero, are used by over 170,000 users across organisations like Woolworths, Amcor, and more than 150 government agencies.

Expense8 is an end-to-end travel and expense management platform with three core modules — Expense Management, Corporate Travel, and Intelligence Reporting. It was recognized as a Major Player in the IDC MarketScape for SaaS Travel & Expense Management.

Project Summary & My Role

Project Summary & My Role

Project Summary & My Role

PROJECT SUMMARY

In 2023, I was brought on as the Lead UI/UX Designer to lead a full-scale redesign of the Expense8 platform, with the goal of:

Solving long-standing UX pain points in the expense approval and review flows

Improving usability, accessibility, and consistency across web and mobile

Unifying the platform with a new design system

Making the platform WCAG 2.1 Level AA compliant

I also contributed design work to CardHero, focusing on fund disbursement workflows, transaction transparency, and real-time compliance UX.

MY ROLE

• Sole UI/UX Designer leading product-wide redesign

• Owned end-to-end process: research, flows, wireframes, prototypes, final UI, design system, dev handoff

• Collaborated with PMs, developers, QA, and internal stakeholders

• Worked fully remotely, using async workflows and collaborative tools

TOOLS: Figma & Jira

TIMELINE: ~8 months (UX Research to Final Handoff)

Problem

Problem

Problem

Despite being powerful under the hood, Expense8’s user experience had not evolved with the needs of modern enterprise users:

01

01

01

Fragmented UI patterns: Inconsistent interactions across modules

Fragmented UI patterns: Inconsistent interactions across modules

Fragmented UI patterns: Inconsistent interactions across modules

02

02

02

Inefficient flows: Expense approval and claim review were tedious, requiring multiple tabs and excessive clicks

Inefficient flows: Expense approval and claim review were tedious, requiring multiple tabs and excessive clicks

Inefficient flows: Expense approval and claim review were tedious, requiring multiple tabs and excessive clicks

03

03

03

Accessibility gaps: The interface did not meet WCAG standards, impacting usability for users with disabilities

Accessibility gaps: The interface did not meet WCAG standards, impacting usability for users with disabilities

Accessibility gaps: The interface did not meet WCAG standards, impacting usability for users with disabilities

04

04

04

Outdated design: The visual UI lacked scalability and polish expected from government-grade platforms

Outdated design: The visual UI lacked scalability and polish expected from government-grade platforms

Outdated design: The visual UI lacked scalability and polish expected from government-grade platforms

05

05

05

No unified design system, making dev handoffs slower and inconsistencies more common

No unified design system, making dev handoffs slower and inconsistencies more common

No unified design system, making dev handoffs slower and inconsistencies more common

04

Research & Insights

Research & Insights

Research & Insights

RESEARCH

To understand friction points, I analyzed:

• Support tickets and client feedback logs

• Internal team walkthroughs (especially finance/admin roles)

• Usage data on high-friction flows (approvals, rejections, submission errors)

KEY INSIGHTS

• Reviewers and approvers needed summary-level info upfront, not buried in deep layers

• Mobile usage was rising among field staff, yet the product lacked responsive interaction support.

• Users with visual impairments reported contrast issues and confusing navigation without assistive labels.

Design Process

Design Process

Design Process

MAPPING JOURNEYS & REDEFINING FLOWS

• Reconstructed all user journeys for Expense Management and Travel flows

• Simplified approval/rejection/review into linear, focused actions

• Consolidated key data views to reduce clicks and prevent tab switching

WIREFRAMING & PROTOTYPING

• Used FigJam for ideation with stakeholder

• Created low-fi and high-fi wireframes in Figma

• Built prototypes for internal and client testing

DESIGN SYSTEM CREATION

• Designed a new design system from the ground up: colors, typography, components, grids, and spacing

• Integrated accessibility rules (color contrast, keyboard navigation, ARIA labels)

• Set up design tokens aligned with Storybook for developer use

ACCESSIBILITY AUDIT & WCAG COMPLIANCE

• Applied WCAG 2.1 guidelines throughout UI — Level AA

• Introduced alt texts, semantic roles, focus states, and better keyboard/tab support

• Worked closely with QA to validate final builds using accessibility tools

HANDOFF & DEV SUPPORT

• Delivered pixel-perfect specs in Figma

• Worked cross-functionally in agile sprints with devs and QA

• Provided interaction documentation and component usage guidelines via Storybook

Before & After

Before & After

Before & After

BEFORE - PROBLEM

5+ clicks to approve a claim

5+ clicks to approve a claim

5+ clicks to approve a claim

Confusing UI for reviewers

Confusing UI for reviewers

Confusing UI for reviewers

Low accessibility 

Low accessibility 

Low accessibility 

Fragmented visuals

Fragmented visuals

Fragmented visuals

Slow dev cycle

Slow dev cycle

Slow dev cycle

AFTER - SOLUTION

Reduced to 2 clicks with contextual action bar

Reduced to 2 clicks with contextual action bar

Reduced to 2 clicks with contextual action bar

Single-page layout with collapsible claim summary

Single-page layout with collapsible claim summary

Single-page layout with collapsible claim summary

WCAG AA-compliant design system with high contrast, focus states, alt text

WCAG AA-compliant design system with high contrast, focus states, alt text

WCAG AA-compliant design system with high contrast, focus states, alt text

Unified design system across Expense8 and CardHero

Unified design system across Expense8 and CardHero

Unified design system across Expense8 and CardHero

Dev-ready components + tokens in Storybook cut iteration time

Dev-ready components + tokens in Storybook cut iteration time

Dev-ready components + tokens in Storybook cut iteration time

Results & Outcome

Results & Outcome

Results & Outcome

35%

35%

35%

Decrease in approval time (based on internal testing and client feedback)

Decrease in approval time (based on internal testing and client feedback)

Decrease in approval time (based on internal testing and client feedback)

40%

40%

40%

Fewer support tickets related to claim reviews

Fewer support tickets related to claim reviews

Fewer support tickets related to claim reviews

WCAG 2.1 AA

WCAG 2.1 AA

Compliance achieved across core modules

Compliance achieved across core modules

Single Unified

Single Unified

WCAG 2.1 AA

Design system adoption reduced dev friction and increased visual consistency

Design system adoption reduced dev friction and increased visual consistency

Compliance achieved across core modules

++

++

Single Unified

Positive post-launch feedback from two major government clients

Positive post-launch feedback from two major government clients

Design system adoption reduced dev friction and increased visual consistency

++

Positive post-launch feedback from two major government clients

Single Unified

Design system adoption reduced dev friction and increased visual consistency

++

Positive post-launch feedback from two major government clients

My Work on CardHero

My Work on CardHero

My Work on CardHero

MAPPING JOURNEYS & REDEFINING FLOWS

In parallel, I contributed UX enhancements to CardHero, 8common’s fund disbursement platform for NFPs and government clients:

• Simplified transaction history and audit trail UX for finance teams

• Designed spend control interfaces allowing real-time visibility of rule-triggered card blocks

• Ensured consistent user experience across both platforms (Expense8 + CardHero)

Key Insights & Final Thoughts

Key Insights & Final Thoughts

Key Insights & Final Thoughts

KEY LEARNINGS

• Building a design system from scratch under accessibility constraints requires tight coordination between design and development.

• Government clients demand not just function but accountability, clarity, and inclusivity — which UX plays a central role in delivering.

• In remote-first environments, over-communication and clear documentation are vital for design impact.

FINAL THOUGHTS

Redesigning Expense8 was more than a visual upgrade — it was a strategic overhaul that brought clarity, speed, and inclusivity to a mission-critical government tool. I’m proud of the measurable impact we achieved and the strong design foundation now in place to support future growth.

*The contents of this case study are based on publicly available information and personal contributions that do not disclose any confidential or proprietary data. All insights, outcomes, and visuals shared here reflect my individual design work during my time at 8common, specifically on Expense8 and CardHero, and have been carefully written to respect all non-disclosure obligations. This case study is intended solely for portfolio and professional presentation purposes.

Experiments & Freelance

Experiments & Freelance