case study

Designing for a data-
heavy B2B platform

Investment app

About

This project is a B2B fund administration SaaS, that provides modern technology and reduces costs for investment managers. Due to confidentiality, a product name won’t be disclosed.

my contribution

I was hired as the first and only designer on the team to work closely with developers and finance experts. My work consisted of research, designing and prototyping for the main product as well as working on support materials, such as building a website and designing features for possible platform expansion that was not on the main roadmap.

design challenges

We had lots of assumptions that we not always were able to test and validate due to industry constraints. The lack of innovation in investments combined with all sorts of regulations and compliance created a number of obstacles we had to constantly try to overcome. We also had a couple of major pivots in the strategy, which led us to rethink and adjust our product on the go, adding up to the development time and cost.

Project

Financial web app

Timeline

September 2018 - June 2019

target user

Fund managers, investors (USA)

Team size

6 people

My role

Research, Information Architecture, User Experience, Visual Design

01/
Discovery

We started with a team discussion to better understand business requirements, gather existing stakeholder knowledge, expectations and create consensus on plans and priorities for a product, its direction and key milestones.

So what's the problem?

There are over 10,000 mutual funds in the U.S. that are distributed to investors through multiple intermediaries. Most of these intermediaries operate on legacy, expensive on-premise technologies that still employ manual processes and impose multiple layers of operating and distribution costs on investment funds. The industry structure also creates significant operational friction and intermediaries often impose information barriers between fund managers and their customer data.

Simply put, if you need to create a fund, you have to go through the "fund supply chain", which is no other than a bunch of toll booths. Just one thing as registering a fund average between $25k to $150k plus other operational fees. And for that price and headache, you might not even get analytics on your investors: who they are, where are they from, what are their net worth, investment goals, and so on.

Mutual funds supply chain graph showing how the fund distributed to investors through transfer agent, fund accounting and custody intermediaries

About 40% of costs lie in transfer agent, accounting and custody alone

identifying users

In terms of users, our platform is similar to Airbnb or Uber model, where the company connects 2 types of audiences, providing the technology for them to operate. We identified who our relevant customers are and prioritize their goals, needs and motivations. This helped to shift perspective from a features-first to a users-first mindset.

Primary users - fund managers
A fund manager is not your average user Joe. It can be anyone or anything who manage the holdings within an investment portfolio and trade them to achieve a specific investment objective. It can be an individual, a corporation, a bank or another entity.

As an example, here are some of the largest investment managers by AUM (Assets Under Management) you may have heard of:

BlackRock logo

$6.5 trillion in AUM

Vanguard logo

$5.6 trillion in AUM

Charles Schwab logo

$3.3 trillion in AUM

UBS logo

$3.2 trillion in AUM

State Street Global Advisors logo

$2.8 trillion in AUM

Fidelity logo

$2.7 trillion in AUM

Based on stakeholder analysis and project goals, for phase 1 we decided to concentrate on fund managers who issue and manage securities offered by their corporation. To summarize, their:

Goal: To ensure that assets are managed in the most cost-efficient and profitable way possible

Needs: To have full visibility into the distribution of ownership of their securities and related transactions, capture voting, tax reporting and corporate actions

Must: Comply with industry regulations

Value: Security and accuracy of their data


Secondary users - investors
These are our customers’ customers and they are also quite fragmented. It can be individual investors, like yourself, or institutional investors such as pension funds, retirement plans, governments, educational institutions, insurance companies, and more. We wanted to start with a broader use case for our product thus picked an individual investor to pair them with fund managers. To summarize, their:

Goal: To make money with low-risk high-return investments

Needs: Data transparency, low fees, freedom of choice

Must: Report on taxes

Value: Accuracy and efficiency of their actions

market Opportunities

We analyzed and found several reasons why active funds facing pressure and losing customers, but I want to point out 3 of them:

Legacy software icon featuring an old Macintosh computer

Legacy software: The existing technology for fund administration is outdated, and most managers have historically not invested in software development for their businesses. Instead, managers have chosen to focus on the “investing” side, but in today’s world, it is extremely hard to separate the capabilities of any business from the technology that powers it.

Value leakage icon

Value leakage: The data and communication between the manager and investors are hidden and indirect. In a world where direct to customer platforms have created enormous value, for fund managers, data is often hidden by intermediaries and there are multiple points of value leakage.

Rising competition icon

Rising competition: The increase of robo-advisors (digital platforms that provide automated, algorithm-driven investment strategies and asset allocation) and the availability of exchange-traded funds (ETFs, whose portfolios mirror a benchmark index) making them more appealing to consumers to invest. They both can charge far lower fees than human fund managers often charge.

Warning icon

We also determined that large funds and fund families are less likely to adopt new solutions due to institutional biases, whereas a lot of smaller funds with more acute pressure and higher willingness to innovate, will more likely to adapt to new tech.

High-level goals

