How We Reimagined Expense Claims :
How We Reimagined Expense Claims :
How We Reimagined Expense Claims :
How We Reimagined Expense Claims :
I'll lead the story about the solution towards effortless expense claims submissions.
I'll lead the story about the solution towards effortless expense claims submissions.
Once, a new colleague approached me, expressing frustration with our expense claim process.
Once, a new colleague approached me, expressing frustration with our expense claim process.
“ I’d like to request the last expense claim, but I was lost on the web for half a day. ”
My colleague said.
“ Our team uses our product as well! ”
“ Our team uses our product as well! ”
I replied.
I replied.
“ Yes, It is too well designed,
for the financial team, not us. ”
We both agreed.
We both agreed.
Context of the Project
Using a product of the business SaaS platform that supports efficient task management,
the company had already been providing a cloud-based web service to manage expense claims for in-house financial managers. However, we had to consider the end-users handling claim submissions and approvals, especially those without special financial knowledge.
Using a product of the business SaaS platform that supports efficient task management,
the company had already been providing a cloud-based web service to manage expense claims for in-house financial managers. However, we had to consider the end-users handling claim submissions and approvals, especially those without special financial knowledge.
Upon realising a colleague's struggle with our expense claim process, we acknowledged the need to improve its accessibility for non-financial users.
How could we have made the process of submitting expense claims simple?
Upon realising a colleague's struggle with our expense claim process, we acknowledged the need to improve its accessibility for non-financial users.
How could we have made the process of submitting expense claims simple?
Upon realising a colleague's struggle with our expense claim process, we acknowledged the need to improve its accessibility for non-financial users.
How could we have made the process of submitting expense claims simple?
Upon realising a colleague's struggle with our expense claim process, we acknowledged the need to improve its accessibility for non-financial users.
How could we have made the process of submitting expense claims simple?
Project Achievements and Impact
Project Achievements and Impact
Successfully streamlined the expense report creation process,
Successfully streamlined the expense report creation process,
leading to a remarkable 50% reduction in reporting time
leading to a remarkable 50% reduction in reporting time
leading to a remarkable 50% reduction in reporting time
leading to a remarkable 50% reduction in reporting time
Role
Role
Designed the iOS app from scratch to streamline expense claim submissions.
Created the prototype and conducted
usability testing for validation.
Applying a design system for consistency, I prepared QA documentation for product release with PMs and engineers.
Designed the iOS app from scratch to streamline expense claim submissions.
Created the prototype and conducted
usability testing for validation.
Applying a design system for consistency, I prepared QA documentation for product release with PMs and engineers.
Team
Team
Collaborated across teams to deliver and release a better product over the three months of the initial phase and the two months of the launch phase.
Collaborated across teams to deliver and release a better product over the three months of the initial phase and the two months of the launch phase.
2 design leads
2 product managers
1 QA analyst
2 developers
1 product designers
2 design leads
2 product managers
1 QA analyst
2 developers
1 product designers
To convince stakeholders, I presented the discovered problems in the expense claim experiences with relevant figures.
To convince stakeholders, I presented the discovered problems in the expense claim experiences with relevant figures.
To convince stakeholders, I presented the discovered problems in the expense claim experiences with relevant figures.
To convince stakeholders, I presented the discovered problems in the expense claim experiences with relevant figures.
Presenting Identified Problems
Presenting Identified Problems
I conducted foundational research to gain a clear understanding of the business travel expense market in South Korea and checked the average time it takes for users to process expenses and eventually to emphasise the significance of this project to the stakeholders.
I conducted foundational research to gain a clear understanding of the business travel expense market in South Korea and checked the average time it takes for users to process expenses and eventually to emphasise the significance of this project to the stakeholders.
I presented important research findings and highlighted key jobs to be done by introducing relevant metrics. The substantial growth potential in the expense management solution market has offered us a significant business opportunity.
I presented important research findings and highlighted key jobs to be done by introducing relevant metrics. The substantial growth potential in the expense management solution market has offered us a significant business opportunity.
Designing the right thing
Designing the right thing
make sure that there’s a real need for the product
make sure that there’s a real need for the product
To fully capitalise on this opportunity, I emphasised accurately identifying and addressing user problems. One of the most crucial tasks I identified was reducing the time spent on report creation, and addressing the challenges faced by our target enterprise clients.
To fully capitalise on this opportunity, I emphasised accurately identifying and addressing user problems. One of the most crucial tasks I identified was reducing the time spent on report creation, and addressing the challenges faced by our target enterprise clients.
I identified specific challenges of the existing expense report creation process that caused delays for the users.
I identified specific challenges of the existing expense report creation process that caused delays for the users.
I identified specific challenges of the existing expense report creation process that caused delays for the users.
I identified specific challenges of the existing expense report creation process that caused delays for the users.
Defining User Problems
Defining User Problems
To identify the current satisfaction and pain points of the existing expense reporting system, interviews were conducted with 4 employees from our department within the company.
To identify the current satisfaction and pain points of the existing expense reporting system, interviews were conducted with 4 employees from our department within the company.
Question
Question
“ When and where do you typically approve or usually submit expense claims?
Can you describe any specific frustrations you've encountered when dealing with expense claims?
Are there any features you wish the expense claim system had to make your job easier? ”
…
After consolidating the interview findings, the most significant issues faced by the target users were prioritised 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.
After consolidating the interview findings, the most significant issues faced by the target users were prioritised 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.
Enhancing Efficiency
Enhancing Efficiency
Enhancing Efficiency
Enhancing Efficiency
Prioritise improvements that will reduce approval time, emphasising a quick approval process and an easy expense claim submission.
Prioritise improvements that will reduce approval time, emphasising a quick approval process and an easy expense claim submission.
Simplify the existing long processes and enable swift processing.
Simplify the existing long processes and enable swift processing.
Simplify the existing long processes and enable swift processing.
Simplify the existing long processes and enable swift processing.
Improving User Convenience
Improving User Convenience
Improving User Convenience
Improving User Convenience
Introduce a user-friendly design with consideration of field workers’ preference for simple and quick expense reporting.
Introduce a user-friendly design with consideration of field workers’ preference for simple and quick expense reporting.
Provide an intuitive and user-friendly interface.
Provide an intuitive and user-friendly interface.
Provide an intuitive and user-friendly interface.
Provide an intuitive and user-friendly interface.
Mobile Accessibility
Mobile Accessibility
Mobile Accessibility
Mobile Accessibility
Strengthen mobile-friendly features for the convenience of both field workers and approvers.
Strengthen mobile-friendly features for the convenience of both field workers and approvers.
Develop a mobile app to cater users who frequently use mobile devices.
Develop a mobile app to cater users who frequently use mobile devices.
Develop a mobile app to cater users who frequently use mobile devices.
Develop a mobile app to cater users who frequently use mobile devices.
Given the larger number of field worker users compared to approvers, Simplification of the field worker’s direct expense report creation process is the most critical problem identified for resolution.
Given the larger number of field worker users compared to approvers, Simplification of the field worker’s direct expense report creation process is the most critical problem identified for resolution.
Given the larger number of field worker users compared to approvers, Simplification of the field worker’s direct expense report creation process is the most critical problem identified for resolution.
Given the larger number of field worker users compared to approvers, Simplification of the field worker’s direct expense report creation process is the most critical problem identified for resolution.
I approached the identified issues by integrating IAs to streamline the process and reducing the time required to enter information.
I approached the identified issues by integrating IAs to streamline the process and reducing the time required to enter information.
I approached the identified issues by integrating IAs to streamline the process and reducing the time required to enter information.
I approached the identified issues by integrating IAs to streamline the process and reducing the time required to enter information.
Approaching Solutions
Approaching Solutions
Based on the interview, I analysed the steps of expense report creation on the existing claim service.
I classified the steps and objectives of the user at each stage of the process considering that the existing IA will be applied to the app. Then I identified the issues of each stage and brainstormed solutions for them to achieve new designing scenarios for our new app.
Based on the interview, I analysed the steps of expense report creation on the existing claim service.
I classified the steps and objectives of the user at each stage of the process considering that the existing IA will be applied to the app. Then I identified the issues of each stage and brainstormed solutions for them to achieve new designing scenarios for our new app.
Classified issues and Solutions
Classified issues and Solutions
➊ Is unclear which tab provides
the reporting function.
➊ Is unclear which tab provides
the reporting function.
Clearly label each tab to improve user guidance.
Clearly label each tab to improve user guidance.
Clearly label each tab to improve user guidance.
Clearly label each tab to improve user guidance.
➋ Takes some time to organise
various expense-related information.
➋ Takes some time to organise
various expense-related information.
Provide only the necessary information.
Provide only the necessary information.
Provide only the necessary information.
Provide only the necessary information.
➌ Ambiguous progress status due to unrecognisable entry points.
➌ Ambiguous progress status due to unrecognisable entry points.
Provide an intuitive entry point to avoid uncertainty.
Provide an intuitive entry point to avoid uncertainty.
Provide an intuitive entry point to avoid uncertainty.
Provide an intuitive entry point to avoid uncertainty.
➍ Inconvenience in data separation when saving personal files together.
➍ Inconvenience in data separation when saving personal files together.
Offer a dedicated storage space for users to save and manage attached files.
Offer a dedicated storage space for users to save and manage attached files.
Offer a dedicated storage space for users to save and manage attached files.
Offer a dedicated storage space for users to save and manage attached files.
➎ Difficulty in entering detailed cost information due to vague guidance.
➎ Difficulty in entering detailed cost information due to vague guidance.
Minimise and automate the input steps by providing explicit instructions.
Minimise and automate the input steps by providing explicit instructions.
Minimise and automate the input steps by providing explicit instructions.
Minimise and automate the input steps by providing explicit instructions.
Users experienced confusion in expense claims due to duplicated menus and a complex process.
Users experienced confusion in expense claims due to duplicated menus and a complex process.
Users experienced confusion in expense claims due to duplicated menus and a complex process.
Users experienced confusion in expense claims due to duplicated menus and a complex process.
Comprehensive Issues
Comprehensive Issues
I identified issues in the Information Architecture where information about cards, expenses, and expenditure were duplicated across various menu screens, confusing the progress of the process.
I identified issues in the Information Architecture where information about cards, expenses, and expenditure were duplicated across various menu screens, confusing the progress of the process.
Solution
Solution
I integrated the duplicated menus
into a single entry point, improving the depth structure of
the IA for a seamless expense claim process from request to approval.
I integrated the duplicated menus
into a single entry point, improving the depth structure of
the IA for a seamless expense claim process from request to approval.
I integrated the duplicated menus
into a single entry point, improving the depth structure of
the IA for a seamless expense claim process from request to approval.
I integrated the duplicated menus
into a single entry point, improving the depth structure of
the IA for a seamless expense claim process from request to approval.
I analysed the expense report creation process to identify which stage is most time-consuming.
I analysed the expense report creation process to identify which stage is most time-consuming.
I analysed the expense report creation process to identify which stage is most time-consuming.
I analysed the expense report creation process to identify which stage is most time-consuming.
I interviewed a subject with no experience using the expense claim solution about their recent work-related schedules and found out they had two meals and one out-of-office expenditure to report.
I interviewed a subject with no experience using the expense claim solution about their recent work-related schedules and found out they had two meals and one out-of-office expenditure to report.
By providing our expense information input fields, I measured the time it took to enter details for these expenses, including the amount, purpose, and date, and to categorise each item.
By providing our expense information input fields, I measured the time it took to enter details for these expenses, including the amount, purpose, and date, and to categorise each item.
Key Issues
Key Issues
Time it took users in the process of entering the expense purpose and date.
Time it took users in the process of entering the expense purpose and date.
Users spent considerable time entering detailed information for the expense purpose and accurately recalling the dates of expenses.
Users spent considerable time entering detailed information for the expense purpose and accurately recalling the dates of expenses.
Solution
Solution
To address this, I added an expense tracking feature that is connected to a calendar. It scans receipts and automatically collects sales slips and franchise information, thereby simplifying the recognition of billing purposes and dates during expense claim creation.
To address this, I added an expense tracking feature that is connected to a calendar. It scans receipts and automatically collects sales slips and franchise information, thereby simplifying the recognition of billing purposes and dates during expense claim creation.
To address this, I added an expense tracking feature that is connected to a calendar. It scans receipts and automatically collects sales slips and franchise information, thereby simplifying the recognition of billing purposes and dates during expense claim creation.
To address this, I added an expense tracking feature that is connected to a calendar. It scans receipts and automatically collects sales slips and franchise information, thereby simplifying the recognition of billing purposes and dates during expense claim creation.
I applied the derived solutions and prioritised content in creating the prototype that met the users’ requirements.
I applied the derived solutions and prioritised content in creating the prototype that met the users’ requirements.
I applied the derived solutions and prioritised content in creating the prototype that met the users’ requirements.
I applied the derived solutions and prioritised content in creating the prototype that met the users’ requirements.
Visualising
Visualising
To visualise the user flow for the expense report creation process, I laid out Lo-Fi wireframes.
To visualise the user flow for the expense report creation process, I laid out Lo-Fi wireframes.
After applying the wireframes, I designed three main drafts for A/B testing.
After applying the wireframes, I designed three main drafts for A/B testing.
These designs were proposed alongside new concepts, and I mocked up detailed refinements for the prototypes with type A based on our existing product consistency.
These designs were proposed alongside new concepts, and I mocked up detailed refinements for the prototypes with type A based on our existing product consistency.
Home
Home
Users can easily check expense claim status and approval history, along with the convenient display of unreimbursed expenses, business trip schedules, receipt images, and categorised charts.
Users can easily check expense claim status and approval history, along with the convenient display of unreimbursed expenses, business trip schedules, receipt images, and categorised charts.
Users can easily check expense claim status and approval history, along with the convenient display of unreimbursed expenses, business trip schedules, receipt images, and categorised charts.
Users can easily check expense claim status and approval history, along with the convenient display of unreimbursed expenses, business trip schedules, receipt images, and categorised charts.
Monthly expense claim amount and approval notification.
Monthly expense claim amount and approval notification.
The most recent status of lists for expense claims, requested approvals, and received approvals.
The most recent status of lists for expense claims, requested approvals, and received approvals.
The latest list of unreimbursed expenses.
The latest list of unreimbursed expenses.
Thumbnails of attached receipt images.
Thumbnails of attached receipt images.
Expense claim details are organised in charts based on purpose and card.
Expense claim details are organised in charts based on purpose and card.
Floating button for quick access to the core feature of creating expense reports.
Users choose between selection from card transactions or manual expense input.
Floating button for quick access to the core feature of creating expense reports.
Users choose between selection from card transactions or manual expense input.
Selecting supporting documents
Selecting supporting documents
Attach receipts from the receipt storage. Receipt storage organises captured receipts based on the date for easy access.
Attach receipts from the receipt storage. Receipt storage organises captured receipts based on the date for easy access.
Attach receipts from the receipt storage. Receipt storage organises captured receipts based on the date for easy access.
Attach receipts from the receipt storage. Receipt storage organises captured receipts based on the date for easy access.
Schedule notification on calendar indicates the dates related to overtime, out-of-office work, or business trips to help with the intuitive selection of dates.
Schedule notification on calendar indicates the dates related to overtime, out-of-office work, or business trips to help with the intuitive selection of dates.
Enter expense claim details
Enter expense claim details
Users select the required receipts for the proof, then the expense details are incorporated automatically into the report.
Users select the required receipts for the proof, then the expense details are incorporated automatically into the report.
Users select the required receipts for the proof, then the expense details are incorporated automatically into the report.
Users select the required receipts for the proof, then the expense details are incorporated automatically into the report.
The sales slip and merchant details of the selected expenses are automatically reflected to the report.
The sales slip and merchant details of the selected expenses are automatically reflected to the report.
Users input the purpose and select the category of work expenses.
Users input the purpose and select the category of work expenses.
Adding approval line
Adding approval line
After specifying the approval line, users confirm the final expense details and request approval.
After specifying the approval line, users confirm the final expense details and request approval.
After specifying the approval line, users confirm the final expense details and request approval.
After specifying the approval line, users confirm the final expense details and request approval.
I ran a usability testing to validate the enhanced process provides a better user experience.
I ran a usability testing to validate the enhanced process provides a better user experience.
I ran a usability testing to validate the enhanced process provides a better user experience.
I ran a usability testing to validate the enhanced process provides a better user experience.
Testing
Testing
I conducted usability testing on user experience in the process of creating an expense report to evaluate if the solution provided has solved the Key issues. I opted for remote testing to provide a similar environment to creating expense reports at work.
I conducted usability testing on user experience in the process of creating an expense report to evaluate if the solution provided has solved the Key issues. I opted for remote testing to provide a similar environment to creating expense reports at work.
Module-specific Testing
Module-specific Testing
I conducted usability tests for each module of the app, allowing participants to freely explore the app and collect user feedback.
I conducted usability tests for each module of the app, allowing participants to freely explore the app and collect user feedback.
Expense Report Creation
Expense Report Creation
Similar to previous tests on expense information input fields, I provided participants with the same workflow scenario and guided them to create an expense report directly.
Similar to previous tests on expense information input fields, I provided participants with the same workflow scenario and guided them to create an expense report directly.
Achieved to cut down the time required by 50% for entering the claim purpose and expenditure date.
Achieved to cut down the time required by 50% for entering the claim purpose and expenditure date.
Achieved to cut down the time required by 50% for entering the claim purpose and expenditure date.
Achieved to cut down the time required by 50% for entering the claim purpose and expenditure date.
This was a successful proof of the key process.
However, we still concentrated on having room to improve our product for launch.
This was a successful proof of the key process.
However, we still concentrated on having room to improve our product for launch.
Home Screen
Home Screen
The effectiveness of the floating button as an entry point for expense report creation was not optimal.
The effectiveness of the floating button as an entry point for expense report creation was not optimal.
Placed the expense report creation entry point at the top, emphasising it with a component that uses the primary colour, featuring the expense claim amount, and highlighting the month selector functionality.
Placed the expense report creation entry point at the top, emphasising it with a component that uses the primary colour, featuring the expense claim amount, and highlighting the month selector functionality.
Desired a feature to check the remaining limit of the company card rather than the usage amounts.
Users reported the inconvenience of having too detailed and complex progress information for expense claim statuses and unreimbursed expenses on the home screen.
Desired a feature to check the remaining limit of the company card rather than the usage amounts.
Users reported the inconvenience of having too detailed and complex progress information for expense claim statuses and unreimbursed expenses on the home screen.
Streamlined components to display only the number of approval requests.
Streamlined components to display only the number of approval requests.
Introduced a component centred around the card issuer's icon, displaying the remaining limit.
Introduced a component centred around the card issuer's icon, displaying the remaining limit.
The section for unreimbursed expenses was moved to the bottom of the home screen, near the weekly calendar, and the icons representing expenditures were changed to the card issuer's icons for consistency.
The section for unreimbursed expenses was moved to the bottom of the home screen, near the weekly calendar, and the icons representing expenditures were changed to the card issuer's icons for consistency.
User-generated content
User-generated content
The receipt thumbnails and the categorised chart were not effective enough in highlighting the main feature when users first open the app.
The receipt thumbnails and the categorised chart were not effective enough in highlighting the main feature when users first open the app.
These two features were then combined under the 'My Menu,' where I also introduced card management to better handle user-generated content.
These two features were then combined under the 'My Menu,' where I also introduced card management to better handle user-generated content.
Expense Report Creation
Expense Report Creation
To better specify the detailed data, I decided to add additional options beyond the auto-scanner.
To better specify the detailed data, I decided to add additional options beyond the auto-scanner.
Therefore, I introduced a picker for selecting specific dates, date ranges, and times, making it easier for users to choose precise time data.
Therefore, I introduced a picker for selecting specific dates, date ranges, and times, making it easier for users to choose precise time data.
Previously, using the amount set for the domestic market could lead to confusion when expenses were incurred abroad.
Previously, using the amount set for the domestic market could lead to confusion when expenses were incurred abroad.
To address this issue, I added an automatic exchange rate calculation feature, allowing users to accurately report overseas expenditures.
To address this issue, I added an automatic exchange rate calculation feature, allowing users to accurately report overseas expenditures.
To enhance the final product's quality and consistency, I applied a design system based on an iOS app.
To enhance the final product's quality and consistency, I applied a design system based on an iOS app.
Finally, I delivered the refined design and a document
that engineers would refer to in developing the final product for release.
Finally, I delivered the refined design and a document
that engineers would refer to in developing the final product for release.
Design System
Design System
Top App Bars
Top App Bars
Represent the title area of the current screen, indicating the expense report creation progress through a progress bar.
Represent the title area of the current screen, indicating the expense report creation progress through a progress bar.
Content Area
Content Area
Bottom App Bars
Bottom App Bars
Serve as the app-wide menu entry point. During expense report creation, action buttons in this area facilitate movement to the previous or next steps.
Serve as the app-wide menu entry point. During expense report creation, action buttons in this area facilitate movement to the previous or next steps.
Colour
Colour
Primary Colour
Primary Colour
The brand's blue colour is used for visual emphasis and to express the default state throughout the app.
The brand's blue colour is used for visual emphasis and to express the default state throughout the app.
Secondary Colour
Secondary Colour
Applied in cases where visual emphasis is needed, although not considered for using the primary colour.
Applied in cases where visual emphasis is needed, although not considered for using the primary colour.
Semantic Colours
Semantic Colours
Colours were specified based on the need to indicate the current status of the expense claim process. In cases requiring characteristic differentiation, analogous colours were considered for visual harmony.
Colours were specified based on the need to indicate the current status of the expense claim process. In cases requiring characteristic differentiation, analogous colours were considered for visual harmony.
Positive
Indicates positive actions such as saving, completion, and approval.
Indicates positive actions such as saving, completion, and approval.
In Progress
Indicates current actions such as authentication and connection.
Indicates current actions such as authentication and connection.
Check
Indicates review, interest, and acceptance during an inspection.
Indicates review, interest, and acceptance during an inspection.
Negative
Indicates failure, rejection, or other critical states.
Indicates failure, rejection, or other critical states.
Pending
Indicates attention and waiting states.
Indicates attention and waiting states.
Neutral
Indicates on hold, completion, or when a message holds no significant information.
Indicates on hold, completion, or when a message holds no significant information.
Design QA
Design QA
To validate the implemented design on the developed app, I checked the developed screens with the provided designs on Testflight.
To validate the implemented design on the developed app, I checked the developed screens with the provided designs on Testflight.
I visually inspected each screen to ensure the correct application of the design system. To maintain visual consistency, I reviewed and documented elements such as colour, font size, and spacing.
Any areas requiring adjustments were noted, and the documented feedback was communicated back to the development team.
I visually inspected each screen to ensure the correct application of the design system. To maintain visual consistency, I reviewed and documented elements such as colour, font size, and spacing.
Any areas requiring adjustments were noted, and the documented feedback was communicated back to the development team.
Achievements and Changes
through the Project
Achievements and Changes
through the Project
Achievements and Changes
through the Project
Achievements and Changes
through the Project
Streamlined Expense Report Creation
Streamlined Expense Report Creation
Successfully created a more intuitive and simplified expense report creation process, resulting in a significant reduction of over 50% in the time required for reporting.
Successfully created a more intuitive and simplified expense report creation process, resulting in a significant reduction of over 50% in the time required for reporting.
User-Centric Approach Throughout the Project
User-Centric Approach Throughout the Project
Initiated the project with a user-centric focus, conducting comprehensive research, identifying problems, formulating effective problem-solving strategies, guiding the design process, collaborating, collecting and incorporating feedback, and ultimately contributing to the team's successful goal achievement.
Initiated the project with a user-centric focus, conducting comprehensive research, identifying problems, formulating effective problem-solving strategies, guiding the design process, collaborating, collecting and incorporating feedback, and ultimately contributing to the team's successful goal achievement.
Introduction of Design System
Introduction of Design System
Implemented a design system encompassing elements such as colour schemes, icons, and layout, ensuring a cohesive and consistent design across the app.
Implemented a design system encompassing elements such as colour schemes, icons, and layout, ensuring a cohesive and consistent design across the app.
Design QA for Consistency
Design QA for Consistency
Introduced a Design QA process to maintain visual consistency. The documentation of feedback and communication facilitated an effective collaboration with the development team, ensuring consistent and high-quality design implementation.
Introduced a Design QA process to maintain visual consistency. The documentation of feedback and communication facilitated an effective collaboration with the development team, ensuring consistent and high-quality design implementation.
View the next project
View the next project
View the next project
View the next project