cfpb/retirement

Initial sketches

Closed this issue · 13 comments

Yay retirement repo! Let's start talking about our initial ideas/sketches for what this thing might be. I'll start with some of my rough sketches and a few other ideas I've been thinking about.

Excited to hear feedback and see everyone's ideas!

Sketches

Age sliders

nj-01-sliders

The first of three variations on a theme.

This concept starts off with two visualizations that compare retirement income if you claim Social Security at two different ages. This visualization can either be generic or generated from your inputs of age, income, savings, expected claiming age, etc. Initially, the visualization on the left is for a later claiming age, and the one on the right is for an earlier claiming age. We might think about including things like survivor benefits in this comparison to get you thinking about some uncomfortable facts that you might otherwise ignore (i.e. you die before your spouse).

Following that is one or more stories (either fictional or from real people) that present the claiming decision from an outside perspective.

Last, there are alternative claiming scenarios/action steps you can take to claim later if you want to.

Category comparisons

nj-02-category-comps

The second of three variations on a theme.

This has a lot of elements from the concept above, but they're more granular (Social Security income is broken out from personal savings) and explicitly compared.

Also, this concept compares lots of factors other than income that may have a bearing on your decision of when to claim: free time, declining health, etc. The examples in this concept now are mostly made up, but the idea is that your claiming decision is going to be based on more than just a Spock-like assessment of when is most financially logical.

See the effects

nj-03-see-effects

The third of three variations on a theme.

Here, a lot of the same visualizations are present from the first two concepts, but they're all overlaid on each other to give a more integrated view of your post-retirement finances. Again, this visualization may be generic or may take into account user inputs we decide to as for. As always, non-optimal claiming choices are framed as losses rather than optimal choices being framed as gains.

Following the One Graph to Rule Them All are alternate strategies that you can explore. Hitting that "see the effect" button will shift your graph to see what, say, claiming later will do for you.

This concept ends with stories from other people, again to help bring an outside perspective to the claiming decision and as a way for us to gently prompt you to think about what will happen to your plan if it doesn't go as planned (hey-o!).

Giant timeline

nj-04-timeline

A totally different approach from the first three concepts, this one pretty much requires you to put in some basic info in a previous step. From that info we whip up a timeline of your financial life from today through the great unknown showing expected income, expenses, and places where you might be leaving "money on the table." Your inputs are shown above the timeline and could be sticky so that you can see how changing an input might change your timeline.

Alongside that timeline are action steps around how you can change your financial future (claim later, work longer, pay off debt now, etc.) with links to more information, as needed.

After your timeline are alternate timelines that give you options you might not have thought of.

Action steps

nj-05-action-steps

This concept ditches a single, large visualization for a series of smaller ones and is much more focused on action items to change your claiming strategy rather than a graph of your retirement finances.

Like the previous concept, this one depends on collecting input on your current situation as a first step. From there, though, the output is organized into action items you can take to optimize your claiming strategy. Each step would have a little visualization with it to show how implementing the item would change your plan. We could have a repository of lots of different action items and only show the, say, three most relevant to each user.

This might be a good concept to explore if we want to move away from gathering the standard info (age, income, etc.) in the first step and instead want to focus on questions that get more at why you may want to claim early, like "are you worried about being forced into retirement by a layoff?" or "do you expect to retire early because of health concerns?" The action items could be a good way to start addressing those reasons for not claiming optimally (this idea comes from Melissa's research, "According to EBRI's (2006) report, 38 percent of individuals reported retiring early; although 39 percent of early retirees surveyed said they did so because they could afford to, 24 percent reported that they wanted to do something else and 22 percent indicated that they retired early for family reasons. If individuals in those latter two groups have little personal retirement savings and no pension, they will quite likely claim Social Security benefits upon retiring." http://www.ssa.gov/policy/docs/ssb/v71n4/v71n4p15.html)

Just wait!

nj-06-just-wait

This concept came from an offhand comment I made after a meeting that maybe our MVP is a single web page that says "Just wait six months!"

What if we actually structure the tool that way, though? You come to the tool, tell us when you're thinking of claiming and how long you might be willing to hold off (or another consideration that might impact your claiming strategy, like a layoff or sick spouse), and we show you what would happen. You'd have the option of entering more information about your specific situation to get a really customized report. We'd also give you action items on how you can fit whatever event you've selected into your retirement plan.

Affective forecasts

nj-07-affective-forecasts

This concept is heavily influenced by the "Predicting Future Happiness" section at http://www.ssa.gov/policy/docs/ssb/v71n4/v71n4p15.html. Basically, humans are terrible at accurately predicting how they'll feel in the future, so we'll help them out by asking (sometimes pointed) questions that could affect their decision of how to claim. We'll provide feedback based on their answers.

The sketch has all the questions and feedback on a single page, but questions could come on one page, followed by feedback on the next.

Other ideas

  • One-month graph view instead of multi-year graph to focus in on a single, representative month and prevent information overload
  • Play with sliders to see how changing inputs affects outputs

Note: I'm stealing Niq's idea of putting the notes about my sketches in Markdown. Great idea! :-)

