Background
The goal of the Benefits Hub re-design project was to improve the Chase consumer app's benefits experience so customers would consistently engage and use their benefits.
My role
I was responsible for the delivery of the new Benefits Hub which included leading small working groups to design various features within it and working with other teams such as our Design Systems, Channels, Accessibilities and Shopping & Offers teams to make sure we're all aligned on the objectives and value add for our customers. I also contributed to higher level design discussions, documented audits, prepped research assets, created prototypes for presentations.
Team
- 3 designers
- 3 product owners
- 3 content strategists
- 15 developers
Current experience
From the analytics and some qualitative research, we knew that customers did not know how to use their benefits and the engagement rate and return rate were very low every month. As we did our UX audit, we also noticed there were visual and interaction inconsistencies compared to other part of the app.
Vision
Our vision was for our customers to know their benefits, understand their benefits and like their benefits. To do this, we focused on simplifying content, including more visual stimulation, establishing some interactive patterns and including customer personalization.
View prototype here
Messaging Carousel
One feature we created to engage customers in learning more about their benefits was to include a messaging carousel above the fold in the benefits hub. The user goal of the benefits tiles within carousel is to understand their benefits and perform an immediate action.
As I was consolidating our concepts for the messaging carousel, I realized we were accommodating for a lot different benefits and each tile was slightly different.
Design dilemma: Types of statuses
There were a lot of different benefit statuses we used in our concepts so I needed to figure out how these statuses can encourage the customer to engage with the benefit rather than clutter their experience.
Process
To address this dilemma, I proposed to document the lifecycle of a benefit so we can understand at which points might there be info that would be helpful to the customer.
We first reviewed all the benefits and grouped them into 2 categories based on the customer's actions: activation vs. redemption. The activation category requires customers to turn on their benefit before they can use it. The redemption category means the benefit is ready for the customer to begin using.
Then we documented the activation and redemption lifecycles and highlighted a few areas where we thought info might be important to address to the customer. We ran this by the product and dev teams and there were 2 constraints we needed to consider; we needed to be careful of showing dates due to our partner agreements constantly changing and the other was a tech constraint because we didn't have data of when a customer's membership would end.
So to address these constraints we decided to change the statuses to something more generic that would still provide enough info for our customers.
Solution
Once we defined the statuses, I explored some visual options within our design system to present them. We originally designed to have the status within the description area but we wanted the focal points to be on the benefits content. So instead, we moved our statuses to the top right corner as a secondary info area.
Design dilemma: 1 or 2 entry points
Another dilemma we came upon was whether or not we should have 1 or 2 entry points. Would customers read the tile and immediately perform an action or would they read the tile and want to know more details before they perform an action?
Process and Solution
After some qualitative research, we discovered most customers would actually prefer to learn more details about their benefits before taking action. So we moved forward with having 1 entry point that would take the customer to the benefits details page.
The next thing we needed to consider was the button content. How can we convey to the customers they were being taken to the benefits details page to learn more and take an action there? We tried many options but we landed on language that was more concise and actionable knowing that customers would expect to see details either way.
Insights Tile
Another feature we proposed was using data insights to increase awareness of a customer's card benefits. Some ideas we had were:
After much consideration to the customer, product needs and tech constraints, we moved forward with concept 2 as being the most valuable for the customer and feasible within our constraints. Next, we needed to determine which common benefits are lesser known and shared across all the credit cards we support. We did an audit of all our credit card benefits and created 2 categories of benefits we can showcase: accelerators (card points) and travel insurance.
From here, we started exploring different visuals:
Icon vs. Photography
During our design process, we considered 2 types of visuals to highlight our content: icon or photo imagery. We assessed our visual patterns, how these tiles would sit within the overall benefits hub page and design system constraints. Though we liked how clean the icon visuals are, we agreed that what would fit best with all the considerations would be the photo imagery tiles.
Measuring engagement
Another item we discussed was how we might measure customer engagement. This was tricky because we did not have data to track customers' usage of benefits and we knew customers might not immediately take action on a benefit. Some ideas we had were carousel tiles that could be swiped, links associated to each benefit and a like/dislike button. However, we didn't think any of these ideas would provide for a good customer experience so we decided to track initial engagement and interest based on how long the customer stays on the tile.