This image shows the Prudential homepage.

Prudential Retirement Client Templating System

Company: Prudential

Problem

Prudential's larger clients required their own retirement hub. There was a pool of account features that were shared across clients.

Solution

Found a Content Management System that passed all of Prudential's security concerns. Created a parent theme with-in CMS that can be easily cloned and styled for each client.

Also, Created a content library for all common account features that can be turned on or off for each client hub. This content library could also be managed by any marketing employee, regardless of computer literacy.

How We Got There

Prior to the creation of the UX team at Prudential - the internal development team was using static html templates. Hand coding all additions, and changes, from scratch. The development process left a lot of room for error and forced a heavy QA process on all employees involved on the project.

The original client hubs had google analytics installed. This helped us find dead-ends, participants stuck in loops, and low engagement on major content pieces.

This image shows a low fidelity wireframe.

Low Fidelity Wireframe

This image shows different executions of the same page navigation.

Top Navigation Patterns.

We employed user-centered design to plot content pieces and develop one parent theme on a new Content Management System. A designer, or developer, could easily clone the parent theme, on this CMS, and be much closer to a final product from the start.

New client hub development cycle was cut from ~4 months to ~2 months. The new system we created featured:

  • Responsive Design
  • Easily re-branded for each client
  • Passed WCAG AA
  • Any changes to the HTML could be applied to the parent theme and rolled out to all 300+ client hubs.
  • Content Library — Adding and editing content in one place updated all client hubs.
  • Pattern Library — Collection of design and code layouts for designers to reference when adding unique content. Developers would pull from this library to prevent coding from scratch.

The core of my involvement.

Processes

  • Agile workflow implementation
  • Scrum
  • User Research
  • Heatmaps
  • User Testing
  • User Stories
  • Low-Fidelity Wireframes
  • High-Fidelity Wireframes
  • Prototyping
  • Accessibility Testing
  • Accessibility Development
  • Front-End Development

Tools

  • Axure (Wireframes)
  • Axure (Prototyping)
  • Adobe CC
  • Google Analytics
  • Github
  • JAWS
  • Crownpeak CMS