Word Associations

I'm more comfortable with words and metaphors than I am with drawing, so I often start there when putting pen to paper.

nmr-01-word_associations

I focused on the Social Security component of retirement planning, thinking about paraphrases and concepts from the IDEO research we had done, as well as idle quotes that our SME on Older Americans has made as we met about the project. I also kicked around trite phrases and plays on the word "Security".

The things that I checkmarked:

  • The concept of "security" in Social Security being tied to "independence"
  • the idea of a stairway to heaven. Social Security gets you through to your final goal.
  • the idea of a timeline
  • the idea of a scratchpad, for a consumer to sketch out their plan

I also did some image searches to prompt some concepts to use in sketching. The winners?

  • A key, with the idea that Social Security is the key to a successful and robust retirement plan
  • The concept that your retirement plan should be as adaptable as repainting all the rooms of your house... but that it's as neccesary to plan for it as that large of a project!

Concept Sketches

Here are some sketches around the concepts of a key, a stairway to heaven, and a painter with a plan.

nmr-02-concept_sketches

The stairway to heaven felt too morbid to me, but perhaps someone could take a crack at it and make it read better?

I really like using the concept of a key, but that might infringe too much on stuff that Owning a Home is doing.

Timeline

Ah, the timeline! I really like the idea of using a timeline to aid in visualization and understanding to the consumer. I'm not so fond on heaping the timeline full of content, as I worry about data overload and analysis paralysis. I tried to create a sense of something that gives useful data and comparison, but doesn't provide all the possible information we could give at each stage of the timeline.

nmr-03-timeline

I don't have a great sense of how much or how little info is the right amount. That's probably dependent on the manner it's presented, as well as the consumer looking at it. Something to get a better sense for in usability testing! ^_^

These sketches are preliminary but I wanted to include them as initial thoughts.

There were two pieces of information that I found really impactful when reviewing our research.

  1. The bar chart that illustrated the consumer’s increasing estimated monthly spending in retirement and how their work, savings (as well as other retirement plans or income) and Social Security stacked up to meet that requirement. The end result highlighted any gaps in the consumer’s plan.
  2. The simple illustration showing the older model of retirement being work and then spend down, compared to more contemporary views where there is a large time working, followed by spend down, followed by intermittent chunks of working and spending down. Also, with the secondary component of work earlier in people’s lives based more on financial interests whereas later in life this hopefully becomes more focused on personal interests and enjoyment.

Both of these influenced my initial sketches. In the first, we are literally seeing how, based on a consumer’s individual input, work, savings, and social security stack up to meet their monthly retirement needs. The visualization would clearly show the breakdown in income and any resulting gaps while the right column could provide helpful tips or warnings.

sos_sketch1

This is obviously very simplified, but I wanted to try and eliminate the overwhelming feeling of many tools that already exist, present the information without using the common pie charts / tables which can lead people to ignore the outcomes as well as remove as many barriers to users as possible. For instance, information that they may not know offhand or without having to leave the site.

Following that line of thinking, the second sketch on the same page shows the same idea, but I’m wondering what the most minimal amount of info is that still outputs valuable outcomes / tips? I was also thinking that using sliders to alter the information could quickly and easily help users visualize how claiming age, amount they are working, etc would impact their end goals.

