Редизайн магазина для геймеров GabeStore

Клиент

Gabestore — один из лидеров российского рынка по продаже видеоигр. Компания сотрудничает с издателями напрямую, как следствие, игры здесь дешевле, чем на других площадках.

Магазин открылся в 2014 году. Сайт и айдентика в последний раз значительно обновлялись в 2016 году и уже не соответствуют новому статусу и амбициям компании. Проект уже перерос границы страны и планирует усилить своё влияние на международном рынке. Также Gabestore из магазина ключей эволюционирует в сервис для геймеров.

Задача

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

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

Решение

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

Айдентика

В логотипе магазина использовался образ Гейба Ньюэлла, гендиректора компании Valve, которой принадлежит сервис Steam. В новом фирменном стиле нужно полностью отказаться от ассоциаций с какими-либо персоналиями.

Из старого фирменного стиля с нужно было унаследовать цвета. Смысловая же часть должна была стать более серьезной.

Но так или иначе, игры — это всё ещё про эмоции. Поэтому фирменный знак должен выражать различные эмоции в зависимости от контекста, как и настоящие геймеры в различных игровых ситуациях.

Мы смотрели на стремительно растущий рынок онлайн-игр и видели, что современный геймер — это геймер с гарнитурой. Именно этот образ и лёг в основу нового знака. Каждый игрок узнает в нём себя. В знаке также легко читается буква G, первая буква названия Gabestore.

Динамичность знака позволяет использовать разные пасхалки и игровые штуки во взаимодействии с ЦА. Он хорошо встал на сайт и стал более читаемым на аватарках разных соцсетей.

Прототипирование

Меняется не просто внешний вид магазина, меняется его суть. Раньше посещение сайта ограничивалось схемой «пришёл → нашёл игру → купил → ушёл». Теперь это место обитания геймерского сообщества.

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

Перед нами стояла задача сделать такой сайт, чтобы пользователям хотелось находиться на нём как можно дольше и возвращаться на него снова и снова. Поэтому совместно с ребятами из Gabestore мы закладывали новые игровые механики, о которых расскажем ниже.

Дизайн

За четыре года, прошедшие с последнего редизайна, аудитория GabeStore выросла. К тому же, по данным социологических исследований, средний возраст геймеров в разных странах Европы, включая Россию, колеблется от 30 до 35 лет. Поэтому мы приняли решение заменить шутливо-мультяшное оформление сайта на что-то более взрослое и солидное: тёмную общую гамму, контрастные сочетания и неон. В итоге попали в зарождающийся (а теперь уже окончательно зародившийся) тренд на тёмные темы.

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

Одна из задач главной страницы — сразу же произвести впечатление, создать вау-эффект. Пользователя встречает эффектная анимация и небольшая пасхалка (логотип следит глазами за курсором мыши). Каталог и форма поиска разворачиваются на весь экран.

Карточка товара сообщает посетителю: отдельная это игра или DLC, цену, сколько осталось до релиза (если это предзаказ), а также оценки критиков. Максимум информации для принятия решения о покупке.

В старой версии параметры фильтрации занимали полэкрана. Мы их аккуратно спрятали. Теперь весь акцент сделан на карточках продуктов.

Возможность прокачивать свой профиль и демонстрировать результат другим геймерам — это новая механика, которая даёт пользователям дополнительный стимул постоянно возвращаться на сервис.

Мы сохранили идею с различными тематическими подборками, в которых игры сгруппированы по разным принципам. Через них, например, можно предложить пользователям купить игры о мафии в честь годовщины выхода фильма «Крёстный отец» или что-нибудь из жанра хоррор в преддверии Хэллоуина.

Появился блог, который позволяет заказчику продвигаться средствами контент-маркетинга. Для него мы добавили набор модулей, с помощью которых можно быстро собирать и публиковать статьи. Благодаря журнальной вёрстке и большим отступам в блоге, глаза не устают от чтения.

Адаптив

За четыре года, прошедшие с последнего редизайна, аудитория GabeStore выросла. К тому же, по данным социологических исследований, средний возраст геймеров в разных странах Европы, включая Россию, колеблется от 30 до 35 лет. Поэтому мы приняли решение заменить шутливо-мультяшное оформление сайта на что-то более взрослое и солидное: тёмную общую гамму, контрастные сочетания и неон. В итоге попали в зарождающийся (а теперь уже окончательно зародившийся) тренд на тёмные темы.

Дизайн-система

Мы использовали оптимизированный подход в сборке макетов. Все повторяющиеся элементы собраны на основе компонентов. Любые изменения в мастер-компоненте распространяются на его экземпляры, что сэкономит время при необходимости внести изменения в дизайн.

Это же касается и системы отступов. Её мы собрали на основе компонентов и инструмента Auto Layout, что позволяет гибко настраивать как отступы между элементами, так и на лету менять расположение блоков. Подробнее про этот подход можно почитать в нашей статье.