After thoughtful considerations taking all available data into account, we identified and set 3 high-level product goals that meet user and business requirements:

Documents icon

Digitize paper and PDFs in customer onboarding and security creation

Process icon

Automate processes like reconciliation, payments and compliance

Data icon

Enable real-time access to customer’s data for managers

In other words, we wanted to create a cloud technology that provides automation, removes significant costs, eases barriers to entry for new funds and provides direct linkages between the funds and their investors.

02/
Interactions

Designing for a data-heavy platform resembles the work of a sculptor – you start with a massive block and then slice it away until you reach just the right thing. Data-driven applications are different in a way, that less data often means a less practical and useful solution. Keeping all the data you can, however, yields an unworkable app. It’s all about finding a balance, prioritizing and organizing features according to the main use case.

Fund creation

One of the problems we tried to solve is fund creation process. Today, apart from being expensive to register a fund, it’s a complex process that takes days to set up and may require legal help to make it right.

I started working on transferring the setup process to the digital dimension. From the beginning, we knew we would want to have more security types in the future, so the ease of scalability was one of the main requirements.

With a goal of making this process no more difficult than creating a group on Facebook, I designed a simple flow that guides the manager through the setup process, gathering all the required information related to a fund, taking roughly 5 minutes to complete.

Fund creation user flow

As easy as setting up a Facebook group

Initially, I wanted to make it straightforward, where the manager fills the information step by step. However, setting up a fund is a critical task for managers who may want to spend more time and consideration before making it live. After a few tests, we decided to make it more flexible, allowing managers to skip steps and fill data as they want with easy drop-off/return cycle and automatic data savings.

Investor onboarding

With today’s tech, the investor onboarding can be exhausting. Sometimes, it even requires a physical presence at the manager’s location. It also involves reading through dozens of pages of contracts and forms, filling in the same information again and again.

To comply with financial regulations, we had to build a crucial part of any investment software — KYC (Know Your Customer). It is a standard due diligence process of identifying the customer, their residence, investment objectives and suitability. On a grander scale, it prevents money-laundering and protects both parties in a business transaction and relationship.

After multiple discussions, tests and iterations we decided to create a full onboarding experience from start to finish where the user not only creates an account but also completes the main objective — investing in a fund.

Investor onboarding user flow

Sign up + the main objective in a single flow

I made it in a modular way to:

Checkmark icon

Give us the flexibility in adjusting the flow based on account types

Checkmark icon

Give the manager an option to set up investor verifications as deep as they need

It may feel like a long onboarding, but as tested, the whole process from registration to buying a fund takes under 10 minutes at a normal pace. It’s an optimal sacrifice for security and industry compliance.

To compensate for this, once the investor has been verified with at least one manager, they can reuse their KYC data to sign up to a different fund manager with a single button, like you sign up to different apps with a Facebook account.

Transfer agent

The Transfer Agent (TA) is usually a third party institution that plays the role of a record keeper and transaction processor. In simple words, it provides a database of who are the shareholders and what shares of what fund they own. It is a hub that connects the fund with its investors and handles the process anytime there is a transaction between the two.

Surprisingly, despite the importance of TA, there is not much progress done industry-wise:

Cross icon

It’s still common for records and transactions to be kept offline and maintained manually, which leads to a higher chance of failures on the TA side and serious business consequences

Cross icon

Most TAs are extremely expensive and can charge an issuer any amount of money they want for absurd things like paper clips

Cross icon

There are no meaningful entry standards. Unlike other financial service providers, like brokers, TAs don’t have to be licensed or certified 

Cross icon

Aside from word of mouth, there is virtually no way to assess their competency and get insights from existing customers or shareholders about their quality of service

Cross icon

What makes it more difficult, TAs are often constructing binding agreements and high termination fees in case the issuer wants to leave

I spent weeks researching and analyzing the existing solutions, trading platforms and other experiences that have elements or qualities we wanted to achieve. The hardest part was the lack of available data because a lot of proprietary investment solutions are extremely hard to get. Our CEO made a huge contribution to research by meeting up with top execs of large firms to gather feedback on products they use and their ultimate goals.

Transfer agent features sketches

CEO’s product vision, a brainstorming session

Every feature we worked on was evaluated and prioritized through the lens of a specific user group. For phase 1, we set a goal to enable the TA to:

Checkmark icon

Process money going in and out for subscriptions and redemptions

Checkmark icon

Process the payment of dividends from the fund to shareholders

Checkmark icon

Generate tax reporting for income that is passed through the fund to the shareholders

Checkmark icon

Conduct and manages votes

Checkmark icon

Distribute various forms of communications

Checkmark icon

Provide an up-to-date fund and investor data repository with real-time analytics

We had multiple design iterations and many ideas didn’t make it to the cut. For example, I wanted the investor to have a handy dashboard to see their equity at a glance. As we found out, most investors will have 1-2 funds and there was no value for an added feature. It’s important to always ask yourself who are you designing for and push back on unnecessary elements to avoid feature overload.

