WebMoney Mail

My role: UI-designer.
Team: 2 frontend developers, Lead developer.
Year: 2022
Back
Presentaion
Gallery

Background

Старый дизайн

Интерфейс почты последний раз редизайнился в 2014-м.

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

Я начал с создания дизайн-системы, UI-кит которой можно посмотреть здесь
Проблемы
Отсутствие дизай-системы как таковой;

Старые UX-паттерны, которые нужно заново проверить и при необходимости обновить.
Задачи
Провести ревью старого интерфейса, выделить слабые места;

Создать фундамент дизайн-системы и засинхронить компоненты со стороной фронт-энда;

Ориентироваться на популярные почтовые сервисы.

Что бросилось в глаза

arrow-left
Первые тезисы
Ключевая проблема — сложная иерархия, которая ведёт за собой перегруженный интерфейс.

Композиция элементов выбрана под "квадратные" мониторы, что в 2022-м году не актуально.
Потребность в редизайне общей навигации
Общая шапка с громоздким меню и футер забирали на себя лишнее внимание; параллельно с редизайном Почты был поднят вопрос о целесообразности проектирования новой шапки WebMoney, а также подвала.
После ревью я посмотрел, как спроектированы аналогичные сервисы у Yandex, Google и Proton  

Бенчмаркинг

arrow-left
Выводы
Популярные почтовые сервисы строят свою структуру следующим образом:

Слева — основная навигация с категоритями и разделами;


Справа — список писем;

Панель управления письмами располагается в отдельном блоке, над списком сообщений.
Гипотезы
Схожая структура популярных почтовых сервисов показывает, что она удобна и понятна среднестатистическому пользователю, что позволяет смело внедрить её в сервис WebMoney — она привычна и может решить проблему иерархии.
Отмечу, что для WebMoney отдельную важность представляет такая сущность, как Контакты: некоторым сотрудникам важно синхронизировать рабочие процессы с конкретными профилями. Про редизайн контактов и флоу, связанным с ними, я расскажу ниже.

Новый дизайн

Помимо нового вида списка, основного меню и верхней панели; частично можно увидеть новый дизайн шапки.

Анализ старого дизайна, редизайн общей навигации

Детально рассмотрим проблему Поиска
Проблемы
Много посторонних пунктов меню, которые не относятся конкретно к почте; поиск — только в шапке, который несёт в себе все сущности сервисов.
Small story
Проблему общей устаревшей навигации платформы предложили решить два инициативными разработчика, которые лучше понимали подводные камни.

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

Решающим фактором были не показатели метрик. Как это ни странно, руководство (по их словам) поддерживало нагромождённое меню с длиннющими списками просто на тот случай, когда у пользователя возникнет "какой-то вопрос" и ему потребуется помощь от Поддержки.

Других метрик, которые могли объективно показать необходимость в этом, нам не смогли предоставить.
Проблему общей устаревшей навигации платформы предложили решить два инициативными разработчика, которые лучше понимали подводные камни.

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

Решающим фактором были не показатели метрик. Как это ни странно, руководство (по их словам) поддерживало нагромождённое меню с длиннющими списками просто на тот случай, когда у пользователя возникнет "какой-то вопрос" и ему потребуется помощь от Поддержки.

Других метрик, которые могли объективно показать необходимость в этом, нам не смогли предоставить.
arrow-left
Решение
Ресурсов на исследование работы сервиса поддержки не было. Поэтому сторона дизайнеров решила посмотреть структуру основного меню у других компаний из банковской сферы и внедрить её сильные стороны.
Small story
Сложность внедрения нового дизайна состояла в том, что каждому разработчику, который отвечает за определённый сервис, нужно было дать уже готовый код. Стороне фронтенда требовалось создать код, с готовыми стилями, который можно было бы подключить к файлу любого сервиса и просто поменять / добавить в нём нужные ссылки и названия. По-другому сценарию никто не хотел идти, а финальное решение наша сторона не принимала.

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

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

Меню стало контекстным, нативным и при этом все возможности платформы остались под рукой — все они были распределены по категориям внутри горизонтального меню; уникальное горизонтальное меню второго уровня могло быть добавлено каждому Сервису при необходимости.
arrow-left

Стрый флоу

Проблема
Поиск в общей шапке платформы связан со всеми сущностями платформы, не только с сервисом почты.

Для пользователя это настоящая боль: при возникновении потребности в Поиске, он будет сталкиваться с лишней информацией и терять фокус на своей задаче.

Бенчмаркинг

После нескольких обсуждений с командой и итераций в дизайне, в интерфейс Почты был добавлен новый поисковой фильтр
Решение
Внедрить отдельную Форму поисковика
с Фильтрами;

Отделить основной поисковик от Контактов, дать им отдельный

Новый дизайн