CDP платформа
Задача
Создать дизайн сервиса для рассылок, которым будут пользоваться сотрудники банка для отправки писем клиентам. Рассылки могут появляться в интернет-банке, личной почте, мобильном приложение и др. каналах. Сотрудники банка должны иметь возможность контролировать процесс отправления и создания новых рассылок клиентам.
ИА для главной страницы и рассылки
Критерии решения
Процесс работы
Разбор задачи → Анализ текущих решений → Описание ключевых функций → Создание ИА → Вайрфреймы → Дизайн
Погружение в задачу
Первым делом я решила посмотреть из чего состоят email письма. Учитывая что Сбер пользуется Sendsay, я также поискала другие решения и проанализировала их.
Также ознакомилась с интерфейсом текущего веб приложения посмотрев видео на ютубе, поспрашивала чат гпт чтобы лучше погрузиться в рассылки. E-mail рассылки бывают очень различными, но в основном содержат общие паттерны.
Анализ текущих решений
Далее я решила поискать текущие решения и выписала их сильные стороны. В основном смотрела на элементы интерфейса, указанные в ТЗ, но также отметила лучшие практики, которые использовала в своем конечном решении
Информационная архитектура
Взяв основные требования в ТЗ прописала элементы, которые должны обязательно присутствовать в интерфейсе
✅ Ключевые действия
контролировать процесс отправления → возможность остановить/отменить/переделать
создавать новые рассылки → кнопка создать рассылку
разделять потоки писем по правам доступа клиента → пользоваться будут разные люди, предусмотреть разные роли
делать расписание → вкладка календарь/расписание
дать понимание сотрудникам? о статусе рассылок → деление рассылок по фильтрам/ просмотр статуса рассылки
Главными составляющими я определила рассылку, клиента и аналитику и отталкиваясь от них составила ИА
ИА для главной страницы и рассылки
Wireframes
У данной платформы несколько разных ролей: маркетолог, дизайнер, копирайтер, аналитик и администратор. Я решила проектировать под роль маркетолога и составила два грубых прототипа экранов главной и создания рассылки
Затем я составила User Flow и прописала какие экраны должны обязательно присутствовать
Мудборд
По визуалу я ориентировалась на элементы интерфейса, которые нашла в дизайн системе VIenna в Figma
Дизайн система
Задание чётко привязано к Райффайзен банку, а значит визуальное решение надо использовать текущее. Поэтому было принято решение использовать дизайн-систему Vienna и файлы из Фигма-коммьюнити (хоть они и не обновлялись 3 г.)
В процессе разработки дизайна, я столкнулась с нехваткой некоторых компонентов интерфейса, и мне пришлось создать свои элементы, опираясь на существующую дизайн-систему, чтобы обеспечить более консистентный дизайн
Карточки сделаны таким образом, чтобы всегда была видна возможность редактировать или удалить их
Первая итерация
Я сделала две итерации дизайна, которые сильно не отличаются, но содержат важные изменения следующих элементов:
Переместила вкладку уведомлений наверх, чтобы была возможность прочитать уведомления не прерывая основных действий
В создании рассылки закрепила главные кнопки в нижней навигации, чтобы избежать лишнего скролла
Дизайн решение
Проектировала под разрешение для минимально возможного экрана HD (1280х720) с возможностью масштабирования
Главная страница. История
При открытии сервиса нас встречает историея всех отправленных рассылок, т.к. это наиболее быстрый и бесшовный способ к просмотру и созданию новых рассылок
Главная страница / Права
Не у всех пользователей есть права на все действия с рассылками, поэтому если они отсутствуют, всегда появляется предупреждающее окошко с возможностью отправить запрос на получение прав
Создание массовых рассылок
Я выделила 4 типа рассылок, но сконцентрироваться решила только на письме, оно самое объёмное и более популярно в B2B, также учла возможность выбирать получателей и задавать расписание
Редактор письма
Редактор письма делится на две основные части: превью письма и создание контента для письма
Редактирование текста
При выборе элемента письма правая контентная часть меняется на настройки типа элемента
Дополнительно / База клиентов
Я решила прикинуть как выглядела бы таблица со всеми клиентами, из этой таблицы можно создавать сегменты для будущих рассылок. Получилось большая таблица, которая скроллится вправо. Также в перспективе можно добавлять еще больше данных: соучредителей и их контакты, выручку, торговые марки и т.д.
Дополнительно / Сегменты
Здесь хранятся все созданные пользователем сегменты. Редактирование и удаление сделаны кнопками, т.к. таблица небольшая и для этого есть место. Чтобы не отвлекать пользователя, появляется только при наведении.
Другие состояния — 10 экранов
Итоги и вывод
Спроектировала платформу для коммуникации банка с разным бизнесом, учитывая все требования и добавив лучшие практики других сервисов. Из-за сжатых сроков не успела отрисовать экраны календаря и автоматизацию воронки
Таймлайн проекта: 1 неделя, июль 2024 г.
