Project 6 | UX Portfolio

Back

The majority of my time at CircleBlack was spent updating existing functionality and adding new features to the our Advisor and Investor platforms. Click below to view some examples of my work.

CircleBlack:

Adding New Features to the Investor and Advisor Platforms

Dashboard Configuration Flow

One of the more significant features of CircleBlack products, and the primary reason for using a tile/widget approach to grouping information, is giving the user the ability to configure their dashboard. User feedback relating to this functionality is consistently positive and is frequently cited as one of the reasons for our high System Usability Scale scores.

Rather than giving the user complete freedom to drag and resize every widget, often resulting in usability issues, we decided to go with a template based approach.

5 Widget Portfolio Dashboard

The user in this situation has a 5 tile dashboard and they've decided that they want to add two more tiles.

Edit Layout Button

Clicking the Edit Layout button in the top bar opens the Edit Layout flow.

The Steps Component

Our Steps Component is seen at the top of this page. It consists of a progress bar and Cancel and Next buttons for advancing forward or moving backwards through the steps. It is what we use for breaking down complex operations into simple steps. The dashboard configuration has three steps.

Step 1

The user is presented with all the widgets that are available for that dashboard and instructed to select or deselect the widgets they wish to display.

Step 2

The user is presented with three layout options and asked to select one.

There are five screen sizes and three layouts are offered at each size. Layouts had to be designed for 5,6,7,8,9 and 10 widget configurations for the portfolio dashboard. In total, 90 different layouts had to be designed for the portfolio dashboard.

Step 3

The user is presented with the widgets and the layout they'd selected in previous steps and instructed to assign their widgets to positions within the dashboard. Widgets are assigned by dragging and dropping them into their preferred order.

When the user clicks Save they are presented with their new dashboard.

7 Widget Portfolio Dashboard

The user now has a new portfolio dashboard configuration with the Risk and Probability of Success widgets added.

Wealth Alerts

An important trend in fintech today, and one that is consistently reinforced through our research with advisors, is that they are seeking technology that can help facilitate their relationships with their investor clients. Providing actionable data, is one way of doing this.

As the lead designer on this project, I helped develop a process of creating a new Wealth Alerts feature for the Investor Portal. This feature allows the advisor to send portfolio insights to their investors and encourages them to connect with their advisors in various ways.

The Wealth Alerts Framework

In designing the wealth alerts feature I implemented a universal UI framework that can be applied to any type of wealth alert. The framework consists of the following: 1. A tile, seen on the left, that displays on the dashboard. 2. A modal, containing specific details about each wealth alert and various CTAs associated with that wealth alert, that opens when a cell in the tile is clicked. 3. A method for archiving wealth alerts. 4. A messaging function to facilitate communication between investors and their advisors.

The Wealth Alerts Dashboard Tile

The wealth alerts dashboard tile consists of rows of clickable cards. Each card contains a specific category of alert.

The elements that make up every wealth alert card are: 1. A title. 2. A brief description. 3. An X icon for dismissing the alert. 4. An alert icon. 5. A date. 6. A status indicator that indicates how many of that type of alert there are.

Clicking the card opens the wealth alert modal seen below.

The Wealth Alert Modal

The wealth alert modal, seen here, contains the same elements for all types of alerts.

At the top of the card is a title that describes the category of alert and a Mark As Unread button, that when clicked, causes the alert to continue to display on the wealth alert tile.

Below these two elements is a carousel. A single card displays on the modal at a time and the user may move through the cards by clicking the chevrons on the right and left sides of the modal. A status indicator at the bottom, center of the modal indicates which card the user is on at a given time.

All cards in the carousel contain the same four elements. They are: 1. A three dot dropdown icon. See below for details. 2. An Archive Alert button that allows the user to send the alert to their document vault for later reference. 3. A description of the alert. 4. A section of the card that contains an image.

The modal contains the alert category. In the example in the image, the category is "You Have Multiple Stocks Near their 52-Week High!". Each card in the carousel then represents a different 52-Week high alert.

