Синергия аналитики и дизайна — ключ к эффективной работе над проектом

Хорошо, когда амбициозная идея отвечает потребностям пользователей. Рано или поздно наступает момент, когда инструменты, которые использовались ранее, становятся неэффективными, а бизнесу требуется масштабирование. Так произошло и с сайтом сервиса Banknote World. В такой ситуации нужны эффективные решения, которые легко поддерживать в дальнейшем.

В этом материале расскажем, как выстроили процессы от брифа до разработки на примере проекта нового сайта для Banknote World, а еще про специфику рынка нумизматов, опыт игры в CS:GO, который помог в проектировании сайта, и многое многое другое.

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

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

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

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

1. Расковырять X-Cart и своими силами дорабатывать и внедрять новые фичи;
2. Сделать всё с нуля: разделить проект на админку и основной сайт. Админку сделать на Laravel, а фронт на Vue.js.
   

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

Фиксируем все процессы, чтобы команде было удобнее находиться в одном информационном поле. Собираем все майндмэпы и схемы в Whimsical. Например, так мы зафиксировали процесс от брифа до передачи в разработку.

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

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

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

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

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

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

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

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

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

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

Это своего рода предварительный этап тестирования. Он позволяет выявить несоответствия ещё до того, как они попадут в разработку, что значительно уменьшит количество багов и правок в конечном счёте. Ведь если проблема в макете обнаружится на более поздних этапах, придется тратить намного больше времени на исправление не только кода, но и дизайна. Поэтому не стоит пренебрегать этапом валидации.

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

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

Для себя поставили задачу сохранить преемственность с помощью синих оттенков. При этом, хотели освежить визуальную составляющую и укрепить образ надежного магазина.

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

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

О том, как протекают процессы после попадания проекта в разработку и как прошли интеграции у Banknote World — расскажем в следующей главе. Интересно? Нам тоже! Следите за новостями, подписывайтесь на канал и делитесь своими процессами.