Процесс: редизайн Почты «Рамблера»
Материал с рассказом нашей команды о редизайне Рамблер/почты впервые был опубликован на портале VC весной 2017 года. За это время мы доработали интерфейс Почты на основе фидбека, но для истории хочется сохранить эту статью без изменений.
Почта «Рамблера» существует уже 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).
Были, конечно же и негативные отзывы (и это одни их самых культурных).
Часто встречалась просьба добавить разнообразные темы оформления — эта функция уже в разработке. Адаптация интерфейса для людей с плохим зрением последует за внедрением поддержки тем.
Мы были готовы к потоку эмоциональной критики и требованиям «вернуть всё назад», но таких комментариев было очень немного. Зато большая часть сообщений была позитивной — для нас это оказалось приятной неожиданностью, ведь негатив в отзывах выплескивают гораздо охотней, чем благодарность. Даже самые осторожно настроенные сотрудники уверились в том, что всё сделали правильно.
Менять то, что давно устарело, но работает — трудная задача. В попытке осовременить свой продукт можно оттолкнуть от него пользователей. В случае с «Рамблер/почтой» ситуация была особенно щекотливой, ведь много наших пользователей уже в том возрасте, когда любые перемены воспринимаются негативно. Но по итогам работы мы получили так много благодарностей и столь хорошую обратную связь, какой не ожидали сами.
Изменив не только визуальную, но и техническую составляющую сервиса, мы испытали самих себя. Редизайн «Рамблер/почты» — это только начало для нашей команды. Теперь мы планируем выпустить серию масштабных обновлений для ключевых продуктов «Рамблера», включая сам портал.
Команда проекта. Отдел дизайна продуктов
Александра Ермоленко,
Директор департамента
Елена Лисеева,
Арт-директор продуктовой команды
Ольга Пиголицына,
Ведущий дизайнер отдела визуальных коммуникаций