The current (1) Recent Transactions [Customer Dashboard] and (1) Transactions List [Account Dashboard] do NOT provide any helpful product recommendations or offers to help customers grow their money.
Background
We need to drive growth. Since the transaction are one of the top reasons user log into the app, it’s a great opportunity to display contextual offers.
Business Objective
Create a relevant touch-point for offers/recommendations based on customer transaction history, so that the offers/recommendations are much more curated and tied to the customer’s behavior
Benefit for the User
Increased ease & findability of offers/recommendations based on transactions behavior.
Increase relevancy by placing an offer/recommendation next to the transaction, so that it makes the most sense to customers.
Competitors
I reviewed some direct and indirect competitors.
Findings
Recent transactions
Only 2 (Citi & Mint) of the 7 apps reviewed had recent transactions on their dashboard
The placement are higher on the page than USB
If a user tapped a recent transaction, it went to the transaction not the account like USB
Transaction inline offers
2 (Chase, Citi, Mint) out of 7 banks had inline offers
Chase’s & Citi’s aren’t dismissible
The inline offer led to the transaction details screen w/ an entry point to the offer. It acts as a teaser, since a user has to tap the transaction to reveal the offer entry point.
Citi, Chase, and Mint are the only examples found
Citi reuses their inline offer on multiple locations.
Citi & Chase have similar UI
Mint is the only one that’s dismissible
Mint has an inline offer on their all transaction, but not recent
Apple has an inline offer in the App Store
Process
Discovery
Understand user
Understand current process
Collect existing user feedback
Design
Reduce navigation links from 4 to 1
1 screen for entire process Add dashboard notifications
Use Shield components
Alignment
Preview design with product
Ensure base requirements met
Determine scenarios for user research
Research
Observe research sessions
Evaluate feedback
Determine design adjustments needed
Discovery
Understand user
Understand current process
Collect existing user feedback
Design
Reduce navigation links from 4 to 1
1 screen for entire process Add dashboard notifications
Use Shield components
Alignment
Preview design with product
Ensure base requirements met
Determine scenarios for user research
Research
Observe research sessions
Evaluate feedback
Determine design adjustments needed
Ideation
We use the same icon for all offers within this component
We have a different icon per offer
This would require using a Shield decorative icon or creating your own
Creating your own will add scope & there’s risk of low quality icons being shipped
We have a default w/ an option to customize it
Background & outline colors
Typography
Iconography
Research
In four studies between 2020 to 2022, recent transactions were repeatedly identified as one of the top five reasons a user would visit the app.
We should not allow users to filter the transactions on the dashboard.
Swiping offer to reveal actions: I don’t see tis too often outside of email client apps, but i might be missing it.
Reusability
Design based on what already works.
We reuse transaction status.
We reuse tab views.
Existing icons also included in new design
Card view is a part of our design pattern so we reuse it.
Reuse as many existing font styles.
If something seems off (font, spacing, etc.), please contact Nate Pahl to resolve it.
User Flow
Recent Transactions flow
When a user taps a transaction, it should go to Transaction Details screen. This is a change from the existing component.
In-line offer flow
When a user taps an offer call-to-action, it will do one of these three things:
Open a web view
Navigate further into the app
Opens up a sheet (full or half screen)
Low Fidelity mockups
High-Fidelity Designs and Prototype
User Testing
To understand the views of other users about this part, I’ve collected data from the users.
