The Problem
In Japan, corporate expense management faces significant challenges:
- Paper-Driven Systems:
Many companies rely on paper receipts and records, making expense management prone to errors, loss, and even fraud. Strict legal reporting requirements exacerbate these inefficiencies, leaving businesses hesitant to transition to digital workflows. - Access to Corporate Cards:
Corporate cards are often inaccessible to smaller companies or startups without significant capital. This lack of access complicates expense management, especially for mandatory reimbursements like commuting costs. - Complex Workflows:
From managing expenses to uploading receipts, reviewing payments, and integrating with accounting tools, expense management involves numerous specialized tasks that vary by user role (e.g. employee vs. administrator).
My Role
I joined the team during a phase of rapid growth, tasked with:
- Redesigning the User Experience: Ensuring the platform was user-friendly, accessible, and scalable for future features.
- Enhancing the Visual Identity: Modernizing the Staple Card design, product website, and visual assets.
- Improving Information Architecture: Simplifying the complex structure to accommodate various user roles and use cases.
- Building a Design System: Developing a cohesive design system and custom CSS framework for scalable frontend development.
Challenges
The project’s complexity lay in its breadth of functionality and diverse user base:
- Specialised Features: Staple supports tasks such as creating expenses, uploading receipts, reviewing payments, integrating with accounting software, managing user roles, approving expenses, and exporting financial data.
- Role-Based Use Cases: Employees need an intuitive way to manage payments, while administrators require robust tools for oversight, approvals, and reporting. Balancing these needs was a key challenge.
The Process
Collaborating with Engineers
I worked closely with engineers to design and implement an intuitive user interface that aligned with technical and business requirements while improving the overall user experience.
Restructuring Information Architecture
To enhance usability:
- I restructured the platform’s information architecture, ensuring clear pathways for both employees and administrators.
- Features were grouped logically based on user workflows, reducing friction and enabling users to complete tasks with minimal effort.
Developing a Design System
To streamline design and development:
- I created a design system with reusable components and detailed documentation, ensuring consistency across the platform.
- Inspired by Atomic Design principles and this article by Sarah Dayan, I adapted the concept into a custom CSS framework, allowing the team to build and scale pages quickly and efficiently.
The Solution
The final design successfully addressed the challenges:
- Streamlined Expense Management:
- Employees could quickly create expenses, upload receipts, and manage payments through an intuitive interface.
- Administrators benefited from tools to oversee workflows, set approval processes, and generate reports with ease.
- Unified Design System:
- The design system provided a cohesive and scalable foundation for future feature development, cutting down frontend implementation time by 100%.
- Improved Brand Presence:
- The renewed Staple Card design and updated product website strengthened the brand’s visual identity and market presence.
- Simplified Financial Oversight:
- The platform eased the management burden on financial staff, empowering employees to handle payments independently while maintaining compliance.
Outcome
Through thoughtful design and collaboration, our team was able to achieve our goal of creating a cashless corporate payments solution tailored to Japan’s unique business environment. The revamped platform streamlined expense management for businesses of all sizes, ensuring scalability, accessibility, and a user-friendly experience for employees and administrators alike.
