wireframe-1.jpg

Company Credit Cards (Upside Business Travel)

Enable business travelers to retain independence and administrators to monitor expenses

Overview

Upside Business Travel was an all-in-one platform that helped companies streamline the travel booking process and business travel.

I was in charge of conceiving and implementing new functionality that would allow travelers to pay for travel with a company card in addition to a personal one. Users already had the option to pay for travel with a personal card and be reimbursed by the company.

Length of Project: 3 months
My Role: Lead UX Designer (research, interaction design, UI design)
Tools: Sketch, Invision, and Qualaroo
Platforms: iOS, Android, Desktop

Problem Statement

This project began when Upside realized it needed to close a product gap: In order to compete with other corporate travel sites, we needed to make it possible for Admin to upload company cards and assign them to travelers.

Our customer-experience team had also told us that Upside customers complained that the inability to pay for travel with a company card was a burden for travelers and admin alike.

I understood that there was an opportunity to make paying for business traveler less onerous for all and thus improve customer satisfaction.

Audience

The audience for this feature was company administrators, travel managers, people in finance departments, and of course business travelers.

My Roles and Responsibilities

For this project, I was the lead UX designer, responsible for: 

  • writing, shaping, and running user and stakeholder interviews

  • performing a competitive analyses

  • designing user flows 

  • defining IA

  • creating wireframes and interactive prototypes to test with users

  • conducting usability tests with customers & synthesizing test results to inform UX recommendations 

  • designing high-fidelity mockups for:

    • the checkout page

    • admin dashboard

    • payment seciton

  • helping to define metrics for success

Goals

We wanted to make it possible for travelers to book their own trips with a company credit card, and to give administrators the ability to manage company credit cards, including uploading, deleting, and editing cards connected to past, present, and future trips.

Discovery Phase: User Interviews (Key Findings) 

I kicked off the discovery phase by asking a wide range of customers — including travel and finance managers, administrators, and travelers — open-ended questions, including: 

  • Tell me about the last time you booked for business travel

  • Tell me about how you paid for the trip

  • What are your goals when booking business travel

I learned that it’s not uncommon for business travelers to have to cover upfront travel costs themselves, then file for reimbursement. 

Travelers told me that this was a hassle — and sometimes a financial hardship. Travel managers, meanwhile, complained about the onerous, time-consuming process: Because expenses were often not properly documented and/or submitted, employee receipts had to be chased down.

Discovery Phase: Secondary Research

These user interviews were backed up by data I found from a travel trade publication:

  • 50% of business travelers want to pay for their travel with a company card instead of a personal one

  • 69% of admin want their employees to pay for business travel with a company card

  • 34% of business travelers say paying for travel with their personal cards is a major pain point

  • 33% of business travelers say they spent, on average, anywhere from $1,000 to $2,5000 on business travel — a not-insignificant cost

Ideation: Sketching

From there I started sketching to put thoughts to paper, and generate and explore a variety of ideas and directions as well as to start considering the user flow. (I like to sketch in the exploratory stages of design to get a lot of ideas down fast.)

User Flows

From there I created user flows to help determine how many screens would be needed, what order they would appear in, and what components I would use. I shared these flows with my product manager and tech lead to talk through any technical limitations and constraints.

  • One of the complexities I wrestled with was whether personal and company credit cards should be stored in the same or a different section.

  • I also had to figure out how to set permissions on cards, who could see and/or have access to company card information, and who could modify a company card, including adding, editing, and deleting one when a trip was in progress.

  • I also wrestled with how travelers would know that a company credit had been assigned to them.

Usability Testing

I validated my low-fi designs in usability tests and learned that:

  • Admins expect and need to have access to other administrators’ cards (in the event that, for instance, an admin is out of town)

  • Admin aren’t concerned about their travelers seeing the last 4 digits of a card

  • Business travelers often needed to see the last 4 digits of a card to validate a booking

  • Travelers understood that the cards stored in their payment section weren’t accessible to others at the company.

MVP

Here you can see screenshots from the final design:

  • Any company cards assigned to travelers appear in the travelers’ payment section, along with their personal cards. 

    • Company cards in this section are clearly labeled. Only the last four digits of the card number are visible to travelers. 

    • Personal cards stored in this section are only accessible to travelers.

  • Admins have access to a centralized company payment section where they can assign company cards to a specific group of employees, or to everyone. 

  • On the checkout page, when a traveler pays for booking, the default payment that appears on the checkout is the company card (assuming, of course, that one has been assigned to that traveler).