Brighthouse Financial needed a website that incorporated its new brand visuals and provided information and education for people looking to invest in their future.
Most people think of their future selves as strangers, making it hard to save in the present.
By leveraging insights gained from behavioral economics, we created a website designed to inspire consumers to act on behalf of their future selves today.
Through great design, thoughtful tools and targeted education, we helped Brighthouse make the retirement-investing process feel simple and approachable.
Brighthouse Financial, a new annuities and life-insurance firm established by MetLife, had a huge challenge to overcome: people tend to avoid thinking about retirement. With the varied and complex options for saving and investments that exist, some people have a difficult time prioritizing tomorrow’s retirement needs over what feels like a hassle today.
To help overcome this aversion to retirement planning, Brighthouse asked our team to create a website that was simple, transparent and delivered value to potential customers. This site would be many potential customers’ first contact with the industry in general, so it would have to present an accessible and approachable front, while providing visitors with enough information to make the right decisions for their futures.
Our mission was clear
We needed to leverage a combination of behavioral economics, great design, thoughtful tools and clear educational content to help Brighthouse familiarize people with the needs of their future selves and inspire action.
While we were at it, we’d make things as uncomplicated as possible on the new site. For us, it was simply a matter of framing the conversation differently and giving people experiences that are actually built for humans with regard to content, interactions and visual design.
And that started with taking a look at Brighthouse’s newly created brand and visual identity system — one that’s rooted in simplicity, transparency, optimism and strength.
At the core of that system is the visual of color progression, which symbolizes the opportunity for accumulation and growth that Brighthouse offers. But within the digital space, it also represents the brand’s ability to break things down into steps, offer guidance and track progress.
Our role was defining what this visual system could do digitally with motion and interaction within the website we were building. That challenge guided our conceptual approaches (again, leaning on motion to help communicate design intent) as we found ways to use that signature brand element in both static and animated designs.
Concept 1 strongly references brand collateral with a layout that balances photography, white space and progression elements.
Concept 2 offers a macro application of the color progression interacting with large-format photography through just a touch of parallax.
Concept 3 was inspired by editorial layouts and leans on white space and typographic asymmetry to challenge conventional web layouts.
As you move deeper into the site, there are a number of tools to present — and this is where we start to see some of those behavioral economic principles at play.
Annuities Best Fit Tool
Through thoughtful interactions and adherence to UX best practices, we were able to simplify complex topics, make them more approachable and engage users in a conversation about their future needs.
The Education section is modeled in the same way — clear, digestible content that takes human behavior into account (not to mention contemporary online reading habits) and makes complex topics more approachable.
Every aspect of the design reinforced this streamlined simplicity: bold type, clear hierarchy and lightweight interactions with intuitive affordances.
We created this site’s fly-through video as an internal communication piece at Brighthouse, but it also served as an effective evaluation tool for us. Organizing the video around the site’s six original experience principles enabled us to ensure we were creating that kind of site that we set out to.