Как радикально изменить часть сервиса и не напугать пользователей

Дать пользователю больше, чем он ожидает

Перед командой Readymag стояла цель обновить профиль пользователя, который за пять лет стилистически устарел. Мы сразу не стали ограничиваться косметическими изменениями дизайна и решились фактически разработать новый интерфейс. Дело в том, что веб за это время очень сильно изменился: стал чище и понятнее, теперь в нём меньше декоративных элементов и скевоморфизма (использования формы реальных объектов при создании виртуальных). Значение имеет и тот факт, что привычки пользователей стали другими: всё больше людей предпочитают получать информацию с мобильных устройств, и важно было это учесть при разработке интерфейса. Поэтому мы хотели создать новую эстетику в инструменте, которая была бы актуальна не год, а еще пять лет. Визуальная составляющая для нас так же важна, как и функционал.

Путь пользователя (user experience) мы старались оставить неизменным. Где-то стремились его упростить, так как в старом профиле были недочёты, от которых страдали и мы, и наши клиенты. Например, чтобы обновить подписку, раньше надо было проделать довольно долгий путь из вкладки основного меню в настройки. В новом интерфейсе десяток страниц сократился до двух — Projects и Settings. Теперь, чтобы обновить подписку или изменить настройки пользователя, не нужно блуждать по нескольким вкладкам. Еще одна проблема — кнопка Help была неочевидной, так что пользователи сразу писали в нашу техническую поддержку, не пытаясь найти ответ в нашем мануале. Теперь же Help вынесен в основное меню. Так что и нагрузка на агентов техподдержки снизилась, и пользователям проще и быстрее искать ответы на вопросы.

В Projects собраны все работы пользователя. Ориентироваться в них теперь стало проще с помощью поиска и фильтров — проекты можно сортировать в алфавитном порядке, по дате редактирования или по дате создания. Это обновление особенно актуально для юзеров, которые не первый год работают с инструментом и накопили сотню и больше проектов.

Вся персональная информация и настройки упорядочены на странице Settings. Тут можно сменить пароль, обновить подписку, проверить подключенные сервисы и присоединиться к affiliate-программе, чтобы получать скидки на следующие платежи.

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

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

Футуристично простой дизайн

Минималистский дизайн обращает внимание на главное — проекты. В обновленном интерфейсе используется монохромная цветовая гамма и акцентный красный. Пропали из профиля такие устаревшие эффекты, как объем и тени. Сохранилась только функциональная анимация.

В интерфейсе используются всего три текстовых стиля и системные шрифты, поэтому профиль будет выглядеть нативно на любом устройстве. По умолчанию на Mac отображается шрифт San Francisco, в Windows — Segoe, а на андроид — Roboto.

Как всё поменять и не напугать пользователей

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

Как только у нас появилась минимально работающая версия, мы пригласили опытных клиентов Readymag в офис и предложили им впервые посмотреть на профиль. Прямо на месте мы подключали сырую версию к аккаунту интервьюируемых, так что все их проекты и папки отображались в новой среде. Смотреть на первую реакцию было страшно и интересно — пользователи в первые секунды были ошеломлены такими переменами. Нам же было важно, чтобы «вау-эффект» не сработал в ущерб функциональности.

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

Второй круг исследований запустился на более широкую аудиторию и проходил уже в онлайн-режиме. У нас активное сообщество бета-тестеров, так что как только мы выложили обновление и написали письмо, нам стали приходить ответные сообщения. Ниже — примеры обратной связи, которую мы получили.

Что дальше

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

***

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