WebValley Studio

бюджет:

X-merch: сайт и брендирование мерчандайзинговой IT-компании

150 000 ₽ — 200 000 ₽

Сроки:

решения:

Анализ конкурентов
Информационная архитектура
1,5 месяца
Прототип
Дизайн
Базовая SEO
Копирайтинг
Работа с кодом
Анимация
Вёрстка

О проекте

X‑merch — мерчандайзинговое агентство с собственной IT‑платформой мониторинга, аналитики и контроля команды. Компания оказывает мерчандайзинговые услуги для среднего и крупного бизнеса в ритейл, среди партнёров крупнейшие сети, такие как Лента, Ашан, X5‑Retailgroup и другие. Команда WebValley выполнила работы по дизайну и разработке сайта, а также по созданию фирменного стиля, отражающего концепцию IT-стартапа.

Клиент:

Мерчандайзинговые услуги
UX/UI, сайт под ключ

Результат:

Алёна Панюшкина, COO
«Оперативность заказа была сверхнеобычной — заказчик пришел словно из ниоткуда, сам позвонил, сам заполнил бриф, не спрашивая о цене запросил договор. Так быстро мы еще никогда не заключали договора — буквально всё за один день: бриф, договор, счет, оплата и поехали. Никаких изменений по предложенной сумме, предварительной структуре проекта, документам, решили сотрудничество будет просто пушка. Единственный момент, который смущал — сроки».

Лендинг

Тип:

Задача

Необходимо было сделать:

  • Брендированную промо-презентацию для отправки и демонстрации потенциальным клиентам компании;
  • Лендинг на чистом коде с полной разработкой — аналитика, исследования, прототип, дизайн, верстка, анимация (именно здесь и произошла трагедия, но об этом позже);
  • Разработка логотипа с презентацией фирменного стиля;
  • Копирайтинг и упаковка смыслов как на сайт, так и в презентацию;
  • Дизайн визитки с QR-кодом под печать.

Перед нами стояло колоссальное количество задач и чуть больше месяца на реализацию.

Видео-презентация

01 / Исследование и аналитика

Сформировали, составили, провели:

  • Онлайн-брифинг с заказчиком;
  • Конкурентный анализ с 4 листами Excel и разбором конкурентов более чем по 100 параметрам, а также документ на 13 листов А4 с выводами и рекомендациями по исследованию;
  • Сбор ассоциаций компании для проработки брендинга;
  • Проработку информационной архитектуры с рекомендациями будущего расширения проекта из лендинга в корпоративный сайт компании;
  • Визуальное исследование и мудборд для установки «уровня» дизайна и согласования стиля, референсов, примеров и прочего;
  • Техническое задание на копирайтинг со сбором смыслов;
  • Техническое задание на разработку сайта с учетом рекомендаций и исследований.

Сроки выполнения на данный объем работ — 7 рабочих дней!

Брифинг

Наверное, вы спросите, зачем, ведь заказчик заполнял брифы изначально до сотрудничества? Да, так и есть, но бриф — это форма, в которой люди всегда пишут кратко, а значит информация сжата, не раскрыта и ее недостаточно. Мы не практикуем бриф как заполнение формы или документа, а предпочитаем живое общение между заказчиком и руководителем проекта (РП) в скайпе. Так команда максимально погружается в нишу и деятельность (даже у одинаковых продуктов в разных компаниях свои алгоритмы продажи и маркетинговая стратегия).

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

Конкурентный анализ с выводами

