top of page

Overview

Summary

Created a UI component that assists users in identify contracts that breach the terms of their contract

Role

UX/UI Designer

Impact

Near total reduction in contract breach case

Creating a UI component

Overview

With an increasing number of portfolios to manage, Jarden wanted to provide advisors with quicker access to key metrics.

Design environment

Design was a new concept for Jarden. Management did not know what to expect, nor what functions design would fill. Due to this, problems and solutions are presented, and design was expected to execute on a UI level only. To enlighten management on the value design can offer, I extended my role to include user research. to improved the original solution and demonstrate value.

Objective

Develop a visual tool to identify portfolios that are not meeting their required risk tolerance.
 
Management had not previously worked with a design department and had dictated a desired design. 

  • "Add new column to existing accounts page, single % ranging, +/-, maximum of 100%, sortable"

  • "If income is less than it should be, then the number is positive, and the calculation is current growth - strategic growth target"

Initial product

The page where the component would live shows a summary of each investment portfolio managed. This information is a static summary of the contract, not a real-time view of the holdings. Users have to navigate down through multiple paths to find actual values.

Area of interest.png
User Testing

Management had made the assumption that users viewed the growth target of a portfolio in isolation. I wanted to challenge that assumption to test whether it was indeed how users acted.
 
Hi-Fi Figma designers were tested with 6 advisory teams (15 individuals). 
 
A key objective of the testing was to show management that testing and co-design with users was a way to rapidly identify success without wasting development resources.

First testing.png

​Testing identified how users mentally visualized targets, and how management’s perspective was different from users. Users considered growth and income as a combined, inseparable concept, and would struggle with the idea of “growth being +100% of target”.

Redesign

Based on user feedback the component was reworked.
 
I borrowed from a similar visual design used to display cash levels.
 
Strategic targets have also been introduced based on user feedback.

Redesign stages.png
Implementation

The component is successfully deployed with no significant negative feedback.
 
Management was happy with the deviation from the initial design spec.

Deployed.png
Impact

Before this feature, portfolio managers could not quickly identify whether their portfolios were within the acceptable growth allocation. This resulted in managers breaching a portfolios contract for weeks at a time. With this new visualization, the compliance and management team experienced a near total reduction in contract breach cases.

©2025 by Simon. 

bottom of page