trading app ux case study

Mastering Fintech UX: A Design Case Study

New fintech apps are changing how we see our investment goals and interact with financial institutions. This article reviews best practices for building trust without sacrificing fun or usability.

By Tejas Bhatt

Tejas designs impactful digital products and works with major Indian startups, including the world’s largest bank and credit card company.

PREVIOUSLY AT

Financial tools aren’t the most exciting products to use—they can feel cold, boring, and corporate. As complex tools with tons of functionality and customization, most provide insufficient training and education—and don’t even get me started on documentation.

While regulatory obligations often require that financial apps behave in a certain way, there are opportunities to make the experience fun and hassle-free for users while still keeping it professional and easy to use. With the appropriate context, financial apps can offer a pleasant and interesting user experience instead of following the drab status quo model.

With Fisdom —an investment app designed to make investing easy for people without an education in the Indian stock exchange, the client has three main goals:

• Resolve the high dropout rate that occurred before users started making investments.
• Research ways to improve the investment registration process (more on this later).
• Make the app more visually appealing—Fisdom is intended for anyone interested in investing, not just for commercial use.

Fisdom operates differently than most investment apps or services. Typically people invest in stocks, bonds, or a multitude of other things based on…well, anything! Sometimes it’s because they like the company, sometimes because they think it’ll do well, or perhaps because a financial expert recommended it.

In this app, the process is reversed. Users set an investment goal—an amount they want to accrue over a selected period of time. From there, the app suggests various options (using historical data and machine learning) and users can invest towards that goal with monthly deposits.

This investing method removes the complexity of choosing individual investments (though users can still invest in whatever they’d like), which makes it critical that the app builds trust with the user every step of the way. A simple misunderstanding of even basic features could theoretically lose users a lot of money!

Yet because of the wealth of alternatives, the initiative to make the app fun and engaging had to be taken into consideration throughout the entire process. This sharpened our focus on building trust through visual appeal and ease-of-use.

Show Them the Money

The investment process in India requires that investors complete a one-time K now Y our C ustomer (KYC) form. The form is five pages and requires a lot of information.

Originally, the KYC was a prerequisite for users to make an investment, but in our usability testing , we found a significant dropout rate during the process. It was obvious that the KYC was too cumbersome, and the process of completing the form needed an overhaul.

So we moved the requirement for KYC registration to the end of the process.

While regulatory requirements state all investors must complete the KYC, users needed time to build trust with the app first. To establish that trust, we turned the process inside-out: Allow users to try the app, make their investment decisions, and when ready to invest, complete the KYC form. In this way, users were given the opportunity to build rapport with the app.

We even went one step further and gave three days for users to complete the KYC after making their investment decision. Their money, safe in escrow, would be refunded if the form wasn’t submitted.

Design for Data Entry

This still left a significant challenge: Actually filling out the KYC is a ridiculous process. It’s five pages of a lot of personal information, all of which needs to be typed on the phone!

During the research phase, we found that there were a few government-approved APIs that scan for and provide essential personal information. Much of this data worked perfectly for the KYC, so users could save significant time by either scanning their tax permanent account number (PAN) card or by entering the PAN manually (all Indian citizens have a PAN).

This cut the time to enter required data into the KYC by half…at a minimum! Users who already completed the KYC were automatically 95% complete and only needed to confirm their information and provide a digital signature.

Users who didn’t complete the KYC still had to provide their essential information, so it was important to make input easy and fast. This included simple usability tricks like showing the number pad keyboard for number-only entry fields, using the camera to scan documents or cards where available, etc.

Fintech Apps Don’t Have to Be Boring

During the competitive analysis of other apps in the fintech space , it was clear most of them had bland color palettes and uninviting experiences.

When learning anything new, being bombarded with information can be overwhelming, which makes most users leave before they begin. Minimalism in design is not about flat color palettes and non-skeuomorphic buttons—although often that helps—it’s about how information is structured and the cognitive load required to use the given features.

