Процесс: Редизайн почты «Рамблера»
Рассказ продуктовой команды холдинга.
Почта «Рамблера» существует уже 20 лет — она всего на пять лет моложе самого интернета. За это внушительное время продукт набрал аудиторию в 20 миллионов пользователей (по данным «Яндекс.Метрики» на 21 марта 2017 года). Ежедневно сюда приходит более полутора миллиона уникальных посетителей.
Закономерно, что ядро аудитории «Рамблер/почты» состоит из людей, которые открыли для себя сервисы «Рамблера» в момент их появления — эти первые пользователи рунета провели с нами почти 20 лет. Многим из них уже за 40 лет, но есть существенный сегмент молодой аудитории возрастом около 30 лет.
Лояльность аудитории «Рамблер/почты» проверена не просто годами — десятилетиями. Каждый день пользователи сервиса отправляют более миллиона писем.
Масштабный редизайн интерфейса почты пришелся на 2011 год. С тех пор продукт серьезно устарел как визуально, так и функционально. Для вызова популярных функций приходилось совершать много лишних переходов, некоторые формы работали недостаточно быстро относительно современных стандартов.
Окончательное решение о необходимости тотального обновления мы приняли почти год назад. Значительную часть времени занял выбор и подготовка перехода на новую технологическую платформу: по совокупности возможностей мы выбрали связку React.JS + Redux.
Также пришлось усовершенствовать архитектуру всей системы (начали использовать ClickHouse от «Яндекса» для сбора статистики и анализа поведения пользователей). Самые значительные изменения планировалось совершить «под капотом» продукта — пользователи не должны были видеть их, но могли почувствовать.
Старый интерфейс хоть и был привычным для пользователей, абсолютно не вписывался в актуальные тенденции. Что особенно важно — не соответствовал новой айдентике «Рамблера», которая была обновлена в апреле 2016 года и началась со смены логотипа.
Собрав все пожелания для обновленного интерфейса, мы пришли к списку из трех ключевых пунктов:
- Мягкое, пошаговое улучшение пользовательского опыта.
- Интеграция новой айдентики.
- Актуализация визуального языка в интерфейсе.
Нам хотелось создать лёгкий для восприятия интерфейс, не ломающий сложившиеся пользовательские привычки, а дополняющий их. Пожалуй, это было самой сложной задачей — противостоять любым техническим проблемам в разы проще, чем человеческому сопротивлению переменам.
Много времени пришлось потратить на изучение пользовательских привычек, чтобы структурно новый интерфейс ощущался неизменным, но при этом стал оптимизированным и отражал новые возможности сервиса.
Наша аудитория использовала почту в её текущем виде уже почти пять лет. Все эти годы интерфейс менялся, мягко говоря, не очень динамично — небольшие улучшения носили в основном эстетический характер и большинством принимались не глядя. Сильное изменение пользовательских паттернов в этой ситуации было бы слишком радикальным решением — эмоциональный негативный фон от внезапных перемен мог неприятно сказаться на показателях сервиса. Потому мы начали с малого.
Сначала перенесли и сгруппировали наиболее часто используемые функциональные элементы. Управление письмами и настройки вида отображения списка писем теперь расположены на одной панели. Кнопка «Написать письмо» наконец-то обрела положенный ей визуальный вес. В современных легких интерфейсах она должна быть самым заметным графическим элементом, но в старом дизайне кнопка откровенно терялась.
Экраны настроек стали проще и понятней, от них не веет сложностью панелей управления.
И, конечно же, доработан внешний вид главных экранов: списка писем и отображения письма.
В разработке концепции визуального языка мы опирались на принципы материального дизайна и минимализма. Мы стремились убрать лишний визуальный шум оттуда, где он мешал, и добавили акцента там, где его не хватало.
Интерфейс стал значительно чище, исчезли эффекты, отсылающие к скевоморфизму. Мы отказались от теней, лишних бордеров и добавили сетке воздуха.
Тяжелую серую цветовую гамму мы заменили светлой, а в качестве акцентного цвета использовали фирменный синий. Так дизайн почтового ящика получил айдентику бренда. С «тёплым ламповым» скевоморфизмом пришлось попрощаться.
Мы полностью переработали немного неуклюжую и тесную сетку старой почты, подчинив все элементы размерности в пять пикселей. Рекламные места переехали в левый бок, освободив дополнительное пространство для списка писем.
В старом интерфейсе почты пиктограммы несли исключительно функциональную нагрузку, назвать их привлекательными было сложно. При разработке новых пиктограмм, помимо их функциональных задач, мы старались добавить толику человечности и обаяния.
Тестирование готового дизайна было отдельным приключением. Так как мы выбрали светлую цветовую схему, контрастность интерфейса и корректное отображение его элементов нужно было протестировать на большом количестве мониторов с различными характеристиками.
В попытке сделать дизайн приятным для блёклых экранов недорогих ноутбуков на откалиброванном IPS-дисплее легкий интерфейс можно превратить в набор грязных пятен. Та же ситуация с разрешениями: нам предстояло проверить интерфейс на всех размерах, от 1024×768 до 4К.
Почта — один из первых продуктов, редизайн которого произошёл с использованием нового для «Рамблера» визуального языка. Многие приёмы и элементы, использованные в интерфейсе, послужили основой для общих UI-гайдлайнов и библиотеки компонентов.
При наличии нескольких продуктов создание общих гайдлайнов критически важно — ведь это буквально лицо компании. Мы ведём более 20 сервисов и проектов разной степени сложности, но все они должны поддерживать в сознании пользователей устойчивую ассоциацию с брендом нового «Рамблера».
После разработки нового интерфейса нам было необходимо получить обратную связь от реальных пользователей — несмотря на большую выборку сотрудников «Рамблера», на деле мы могли получить совершенно иную реакцию. Тестирование нового интерфейса мы разделили на три этапа.
Первый публичный тест затронул 1% от всех пользователей сервиса. Мы смотрели на уровень отказов и жалобы. Убедившись, что процент отказов находился в пределах нормы, мы приступили ко второму этапу, выкатив новый интерфейс уже на 10% аудитории. Результаты второго теста по-прежнему были в пределах нормы, никаких явных причин остановить запуск не нашлось.
Заключительный тест должен был выявить «Показатель оттока клиентов» (ChurnRate). Мы отобрали тысячу пользователей и перевели их почтовые ящики в новый дизайн без возможности вернуться в старый. Переход сопровождался предупреждением, объясняющим грядущие изменения и особо важную роль каждого выбранного пользователя.
В течение трех недель только двое написали нам, что им не нравится дизайн и они собираются сменить «Рамблер/почту» на что-то другое (тот самый эмоциональный фон — не факт, что уход от нас действительно состоялся). Остальные 998 человек либо не отреагировали никоим образом, либо прислали некоторые замечания и пожелания.
Первые два этапа дали быстрый результат, ключевые показатели ожидаемо выросли. Отказы по результатам третьего этапа остались в пределах нормы. Вдохнув поглубже, мы приняли решение запускать новый интерфейс «Рамблер/почты» на всю аудиторию сервиса.
После масштабного тестирования наш интерес к мнению пользователей не иссяк. Чтобы собрать больше информации и дать людям возможность «выпустить пар», в интерфейсе почтового ящика мы акцентировали внимание на форме обратной связи.
Всего за несколько дней мы получили более 40 тысяч оценок с комментариями. Кроме эмоционального отклика, были очень дельные замечания и предложения, по которым мы начали работу.
Кто-то выражал своё мнение эмоционально, кто-то лаконично и скромно, кто-то не находил нужных слов, а кто-то присылал целый список конструктивных предложений.
Были случаи, когда через форму обратной связи к нам даже пытались устроиться на работу (кстати, мы в тот же день передали информацию об этом парне в HR).
Были, конечно же и негативные отзывы (и это одни их самых культурных).
Часто встречалась просьба добавить разнообразные темы оформления — эта функция уже в разработке. Адаптация интерфейса для людей с плохим зрением последует за внедрением поддержки тем.
Мы были готовы к потоку эмоциональной критики и требованиям «вернуть всё назад», но таких комментариев было очень немного. Зато большая часть сообщений была позитивной — для нас это оказалось приятной неожиданностью, ведь негатив в отзывах выплескивают гораздо охотней, чем благодарность. Даже самые осторожно настроенные сотрудники уверились в том, что всё сделали правильно.
Менять то, что давно устарело, но работает — трудная задача. В попытке осовременить свой продукт можно оттолкнуть от него пользователей. В случае с «Рамблер/почтой» ситуация была особенно щекотливой, ведь много наших пользователей уже в том возрасте, когда любые перемены воспринимаются негативно. Но по итогам работы мы получили так много благодарностей и столь хорошую обратную связь, какой не ожидали сами.
Изменив не только визуальную, но и техническую составляющую сервиса, мы испытали самих себя. Редизайн «Рамблер/почты» — это только начало для нашей команды. Теперь мы планируем выпустить серию масштабных обновлений для ключевых продуктов «Рамблера», включая сам портал.
Команда проекта
Отдел дизайна продуктов
© vc.ru
