Product Overview
The Oracle expense chatbot is for users to create expenses in a lightweight conversational way.
This project focuses on the MVP design on Microsoft Teams.
My Achievement
I shipped expense chat experience on Microsoft Teams from end to end.
I worked with the product team and defined the roadmap for future development.
My Role
UX Designer
Team
2 Designers
UX Writer
Product Managers
Dev
Duration
2 months
Jan 2020 to Mar 2020
The Challenge
Along the whole design process, we need to take into consideration of being consistent with existing products and work with the technical constraints.
User Flow
We work with the product team on the roadmap for what features should be prioritized for MVP and what can be held for future versions.
For MVP, we focus on the submitter side welcome experience, expense creation, editing, corporate card matching flows. Also, we take the edge cases in each flow into consideration, such as handle required field missing from user input.
Therefore, I drew this user flow to demonstrate the user flow for MVP product.
Explorations & Testing
We started to design based on the user flow and refined the logic as well.
In the process, we came up with different options that we are not sure which one best communicates with users. Therefore, we bring these options to testing to hear real user feedback.
We conducted two rounds of user testing, totaling 12 sessions.
First round of testing
- Different orders to show fields in the expense form
- Ask conversationally and bring up the expense form when there is missing information
- Different visual design options for summary card
- Wording to describe expense payment method that didn't use corporate card
- General feedback on the chatbot experience
Second round of testing
- Different visual options to show a potential corporate card matching and if the
overall matching flow is clear
- If it is clear to change expense type from dropdown menu and pop a new expense form
- The order to show expense items for checking status
- Different visual design options for summary card
Final Design - Example Flows
We validated our design from the usability testing and designed the whole experience including the edge cases.
Here are some example flows to showcase our outcome.
Flow 1: Create expense through receipt and edit conversationally
This flow shows a happy path how OCR gets all required information from receipt scanning. Also, it shows how user edit expense through conversation, which we also designed clicking on Edit button to surface the form again and edit.
Flow 2: Create mileage expense and fill in missing field conversationally
This flow shows how to create a mileage expense, which is similar to how to create an expense manually. Also, it demonstrates how user can either provide the missing information through conversation or fill in them in the form.
Flow 3: Corporate card matching and change auto-submit preference
This flow shows how to match a corporate card expense to the corporate card transaction that flows into the system. Also, it show show user can turn off auto-submit and decide when they want to submit the expenses.
Expenses Chatbot