Quantscore Web App

A tool which evaluates companies to provide financial and audit assessments

Product teams

Capital Group and Sapient

Deliverables

UX Research, UX Design, UI Design, Prototyping, Usability testing

Role

Sr. Product Designer

Duration

9 months

Tools

Sketch and Miro

Outcome

Fully shipped end to end Web app for B2B

The Quantscore Framework is a proprietary tool developed for investors and auditors that identifies companies with a history of fraud and accounting sins, streamlining their financial and audit assessments on more than 16,000 companies across 87 metrics in 18 categories monthly.

One of the experienced analyst have worked to identify metrics in 18 categories that he find helpful in their analytical process. It has programmed these 87 metrics into S&P Clarifi and created a scoring framework that assesses companies metrics relative to their industry and the broader universe.

Excel-based data analysis slows down Portfolio managers and Analysts. They need access to data from 16,000 connected companies with
87 financial metrics in 18 categories monthly. This data will impact investment decisions concerning Audit Quality Risks and Quality scores.

In initial discussions with stakeholders and the Product Manager, we reviewed the current tool's appearance and functionality. It became evident that understanding and analyzing 16,000+ global companies and their scores was a tedious and cumbersome task using the current tool.

Today’s Quantscore Excel-based tool

When I brainstormed and got requirements based on initial discussions, my obvious question was

The problem is already solved in the exisiting solution and won’t create a bigger impact. So why there’s a need to create a separate framework?

While a simple excel-based tool can give the answers but there were so many gaps and additional functionalities which internal team were facing.

Time Intensive Process

No Saved Preferences

User customization

Complicated User Access

Automation

Scalability

The CPU killer

Web-Based User Access

Data Isolation

Ecosystem

Ok makes sense, but who are the end user involved?

Portfolio managers
Analysts
CSR accounting team

User Research

I jotted down the plan. And i was facing a challenge to move further, so I wrote down step by step goals to solve it .

My high-level goals & challenges were:

Goal 1

Understanding the basic requirement and functionalities

Goal 2

Understanding the challenges faced by analysts and Portfolio Managers

Goal 3

Complicated user flows and navigation & how it can be formulated into data visualization

Goal 4

Accessibility and advanced filters.

Goal 1

My first goal was to create basic user flows to understand the navigation.

But before that I wanted to know the use cases of user that how they will perform. So to make it easy I created few wireframes/sketches.

By Portfolio: User will search portfolios either with existing portfolios through universes they select. if not, then they will add new portfolio
By Screener: User will be spending more time on screener page (S&P 500 as default) so this can be kept better as homepage. given that they will eventually select Universes to land on Screener page
By Company details: User will be interested by evaluating specific company in depth through names or company tickers

So this user flow gave me enough idea that how to get started and then I collaborated with Product manager and User on Figjam to know more.

My second goal is to understand challenges faced by PM’s and Analysts

I collaborated directly with end user including Product Manager.

So I created some scenario specific questionnaire to dive deeply about users.

Total users were 56 but I chose 7 users in total.

User must download a 190MB file from Capital Connect each month.

Complicated User Acess

6

Data Trapping

Data is trapped in an Excel file with no connectivity to other CG applications

7

Automation

Automatic ingestion of fresh financial data into the tool each month

7

Connectivity issues

It will connect with many other applications across 16,000 companies creating an ecosystem

5

Capital Connect Company Page Widget, CSR Audit Quality Risk Framework (web- based Tableau tools).

Disengagement w.r.t Ecosystem

6

I wanted to know what high level functionalities users needs to capture in their screen view. Some features were inspired from previous products which users use it as a base product for analysis.

So I mapped the tasks and it helped me to understand the structure of the projects, identify the bottlenecks or challenges and the plan to execute the project more efficiently

I chose to go with separate use case but the idea failed as this was first iteration and the screen views were disengaging to users

Here I solved the complications of user flows by creating simple and intituitive navigational flows right at top.

Portfolios are connected with 4 different groups as CG funds, Universes, My portfolio and Shared portfolio.

CG Funds consist of Capital Group accounting team’s overall funds
Universes: They are been derived from only one single source i.e. S & P 500 as a default universe
My Portfolio: Consisit of my own selected portfolios from 16,000 companies
Shared Portfolio: are the ones which are shared with internal team

Here, I created four tabs design for easy navigation.

To keep all the portfolios in the eco-system at one place. I tried giving the list of all at one place without disengaging the below main view

User wanted to have a full control over a particular portfolio names and tickers. Although, this seems to be preety easy but organising and maintaining the exisiting portfolios was a huge task So I came up with the functionality as “EDIT MODE” where a user can edit, add, remove. This view is a separate view to update a portfolio.

Add Tickers

Remove Tickers

Update Portfolio

Edit Mode

These all companies should be linked to demographics the sidebar is used for search for 16,000 companies and it will add or remove from a given portfolio. This works like a shopping cart where a user is not sure to buy or not.

I used my previous product experience of e-commerce application and connected the 16,000 companies to make a smooth experience.

This page plays a crucial role in handling Metrics. The customization options are provided through an Advanced Filter, empowering users to modify company details according to their preferences.

Here, the important functionality was to give user preferences with multiple features

Reset

Save

All Filters

I thought of all suitable edge cases keeping all in sidebar as I don’t wanted to disturb the current view. All the filter actions can be done in sidebar

The Company page allows user to quickly check the data of 16,000 companies with the help of base product "CSR Accounting tool"

The problem with accounting tool was to fetch data and show it into equivalent visualization which can show Tabular as well as Bar chart

I came up with the Widgets design and designed a flawless dashboard

Industry & Universe Scorings

Analytics

Total Warnings

High- Risk Warning

Audit Risks America

External Link

Export

Metrics in Tabular Chart

Metrics in

Bar Chart

Metric Breakup

Average Breakup

My 4th goal was to keep the Views and Accessibility at top concern

If I had more time..

My biggest challenge was...

My biggest takeaway was...

I would have dived deeper into the usability testing of the product and should have reiterated.

Maintaining drive and proactivity to engage and align all of my stakeholders to know more about color blind problem.

Cross-functional alignment is crucial for a successful project and successful product. The earlier you establish specific expectations and priorities, the easier the project is going to be.