Project
TIAA Charitable
TIAA Charitable
TIAA Charitable
TIAA Charitable
TIAA Charitable
Agency
MCD Partners / M&C Saatchi Worldwide

Role
Supporting Product Designer

Year
2016

TIAA was launching a new financial product to make charitable giving easier and more effective. In the form of a donor-advised fund (DAF), it married creative giving solutions with financial strategy.

The specialized service was a challenge to market; few knew what was a DAF was, and even less knew why they should open one. Additionally, none of TIAA's competitors had their website made in the last 7 years. We were creating the first modern marketing of this type of product.

This is where our team got to work. We held multi-day client/agency workshops, research, and brand development sessions. The project was as much of an exercise in financial content development, storytelling, strategy as it was design. We also created and used an atomic styleguide thoughout its development.


The site was built over the course of 4 months in 2-week sprint cycles. Our agile team consisting of eight MCD team members and three client stakeholders. My role in this project was of a supporting UX/UI designer and illustrator. 

Home_intro
About_intro
01

The project became much more financially and legally technical than first met the eye. We spent a lot of time breaking this these down via calculators, data visualizations and storytelling.

01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo justo mollis maximus.

01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo justo mollis maximus.

PHASE 01
Discovery.
4 day workshop with MCD and Client.
PHASE 02
Product development.
10 sprints with 3 user testing sessions.
PHASE 02
Product development.
10 sprints with 3 user testing sessions.
PHASE 02
Product development.
10 sprints with 3 user testing sessions.
PHASE 03
QA and migration.
4 weeks with developers and designers.
PHASE 03
QA and migration.
4 weeks with developers and designers.
PHASE 04
Launch.
Website goes live with supporting ads on 09/12/15.
Discovery_1
 
 
 
 
 
 
 
 
                                                                                          
OBJECTIVE 01
Pave the way for the first contemporary
Donor-Advised Fund (DAF) website. 
OBJECTIVE 01
Pave the way for the first contemporary
Donor-Advised Fund (DAF) website.
OBJECTIVE 01
Pave the way for the first contemporary
Donor-Advised Fund (DAF) website. 
OBJECTIVE 02
Define what a DAF is to an older audience that testing showed were unfamiliar with it.
OBJECTIVE 02
Define what a DAF is to an older audience that testing showed were unfamiliar with it.
OBJECTIVE 03
Brand TIAA Charitable's DAF with a name that would be easily understood.
OBJECTIVE 03
Brand TIAA Charitable's DAF with a name that would be easily understood.
OBJECTIVE 04
Inspire users to get strategic about their giving and philanthropy.
 
 
 
 
 
 
 
 
                                                                                          
 
 
 
 
 
 
 
 
                                                                                          
OBJECTIVE 05
Conveys trust and financial security to an older generation.
OBJECTIVE 06
Grow awareness of the community resource pooling possibilites of a DAF.
 
 
 
 
 
 
 
 
                                                                                          
OBJECTIVE 07
Shape a product strategy that best addresses potenital users.
OBJECTIVE 07
Shape a product strategy that best addresses potenital users.
OBJECTIVE 08
Decrypt banking, tax, legal and investment language to make our site easy to understand.
OBJECTIVE 09
Create tools, calculators, and stories to help users see the benefits of donating through a DAF.
OBJECTIVE 09
Create tools, calculators, and stories to help users see the benefits of opening a DAF.
Discovery_2
SPRINT STARTS
Client and MCD poker plan backlogged tasts 
Client and MCD poker plan backlogged tasts 


STRATEGY
Content Research and
UX Planning
Content Research and
UX Planning

DEVELOPMENT
DEVELOPMENT
Simultaneous copy, design, and development

SPRINT ENDS
Improvements before formal client review of sprint
Layer 10
02
Research audits and user interviews revealed our target audience to be high-income seniors or those who have recently received a windfall.
PERSONA 01
Philanthropist
Wants to increase giving power with investment options and ensure funds are donated strategically.




Giving Planner

Set a Giving Goal tool

How it Works

Investement Options

Ways to Use

Minimums & Fees

