’25
Bank of America Lifestyle Benefits Expansion

A $1M program, expanded down to $100k.

The page was written for clients who already knew the program. Now it had to work for clients who had never heard of it — and carry a lower tier of offers underneath the premium ones.

RoleProduct Designer
Timeline2025
LiveMay 2026
PlatformResponsive web
CompanyBank of America
Design ToolsFigma, FigJam, Photoshop
Lifestyle benefits landing
Overview

The audience changed. The product hadn’t.

What lifestyle benefits are. Offers from premium partners — hotels, cars, wine, fashion, culture. Clients get them for banking with Bank of America, not by spending points.

The expansion. The program used to need $1M+ in combined balances. It opened up to $100k+ — the Preferred Honors tier — and a lower tier of offers was added for them, underneath the premium set already there.

The tiers. Preferred Honors clients see the lower tier. Premier clients see both, which is why they get the Premier toggle, to hide the less premium half.

The new audience. Clients at $100k know premium hotels and restaurants. They just don’t expect them from their bank, so the page had to explain itself up front.

The Brief

Let more people in, keep the top tier distinct

The brief asked for expansion and differentiation. We were rebuilding for both, so the offer grid and the navigation got improved along the way.

Premier and Preferred Honors want the same things. Premier’s offers are just bigger, and Premier clients see the lower tier too, so it was one page from the start. The explaining had to happen on the expansion side. A lot of the newly eligible clients weren’t familiar with these offers, and the page had to say what they were.

Expansion — Preferred Honors
Goal
Extend access to clients with $100k+ in combined balances, broadening reach while keeping the program feeling exclusive.
Demand
A page that explains itself. The newly eligible clients weren’t familiar with these offerings — a private club fitting, a suite upgrade — because the program had never been shown to them.
Differentiation — Premier
Goal
Elevate the experience for clients with $1M+ in combined balances so they keep feeling recognized, valued and distinct.
Demand
A way to tell the two tiers apart on one page. The premium offers Premier already had stayed theirs and they see the lower tier as well, so the answer was the PREMIER chip and the Premier toggle that filters on it — the most substantial piece of interaction in the project.
The Page

From a list of perks to a page that explains itself

Just for you

Before
Before — lifestyle benefits landing
  • Hero assumes you know what the program is
  • Search floating over the hero video
  • FAQs as a top-level tab, before a client has seen a single offer
  • One fixed promo banner
  • Tier names have since been retired — this view is now Premier
After
After — lifestyle benefits landing
  • Hero says what the program is
  • Tell me about new offers sits right next to the search bar
  • FAQs as an accordion at the foot of the page
  • Promo slots at the top and bottom that change by offer type and season

The FAQs moved because clients don’t have many questions before they’ve seen anything. Now the page runs header, then offers, then FAQs. The promo went from one fixed banner to a system, so the business gets options instead of squeezing every promotion into one shape.

Explore all offers

Before
Before — Explore all offers with category pills and a sort dropdown
  • Category filters and sort at the same visual weight
  • Sort options hidden inside a dropdown
After
After — Explore all offers with category icons and sort pills
  • Icons on the category nav, so it reads as the main path
  • Sort options pulled out of the dropdown into pills you can see on load

The offer card

While we were in there, the grid got a pass for premium feel and usability. Four changes to the card, all of them bringing the page in line with Bank of America’s design system.

Before
Before — offer card with a blue category eyebrow, a Learn more text link and a divider rule
  • Blue category label above the offer name, which reads as a link
  • Learn more as a text link under the paragraph
  • Small label, bold body copy
  • A divider rule between every row
After
After — offer card with a black category eyebrow and a Learn more secondary button, no divider
  • Black category label — nothing that looks tappable but isn’t
  • Learn more as a secondary button
  • Larger label, lighter body copy
  • No dividers

How the two tiers differ

The hero uses different photography and different language for each tier. Preferred Honors leans on “endearing and memorable”; Premier leans on “iconic and bespoke”. Same idea, said a level up.

Premier clients see the Preferred Honors offers as well as their own. The Premier toggle is what separates the two, as shown below.

Toggle off — every offer they are eligible for
Premier view with the Premier toggle off
  • Both tiers in one grid, everything they are eligible for
  • A PREMIER chip marks the exclusive offers
Toggle on — the tiles re-render, Premier only
Premier view with the Premier toggle on
  • Premier-exclusive offers only
  • One tap to switch it back

Off by default. Turning it on is the only thing on the page that leaves a client with fewer offers. A Premier client seeing six where their Preferred Honors friend sees thirty would read the upgrade as a downgrade.

Dashboard

A dashboard built for people with nothing in it

The old dashboard opened with three counters, chips to filter them, and its own search field. A newly eligible client had nothing to put in any of it.

Before — seven saved offers, three counts
Before — saved, redeemed and upcoming counts