Investing is hard enough, so we made a conscious effort to keep things simple, both for process and interaction. Subsequently, the visual design turned out wildly different compared to other fintech tools.

“Investing” in the Visuals

We did so by creating a palette that sported bright hues to support the light and playful concept of the application.

Vivid graphics and illustrations enhance the experience, which is important in order to make a dry subject like investing more exciting. This is especially challenging for an investing app, not only because the content needs to be open and easy to understand, but also engaging to promote usage.

From the get-go, it was important to set a playful tone—colorful sign-up screens convey a distinct personality and small transition animations help increase engagement. This level of customer experience was uncommon for the client, so we delivered detailed animations as specs to the development team so they could better understand our design strategy and how they should implement our designs.

Investing long-term is daunting, and few of us know exactly where we want to be financially (aside from “I want to be rich”). To help simplify the process, we added visual associations to all financial goals. This made the choice easier to understand.

As a side benefit, visualizations also provide a way for users to learn about those options and make better-informed decisions for investing their money.

Respect Your User’s Level of Expertise

One overarching goal was to provide any user—regardless of experience—all of the information necessary to make wise investment decisions. The client’s concern was that a significant percentage of users would use Fisdom to make their first-ever investment, so it was critical to educate first-timers about the process without making the experience “too novice” for everyone else.

At nearly every step of the investing process, we provided heavily-curated content in the form of tooltips that users could see or skip. The knowledge base was organized to reflect various user personas (student, married, retired, homemaker, etc.) and levels of expertise. This way, users could read up on anything they didn’t understand and skip everything else.

Blank States, Language, Messages

Investing is challenging enough, so we focused on clear labeling to indicate when and where users were required to provide input or move forward. For any blank states (zero-data screens), we provided clear call-to-action buttons so users were sure about the next step.

With the app’s contextual tooltips, content was written to be fun yet direct. We tried to avoid the potential of users getting stuck because they were confused about the next step. This wasn’t just for clarity and keeping the app light-hearted; it was specifically to make sure users always had a path forward in order to complete a task, or go back, or read more about the feature.

Multi-step processes were also made apparent by indicating progress with steps remaining, options to skip (when possible), and clearly showing a redirect, as seen below. This creates a sense of trust in users. At every step along the way, they can see what is happening, their current progress, and what’s next.

Closing Thoughts

Financial apps are seemingly at a disadvantage because of regulatory and legal requirements. Until recently, this has led to poorly designed, bland, and sometimes incoherent apps, features, and processes. However, in UX, these limitations can be a blessing and provide a structure for designers to work with. With a small amount of extra effort and thought, creating clear and simple experiences is actually made easier when requirements like regulations need to be followed.

This is where the new-age fintech products have an opportunity to score. By identifying their users and tailoring the experience towards a niche, the legal restrictions and requirements are a challenge to design for rather than a problem to circumvent. Those requirements also provide an opportunity to educate within the product in a fun and informative way.

With Fisdom and several other apps like Wealthy and Sqrrl , fintech apps in India are improving thanks to a user-centered design approach. Most still lack the clean interface design and refined user experiences that have become commonplace in other types of apps, but the change has already begun, and more apps and services are creating better defined, smarter experiences that address user needs.

In the Indian market, this design shift was risky; Fisdom was one of the first stylized personal finance tools, and other companies have only recently begun focusing on UX. Those risks paid off; the Fisdom app now has hundreds of thousands of installs (up from 1-5k pre-redesign) and a 4.2-star rating on the Google Play store.

Further Reading on the Toptal Blog:

• UI Design Best Practices and Common Mistakes
• Empty States: The Most Overlooked Aspect of UX
• Simplicity Is Key: Exploring Minimal Web Design
• Heuristic Principles for Mobile Interfaces
• Designing for Readability: A Guide to Web Typography (With Infographic)

Tejas Bhatt

Ahmedabad, Gujarat, India

Member since February 27, 2017

About the author

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Toptal Designers

