Prudential Financial
The Design System
My work at Prudential represents a significant leap in my approach to design. I led a team of over 40 UX/UI and Visual designers to develop Pru's first visual digital system. Going beyond the standard look and feel tactics, this system had to account for a number of factors. It had to be responsive, easily content managed, and accessible/WCAG compliant.
The result was a series of bulletproof design components that could be used to meet the digital needs of 200+ digital properties, multiple business units, and 22 million customers.
The users: The audience/consumer for the system is incredibly broad - basically anyone who will research, design, or execute any of the digital experiences within Prudential from a UI, UX, Visual, dev or product development standpoint. The current user base:
UX Designers
Visual Designers
UI Designers and Developers
Copywriters
Marketing Managers
Brand managers
Front End Developers
Information and Content Architects
Product Managers
ELEMENTS
Designing at the atomic level, we design the most basic pieces of design - buttons, fields, text. Our focus is reusability and consistency.
Components
We combine various elements to produce more complex interfaces. Because the elements themselves are bulletproofed, we know our result will responsive, and accessible.
Layouts
We combine the components to form narrative layouts based on the particular needs of a project.
Templates
As we identify common template needs, we create reusable templates that allow all our business partners to create and publish content - and get to market - quickly.
The Output: The Prudential Playbook
The Playbook is a complete UX, Visual, and code documentation of the ever-evolving Prudential Visual system. It operates on a 3-week continuous sprint, with collaborators from across the enterprise (a first for Pru).
All entries are coded, tested, documented with responsive, accessibility, and use case scenarios (and will give Material Design a run for its money).
The Playbook includes:
Typography
Color
Components
Templates
Documentation of complete platform/product launches
Developer Sandbox
Angular components
FED guidelines
Pru-themed bootstrap
Full Sketch Libraries
Brand Guidelines
Prudential site Redesign
The process:
We had multiple C-Level stakeholders across business units, many of whom had never worked together - so I used a Lean UX approach, combined with a series of collaborative worksessions. These sessions had strict rules - a limit of 5 people, a dedicated decision maker, and a 30 minute time limit.
The sessions were broken up into two sections. The first half was the needs of the page or section - the participants called out or physically wrote what the users would need. The second half required them to prioritize the needs (A= urgent, B=important, C=needed but not to trump A or B). Getting the participants out of their chair, drawing, writing, and talking culled the initial ideas down considerable. Basic wires were created within 24 hours and offered an immediate physical artifact to further the conversation with the stakeholders.
Once we had enough worksessions completed, we were able to review all the common needs and create a library of components that could be used to fulfill the needs across business units.
The redesign of the site also included full upgrade of the navigation and information architecture. The final result was a full accessible, responsive site that is content-managed but multiple business units. The “Pru-Strap” theme allows for constant upgrades to the core styles as needed with little or no development needs.
Financial Wellness
The challenge - U.S. employers have found that financial stress is a huge problem for their employees. From day-to-day budgeting to planning for retirement, most employees don’t have consistent access to reliable, relevant financial education and corresponding products/advice. This gap affects both employee and employer as the stress results in a loss of productivity for the employees, which in turn affects the employer in aggregate.
The users fell into two core categories: 1. “The Nurse in Nashville” - this user represents middle america. Hard-working, concerned with how to manage finances in her day-to-day life. She isn’t too familiar with the resources or products available to reach her goals - so creating an approachable, easy to understand curriculum that will grow with her is critical. 2. The Employer - this user is the customer of Prudential Financial who leverages our products to in turn provide them to their employees. They want to lessen their employee’s stress by providing access to helpful information, tools, and products that will make them feel confident about their financial future - and less distracted at work.
I led the team of UX, Visual and UI designers in the development of a fully architected section of Prudential.com, corresponding article templates, creation of themed content combined into learning tracks, multiple tools, and dozens of lead capture follow up email campaigns.
I created the moodboard for Financial Wellness, used to drive marketing and front end execution of the actual platform.
Retirement App REDESIGN
This new app radically simplified the mobile user experience. Through user research, we challenged the existing business requirements and dug into the true user needs - a modern look that conveyed ease and security, quick access to top-level data, a simplified contribution experience, and the integration of educational content.
For this project, I acted as art director and client manager with our business partners, leading a great UX and Visual team to create a final product that exceeded the business requirements and led to a significant raise in the App Store rankings.
LINK by Prudential
LINK is the first self-service advice platform for Prudential, shifting from a physical advisor focus to a direct-to-consumer model. It allows a user to holistically plan out their financial future, decide what goals are most important, and how to achieve them.
A multi-year effort, I led two distinct launches, collaborating with my team and guiding the final product(s) through a rigorous approval process.
LINK Advice Platform
LINK Moodboard
I created the LINK moodboard helped drive the visual style of all experiences - digital, print, and social media. It ultimately cemented the brand visually for all elements moving forward.
LINK Collateral
I enjoyed translating the modular, gridded experience of responsive design into all printed work - including brochureware, sell sheets, and brand identity.
