UI Design: Smart Beta Interactive

Using layout and color theory to make financial data accessible…

Client: Research Affiliates
Project Role: Lead Visual Designer
Project Team at Research Affiliates: 1 Lead Visual Designer, 1 Digital Marketing Lead, 2 Business Analysts, 1 Data Analyst, 1 Developer, 1 Researcher
Collaboration with the in-house team at Research Affiliates, and Digital Agency Viget.

Responsibilities

  • Create a visual design specification to communicate the product experience to key stakeholders within Research Affiliates, and for Viget’s development team.
  • Develop the product’s color system to handle nine categories of data, interaction states, and be legible in greyscale.
  • Design the initial direction for the product’s mobile experience.
1. Smart Beta Interactive | © Research Affiliates, LLC. All images are shown courtesy of the owner.

Product Background

Smart Beta Interactive (SBI) is an interactive web-application for asset managers and financial advisors. The tool offers the ability to analyze expected excess returns, historical returns, as well as various risk measures and markets for more than 25 investment strategies.

Product Requirements

  • Users need to be able to intuitively navigate multiple layers of financial data while retaining a clear sense of where they are within the tool through the implementation of clearly categorized information hierarchy.
  • Users need the ability to save or share all possible data views shareable.
  • Needs to work responsively across devices and browsers — including Internet Explorer, as many users in financial institutions are obligated to use the browser.

Product Experience

With a combined total of 45 strategies and factors, the product offers 4,185 different data views for users to explore in the tool’s main area. Early design work examined how these data views could be grouped and categorized within a UI — establishing three core chart types,and their parent controls (Strategy vs. Factor, and Region).

2. Mapping data groupings to the product’s core experience.
3. Responsive User Interface Designs

Visual Designs

The interface design (sizing, spacing, color, typography, interaction states) across devices was designed by myself. Chart implementation was handled by the development team at Viget using D3.js.

4. Layout Construction

The color design of the application presented a unique creative problem: Implement a color system that helps accessibility and reading, can be printed in both color and grey-scale, and can work for a greater number of categories than available in the rainbow.

5. Color Design

Like what you read? Give Archie Bagnall a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.