How to create splendid customer-centric design in Fintech SaaS

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.

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.

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.