This web app helps users gauge their retirement preparedness by quickly taking some information about their financial situation, then presenting results of complex calculations in an actionable way. It had to allow for a range of user knowledge, letting experts dig deeper without overwhelming novices.
The client requested concepts that would work on their desktop sites. These are two of the presented concepts.
Client : Charles Schwab
Tools : OmniGraffle, Photoshop
Role : Senior User Experience Designer
A new group within an existing client company wanted our agency to pitch them for a retirement calculator site app that would live on their prospect-facing site. They wanted an engaging way to collect leads while harvesting data on them. Three UX designers had time available to come up with ideas, I was one of them.
We met with the director as a group and told to rough out as many ideas as we could that afternoon and we would meet again to cull concepts and pick the most distinct directions that had merit. We were given a handful of sites with retirement calculators to check out.
I had a finite amount of time to devote that afternoon, so I time boxed myself. I broke my time into research, rough sketching, and refining; giving myself about half as much time for refinement as the other two.
In addition to collecting screen grabs of the sample sites, I found as many more as I could without starting accounts. I noted the pros and cons of the different sites and grouped them into conceptual directions. I wanted to know what the popular approaches were and what were the most engaging.
I also did some quick reading on how prepared people are for retirement to see what the prospective customer pool might hold. I tried to get a good idea of people’s fears; to know what motivated them to plan, or not plan, for retirement.
I did initial sketches on large post-its to keep them portable and informally presentable. I was interested in blocking out real estate and communicating concept directions. It also made it easy to reduce found calculators to the same visual shorthand for reference.
In this approach, large graphics engage the user and make the process friendly and less intimidating for users. Details are gathered through simple interactions explained with short blocks of copy over multiple screens.
An approximate time for completion is given at the outset to set user expectations of commitment. Copy is friendly, explanatory and scannable.
To keep the user input to a minimum, the app uses default assumptions of a typical user’s financial situation. These are available to edit in an overlay for a more customized experience or for a more financially savvy user.
To keep the pace fast, data entry uses incremented sliders. More precise data entry is available through an overlay for more advanced users. To give feedback, the user’s answers are shown at the bottom of the screen, just above the navigation.
After the numbers have been crunched, a user may often find that they fall short of their retirement goals. To ease user fears and show they have control over their future, they can make adjustments based on concessions they’re willing to make.
The adjustments are made based on relative feelings instead of hard numbers. The wizard gauges the user’s comfort level with certain criteria, so that the system can suggest an action plan.
The process ends by giving users their likely retirement situation at the top. They can see what the numbers are broken down by month, or year to make them easily understood.
To promote the expertise of Schwab and provide user value, financial advice is provided on the left. A call-to-action is presented for users to call or sign-up for a consultation, just above the report download button. The PDF contains more information and stronger call to contact.
This design direction keeps everything on one screen to make it feel less intimidating. Users are also able to dynamically play with their information to see how changes affect their outcome.
The welcome screen is combined with the first step. The layout keeps data entry on the left side and content on the right side. Data entry is accepted through incremental sliders for data entry fast, and text entry fields that override the slider. More detailed data entry is facilitated through overlays, for users seeking more precision.
As the user enters more of their story, more entry fields are presented. This layout show completed data entry on the left and the final projected retirement situation on the top right.
The user can still dynamically changes their input to see the affect of lifestyle and financial changes. The charts and advice content reflect changes. Different graphs are available through vertical tabs. Once the user is satisfied with their entries, they can click to see there action plan.
A final assessment of the likely retirement situation is presented here along with next steps to consider. The content is tabbed to allow some depth of information to be presented. The call-to-action area invites users to connect with Schwab and lets them know what to expect.
The downloadable report breaks down all information in more detail, including next steps with a financial consultant.
To help stakeholders better understand how engaging the data visualization interactions could be, a sample page of charts and graphs were included, and live demos were shown at the client presentation.
We pitched four concepts to the client. The meeting participants were actively interested with detailed questions and feedback. It felt like a good meeting, but ultimately the project didn’t go anywhere. Which was disappointing, but happens sometimes.