Синергия аналитики и дизайна в проекте Banknote World

Главное о кейсе

- Зафиксировали внутри команды процесс от брифа до передачи в разработку.
- Провели формализацию требований и аналитику.
- Подготовили прототипы.
- Сделали дизайн.
- Провели валидацию.
- Отдали в разработку.

Сложности работы
Предупреждён — значит, вооружён. На российском рынке мы работаем давно и уже имели дело со многими интеграциями, например, платежными системами. Вот, с какими сложностями нам пришлось столкнуться:

В первую очередь, разобраться со спецификой рынка нумизматов. Например, что из себя представляет «сырая» банкнота, а какая готова к продаже. Специфичность добавлял и тот факт, что банкноты — это реальные деньги, которые покупают напрямую у ЦБ, у каждой есть QR-код и лицензионный номер. Пользователи запаивают их в пластик и продают, либо выставляют на обмен.
Разобрались в работе своп-а — это раздел обмена банкнотами, который позволяет пользователю выбрать, какие банкноты и в каком количестве он хочет обменять, сопоставив их с доступными для обмена по сумме, на которую выставляет свои.
До этого никто из команды не сталкивался с обменом банкнот в интернете и не представлял, как это можно сделать удобно. Опыт некоторых ребят в проектировании игровой трейдинговой платформы по CS:GO помог разобраться с этим. Мы просто взяли механику из сервисов обмена игровыми предметами и перенесли этот пользовательский путь на сайт клиента.
Еще одна особенность, которая нас поджидала — это необычность интеграций. Например, есть сервис, который валидирует все серийные номера валют — пользователь вводит номер банкноты, и ей присваивается уникальный номер.

Бизнес-задача и ее решение

На первых порах Banknote World был развернут на платформе X-Cart. X-Cart это решение с открытым исходным кодом, которое позволяет легко запустить свой интернет-магазин.

Сотрудничество Banknote World с X-Cart продолжалось до тех пор, пока количество надстроек не превысило возможности площадки. Команда поняла, что переросла текущую CMS-систему. Готовые решения часто используют компании на этапе становления, но во время масштабирования приходят к тому, что бизнес-процессы могут быть уникальными. Поэтому клиент начал искать более эффективные решения для развития своего проекта.

Решение
У Banknote World было несколько вариантов решения:

Расковырять X-Cart и своими силами дорабатывать и внедрять новые фичи;
Сделать всё с нуля: разделить проект на админку и основной сайт. Админку сделать на Laravel, а фронт на Vue.js.
Мы обсудили первый вариант и поняли, что это неэффективно. Разбираться с X-Cart и поддерживать его было слишком сложно, учитывая количество плагинов: их оказалось более 400. Поэтому намного эффективнее было разработать сайт с нуля и заниматься его поддержкой автономно от X-Cart.

Прочая информация о кейсе

В середине 2022 года к нам обратилась команда сервиса Banknote World, которая находится в США. Сервис создан для того, чтобы помогать нумизматам покупать и обмениваться монетами, банкнотами, а также находить редкие экземпляры. На примере этого кейса мы расскажем, как можно выстраивать процессы в команде для более эффективной работы над проектом.

1. Дебрифинг.
Это один из самых важных этапов. Именно здесь происходит погружение в бизнес клиента, его сервисы и процессы. Важно собрать как можно больше информации и задать правильные вопросы.На этом этапе мы получили от Banknote World вводные данные:

- часть описания админ-панели;
- документацию по проекту с основными определениями: что такое тапы, как устроена работа склада;
- диаграммы с процессами продаж от первого клика до получения валют пользователем

2. UX-тестирование.
Чтобы понять, какие ошибки были в прошлом, и улучшить взаимодействие пользователей с новым сайтом, необходимо провести тестирование. Для этого обычно набирается группа респондентов, которая созванивается с интервьюером. В нашем случае интервью проводил UX/UI дизайнер. Дизайнер заранее описал гипотезы для проверки и подготовил сценарий тестирования. Каждый респондент получал задания и выполнял их на старой версии сайта. Во время прохождения, интервьюер наблюдал за действиями и фиксировал ситуации, когда человеку было сложно выполнить задание. Таким образом, мы собрали список проблем текущего интерфейса, которые мы собрались решить при редизайне.

3. Конкурентный анализ.
Это этап, на котором дизайнер изучает сайты аналогичной тематики, чтобы подметить лучшие решения по юзабилити.

Помимо основных конкурентов мы изучили популярные интернет-магазины США, чтобы спроектировать наиболее привычный пользовательский путь для целевой аудитории.

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

Прототипирование
После аналитики всегда идет сборка прототипа. На этом этапе собираются и структурируются все данные: референсы, конкурентный анализ, результаты UX-тестирования.

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

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

Работу над дизайном сервиса Banknote World нам пришлось начинать с нуля, так как у клиента не было готового UI-кита. Начали со сбора мудборда (это тип визуальной презентации или «коллажа», который состоит из примеров текстов, форм, цветовой гаммы, стилистики изображений и тд.) и его утверждения.

Текущая доступность работы

https://vc.ru/design/530723-sinergiya-analitiki-i-dizayna-klyuch-k-effektivnoy-rabote-nad-proektom

Скриншоты