Designing Limit Functionality for
Credit Card Accounts
July 2022 - Dec 2022
Our vision was to bring a best-in-class service with a flexible, unified experience that provided users with an intuitive digital Interface, consistent experiences across multiple actions, and was easily discoverable by our users.
Disclaimer that some information/images will not be shown due to the confidentiality of some topics.
What was the Scope?
1.
Focus on streamlining the experience at the information architecture (IA) pathing level - refine and reduce steps from clear points of prioritized entry.
2.
Create a scalable, globally consistent experience for 'Limits & Controls' journeys that reconciles US market and Global markets as well as seperate Limits from Card Profile into its own Limits Hub.
3.
Design two parallel sets of designs options that focus on the evolving the current limit functionality forward, and one that looks further into Point of Arrival (POA) possibilities.
4.
Champion a Way of Working philosophy that partners with new UX team members and promotes a cohesive experience across the company including Product Owners, Tech teams, and Design Managers to gain buy-in internally.
Position:
UX Designer
​
Worked with a 3rd party agency which included a senior designer and design manager. After hi-fidelity work, 2 more designers were onboarded to the project to help with final iterations.
Application Use:
Mural for Concepting & Journey Mapping
Sketch for UI design
Abstract for Collaboration & Versioning
Confluence for Collaboration & Versioning
Jira for Ticketing
Defining
What is an Imposed Limit?
A Card Account limit is a money value placed on a Card Account that imposes a restriction on the amount a user can spend based on the predefined limit.
​
ex. An admin sets a $2,000 limit on your Card, you may spend up to $2,000 until you are blocked from spending more that month.
​
These limits are changeable by the administrator and can be limited further in the use of an MCC code which blocks a specific merchant, such as Target or Starbucks, or an entire industry, such as Cruise Lines or Bus lines, which prohibit use of all companies that would flag a transaction in that line of business.
*This will take you to an external website if you want to know more!
Concepting
Designing a new way to look at Limits!
Originally, limits looked something like a link on your card profile page. We found through a user insight test done earlier this year that this feature was often overlooked and seen as a scary task for most.
​
We set out to redefine the entry point and provide a more seamless experience that offers guidance and additional options to help users understand how these changes will affect their customers.
User Journey Maps
We started by defining the original user journey using screenshots of the flow in Mural which helped to visualize the current experience.
Then we built 4 variations which expanded the scope of the limits, and ended up in a proposal for a new Limits Hub which would serve as a base of operations for any Limit based requests. We really wanted to understand how many steps users would need to take and how we could keep this to a minumum.
Designer Limits Workshops
Limits Workshops conducted with Stakeholders
User Testing Research
Here are some stats that the User Research team had provided us with on research they had done earlier this year.​
​
The research objectives were understand What the needs of the users are, what their pain points are, what ideas do they have for the feature, and what other platforms do they use to manage limits? (As some users also manage more than one company or do so on a different application all-together).
​
These sessions took place over two 75-minute remote panel interviews with varying users in Global, US, and small markets (10 total).
User Needs:
"Ability to place limits as necessitated by their unique policy, compliance, individual, or spend needs."​
​
"Ability to create limits based on travel volume and/or role."
Pain Points
"Users struggle with the interface and the number of steps and time needed to access limit-related reporting and to place limits."
​
"Users implement workarounds instead of use our application to set or build limits and controls."
​
"Users cited lack of integration between spend management and related reporting as a main pain point.
Change Req's
1. Navigational changes.
​
2. Breakdowns by spend.
​
3. Wants the ability to manage limits within on page.
​
4. Develop reporting tools.
Low-Fi Journey Success!
During the initial construction of these journey maps, we were constantly meeting with key stakeholders to confirm the direction in which we were heading was aligned with their vision of the product.
​
We identified our key users and our MVP design items that were essential to the design. We also talked with our global client users to gain understanding in key insights they looked for while performing limit changes.
​
After a few working sessions we found an initial concept that everyone would be confident in moving forward with. These concepts below on the left show general boxes for key items which are listed on the right image. These serve as a very loose guideline and can be subject to change as the design phase often holds many surprises.
Designing
Mid-Fidelity
Once the low-fi designs were approved, we immediately moved on to the mid-fidelity designs. Here we focused on creating well thought out journeys rather than high level UI design.
​
We did this through the loose UI design and blocking similar to the image used above, but at a more complex level and without color.
​
We also would deep dive into the functionality use of each button, widget, and modal on the page to a high level and how they would affect the user's flow. There were many paths that we could take to display the information users needed to see but through iterative design and design reviews, as well as small user testing sessions, we found a happy path forward.
​
This process took a few weeks as there were a lot of key decisions to make between the key stakeholders, design, and the tech team that would alter the way we display information.
Re-Engaging
Wrench in the Design Phase
Between med-fi and Hi-fi a few key events happened that extended our timeline causing us to adjust how we approached this project:
1.
My design group originally had a senior designer working alongside the project. Due to work-related issues, they were asked to leave but left immediately which left myself and the 3rd party senior designer to lead the work.
​
The 3rd party agency was originally contracted to help for only the conceptual design --> Med-Fi design stages but were extended to support the project until completion.
2.
Due to my senior design lead leaving, I stepped up to internally lead the pod which meant taking over both tracks of work, including Card Management 'Cancel & Edit' Card Accounts and hi-fidelity for Limits and Controls while also leading the redesign of Global Card Applications.
​
I still had a senior designer to lean on at the 3rd party agency as well as a great and supportive internal team with multiple senior designers and a design lead to help foster these designs through internal design reviews and coffee chats to build my skillset. I was also asked to present a lot of the work to key stakeholders and lead design reviews with tech, user testing, product, and internally for these projects.
3.
Our previous Product Owner left for another position at a competitor which meant she had to leave the company immediately. This put a strain on the project because a new product owner had to onboard which slowed down the project's timelines as well. Luckily, they were an ace at gathering knowledge and had a good relationship with tech already to find us information required quickly and give quality feedback.
Design
Hi-Fidelity Design
My favorite part of the project!
​
In this phase we focused primarily on UI design and layout. We utilized the Design Language Library (DLS) to pull colors, buttons, widgets, spacing guidelines, fonts, and much more to build a cohesive best in class experience that would be seamless from any other page across the platform.
​
We also met with tech consistently to confirm that designs aligned with their needs as well as product's.
​
Here are some of the Bulk Limit Change final flows!
Disclaimer: Some information/images will not be shown/altered and have changed color due to the confidentiality of some topics.
My spec design sheet for Bulk Limit's Widgets
Bulk Limit Change Designs
Single Card Limit Change
My spec design sheet for Single Limit's Widgets
Inline Editing of a Limit - Net New Feature
User Testing
Rapid Labs Engagement
As a team we were very adamant on testing these new designs through our Rapid Labs partners. Through these tests we aimed to gain an understand of if we solved our users pain points through the redesign process.
​
We had a limited scope of what we could present due to testing capacity so we opted to spark a workshop with product and gain insight into the top 3 areas we wanted to test first.
​
We decided that Entry points A/B testing, Inline Editing for Single Account, and Bulk Modify Limit were the most important areas of interest as our MVP launch would only include Single and expand to Bulk functionality in MVP2.
​
Sadly, I was not able to see the testing results as my time was cut short, but I was fully able to build out the test and helped research understand the insights we are looking to gather before launch. Through our 1:1s with a few users that were able to jump on quick meetings we found they really enjoyed the new applications we were bringing to the feature.
​
Thanks for reading!
< Home Page
