Ahead of Nationwide's latest financial services campaign, I designed a best-in-class annuities calculator.
You probably know Nationwide as one of the biggest insurance companies in the U.S., but you may not know that they offer more than home and auto. I worked with their Annuities team to create a hub that explains RIL Annuities, or RILAs, and their growth potential.
We were tasked with turning complexity into simplicity for a tool that independent Financial Professionals use around the country. If that wasn't difficult enough: we were one of the first Agile projects at our agency, MERGE.
Client
Nationwide Insurance
Duration
March - September 2024
Services
Wireframes, Prototypes, Visual Design
My Role
Lead Designer
Website
Challenge #1
The Nationwide Annuities team hadn't made a tool like this before. How should we begin?
My team did a complete Discover and Define phase, conducted 3 user interviews, and I led the Competitive Audit.
I learned that no competitor had a perfect tool for users to easily forecast and learn about annuities. Our opportunity was to use Agile processes to create a more intuitive, accessible, and educational hub.
Early on in the project, Nationwide and my team had very different perspectives on who the target audience should be. Eventually we agreed that the calculator will be used by Financial Professionals to sell strategies to customers, but the rest of the Defender hub would be tailored towards customers who want to learn more about Nationwide and RILAs.
That helped us solidify our sitemap: 7 pages that utilize hierarchial tree navigation. Designed in Figma with the Nationwide design system.
A few of my sketches when I was ideating on the core interactions.
The beginning
I moved into the design phase with a question: what are the main interactions for users to see their growth potential?
I decided that there should be two areas: one for calculating, and one for viewing results.
Calculating would have simple inputs while the results are primarily a data visualization.
The competition was mixed on whether or not to keep inputs with results. I felt that it was too easy to change data and mess up your visualization, while also using up way too much screen real estate.
The secondary part of the results area would be the Glossary. Users can toggle between the results data viz and the Glossary while on the calculator page.
A sketch that shows 2 strategies side-by-side. Most users only make 1 or 2 strategies when creating their annuity plan.
This is when I came up with the primary interaction paradigm: a bottom sheet overlay that pops up once users calculate their strategies.
I felt strongly about using this toast component because it's one of the only responsive solutions available. None of Nationwide's competitors had a solution that was both easy-to-use and responsive across device sizes.
Bottom sheet interaction from the live Calculator page.
Challenge #2
Our client loved the approach, but they started to get cold feet. Would older users know how to interact with a toast notification? Is it responsive?
Their concerns were valid, but I knew that users would understand the interaction. The animation, affordances and signifiers would teach users how to interact with it. We developed the component in an accessible way so users can utilize assistive technology to open and close it. Also, users may have used native toast notifications before on their smartphone, so they already have the mental model for it.
The Defender bottom sheet next to 2 well-known examples: Walmart and Google Maps.
Challenge #3
We were well underway, but our team was strained by using Agile project management in an agency setting. I had to start the conversation.
Frequent meetings, tons of tickets, and more constant communication than our Waterfall projects was causing us to burnout. The developers and I were working long days and evenings all summer. Our copywriter was overloaded with client feedback.
Could we change all of this midway through the project? Yes, we can.
I had advocated for a few things:
Longer scrum meetings, so we can discuss issues together and cut down on siloed meetings. This would free up more time for heads-down project work.
Reduce the number of redundant tickets by templatizing tickets, linking to the acceptance criteria, and include more details in each description so we don't have to refer back to other tickets too often.
Move the least urgent conversations to email, and keep the most urgent conversations in Slack. This would increase visibility for the most important chats (since my coworkers have tons of unread emails, while they read all of their Slack messages promptly.)
Once the team adopted this framework, we were able to get our schedules under control and cure our "Agile burnout." We finished the calculator page and powered through the educational pages with newfound energy.
All # pages of the microsite that I designed.
The end
Once we fixed our Agile workflow, we finished the microsite and launched without a hitch in September 2024. Defender was a great success for us.
Analytics told us that our microsite had good numbers to it. But there was a catch: market volatility caused Nationwide to stop promoting Defender and to promote annuities that aren't RILAs. We'd have to settle for page visits and downloads in the 100s instead of 1,000s or greater.
Skip to 2025 and now Nationwide has a large ad campaign, starring Peyton Manning, that touts their financial services offerings. The Defender annuities calculator is a great supplement to their campaign. Our team had made a fantastic website and Nationwide loved working with our team.
Lead Designer
Chris Locke
Account Directors
Project Manager
πa Cruver
Business Analyst (BA)
Matt Bell
Front-End Developer
Tyrell Curry
Back-End Developer
Colin McFadden
Tech Leads
John Maloney & Adam Crane
Copywriter
Jordon Frauen
QA Lead
Natasha Usmanov & Iliya Sanin