The Three Dot Dropdown

The three dot dropdown in the upper left corner of the card contains the various actions that can be taken for that particular alert.

Since one of the main goals of the wealth alerts feature is to provide actionable insights and to help facilitate communication between investors and their advisors, Email Your Advisor is always contained in the dropdown.

The dropdown will usually contain a selection that allows the user to link to where their data is displayed on the platform as well.

Clicking Email Your Advisor in the three dot dropdown opens an email to the advisor. If the advisor does not wish to encourage their investors to email them there is a wealth alert's setting on the advisor platform that allows them to turn off this feature.

The Notifications Table

In the main header on the Investor Platform there is a notification bell icon. When an investor has received a new wealth alert, a yellow dot displays on the notification bell. Clicking the notification bell icon opens the Notifications modal seen on the left. The modal contains a table that displays new wealth alerts. Drilling down into a row on the table opens the Wealth Alerts Details modal seen above.

Since the user has the ability configure their dashboards, and this consists of the ability to hide tiles, they may choose to hide their wealth alert tile. The notifications table provides the user with another method for checking their wealth alerts when they've chosen to hide their wealth alert dashboard tile.

Blended Benchmarks

An important feature on our Advisor Web Platform is performance benchmarks. While our current functionality is somewhat limited in that we only offer four benchmark options, I was the designer on the team that expanded on this functionality by creating a blended benchmark feature.

Manage Benchmarks

One of the primary navigation categories within our advisor platform is Manage. Within the Manage section, advisors can edit household and client information and firm managers can view portfolio data for advisors and the clients they manage.

I added a Benchmarks selection within the Manage section as an access point for firm managers to create and edit blended benchmarks.

Clicking Benchmarks in the Manage section opens the Manage Benchmarks page seen in the image. This page consists of a table with four columns. The first column lists the name of the blended benchmark that was created by the advisor. The second column lists the name of the last individual to create or edit the blend. The ability to create and edit benchmarks is entitlement based so if the manager or advisor has the entitlement the edit column and icon will display.

Clicking the edit icon opens the edit benchmark page, the details of which are described below.

Creating a Blended Benchmark

Clicking Create on the Manage Benchmarks page opens the Create Blended Benchmark modal.

On this page the Save button is disabled until the user creates a name and creates a blend that is equal to 100%. At this point we only have the ability to create blends made up of four benchmarks. These are: 1. Global Stocks. 2. Investment Grade Bonds. 3. Total US Stocks 4. S&P 500.

Utilizing one of our existing components called the Multi-Input, the user clicks a dropdown. The dropdown displays all four of the benchmark options available to them. Once they have selected a benchmark from this dropdown and entered the percentage for that benchmark, clicking the + icon will cause a second dropdown to appear if the total percentage entered up to that point is less than 100%.

Creating a Blended Benchmark Cont.

Once the user has selected their first benchmark, as long as their total percentage is under 100% they may select a second benchmark. The dropdown for the second benchmark will now only display the three remaining benchmarks they haven't selected up to this point.

The action for the this step is the same as the first which is to select a benchmark from the dropdown and enter a percent. If the total percent is not 100 then a third benchmark can be added by clicking the + icon.

At any time in the process the user may click the - icon and the dropdown for that benchmark will be deleted.

Creating a Blended Benchmark Cont.

The image shows the user selecting their third benchmark. They have selected their first two and a third dropdown is now available. There are now only two benchmarks left in the dropdown to choose from. If the user assigns 20% to the third benchmark, their total will be 100, they will be done and the Save button will no longer be disabled. If they assign a percentage that is less than 20% their total will not equal 100 and they will be able to select the fourth benchmark.

Editing a Blended Benchmark

Clicking the Edit icon for a specific blend on the Manage Benchmarks table opens the Edit Benchmark modal. From this modal, seen in the image, the user may edit the benchmark name or go into each one of the benchmarks within the blend and either delete that benchmark or change its percentage. As long as the total percentage is equal to 100 they can save the changes they've made.