• Adobe Creative Suite Experts
• Agile Designers
• AI Designers
• Art Direction Experts
• Augmented Reality Designers
• Axure Experts
• Brand Designers
• Creative Directors
• Dashboard Designers
• Digital Product Designers
• E-commerce Website Designers
• Full-Stack Designers
• Information Architecture Experts
• Interactive Designers
• Mobile App Designers
• Mockup Designers
• Presentation Designers
• Prototype Designers
• SaaS Designers
• Sketch Experts
• Squarespace Designers
• User Flow Designers
• User Research Designers
• Virtual Reality Designers
• Visual Designers
• Wireframing Experts
• View More Freelance Designers

Join the Toptal ® community.

• Illustration
• Processes and Tools

Case Study Processes and Tools UI/UX

Case Study: Bitex. UX Design for Stock Analysis App

Ux design sometimes demands non-standard skills and solutions. our fresh case study shows such a process for a stock mobile app oriented to the chinese market..

When you start working on a new application as a UX designer, you never know beforehand what knowledge you might need this particular time. Of course, first of all, that’s knowledge of the various platforms, understanding the general principles of design, layout rules, the ability to design a complex user architecture, etc. But sometimes it may be completely unexpected things, for example, the knowledge of the cultural characteristics of an ethnic group or the understanding of Boolean algebra and the fundamentals of circuitry. That’s what happened in one of our recent UX design projects we will unveil in today’s case study.

The task was set to make a complete redesign of a live application Bitex oriented initially to the Chinese market. The application is an aggregator that collects data from world exchanges, processes it, builds the necessary charts and diagrams and displays this information in a user-friendly and digestible way. The main goal of Bitex is to help the trader decide on investments.

The main shortcomings in the customer’s opinion were:

• non-compliance with iOS guides
• not successful design at the UX stage
• congestion with graphical elements and, as a consequence,
• high threshold for the user’s entry.

It looked like this:

The designer for the project was Sergey Kucherenko and the experience obtained in the process was really an unforgettable challenge for all the team.

Solid architecture is built on the well-done foundation. So, first of all, we decided to completely rework UX, starting from splitting data into logical blocks corresponding to the tabs and ending with the logic of plotting.

Already at this stage, we had to face the peculiarities of the visual perception of information by users from the countries of Asia. The fact is that many users from Asian countries believe that the more information is shown on the page, the better.

Some experts argue that this is due to the psychological characteristics of perception. Some say that these are cultural features that have remained since the low speed of Internet connection when users preferred to simply remember information, and later comprehend it.

Others explain it by the peculiarities of language and writing.

Check more on the issue of UX of Chinese websites in the articles here and here .

Whatever is the reason, we constantly had to make compromises regarding the ratio of the number of images and text, as well as the density of text layout.

Also, an interesting feature was discovered in the subconscious perception of color coding . Here’s the simplest example: in Western resources about finance, the rise in the share price is indicated in green and the drop in red. Meanwhile, in Asian countries, everything is opposite. Since investors planned to enter the Western market, we were forced to add a switch “color growth price” to solve this problem.

But the most interesting task at this stage was implementing a unique function that is a flexible filter that the user can fine-tune to achieve their goals. This filter consists of several simple characteristics and four characteristics that are specified by a range of values, whereby one characteristic can have any number of ranges that do not intersect with each other (from A to B, from C to D, etc.) Also, the range may not have a final point (from A to infinity). This issue was solved with the “Add Range” button and the “Maximum Value” formulations for the right slider of the slider.

But the main feature of the filter was that the user has the ability to put a logical “AND” or a logical “OR” between all characteristics of the filter (these operations are also called conjunction and disjunction, which are used in Boolean algebra.) Boolean algebra is the basis of circuitry and system engineering: without it, cybernetics would not be possible. Boolean algebra operates with only two concepts: “True” and “False.” Basically, it works the following way: if there is “AND” between all the variables in the equation, a user will receive the result of “True” only if each variable is “True.” In this particular case, the user will receive a list of only those stocks that meet all the specified parameters.

Logical “OR” will result in “True”, if at least one of the variables is “True”. In our case, the user will get a list of all the stocks that satisfy at least one specified parameter.

