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