Anatomy of a Screen: Surfacing Critical Financial Data for Non-Expert Users

This is the first edition of Anatomy of a Screen, a series that puts a microscope on a single moment or design challenge from an argo project. 

A guiding principle agnostic of craft is that one must learn the rules before breaking them. Design is no different. Before cutting or removing excess to strike at the heart of a problem, you must first understand that problem completely. 

While designing a mobile app for a Fortune 200 financial services company, argo had to distill a complete lineup of potential investments, financial products, and scenarios into a view users could comprehend. But first, the team had to prove they understood how these assets function and weave together.

This required rapid ideation through argo’s Think by Making ethos, and daily back-and-forths with executive stakeholders (including the VP of Product) to reach a visualization that could keep people on track while also communicating the value of the company’s offerings.

Part I - The Chart 

After an on-site workshop with key stakeholders, it was clear the designs needed a higher level of fidelity to showcase the value to potential users and better reflect how the data functions in the real world. As experts in their field, these stakeholders knew the subject inside and out—argo had to match this level of mastery. The team collaborated to construct a new mental model that accurately presented every possible asset and its relation to the others. 

It was a crash course in financial literacy. By pulling in every possible source of income, argo broke assets down into buckets, their positive or negative impact on wealth, and whether they could be touched now or in the future (including fees and penalties). This breakthrough showed the client that argo understood how each piece interacts with the other so the designers could then tell the story in a visually efficient and effective way. 

With sign-off from the main stakeholder, who called it the most thorough visual representation they’d seen of these relationships, argo set out to turn the chart into a dynamic visual representation for the app that non-experts could understand and act on.  

Part II - Iterations 

Armed with this new visualization and a collection of existing charts and graphs clients are given free of charge, argo met daily with the VP of Product to work through explorations.

The client provided feedback on each iteration as the argo team repeatedly modified the charts to clearly communicate a snapshot of the user's financial goals and whether they were on track to meet them. This presented a major challenge of showcasing complicated data in a way an end user could quickly understand while also remaining true to the reality of the numbers. 

Part III - The Finish Line  

In the final iteration, argo abandoned the rings and returned to a bar chart format, stripping out the asset breakdown to show users what they most want to know: am I on track? Complete with simplified visual language and content, argo was able to thread the needle on presenting an accurate but understandable picture of financial well-being across various scenarios. 

Think by Making propelled the creative process by building camaraderie and trust through every iteration and phase of the work. By the end of the project, argo became deep subject matter experts and according to the VP of Product, knew it better than their own team.