×

Retire MyWay

Updating a bleak, outdated marketing tool with a more friendly user experience.

Capital One Investing

  • Design
  • JavaScript

The Capital One Investing Retire MyWay web application was very outdated. As a stepping stone towards revamping this site, and as a part of a marketing campaign built around retirement planning, the request was made to re-envision the application and build something that was more user-friendly, on brand and informational. For this project, I was acting as designer (User Experience and User Interface), as well as developer.

Navigation

Introduction

Armed with a knowledge of User Experience guidelines--including the books, and ISO standards that I had available--I researched what competitors were doing, especially around one specific part of the equation: estimating the age of death for the user.

Many sites were asking the user to estimate an age of death, and some were coming up with a random age based on gender--which was the suggestion of the strategists I was working with. Instead, I suggested we simply use the Social Security Administration's Actuary table. By asking the user what age and gender they currently are, we were able to estimate an age of death for the user without them thinking about it.

Other problems were solved in a similar fashion by keeping in mind that this tool was not an actual retirement calculator, but more of an estimation to see if the user is on track.
After coming up with a base user flow and then wireframe, I generated a quick HTML prototype that would walk the user through the process and show them a real number.

Following user-testing, slight modifications were made to the application and the CSS and JavaScript were bundled into a widget that could easily be added to any project.
All calculations were handled "on-the-fly" and the complex, compound-interest formula was thoroughly reviewed prior to launch.

Details

User testing paragraph guidelines--including the books, and ISO standards that I had available--I researched what competitors were doing, especially around one specific part of the equation: estimating the age of death for the user.

Rating: 82%

  • 4 users rated the widget as a 10/10
  • 1 user rated the widget as 9/10
  • 1 user rated the widget as 0/10

A quick note on the 0/10 rating:
The assumption is that this user was misreading or misunderstanding the purpose of this widget.  In their initial interview they mentioned the following expectations:

  • Will show metrics, statistics and a graph of retirement account growth over time
  • Tool should provide breakdown of accounts
  • In general, looking for a full application experience like that being developed by another team.

Things that were successful

  • Navigation was well received (ISO 9241-151 8.4.2)
  • Most found the layout simple to understand by using a conversational approach (ISO 9241-110 4.5.1, 4.5.4)
  • By breaking the up the layout into small chunks we were able to keep distractions down (ISO 9241-110 4.3.2, 4.4.1)
  • We should continue to prefill the retirement age at 65 or 67 (ISO 9241-110 4.3.2, 4.3.4)
  • Estimating the age of death was a big win for simplicity (ISO 9241-110 4.3.2, 4.3.4-5)

Things that needed to be fixed

  • Implementing the ability to go to any step (knowingly omitted from the experience) (ISO 9241-151 8.4.13)
  • Show links that pop-out and links that perform in-page tasks (ISO 9241-151 9.4.10-12)
  • Finish implementing proper validation (ISO 9241-151 10.3.1-2, ISO 9241-110 4.8.1-2, 4.8.8)
  • Intro screen should show more than just disclosures, but also the information needed. (9241-110 4.2)
  • Consider how we structure the information on the “Investing Style” page

Conclusion

The final project was developed using a mix of jQuery, Vanilla (Object Oriented) JavaScript, SASS/SCSS and HTML5. All parts of the web application were designed to be fully responsive, and we included the jQuery Touch Punch library to assist with making the jQuery UI slider elements touch friendly.

Based on Object-Oriented principles, the widget can easily be moved between projects, and the SCSS files can be embedded into other projects as partials as well.