In 2019, I joined a brand-new design team working on all of the finance-related experiences for Microsoft employees. I started as the sole designer and later grew it to a team of 5. Employees today have a variety of financial needs and are provided with many different tools and apps. The leadership team saw an opportunity to modernize the entire process, but there was not a clear roadmap or vision yet. Being the first designer on the initiative, I scoped out the project by first understanding the finance domain, then creating concept ideation, storytelling, defining design vision and principles, and implementing high-level mobile design that shipped to the employees. I led multiple workshops to apply design thinking and facilitated design sprints with the product managers, engineers, and business users to create the vision of a multi-year project roadmap. The outcome of my work was well received by the design and product team. The finance design team has since grown from one to five designers with a user researcher. This project represents the typical scale of my work at Microsoft that often starts with something highly ambiguous. I bring clarity and a clear framework to it and break it down into multiple projects, and finally deliver the solution to the users one by one.

To tackle the vast finance space, I spent the first month on the new team connecting with over 20 domain experts, including PMs, engineers, and finance analysts within the company. I learned that there are dozens of different user scenarios, from procuring software to managing team budgets, sourcing suppliers, and reporting company earnings. Each scenario has different personas and user needs, along with multiple existing tools. I understood the high level of all the scenarios and selected four that I believed could have the highest impact on the company. Being brand-new to the finance space, where the tools and processes have been around for decades, I wanted to leverage others' knowledge to jumpstart the project.

For each of these 4 scenarios, I formed a working group with 1-2 business users in the finance organization and 2-4 product managers in the engineering organization who work on the existing process and tools, and we met twice a week. Over the next three months, I led these 4 working groups in parallel and used the same method: I first invited the PM and business owners to share their knowledge on the user personas, existing research, and to walk through the current steps users have to go through to accomplish the core tasks. Once we understood the current needs and pain points, I started to create a persona for each of the scenarios and worked with the working group to illustrate an ideal future experience for each of these, which later would be broken down into multiple features and used for project planning.

Compared to other scenarios that heavily focus on people managers and finance analysts in the company, travel and expense is a scenario that resonates with the majority of the employees, and I thought it would have a significant impact on employees' experience. I will walk through how I design for Abby in detail below.

Employees today can only submit their expense either on a Windows native app, or on the web (see screenshots below). The tool is only accessible from a domain joined PC and the expense process is lengthy. There are over 100k expense reports being submitted each quarter through the web and Windows app and it is certainly not something employees look forward to at the end of their business trips.

I started the project working with the researchers to gain better understanding of the top pain points that resonate across different personas. We interviewed 27 employees total: 19 ICs (individual contributors), 3 admins and 5 managers across 9 countries within Microsoft. I asked about their current travel experience and things that they wish would be easier. I then created a persona named Abby and captured some of the top pain points from the interviews.

I began working on high-fidelity solutions with a team comprising 2 PMs, 2 engineers, and 2 business partners to bring Abby's story to life. We compiled all the features from Abby's storyboard and combined them with past user research to assist us in prioritizing. Our primary focus was quickly identifying the most significant challenge: it's difficult and time consuming to create an expense report.

One of the design principles I had was to build within users' current workflow and avoid creating another tool. Therefore, I reached out to a sister team working on a mobile app called "MyHub." Their mission was to enable employees to complete various tasks within a single app, such as finding dining menus, booking shuttles, and submitting vacations. The MyHub team had recently embarked on their journey and welcomed my involvement in developing the finance-related feature.

The solution below automatically creates the expense reports on behalf of the employees and allows them to quickly verify and submit them with one click (see prototype on the left below). I went through the typical design process, starting from early wireframing, exploring existing mobile patterns, conducting multiple iterations, user testing, design critique with designers, PMs, engineers, and business users, and finally launching the design. The mobile design below took me about 2 months while also working on kicking off two other projects: modernizing our finance closing process as well as the tax tools (Danny and Freya's story from the personas above).

Employees on business trips are constantly on the move and often have limited time to check their credit card transactions. To address this, I saw an opportunity to utilize the notification system. The idea was to notify users as soon as we captured a new transaction from their corporate AMEX credit card, automatically using it to create a new expense report. I collaborated closely with our engineers to understand the capabilities of the API for detecting transactions and their associated metadata. I wanted to enable quick actions directly from the notification, so that users can submit the expense report without opening the app. In working with the MyHub design team to evaluate the existing design language, visual design, and interaction patterns. I quickly learned that many of the design components I need did not exist yet, such as the notification system, so looked into the iOS rich notification and Android's expandable notification pattern and designed the patterns below, which later became part of MyHub's components.

In situations where users need to make changes to the automated expense report, they can easily open and modify the details. I explored various approaches for users to edit the details, including examining similar products with a lightweight user experience. TurboTax, for example, provides two methods for filling its tax form: a "walk through" version where TurboTax presents each question one by one in a logical order, and a "show me everything" option that allows users to view all the fields at once and choose which ones to edit.

Inspired by the UX of TurboTax, I explored two different options for editing expense report details. We conducted A/B testing with 7 users to compare these options. From the user testing results, Option A - "Show me everything" - was unanimously preferred due to its concise process for editing report details. Users appreciated being able to complete their tasks in fewer steps, as it maximized efficiency and saved time. In comparison to the previous expense report, which required users to enter a dozen fields, I collaborated with the finance policy team to streamline the form. We eliminated non-essential fields and retained only four necessary fields based on their input.

The other flow I designed was for users to view their past expense reports and track their status. From the MyHub home page, users can locate the "Expense Report" tile and access a list of their previous reports. I aimed for a clean and easily scannable layout for the list. In one of my initial iterations, I emphasized the dollar amount, which I later subjected to user testing and peer critique.
‍Based on feedback received from users and fellow designers, I made the following adjustments:
1. Users found the green color of the total expenses misleading, as it implied that the expense report was already completed, causing potential confusion.
2. Users prioritized the status of the expense report over the dollar amount, as it was more relevant to their needs.
3. Number formatting and decimal points should be consistent.
4. The right arrow affordance on each item was deemed unnecessary, as it is natural for mobile device users to tap on the item to view details.
However, I did not incorporate the following feedback:
1. Some users prefer to sort reports by status as the default option (I kept the list in chronological order by default as it's a more natural sorting order for most users, and allow user to change using the top right sort icon)
2. Certain power users expressed a desire to see the approver's name for reports in the "In Review" status, as well as the report ID#, submitted date, and additional information in the list view. To keep the page concise and easily scannable, I decided against displaying extra information for each item. Users can access the report ID#, submitted date, and more by tapping into the details.