Аудит стиля сервиса CS.MONEY

1. Вводная задача от заказчика, проблематика, цели

О клиенте

CS.MONEY — платформа по обмену, продаже, покупке, аукционам предметов из игры Counter-Strike: Global Offensive. Компания номер один на рынке после Steam.

Команда CS.MONEY провела редизайн старого сайта. Она обратилась к нам, чтобы выяснить узкие места в новом дизайне с точки зрения UI: стиля, соответствия бренду. Нам предстояло оценить плюсы и минусы по сравнению со старым дизайном, дать рекомендации по развитию дизайн-системы.

Задачи

• Понять, стал ли новый дизайн лучше по сравнению со старым сайтом.
• Узнать восприятие дизайна аудиторией.
• Определить полноту дизайн-системы.
• Выяснить, соответствует ли новый дизайн тональности бренда и геймерской среде.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Погрузились в проблематику

Провели интервью с продукт-менеджером CS.MONEY, чтобы лучше понять проблематику. Мы прошлись по пользовательским сценариям и узнали о трудностях, с которыми сталкиваются пользователи на новом сайте.

Проверили соответствие геймерской среде

Изучили сайты, мессенджеры, Youtube-каналы, игры, с которыми взаимодействует аудитория. Оценили их с точки зрения стиля: смотрели цветовую палитру, типографику, изображения, иконки, интерфейсные элементы. По итогу погружения собрали первые выводы по соответствию нового дизайна геймерской среде.

Сравнили со старым дизайном

Сравнили старый и новый дизайн сайта по параметрам: цвета, типографика, изображения, иконки, интерфейсные элементы. Мы обратили внимание на контраст элементов, консистентность форм, количество используемых цветов, читабельность текcтов, аккуратность вёрстки, стилевые несоответствия. Описали плюсы и минусы и сформировали рекомендации.

Опросили аудиторию

Запустили вместе с командой CS.MONEY опрос пользователей об их впечатлениях от нового сайта. В опросе участвовали 39 русскоязычных и 92 англоязычных пользователя.

Примеры вопросов из опроса:

• Выглядит ли сайт современно?
• Какие впечатления вызывает сайт?
• Если смотреть только на цвета сайта, можно сказать что он связан с играми?
• Результаты собрали в виде наглядных графиков.
• Фрагмент результата тестирования

Провели 5-секундное тестирование нескольких страниц сайта, чтобы понять восприятие стиля новой аудиторией, не видевшей до этого новый дизайн сайта.

Суть тестирования заключается в том, что пользователю в течение 5 секунд показывают картинку. После этого он должен определить свои ощущения от стиля. Результаты показали в виде графика, на котором видно часто используемые определения.

В итоге мы сформировали объективную карту проблемных мест сайта, а также определили отношение целевой аудитории к новому сайту.

Определили полноту дизайн-системы

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

Также мы провели аудит UI-кита — документа, в котором описаны все элементы дизайн-системы и правила их использования. Оценили руководство с точки зрения удобства создания новых страниц сайта, достаточно ли описаны правила, хватает ли состояний элементов, искали логические нестыковки.

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

Оценили восприятие позиционирования бренда в стиле

Сравнили выводы по проведённым аудитам с позиционированием бренда. Подвели итоги.

Подготовили рекомендации

Мы подготовили развёрнутый анализ дизайн-системы и стиля сервиса, дали рекомендации по их улучшению:

• Отметили лакуны в дизайн-системе, которые не позволяют её применять в некоторых частях пользовательских сценариев.
• Выявили несоответствие стиля образу бренда и тональности, в которой он общается с аудиторией.
• Показали слабые места стиля по сравнению с конкурентами, дали рекомендации по их усилению.
• Выделили недостатки стиля, влияющие на удобство работы с сервисом, составили рекомендации по их устранению.

3. Результаты сотрудничества

Итог нашей работы

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

После завершения аудита мы провели сессию с ответами на вопросы для команды дизайнеров клиента.

Использованные практики

• Экспертная оценка.
• Опрос пользователей.
• 5-секундное тестирование.