Summarizing, if you filter the result only by “AND”, you see a very short list of results. If you sort by “OR”, the list of results will be long. In fact, both options can be useful, but the customer has set the task to implement on the basis of iOS the ability for the user to apply both of these logical functions for any parameters.

Mathematically, the solution had already been programmed by Dr. Khan (he came up with the idea of creating this application). To illustrate his idea, Dr. Khan used screenshots of his working prototype.

Our task was to implement the principle using standard iOS controls and patterns understandable to ordinary users of mobile applications.

The solution was to initially filter out all the characteristics of the “AND” (i.e., to narrow the search circle to the user as much as possible). And after that, it allows the user to choose to which parameter “OR” is applied if the original result did not satisfy the request.

For the visual performance of the application, we received clear instructions from the client to use light shades of blue and create a clean and accurate appearance for the application. The design had to use the minimum possible number of additional colors and images.

Our team decided to present two opposite color themes ( light and dark ) to choose from. But the customer liked both equally, so the dark theme was designed to be used as a night mode. In total, we collected 120 screens (60 for each version).

The UI concept based on the light background

The UI concept based on dark background

Bright color accents allowed for building strong visual hierarchy and attracted the user’s eye to the most important interactive elements on the screen. Also, the choice of fonts for the user interface was another object of thorough selection and analysis as the screens were loaded with different information and demanded a high level of readability.

After all the details and transitions were agreed upon and tested, the application was adapted for use on iPad and Android smartphones.

Useful Case Studies

If you are interested to see more practical case studies with creative flows for mobile UI design, here is the set of them from Tubik.

Slumber. Mobile UI Design for Healthy Sleeping

Letter Bounce. UI Design for Mobile Game

Real Racing. UX and UI Design for Mobile Game

Real Racing. Graphic Design for Mobile Game

Manuva. UI/UX Design for Gym Fitness App

Cuteen. UI/UX Design for Mobile Photo Editor

Tasty Burger.UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Night in Berlin. UI for Event App

Upper App. UI Design for To-Do List

Toonie Alarm. Mobile App UI Design

• February 2024
• January 2024
• December 2023
• November 2023
• October 2023
• September 2023
• August 2023
• February 2023
• January 2023
• December 2022
• November 2022
• October 2022
• September 2022
• August 2022
• February 2022
• January 2022
• December 2021
• November 2021
• October 2021
• September 2021
• August 2021
• February 2021
• January 2021
• December 2020
• November 2020
• October 2020
• September 2020
• August 2020
• February 2020
• January 2020
• December 2019
• November 2019
• October 2019
• September 2019
• August 2019
• February 2019
• January 2019
• December 2018
• November 2018
• October 2018
• September 2018
• August 2018
• February 2018
• January 2018
• December 2017
• November 2017
• October 2017
• September 2017
• August 2017
• February 2017
• January 2017
• December 2016
• November 2016
• October 2016
• September 2016
• August 2016
• February 2016
• January 2016
• December 2015
• November 2015
• October 2015
• September 2015
• August 2015

Welcome to check designs by Tubik on Dribbble and Behance ; explore the gallery of 2D and 3D art by Tubik Arts on Dribbble

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

How to Create Original Flat Illustrations: Designer’s Tips

The article shares helpful tips from Tubik graphic designer about creating original flat illustrations and best practices on developing artistic style and manner.

Case Study: Health Care App. UI for Doctors

Fresh practical case study on UI/UX design presenting the creative process for HealthCare App: the path of the interface concept from wireframes to animation.

Case Study: Pazi. UX and UI Design for Vehicle Safety Mobile App

The case study unveils the design process for Pazi, the mobile app helping drivers get their vehicles parked safely. Check UI and UX design solutions, app screens, user scenarios, and interactions.

Animated Interactions. Motion on Purpose

The article by Tubik Studio considering the most popular and essential purposes of using UI animation which improves interaction in UI and enhances user experience.

More articles by themes