With the second page of sketches, I was thinking about the idea of reframing the definition of retirement. It would highlight how different people view and handle retirement, shown here with narratives or possibly videos. This could be a mix of different income scenarios (people staying in the workforce or not) as well as spanning the range of people without a plan, a solid plan or a plan that needs refinement.

sos_sketch2

I wanted to not only show how others have different mixes of finances (the little icon could show a version of their income stack up to tie to the visual tool) but also provide context and inspiration for others in similar situations, whether that is positive or negative. This might be an area that could show how the people in the narratives resolved or dealt with possible negative situations that visitors may not have been thinking or unwilling to think about.

This could then lead into a more personal breakdown of an envisioned lifestyle, which then could become the basis of their budget / estimated monthly spending that is used in the visual tool from above.

@marteki, I really like the idea of adaptability in your painter concept, especially in light of the IDEO research showing that "retirement" isn't a single big switch for most people, but rather a series of small decisions, usually in response to changing circumstances. Regardless of the metaphor we end up with, I think communicating the benefits of a flexible plan will be key to making this a useful resource. Maybe framed as "claiming Social Security later will give you a higher monthly benefit as you get older, when you are less able to adapt your plans to changes in your circumstances"?

@caheberer, as you can probably see by how shamelessly I ripped it off in most of my sketches, I really like using other people's stories and strategies to get users to more carefully consider their own. I think those stories could also be a nice way to address less upbeat aspects of the claiming decision without being too direct (e.g. "Bill sure is glad he held off claiming until we was 65, because now he's 92 and really appreciates the higher monthly benefit" is probably easier to hear than "You might live to be way older than you think and you're going to need the money later").

Also, looking back at my sketches, I'm not super thrilled with how much some of them emphasize the "leaving money on the table" idea, as, actuarially speaking, that's not really true. I think it should be more about having higher benefits later—when you may be more likely to need them—than lower benefits earlier.

After reviewing, it sounds like we're going to try combining the best parts of some of our early ideas into a few more refined sketches. Here are the four concepts that seem to me like they have the most legs right now:

  1. Some sort of timeline that combines ideas from @marteki's timeline and @niqjohnson's "giant timeline" sketches
  2. A more traditional income/expenses presentation like @niqjohnson's "see the effects" sketch but with a lot of emphasis on @marteki's painterly adaptability angle
  3. A less complex income/expenses visualization like @caheberer's first set of sketches (maybe we can combine that with the action steps approach of @niqjohnson's "action step" sketch?)
  4. A more refined iteration of @niqjohnson's "just wait!" sketch that makes the progression from general to personalized clearer with low-effort additional questions like in @caheberer's second set of sketches

Any of those sound like terrible ideas? Any I left out?

I think that's a great synopsis, the only thing I wonder is if we want to combine @caheberer's first set of sketches with @niqjohnson's "see the effects" sketch? I could see how proposing alternate strategies and then seeing the effect in the main image would be helpful. Maybe we could explore both, it seems to be just a visual / layout difference at the core. As mentioned in our meeting, I think the idea of providing content / context around alternate strategies is really strong. (In addition to the explore on your own interactions)

I can work on refining those options.

@caheberer: 👍 to your first set of sketches + my "see the effects" instead of "action steps." I like the flexibility that would give to try out a few pre-defined strategies or get advanced and move the inputs on your own.

I'll start working on refining the second concept: @niqjohnson's "see the effects" with an adaptable "painting your life" angle.

EDIT: Hmm. Unless that is too close to the refinement Candice is working on? What makes the most sense for us to tackle, team? Because I could also work on the fourth concept: "just wait" plus low-effort questions to personalize.

