Reimagining a Fortune 100 Financial Firm’s Core Web Properties
Sharing leadership responsibilities to evolve the primary Principal.com pre-login experiences: a homepage, navigation, and landing page strategy
2020
Delivered to Market
Starting here…
And arriving here…
Principal’s website was looking and feeling dated – and lacked clarity as to company purpose and products.
I shared leadership responsibilities as we undertook a holistic “web reimagination” project, rethinking core properties like the homepage, site navigation, and landing page strategy. The framework and strategy crafted in this project has proven a solid foundation, with redesign choices persisting for over 5 years since implementation.
Key Outcomes
Redesigned homepage telling a simple story about the company’s products
With millions of current and prospective customers arriving at the page every month, it was important that visitors understood what Principal does, products it offers, and how to find what they were looking for quickly.
Improved site navigation enabling faster task completion and clarity
A mobile, tablet, and desktop web friendly site navigation that remediated usability and accessibility issues was required. Improved emphasis on products and services was a cherry on top.
Evolved landing page strategy and measurement frameworks
Developing focused landing pages with clear goals, top-to-bottom instrumentation, and A/B testing as a given part of large campaigns helped improve UX and meet marketing conversion goals.
Driving Factors for Change
New martech/BI stack
New digital analytics capabilities were online and capturing meaningful data
Leadership changes
A new CMO joined the company with a charter to improve digital marketing experiences
Accessibility audit
An accessibility audit uncovered legal compliance issues with the current site
Fresh reorg
Product teams had recently reorganized providing some fresh perspective and resources.
Design Process
Approach and Cadence
Understand the baseline
Dig into analytics and research findings from the current website and talk with stakeholders. Get a handle on what’s working, and what’s not.
Research and test designs
Prioritize web properties for redesign, and start iterating on sketches, concepts. Eventually craft mid to high fidelity prototypes for testing
Pitch, align, and deliver
With recommendations in hand, run the gamut of stakeholders to pitch our concepts. With alignment, move into delivery alongside product teams.
Research Methodology
Accessibility audit
A motivating factor for taking on this work, an accessibility audit of the website had found numerous accessibility compliance issues – often due to the lack of a cohesive design system or coherent web strategy.
Trends and insights
In the several years prior to this redesign, Principal had invested significant time and money into leveling up the martech and BI stack for digital properties (e.g., Google Analytics, Session Monitoring, VOC surveys, etc).
With this stack online and gathering metrics, we had some ‘hard data’ to back up our decision making
Concept testing
As we developed design concepts, we ran multiple rounds of concept and prototype testing to validate desirability and usability.
For properties like the home page, we utilized first impression testing – showing the page for just 15-30 seconds to users, and then asking questions to clarify what they comprehended. These tests were valuable for clarifying what real-world behavior might be like.
Homepage Redesign
Research Discoveries
“I'm not really sure what you sell”
– Research participant feedback on legacy homepage
Product offerings invisible
This page was used as a catch-all landing space for a multitude of campaigns and offerings.
But it provided no clear language around investments, retirement, and insurance – the 3 lines of business Principal offers.
Most-used actions obscured
98% of visitors went to the homepage with the ambition of logging into their accounts – a button that received no emphasis.
The majority of long-tail actions focused on tasks like getting help or finding a local dentist – and these also received no homepage love.
Generic and dated
With no significant updates in 5 years, the page was looking dated compared to upstart competitors.
The nebulous content strategy left it ambiguous what line of business Principal was in.
Design Solutions
Visual treatments that guaranteed higher contrast, a simplified above-the-fold hero approach, micro animations using SVG line work, and an ‘editorial’ style approach to the page all coalesced as something modern, appealing, and worth exploring.
Analytics backed this up – we saw 3x higher conversion from the homepage to product pages after the redesign.
The login button got a high-contrast makeover, quick actions like contact forms and help pages gained homepage priority, and a ‘dynamic’ zone for current issues (like COVID support in 2020) let the page flex.
By placing the product lines front-and-center in a no-nonsense manner, we found that testers (and, later, customers) retained a better understanding of what Principal offers: financial services, in the form of life insurance, investment options, and retirement funds.
Improved Site Navigation
Research Discoveries
Confusing audience focus
With 97% of site visitors fitting in the ‘individuals’ bucket, and over 2% being small businesses, the required step of selecting an audience and landing on a second page before seeing any products was leading to attrition
Product offerings obscured
Because viewing specific products required yet another click and no context was provided about those products, this navigation structure really only worked for users who already knew the site or what the products were for.
Usability and accessibility issues
Design Solutions
By making the nav structure product-first, with a prominent ‘exit door’ for business users, the site now told a persistent and obvious story about product offerings no matter where users started
Within the dropdown navigation, we improved the emphasis on product discovery, and clarified what starting points were apt for a customer who wasn’t sure what they were looking for.
With extensive experimentation and iteration, we crafted a navigation interaction design that only required one additional click on mobile compared to desktop – and kept a far more consistent visual and interaction design across screen sizes.
Evolved Landing Page Strategy
Research Discoveries
Too dense product pages
Providing long, 1000+ word SEO optimized content up front to banner ad recipients led to high bounce rates and little to no meaningful next-step activity.
On several occasions, I found that copy had been crafted to precisely fit the constraints of a 1 page, 12 point font Word document.
Weak measurement and testing
"Scavenger hunt" hub pages
Pages like ‘about us’ and ‘careers’ served as important first stops for customers or prospective employees entering via search.
But, they required clicking multiple layers deep before providing any meaningful information.
Design Solutions
With clearly blocked page sections, larger graphics and explainers, and lighter copy with more clear hierarchy, these pages felt more like a product page and less like a Word document.
We rethought experiences like about us and the careers site to feature key details – like high level company facts on about us, and benefits package details on the careers page.
This provided much of the key value –without making users dig deep.
I helped craft landing page designs that had easy-to-swap elements, and that drastically simplified information density for large-scale brand campaigns.
By A/B testing these pages, we were able to boost conversion rates by as much as 220% simply by reordering page elements.
Lessons Learned
Simple is Strategic
By grounding our messaging across these properties in the fundamentals – simple statements of what the business does, concise and clear CTAs, and known high-use customer features – we were able to craft a framework that could be built upon.
That 'best practices' content strategy, usability improvements, and measurable goals made it easy to layer on targeted updates, and is why the structure of these pages has been stable for 5+ years since implementation.
Attention is Limited
These pages and features innately served utilitarian purposes for customers. Whether arriving from a banner ad, a TV commercial, or to check their retirement balance, this was just a brief stop in a larger journey. We were lucky to get 30 seconds of attention, and had to be prudent about how we used it.
Data Driven Iteration
Leveling up how we thought about constructing tests, running them, and learning and iterating based on results unlocked new ways of thinking. Even the exercise of thinking about what might be the key measure in an A/B test can clarify strategic priorities, regardless of the outcome of the actual test.
Visual Storytelling
While Principal's branded advertising was often centered on a visual and emotive narrative, the web experience hadn't previously hit the same notes. This improvements highlighted core product lines with a narrative approach, animations and illustrations, and immersive imagery – creating something more memorable, and improving cohesion with brand advertising campaigns.