About Us

PERSONA 02
Tax Conscious
Interested in increasing tax deductions, avoiding capital gains tax, and simplifying filing.




Tax Benefits

Minimums & Fees

Giving Planner

Top 5 Reasons to Use a Giving Fund

How it Works

FAQs: Tax Benefits

End-of-Year Emails

PERSONA 03
Organizer
Donates to multiple causes a year and needs a way to keep track.





Features

How it Works

Forms

End-of-Year Emails

Set a Giving Goal tool

Ways to Use: Disaster Relief

Email Updates
PERSONA 03
Organizer
Donates to multiple causes a year and needs a way to keep track.




Features

How it Works

Forms

End-of-Year Emails

Set a Giving Goal tool

Ways to Use: Disaster Relief

Email Updates

03

Once the Discovery and User Research was completed, the experience was created in true agile; the whole team collaborated to create a detailed picture over time.

In the inital sprint, we drew out a rough plan of the site architecture based on defined user personas. It then evolved over the course of the project to fit changing needs.

03
Brand colors were selected to invoke sleep and twiglight vibes without feeling drowzy or stale; mattress research is brutal enough. The resulting palette is vibrant, energetic and playful.
Home
How it Works
Tools
Ways to Use
About Us
Search
Search
04

This same method of working applied to individual pages. We first tasked ourselves with organizing content by the needs of our personas. From there we employed visual styles and added needed details over time. 
06
Guillon felt like the perfect typeface for the project; its open, rounded letters and smart quirkiness give it a warm, educational personality. It’s international style keeps it grounded and professional.
Home_Wires_6
05

In one of our earlier directions, we wanted to inspire new visitors to open an account. In this spirit I proposed a patchwork of emotive images using shapes found in the logo that also referenced a key marketing point: donating to mulitiple charities using one fund.
02
Solution
Home_1_sml
Home_2_sml
Home_3_sml
Home_1_lrg
06

As we continued working a more structured visual style was needed. Users would now need to make an inital $5,000 deposit to start and wanted the experience to reflect this and assure the user that their deposit was in trusted hands.
OPTION B
07

Further testing and converstaions revealed a need for an interface that felt more secure and less emotional. Users showed more interest in the financial and tax benefits of a Giving Fund than in previous research done by a previous agency. 
ActualHome
Wires_2

08

Educating new users on investment approaches and performance pools was a significant piece of the experience.

Breaking down the highly technical information hadn't yet been successfully done by TIAA's competitors, and our user research backed that up. We needed to create a fresh way of presenting the information.

09

To help users understand their investment options, I recommended the same logic in UX perosnas.

Pools were broken down into three types: General, Socially Responsible, and Customizeable. Next, I proposed assigning potential user goals to each to define their benefits. In this format, visitors could scan each card and choose a strategy based on individual needs.

Sketches_3
Sketches_4
10

I also branded the different approaches with simple and bold icons and colors to further define them.
cube@1x
– BROAD MARKET –
“I’d like to choose a powerful strategy and sit back and watch my growth”
– BROAD MARKET –
“I’d like to choose a powerful strategy and sit back and watch my growth”       
shield@1x
– SOCIALLY RESPONSIBLE –
“I only want to give to approved Socially Responsible Investment options”
– SOCIALLY RESPONSIBLE –
“I only want to give to approved Socially Responsible Investment options”
flex@1x
– FLEX –
“I want to control how my funds are being allocated”
– FLEX –
“I want to control how my funds are being allocated”  
                                  
Invest_lrg
Photo_Dev
11

Pages went through several iterations and rounds of testing before becoming final.
WhyUs_D_Wire
WhyUs_D_2_
Photo_UserTesting_2
12

Lengthy user testing sessions were done in our own lab.  
UserTesting_3
Usertesting_4
ABout_lrg
13

Several illustrations were created to use throughout the experience.
Features_lrg
FAQ
TIAAC_Email_1200_1
TIAAC_Email_1200_2
VideoSession
Search_alt2
Search_alt2_2
PopUp_2
HandSeeds

NEXT PROJECT

NEXT PROJECT