User Interface Enrichment
for Cryptocurrency
Trading Platform

 

Azati helped the Customer enrich the cryptocurrency trading platform’s user interface, accurately translate a considerable number of components into the Arabic language. The team also contributed to the development of the new version of UI.

CUSTOMER:

The cryptocurrency exchange is a platform aimed to conduct real-time trading operations. A long time ago, trading on exchanges was available only to a narrow circle of people – brokers who monitored the price changes of certain assets.

The whole processes associated with cryptocurrency activities are available by using a variety of different exchange platforms. Everyone can become a cryptocurrency trader, regardless of their level of knowledge and initial capital.

Our Customer is a cryptocurrency exchange that develops a financial ecosystem that can be described as a fast, safe, easy-to-use, and multi-functional system for real-time cryptotrading. The Customer’s primary goal is to create a solution for multi trading, which can be used not only by professional investors but also by ordinary users.

OBJECTIVE:

Trading on the exchange is a convenient way to work with your money, as you have access to your funds 24/7 and can quickly make transactions. Nevertheless, there are several nuances which we have to highlight. Such platforms should work smoothly and provide up-to-date information in several languages, since most cryptocurrency exchanges are supposed to be used by multinational audiences.

The primary objective of our team included bug fixing and adapting the platform to the Arabic language. Translating pages and components into this language is a challenging process due to the Arabic language’s particularities – mainly the text direction from right to left.

Challenges:

While developing this solution, the team faced several challenges.

#1

CHALLENGE #1:

 

The Customer’s project is quite complicated, with a considerable number of extensive features, multiple servers, complex deployment pipelines, etc. It was also built by a distributed team: some developers worked in house, while others were remote.

At Azati, we get used to fast project setting (in a day or even hours), but this time the team spent much time (about two weeks) on obtaining all the accesses to the development resources.

CHALLENGE #2:

 

The project had three dev servers and one production server, and every server had its own configuration. As was mentioned above – the project has a complex architecture. Component composition could include up to 150 nested components, each of them is a full-fledged part, containing up to 1,500 lines of code.

The hassle-free switching between servers was nearly impossible as components behaved differently on every server. For example, if a developer desired to roll out his feature to a staging server, he had to rebuild the entire project every time. This process could take up to 20 minutes due to complex project structure.

#2
#3

CHALLENGE #3:

 

All user interface elements like buttons, icons, layouts, etc. were created as separate components and moved to a dedicated UI kit and separate repository. As this kit was used in two different project branches (web admin panel and trading UI), some intersections led to many bugs and project instability. The engineers had to manually solve the issues with these modules to display all components correctly.

CHALLENGE #4:

 

From the very beginning, the solution worked only with one exchange, but the Customer wanted the team to roll out a global feature that would allow trading on various exchanges. A team needed to rewrite a massive part of the application and make significant changes in the design.

As the core of every trading application is many different graphs and charts, it was essential for a team to recreate these charts to make them work not only with one exchange but many. Azati helped the Customer to redesign and enrich these components in terms of new functionality and change page layout and general structure.

#4

PROCESS:

The management process was reasonably straightforward – tasks were posted on the dashboard in Jira with an already appointed assignee. Every morning, the team had meetings with the project manager, who was provided with a report on the status of the tasks, a time assessment to complete the task, and if everything was approved, the task was carried out, tested, and closed.

Our specialists often faced several problems associated with an inaccurate task estimation, since often, to fix a bug, it was necessary to fix several components because of the project architecture.

While developing an international trading platform, you need to translate and adapt it for several popular languages. This process is called localization.

Word by word translating to Arabic is not that hard, and the engineers coped with this issue pretty quickly with the help of the Format.js library. There were several issues related to this process, but nothing special.

Format.js is a suite of packages, which provide language, number, unit, and date conversion not only across languages but within languages as well. The engineers speeded up the localization processes not only in terms of translation into Arabic, but also in adopting specific language properties.

But it is not enough to translate the text, the Customer wanted the team to adapt the user interface for the right to left interaction. It means that many components should also be flipped horizontally – unfortunately, it cannot be done in an easy way, so engineers had to recreate about 40% of all components.

SOLUTION:

While building the solution, our engineers completed many tasks related to application localization, bug fixing, and architecture improvements. Azati helped the Customer to improve the general development workflow what greatly simplified application translation to Arabic and several other languages.

The user interface consisted of two huge parts:

 
  • Trading User Interface
    Users heavily use this part of the application as it shows the cryptocurrency rate fluctuations and allows it to operate with its accounts. It primarily contains many charts, tables and diagrams.To localize trading UI into Arabic, engineers manually enhanced the functionality of many components by using the specific library – Format.js. When it was hardly possible to improve the existing components – they rebuilt it entirely from scratch.
  • Admin Interface
    As this part of the application contained very basic information about the user, the majority of work was performed automatically with the use of JavaScript Libraries.

Results:

Engineers gained indispensable experience related to huge project localization into one of the most problematic and sophisticated to adaptation languages – Arabic. Since the development team was quite experienced, the code had a lot of interesting moments and brought new knowledge on how to solve widespread challenges easily.

During project development our team:

 
  • Proposed and implemented the optimal solution to adopt the system into Arabic language
  • Rewrited a considerable amount of components to support right to left layout
  • Greatly contributed to the development of new version UI
  • Optimized the code of the common components to avoid conflicts
  • Simplified overcomplicated project architecture

Azati also contributed to the improvement of the main application grid. We provided the user with the opportunity to toggle or even hide the unnecessary blocks to expand the main chart and focus on trading operations.

TECHNOLOGIES:

 
 
 
 
 
 
 
 

SCREENSHOTS:

Now:

The customer was delighted with our work, as our experts accurately and efficiently performed their tasks on time. The customer wanted to expand the team since implementing a multi-trading platform is a rather complicated task requiring considerable resources.

However, due to the pandemic caused by COVID-19, the customer had to decrease the number of remote engineers and revise the business strategy for the near future.