Back

A cryptocurrency exchange case: how to make an Arabic UI version in a click and save users from endless registration

Once, we at Purrweb got a request to design a cryptocurrency exchange app. Our portfolio included quite a few crypto projects, so we truly believed that nothing could surprise us. In this case, we share how we dealt with an enormous registration process, made an Arabic localization in a click, and helped our client impress their investors.

Reading time: 8 minutes

Table of contents

    A new customer turned to us at the beginning of 2022. They needed a mobile app design for an Arabic crypto exchange they wanted to launch. As a rule, we are in charge of the entire development lifecycle. In this case, the client had their own development team, so they were interested only in our UI/UX expertise.

    We had some crypto experience by that time. We developed an easy-to-use app for Broex cryptocurrency exchange and a minimalist crypto wallet for cryptocurrencies & NFTs. The client knew what we were capable of, as they were familiar with one of our cases.

    What is inside the project?

    It is a platform that enables users to buy and sell crypto. Its target audience are the Arabic countries. Over the recent five years, the digital economy has flourished in this region: the locals use crypto willingly and favorable laws attract investors from all over the world. So the client didn’t have to explain to us why they fell for that niche.

    The client chose Binance and Coinbase for references. No wonder — up till now, they are on top of the market. The future crypto exchange required a similar functionality spiced with a few additional features and our design.

    Binance & Coinbase main screens. These exchanges became our references.

    We had to work on two scenarios:

    • cryptocurrency purchase, sale, and exchange
    • storing crypto and regular currencies in an internal wallet.

    The initial idea was to design a mobile app with an English interface. Over time, the project expanded. First, the client asked for a web version of the exchange. After that, they requested Arabic localization. This way, one project split into four. It was OK with us. Once we made three apps for a power bank rental service at a time. Chinese documentation was a true challenge. Well, that was an entirely different story. Here, the concept was our issue.

    Concept experiments: fifty shades of green

    At Purrweb, we believe that an elaborate design concept is vital. So, we devote 40 hours to it. It is enough for a designer to dive deep into a client’s tasks, think out an app’s logic, build a mockup, and make a clear presentation. This way, we get the client’s approval faster and don’t have that much to correct at the final stages. But this time, it took us over 40 hours.

    The client’s references

    The client had their vision of a perfect design, but nothing certain. Right at the start, they gave us references and shared their main wish to add the electric green gradient, like in the examples above. We started experimenting with this tricky task.

    In total, we made 25 concept options. As a rule, 5 are enough. We spent 104 hours instead of the regular 40. We used various accent colors, background shades, experimented with shapes, and mixed our ideas.

    In pursuit of that very green

    Luckily, it was not in vain. We met the client’s expectations, and after the concept, the design process went on almost flawlessly.

    The final concept option.

    How to buy crypto in two clicks and multiply one’s wallets

    At the concept stage, we set a goal to make an easy-to-use app. In the end, we created a UI where users need to make only two clicks to buy & sell crypto or view wallets.

    The most obvious way is to tap a coin element listed on the main page. This way, a user gets to the market page. It displays the currency value, price change chart, and some relevant brief information. Besides, the page contains the Buy and Sell buttons.

    How to switch from the Main screen to the Market page.

    Alternatively, a user can access the key functions via the tab bar at the bottom of the screen. It contains only three buttons: the main page, the central button, and the wallet.

    The first button’s purpose is clear. What about the other two?

    The central button opens a drop-out list of the key functions like Buy and Sell. This solution speeds up navigation and reduces the number of tab bar buttons.

    User can access the key function via the tab bar

    The third button opens crypto and fiat wallets. They enable users to store crypto and regular money. Each currency has its own minor wallet. Here, users can top up their accounts, exchange fiats, and withdraw funds.

    One of the app’s features: storing several wallets in one place

    How to walk a user through a tedious registration

    Designing registration screens turned into a true challenge. It’s a lengthy and dreary routine for any crypto exchange — crypto veterans can confirm this. To pass KYC (Know Your Client) verification, you must provide your passport, bank card, biometrics, and utility bills. This ensures transaction safety. We couldn’t skip this stage.

    KYC in our crypto exchange

    The app’s registration flow comprised 95 screens. This can kill anyone’s crypto enthusiasm. We had to save the users.

    For starters, we added a cutoff screen. This screen emerges after the first few registration steps. It warns users about the lengthy KYC. Communication via UI inspires trust in users and increases the number of those who complete the registration. Besides, we integrated a progress bar into KYC. It helps users track the registration stages and see what is left.

    The cutoff screen and the progress bar

    Finally, we added the Guest Mode. Now a user can view the main page and study the app’s functions without registration. Of course, this mode restricts the app’s capabilities, but users can decide if they like the platform.

    The Guest Mode demonstrates the main sections, but users have to register to actually use the app

    Localization magic

    When the web UI was finished, the client asked for an Arabic localization. At first glance, it’s pretty simple: translate the text + align it to the right = profit. In fact, it’s a complex process with the Devil in the details. Should we mirror icons? How should we deal with the Roman print? Luckily, this wasn’t our first Arabic UI design. We did even more this time and localized the UI nearly automatically.

    We give our regards to master components. It’s a Figma feature that saves designers from editing each single button. Just change a master component to update its instances on multiple screens.

    The English master components meet their Arabic twins

    We created an Arabic twin for every English master component. We strictly followed the guidelines for the Middle Eastern UIs. The library doubled its size, so it was high time for the master components magic. All we had to do was to select the required instances on the screens and click the Arabic toggle in the Inspector. The element synchronized with the Arabic master components and aligned to the right. Voilà: just a click — and the screen is ready! Everyone is happy now.

    That’s how the magic button works. No manual labor involved.

    How we framed the project and took care of the development team

    Initially, we followed our typical Figma routine: created UI components and built the finished screens in the same file. It’s a perfect approach for small-scale projects, but this one kept expanding. We started working on a mobile app and ended up dealing with the mobile app, its web version, and localization. We could get lost in the sea of elements. On top of that, we were to hand over the design to a different development team. To make our colleagues’ lives easier, we did our best to make the projects as organized and clear as possible.

    To meet this goal, we created a new library for all the components and sorted our files by their purpose. Color coding enhances navigation here. Our design files and their copies for the clients are green. The blue color marks the clickable prototypes. Then we selected orange for the Arabic layout and white for the component library.

    The final project version

    We made sure the mockups were easy to handle, sorted them out, and left lots of comments to help manage the components.

    As a result, it was easier to navigate through the files, the work process speeded up, and the development team thanked us for a neat and clear project. At least, we are sure they did.

    How we ventured into end-to-end prototypes and impressed the investors 

    An end-to-end prototype was the final shot here. It’s a clickable app design, where one can view all the user scenarios and evaluate the UI performance.

    The Purrweb team usually creates a linear prototype. We show one flow to a client, and that’s it. For example, it can be a crypto purchase. End-to-end prototypes were a new experience for us, but our client wanted to show their investors everything the app was capable of. That was a lot.

    Making an end-to-end prototype is a painstaking process. We set up all the screen connections manually. Some of the screens weren’t even ready yet. We used temporary dummies instead to stick to the flow logic. Later, we had to come back and replace them with an actual design.

    The dots stand for screens and the web — for links a user needs to navigate through the prototype.

    Our designers made a giant web of links connecting the screens. It took three of them and 24 hours to make four end-to-end prototypes. Finally, our client could demonstrate the app’s capabilities in full. It looks like they succeeded.

    The final prototype

    The key figures and the future of the project

    The tradition requires us to show a few figures at the end. It took us 5 months, or 518 hours, to complete the project. It comprises 2202 screens. 518 of them belong to the English version of the app.

    The development team is working on the project now. The client has their own team, but they turn to us for the UI/UX support. We are glad the project keeps growing and are happy to help.

    How useful was this post?

    Rate this article!

    4 ratings, аverage 5 out of 5.

    No votes so far! Be the first to rate this post.

    As you found this post useful...

    Follow us on social media!

    Share