This was a two day design challenge. This project is not sponsored or endorsed by ABC Capital.
ABC Capital’s American Funds Target Date Retirement Series is a savings plan designed to build and preserve wealth. This was a design challenge for a mobile interaction that can be used to visualize the dramatic outcomes that can result from slight changes in Basis Point (BPS) as seen in the graph below. This is intended to be a sales app to attract new investment clients.
5 Second Test
I presented the image to users without explaining the content. After a few seconds of looking at the image i asked: What do you remember from this image?
I then presented the image again and asked the users to circle what is most important.
Through the test I identified the following problems with the chart. There are three different components all conveying the same message. There is too much text in and surrounding the graph, which makes it difficult to read. The text is all the same size and font style, which make them blend in together visually (nothing is emphasized). There are a lot of numbers all visualized in a similar style, which make none of them stand out to the viewer, and similarly does not show the impact of the increase in numbers. The graph itself is too complex in nature, the x,y and z axis are unnecessary to the viewer and they create too much noise surrounding the main purpose of the graph. And finally the graph and its surrounding content should not be in different areas of the graph, makes the eye jump back and forth on the page trying to read the information, does not flow.
The solution to designing a successful mobile experience from this chart is to separate out vital information vs the legal information. Then to create a hierarchy of content and redesigning the relationship between them to make it easier for users to understand. Then designing a few different versions of the graph and choosing the most minimal version that would explain the content without the visual noise. And finally reducing and increasing font sizes where needed based on the newly created hierarchy to lead the eye to the information that is most important.
User Persona Example
From the data i gathered I created a user persona that would help me achieve the right style and design for the app. It is a person in the beginning of their career that is trying to understand all the investment options and plan out their future.
To create the persona, I interviewed people that were between 25-35 years old, early in their careers and had a full time salary.
The goal is for the user to understand the logistics of investing, the different BPS number can make and ultimately have the user take long term actions towards their future.
To understand difference between 50 bps and 100 bps
To understand the overall logic of investment
To have the user to feel the impact and take action
To simplify content
To minimize text
To emphasize on the impact