Data visualization, according to a user experience developer

March 29, 2017 by John Rusch

An advisor and her client use technology to discuss business

About the author:

John Rusch

User experience developer

John is passionate about making software that makes sense. With a background in both Design and Development, he bridges the gap between the calculative logic of code and the abstract fluidity of design.

In the life of a user experience developer, your job is to work towards building software that makes sense. By definition of your title, what you produce has to be a pleasant experience for your intended users. That is what I do. To be more specific, I work with a team of designers and developers to make software for financial advisors that will provide the best client experience in the advice generation process. More than just knowing the proper code languages or latest development patterns (although those are quite helpful), we figure out how to visualize the complex story of someone’s financial life as simply, yet as detailed, as possible.

In my mind, the most important thing to understand before you set out to design a good piece of software is the balance between design innovation and established convention. I have seen it happen before that a designer falls to the temptation of inventing something novel and creative to try to solve a problem that could have been solved with a more conventional approach. By trying to “re-invent the wheel,” what you end up creating could have more flash than functionality. As the old saying goes: “there is nothing new under the sun.” Once a designer comes to terms with that, it can relieve a lot of pressure to prove their design prowess.

On the other hand, if you stick too closely to what has already been done, you can end up with something completely uninspiring and bland. That is what I refer to as the “spreadsheet school of design,” where you end up with a functional series of columns and rows that is as exciting to use as a rotary lawn mower. It gets the job done, yes, but it could be better. The best approach I have found to successfully balance these two figures is to start with an established set of principles for how people interact best with data, and elaborate from there.

So how do you approach building a design that tells someone’s financial story well and is visually interesting? Since following good principles of design is so important, you have to be familiar with the strengths of the tools in your design toolbox. Some of the fundamental data visualization structures that I have worked with are good, old-fashioned charts and graphs. They are almost synonymous with good financial reports, and for good reason. Charts can be powerful tools, but can be broken very easily if you do not use them correctly. To pull back the curtain on some good user experience principles, let us examine some data visualization structures and look at the merits and strengths of each.

Bar charts

Bar chart example

Some of the most common charts are bar charts (or bar graphs, column graphs, etc.), and they pack a lot of visual information into a small space. For starters, a conventional bar chart is great for showing change over time. Most languages used in the Western world are based on reading from left to right, which has developed a common understanding that as the data moves from left to right, the timeline goes forward in time. With a bar chart, you immediately get a general sense of how data relates to time without even referencing a legend. Secondly, bar charts are great for making comparisons across many data points. It is easy to get overwhelmed by 20 years of retirement account data when you view it in raw form. However, if you line up those data points and draw rectangles proportionate to their size, it is much easier to make comparisons. You can visualize how certain savings trends affect goals, which can make a significant impact on a client.


Pie charts

Pie chart example

The only difference between a pie chart and a donut chart is a hole in the middle. Donut charts have been a recent trend in user experience design, and are essentially the trendy equivalent of a pie chart. Circles are a friendly shape, and there are many subconscious associations with the “wholeness” of a circle, which pie charts convey well. They are best at representing data that adds up to 100 percent and the distribution or segmentation of a whole. This makes it easy to highlight data that is disproportionate relative to other data points. Where a bar chart is built to compare one metric over time, the pie chart is well suited for compare a variety of metrics in one snapshot of time. When it comes to financial data, you can use a pie chart for showing things such as liability distribution, investment portfolio distribution, or monthly spending categories. Visualizing data in this way can help tell a compelling story that could lend to a conversation about refinancing, adjusting investment strategies, or correcting spending habits, simply by pointing out a “wedge” that is either too big or too small.


List example

Even a simple list can be turned into a good data visualization when built properly. When you need to show a lot of high-level data quickly, and it is not as important to make direct comparisons between data points, lists work really well. For example, if you need some information about accounts that have been aggregated into a plan (for example: whether the values have been recently updated, whether the amounts make sense, and where those accounts are held), you don’t need all the frills of a full blown visualization; you just need the quick facts. By making a multi-column list, you can show all of that information from a high-level perspective and it can be referenced very quickly. Lists are very easy to scan, and can be given what designers call “zebra striping” to make each data point distinct. And if that high-level data is not quite enough, you could create an option to dive into a more detailed view of a particular data point.

There are obviously more varieties of data visualization, but once you understand the basic advantages that each option offers you can mix and match to build up from there. If you understand what is important to highlight in a set of data you can make informed decisions about how to present it. Asking the question of ‘what is important?’ is another topic in itself, but before you can approach that, you have to perfect the fundamentals.

Click here to learn more about the industry leading financial technology solutions offered by Advicent, or call (855) 885-7526 to speak with an Advicent representative.