Привет! Мы в Everest разрабатываем сервисы, личные кабинеты, порталы и другие внутренние и внешние веб-сервисы с фокусом на UX (пользовательский опыт). В кейсе поделимся своим опытом работы над интерфейсами программного обеспечения для PRO32. Компания разрабатывает современные IT-решения. Среди её продуктов — антивирусы для дома и офиса, программа для удалённого управления компьютерами и приложение для защиты личных данных на смартфонах. Нам предстояло обновить дизайн антивирусного программного обеспечения и улучшить пользовательский опыт при взаимодействии с интерфейсами. На момент обращения у проекта были следующие проблемы:
Интерфейсы не соответствовали современным стандартам и не отражали стиль компании.
Пользователям было сложно ориентироваться в ПО: они не могли быстро находить нужные функции.
Не было старых дизайн-макетов и документации, что стопорило процесс обновления и развития ресурса.
Работа над проектом
Сроки были экстремальными (два месяца), так как клиенту было важно оперативно вывести продукт на российский рынок взамен ушедшего зарубежного образца.
Работу поделили на два этапа:
Максимально быстро обновить UI-дизайн всех продуктов.
Детально проработать UX и вместе с командой бизнеса системно развить продукты, включая создание дизайн-системы.
Работать предстояло над четырьмя приложениями, реализованными на разных языках (английском и русском), для разных операционных систем и различающейся целевой аудитории.
Mobile Security | Android | Защита мобильных устройств |
Total Security | Windows | Защита ПК и ноутбуков |
Ultimate Security | Windows | Комплексная защита стационарных и мобильных устройств |
Endpoint Security | Windows, Linux | Антивирус для предприятий и корпоративных сетей |
Основным ограничением для нас стали сроки предполагаемых релизов ПО, возможности платформы и наших новых коллег — программистов из Индии.
Любое инициированное нами изменение алгоритма работы приложения увеличивало нагрузку на программистов и, как следствие, могло привести к срыву сроков релизов. Действовать приходилось с хирургической точностью.
Ниже расскажем о наиболее интересных этапах в работе над проектом.
Маппинг
Мы отказались от глубинных UX-исследований, но провели ряд аналитических работ, которых было достаточно, чтобы устранить критичные ошибки в интерфейсах:
сделали бенчмаркинг и экспертный аудит приложений;
протестировали все ключевые пути пользователей и спроектировали новый flow.
У нас не было старых дизайн-макетов или документации по проекту, которые можно было использовать для быстрого погружения в проект и маппинга каждого из приложений. Поэтому вооружившись дистрибутивами для скачиваний ПО и лицензионными ключами с разными тарифными планами, которые предоставил клиент, приступили к знакомству с продуктом.
Все сценарии проходили по несколько раз, чтобы изучить вариативность отклика системы на пользовательские действия. Приходилось даже имитировать хакерскую атаку и запускать вирусы, чтобы посмотреть, как ПО реагирует на такие действия.
Локализация интерфейсов
Для каждого приложения делали локализацию интерфейсов с русского на английский, а для некоторых ПО — наоборот, с английского на русский.
Сначала работа строилась таким образом, что иностранные разработчики клиента забирали у нас дизайн-макеты и верстали их на русском языке, потом на английском с помощью автоматического перевода. При этом возникали ошибки в интерфейсах. Например, некоторые блоки и кнопки могли отличаться по размеру из-за разной длины текстов, появлялись неправильные отступы между элементами (слишком большие или слишком маленькие).
Весь контент построен на довольно большом количестве технических и специализированных терминов, которые можно некорректно перевести, если не понимать контекст. Переводить нужно было сразу в макетах, один и тот же заголовок мог повторяться десятки раз на разных экранах. Не все переводчики брались за такую задачу.
Первая итерация машинного перевода породила десятки шуток в рабочем чате проекта, некоторый перевод был очень неожиданным и смешным. Стало понятно, что этот метод не ускорит перевод, а только увеличит риски допуска ошибок.
Для решения задачи привлекли переводчика с опытом работы с техническими текстами и совместно с клиентом проводили по две серии ревью финальных макетов внутри команды.
Дизайн
При создании нового дизайна использовали методологию атомарного дизайна. При таком подходе дизайн рассматривается как система, которая состоит из строительных блоков — атомов. Атомы можно использовать повторно и комбинировать друг с другом. В разработке такой подход называют компонентным. Он ускоряет время работы по дизайну и его дальнейшему внедрению.
В результате получили:
дизайн-систему, которая стала фундаментом для разработки и дальнейшего масштабирования приложений;
дизайн-макеты всех приложений;
возможность быстрого внесения правок в дизайн.
К моменту разработки дизайн-концепции мы уже хорошо понимали, каким должен быть новый стиль приложений. Имея за плечами внушительный опыт в сервисном дизайне, пропустили этап мудборда и сразу сделали анимированное промо. Концепция была принята с первого раза.
Интерфейсы сделали современными, простыми и лёгкими в управлении, чтобы в дальнейшем было проще развивать ПО. Вынесли функцию и контент на первое место, убрали весь цветной и фактурный бэкграунд. Использовали корпоративные цвета только для ховеров и уведомлений.
Взаимодействие между командами
В процессе обновления интерфейсов участвовали три команды: Everest, PRO32 (Россия) и K7 (Индия).
Взаимодействие было построено как в продуктовой команде: единая команда, конкретная измеримая бизнес-цель, гибкость процессов, ежедневные дейли, недельные статус-репорты и месячное планирование.
Из-за языковых и процессных барьеров возникла необходимость оптимизировать процесс совместной работы и свести к минимуму непонимание и разночтение информации со стороны всех участников. Для этого создали понятную всей команде структуру рабочего пространства в Фигме, обговорили правила, маркировки и статусы работ.
Сделали паспорт проекта, где велась вся документация, артефакты работ, протоколы встреч и ключевые договорённости.
Специально для наших коллег-разработчиков писали инструкции и комментарии на английском языке, каждый раздел приложения и сценарии внутри него выводили в отдельный фрейм, в котором новые русскоязычные макеты со связями раскладывали вместе со старыми на английском и русском языках. Это помогало не терять логику и порядок макетов из-за языкового барьера и легко ориентироваться в большом массиве информации.
Результат
Закрыли одну из ключевых болей клиентов PRO32 — сделали удобный и современный дизайн антивирусного ПО.
Улучшенная навигация и проработанная структура интерфейсов позволяют пользователям быстрее находить нужные функции.
За счёт визуальной консистентности стало легче считывать информацию и ориентироваться в интерфейсах.
Разработанная система уведомлений с цветовым кодированием сообщений помогает пользователям правильно расставлять приоритеты при решении возникших проблем.
Пользователи отмечают, что в новом дизайне все функции и действия, которые можно совершить в рамках настройки ПО, лучше подсвечены и интуитивно понятен принцип их работы.
