top of page
Fintech
TSRS_.png

BullBear

GOAL

The aim of the task is to design an interactive mobile tool for the fintech market that will enable users to add, edit and modify trend lines on stock charts.

PROBLEMS

  • Interface Complexity: Financial tools often have complex interfaces, which can be problematic on the small screen of a smartphone.
     

  • Screen Orientation: Choosing between portrait (Portrait) and landscape (Landscape) may affect the usability of the application.

  •  

  • Dark Mode: Integrating dark mode can be difficult due to various interface elements and their readability.

RESEARCH METHODS

  • Desk Research

  • Wireflows dla Drawing Tools

  • Paper Prototyping

  • Guerrilla testing

  • Hi-fidelity UI Design

01
DESK RESEARCH

Justification:​

  • Understanding the characteristics of the fintech industry and the needs of graph analytics users is crucial. This will allow you to propose a solution that really solves users' problems.

​

Activities:​

  • Competitive Analysis: See how other fintech apps perform with drawing tools.

  • User research: Understanding what their needs are and how they currently use similar tools.

  • UX/UI Trends: Understanding current trends in interface design, especially in the context of mobile and fintech applications
     

Most Popular Trading Platforms
 

  • MetaTrader 5 (MT5)
    Description: This is a comprehensive platform for trading a variety of financial markets including Forex, exchanges, futures and CFDs. It offers advanced technical analysis tools, trading systems and support for various programming languages

    Advantages: Support for various types of orders, advanced analysis tools, ability to use trading robots.
     

  • TradingView
    Description: This is a social platform for traders and investors. It offers various market analysis tools, including charts, indicators, and drawing tools.

    Advantages: Interactive charts, social aspect (ability to share analyses), support for various markets.
     

  • Plus500
    Description: This is a trading platform specializing in trading Contracts for Difference (CFD). It allows you to trade stocks, indices, commodities and currencies.

    Advantages: Intuitive interface, wide range of financial instruments, low fees.
     

  • Stocks
    Description: This is a mobile application offering simple and easy access to stock trading. It also offers portfolio tracking and market analysis tools.
    Advantages: Ease of use, mobility, ability to invest in share fractions.

02
WIREFLOWS-DRAWING TOOLS

In order to embed the Trend Line function in the product, I was thinking about Drawing Tools, i.e. the place from which the user will select the target function that interests him.
 

Justification:

  • Wireflows will help you understand how the user will get to the "Trend Line" function and how they will use it.
     

Activities:

  • User Flow Mapping: How does the user get to the "Trend Line" feature?

  • Defining interaction points: Where and how will the user interact with the feature?

03
PAPER PROTOTYPING


This is a quick and effective way to test different concepts before moving on to more advanced design stages.

Activities:

  • Drawing interface sketches: What will the main function and its elements look like?

paper prototyping
04
QUERRILLA TESTING

Quick and simple tests with several potential users, which helped verify whether the solution is intuitive and meets their needs.

 

Based on the guerrilla tests carried out, a number of areas were identified that could be improved to improve the user experience.



Here are some thoughtful recommendations:​:​

  1. Time Range Personalization

  • Introducing a feature that allows users to select their preferred time frame for charts, allowing for more detailed analysis of trends.
     

  1. Toolbar expansion

  • Adding additional functions to the toolbar, such as the ability to lock lines against accidental changes, easy duplication of lines, which will increase the efficiency of working with charts.
     

  1. Navigation Icon Labeling

  • Adding descriptions to icons in the bottom navigation bar, which will help new users understand the app's functionality faster and improve overall navigation.
     

These changes are intended not only to improve the intuitiveness and usability of the application, but also to provide users with greater control and flexibility when analyzing the market.

05
HI-FIDELITY UI DESIGN

High-quality UI design shows how the final solution will look and function, including in Dark Mode.

Hi-Fidelity UI Design
SUMMARY

The end result is a clean, intuitive and responsive mobile app design that makes it easier for users to analyze the market and manage their investments. The application includes personalized chart settings, advanced trendline drawing and editing tools, and an adaptive interface layout that maximizes the use of screen space in both portrait and landscape orientations.

​

This project is an example of the application of the UX/UI design methodology in real market conditions, where every detail matters and the final design must meet the high requirements of the fintech industry.

bullbearshow.png
bottom of page