Bitazza App
Redesign of the main flows of the mobile application and redesign of key screens.
Fintech
Crypto
Mobile
Role
UX/UI Designer
Bitazza ↗ is Thailand's leading and most reliable cryptocurrency exchange. Fully regulated by the Securities and Exchange Commission of Thailand (SEC), it allows users to safely buy, sell, and trade over 100 cryptocurrencies.
About this case study
I was tasked with reworking the main flows and presenting a redesign of the app's key screens. I was also required to create a basic design system. I went a bit further by expanding the number of screens and carefully developing the design system: I created not only styles and components but also color tokens, a spacing system, and corner radiuses.
Current design flaws
I studied the current design of the Bitazza app and identified the following design flaws:
- Small size of elements, both static and interactive.
- Low color contrast in some parts of the app.
- Complex flows: too many taps, too many screens.
- Lack of personalization.
- Insufficient use of standard UX patterns.
Redesigned flows
I was tasked with developing four user flows. After studying the current ones, I created flows that are simpler and more logical.
1. Quick access to frequently used features from the dashboard — trading a favourite pair
2. Quick view of the current market price of a favourite digital asset
3. Quick search for a cryptocurrency pair and start trading (search BTC/USDT)
4. Creating a limit order for the THB/USDT pair
Updated UI
Let's take a look at the redesigned UI. I used the same colors and font as they are tied to the brand and cannot be changed.
Dashboard
Market
Asset
Trade
Components
I divided the components into global and local. The former are used on many screens, while the latter are only on specific ones.
Color tokens
I created color primitives and linked them to design tokens. This is implemented in a similar way to the Atlassian design system, which inspired me.
Test styles
I used fairly standard typography for the text.
Spacing and corners
Regarding spacing and corner radiuses, I also adhered to a standard approach: spacing values are multiples of 2 and 4; corner radiuses are multiples of 4, plus a value of 500 for fully rounded corners.
All spacing values and corner radiuses are tied to the corresponding variables.
Bitazza App
Redesign of the main flows of the mobile application and redesign of key screens.
Fintech
Crypto
Mobile
Role
UX/UI Designer
Bitazza ↗ is Thailand's leading and most reliable cryptocurrency exchange. Fully regulated by the Securities and Exchange Commission of Thailand (SEC), it allows users to safely buy, sell, and trade over 100 cryptocurrencies.
About this case study
I was tasked with reworking the main flows and presenting a redesign of the app's key screens. I was also required to create a basic design system. I went a bit further by expanding the number of screens and carefully developing the design system: I created not only styles and components but also color tokens, a spacing system, and corner radiuses.
Current design flaws
I studied the current design of the Bitazza app and identified the following design flaws:
- Small size of elements, both static and interactive.
- Low color contrast in some parts of the app.
- Complex flows: too many taps, too many screens.
- Lack of personalization.
- Insufficient use of standard UX patterns.
Redesigned flows
I was tasked with developing four user flows. After studying the current ones, I created flows that are simpler and more logical.
1. Quick access to frequently used features from the dashboard — trading a favourite pair
2. Quick view of the current market price of a favourite digital asset
3. Quick search for a cryptocurrency pair and start trading (search BTC/USDT)
4. Creating a limit order for the THB/USDT pair
Updated UI
Let's take a look at the redesigned UI. I used the same colors and font as they are tied to the brand and cannot be changed.
Dashboard
Market
Asset
Trade
Components
I divided the components into global and local. The former are used on many screens, while the latter are only on specific ones.
Color tokens
I created color primitives and linked them to design tokens. This is implemented in a similar way to the Atlassian design system, which inspired me.
Test styles
I used fairly standard typography for the text.
Spacing and corners
Regarding spacing and corner radiuses, I also adhered to a standard approach: spacing values are multiples of 2 and 4; corner radiuses are multiples of 4, plus a value of 500 for fully rounded corners.
All spacing values and corner radiuses are tied to the corresponding variables.
Bitazza App
Redesign of the main flows of the mobile application and redesign of key screens.
Fintech
Crypto
Mobile
Role
UX/UI Designer
Bitazza ↗ is Thailand's leading and most reliable cryptocurrency exchange. Fully regulated by the Securities and Exchange Commission of Thailand (SEC), it allows users to safely buy, sell, and trade over 100 cryptocurrencies.
About this case study
I was tasked with reworking the main flows and presenting a redesign of the app's key screens. I was also required to create a basic design system. I went a bit further by expanding the number of screens and carefully developing the design system: I created not only styles and components but also color tokens, a spacing system, and corner radiuses.
Current design flaws
I studied the current design of the Bitazza app and identified the following design flaws:
- Small size of elements, both static and interactive.
- Low color contrast in some parts of the app.
- Complex flows: too many taps, too many screens.
- Lack of personalization.
- Insufficient use of standard UX patterns.
Redesigned flows
I was tasked with developing four user flows. After studying the current ones, I created flows that are simpler and more logical.
1. Quick access to frequently used features from the dashboard — trading a favourite pair
2. Quick view of the current market price of a favourite digital asset
3. Quick search for a cryptocurrency pair and start trading (search BTC/USDT)
4. Creating a limit order for the THB/USDT pair
Updated UI
Let's take a look at the redesigned UI. I used the same colors and font as they are tied to the brand and cannot be changed.
Dashboard
Market
Asset
Trade
Components
I divided the components into global and local. The former are used on many screens, while the latter are only on specific ones.
Color tokens
I created color primitives and linked them to design tokens. This is implemented in a similar way to the Atlassian design system, which inspired me.
Test styles
I used fairly standard typography for the text.
Spacing and corners
Regarding spacing and corner radiuses, I also adhered to a standard approach: spacing values are multiples of 2 and 4; corner radiuses are multiples of 4, plus a value of 500 for fully rounded corners.
All spacing values and corner radiuses are tied to the corresponding variables.