В разработке каждого продукта есть этап, когда требуется внести кардинальные изменения в его структуру и визуальную часть. Всё это скрывается за страшным словом «редизайн».

Редизайн обычно занимает много времени, чтобы пойти на этот шаг, нужны весомые причины. У нас таких причин было несколько:

1. Добавили новый функционал.

2. Поняли, что у сервиса сложная навигация и неочевидные переходы между страницами в рамках одного пользовательского сценария.

3. Обнаружили расхождения в стилях и компонентах интерфейса. 

Были еще проблемы, но все они так или иначе были связаны с этими пунктами.

С чего все начиналось

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

У нас получилось чёткое разделение текущего интерфейса на отдельные составные компоненты, над которыми предстояло работать:

1. Изменение архитектуры сервиса.

2. Изменение CTA для создания нового окна при карточном и строчном отображении.

3. Настройка пошаговой навигации при создании окна.

4.  Разделение контентной части и её настроек при создании окна.

5. Добавление более гибкого функционала создания сегментов.

6. Добавление новых графиков в статистику*.

*Прим. редакции: Про сегменты и графики подробно расскажем  в следующих статьях, этого стоит ждать 😉

Изменение архитектуры сервиса

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

Основное меню было разделено на два уровня. В первом можно выбрать нужный сервис, а во втором – его внутренние страницы. В дальнейшем это поможет добавлять новые сервисы и не менять каждый раз основную навигацию.

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

Закончив с навигацией, мы приступили к изменению остального интерфейса сервиса. Основной функцией enPop является создание новых попапов и их редактирование. Поэтому нужно было полностью переработать эту часть интерфейса и избавиться от спорных моментов.

Изменение CTA для создания нового окна

Создание любой сущности начинается с кнопки «Создать …». Так вот у нас её не было 😐. Вместо неё был неочевидный круг с плюсом внутри, который располагался где-то посередине интерфейса.

Решение было простым: мы заменили этот непонятный элемент на всем привычную кнопку.

А в списке с попапами добавили пустую карточку, нажав на которую, можно перейти к созданию окна.

Настройка пошаговой навигации при создании окна

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

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

Лучше всего с этим справился функциональный элемент «Stepper». С помощью него мы смогли разделить настройки на отдельные шаги и задать каждой приоритет. Так мы сузили диапазон решений для пользователя, тем самым избавив его от тяжелой ноши выбора. Это значительно сократило время на создание окна и сделало процесс понятным и удобным.

Stepper – элемент интерфейса, который показывает последовательность пронумерованных шагов.

Разделение контентной части и её настроек при создании окна

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

В старом интерфейсе эти элементы находились рядом с предпросмотром окна, и не было понятно: где настройки, а где контентная часть.

В новой версии мы разделили контентную часть и её настройки. Контентная часть, к которой относится предпросмотр окна, добавление сплит-теста, stepper и кнопки  «Далее»/«Назад», находится теперь в центре страницы. 

Справа от контентной части находятся её настройки.

Результаты и планы на будущее

Когда мы начинали работу над редизайном, интерфейс выглядел так:

Он был хорош, нравился нам и клиентам, но нет предела совершенства, верно? Мы исправили нюансы, которые мешали масштабированию, и получили более гибкий, интуитивно понятный, последовательный интерфейс, где каждому функциональному элементу отведено свое место. 

Особенность работы над сервисом заключается в том, что она никогда не заканчивается. Меняется рынок, технологии, паттерны взаимодействия, из-за чего меняется и сам дизайн. Текущий интерфейс так же, как и предыдущий, будет меняться со временем. Уже сейчас, с каждой новой итерацией, он становится всё лучше и лучше.

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