Avast Online Security & Privacy
Большой редизайн флагманского браузерного расширения с аудиторией более 10 миллионов пользователей.
Краткое резюме
Мы взяли браузерное расширение с 12+ миллионами установок, которое к тому моменту фактически выпало из фокуса, и вернули его в центр внимания. Вместе с новым визуальным стилем, переработанной информационной архитектурой и обновлённой функциональностью мы запустили интерактивную систему подсказок Privacy Advisor.
Благодаря тщательной совместной работе дизайна и разработки команда выпустила полностью обновлённый продукт, который получил сильный отклик и у пользователей, и внутри компании. Avast Online Security & Privacy уверенно вернулся и снова стал одной из ключевых цифровых точек контакта для текущих и потенциальных клиентов.
Команда
Над проектом работала кросс-функциональная команда на стыке продукта, дизайна, исследований, разработки, тестирования, маркетинга, локализации и поддержки. Основная команда вела редизайн от исследования до запуска, а дополнительные специалисты помогали с выводом продукта в разные каналы и рынки.
Постановка задачи
На фоне скандала вокруг дочерней компании Avast Jumpshot и её закрытия в январе 2020 года браузерное расширение Avast Online Security оказалось среди первых продуктов, по которым это ударило сильнее всего. Практику использования пользовательских данных резко свернули, а компания кардинально сменила курс, чтобы сфокусироваться на защите приватности пользователей.
Расширение перевели в режим поддержки, его пользовательская база и оценки в магазине заметно просели. Когда всё улеглось, продукт пролежал на полке больше года. Тем временем приватность стала одной из ключевых опор подхода Avast к цифровой свободе и важной частью будущего ребрендинга.
Стало ясно, что такой массовый и влиятельный продукт для пользователей пора возвращать к жизни: он должен был снова приносить реальную пользу людям и подтверждать обновлённое обещание Avast в сфере приватности.
Цели дизайна
Каркас
Сформировать новое направление
Переосмыслить устаревший каркас продукта и задать ему новое направление через дизайн-мышление.
Бренд
Запустить новую визуальную систему
Запустить продукт с новой визуальной системой и брендингом, согласованными с Avast One.
Приватность
Запустить значимую функциональность для защиты приватности
Спроектировать, реализовать и вывести в релиз функциональность, которая напрямую помогает защищать приватность пользователей.
Опыт
Спроектировать полную воронку
Построить цельный пользовательский путь от первого контакта до удержания.
Интеграция
Связать его с экосистемой продуктов
Связать продукт с существующей экосистемой и подготовить почву для будущей интеграции с флагманским решением.
Удержание
Повысить ежедневную ценность
Сделать расширение настолько полезным, чтобы оно стало частью повседневной привычки при веб-сёрфинге.
Процесс дизайна
В основе процесса лежала классическая модель «двойной ромб». Старт проекта и исследовательскую фазу вёл мой коллега Пётр: он глубоко проработал несколько направлений и собрал обширную исследовательскую базу.
Моя роль
Превратить исследование в готовое направление продукта
Я подключился на этапе, когда нужно было сузить объём, чётко сформулировать проблему, провести работу от концептов до high-fidelity макетов, проверить решения в тестах и довести результат до финала.
Проблемы старого продукта
Когда мы начали собирать новую информационную архитектуру, первым импульсом было сохранить одноэкранный каркас и опереться на карточки в духе виджетов. Очень быстро стало понятно, что это тупиковый путь.
На главном экране не было явного фокуса, а пространство интерфейса использовалось не лучшим образом.
Несколько пользовательских задач начинали конкурировать друг с другом за внимание.
Избыточное количество контролов ещё сильнее размывало бы опыт.
Объём функциональности в продукте вырос, и при этом нам всё равно нужно было оставить запас для дальнейшего роста.
Новая информационная архитектура
Каждый элемент интерфейса и каждый пользовательский сценарий мы внимательно пересобирали и уточняли. На решения влияло сразу несколько факторов. В этом кейсе я показываю уже доработанные после фидбека экраны и объясняю, почему мы пришли именно к ним.
Фокус экрана стал считываться сразу, а пространство интерфейса начало работать гораздо эффективнее.
Ключевые пользовательские сценарии разошлись по отдельным разделам и перестали мешать друг другу.
На каждом экране было одно основное действие и максимум одно дополнительное.
Новая структура боковой панели дала больше воздуха для описания функциональности и будущих расширений.
Прототип
После нескольких раундов презентации новых концепций стейкхолдерам и сбора обратной связи от дизайнеров и инженеров я получил зелёный свет на детально проработанные макеты и создание прототипа в Figma. Прототип помог собрать дополнительный фидбек как внутри команды, так и снаружи, а затем стал основой для качественного пользовательского тестирования с тремя группами:
- Пользователи, уже знакомые с этим браузерным расширением.
- Пользователи, которые уже пользовались нашими продуктами и знали бренд.
- Участники, никак раньше не соприкасавшиеся с нашими продуктами.
Результаты исследования пользовательского опыта
Пользователи хорошо приняли редизайн, особенно новый светлый визуальный стиль, и без труда ориентировались внутри продукта.
Часть функциональности была концептуально новой, поэтому часть людей не сразу понимала, что именно видит перед собой. Мы решили это, сократив тяжеловесные тексты и в ряде случаев заменив целые абзацы одной строкой и ссылкой на нужный раздел справки. Все моменты сомнения и трения в навигации и действиях мы фиксировали, чтобы я мог сгладить эти шероховатости в следующей итерации.
Передача в разработку
После ещё пары итераций мы остались довольны новыми макетами, и пришло время передавать их в разработку. Как дизайнер, я всегда стараюсь поддерживать рабочий процесс разработчиков: подключаю их как можно раньше и по ходу проекта отдаю им самостоятельные, осмысленные артефакты.
Это упрощает инженерам планирование спринтов и позволяет заниматься основой продукта ещё до того, как high-fidelity-макеты полностью готовы.
Во время разработки я постоянно держал связь с инженерами, чтобы реализация не расходилась с изначальным видением. Когда начали появляться первые визуалы, мы регулярно созванивались и проходились по шероховатым местам. Несмотря на полностью удалённую команду, я оказался в одном городе с нашим главным фронтенд-разработчиком, так что мы использовали этот шанс и часть работы сделали очно.
Локализация на 20+ языков
AOSP был глобальным продуктом, и каждое обновление нужно было локализовывать для рынков Европы, Азии и Ближнего Востока.
Это добавляло ещё один слой сложности. Например, приходилось готовить промоматериалы для разных онлайновых магазинов. Ещё одна проблема — сильный разброс длины текста между языками, который иногда буквально ломал интерфейс. Отдельное спасибо QA-команде: они ловили такие случаи, и мы успевали вовремя всё исправить.
Как мы измеряли успех
У Avast был широкий набор аналитических инструментов, позволявших отслеживать почти любой показатель — при этом все данные были очищены от персональной информации. Мы смотрели, в частности, на следующее:
Принятие продукта
Успешность онбординга, завершение ключевых сценариев, включение отдельных элементов функциональности и вовлечённость в течение первого месяца.
Использование и взаимодействие
Более детальные данные о том, как люди пользовались разными элементами продукта, помогавшие понять, что приносило наибольшую ценность.
Privacy Advisor
Прохождение гидов, глубина использования, популярность отдельных гидов, рейтинги платформ и другие сигналы вовлечённости.
Промо-сообщения
Вовлечённость во встроенные промо и возможности кросс-сейла, которые позже расширились до подписочной модели.
Сигналы пользователей
NPS, опросы, встроенные формы быстрого фидбека, динамика отзывов в сторе и дополнительные раунды пользовательского тестирования.
Отток и удержание
Сравнение установок и удалений после редизайна, включая первоначальный всплеск возврата спящих пользователей и последующее восстановление после возобновления кампаний.
Ключевые результаты
Сильный новый продукт
После редизайна Avast Online Security & Privacy 2.0 превратился в сильный самостоятельный продукт и неотъемлемую точку контакта внутри более широкой клиентской экосистемы.
Запуск в едином стиле с флагманом
С новым визуальным обликом, полностью переосмысленным UX и обновлённым фокусом на приватности AOSP стал единственным ребрендированным продуктом, запущенным вместе с флагманским Avast One в новом языке компании.
Рыночное преимущество
Мы получили значимый новый маркетинговый дифференциатор.
Новые точки контакта
Мы добавили контекстные точки контакта до первой покупки, которые дали больше смысла кросс- и апселлу других продуктов.
Простые сценарии
Мы упростили навигацию по всем настройкам приватности, сделав ключевые пользовательские сценарии заметно эффективнее.
Подсказки по приватности в реальном времени
Мы внедрили интерактивную систему Privacy Advisor, которая в реальном времени подсказывала пользователям, что делать на таких платформах, как Facebook, Google, Twitter и других.
Рост осведомлённости
Мы заметно повысили осведомлённость пользователей о вопросах приватности и доступных решениях по сравнению с предыдущей версией.
Отклик стейкхолдеров
Результат был очень хорошо принят стейкхолдерами всех уровней, включая топ-менеджмент.
Личный вывод
Это был по-настоящему увлекательный проект, в котором дизайн играл ведущую роль. Я благодарен за возможность вести столь значимую часть процесса и увидеть, к чему привели наши усилия. Огромное спасибо всем, кто в нём участвовал.
К концу моей работы в компании именно AOSP стал продуктом, к которому я был привязан сильнее всего. После редизайна он начал приносить людям реальную пользу и стал заметно приятнее в использовании — а именно такое сочетание для меня в итоге и важнее всего.
Ещё кейсы
