ABC Capital

This was a two day design challenge. This project is not sponsored or endorsed by ABC Capital.

Scenario

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.

 
Screen Shot 2019-06-16 at 8.50.51 PM.png
 

 
Screen Shot 2019-06-16 at 8.46.47 PM.png
 

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.

 
Screen Shot 2019-06-16 at 8.47.22 PM.png
 
 

Problems

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.

Solution

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.

 
Screen Shot 2019-05-20 at 9.24.46 AM.png
 

User Goals

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.

  1. To understand difference between 50 bps and 100 bps

  2. To understand the overall logic of investment

  3. To have the user to feel the impact and take action


Design Goals

  1. To simplify content

  2. To minimize text

  3. To emphasize on the impact

Low Fi Wireframes

The low fi wireframe sketch displays the basic sectioning of the content and the page hierarchy.

 
wireframes.png
 

A/B Testing

During my design I did A/B testing for the pages to design the most effective for the Demographics Page and for the design of the graph. 

 
challenge2.jpg
challenge1.jpg
 

User Interface Design

The following is the final UI solution to the app. The Demographics Page was simplified to be easy to use. I chose to use the word "result" to make the user curious about their information wanting to continue further. The amount earned is placed on the top of the screen to bring focus to the purpose of the app. I went with a bar graph because it was the most simple and minimal visualization solution to the information I wanted to focus on without taking away from the numbers and years.

 
UI.png
 
 

Prototype

I designed the experience to have simple flow, the Demographics Page is designed to be filled out, then user clicks results....and here you see the baseline result, user then clicks to see the difference with 50 bps, I designed the numbers to be rolling on the top in order to create numerical impact for the user. The graphs are also designed to flow upwards to emphasize the increase of numbers with 50 and 100 bbs.   

I finally shared my prototype with a user to collect data for the customer journey and collecting qualitative data for future redesign. 

ezgif.com-video-to-gif (2).gif