Prudential   Internship

Date

June 2017 - August 2017

Focus

UX Design

Type

Summer Internship

Date

June 2017 - August 2017

Focus

UX Design

Type

Summer Internship

Financial   Wellness:   From   Cradle   to   Campus

Prudential offers a service called "Financial Wellness" to employers that allows them to provide their employees with a series of articles, guides, and tools that help guide them towards financial wellness. Part of this service is a series of themed guides called "albums". With two other interns, I worked on the newest album: From Cradle to Campus.

The album provides guidance and tips for managing the costs of raising a child from infancy to their college years. It is targeted towards anyone who is considering having a child, is expecting a child, or is currently a parent.


The   Goal

We were tasked with coming up with a theme for the album, establishing the content structure, and creating a wireframe of the album. Our goal was to create a narrative with a compelling theme and content structure that would keep users engaged all the way through the album.


Initial   Brainstorming

We started with a whiteboarding session where we got our thoughts out on all of the topics and objects that could potentially be related to raising a child.



Everything we could think of related to Infancy/Childhood

Everything we could think of related to Adolescence



Building   a   Narrative

The theme we settled on was a metaphor for raising your child as a journey on a road. Raising a child is a long journey that has many stops and destinations. We visually incorporated this metaphor throughout the album.

Below are some ideation sketches I did in preparation for the wireframing of the album:



Early sketch of the first part of the album. Includes the introductory video and a street sign about the rising costs of childcare


Another version of the first part of the album. This time with no sign and part of a hospital in the background


Playing around with the shape of the road and how content will be placed around it


Early sketch of the infancy to adolescence transition through "vehicles"


Ideation for different ways to display content through journey related metaphors


Visualizing a breakpoint in the album where the total cost up through college is presented as mileage




Because the album revolved around how to best manage money while raising your child from infancy to college, we structured the content pieces in a chronological manner. Starting off with tips and stats related to the child's infant years and continuing through childhood, adolescence, and finally college.



Sample from "Infancy" section. Toy keys play into the road metaphor and pertains to the life stage of infancy


Sample from "Childhood" section. Street sign relates to the road metaphor and the accompanying content.


Sample from "Adolescence" section. Copy is displayed within an exit sign.


Sample from "College" section. This display, reminiscent of a dial you might see on a car dashboard, is from a tool that calculates college costs,

Sample from "College" section. Financial solutions for parents who have a child are presented within a map.


After the first three life stages, the user is presented with the total costs of raising a child from infancy to college in an odometer-like display.




One concern that was raised during an early review of the album was that the narrative needed to maintain a chronological perspective as opposed to a physical perspective. We needed to make sure that it was still clear that the content of the album was spanning time and not distance, as the road might suggest.

My idea to remedy this was a "vehicle" that evolved as the user scrolled down through the different stages of life. It would start off as a stroller during infancy, change into a bike around childhood, and finally a car during adolescence and college. This consistently re-establishes the passage of time in the album and reinforces the road metaphor.

Credit to Ali Fung for these illustrations.


Infancy - Stroller

Childhood - Bike

Adolescence + College - Car




Reviews   and   Revisions

When we presented our wireframe to the product team, they expressed that the large, bold number that told parents the costs of raising a child from 0-18 was intimidating and would just cause worry. We wanted to provide information and solutions, not scare away the idea of having a child, so we removed this part of the album.

There were also a number of changes to the copy of the album, mainly changes that shortened the content because many people thought it looked too busy.

Check out the completed desktop and mobile versions.


Handoff   to   Visual   Designer

With our rough wireframe complete, we handed it off to the visual designer we had worked with, Steven.


PGIM   Migration

Prudential Investments has undergone a branding change and is now "PGIM Investments". Many of the pages from the old Prudential Investments site need to go under redesigns and rebranding in order to fit the new design standards of the PGIM Investments brand.

I started off with the "Newsroom" page that had press releases about mutual and closed-end funds. After that, I completed a similar "Corporate Actions" page which consisted of Section 19 Notices and 8937 Filings for PGIM's investment funds.


Legacy   Pages

The original page for the Newsroom can be found here. I was actually originally tasked with designing this page alone (Closed-End Funds Press Releases), but we found later that it was going to be merged with the "Mutual Funds Press Releases" page into one "Newsroom" page.



Newsroom legacy page



I started off by making a note of what information I had to keep from the current page.

This included:

  • Title
  • Fund Name
  • Date
  • Type of Press Release

I found that almost all of the press releases fell into one of two "types": Declarations of Monthly Distributions, and Unaudited Earning Reports. I decided to add a filtering function so that users could filter on the type of the release and added the type of each release to above the title to make it easily scannable.


Rebranding

The first version I made was a list of the press releases with their type and date separated out. I wanted to do some changes to the titles in order to make it more concise and readable, but due to business and legal concerns, it was decided that it was best not to.

Note that the page hero says "Closed-End Press Releases" as the first few designs were made before knowing it would merge into a single Newsroom page.



Newsroom Page - v1



After several internal reviews with lots of great feedback, I made a number of adjustments and additions:

  • the option to filter press releases by year
  • changing the 'press release type' filter to a fund type filter
  • a "Filter" button so that the filters are accesible and meet ADA requirements
  • PDF icons at the end of each title for accesibility and general usability
  • making the titles only span 8 columns for readability
  • pagination at the bottom of the results
  • renaming the page to "Newsroom"

The changes for accessibility were something that I had never considered before the internal review. It was interesting to me to see what needed to be added/changed to accomodate screen readers like the 'Filter' button and the PDF icons. Accomodations for visibility like needing to underline link text that failed a 2.5 color contrast with adjacent text were also completely new to me.

I made an effort to decrease the length of the title by pulling out the "time period" for each release (i.e. 'For Quarter Ended January 31st'), but I later found that this info was not parsable. I also tried to see if the fund names could be abbreviated, but this also turned out not to be possible.

With the first round of changes in mind, I started on my second version of the redesign, this time, with mobile and filtered versions as well.



Mobile Newsroom Page - v2

Desktop Newsroom Page - v2



Filtered Results - Mobile

Filtered Results - Desktop



No Results - Mobile

No Results - Desktop



Corporate Actions Page

The second page I redesigned was very similar to the Newsroom page, with a tab component at the top to switch between 8937 Filings and Section 19 Notices.

The original page for the 8937 Filings can be found here, and the page for the Section 19 Notices here.



No Results - Mobile

No Results - Desktop


The   Internship   Experience

Interning at Prudential was a great experience. The managers and supervisors that I had were really, really, really awesome. I can't overemphasize enough how helpful and supportive they were throughout the duration of the internship. I knew that they genuinely wanted me to improve and succeed as a designer; I'm super grateful for the opportunity they gave me.



Eighth floor hallway with ping pong table!



I learned so much about the details of how UX design teams work and the way they interact with product, business, development, and content teams. There were a lot of things I had never considered for like a class project such as meeting ADA standards, development feasibility, and the importance of clearly communicating your design choices.



Group photo with our managers, Brian and Miraj

Posing with the other interns



I had a really awesome time working as a designer at Prudential, I had a lot of fun day-to-day and I felt like I was working on genuinely important projects. This internship solidified UX design as the career field I want to dive deep into and I hope to put what I learned here to work in the future!


Cafe Menu Experience Research to Design