Авторизация
Забыли пароль?
Сброс пароля
Вернуться к авторизации
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

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

25 февраля ‘21

Заказчик: CS.MONEY

Исследовали, как аудитория воспринимает новый стиль сервиса и дали рекомендации по развитию UI

Агентство-исполнитель кейса

BeaversBrothers

Делаем удобные, красивые и умные сайты, игры, AR/VR, креативные digital-проекты, видео и интерфейсы сервисов и приложений для крупных компаний.

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-секундное тестирование.

Общие выводы по аудиту.

4. Заключение

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

Агентство-исполнитель кейса

BeaversBrothers

Делаем удобные, красивые и умные сайты, игры, AR/VR, креативные digital-проекты, видео и интерфейсы сервисов и приложений для крупных компаний.