---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-07-24
publishYear: 2018
name: OpenDesk
title: Банковское приложение с криптовалютой
excerpt: Разработали интерфейс мобильного сервиса, который попробовал выйти за рамки обычного банка с долларами и евро.
context: Крипта — темный лес для клиентов банка. У инвесторов нет уверенности в валюте и объективной информации о рынке. Зато есть много страхов, которые, однако, перекрывает желание быстро разбогатеть. Поэтому приложение должно излучать надежность и защищенность.
logo:
src: ~/assets/images/portfolio/opendesk/logo.svg
alt: OpenDesk logo
link: https://www.aureum.de/
image: ~/assets/images/portfolio/opendesk/main.png
imageAlt: Собака Павлова • OpenDesk • Банковское приложение с криптовалютой
thumbnail:
src: ~/assets/images/portfolio/cards/opendesk.svg
alt: Собака Павлова • OpenDesk • Банковское приложение с криптовалютой
tags:
- fin
- research
- ux-design
- mass
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-исследование](/services/research) и [дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: research
- collection: services
page: ux-design
- text: |
### Хотите сделать сами?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
- collection: promo
page: focus
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: qiwi
- collection: portfolio
page: alfastrah-design
- collection: portfolio
page: monetory
- collection: portfolio
page: alfa-arm
- collection: portfolio
page: cindicator
- collection: portfolio
page: sberbank
- collection: portfolio
page: tinkoff
- collection: portfolio
page: alfabank
result:
- src: ~/assets/images/portfolio/figma.svg
text: Финальные макеты
link: https://www.figma.com/design/gNxKrkBUnLvuk4baxfgpGG/%D0%9A%D0%B0%D0%BF%D0%B8%D1%82%D0%B0%D0%BB-%D0%9C%D0%A1-(outbox)
budget: ~ 680 000 ₽
director: Большие внешние перемены невозможны, если вы не собираетесь меняться внутренне.
metadata:
canonical: https://sobakapav.ru/portfolio/opendesk
title: Дизайн интерфейса • Банковское приложение с криптовалютой
description: "Разработали интерфейс мобильного сервиса, который попробовал выйти за рамки обычного банка с долларами и евро."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/opendesk/badge.png'
width: 1448
height: 1032
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[О продукте](#anchor1) • [О продукте](#anchor2) • [Конкуренты и аналоги](#anchor3) • [Взаимодействие команд](#anchor4) • [Проектирование](#anchor5) • [Первые макеты и гайды](#anchor6) • [Пишем сценарии](#anchor7) • [Мобильное приложение](#anchor8) • [Как рисуется Dashboard](#anchor9) • [Результат](#anchor10) • [Отзыв, цены, сроки](#anchor11)
</TOC>
## <a name="anchor1" />О продукте
Продукт, который надо спроектировать, — мобильное банковское приложение для обычной валюты и криптовалюты.
Рынок и тенденции
Сегодня криптовалютой начали интересоваться серьезные богатые ребята. Проблема в том, что крипторынок еще не вполне легализован, идентифицировать владельца кошелька сложно, но необходимо по европейским законам.
Новым рынком заинтересовался наш заказчик. Он хочет, чтобы его клиенты могли легально манипулировать криптовалютой.
>Первое бизнес-требование: интерфейс должен демонстрировать надежность и легальность операций (текстуально, функционально, стилистически).
## <a name="anchor2" />Пользователи
<div class="flex gap-2 flex-wrap"><Image src="~/assets/images/portfolio/opendesk/1.png" alt="Портрет пользователя" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/opendesk/2.jpg" alt="Портрет пользователя" class="min-w-72 grow shrink basis-0" />
<div>
«Буржуа» (40+) — люди, у которых есть реальные деньги, облигации, акции. Боятся потерять то, что имеют. Ценят стабильность, гарантии и уверенность в завтрашнем дне. Хотят знать предполагаемый результат любых действий. Им важно, чтобы все операции были законными и максимально прозрачными.
Свой финансовый путь из точки, А в точку Б они хотят проделать без лишних приключений. Им нужны документы, которые подтверждают легальность денежных операций. К серьезным рискам не готовы.
</div>
<div>
«Яппи» (18−20) — те, у кого нет реальных денег и капиталов, но есть криптовалютные счета. Верят в «зеленую экономику». Часто ведут деятельность незаконно, порой меняют гражданство, чтобы превратить криптовалюту в реальные деньги. Хотят соприкоснуться с реальной экономикой. Торопятся жить. Страшно боятся, что накопления могут внезапно превратиться в тыкву в один момент.
Мечтают о красивой жизни (яхты, виллы, «мерседесы»), ищут быстрые способы разбогатеть. Живут в телефоне. Активно используют онлайн-банкинг. Уровень владения смартфонами уверенный, но сложный интерфейс и «тяжелые» заставки, картинки, видео отпугивают — мобильный интернет может их не потянуть.
</div>
</div>
Общее для обеих групп — восприятие транзакций с криптовалютой: страх, с одной стороны, окно возможностей — с другой.
Достоверных экономических показателей и актуальных метрик нет, поэтому прислушиваются к лидерам мнений, мониторят новости и блоги по данной теме.
Снимаем шляпу перед менеджером, ибо так точно и без воды редко кто пишет документацию.
>Чего ожидают от криптосчетов люди, которые привыкли работать с обычными счетами? На этот вопрос мы тоже нашли ответ. Ментальные требования пользователей помогли определить основную функциональность для MVP-приложения.
## <a name="anchor3" />Конкуренты и аналоги
- [N26](https://www.n26.com/) — мобильный банк.
- [Revolut](https://www.revolut.com/) — мобильный виртуальный банк.
- [IdNow](https://www.idnow.eu/) — сервис видеоидентификации.
- [Solaris](https://www.solarisbank.com/) — платформа bank as a service.
- [PassPack](https://www.passpack.com/) — менеджер паролей.
<a href="/images/portfolio/opendesk/3.jpg" target="_blank"></a>
_Скриншот промостраницы конкурента — N26, самый популярный в Европе digital-банк, аналог нашего «[Тинькоффа](https://sobakapav.ru/portfolio/tinkoff)»_
Как видите, среди конкурентов есть и полноценные «красавчики».
>Отсюда второе бизнес-требование: сделайте красиво и по нашим гайдам.
Да, у компании был неполный стайл-гайд и даже позиционирование.
## <a name="anchor4" />Взаимодействие команд
Разработчики заказчика собирались работать по agile-методологии. Мы как подрядчики должны были обеспечивать программистов работой на ближайшие спринты. Время, как всегда, поджимает.
>Третье бизнес-требование — представлять конечный продукт на каждой итерации.
## <a name="anchor5" />Проектирование
После многочисленных созвонов мы получили сборную солянку из интерфейсных элементов. Приложение, которое мы разрабатывали, должно выглядеть стандартным. Ядро пользователей — «буржуа» и «яппи», которые по натуре консерваторы. Все особенности продукта спрятаны в коде и бизнес-логике.
>Четвертое бизнес-требование — отрисовать интерфейс, ориентируясь на стандарты рынка.
Последние проекты мы ведем в Airtable. Первым делом менеджер создает страницу основных игроков.
<a href="/images/portfolio/opendesk/4.png" target="_blank"></a>
Следующая страница с хотелками и фокусами посложнее.
<a href="/images/portfolio/opendesk/5.png" target="_blank"></a>
Хотелки выявляются путем общения с заказчиками — бизнесом и пользователями.
Фокусы заполняются проектировщиком. После каждой беседы с заказчиком список пополняется. Более подробно о фокусах рассказывается [в статье](/publications/focus-card). Для тех, кто хочет покороче, — определение:
>Фокусы — это функциональные элементы, важные для работы интерфейса, точки, где реализуются основные сценарии, которые выполняют сразу много задач или хотелок пользователя или бизнеса. У нас [есть про них учебный курс](https://www.eduhund.ru/program/focus/?utm_source=sobakapav&utm_medium=site&utm_campaign=page), но он только для тех, кто уже освоил более простые инструменты дизайна: [модели информационных ожиданий](https://www.eduhund.ru/program/io/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) и [сценарии взаимодействия](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page).
После заполнения графы «Фокусы» составляем список всех фокусов с количеством задач, которые они выполняют. Мы видим, что фокусы «Счет» и «Dashboard» выполняют максимальное число задач — они, скорее всего, будут самыми трудоемкими.
<a href="/images/portfolio/opendesk/6.png" target="_blank"></a>
_Таблица в Airtable со списком фокусов и количеством задач помогает оценить сроки и приоритет элементов_
Список фокусов уже дает общее представление о продукте, хотя четкой структуры здесь пока нет. Далее строим карту фокусов (подробнее в [статье про фокусы](/publications/focus-card).
<a href="/images/portfolio/opendesk/7.png" target="_blank"></a>
_Финальная версия карты фокусов или структуры интерфейса_
Карта нужна по нескольким причинам, в первую очередь — для сверки требований. Вся команда разработки видит более цельную структуру продукта.
## <a name="anchor6" />Первые макеты и гайды
Одно из бизнес-требований — выдавать продукт, максимально близкий к конечному результату, поэтому мы решили делать прототипы сразу в дизайне. Для этого надо было согласовать стилистику с заказчиком и составить систему шрифтов и элементов. Предложили заказчику несколько вариантов дизайна на выбор (наброски посадочной страницы).
<a href="/images/portfolio/opendesk/8.jpg" target="_blank"></a>
_Консервативный вариант — для буржуа. Пока не представляем, что будет на главной, но сейчас главное — определить стилистику продукта_
<a href="/images/portfolio/opendesk/9.jpg" target="_blank"></a>
_Современный вариант_
<a href="/images/portfolio/opendesk/10.jpg" target="_blank"></a>
_Синий вариант для буржуа_
<a href="/images/portfolio/opendesk/11.jpg" target="_blank"></a>
_Скандинавский дизайн_
Заказчик выбрал третий вариант. На его основе создали систему шрифтов, установили базовые элементы и компоненты, сделали сетку. Конечно, в процессе проектирования некоторые нюансы системы менялись, но основная стилистика осталась прежней. Проектирование в дизайне позволило нам быстрее выдавать готовые прототипы (одно из бизнес-требований).
<a href="/images/portfolio/opendesk/12.png" target="_blank"></a>
<a href="/images/portfolio/opendesk/13.png" target="_blank"></a>
_Типографическая система. Стили для заголовков_
<a href="/images/portfolio/opendesk/14.png" target="_blank"></a>
_Слева — стили для текста, справа — основные цвета (из брендбука плюс зеленый — для позитивного состояния элементов и красный — для негативного)_
<a href="/images/portfolio/opendesk/15.png" target="_blank"></a>
_12-колоночная сетка. Показан компонент, состоящий из трех элементов_
## <a name="anchor7" />Пишем сценарии
Чтобы стать клиентом банка, надо пройти длинную идентификацию. Нам описали ее в общих чертах, и менеджер зафиксировал это в системных требованиях (в сценариях, которые удобны как проектировщикам, так и программистам, см. книгу Коберна «Современные методы описания функциональных требований к системам»).
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Коротко о том, что мы зафиксировали в сценарии. Процесс идентификации, продиктованный требованиями закона, происходит в два этапа и обязательно с десктопа. Пользователь должен заполнить длинную анкету, после чего его перебрасывают на сторонний сервис видеоидентификации, интерфейс которого мы изменить не можем.
Достаточно сложный сценарий идентификации занял 21 экран с различными состояниями.
<a href="/images/portfolio/opendesk/16.jpg" target="_blank"></a>
_Одна из страниц прототипа из сценария верификации_
На этом этапе еще нет UX-писателя, поэтому в прототипах вы видите смесь русского и английского. Макеты с кириллицей воспринимаются иначе, чем с латиницей, поэтому решили, что заголовки будут на английском, а подписи — на русском. Вторая особенность макетов — тексты состоят в основном из вопросов. Они нужны для UX-писателя — чтобы он знал, что писать.
### Почему именно такой прототип?
Страницы с регистрацией решают очень много стандартных задач. Пользователь должен видеть, что его ждет впереди и что он уже заполнил. Важна возможность вернуться и исправить ответ. Нельзя заставлять его заполнять всю анкету заново — тогда он, скорее всего, бросит это дело. Анкета очень длинная, и мы разбили ее на смысловые блоки. Задаем вопросы «по кусочкам». Таким образом мы упрощаем восприятие информации и повышаем вероятность того, что пользователь дойдет до конца.
Каждый интерфейс сложен по-своему. В данном случае это сфера деятельности. На изучение процессов с seed’ами и прочими криптодеталями ушло около половины дня, а это только три экрана из сценария регистрации (всего их 21). На самом деле, в прототипах отрисован стандартный для рынка процесс регистрации.
<a href="/images/portfolio/opendesk/17.jpg" target="_blank"></a>
_Один из экранов регистрации, где пользователя просят запомнить свой seed, который нужен для восстановления доступа к кошельку. Очень важная деталь при работе с криптовалютой_
<a href="/images/portfolio/opendesk/18.jpg" target="_blank"></a>
_А вот финальная страница регистрации. Надо подготовить пользователя к следующему этапу — видеоидентификации_
Обратите внимание на кнопку «Я позже все сделаю». Опять предоставляем пользователю свободу действий. Если же человек в поисках ссылки на видеоидентификацию зайдет на промостраницу, его встретит вот такой попап со ссылкой.
<a href="/images/portfolio/opendesk/19.jpg" target="_blank"></a>
## <a name="anchor8" />Мобильное приложение
<div class="flex gap-2 flex-wrap"><Image src="~/assets/images/portfolio/opendesk/20.jpg" alt="Банковское приложение с криптовалютой" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/opendesk/21.jpg" alt="Банковское приложение с криптовалютой" class="min-w-72 grow shrink basis-0" /> </div>
<em>Стартовые экраны в мобильном приложении</em>
Итак, долгий путь регистрации пройден, и у клиента есть логин и пароль для приложения. А что если сюда заглянут новые пользователи? Для них придумали переход в веб-версию продукта.
Перед рисованием макетов мы провели небольшое исследование банковских приложений, чтобы собрать интерфейсные и стилистические решения. Теперь, когда на руках уже есть сформированная система, прототип рисуется очень быстро. Сделано около 40% экранов.
<div class="flex gap-2 flex-wrap"><Image src="~/assets/images/portfolio/opendesk/22.jpg" alt="Банковское приложение с криптовалютой" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/opendesk/23.jpg" alt="Банковское приложение с криптовалютой" class="min-w-72 grow shrink basis-0" /> </div>
<em>Приветственные страницы, описывающие возможности приложения. Пока без текста</em>
И вот после долгих часов ожидания пользователь видит главную страницу приложения.
<div class="flex gap-2 flex-wrap"><Image src="~/assets/images/portfolio/opendesk/24.jpg" alt="Банковское приложение с криптовалютой" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/opendesk/25.jpg" alt="Банковское приложение с криптовалютой" class="min-w-72 grow shrink basis-0" /> </div>
<em>Главная страница мобильного приложения — Dashboard. Мы предположили, что чаще всего пользователи будут заходить, чтобы вывести деньги или положить — для этого предусмотрены кнопки Deposit и Transfer. Ничего необычного</em>
## <a name="anchor9" />Как рисуется Dashboard
Сначала отфильтровываем таблицу в Airtable по фокусу.
<a href="/images/portfolio/opendesk/26.png" target="_blank"></a>
<a href="/images/portfolio/opendesk/27.png" target="_blank"></a>
_Фильтры по фокусу Dashboard_
В итоге получили список требований для фокуса — в нашем случае это экран.
В голове проектировщика уже есть шаблоны Dashboard’a. Но текущий нужно отрисовать в выбранной стилистике и с учетом всех бизнес-требований.
Как дать понять пользователю, что транзакция «прошла»? Делаем блок последних транзакций.
Поговорить с сотрудником банка — делаем чат.
Убедиться, что с моими криптоактивами все в порядке, — показываем баланс с возможностью обновления.
Понять, сколько у меня денег, — показываем баланс.
Узнать новости банка — блок с курсом.
Постепенно вырисовываются и остальные разделы и экраны.
<div class="flex gap-2 flex-wrap"><Image src="~/assets/images/portfolio/opendesk/28.jpg" alt="Банковское приложение с криптовалютой" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/opendesk/29.jpg" alt="Банковское приложение с криптовалютой" class="min-w-72 grow shrink basis-0" /> </div>
<em>Типовой экран криптосчета в двух состояниях. При свайпе влево появляются другие аккаунты и счета. Тоже стандартное решение для рынка</em>
Так как гайдбук был не полным и рассказывал только, какие шрифты и цвета использовать, а проект требовал использования иллюстраций, мы придумали собственный стиль иконок и иллюстраций. Кроме прочего, его задача — дать понять, что пользователь имеет дело с надежным современным банком.
<a href="/images/portfolio/opendesk/30.jpg" target="_blank"></a>
_Но когда мы начали собирать на отдельном артборде иконки и рисовать иллюстрации, случилось неожиданное…_
## <a name="anchor10" />Результат
После месяца разработки заказчик передумал и закрыл проект, но мы можем вам показать наши наработки. Мы успели завершить вот что.
Сценарий онбординга — верификации для веба.
<a href="/images/portfolio/opendesk/31.jpg" target="_blank"></a>
_Скриншот рабочего пространства в Sketch — сценарий онбординга для десктопа_
Отрисованы основные экраны для мобильного приложения: стартовый экран, страницы входа, экраны о приложении, Dashboard, экран кошелька.
<a href="/images/portfolio/opendesk/32.jpg" target="_blank"></a>
_Скриншот рабочего пространства в Sketch — экраны приложения_
Доразвили корпоративный стиль банка: добавили иллюстрации, доработали стайл-гайд.
<a href="/images/portfolio/opendesk/33.jpg" target="_blank"></a>
_Скриншот рабочего пространства в Sketch — наше руководство по стилю_
Основное требование — сделать интерфейс как можно более типовым для отрасли. Слишком свежие решения могли оттолкнуть пользователей. Покреативить мы могли только в оформлении, и то не перестараться. С точки зрения проектирования в сервисе нет новых идей, только проверенные аналогичными продуктами базовые интерфейсные паттерны.
## <a name="anchor11" />