Traditional expense management systems are bureaucratic, have extensive steps and work at the slow pace of large enterprises.
This levels of checks and monitoring might be necessary in large organizations, but startups with team sizes less than 100 need better solutions, free of this legacy baggage.
For smaller spends, it's not very different, the process of verifying, reconciling and reimbursing works within the same systems.
Large vendors can absorb some delays in payments, but individual employees shouldn't have to wait two months to be paid for the dinner they bought a prospect.
As a startup building from scratch, we had the huge advantage of being able to address this context of needs to a T.
By putting startup culture in the center of our design process, we were able to become South-east Asia's preferred startup banking service almost instantaneously.
We have a basic V1 already functioning, and the first step in this project was to build consensus on goals for the cards product.
After a short research print, data analysis and gathering feedback from customer-service agents, I outlined the problems that could be addressed by the product team.
Understandably, the business team hadn't considered how the physical cards will be represented on the app, adding a layer of complexity.
In the initial explorations, I developed solutions that were incremental.
However, we were unable to proceed with any of these solutions due to one of these reasons:
Card visual was regulated by visa and we couldn't be as experimental as we liked.
Key problem of accommodating physical cards had not been solved yet.
At this point, I decided to zoom out from the framework that had been shipped in V1 and analyze the problem afresh.
I took the approach of meeting user needs at different stages of decision making, and designing the information architecture to respond to those needs directly.
Designed a sleeve graphic that could be used flexibly for both vertical and horizontal orientations.
Developed design system for new elements and ensured that they perform well in all contexts.
This had been one of the most common queries to customer support:
"How do I find my card number?"
The white tab labelled "show card number" was easily overlooked and caused a lot of confusion to users.
In this segment, I explore different approaches to highlight this interaction and add clear affordances.
I had recently implemented budgets and card limits on individual virtual cards, and took this opportunity to develop the design elements to communicate card status on all card pages.
In response to the way we set up spend controls, users were increasingly operating multiple cards for different purposes.
I designed the card gallery in a three-dimensional gallery with spatial elements to evoke a sense of flipping through multiple cards to locate the most appropriate card to use.
Making room for the growing need for multiple cards used by an employee for different purposes, budgets, team projects, etc.
Clearly distinguishing between physical and virtual cards
Shifted card interactions to the bottom section, where we could provide focused interactions, with reduced errors while handling sensitive information.
Added “copy credentials” for smoother usage.
Key information about card status, balance, intended use, etc are located together to help make a decision about which card is to be used for different purposes.
With this revamp, I modified the card exploration flow, credential reveal interaction, and several elements of key information delivery.
Effectively, the card space had reduced by 30% unintentionally, as a result of pursuing radical efficiency, while navigating regulatory constraints.
Flow for configuring a new physical card.
Immediate: Support tickets related to card number were eliminated (~10/week ⟶ 0)
North star metric: net transaction volume increased by 47% that quarter (was already growing at ~20% on average)
Integrated into design system, downstream new features fit into the modular system more easily.
Benchmark setting: “(the card page) feels so good, that I expect the same on other apps, but they disappoint me” – feedback from a founder during a review call
Confidence in user-centered process
Was not on product roadmap ⟶ Fast turn-around
Building a case for high-level design changes
Multiple stakeholders involved
Promoted to a Product Design Manager 🎉