03/
Execution

Due to project confidentiality, I won't cover branding here but will walk you through a few design decisions I made.

colour theme

Having too many colours may confuse the user or bring their attention to less important areas. I always start my designs in b&w as it’s easier to concentrate on layout, element spacing, usability, readability and accessibility. I mostly apply colours if I want to highlight something or show the added value that can’t be shown in b&w.

For the main colour, I decided to go with a shade of blue as it’s proven to project an image that is calm, trustworthy, reliable and secure — something that aligns well with an investment product we were working on. And since we built a white-labelled experience, the main blue can be replaced with any other colour that matches the manager’s corporate style.

I also wanted to highlight some elements that either provide an important message or directly influence the user’s account. For that matter:

Color palette image

• Green is used for investment gains or success messages
• Red for investment loss or failures
• Orange for warnings and status labels

UI framework

We identified that the majority of managers will be accessing the platform through their desktop devices, whereas investors are more fragmented between mobile and desktop. We assessed different frameworks and UI libraries to find the most fitting solution in terms of speed and suitability for our project and picked Vuetify component library.

It’s built on Google’s Material Design (MD), which is great, but I find a simple following their guidelines can bring a few problems:

Cross icon

The usability of some MD components is questionable and may hurt the experience

Cross icon

The product loses its personality by being too similar to any other app made with MD, which may lead to trust bias. I didn’t want to risk that when building an investment application, so I made some visual changes

User interface components

Some of the updated components

When working on components, I wanted them to be:

Checkmark icon

Robust, look fresh and modern representing the high standards we set for our product design

Checkmark icon

Accessible to work for all of our users, regardless of how they navigate and interact with the app

Checkmark icon

Flexible to support easy scalability and the variety of use cases within our product

Anatomy of UI

I started working on a few key screens in low-fidelity to find the best solution in terms of usability and scalability. After testing and refining, the overall layout started to shape into the unified structure that can be applied for different types of users and their use cases.

App main layout image

The main layout with random data

Top bar icon

Top bar, where users control their profile settings, search for things and can access recent profile activity

Sidebar icon

Sidebar with nested navigation throughout the platform

Main area icon

The main area for the main content

Without getting deep into 200+ page design, here are 3 samples and design choices I made.

Balances image

Manager's view on balances

1. Adding breadcrumbs

Breadcrumbs are important to have as a navigation element to support wayfinding, making users aware of their current location within the hierarchical structure of the app.

To save some space, I also made them more prominent and used as page titles. All steps except the last on the path are links to parent screens.

Fund details image

Investor's view on fund details

2. Grouping content into cards.

Cards allow the user to browse content like surveying a store shelf. They are quick to scan and easy to attain an overview of the information they contain.

They also work well for responsive design because of their flexibility. The content can be reordered to fit any screen which enables a visual language and unifies the experience across various devise types.

Upload documents image

Investor's ID verification

3. Buttons styles

As previously mentioned, I worked over Material Design elements and buttons were one of those areas I wanted to change.

In particular, I got rid of:

Checkmark icon

Text buttons without a visual container, like links. Due to its smaller target on touch screens, it feels awkward for users when they press it without having feedback that their touch is registered. It is also unclear where the button’s boundaries are and forces users to move their finger or cursor with precision and more effort to hit the target.

Checkmark icon

All-caps text buttons. Google promotes this uppercase style, and in some ways, it tries to combat the problem of a small target by visually increasing it. On the other hand, sometimes it makes it harder to read, specifically for dyslexic users. People rely on the shape of letters to identify words. Uppercase letters don’t have contrasting ascenders and descenders, making words harder to read at a glance.

In total, I made 4 styles for various purposes:
• Primary buttons — for major actions, always in the main accent colour
• Secondary buttons — for the secondary actions, same style as primary, but grey
• Outlined buttons — to select multiple options where available, usually on forms
• Icon buttons — for some rare actions like table column settings or delete a document

Outcomes

There is a strong trend of reducing complexities in design. This works in consumer apps with single and simpler goals, but when you design for enterprise products, not always you can (and should) do it. We built a product for a specific audience that values functionality over the look and feel, has certain expectations and goals.

Having a small agile team allowed us to move faster without noticeable compromises either on the design or tech side. We managed to introduce a significant amount of improvements compared to what the industry operates with today. At times, there were hundreds of challenges building certain elements that fall under industry regulations in such a short time.

Learnings

If I could change one thing for this project it would be conducting more user tests. The lack of quality timely feedback certainly didn’t have a positive effect. Despite our customers clearly understood the product we were building and how we make their life easier, they wanted to see the final release to fully immerse themselves in the experience.

Scroll to top

Let's create something great together!

mobile app / web app / responsive website / brand identity / marketing design
get in touch