Saved, redeemed and upcoming, then chips to filter between them, its own search field, and its own sub-navigation.

After — nothing saved yet
After — saved offers with recommendations

“You haven’t saved any offers, so here are a few you might enjoy.” No counters, no chips, no second search.

For most of the clients the page was about to pick up, all three counters read zero, the chips filtered nothing, and the second search searched an empty list. That’s a thin welcome to a benefit you have just been given. The new page says so in one sentence, then answers it with a few offers worth starting on.

Top offers redeemed by Preferred Honors clients like you

A new client wants to know what do people like me actually use this for, and the second heading answers that by naming their tier. It covers differentiation too: a Premier client sees what Premier clients redeem, not what everyone redeems.

Placement system

Two zones, a few shapes each

The old page had a single fixed promo banner above the grid. Every seasonal change was a design request.

Now there’s a zone above the grid and one below it. Each takes a few different shapes, depending on what’s running and the time of year. The grid itself doesn’t move.

Above the grid

Featured category pair
Featured pair — two offers on a tinted ground with Show more
  • Two offers from the same category, on a tinted background
  • Never mixed — no travel offer sitting next to an auto offer
  • Show more opens Explore all offers, filtered to that category
Banner — a category
Category banner — full content width, with View Automotive offers
  • Full content width, sitting under the pair
  • The category itself, not one partner
  • View Automotive offers — the button names what it filters to
Banner — a campaign
Campaign banner — full content width, with View Labor Day offers
  • The same component, seasonal instead of category-based
  • View Labor Day offers — a campaign gets its own filter on Explore all offers

The top zone runs one thing at a time: two offers and a banner for the same category, or a campaign in the slot. Either way, every button lands on Explore all offers, filtered to match.

Below the grid

Editorial
Editorial placement — full-bleed image with a floating offer card
  • A full-bleed image with the offer card floating over it
  • For experiences rather than discounts
Campaign row
Campaign row — three offers under a shared campaign title
  • Three offers under one shared title
  • For a seasonal push where the theme matters more than any one partner or category
Brand banner
Brand banner — full-bleed partner image with a floating card
  • The same floating card, at banner height
  • For one partner with a strong image and a simple offer

The bigger, image-led shapes go below the grid. Clients who came to browse get the grid first. Clients who scroll all the way down without saving anything get a second chance at the bottom, instead of hitting the FAQs and the footer.

The holiday campaign

The campaign banner ran the holiday push a season before the expansion shipped, in the same slot above the grid. Desktop sets the copy between two crops of the same photograph; on a phone there is no room for that, so the image moves below the copy and the button whole rather than being squeezed into a strip.

Screen photographs rather than exports, so the type is softer than the artwork it was drawn from.

Desktop
Holiday campaign banner, desktop — gifts photograph either side of centred copy and a View gift ideas button
In place on the page
The holiday banner in place on the desktop page, between the masthead and the offer grid
Mobile
Holiday campaign banner, mobile — copy and button stacked above a full-width gifts photograph
In place on the page
The holiday banner in place above the offer grid on a phone
The Rest

Everything else that shipped

These are some of the smaller pieces that launched with the rebuild — states, settings, content, and the paths between them.

Notifications
Manage your offer notifications

Enrollment and preferences. A monthly notification for new offers, so clients don’t have to remember to come back on their own.

Offer detail
The offer detail page — partner mark, the offer, terms and the actions

Partner mark, the offer in a sentence, the terms, and the way out. For most offers this is the last screen we control before a client leaves for the partner’s site.

FAQs
The FAQ accordion with one question open

Off the top nav and down to the foot of the page, as an accordion — where a client is more likely to have a question.

Unique ID
The Lifestyle Benefits Unique ID dropdown — the code, copy and print

A few offers need a Unique ID at the point of sale. Simplified from a full-page takeover to a dropdown, reachable from anywhere on the site.

Outcome

The expansion is still being measured

The rebuilt page went live in May 2026. It hasn’t been through a full reporting cycle yet. The first numbers that cover it land at the end of this year.

The holiday campaign banners are the exception. They ran a season before the expansion — the pair shown above — and offer clicks for that campaign were up over 75% against the same campaign the year before. That figure belongs to the banners, not to the rebuilt page.

Reflection

What it taught me

⚖️

Exclusive only means something next to someone else. A Premier client doesn’t compare this year’s page to last year’s. They compare what they can see to what someone a tier below can see. That is the whole reason the Premier toggle is off by default. Designing the top tier turned out to be mostly about the tier underneath it.

🧩

Not everything is a design problem. The offers, the tiers and the $100k cutoff were set before the design work started, and some of the limits around them were technical or commercial rather than design. This project focused on everything downstream of those rules: how the grid read, how the two tiers sat next to each other, and what a client saw on day one with nothing saved. The constraint was the brief, not an obstacle to it.

More projects
2019 Fitness Consumer App Zumba® — ClassBuzz View case study