Credit card on web and mobile: service design and usability
For: Kroger Credit team / 2023 / My role: Product Designer, Researcher
Quick Summary
Overview
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.
role
Product Designer, Researcher
Responsibilities
Research, Artifact creation, Strategy, UI& Prototyping
collaborators
Design team, Business, Product Management
duration
1 year
Goals
Define a modern and strategic future state for the credit product, integrated with Kroger’s loyalty program
Create an MVP plan for a new credit product
Increase household % of credit card users
RESULTS
$100M projected 10-year ROI
10% revenue growth during this time period
110+ touch points identified
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
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
Gathering Insights
Competitive analysis revealed that Kroger’s credit card product was falling short of competitors’ due to poor discoverability and vague offerings.
emerging themes
Discoverability of product: Customers need clear, highly visible marketing to learn about the product. Our competitors used high-value spots on their front pages to highlight their credit offerings.
Clear, memorable offerings: Several competitors have one-liner offerings — “instant 5% off your order”, or “5% cash back.” These offers are easy to remember and consider.
Modern, trustworthy mobile experiences: There was a clear need for the mobile experience of managing the card to inspire trust and be frictionless, since customers are used to high-level technology and safety functions from bank mobile apps.
Defining the 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.
Service blueprint of the ideal future state
Credit customer persona
Future state app screen flow
Ideal future state customer journey
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.