Аудит стиля сервиса CS.MONEY
ЗаказчикCS.MONEY — платформа по обмену, продаже, покупке, аукционам предметов из игры Counter-Strike: Global Offensive. Компания номер один на рынке после Steam.ЗадачаПровести аудит дизайн-системы и UI-сервиса CS.MONEY и подготовить рекомендации по улучшению.
Итог нашей работы
Рекомендации по улучшению дизайн-системы и UI-сервиса, которые позволят усилить стиль в восприятии пользователей и улучшить юзабилити сервиса CS.MONEY.
Использованные практики
- Экспертная оценка.
- Опрос пользователей.
- 5-секундное тестирование.
О клиенте
Команда CS.MONEY провела редизайн старого сайта. Она обратилась к нам, чтобы выяснить узкие места в новом дизайне с точки зрения UI: стиля, соответствия бренду. Нам предстояло оценить плюсы и минусы по сравнению со старым дизайном, дать рекомендации по развитию дизайн-системы.
Задачи
- Понять, стал ли новый дизайн лучше по сравнению со старым сайтом.
- Узнать восприятие дизайна аудиторией.
- Определить полноту дизайн-системы.
- Выяснить, соответствует ли новый дизайн тональности бренда и геймерской среде.
Результат
Клиент получил аудит, результаты тестирования, выводы с описанием плюсов и минусов, а также практические рекомендации по доработке дизайна. После завершения аудита мы провели сессию с ответами на вопросы для команды дизайнеров клиента.
Что мы сделали
Погрузились в проблематику
Провели интервью с продукт-менеджером CS.MONEY, чтобы лучше понять проблематику. Мы прошлись по пользовательским сценариям и узнали о трудностях, с которыми сталкиваются пользователи на новом сайте.
Проверили соответствие геймерской среде
Изучили сайты, мессенджеры, Youtube-каналы, игры, с которыми взаимодействует аудитория. Оценили их с точки зрения стиля: смотрели цветовую палитру, типографику, изображения, иконки, интерфейсные элементы. По итогу погружения собрали первые выводы по соответствию нового дизайна геймерской среде.
Фрагмент аудита на проверку соответствия нового дизайна геймерской среде. Сравнение по цветам со старым сайтом, игрой CS: GO, Steam, Discord, Gog galaxy.
Сравнили со старым дизайном
Сравнили старый и новый дизайн сайта по параметрам: цвета, типографика, изображения, иконки, интерфейсные элементы. Мы обратили внимание на контраст элементов, консистентность форм, количество используемых цветов, читабельность текcтов, аккуратность вёрстки, стилевые несоответствия. Описали плюсы и минусы и сформировали рекомендации.
.png)
Фрагмент сравнения старого и нового дизайна с рекомендациями.
Опросили аудиторию
Запустили вместе с командой CS.MONEY опрос пользователей об их впечатлениях от нового сайта. В опросе участвовали 39 русскоязычных и 92 англоязычных пользователя.
- Примеры вопросов из опроса:
- Выглядит ли сайт современно?
- Какие впечатления вызывает сайт?
- Если смотреть только на цвета сайта, можно сказать что он связан с играми?
Результаты собрали в виде наглядных графиков.
Фрагмент результата тестирования.
Провели 5-секундное тестирование нескольких страниц сайта, чтобы понять восприятие стиля новой аудиторией, не видевшей до этого новый дизайн сайта.
Суть тестирования заключается в том, что пользователю в течение 5 секунд показывают картинку. После этого он должен определить свои ощущения от стиля. Результаты показали в виде графика, на котором видно часто используемые определения.
Мы использовали заранее подготовленный список определений:
В итоге мы сформировали объективную карту проблемных мест сайта, а также определили отношение целевой аудитории к новому сайту.
Определили полноту дизайн-системы
Сравнение с сайтами конкурентов по основным пользовательским сценариям помогло нам выявить слабые места в дизайн-системе сайта. По результатам аналитики мы сформировали рекомендации по улучшению взаимодействия с пользователями с помощью стиля.
Фрагмент сравнения нового интерфейса с сайтами конкурентов.
Также мы провели аудит UI-кита — документа, в котором описаны все элементы дизайн-системы и правила их использования. Оценили руководство с точки зрения удобства создания новых страниц сайта, достаточно ли описаны правила, хватает ли состояний элементов, искали логические нестыковки.
У компании не было отдельного брендбука, поэтому мы также проанализировали документ на предмет создания новых визуалов для коммуникаций в социальных сетях, рекламных баннеров и промоматериалов.
Фрагмент аудита UI-кита.
Оценили восприятие позиционирования бренда в стиле
Сравнили выводы по проведённым аудитам с позиционированием бренда. Подвели итоги.
Подготовили рекомендации
Мы подготовили развёрнутый анализ дизайн-системы и стиля сервиса, дали рекомендации по их улучшению:
- Отметили лакуны в дизайн-системе, которые не позволяют её применять в некоторых частях пользовательских сценариев.
- Выявили несоответствие стиля образу бренда и тональности, в которой он общается с аудиторией.
- Показали слабые места стиля по сравнению с конкурентами, дали рекомендации по их усилению.
- Выделили недостатки стиля, влияющие на удобство работы с сервисом, составили рекомендации по их устранению.
Общие выводы по аудиту.
Полный текст статьи читайте на CMS Magazine
