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

150 000 ₽ — 200 000 ₽

Анализ конкурентов

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

1,5 месяца

Прототип

Дизайн

Базовая SEO

Копирайтинг

Работа с кодом

Анимация

Вёрстка

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

Мерчандайзинговые услуги

UX/UI, сайт под ключ

Алёна Панюшкина, COO

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

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

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

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

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

• Онлайн-брифинг с заказчиком;
• Конкурентный анализ с 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.

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

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

Мы проработали более 50 разных вариантов логотипа, суть которых была заложена в отражении коммуникации, человеческих отношений, командной работы, движении, скорости, IT-технологиях, где X — как основной символ динамики, развития, процессора, платы.

Но, найти именно то идеальное решение не удавалось. По итогу нескольких дней, концепция логотипа была создана совместными силами — заказчиком и нашей командой из 3-х дизайнеров. В финале получилось 2 варианта:

Оба варианта имеют в основе 2 символа: букву Х — символ компании, команды людей. Два слеша (//) символизирующие технологии, IT, онлайн‑платформу.

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

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

Эту же логику единого механизма мы отразили в блоке «Сильная команда — залог роста вашей прибыли», в котором краткое описание каждого отдела. При наведении мышкой на каждый из кругов, они цепляются друг за друга, отражая совместный подход и взаимодействие разных отделов.

Самый большой вопрос встал в адаптации одного из блоков, помните скриншот телефона с паутиной про собственную IT‑платформу?

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

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

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

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

• Контактные данные с QR-кодом, при наведении камеры смартфона их удобно сохранить, быстрые контакты для связи.
• Вырезанная (прозрачная) буква X как элемент фирменного стиля.

Финально приняли решение сделать визитку с QR-кодом, так как это удобно для клиентов X-merch. Дополнительно разработали шаблон должностной инструкции для сотрудников в фирменном стиле компании.

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

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

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

FFFFFF

F4F2F1

101014

FDE641

1C1D1E

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

Спасибо за просмотр

WebValley Studio

Alexey Gamov

Alena Panyushkina

Alena Panyushkina

Maria Drokina

Anastasia Panchenko

Dmitry Navalov

Tatiana Vilkova