сайт мерчандайзингового агентства
РП, UX-дизайнер и SEO-специалист — конкурентный анализ на 5 компаний. В результате была выстроена детальная структура продающего лендинга с учётом всех болей потребителей и удачных маркетинговых решений других мерчандайзинговых компаний.
С точки зрения упаковки, конкуренты выделялись позиционированием. У некоторых компаний есть точная формулировка позиционирования или миссии команды на рынке. Например, слоган компании «Open» — «Становимся неотъемлемой частью ДНК клиента».
Упаковка
Анализ конкурентов помог не только построить «тонко‑ориентированную» структуру, но и найти 3 отличительные особенности:
лендинг мерчандайзингового агентства
Скриншот сайта компании «Open», приведён в информационных целях, как один из анализируемых конкурентов.
В мерчандайзинге есть несколько видов предоставления услуги. На любом проекте от лендинга до мега-портала существенное значение имеет навигация и объём предоставляемой информации. Непроработанная навигация ведёт к потере трафика, так же как и лишний длинный текст. Мы выделили несколько интересных дополнительных решений у конкурентов с комфортной навигацией и сокращением переходов, все они выполнены в формате табов (переключаемых вкладок / секций контента на сайте):
Навигация
Мы выстроили следующее позиционирование компании: «X-merch — эффективное маркетинговое IT‑агентство. Объединяем технологии и опыт, освобождаем ваше время по всей России». Получилось несколько длиннее, но полностью клиентоориентированно, и отражает реальные возможности и процессы компании.
лендинг мерчандайзинговой компании
лендинг мерчендайзингового гентства
В нашем случае это был бы излишек информации на лендинге, даже с табами, отвлекающий от главной конверсионной цели. Вопросы формата предоставления услуги, видов и подвидов и так далее было бы слишком громоздко описывать на одностраничном сайте, это уже вопрос корпоративного веб-ресурса и менеджеров. Поэтому, согласовав с заказчиком, мы ограничились кратким и точным описанием данных видов услуг, без нагромождения переключений и лишней информации, при этом сохранив весь смысл:
сайт мерчендайзингового агентства
Наше решение по сокращению разделов и упрощению навигации на сайте мерчандайзинговой компании
У большинства конкурентов на обложке посадочной страницы используется видео или интересная анимация. Это привлекает внимание, поэтому мы не стали идти против подобных решений. Важно не перегнуть с количеством этой анимации, чтобы человек не «устал от кинофильма» на первом экране. Реализовали минималистичную точечную анимацию, которая при открытии сайта фокусирует взгляд на бренде и сути предложения.
Вовлечение на первом экране

Информационная архитектура сайта

Благодаря проведенному анализу подготовили структуру будущего сайта с перспективой на год‑полтора, чтобы заказчик мог превратить просто лендинг в корпоративный сайт мерчандайзингового агентства и, в перспективе, продвинуться по SEO в ТОП-10 по основным запросам.
сайты мерчандайзингового агентства

Визуальный анализ и стайлборд

сайт мерчандайзинговой фирмы
На основе исследований мы уже понимали какой будет сайт по функциональности и структуре, но оставался вопрос, а какой дизайн? Поэтому, мы начали искать решения по UI-дизайну среди IT компаний и мерчандайзеров, чтобы согласовать будущую стилистику и совместить услугу мерчандайзинга с позицией IT‑платформы.
По завершении, мы составили стайл борд с предполагаемой стилистикой и концепцией по оформлению — шрифтовые пары, сетка, разные блоки: медиа, видео, анимации и прочие.

Сбор ассоциаций по логотипу и бренду

сайт мерчендайзинговой фирмы
Итогом был mind-map с более чем 100 ассоциаций и смыслов разного уровня. Из которых мы выделили 4 ключевых:

1. Космос, схема, круги, комета, орбита и подобное — смыслы будут заложены в географии компании, новых технологиях, дружелюбии.

2. Энергия, молния, атом, молекула, ДНК, организм и подобное — здесь будет отражение подхода к партнерам: команда X-merch внедряется в компанию партнёра как личный сотрудник, а не просто подрядчик. Также, эти объекты отражают постоянную эволюцию в сфере мерчандайзинга, стойкость и стабильность.

3. Сеть, связь, паутина, плата и подобное — здесь идет отражение технологичности IT‑компании, что команда находится в постоянном тренде развития именно в инновационной сфере.

4. Разработать шрифтовой логотип с интересными решениями по гарнитуре и добавить 1 элемент, например, молнию.
На основе проведенного конкурентного анализа, мы поняли, что требуется минималистичный логотип, без эмблемы, но с дополнительной одной изюминкой, которая бы отражалась во всём фирменном стиле бренда X-merch.
мерчандайзинговая компания x merch
сайт мерчандайзинга

02 / UX‑проектирование сайта и прототип

UX-команда проработала несколько вариантов блоков лендинга, начиная с чернового прототипа и усовершенствуя его до финальной версии с обязательным требуемым функционалом проекта:

  • Меню должно фиксироваться по мере прокрутки по всему лендингу;
  • Карта с точками регионов, при наведении на точку отображается количество партнеров компании X-merch и город, где они находятся;
  • Схема с алгоритмом работы собственной IT-платформы для мониторинга и управления между заказчиком и сотрудниками компании X-merch;
  • Раскрывающийся блок с ответами на вопросы;
  • UX-kit функциональных элементов макета.

03 /
Скетчинг и дизайн логотипа