I think it would be beneficial to have both concepts refined more. Here are the four I was thinking about in the comment above in more abstract terms:

  1. A timeline
  2. A complete visualization of income and expenses from your current age all the way through retirement with some ways to change the inputs
  3. A simpler visualization of income and expenses (like the jar in @caheberer's sketches) with some ways to change the inputs (maybe the same ways as in concept 2, maybe not)
  4. Something totally different that relies on several small visualizations instead of one big visualization

@marteki, sounds like you're interested in working on 2 and @caheberer, sounds like you're interested in working on 3? I'd love to take a crack at 4 if no one else does. Poor timeline, will anyone claim you? (I will if no one else has any interest.)

Refined Sketch: 2 - "Complete Adaptability"

For reference, this refined sketch has previously been referred to as:

  • A more traditional income/expenses presentation as in the "see the effects" sketch but with a lot of emphasis on a painterly adaptability angle
  • A complete visualization of income and expenses from your current age all the way through retirement with some ways to change the inputs
  • A refined sketch that takes in income and expenses data and shows a more traditional graph-heavy visualization while emphasizing the adaptability possible in retirement planning

I started sketching "mobile first" because I've learned over the last few years that it's way easier to get a design mostly right at smaller screen sizes and adjust it for larger, than to try and adjust in the opposite direction. Essential things end up being removed, size ratios end up all off, and the flow usually seems to become funky. I just find it better to start small.

I envisioned these sketches as components of one continuous page, but I don't feel strongly about splitting them up. (At least, I don't right now; check with me after a few user tests. Kidding! I think.)

Introduction

I went with a mobile navigation menu that's similar to the ones used by the Owning a Home and cf-refresh projects, with a strong lean towards cf-refresh. (This will obviously be dependent on whether or not it's live by the time we have our first public release.) I also followed the Owning a Home model of having a hero directly under the navigation that hopefully explains the context of the page and draws users in.

mobile_1_intro

desktop_1_intro

In my mind, the "Start planning" button would move the viewport down the page to the applicable section (directly following the intro). I included a section in the introduction before "start planning" that provides a little more context and metaphor creation around the idea that we're here to help you plan, that it's much like planning a paint job, and thus is both totally doable and tweakable. Does the paint gear actually convey that feeling, or does it need to be more explicitly called out in the copy? I'm leaning towards the latter.

Start planning

Here we go, it's data entry time, folks! I took the approach that this is a opposite end of the spectrum from the "just tell us one thing" approach that we're actually aiming more for, and that this design is an experimental control that's closer to other planning sites in terms of the level of input needed. I spent a good bit on time on the Financial Engines site looking at the inputs they ask for, how they ask for them -- and then throwing a bunch of their inputs out as "not strictly required" (which may or may not be true, once we get down to coding).

mobile_2_start-planning

mobile_3_start-planning-continued

I went with text fields with context hinting as a easier way to input a birth date than dropdowns, particularly on small touchscreens. This method of input for birth dates has been tested and implemented by sites such as https://www.gov.uk. I also went with sliders that are similar to those used by Owning a Home.

I decided that by asking for a complete birth date, we wouldn't have to ask for both the birth year and the current age of the user. I also decided not to use other sketches I made that asked for amounts of household debt and currently monthly debt payments; there might be something to taking that into account independent of general monthly expenses, especially when it comes to the impact of interest rates, but it felt like too much for this site and for our purposes.

I included marital status. The claiming strategies around being married or divorced, and using either spousal or divorced spouse benefits before claiming your own are such that it makes sense to include in the "complete adaptability" package. (Which is not the same as saying that it has to be included in the first release!) I also included an "other" option, that I can see being treated the same in our calculations as being "single, never married" -- but that we track its selection, to determine if we're missing a marital status that users need (such as widowed).

On the desktop view, I also included a "tips" section in the right sidebar. (Again, I followed the sidebar convention from Owning a Home.)

desktop_2_start-planning_tips

What does the amount of user data asked for feel like, knowing that all if not more user data is necessary for a more complete analysis?

Also, with this level of questioning and data input, are there moderate or high concerns around PII gathering, even if nothing is saved beyond the user's individual browser? If we end up going down the line of this design by asking for more user data than not, we could make a case for its necessity and how we're ensuring the safety and security of the information, but it is something to think seriously about.

Your current plan, alternative strategies, and "Stories Like Yours"

After hitting the "Show me my plan" button, a lot of content automagically appears under the existing content on the page:

  • a summary of the input
  • a graph visualizing your current plan
  • an analysis of your plan based on your input
  • a curated list of alternative strategies, with calls to action to "See the effect" of choosing another strategy. Only strategies that are relevant to your situation appear.
  • videos and short summaries, again only if relevant to your specific situation

mobile_4_your-plan

mobile_5_alternative-strategies

mobile_6_stories-like-yours

desktop_3_your-plan_alternative-strategies_stories-like-yours