Let’s collaborate

Want to work on the project together? Contact us and let’s discuss it.

System Design of a Mobile Trading App for a CFD Broker

About the client.

The client is a European multi-asset broker that provides trading in FX and commodities through CFDs. The broker works with retail and institutional customers and offers two dozen trading tools and over 150 trading products.

The client’s business is regulated by CySEC, FCA, DFSA, and FSCA.

Business Challenge

The client has a legacy mobile app that serves as a source for analytics, market news, and other trading-related content. Yet, their app is in dire need of an on-the-go trading functionality. The client’s current trading servers should serve as trading engines, and the trading UI should offer simplicity and an overall good user experience.

Putting it all together, the expected trading solution must:

• Include the features of the client’s current mobile app
• Provide trading functionality 
• Be integrated with the client’s trading platforms on the account level
• Support real and demo trading accounts
• Be available on Android and iOS platforms

The performance requirements encompass 5000 concurrent users.

The client requested Devexperts to design a system that reimagines their app and conforms to all their requirements. After analyzing them, we came up with the following:

The client’s existing app uses a mix of native-app code and cross-platform technologies. That can lead to severe issues with usability, performance, and maintainability. The mobile trading platform should be written using native technologies which are more reliable than cross-platform ones. That’s due to the trading UI’s nature, which constantly experiences load due to a permanent flow of quotes and chart data, as well as position and account metrics data. 

Therefore, we suggested a complete rework of the current client’s mobile app into new native iOS and Android apps. DXtrade Mobile, our mobile trading solution,  could serve as a basis for the new apps, so we wouldn’t need to develop an app from scratch. We also proposed taking the DXtrade Mobile code, forking it, and building custom apps on top. That would allow a swift implementation.

DXtrade Mobile also includes a mobile gateway, which is a server-side application feeding mobile apps with quotes, charts, account data — real-time and historic — and other content. In a clustered deployment, the mobile gateway acts as a load balancer.

Our implementation scheme also has a server-side product that enables easy integration with the broker’s ecosystem — in our product line, Gate45 plays this role.

The client owns 14 trading servers with real and demo trading accounts. The setup we suggested is flexible: we can change the number of trading servers in the future, without affecting the overall architecture and approach.

The Entire Process

We’ll backport the client’s existing app into the native mobile trading platform. The mobile gateway will serve as a central connectivity point for the mobile front-end, the client’s CRM, and Gate45. 

The solution requires the following high-level scope of work:

• Forking DXtrade Mobile’s code 
• Reimplementing the existing app’s functionality 
• Integrating with the client’s trading servers via Gate45

We propose designing all systems for high availability across instances. Front-end services should be deployed using a content delivery network, while back-end services use auto-scalers or containerization.

All systems are horizontally scalable. The middleware back-end sets up multiple connections to the client’s trading servers. That way, the system would still work even if the primary connection is down. The broken connections undergo restoration while the reserve connection is being set up.

We delivered a system design for the new mobile trading app. It adheres to all the client’s functional and performance requirements and preserves the functions of their existing app.

Since the legacy app was written with cross-platform technologies, we don’t advise implementing the trading functionality into it. That’s because some issues with usability, performance, and maintainability could arise. The new applications will be written using technologies native to iOS and Android, providing high-end performance and a smooth user experience.

The resulting solutions will have the following load characteristics:

We designed the new mobile apps to be scalable for future growth.

For the sake of swift delivery, we proposed using our mobile trading platform DXtrade Mobile as a basis for the new solutions. It’s a client-server set of applications that allows trading on the go. It has real-time portfolio monitoring, market data streaming, risk management tools for traders, and external analytical content such as news and charts. Our native mobile trading front-ends for iOS and Android give traders high-end performance through proprietary technology and a smooth user experience.

• Figma, Adobe Photoshop

UX case study for Investment app (Stock trading app)

Creative Fields

Product Design

Art Direction

• Stock market
• finance app
• banking app
• stock market app
• UX Case Study
• presentation

No use is allowed without explicit permission from owner