Проект

GabeStore

Разработали новую айдентику и дизайн интернет-магазина для геймеров GabeStore.
Клиент

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

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

Задача

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

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

Айдентика

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

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

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

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

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

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

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

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

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

Дизайн

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

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

1/
Одна из задач главной страницы — сразу же произвести впечатление, создать вау-эффект. Пользователя встречает эффектная анимация и небольшая пасхалка (логотип следит глазами за курсором мыши). Каталог и форма поиска разворачиваются на весь экран.
Карточка товара сообщает посетителю: отдельная это игра или DLC, цену, сколько осталось до релиза (если это предзаказ), а также оценки критиков. Максимум информации для принятия решения о покупке. Чтобы поддержать социальную составляющую сайта, отдельно выводится оценка пользователей Gabestore.
В старой версии параметры фильтрации занимали полэкрана. Мы их аккуратно спрятали. Теперь весь акцент сделан на карточках продуктов.
Возможность прокачивать свой профиль и демонстрировать результат другим геймерам — это новая механика, которая даёт пользователям дополнительный стимул постоянно возвращаться на сервис.
Мы сохранили идею с различными тематическими подборками, в которых игры сгруппированы по разным принципам. Через них, например, можно предложить пользователям купить игры о мафии в честь годовщины выхода фильма «Крёстный отец» или что-нибудь из хоррорв в преддверии Хэллоуина.
Появился блог, который позволяет заказчику продвигаться средствами контент-маркетинга. Для него мы добавили набор модулей, с помощью которых можно быстро собирать и публиковать статьи. Благодаря журнальной вёрстке и большим отступам в блоге, глаза не устают от чтения.
Адаптив

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

В частности адаптировали ленту комментариев так, чтобы она приятно и удобно читалась и на десктопе, и на мобильном устройстве.

1/
Сложная анимация с десктопа сохраняется и в мобильной версии. Навигация по разделам стала удобнее. Также сделали дополнительный лёгкий доступ к корзине в правом нижнем углу.
В мобильной версии также используется автоматически генерируемый фон.
Каталог стал информативнее. Фильтры — компактнее и удобнее.
Большое нововведение, которое добавляет социальности. Теперь это не просто магазин «пришёл-купил-ушёл». Gabestore — это точка притяжения для геймерского сообщества. У Gabestore активное сообщество, и нужно было сделать общение более комфортным. Комментарии находятся в отдельном блоке. Есть лайки, отображается уровень игрока и видно, кому он отвечает в ветке. Блок структурирован так, чтобы было удобно им пользоваться и с десктопа, и с мобильного.
Карточки товаров теперь занимают большую часть экрана и перетягивают внимание на себя.
Теперь на Gabestore есть блог. На одной площадке можно и покупать игры, и обсуждать их, и следить за новостями индустрии.
Дизайн-система

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

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

1/
Мастер-компоненты для блоков.
Мастер-компоненты для блоков.
Мастер-компоненты для блоков.
Мастер-компоненты для блоков.
Мастер-компоненты для блоков.
Мастер-компоненты для блоков.
Итог

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

Нужен проект?
Оставьте заявку, либо звоните, мы пообщаемся и сами все за вас заполним: +7 385 259 06 30
Ваш бюджет:
Откуда узнали о нас:
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.