This case study shows the progression of our analytics component within the 360˚ Evaluator tool, which over time has contributed to the evolution of data visualization rules and variations.
MY ROLE:
Vice President, Interaction Design for Advisor Center, leading end-to-end user-experience, including hands-on UX design, visual design and user testing, partnering with product and engineering leads.
MEASURE OF SUCCESS:
Contribution to design system leading to consistency and efficiency in designs and designers respectively
Problem Areas
To begin I started with an assessment of how the tool UI is laid out and how financial advisors are interacting with the existing designs. Here’re some key takeaways:
A single page stacked layout, created as an MVP for launch of a new tool
The data viz used in the tools was created using high-charts, were not documented anywhere for reuse
In order to create separation between components (e.g: performance, risk, scenario analysis etc), background color alternated between white and grey
A new brand identity had just launched which would influence font width and in turn component layout.
Recommended Solution
In order to create a pattern all designers could use and engineers could code just once, I created a simple wireframe illustrating how the new molecules would be laid out in the new UI. Everything would have a place, some things such as filters, segment controls could be interchangeable as needed, and there would be a well though-out typographical hierarchy. It helped that the new brand identify included a bold font that allowed for me to play with weights and sizes. Here’s the wireframe of the new proposed pattern.
Iterations / Adjustments
After pairing with engineering and playing around with the pattern, we realized that high-charts integration allowed for some opportunities and setbacks.
Setbacks:
Custom charts ideas such as using a world map to show investment diversity in regions could not be achieved with high charts, so we had to lean back on generic versions of a chart such as a stacked bar
More tweaks required to make these responsive.
Opportunities:
We could replace column headers of charts with legends, and make them interactive so the user could turn a bar/line on or off by clicking on the legend. This could work if the user was trying to narrow down on the number of portfolios or data items on a chart (mostly useful when there are more than 3 or 4 items in a list)
Testing and Key Takeaways
Over time we have ran many tests with users, some qualitative studies to understand of the look and feel of the charts or the new color palette negatively impacted how advisors study data, and some analytics studies to see if users are continuing to engage with component interactivity etc, and so far we have only received a couple of complains which we have fixed. One such complain led to us documenting data viz color palette use rules - the issue was when we used gradient of the same color to denote values that fit into the same category (such as typed of risk denoted in shades of green for example), users were not able to distinguish between the shades and tints beyond 3-4 levels. So in the design system, I made sure to document this as a ‘tip’ or something to consider before making crucial color decisions)
Next Steps
I am currently in the process of working with our visual design lead to continue thoroughly documenting these in our design system for designers across the team to grab and reuse. Some designers and engineers have already started reusing these components and their respective code, making data analytics more and more consistent across various product teams. There’s still a lot of work to do to get to an ideal place, but I’m thrilled with how much efficiency and time-saving I have already started to see in our design and development sprints.
(Do not save, download, copy or share this content without prior permission)