Главное о кейсе
Антивирусы PRO32 — новый игрок на российском рынке антивирусного ПО, продукт импортозамещения — создан на базе технологий международной компании и адаптирован под нужды российского рынка.
В условиях быстрого вывода продукта взамен ушедшего зарубежного образца были выпущены первые версии программных продуктов, в развитии и совершенствовании которых наша команда принимает участие.
В рамках сотрудничества мы взяли на себя все задачи, связанные с новыми интерфейсами и улучшением пользовательского опыта.
В экстремально короткие сроки (два месяца) разработали дизайн-систему и сделали редизайн для четырех приложений антивирусного ПО.
В процессе работы мы:
— размаппили старые приложения, спроектировали новые карты пользовательского интерфейса на русском и английском языках;
— проработали все ключевые пути пользователей (User Flow), их было более пятидесяти, устранили критичные ошибки на отдельных отрезках флоу;
— разработали новую дизайн-концепцию и собрали дизайн-систему;
— увеличили скорость и продуктивность разработки продуктов;
— наладили процессы работы с интерфейсами внутри команды, в которую входили мы, клиент и разработчик.
_______________________
PRO32 Antiviruses is a new player on the Russian antivirus software market, it is an import substitution product created on the basis of technologies of an international company and adapted to the needs of the Russian market.
The product had to be released quickly to replace the gone foreign alternative. The first versions of software products have already been released and our company is involved in their development and improvement.
As part of our cooperation we undertook all tasks related to new interfaces and user experience improvement.
In an extremely short time (two months), we developed a design system and made redesigns for four antivirus software applications.
In the process we:
— unmapped the old apps, designed new UI maps in Russian and English;
— worked out all key user paths (User Flow), there were more than fifty of them, while eliminating critical errors on separate sections of the flow;
— developed a new design concept and assembled the design system;
— increased the speed and productivity of product development;
— established a working process for interface development within the team, which consisted of our company, the client and the developer.
Как проект изменил жизнь пользователей
Пользователям, особенно корпоративным клиентам, как никогда важна гибкость и скорость реализации их требований в новых версиях программных продуктов. Постоянный сбор обратной связи по продукту позволяет слушать и слышать потребности рынка и пополнять бэклог продукта актуальными потребностями пользователей.
В последнем релизе мы закрыли одну из ключевых болей потребителя — удобный и современный дизайн.
За счет визуальной консистентности интерфейсов считывать информацию и навигироваться стало гораздо комфортнее и быстрее.
Разработана удобная система уведомлений, цветовое кодирование алертов позволяет быстро различать тип критичности уведомления, чтобы правильно назначить приоритет решения возникшей проблемы.
Особое внимание мы уделили настройкам программы и навигации, пользователи отмечают, что в новом дизайне все функции и действия, которые можно совершить в рамках настройки ПО, лучше подсвечены и интуитивно понятен принцип их работы.
Мы продолжаем работы над сбором статистики и улучшением интерфейсов.
_______________________
Users, especially corporate clients, are more than ever interested in flexibility and speed of implementing their requirements to the new versions of software products. Continuous collection of the feedback allows us to discover the market needs and to form the product backlog according to the actual user needs.
In the latest release we have resolved one of the key consumer pain points by introducing a convenient and modern design.
Due to the visual consistency of interfaces, reading information and navigating has become much more comfortable and fast.
We have developed a convenient system of notifications. Color coding of alerts allows one to quickly distinguish the type of criticality of a notification in order to correctly assign the priority of solving the problem.
We paid special attention to the program settings and navigation, users note that in the new design all functions and actions that can be performed within the software settings are better highlighted and the principle of their operation is intuitive.
We continue to work on collecting statistics and improving interfaces.
Бизнес-задача и ее решение
На старте сотрудничества задачей бизнеса было максимально быстро обновить UI-дизайн всех продуктов. Дизайн продуктов был устаревшим и никак не ассоциировался с брендом и айдентикой компании.
Вторым этапом была нужна более детальная проработка UX и вместе с командой бизнеса системное развитие продуктов, включая создание дизайн-системы.
Работать предстояло над четырьмя приложениями, реализованными на разных языках (английском и русском), для разных операционных систем и различающейся целевой аудиторией:
— Mobile Security (Android) — для защиты мобильных устройств частных клиентов;
— Total Security (Windows) — для защиты ПК и ноутбуков частных клиентов;
— Ultimate Security (Windows) — комплексная защита стационарных и мобильных устройств частных клиентов;
— Endpoint Security (Windows, Linux) — антивирус для предприятий и корпоративных сетей.
Основным ограничением для нас стали сроки предполагаемых релизов ПО, возможности платформы и наших новых коллег — программистов из Индии. Любое инициированное нами изменение алгоритма работы приложения увеличивало нагрузку на программистов и, как следствие, могло привести к срыву сроков релизов. Действовать приходилось с хирургической аккуратностью.
Отказавшись от глубинных UX-исследований, мы провели ряд аналитических работ, которых было достаточно, чтобы устранить критичные ошибки в интерфейсах:
— провели бенчмаркинг и экспертный аудит приложений;
— протестировали все ключевые пути пользователей и спроектировали новый flow.
При создании нового дизайна решили использовать методологию атомарного дизайна. При таком подходе мы рассматриваем дизайн как систему, которая состоит из строительных блоков — атомов. Атомы можно использовать повторно и комбинировать друг с другом, — в разработке такой подход называют компонентным, он ускоряет время работы по дизайну и его дальнейшего внедрения. В итоге мы получили:
— дизайн-систему, которая стала фундаментом для разработки и дальнейшего масштабирования приложений;
— дизайн-макеты всех приложений;
— возможность быстрого внесения правок в дизайн.
_______________________
At the start of our cooperation the business task was to update the UI-design of all products as quickly as possible. The design of the products was outdated and in no way associated with the company's brand and identity.
The second stage required more detailed UX elaboration and systematic development of products together with the business team, including creation of a design system.
We had to work on four applications implemented in different languages (English and Russian), for different operating systems and different target audiences:
- Mobile Security (Android) to protect private clients’ mobile devices;
- Total Security (Windows) to protect private clients’ PCs and laptops;
- Ultimate Security (Windows) for comprehensive protection of desktop and mobile devices of private clients;
- Endpoint Security (Windows, Linux) - antivirus for enterprises and corporate networks.
The main challenges for us were the deadlines of the anticipated software releases, the capabilities of the platform and our new colleagues, software programmers from India. Any change in the application algorithm initiated by us increased the workload on the programmers, and as a consequence could lead to the failure of release dates. We had to act with surgical precision.
Giving up our usual in-depth UX research, we performed a number of analytical works, which were enough to eliminate critical errors in interfaces:
— conducted benchmarking and expert application audits;
— tested all key user paths and designed a new flow.
When creating the new design, we decided to use atomic design methodology. With this approach, we view design as a system that consists of building blocks - atoms. Atoms can be reused and combined with each other. In development this approach is known as component-based, it decreases the time of work on the design and speeds up its further implementation. As a result, we got:
— the design system that became the foundation for the development and further scaling of applications;
— design layouts of all applications;
— the ability to make quick revisions to the design.
Крафт (мастерство), реализация, технические детали
Маппинг
На старте работ у нас не было старых дизайн-макетов или документации по проекту, которые мы могли бы использовать для маппинга каждого из приложений и более быстрого погружения в детали проекта, поэтому ключевую роль исследователя взял на себя наш тимлид.
Вооружившись дистрибутивами для скачиваний ПО и лицензионными ключами с разными тарифными планами, предоставленными клиентом, приступили к знакомству с продуктом.
Проходили все сценарии по несколько раз, чтобы изучить вариативность отклика системы на пользовательские действия.
Приходилось даже имитировать хакерскую атаку и запускать вирусы, чтобы посмотреть, как ПО реагирует на такие действия.
Локализация интерфейсов
Для каждого приложения мы делали локализацию интерфейсов с русского на английский, а для некоторых ПО — наоборот, с английского на русский. Это оказалась задача со звездочкой, так как весь контент построен на довольно большом количестве технических и специализированных терминов, которые можно некорректно перевести, не понимая контекста, плюс переводить нужно было сразу в макетах, один и тот же заголовок мог повторяться десятки раз на разных экранах, — не все переводчики брались за такую задачу.
Первая итерация машинного перевода породила десятки шуток в рабочем чате проекта, некоторый перевод был неожиданным и очень смешным. Было понятно, что этот метод не ускорит перевод, а только увеличит риски допуска ошибок.
Для решения задачи мы привлекли переводчика с опытом работы с техническими текстами и совместно с клиентом проводили по две серии ревью финальных макетов внутри команды.
Дизайн
К моменту разработки дизайн-концепции мы уже хорошо понимали, каким должен быть новый стиль приложений. Имея за плечами внушительный опыт в сервисном дизайн, пропустили этап мудборда и сразу сделали анимированное промо нового дизайна. Концепция была принята с первого раза.
Мы сделали дизайн легко поддерживаемым, современным и простым. Вынесли функцию и контент на первое место, убрали весь цветной и фактурный бэкграунд, использовали корпоративные цвета только для ховеров и уведомлений.
Новый дизайн удачно интегрировался во всю линейку продуктов компании и отлично подчеркивает преемственность бренда.
_______________________
Mapping
At the start we had neither old design mockups nor project documentation that we could use for mapping each of the applications and that would help us dive into the project details faster, so our team lead took the key role of researcher.
Armed with the software download distributions and license keys with different pricing plans provided by the client, we started to familiarize ourselves with the product.
We went through all the scenarios several times to study the variability of the system response to user actions.
We even had to simulate a hacker attack and run viruses to see how the software reacted to such actions.
Interface localization
For each application we localized interfaces from Russian to English, and for some software, on the contrary, from English to Russian. It turned out to be an extra-challenging task, as all the content is based on quite a lot of technical and specialized terms, which can be incorrectly translated without understanding the context. Also the translation had to be performed in layouts right away, the same title could be repeated dozens of times on different screens, not all translators would take on such a task.
The first iteration of machine translation generated dozens of jokes in the project's chat room, some of the translations were very unexpected and funny. It was clear that this method would not speed up translation, but would only increase the risk of errors.
To solve the problem, we engaged a translator with experience in working with technical texts and together with the client conducted two series of reviews of the final layouts.
Design
By the time we developed the design concept, we already had a good understanding of what the new style of the app should be. Having an impressive experience in service design, we skipped the moodboard stage and immediately made an animated promo of the new design. The concept was accepted at once.
We made the design easy to maintain, modern and simple. We brought the function and content to the forefront, removed all color and textured backgrounds, and used corporate colors only for hover and notifications.
The new design has been successfully integrated into the entire product line of the company and it perfectly emphasizes the continuity of the brand.
Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком
В процессе обновления интерфейсов участвовали 3 команды: Everest, PRO32 (Россия) и K7 (Индия).
Взаимодействие было построено как в продуктовой команде: единая команда, конкретная измеримая бизнес-цель, гибкость процессов, ежедневные дейли, недельные статус-репорты и месячное планирование.
Заказчик был вовлечен в проект на 100% и быстро давал обратную связь, контролировал общие дедлайны проекта.
Из-за обоюдных языковых и процессных барьеров возникла задача оптимизировать процесс совместной работы и свести к минимуму непонимание и разночтение информации со стороны всех участников. Для этого мы создали понятную для всей команды структуру рабочего пространства в Фигме, обговорили правила, маркировки и статусы работ, сделали паспорт проекта, где велась вся документация, артефакты работ, протоколы встреч и ключевые договоренности.
Специально для наших коллег-разработчиков писали инструкции и комментарии на английском языке, каждый раздел приложения и сценарии внутри него выводили в отдельный фрейм, в котором новые русскоязычные макеты со связями раскладывали вместе со старыми на английском и русском языках. Это помогало не терять логику и порядок макетов из-за языкового барьера разработчика и легко ориентироваться в большом массиве информации.
_______________________
3 teams participated in the process of updating the interfaces: Everest, PRO32 (Russia) and K7 (India).
Interaction was built after the pattern accepted in product teams: unified team, specific measurable business goals, flexible processes, daily performance discussions, weekly status reports and monthly planning sessions.
The customer was 100% involved in the project and was quick to give feedback and control the overall project deadlines.
Due to language and process barriers, the challenge was to optimize the collaboration process and minimize misunderstandings and misinterpretation of information by all participants. For this purpose, we created a clear structure of the workspace in Figma for the whole team, agreed on rules, labels and work statuses, and composed a project passport, where all documentation, work artifacts, minutes of meetings and key agreements were kept.
Specifically for our developer colleagues we wrote instructions and comments in English, each section of the application and scenarios within it were displayed in a separate frame, in which new Russian-language layouts with links were laid out side by side with the old ones. This helped not to lose the logic and order of layouts due to the developer's language barrier and to easily navigate through a large amount of information.
Текущая доступность работы
Доступно для покупки и скачивания на сайте компании
Скриншоты