

Problem

After client work with TIAA, I became familiar with their tools and products. Through that familiarity I was able to discover certain usability issues in their fun page. The fund page is a detailed data page for a certain investments. Most of the data is below the fold causing user fatigue when scrolling for crucial information. Another issue is color accessibility. The white sections on the gray background and green text on blue background both fail WCAG standards. And finally, the responsiveness of the design leaves certain elements unusable on smaller screens. I took on the challenge of redesigning a better solution, as well as exercising my visual design by creating new color and branding that might be better for large amounts of data.



User Testing

Through the (proprietary) work with TIAA, there were several hours of observed user tests. Also these tests were for a separate tool, there was a common sentiment in the value of data visualization. Especially to help explain financial jargon. There were also several users who expressed a need for large and legible data and text. Amongst almost all the participants, the performance of a fund was the data they cared most about. This indicated to me key design elements that should be implemented in my redesign. ‍



Competative Evaluation

Upon evaluation of competitor sites, it seemed most common to present most if not all the data above the fold. The "hypothetical growth of 10K" was also the most prominent data on the page. Seeing that performance (how much money an investment will make) is a priority for users, it makes sense to include that in my redesign. Due to the nature of banks and financial services working on smaller monitors, the margins within the design tend to be large. This ensure that the design won't break on smaller desktops. This is a feature the original TIAA design, and competitors utilize that will be important to keep in the redesign. However, competitors information doesn't have the a cohesive data flow or a responsive mobile design, leaving an opportunity for a better solution.
‍



Wireframe Sketch

Although I didn't design for mobile first, I designed with mobile in mind. All the data on the page is sectioned into responsive rectangles. The data it's self is placed next to or above relevant data, so when the design resizes, the information will correlate to the next section. I put as much top priority data above the fold as possible, with out overwhelming the screen and confusing the user. The new color pallet is an inviting and calm. Data and numbers can cause anxiety, confusion and feel exclusive. The new pallet is intended to combat negative affiliations. I also aimed to ensure all text and data point are legible and easy to read.

Unlike the original design, I added a bookmark icon so users can reference a particular fun or find it quickly. The invest button is the main CTA, so in order to reduce confusion, the bookmark is designed as an icon. Because iconography is not yet standardized, I choose a familiar bookmark icon opposed to an "eye" icon because sometimes the eye represents making something visible or invisible on a page. The invest button is the main CTA, so in order to reduce confusion, the bookmark is designed as an icon.

Keeping consistent with the original deign and competitors, this is a snapshot of the most important data. The price and daily NAV are most prominent, as they are key indicators of how a fund is doing that day.

The hypothetical growth of 10k chart is at the top to allow users to see immediately how well their money would perform in this fund. To reduce clutter on the page with data points and axis labels, there is a slider tool that informs users of exact return on a specific date. The benchmark and category average are added to the graph so users can easily compare this fund, current fun being the thicker more prominent line.

To reduce white space and ensure as much content fits on the page, the bar graph and table labels are combined. Smart text is also added to help the user make sense of what they are reading.



Future Iterations

Because users can get lost in financial terms, data visualization is a great way to help them understand what terms mean. For example understanding that low risk investments may consequently mean a low performing fun, or low returns.

The above chart maps out how investing in a more volatile fund may lead to higher returns, but it can also lead to larger negative returns as well, which is why they are risky. The above chart doesn't display the distribution; a majority of funds fall are lower risk and usually returns are closer to zero from most investments. However, implementing data visualizations like this could greatly impact a users overall understanding of the products and fund TIAA offers.



TIAA: Teachers Insurance and Annuity Association.

Role

Deliverables

Time &Tools

Problem

Design Process

Empathize

User Testing

Competative Evaluation

Ideate

Wireframe Sketch

Iterations

Re-design

Future Iterations

My Other Work

BCause

Carvoyant

Evergreen & Grand

Thanks for stopping by!