Аds.Market объединяет для сотрудничества огромное количество брендов и сотни тысяч площадок для размещения рекламы по всему миру, помогая партнерам зарабатывать на своих проектах, увеличивать узнаваемость бренда и получать клиентов. И все это с использованием криптовалют.
Глубоко погрузиться в технологию работы сервиса и найти способ оптимизировать интерфейс.
Основная проблема заключалась в том, что, как это часто бывает в подобных проектах, текущая структура страниц и элементов появилась хаотично. По сути, интерфейсы создавали программисты, навешивая одну фичу за другой и не особо беспокоясь о людях и юзабилити.
Львиная доля взаимодействия с сервисом происходит в личном кабинете, через панель управления рекламными кампаниями. Нам предстояла спроектировать ее максимально удобно.
Мы начали с исследований и аналитики. Стали разбираться с механизмом работы сервиса, стараясь понять его возможности и алгоритм взаиморасчетов, чтобы определить, какие именно показатели демонстрировать тем или иным пользовательским ролям.
Изучили существующую панель управления — один из ключевых элементов, на котором базируется навигация и логика всего сервиса. Ее структура не располагала к использованию: списки кампаний располагались неудобно, а чтобы найти раздел финансов и разобраться в показателях, требовалось куча времени.
Второй шаг — конкурентный анализ. У большинства из существующих игроков рынка с интерфейсами оказалось ненамного меньше проблем. Все они оказались разношерстными, нигде не прослеживались понятные сценарии и дружелюбный дизайн.
Анализ конкурентов.
Однако это не помешало нам еще больше погрузиться в продукт и составить огромный список уточняющих вопросов для клиента.
Вопросы и предложения.
Получив ответы и развернутые комментарии от клиента, мы окончательно определили и зафиксировали потребности пользователей, описали сценарии их взаимодействия с ресурсом и приступили к проектированию.
Страница настройки до нашего вмешательства выглядела так:
В развернутом виде она занимала шесть экранов, а целый ряд функций вызывал больше вопросов, чем ответов. Полностью отсутствовала логика группировки элементов и их иерархии на странице. Требовалось выбирать из списка каждый параметр и добавлять его вручную, совершая большое количество кликов. Разобраться со всем этим мог только прожженный пользователь, прошедший через огонь и воду аналогичных сервисов. Для новичка же шансов практически не было.
Мы декомпозировали весь функционал на мельчайшие частицы и полностью переработали страницу. Основной принцип — оптимизация всех параметров и групп элементов. Мы разбили их на логические группы: язык и гео, основные настройки, тип устройства, браузер и т. д.
Вместо шести экранов у нас получился один. На нем расположилась панель табов с понятными названиями и удобным переключением между разделами настройки кампании.
Особое внимание уделили тонким настройкам времени показа рекламы, — теперь этот параметр можно настроить максимально точно, что важно для пользователей сервиса. Чтобы сделать интерфейс еще более дружелюбным — добавили подсказки для новичков.
Получилось намного чище, компактнее и понятнее.
Калькулятор — необходимый модуль для расчета дневного бюджета и стоимости клика, который не был предусмотрен ранее. Еще в ходе аналитики мы поняли, что пользователю критически важно иметь возможность прогнозировать свои затраты. У конкурентов были представлены нагроможденные и сложные системы расчета. Это нас не устраивало.
Мы изучили формулы и процесс расчета, разобрались со всей математикой. Пришлось переделывать не только интерфейсы, но и саму логику расчета, так как в процессе анализа выяснилось, что многие значения пользователю попросту не нужны и не помогают ему при настройке. Итоговый интерфейс калькулятора создавался итеративно и каждый раз подвергался тестированию, чтобы ничего не упустить.
4 итерации
В результате получился минималистичный и удобный инструмент, который помогает спрогнозировать затраты и выставить настройки кампании правильно.
Рекламные баннеры имеют широкий диапазон настроек и нужно предусмотреть все, начиная от его размера и заканчивая цветом кнопки.
Большое внимание уделили функционалу редактирования рекламной зоны: от количества, размера и места расположения рекламы на сайте зависит эффективность рекламной кампании в целом.
Настройки баннера и кампании имеют одинаковые ограничения по числу показов и бюджету. Чтобы избежать путаницы и противоречий, мы отдали приоритет настройкам кампании, а блок настройки баннера сделали визуально менее заметным.
Боковое меню — привычный и удобный элемент интерфейса в такого рода сервисах. Его мы оставили прежним, немного изменив содержание. Зато полностью переделали рабочую область, для того чтобы структурированно подать всю информацию — от общих показателей до списка кампаний.
Таким получился первый вариант:
Прототипы неоднократно менялись в ходе внутренних ревью. Так, например, приняли решение, помимо табличного отображения данных, добавить для наглядности несколько графиков, хотя изначально они не подразумевались.
Везде, где это возможно, старались персонализировать интерфейсы под текущую роль. Так, для рекламодателя мы вывели показатели кликабельности и расходы, а для веб-мастера — процент кликов и доходы соответственно.
Этапы внутреннего ревью:
Итоговая страница:
Графики демонстрируют как общие показатели эффективности, так и динамику отдельных кампаний. Прямо отсюда можно перейти к детальным отчетам по каждой из них.
Чтобы понять эффективность кампании, необходима полная аналитика, поэтому мы предложили спроектировать отдельную страницу с отчетами — более развернутыми, чем те, что представлены в панели управления. Мы вывели табличную детализацию по датам и диаграмму, которая показывает процентное соотношение по типам устройств, браузера, языка, регионов и другим параметрам.
Система безопасности критически важна для сервисов, оперирующих деньгами, поэтому мы предусмотрели возможность двухфакторной аутентификации, позволяющей войти в свой личный кабинет, например, с помощью одноразового пароля, который генерируется приложениями «Яндекс.Ключ» или Google Authenticator. Каждый новый пароль быстро перестает работать, если вы им не воспользовались, и сразу отключается, если вы вошли с ним на сервис.
Вся мощь сервиса, доступная для зарегистрированного пользователя, должна быть понятно объяснена новым посетителям. На главной странице публичной части сайта мы рассказали о возможностях, преимуществах и показали наглядные примеры того, как выглядит интерфейс внутренней части. Идей для концепции и первого экрана было несколько: классические варианты с изометрией, более абстрактные и концептуальные.
Клиент выбрал светлый вариант с лампочкой.
Ads — сервис для активных и продвинутых. Идея выбранной концепции — показать абстрактный образ рекламы, размещаемой на сайте. Синий цвет был выбран не случайно — независимо от пола и возраста он ассоциируется со спокойствием, продуктивностью, профессионализмом, а значит, помогает решать нашу задачу: смягчает восприятие рисков, связанных с нестабильной криптовалютой и располагает к доверию.
Градиентные фигуры на фоне — ассоциация с большим количеством рекламных мест, а наклонное положение задает интерфейсу динамику.
Доработанный макет главной страницы:
Личный кабинет и все внутренние страницы интерфейса выдержаны в том же стиле, но с акцентом на функциональную сторону. В них намного больше воздуха и свободы для концентрации внимания на показателях и графиках.
Мы перепроектировали и персонализировали личный кабинет и максимально упростили работу в нем. Собрали более 300 макетов в четырёх разрешениях и подготовили сопроводительную документацию.
Весь процесс от исследования до готового UI-кита занял более 1000 часов.
Спасибо нашему клиенту за возможность поработать с интересным проектом!