icon 3
Принять
на адрес
icon 1
Пополнить
картой
icon 2
Вывести
на карту
icon 4
Отправить
на адрес

Простой вход
в мир криптовалют

UX/UI 2022 Case // Purrweb

О проекте

Broex — мультивалютный криптокошелек, который упрощает вход в мир криптовалюты.

phone
phone
screenshot
logo
phone

Как работает приложение

Broex — кошелек для новичков в мире криптовалют. Чтобы привлечь людей, которые еще ни разу не использовали крипту, мы создали интуитивно понятное приложение, в котором нельзя потеряться.

1

Простой вход в мир криптовалют

2

Любые виды финансовой активности

3

Удобный и понятный интерфейс

4

C Broex ваши активы защищены

phone
1

Пользователь

регистрируется с помощью e-mail и пароля и проходит верификацию, вводит индивидуальный PIN-код;

phone
2

Пользователь

отслеживает свой текущий баланс, покупает, обменивает и выводит валюту;

phone
etherium 3

Пользователь

добавляет валюту в избранное.

phone
btc
dollar
drops
crown
1 цвет polygon 2 шрифт polygon

Цветовая палитра

Primary Blue
0ABAB5
BG Light Blue
F2F3FB
Primary Black
181818
Primary White
FFFFFF
Secondary Grey
EBEBEB
Accent Red
D4372C
BG Light Red
F4CDCA
Цвет

У заказчика уже был логотип, но не было палитры. Их будущему приложению нужен классический синий цвет в качестве акцентного.

В итоге мы сделали акцентными цветами кнопок черный и синий. Использовали светлую тему, что сделало приложение визуально чистым.

Типографика

Мы использовали шрифт PT Root UI, потому что он легко читается, имеет много начертаний, а кроме того у цифр шрифта оптимальная ширина, поэтому он подходит для отображения длинных чисел.

Цвет

Обмен

+0.81644BTC

Покупка

+0.81644BTC

Вывод

+0.81644BTC

Перевод

+0.81644BTC

Интерфейс

В качестве референсов мы использовали популярные финтех приложения, чтобы использовать знакомые пользователям паттерны и сделать криптокошелек визуально простым.

balance

Например, на странице баланса карта располагается сверху, а история транзакций — под ней, как в популярных банковских приложениях.

logo

Пополнить картой

Принять на адрес

Отправить на адрес

logo

Вывести на карту

phone
1

Чтобы сделать интерфейс интуитивным и простым в навигации, мы добавили названия ко всем элементам и стилизовали текстовые поля, чтобы пользователю было легче ориентироваться в приложении.

2

Мы создали свой селектор валют. Обычно используют уже готовые библиотеки, но из-за использования крипты любую из них нам бы пришлось доделывать или изменять.

3

Наш кастомный селектор не только выполняет нужные функции, но и органично вписывается в интерфейс в виде бэкдропа.

phone

Фильтр применён

Бэкдроп помог не только с селектором. Мы использовали этот элемент во всех побочных сценариях, например, при фильтрации истории операций.

phone phone

Так мы сократили количество страниц в приложении и не дали пользователю «заблудиться» в них.

poligone
Программирование

Разработка

Для разработки мобильного приложения на нашей стороне мы использовали React Native для фронтенда, который связали с бэкендом заказчика на GraphQL.

ПРОСТОЙ

ПОНЯТНЫЙ

УДОБНЫЙ

Релиз

Заказчики Broex решили публиковать приложение
с ранних версий. Так в ноябре 2021 мы релизнули приложение с базовыми функциями без валютных операций, в декабре 2021 выпустили финансовые операции, а в последний релиз включили биометрию для iOS.

badge background
0% 20% 40% 60% 80% 100%
many-phones
hand hand

Что с проектом сейчас?

Broex остался у нас на поддержке, в планах у них многое: не только фиксить баги, но и расширять функциональность.


Может, вы хотите запланировать онлайн-встречу?

Что-то пошло не так.

Пожалуйста, попробуйте ещё раз позже.