Role & Responsibility

Team: Project lead and designer, with 3 Web Engineers & 4 Mobile Engineers
Responsibilities: Project definition, design research, user testing, UX/UI design
Length: 5 Months

 

The Challenge

As TravelBank moves into the corporate card space within Expenses, how might we enable customers to efficiently manage all their corporate cards and associated transactions across TravelBank’s web and mobile experience?

 
 
 

Business Goals

In 2020, TravelBank wanted to move into the world of corporate card management with a new US Bank partnership. The ability to manage corporate cards would help TravelBank stand out against its competitors by:

  • Bringing in new revenue channels

  • Retaining existing customers who needed a corporate card management solution

  • Solidify the partnership between US Bank and TravelBank

 

The Solution

I led and designed the first experience for Travelbank's new Card Management experience across web and mobile that was successfully launched in October 2020.

 
 

Context, Collaboration, Project Definition

 
 

Collaboration

Through vague ideas to more concrete plans, I worked closely with TravelBank’s Director of Product and stakeholders from US Bank to fully understand and define this project.

Project Definition

US Bank’s existing mobile application already gave its customers the ability to create and own virtual corporate cards (named Instant Cards). I was tasked to create an experience that would enable TravelBank customers to be able to create and manage virtual corporate cards directly within TravelBank and allow these cards to sync with US Bank’s mobile application.

After understanding the feature goal at a high level, I dove into understanding the needs of the users in terms of their goals and ultimately translating them to necessary functionalities in a MVP. From various conversations, I defined that two main personas would be using this corporate card management experience: A Finance Admin and the Employee.

  • Finance Admins would interact with ‘Company Corporate Cards’ to manage organization-wide cards and transactions

  • Organization Employees would interact with ‘My Cards’ to manage all their own cards and associated transactions

 
 
 
 

Challenges and Constraints

 
 

Engineering Constraints

  • Ambiguous requirements - In the beginning of the project, requirements kept changing and the team had to pivot a lot.

  • Delivery time and scope management - When this project was introduced, a dedicated deadline meant re-prioritize Engineering bandwidth and understanding the correct scope for a MVP. I discussed feasibility and level of effort with the Engineering team throughout the process and we cut functionality when necessary.

Communication Challenges

  • Communication with stakeholders - heavily relied on US Bank stakeholders for information and context when information wasn’t readily available

 
 

Design Iterations

 
 

This project was broken down into several design problems.

Problem 1: Card Management Experience across 2 Persona Needs

  • Ability to view multiple lines of employee and card information at once

  • Sort and filter functionality

  • Additional for Finance Managers:

    • An entry point to create cards to link to US Bank

I started exploring wide on the different visual combinations for card management as well as test how the user would sort, filter, and edit information if necessary for both personas. As I got more feedback from user testing and communication between the team, my designs shifted to hone in on certain interactions that would enable the admin to scan through various information and edit quickly if necessary.

 
 

Problem 2: Transaction Management Experience across 2 Persona Needs

  • Similar to card management, a way to view multiple lines of transaction and statuses

  • For employees:

    • Improve the functionality of assigning corporate card transactions to expenses

Exploring transaction management table was interesting because for each persona, the treatment for this screen was different. Company admins want to view mass information at once whereas employees wanted to be able to easily take action on individual transactions.

Customer interviews helped me transform this screen to be more personal for the type of user.

 
 

The Final Solution

 

Company Card Management

Finance Admins now have a central spot to view all company card holders and respective transactions.

 

Highlight: Central Bank Connection Set Up

In hopes to bring physical corporate cards from imported bank feeds and US Bank Instant cards flows together, I designed a new ‘Create New Card’ component that would serve as a consistent entry point for all Finance Admins.

If an Admin was a US Bank Instant Card holder, they would see a gated modal before entering in the Instant Card creation flow.

 

Highlight: Card Details

Admins can click into individual cards to reveal more card details including status, credit card number, billing address, tags, and employee information.

If admins haven’t finished activating their Instant Card from the flow above, they’re given an entry point to finish the process.

 
 
 

My Card Management

This feature was created after the understanding of TravelBank’s Card Ecosystem. Employees now have a central spot to view all personal and assigned company cards.

 

Highlight: Reveal Card Number

A key function for the employee side was the ability to reveal card number.

To allow online purchases for non-iOS users, employees now have the ability to reveal the 16-digit code with a reveal flow by entering their email address.

 

Highlight: Bulk Assign Transactions

Another key function for the employee side was the updated ability to bulk assign transactions.

 
 

Additional Features

 

Since Instant Cards are a virtual card added to a mobile wallet, it was essential to bring the platform features to mobile. I converted the employee experience of ‘My Cards’ into a mobile interface.

 

Outcome

 

Impact
I executed the vision for corporate card management and help solidify TravelBank and US Bank’s partnership for 2020.

In addition, this paved the way for additional expense enhancements. I’m currently working on exploring ways of how our transaction management can transform beyond corporate card expenses.

Stakeholder Communication is Important
Throughout this project, I spoke with various stakeholders and customers to help drive my iterations. My initial vague thoughts when receiving this project became more concrete as I had more conversations.

Fight for Good UX
Since this project scope was big, I debated with our head of engineering on not cutting scope to keep good UX. For example: initially filter and sort abilities were taken out of the MVP but was eventually implemented after gaining buy-in with the engineers directly working on the feature.