Мы проработали более 50 разных вариантов логотипа, суть которых была заложена в отражении коммуникации, человеческих отношений, командной работы, движении, скорости, IT-технологиях, где X — как основной символ динамики, развития, процессора, платы.
Но, найти именно то идеальное решение не удавалось. По итогу нескольких дней, концепция логотипа была создана совместными силами — заказчиком и нашей командой из 3-х дизайнеров. В финале получилось 2 варианта:
Оба варианта имеют в основе 2 символа: букву Х — символ компании, команды людей. Два слеша (//) символизирующие технологии, IT, онлайн‑платформу.

Мы остановились на совмещении варианта // и Х. Также добавили круг, как дополнительный элемент фирменного стиля, который отражал динамичность бренда и отражался на всем сайте, начиная с обложки, заканчивая географией партнеров.
логотип мерчандайзинговой компании
x merch

04 / Дизайн сайта

Круг в качестве элемента фирменного стиля был обыгран начиная с обложки. Наш UI‑дизайнер придумал динамичную анимацию, которая поддерживает позиционирование компании: постоянное развитие, формирующее единую систему. Точки появлялись на экране с разных ракурсов и собирались в одну, которая формировалась внутри логотипа бренда. Согласитесь круто?
лендинг мерчандайзингового агентства it
Эту же логику единого механизма мы отразили в блоке «Сильная команда — залог роста вашей прибыли», в котором краткое описание каждого отдела. При наведении мышкой на каждый из кругов, они цепляются друг за друга, отражая совместный подход и взаимодействие разных отделов.
Самый большой вопрос встал в адаптации одного из блоков, помните скриншот телефона с паутиной про собственную IT‑платформу?
лендинг маркетингового агентства
Так вот, убирать скрин категорически нельзя в адаптационных версиях, потому что это важная демонстрация функционала и преимущество данной компании в мерчандайзинге, как IT‑платформы. Но в десктопном формате он совершенно не ложился в дизайн и занимал слишком много места. Поэтому, было принято решение его заменить.
лендинг маркетинговой фирмы

Главная страница

мерчандайзинговое агентство сайт создать
сайт мерчандайзингового агентства создать
сайты мерчандайзингового агентства создать
мерчандайзингового агентства официальный сайт создать
сайт мерчандайзингового агентства создать
сайты мерчандайзинговых агентств создать
мерчандайзинговое агентства сайт создать
мерчендайзинговое агентства сайт создать
мерчендайзингового агентства сайт создать
мерчендайзинговое агентства сайт создать
мерчандайзинговой фирмы сайт создать
мерчандайзинговой компании сайт создать

Адаптационные версии

мобильная версия сайта мерчандайзингового агентства
адаптив сайта мерчандайзингового агентства
адаптация сайта мерчандайзингового агентства

05 / Разработка

Данный проект был создан на чистом коде с элементами svg‑анимации. Это был первый сайт, который разработан и передан заказчику архивом без настройки, установки на хостинг, подключения домена и прочего.
лендинг мерчандайзингового агентства на заказ

06 / Фирменный стиль

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

Разработка визитки

визитка мерчандайзинговой фирмы
Совместно с нашим заказчиком было создано несколько решений:

  • Контактные данные с QR-кодом, при наведении камеры смартфона их удобно сохранить, быстрые контакты для связи.
  • Вырезанная (прозрачная) буква X как элемент фирменного стиля.
Финально приняли решение сделать визитку с QR-кодом, так как это удобно для клиентов X-merch. Дополнительно разработали шаблон должностной инструкции для сотрудников в фирменном стиле компании.
бланк мерчандайзингового агентства
В диалоге с заказчиком не раз слышали, что компания планирует выпускать брендированную одежду для сотрудников. Поэтому в качестве бонуса мы разработали вариант оформления формы (толстовки, футболки, майки).
мёрч мерчандайзингового агентства

Презентация для партнеров компании

Скелет презентации был получен напрямую от заказчика. Исходя из полученной информации мы поняли, что требуется разработка 3Д-модели магазина и именно этот слайд напрягал больше всех, так как на нём было вообще непонятно что к чему. Возникла идея видоизменить его и сделать более удобным в визуальном восприятии:
По итогу для отражения IT-решений, коммуникации и взаимодействия всех участников процесса мерчандайзинга было сформировано несколько решений, которые сопровождали и сайт, и презентацию:
сайт маркетинговой it компании
Left
Right

Типографика

шрифт Muller кириллица
Muller
шрифт Muller
FFFFFF
F4F2F1
101014

Цвет

FDE641
1C1D1E
Нам очень важно ваше мнение

Оцените кейс

Как вам наша работа?
Посмотрите все возможности
Посмотрите все возможности
Заказать
похожий проект
Заказать
похожий проект
Предыдущий кейс
Предыдущий кейс
Следующий кейс
Следующий кейс
Спасибо за просмотр

Design studio

Graphic design

Programmer

WebValley Studio
Maria Drokina
Alena Panyushkina
Dmitry Navalov
Anastasia Panchenko
Tatyana Vilkova

Designer

ПОНРАВИЛСЯ ПРОЕКТ?
Расскажите о нас в соцсетях :)