Об этом кейсе
Недостатки текущего дизайна
Я изучил текущий дизайн приложения Bitazza и выявил следующие недостатки дизайна:
Маленький размер элементов, как статичных, так и интерактивных.
Низкий цветовой контраст в некоторых частях приложения.
Сложные флоу: много тапов, много экранов.
Отсутствие персонализации.
Недостаточное использование стандарных UX-паттернов.
Перепроектированные флоу
Мне поручили разработать четыре пользовательских флоу. Изучив текущие, я создал флоу, которые более простые и логичные.
Смотреть флоу в FigJam для лучшего качества изображений.
1. Быстрый доступ к часто используемой функции с дашборда — торговля избранной парой
![](https://framerusercontent.com/images/RmO8eFUuRuYr2A0YjXN1ZwziFVc.jpg)
2. Быстрый просмотр текущей рыночной цены любимого цифрового актива
![](https://framerusercontent.com/images/yatGrqqtmO1I2BC9IKSHfGFfus.jpg)
3. Быстрый поиск криптовалютной пары и начало торговли (поиск BTC/USDT)
![](https://framerusercontent.com/images/2n1wrWYBmJmpLmNA2yGBKZNDOGo.jpg)
4. Создание ордера типа limit для пары THB/USDT
![](https://framerusercontent.com/images/g84GoyXDux9gDtPw5i3TvuCcVo.jpg)
Обновлённый UI
Давайте взглянем на переработанный UI. Я использовал те же цвета и шрифт, поскольку они привязаны к бренду и не могут быть изменены.
Вы также можете посмотреть UI в Figma для лучшего качества графики и большего количества экранов.
![](https://framerusercontent.com/images/AFxVUglKeWRET8NuZkxNZlgU74E.png)
![](https://framerusercontent.com/images/77Sr73sD9t9Sm190EisPXrscrsY.png)
![](https://framerusercontent.com/images/V2vGfbdMwrAG2GYfzUMKmxv1pyk.png)
Market
![](https://framerusercontent.com/images/rQJVerczpRMDaawn8MsdJ3G6V4.png)
![](https://framerusercontent.com/images/mFVRJOiN623wvYZJ9s1p72pj9bY.png)
Asset
![](https://framerusercontent.com/images/z39Rpk7KDwWtgEsLzZ6G2IPsqI.png)
![](https://framerusercontent.com/images/jt2U3roAWi8YLjfpOGr7aZcUqB4.png)
Trade
![](https://framerusercontent.com/images/lqUHzTd0wAadtBkNBAc7KBDApg.png)
Компоненты
Я разделил компоненты на глобальные и локальные. Первые используются на многих экранах, вторые — лишь на конкретных.
![](https://framerusercontent.com/images/ZgVKje7EzFN9upEpJ669ktPOmw.png)
![](https://framerusercontent.com/images/9ojINZX7N3GY6WTifaytR75DzeE.png)
Цветовые токены
Я создал цветовые примитивы и связал их с дизайн-токенами. Это реализовано похожим образом в дизайн-системе Atlassian, что меня вдохновило.
![](https://framerusercontent.com/images/FyZQKzFvMNJoy9rB4x3SFixDX4.png)
Тестовые стили
Я использовал достаточно стандартную типографику для текста.
Отступы и углы
Что касается отступов и радиусов углов, я также придерживался стандартного подхода: значения отступов — кратны 2 и 4; радиусы углов — кратны 4, плюс значение 500 для полностью закругленных углов.
![](https://framerusercontent.com/images/qOlGnKR2gaagKcstnbSeE1z4a8.png)
Все значения отступов и радиусов углов привязаны к соответствующим переменными.
![](https://framerusercontent.com/images/VmfdbJdJhFoihRW0RmO91F5o8cM.png)