How We Reimagined Expense Claims
I'll lead the story about the solution towards effortless expense claims submissions.
Role
Designed the iOS app to streamline expense claim submissions, created prototypes, conducted usability testing, applied a design system, and prepared QA documentation in collaboration with PMs and engineers.
Team
Worked with 2 design leads, 2 product managers, 1 QA analyst, 2 developers, and 1 product designer over a three-month initial phase and a two-month launch phase.
Context of the project
Improving the expense claim process
Problem identification
New colleague struggled with the process
A new colleague expressed frustration with the current expense claim process.
Non-financial users found it complex
There was a clear need to make the process more accessible for non-financial users.
Current system overview
Cloud-based service for financial managers.
Non-financial users struggled with submitting and approving claims.
Project achievements and impact
Achievement
Streamlined the expense report creation process.
Impact
Reduced reporting time by 50%
Presenting identified problems
Research
Conducted research to understand the South Korean business travel expense market.
Key metric
Checked the average time it takes users to process expenses.
Focus
Emphasised the significance of reducing report creation time.
Challenge
Highlighted the challenges faced by target enterprise clients.
Stakeholder emphasis
Stressed the importance of identifying and addressing user problems to stakeholders.
Key research findings
The expense management solution market shows high growth potential.
Transaction volume
￡101.3M (172 trillion won)
Market rank
7th largest global business expense market.
Manual processes
38% of companies still handle financial tasks manually.
Dissatisfaction
64% of employees are dissatisfied with the effort required for expense processing.
Savings potential
10% time reduction = $92,400 annual savings.
Defining User Problems
Delays in the expense report creation process
User research
Conducted interviews with 4 department employees to understand satisfaction and pain points.
User satisfaction
Users are satisfied with the ease of tracking compared to paper-based systems.
Approvers review and approve claims as soon as they receive notifications.
Junior Engineer
"The new system is more convenient than my previous company's paper-based process."
Design Team Manager
"Reducing the time for reimbursement is important, so I approve claims promptly."
User concerns
Field workers find the report creation process time-consuming and confusing.
Senior Designer
"Unexpected overtime forces me to use my card, and the report creation was inconvenient."
Sales Assistant Manager
"Criteria and dates for long-term projects are unclear. So we need clear guidance to save time."
Junior Engineer
"The detailed features on the web were overwhelming. As a non-financial user, I only need basic reporting and status notifications."
User behaviour
Field workers submit reports right before deadlines.
Sales Assistant Manager
"I hurriedly input data or contact finance for clarification to meet deadlines."
Senior Designer
"I check for receipts only when notified by the finance team about deadlines."
Focused on priorities that help the most users
Interview findings were consolidated to identify the most significant issues faced by users.
Issues were prioritized based on their potential to deliver value to a broad user base.
The priority criteria focused on evaluating functional improvements that would benefit the majority of users.
Goal
Intuition is key—Make it easy
With more field workers than approvers, simplifying the expense report creation process for them is the top priority.
Reducing complexity in the reporting process will have the most significant impact on user satisfaction and efficiency.
Approval speed
Prioritise quick approvals, easy expense submissions
Simplify the maze
Streamline the processes to get things done fast.
User-friendliness
Users want quick, no-confusing reporting.
Intuitive and clear
Create a clean, easy-to-navigate interface everyone will love.
Mobile ready
Build a mobile app for users who are always on the move.
Approaching Solutions
I simplified the process by integrating IAs to reduce the time spent entering data.
User journey map
Reviewed current expense report creation steps based on user interviews.
Information architecture mapping and rebuilding
I classified each step, considering how the current IA could be applied to the new app.
Ideation for solution
After identifying the issues at each stage, I brainstormed solutions to design a more efficient process for the new app.
Classified issues and solutions
➊ Is unclear which tab provides the reporting function.
➋ Takes some time to organise various expense-related information.
➌ Ambiguous progress status due to unrecognisable entry points.
➍ Inconvenience in data separation when saving personal files together.
➎ Difficulty in entering detailed cost information due to vague guidance.
Streamlining the Process
Users were getting lost in a maze of duplicated menus and a confusing process. — creating a smooth, streamlined journey from request to approval.
Issues
Information about cards, expenses, and expenditures was repeated across multiple screens, creating confusion.
Solution
Time tracking for expense reporting
I analysed the expense report creation process to find the most time-consuming stages.
User test
I interviewed a user with no prior experience in the expense claim system.
Tracked time
Details
Issues
Key time-consuming tasks were entering the expense purpose and date.
Solution
Visualising
Applied derived solutions
I applied the solutions and prioritised content to create a prototype that met users' needs.
Wireframes
Created Lo-Fi wireframes to visualise the expense report flow.
Testing
After this, I designed three drafts for A/B testing, incorporating new concepts and refining prototype A based on product consistency.
Home
Key features include
Monthly expenses, approval notifications
Expense status, approval history, unreimbursed expenses
The latest list of unreimbursed expenses
Thumbnails of attached receipt images
Categorised charts showing expense claim details based on purpose and card.
Quick access
Floating button for creating expense reports
Option to choose card transactions or manual input
Selecting supporting documents
Receipt attachment
Attach receipts from organised storage by date
Calendar notifications
Schedule notification on the calendar indicates the dates related to overtime, out-of-office work, or business trips
Helping with the intuitive selection of dates
Enter expense claim details
Auto-fill
Expense details, including sales slip and merchant information, are automatically added to the report.
User input
Users input the purpose and select the appropriate work expense category.
Adding Approval Line
Usability testing
I ran usability testing to validate that the enhanced process improves the user experience.
Testing focused on the expense report creation process to evaluate if key issues were addressed.
Testing method
Remote testing was conducted to simulate the real work environment.
Users explored each app module and provided feedback.
50% faster, but still room to improve
Key Result
50% reduction in time for entering claim purpose & expenditure date.
Next steps
While this is a big win, we’re not stopping here—there’s still room for a bit more polish before the final launch."
Home
Expense entry
Moved to the top, emphasised with primary colour.
Card limit
Added a feature to show the remaining company card limit.
Simplified status info
Removed complex progress details and displayed only approval requests.
Reorganisation
Unreimbursed expenses moved to the bottom near the calendar.
Consistency
Updated icons to match card issuer for all related components.
User-generated content
Receipt thumbnails and categorised charts were not prominent enough on the home screen.
Receipts & Charts
Combined both features under 'My Menu' to improve visibility.
Card management
Introduced card management within this section for better handling of user-generated content.
Expense report creation
To improve data accuracy, I added more options beyond the auto-scanner.
New options
Introduced a picker for selecting specific dates, date ranges, and times.
This makes it easier for users to choose precise time data for their expense reports.
Overseas expenses
Previously, using domestic rates caused confusion for overseas expenses.
Exchange rate calculation
Introduced automatic exchange rate calculation to ensure accurate reporting of international expenditures.
To improve product quality and consistency,
I applied a design system based on an iOS app.
Delivered the refined design and a detailed document for engineers to guide the final product development and release.
Design system
Top app bars
Display screen title
Show progress with a progress bar
Content area
Bottom app bars
App-wide menu entry point
Action buttons for previous or next steps
Colour
Primary colour
Brand blue for default state
Provides visual emphasis
Secondary colour
Supports emphasis when the primary isn’t suitable
Semantic colours
Indicate expense claim status
Analogous colours for differentiation and harmony
Positive
Saving
Completion
Approval
In progress
Authentication
Connection
Check
Review
Interest
Acceptance during an inspection
Negative
Failure
Rejection
Other critical states
Pending
Attention
Waiting states
Neutral
On hold
Non-significant messages
Design QA
Validated designs on TestFlight
Validated implemented designs on TestFlight by comparing developed screens with provided designs.
Checked colour, font size, and spacing
Reviewed colour, font size, and spacing to ensure adherence to the design system.
Documented and shared feedback with developers
Documented feedback was shared with the development team for adjustments.
Achievements and changes through the project
Streamlined expense report creation
Simplified and optimised the process, cutting reporting time by over 50%.
User-centric approach
Led research, identified key issues, developed solutions, and collaborated effectively to meet project goals.
Introduction of design system
Established a cohesive design system with unified colours, icons, and layouts for consistency.
Design QA for consistency
Implemented a QA process, documented feedback, and collaborated with developers to ensure high-quality design delivery.