Bitazza App
Перепроектирование основных флоу мобильного приложения и редизайн ключевых экранов.
Fintech
Crypto
Mobile
Роль
UX/UI-дизайнер
Bitazza ↗ — это ведущая и самая надежная криптовалютная биржа Таиланда. Полностью регулируемая Комиссией по ценным бумагам и биржам Таиланда (SEC), она позволяет безопасно покупать, продавать и торговать более чем 100 криптовалютами.
Об этом кейсе
Мне поручили переработать основные флоу и представить редизайн основных экранов приложения. Также требовалось создать элементарную дизайн-систему.
Я пошел немного дальше, расширив количество экранов и тщательно проработав дизайн-систему: я создал не только стили и компоненты, но также цветовые токены, систему отступов и радиусы углов.
Недостатки текущего дизайна
Я изучил текущий дизайн приложения Bitazza и выявил следующие недостатки дизайна:
- Маленький размер элементов, как статичных, так и интерактивных.
- Низкий цветовой контраст в некоторых частях приложения.
- Сложные флоу: много тапов, много экранов.
- Отсутствие персонализации.
- Недостаточное использование стандарных UX-паттернов.
Перепроектированные флоу
Изучив текущие, я создал флоу, которые более простые и логичные.
1. Быстрый доступ к часто используемой функции с дашборда — торговля избранной парой
2. Быстрый просмотр текущей рыночной цены любимого цифрового актива
3. Быстрый поиск криптовалютной пары и начало торговли (поиск BTC/USDT)
4. Создание ордера типа limit для пары THB/USDT
Обновлённый UI
Давайте взглянем на переработанный UI. Я использовал те же цвета и шрифт, поскольку они привязаны к бренду и не могут быть изменены.
Dashboard
Market
Asset
Trade
Компоненты
Я разделил компоненты на глобальные и локальные. Первые используются на многих экранах, вторые — лишь на конкретных.
Цветовые токены
Я создал цветовые примитивы и связал их с дизайн-токенами. Это реализовано похожим образом в дизайн-системе Atlassian, что меня вдохновило.
Тестовые стили
Я использовал достаточно стандартную типографику для текста.
Отступы и углы
Что касается отступов и радиусов углов, я также придерживался стандартного подхода: значения отступов — кратны 2 и 4; радиусы углов — кратны 4, плюс значение 500 для полностью закругленных углов.
Все значения отступов и радиусов углов привязаны к соответствующим переменными.
Bitazza App
Перепроектирование основных флоу мобильного приложения и редизайн ключевых экранов.
Fintech
Crypto
Mobile
Роль
UX/UI-дизайнер
Bitazza ↗ — это ведущая и самая надежная криптовалютная биржа Таиланда. Полностью регулируемая Комиссией по ценным бумагам и биржам Таиланда (SEC), она позволяет безопасно покупать, продавать и торговать более чем 100 криптовалютами.
Об этом кейсе
Мне поручили переработать основные флоу и представить редизайн основных экранов приложения. Также требовалось создать элементарную дизайн-систему.
Я пошел немного дальше, расширив количество экранов и тщательно проработав дизайн-систему: я создал не только стили и компоненты, но также цветовые токены, систему отступов и радиусы углов.
Недостатки текущего дизайна
Я изучил текущий дизайн приложения Bitazza и выявил следующие недостатки дизайна:
- Маленький размер элементов, как статичных, так и интерактивных.
- Низкий цветовой контраст в некоторых частях приложения.
- Сложные флоу: много тапов, много экранов.
- Отсутствие персонализации.
- Недостаточное использование стандарных UX-паттернов.
Перепроектированные флоу
Изучив текущие, я создал флоу, которые более простые и логичные.
1. Быстрый доступ к часто используемой функции с дашборда — торговля избранной парой
2. Быстрый просмотр текущей рыночной цены любимого цифрового актива
3. Быстрый поиск криптовалютной пары и начало торговли (поиск BTC/USDT)
4. Создание ордера типа limit для пары THB/USDT
Обновлённый UI
Давайте взглянем на переработанный UI. Я использовал те же цвета и шрифт, поскольку они привязаны к бренду и не могут быть изменены.
Dashboard
Market
Asset
Trade
Компоненты
Я разделил компоненты на глобальные и локальные. Первые используются на многих экранах, вторые — лишь на конкретных.
Цветовые токены
Я создал цветовые примитивы и связал их с дизайн-токенами. Это реализовано похожим образом в дизайн-системе Atlassian, что меня вдохновило.
Тестовые стили
Я использовал достаточно стандартную типографику для текста.
Отступы и углы
Что касается отступов и радиусов углов, я также придерживался стандартного подхода: значения отступов — кратны 2 и 4; радиусы углов — кратны 4, плюс значение 500 для полностью закругленных углов.
Все значения отступов и радиусов углов привязаны к соответствующим переменными.
Bitazza App
Перепроектирование основных флоу мобильного приложения и редизайн ключевых экранов.
Fintech
Crypto
Mobile
Роль
UX/UI-дизайнер
Bitazza ↗ — это ведущая и самая надежная криптовалютная биржа Таиланда. Полностью регулируемая Комиссией по ценным бумагам и биржам Таиланда (SEC), она позволяет безопасно покупать, продавать и торговать более чем 100 криптовалютами.
Об этом кейсе
Мне поручили переработать основные флоу и представить редизайн основных экранов приложения. Также требовалось создать элементарную дизайн-систему.
Я пошел немного дальше, расширив количество экранов и тщательно проработав дизайн-систему: я создал не только стили и компоненты, но также цветовые токены, систему отступов и радиусы углов.
Недостатки текущего дизайна
Я изучил текущий дизайн приложения Bitazza и выявил следующие недостатки дизайна:
- Маленький размер элементов, как статичных, так и интерактивных.
- Низкий цветовой контраст в некоторых частях приложения.
- Сложные флоу: много тапов, много экранов.
- Отсутствие персонализации.
- Недостаточное использование стандарных UX-паттернов.
Перепроектированные флоу
Изучив текущие, я создал флоу, которые более простые и логичные.
1. Быстрый доступ к часто используемой функции с дашборда — торговля избранной парой
2. Быстрый просмотр текущей рыночной цены любимого цифрового актива
3. Быстрый поиск криптовалютной пары и начало торговли (поиск BTC/USDT)
4. Создание ордера типа limit для пары THB/USDT
Обновлённый UI
Давайте взглянем на переработанный UI. Я использовал те же цвета и шрифт, поскольку они привязаны к бренду и не могут быть изменены.
Dashboard
Market
Asset
Trade
Компоненты
Я разделил компоненты на глобальные и локальные. Первые используются на многих экранах, вторые — лишь на конкретных.
Цветовые токены
Я создал цветовые примитивы и связал их с дизайн-токенами. Это реализовано похожим образом в дизайн-системе Atlassian, что меня вдохновило.
Тестовые стили
Я использовал достаточно стандартную типографику для текста.
Отступы и углы
Что касается отступов и радиусов углов, я также придерживался стандартного подхода: значения отступов — кратны 2 и 4; радиусы углов — кратны 4, плюс значение 500 для полностью закругленных углов.
Все значения отступов и радиусов углов привязаны к соответствующим переменными.