Credit card on web and mobile: service design and usability

For: Kroger Credit team / 2023 / My role: Product Designer, Researcher

quick summary

Skill areas

Service design
Design research
Design strategy

Problem area

Though it had potential, Kroger’s credit card product was struggling to meet its customer numbers. Our team used a service design approach to review the end-to-end process to create a proposal for a more visible, usable credit product.

Output

Current and future state service blueprints
Overall design & product strategy for future state product
User journeys, personas, among other artifacts
Wireframes / Prototype

Detailed case study

CHALLENGE

Although Kroger’s credit card (powered by US Bank) product had the potential for high revenue, its customer adoption was low. This was partly because of the poor discoverability of the web & mobile application, and generally poor user experience that felt short of customers’ expectations.

Goals of this project:

Understand the end-to-end experience of the credit card product and identify opportunities
Create strategies for increasing visibility of the credit card product
Create artifacts to document current & future customer flows and service touchpoints

TEAM

My role on this project was focused on service design and research. I collaborated with the design team on overall product strategy. Our team included:

Product Manager
Design team: other designers, and design manager
Engineering & SMEs consulting as expert sources

Discovery

Research goals:

Understand the current end-to-end user flow of the credit card application
Identify pain points and opportunities to reduce friction in overall experience

Research activities:

Created service blueprint of applications and where they overlap with other services / systems
Created user flow and journey map of web and mobile applications
Expert interviews with key SMEs to understand the backend processes for the application

Research

Documenting the Current State

Usability review of the current credit application

Step by step screens of the Kroger credit card approval process.

Various forms customers receive once approved

Sign-up process for Kroger credit card, on web

First, we documented the current state of Kroger’s credit card experience, from the first moment a customer learns of the credit product, to approval and daily usage. This became our starting point, and already highlighted some usability opportunities from the start.

research

Review of the Credit Card competitive field

In order to bring the Kroger credit product up to modern standards, we reviewed similar products, such as US Bank Mobile app to understand the usability and product standards that modern banking customers are used to.

defining the future state

Service blueprint of the ideal future state

We created several artifacts when determining our product strategy for a future state:

Ideal future customer journey map
Ideal future service blueprint
Customer persona
User flow of the future state app

We based these decisions on customer interviews, expert SME interviews, usability reviews, and competitive research.

Low Fidelity Wireframes

Before creating a full high-fidelity prototype, we created and tinkered with several rounds of low-fidelity wireframes to get the experience just right.

impact & OUTCOMEs

At the end of this effort, we made the following progress towards our goals:

We pitched this future version of the Kroger product to executive-level decision-makers
We laid the groundwork for a modernized, human-centered experience that will win customer trust and delight
We started moving towards a more cohesive user strategy across the entire credit card experience, starting from when a customer first learns about the credit product.
Filled the gap in our current understanding of the credit experience (most of these had no documentation at all!), allowing for future efforts to be more streamlined and informed.