The graph doesn't try to hit every single year of a person's life -- just ones that hit certain inputted milestones, the general ages that are retirement-specific, and additional years to build out the graph for the remainder of a general lifespan. I used Social Security amounts as the base of the stacked graphs, followed up by 401K/IRA/pension amounts, then savings, then income.

I didn't depict a clear indicator of a gap on the graph, mostly because my sketch was feeling cluttered; I think that's more indicative of my sketching skills than the viability/importance of visually depicting the gap between expenses and funds. There is a call out possible in the copy of the analysis as to possible gaps, that I think should be boosted with a visual indicator.

After choosing an alternative strategy, I envisioned a second graph appearing either directly to the right or directly below the one for the first plan. (This ties into the idea of using a small multiple, or similar graphs with the same axes to show different groups of the same data set or as in this case, scope of possible alternatives.) The analysis would then change to indicate what difference the alternative strategy made.

Right now, I'm struggling with how to call attention to the alternative strategies and stories on mobile, so that it's noticed in relation to the initial plan. Are jump links (AKA hyperlinks to targets on the same page) something that falls in our design guidelines? If so, then a short list of same page hyperlinks under the summary of "Your Plan | Alternative Strategies | Stories Like Yours" might draw enough attention to them. This is much less of an issue on the desktop view, due to using the sidebar real estate.

Refined sketch: 4 - "Progressive enhancement"

This concept focuses on starting with very simple inputs that generate generic content and visualizations for users. That generic content can be personalized as users input more (optional) details. It starts off like so:

01-initial

Not much there, but hopefully enough to get users engaged without feeling overwhelmed.

Once users make selections in those two initial inputs, they'll see some results:

02-generic

Those results would be generic and applicable to all users initially (by using percentages instead of dollar amounts or average-looking graphs). Each result section would have associated inputs if users wanted to further personalize their results, though that level of data entry would be totally optional. Exactly what form those inputs take would vary depending on the section, but I think we'd want to make them as low effort as possible while still gathering enough info to sufficiently personalize the results. The visualizations would update as users tell us more information:

03-personalized

Following all the visualizations, other content describes strategies users might find helpful in refining their claiming strategy and tells stories of a similar (real or fictional) people using those strategies.

As you’ll see in this first sketch, although I wasn’t planning to work narratives into my direction, after sketching a bunch of options, it seemed to add context and personality that will hopefully pull people in. It also

  • provides an opportunity to present scenarios people haven’t thought of before, positive or negative
  • it allows visitors an option to see other plans and tips without entering their own info
  • we could easily remove the interaction for a first MVP release and focus solely on the content of other American’s plans

ss_sketch_2

An option with this direction would be to add an expander for additional detail of each story, maybe an opportunity to add personalized daily activities in retirement to help people visualize? Maybe it’s a place they could see other’s health or lifestyle choices that impacted their plan and then add their own.

End goal is that the financial visualization is more relatable and comprehensible. A better picture of what your life will be like in retirement creates a better plan.

ss_sketch_2expand

The second direction is a very simple tool allowing users to engage quickly without being overwhelmed. The user would enter a few inputs, submit their answers and then receive a visualization of their financial plan accompanied with alternative strategies based on their unique situation. The See Effects button would illustrate and allow users to compare how each strategy changes the outcome. A deeper dive into how the strategy could be achieved would be provided for each.

ss_sketch_2b

Although I think this concept ideally has very little barriers to entry, the downside that I see is less context or visualizing what the user’s life would actually be like, possibly leading to a less accurate retirement plan.

  • I would suggest possibly pairing this with videos of people with similar plans.

Refined sketch: 1 - "Timeline"

This concept focuses on important time points (right now, early retirement age, full retirement age, etc.) to give the user a timeline of their claiming process. Like many of the other concepts, it starts off with a few inputs—just enough to let us generate a timeline:

timeline-01

When those inputs have been filled in, we create a timeline personalized with all the information the user has provided:

timeline-02

Each point on the timeline calls out important information and visualizations that will help users understand what happens at that time point. That info may be hypothetical (e.g. "what would happen if you waited until 67 to claim instead of 63?"). Time points that would benefit from more information from users will show inputs where they can provide details around savings, expenses, etc.