CircleBlack:
A Complete Redesign of the Investor Web Platform
CircleBlack is a financial technology company offering unified wealth management advisor and investor platforms. Managing firms with a combined AUM of 98 billion, CircleBlack offers both web-based and mobile application platforms for investors and a web-based data integration, aggregation hub for financial advisors.
The new investor web platform that I designed for CircleBlack.
Product Overview
​
CircleBlack's Investor Web Platform is a data integration and aggregation tool that gives investors the ability to track their financial progress and provides them with multiple ways for connecting with their advisors. CircleBlack's existing platform was outdated and needed a full redesign. I was the lead designer and researcher on this project, working collaboratively with the product and engineering teams.
​
Since this was a large scale undertaking, considerable time and resources were dedicated to it. The total project from planning, research, design, requirements writing, development and product release took five and a half months.
​​
User Research
​
The following is a list of the user research that was conducted as part of this project. A more detailed research summary of the usability testing that was conducted can be found here.
​​
-
Benchmark testing the existing V3 Advisor Web Platform. Two Rounds of remote unmoderated usability testing.
​
-
Benchmark testing the existing Investor Mobile product. One round of remote, unmoderated usability testing.
​
-
Benchmark testing the existing V2 Investor Web Platform. One round of remote, unmoderated usability testing.
​
-
Iterative testing on the new V3 Investor Web Platform. One round of remote unmoderated usability testing.
​​
-
12 product demos and feedback sessions on the V3 Investor prototype with current and prospective clients.
​
-
Numerous internal product team and company wide product feedback sessions.
​​
-
Daily design review sessions.
​​
-
2 Client surveys administered to the advisors at 15 of our firms focusing on product feedback and pain-points.
​​
-
Weekly client feedback focused conversations with clients. ​
​​
-
Weekly meeting with our client services department to discuss reoccurring themes around customer feedback.​​
Investor Platform Designs
The Portfolio Dashboard
The Portfolio Dashboard
This image depicts the newly redesigned portfolio dashboard. The new tile design utilizes dashboard space more effectively, the contextual navigation is now visible in the header and the overall visual design has been modernized. ​​
Components that were Created for the Investor Platform
The Components
The components are the basic building blocks for everything we create at CircleBlack. In the months prior to starting on this project I had been asked by the marketing department to create a series of banner ads for the company. At the time I was playing with the idea of creating 3 dimensional layering among the elements in the ads. One of the members on our team mentioned that they'd been inspired by neumorphic design and I jumped on the opportunity to implement neumorphic design principals into our existing flat components. We created a few pages using this three dimensional approach and A/B tested them on clients. The feedback was unanimously positive in favor of the 3D visuals. However, all of our components are built so that they reference a specific color theme and therefore if a user does not wish to for the 3D visual design to display, they may turn it off. The reception to this visual approach has been overwhelmingly positive, receiving rave reviews from clients and the company leadership. This is a selection of some of the three dimensional components I created for the Investor platform.
Dashboard Tiles
The Dashboard Tiles or Widgets
The tiles contain our components and are how information is grouped or organized on the page for all of the products at CircleBlack. Each tile contains a specific feature or functionality. On the investor and advisor web platforms the user has the ability to choose which tiles they wish to display, as well as the configuration of their tiles on the dashboard. Each tile must be designed so that is infinitely responsive from 200px up to over 2000px in width and height.
Portfolio Overview Dashboard
Portfolio Overview Dashboard
The Portfolio Dashboard provides an overview of all the user's accounts in their portfolio.
​
Primary Navigation
To address the issue of the contextual navigation being hidden in the old version of the Investor platform we decided to move it to the primary navigation at the top of the page. The Portfolio, Accounts and Groups navigation categories allow the user to view their performance, balance, risk etc. from each of those three contexts.
​
Tile/Widget Concept
User testing of our existing Advisor product, which utilizes the tile concept revealed that users love this approach. They reported that it is a simple and intuitive method for grouping information within the dashboard.
Dashboard Configurability
This dashboard, as well as the Accounts and Account Groups Dashboards, are fully configurable by the user. The user has the ability to choose which tiles they want to display on each dashboard and hide the tiles they don't want. A list of their hidden tiles may be accessed by clicking the three dot dropdown in the header bar at the top of the page.
​
​
​​​
​
​
Accounts List Page
Account Overview Dashboard
The Account Overview Dashboard
The Account Dashboard allows the user to look at the details of a specific account.
​
Accessing the Account Overview Dashboard: The user clicks Accounts in the header navigation. This opens the Accounts List page. From here clicking the View button for an account will take them to the dashboard for that specific account.
​
Another way of accessing the Account Overview Dashboard is to select an account from the Accounts tile on the Portfolio Overview Dashboard as seen above.
​
Configurability of the Account Overview Dashboard: While the Account Overview mockup shown here only contains five tiles the user has the ability to select up to seven tiles for this dashboard. The additional tiles not represented here are:
1. Account Info.: A detailed overview of the Account.
2. Insights: Articles on emerging financial news.
​
These tiles can be accessed by clicking the three dot icon in the header bar at the top of the page.
User Testing: One theme that emerged from user testing on the new design was that users were able to quickly and easily access information for a specific account through each of these paths.
Account Groups List Page
Account Group Overview Dashboard
The Account Group Overview Dashboard
Allows the user to look at the details of a group of accounts.
​
What is an Account Group?
The user has the ability to create their own account groups. An account group is a collection of accounts that the investor has chosen to put together in a single container so they can track their collective progress.
​
The Account Groups List Page
This page depicts the various groups created by the investor. It is accessed by clicking Groups in the header navigation. Each tile represents a single group of accounts. On each of these tiles the user can see the overall balance, performance and number of accounts in the group. Clicking View Group on the tile takes them to the Account Group Overview Dashboard.
​
What is the Account Group Overview Dashboard?
The Account Overview Dashboard, as seen here, provides the user with a variety of information about the group of accounts such as the various holdings that make up the group, the balance, performance and exposure of the group. Once again the dashboard is configurable and while the user has elected to display only five tiles here there are seven tiles available to them.
​
User Testing
When testing our original Investor Web Platform users were particularly confused about what groups were and had difficulty accessing the old version of the overview dashboard. Elevating the prominence of Groups by dedicating a primary navigation category to it seemed to fix the issue.
​​​
Document Vault Page
The Document Vault Page
This is an important method by which financial advisors connect with their investor clients. Advisors report that quality communication between them and their clients is the most important aspect of their job. Our goal is to provide them with a variety of methods for doing this and the Document Vault is one of those methods. The Document Vault allows advisors to send reports and news articles directly to their clients via our Advisor Portal to the Investor Portal.
​
The Investor may then share or view the details of these documents by clicking on the relevant icons in the Document Vault table.
​
​
​​​
Profile Page
The Profile Page
My philosophy with the Profile page, and all of the gear menu pages, was to continue with the same tile based design language that was being utilized for the portfolio and list pages. The concept was to utilize the tiles as a method for organizing information with each tile representing a main category containing sub categories.
​
Gear Menu Dropdown
This screen shows what the gear menu looks like. A consistent design goal was integrating neumorphism (see neumorphism section below) into all components or visual elements on the page. The Gear Menu Dropdown is a good example of this. The clicked selection in the dropdown received a indented visual effect and the dropdown card was given shading to appear as if it hovers over the content below.
​
User Testing: An important finding from testing was that there were a number of important functions, such as manually adding an account, were hidden in the gear menu pages. As part of the redesign I moved the frequently used functionality out of the gear menu and into more visible locations within the platform. ​​​
Advisors Page
The Advisors Page
The Advisors Page provides the user with a simple way of accessing contact information about each of their advisors, identifying which of their accounts are being managed by them and adding or removing accounts.
​
Page Responsiveness
While I describe my approach to responsiveness in greater detail below, a great deal of consideration was given to how each page responds to resizing. The tiles and content within them is always laid out in a way that allows for it to be reconfigured as the page width shrinks and grows. In the Advisors page the account and contact information is laid out in columns which can wrap or stack as the page narrows. ​​​​​
Preferences Page
The Preferences Page
This page allows the user to control how information is being displayed on their dashboards as well as what type of information is being displayed. This controls the information that is represented in the donut graph on the Exposure tile, the performance data that will display on the Account Groups page and the type of financial planning and risk data that will display on the Risk and Probability of Success Tiles. It also allows them turn on and off Two Factor Authentication and various notifications. ​​​​​
About Page
The About Page
Is a pretty short and simple page that I designed where I broke the content up into tiles. Clicking the buttons on the tiles opens modals where they can leave feedback or access text heavy content such as the CircleBlack Terms and Conditions, Security and Privacy Policy.​​​​​
Modals that were Created for the Investor Platform
Modals
This is a selection of some of the modals I created for the Investor platform. The goal with each of these was that, regardless of the component that was being utilized for the particular modal, all modals had a cohesive visual design language and that the layout of each was simple and intuitive.
Responsive Design Within the Investor Platform
Width: >=526px
Height: <=420px
Width: Between 526px and 820px
Height: >=1326
Width: Between 526px and 820px
Height: Between 821px and 1325px
Insights at Full Page View
Width: <=525px
Height: <=810px
Width: <=525px
Height: >=1326px
Width: <=525px
Height: Between 811px and 1325px
Responsive Design
Every page, tile, modal and component on the Investor platform is responsive from a 200px width up to over 2000px. We design everything for 5 screen sizes but every element on the page has its own series of breakpoints. The 5 screen sizes we design for are:
​
XS: 0px - 399px = 1 Column
S: 400px - 669px = 2 Columns
M: 670px - 1089px = 6 Columns
L: 1090px - 1819px = 10 Columns
XL: 1820px + = 18 Columns
​
Responsive Design Applied to the Insights Page
This series of images demonstrate the work that goes into designing a single responsive page on the Investor platform.
​
The height and width dimensions indicate what displays on the tile within the various pixel ranges.
The Insights page
This page provides a way for financial advisors to share relevant news articles with their clients. It can be a tile that exists on the investor's dashboard, and can also be expanded to a full page view.
​
User Research
I put considerable effort into designing this page because customer feedback and user research indicated that both advisors and investors are seeking alternative methods of connecting and communicating with each other. It has since become a major selling point that marketing has used to promote the new product.
Width: >=526px
Height: Between 421px and 820px