Signals Fintech

How to create splendid customer-centric design in Fintech SaaS

So, you’re a time traveler (and wonder how that’s relevant to Fintech software UI/UX design.) Meaning, you can flash into the future, see how users interact with your solution, realize it differs much from what you’ve expected, and then get back and tailor everything to their preferences. Sounds great?

You can achieve the same without any supernatural abilities. Let me explain how.

Preparation for the design process

When a software development company's client needs a particular design, this need is validated by carrying out competitor analysis, developing prototypes, and interviewing end users. Miss one of these steps, and your business may end up far behind the competition, if operating at all.

The development starts with three or four specialists: Business Analyst, Tech Lead, Product Manager or Product Owner, and Designer. They form the product's vision, how it will look and function, and most importantly — how users will interact with it and use it to solve their problems. The team constantly collaborates and syncs with the client; whenever there’s a potential need to test something, they do it and make sure users get what they need.

While technical specialists often just focus on the tech side of the task, designers and business analysts usually have a lot of interaction points. While one creates a user interface that looks and works amazing, the other makes sure it will have fast enough time to market and is aligned with the client’s goals and budget. Basically, they are like the team’s left and right leg: to make a step, you need both.

Developing a design solution: Data visualization case

Now, the what’s and how’s of the solution design process.

One of the most frequent requests when designing a Fintech solution is to build a customer-friendly data visualization tool. Let’s see what’s trending in this segment

Trending types of visualization in Fintech

One of the most common needs is visualizing data based on a particular attribute, singling it out from tons of other data. Various heat maps work well for this task. They can be coupled with a time axis to show the results for a particular time period. 

Bar charts, line charts, and 2D graphs are optimal for quick insights. Typically, dashboards in Fintech solutions include these types of data visualizations on dashboards. These dashboards can be customized to include things like chord diagrams or choropleths, but in most cases, it takes a lot of time for users to get the hang of such complex visualizations.

Below is an example of an intuitive, customer-centric visualization of financial data (iPad view) our UI/UX experts created.

iPad - Sidebar - Dark (1)

Tools to use

D3.js and Observable are great for both complex and custom visualizations and simple and mainstream ones. 

D3, the JavaScript library for tailored data visualization from Observable, provides a wide range of tools and utilities for manipulating documents based on data. With D3, you can bind data to DOM elements and leverage data-driven transformations to create dynamic and interactive visualizations. Apart from the popular visual values, shapes, and layouts, you can employ reusable interactive behaviors, statistics, calendar math, and a high-level API to create things on top of D3.

Observable is a platform for creating and sharing interactive data visualizations, dashboards, and computational notebooks. It couples the power of D3 with the flexibility of a reactive programming model based on JavaScript and Markdown. Observable notebooks allow users to write and execute code snippets, visualize data in real time, and annotate their work with explanatory text and visuals.

While D3 provides more customization capabilities and programming flexibility, supported by a large and active developer community, Observable’s power is interactivity and collaborative environment. The latter also allows you to easily embed interactive visualizations and notebooks into websites, blogs, or presentations. 

Using these and other tools, we produce quality cross-platform data visualizations that align with WCAG recommendations for ensuring web accessibility.

User testing and interviews

Once your team has come up with a prototype of the solution you want to impress the market with, it’s time to see how users perceive it. That’s what user testing is for: getting user feedback and polishing the prototype into a full-fledged solution that solves their problems and is a pleasure to use.

User testing presupposes no moderation; you just give users a prototype and then gather analytics. In qualitative user testing, users run a scenario with a prototype and actually talk with a moderator, explaining their actions, providing feedback, pointing to confusing things in their experience, room for improvement, and so on.

david-travis-WC6MJ0kRzGw-unsplash
Photo by David Travis on Unsplash

For qualitative user testing and interviews, six to eight participants are enough. Patterns in user behavior are already repeated on the fourth or fifth one if you keep the scenario, system, tasks, etc., the same. While testing doesn’t guarantee a perfect product, it’s a marker of a great software development team that actually puts the client’s needs first, not just doing what they are told but proactively seeking the perfect solution.

Results analysis

Based on the interview and test results, you receive a clear picture of how users perceive your solution or feature. While sometimes our team just gets a few suggestions on how to improve user experience, we might also learn that instead of a neat table with numbers, as planned by our client, users need detailed data visualization to simplify their decision-making (I’ll take this case as an example to show you what an intuitive visualization customers wish for looks like.)

Discussion with the client

To get the best results from this discussion (and at every instance of interaction with the client), the team needs to be super active. We do that not to create an impression of involvement. We do that to get our ideas and expertise across and ensure our client understands why and how exactly our offer will work for their benefit. When the BA and designer have mastered design literacy, they can offer something that truly works for the user (which is often completely different from what the client has envisioned.) The value of the product, as well as the prioritization of its component, can also change at this stage. 

By the way, a designer’s presence during a pre-sale and the following calls with the clients is a great practice. Designers can identify problems and opportunities for improvement that technical specialists or BA can miss simply because their expertise differs. In case the vendor includes the designer (or other specialists) on the pre-sales call, they can direct the design process in the right direction from the very start of the cooperation and help avoid unnecessary development detours or expenses.

After discussing the results with leadership, we managed to come up with a solution that was simple enough to require reasonable and budget-friendly resources yet followed the customers’ needs precisely. Of course, we also made sure that the solution was competitive, with MVP including just the right number and type of features.

Wrapping up

By following the design process guidelines I provided above, your company can create a Fintech solution that your clients and end users will love. A well-planned and thorough preparation process, innovative tools, and attentive testing of the solution with users’ needs in mind will increase the chances of your product’s success. Our team knows that from our own experience.

When the MVP of the first version of the product goes to the market, we know that we did everything to ensure its bon voyage, and now the client can focus on the metrics that help this product move ahead on the competitiveness scale. 

If you have any questions about the design process specifics or want to explore the design options for your future product, contact our team.

How SVB Fell to Pieces in 48 Hours, and What’s Next for Fintech

How SVB Fell to Pieces in 48 Hours, and What’s Next for Fintech

A banking crisis is where Fintech rises to push off and make its start. At least, that’s what we saw in 2008. Recent news of the collapse of Silicon Valley Bank (SVB) has sent shockwaves through the industry, leaving many wondering about the implications of such a catastrophic event. It could be a big reset to get to the next level. But the questio...

A banking crisis is where Fintech rises to push off and make its start. At least, that’s what we saw in 2008. Recent ...
More

Business Analysis for Fintechs: What Tech Leaders Need to Know

Business Analysis for Fintechs: What Tech Leaders Need to Know

A deepdive assessment of your business processes and functions may reveal that you could do much better, even if you perform just fine.

For financial service companies, business analysis is necessary to optimize the workflow. For startups, it’s a chance to play it safe. Cases differ, but BA is still a king.

In this article, you’ll learn how ...

A deepdive assessment of your business processes and functions may reveal that you could do much better, even if you ...
More

How to Build AI-Powered Credit Scoring Software - Tips from Experts

How to Build AI-Powered Credit Scoring Software - Tips from Experts

Credit score is your multipass in the world of financial services. It helps you secure a loan, apply for a credit card, or rent an apartment. It’s a thread binding it all together in the intricate web of financial decision-making.

Today, the landscape of credit scoring is evolving, and it's not just about numbers and formulas anymore. AI, the po...

Credit score is your multipass in the world of financial services. It helps you secure a loan, apply for a credit ca...
More