What is Morningstar Retirement Checkup?
A digital marketing website built to provide users a look at their current retirement savings rate, risk tolerance levels, and retirement income goals through the use of color. Through Retirement Checkup, users are not only provided a visual indication as to where they currently stand with their retirement goals but they are also provided recommendations on how to get and stay on track for a comfortable retirement.
Design Process
I was tasked with building a site that would be easy for participants to understand and to help them know whether to take action in order to better their current retirement position.
Research
Through my research, I looked into different methods of tracking that we use in our daily lives, everything from physical fitness to project management to financial goals. I knew that I needed to create an informational graphic that would quickly push a participant to make impactful changes to their current retirement savings plan.
Fitness apps are known for using vibrant colors to show progress. I explored this avenue as well as some others on color palettes that could also signify safety, caution, and danger but when it came down to it, the globally recognized red, yellow, green was still the best color scheme to run with. After all, I wanted Retirement Checkup’s advice to be easily understood and anything other than red, yellow, green would only add confusion.
On to the drawing board
I began sketching some ideas, but was having difficulty with the disconnect between the research and the color-informed advice I was intending to convey. My aha moment came when I saw that the distinguished Morningstar “O” is shaped like an odometer. I applied a bright red-yellow-green gradient to the gauge. Once I implemented the gauge in my mid-fi prototype, I met with various Morningstar stakeholders for their feedback. From those discussions, two adjustments were made before moving into hi-fi.
The use of the Morningstar “O” in any other instance other than the logo itself was unacceptable.
To be AA compliant, the red, yellow, and green colors needed to be less saturated.
To distance the odometer-like gauge from the branded Morningstar “O”, I added a 5pt stroke and rounded off the ends. With the less saturated, and now AA compliant gradient, I incorporated a mountain theme for the screen layout to symbolize a climb to something great. The red, yellow, and green mountains are used to indicate levels of success.
Once an easily identifiable instrument of measurement and color theme was deciphered, I finalized the design and sent off to our development team.
