Простой сайт для сложного бизнеса: интернет-магазин Forte

ЗаказчикМагазин музыкальных инструментов ForteЗадачаРазработка сайта для магазина музыкальных инструментов

О клиенте

Когда бизнес сложный, дорогой и узконаправленнный, особенно важно обзавестись максимально удобным и безопасным сайтом. Так вы не упустите ни одного посетителя. 

d666dd22c90e0892f7608f9611ef9699.png

Наш заказчик — производитель ударных музыкальных инструментов Forte. Средний чек в магазине составляет 250 000 — 300 000 рублей. Forte — один из немногих производителей, который реализует на рынок ксилофоны. 

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

Анализ ниши

Среди сегментов ЦА — как оптовые, так и розничные покупатели. Музыкальные инструменты могут понадобиться культурным заведениям, театрам, государственным учреждениям, отдельным музыкальным группам и компаниям. Для всех сегментов ЦА характерна общая потребность — найти подходящий по характеристикам инструмент, проверить его работу и оформить заказ.

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

Вторая цель — убедить пользователя приобрести товар именно в магазине бренда Forte. Единственная возможность это сделать — это показать опыт других покупателей. 

4cc4f789a5893d64aeb21b1affdade5d.png

ba15c53a211639a77a64a898f1c7b1ec.png

Для этого мы собрали все возможные фотографии, отчеты, отзывы, новости и статьи о сотрудничестве бренда Forte с разными сегментами аудитории: от музыкальных коллективов до государственных культурных учреждений. 

2a26a2ea44c9502bd9425fa17f5b9e5d.png

Задача — отсортировать собранный материал по группам и помесить в разные заметные части сайта. 

Готовим графические опоры сайта

Идея бренда очень простая. Компания Forte обладает широким товарным рядом сложных товаров по высокой стоимости. Любой заинтересованный сегмент аудитории найдет необходимый инструмент в каталоге магазина. Сайт должен отражать все возможности компании таким образом, чтобы не запутать пользователей, а логично подвести каждого посетителя к оформлению покупки.

Поскольку товар специфичный, не стоит делать сайт визуально перенасыщенным. Мы выбрали два основным оттенка: белый и бордовый. Задача цветов — визуально отделить друг от друга нужные блоки и разделы. За счет этого мы решим две основные задачи сайта:

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

Чтобы ничего не отвлекало пользователя от изучения товаров и оформления покупки, мы использовали простые шрифты без засечек. 

Собрали требования к сайту с учетом пожеланий клиента

4c7d07c43e2d4de8695f20c980dd9c77.png

Структура сайта

Мы подготовили список требований к сайту, основываясь на пожеланиях Заказчика и общепринятых требованиях к дизайну и разработке:

  • Интуитивно понятная навигация по сайту. Основные разделы, которые всегда должны быть на виду — это каталог и фотоотчеты с покупателями. Чтобы каталог всегда был заметен, мы поместили его прямиком в хедер.
  • Сайт должен быть информативным. Все сведения о компании должны регулярно обновляться. Мы заранее подготовили тексты о работе магазина, собрали отзывы и наполнили новостной раздел.
  • Наличие контактов. Настроенная связь с представителями бренда Forte. 
  • Адаптивность сайта под разные разрешения экранов.

Важно поместить весь контент таким образом, чтобы сайт не выглядел перегруженным. Каждый коммерческий блок, текст или фотография должны быть на своем месте — все должно работать на «прогрев» пользователя и быстрое ведение к оформлению заказа.

Как мы разрабатывали проект: секреты и особенности

Краткий список работ

  1. Мы приступили к работе с обновления фирменной символики сайта. Подготовили прототип с отображением разделов и страниц сайта. Настроили меню и навигацию по лендингу.
  2. Подготовили лендинг на основе готового решения.
  3. Настроили автоопределение года, чтобы контент оставался актуальным.
  4. Включили адаптацию под город. Настроили автоопределение города посетителя, чтобы пользователь мог увидеть информацию по своему региону.
  5. Подготовили и настроили модуль замены контактных данных и заголовков страницы, чтобы информация отображалась в зависимости от города, региона и времени.
  6. Установили лендинг на тестовый сервер, а позже на CMS. 

Готовим структуру сайта

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

Сделали понятную главную страницу:

8e84a46a0e8f6a7b3ec95f73eb390dc5.png

Подготовили каталог товаров на сайте. Намеренно сделали его максимально простым — только изображение товара и подпись. Так пользователь быстрее сориентируется в поиске необходимого раздела. 

84e1e9d664abbf6e4c939edb96dcbf5f.png

Карточку товара визуально поделили на три части: изображение и название модели товара, блок с характеристиками, коммерческий блок. 

dc11aa7cab654f515ef95494bd1bee55.png

Сразу под ценой поместили PDF-файл с более подробными характеристиками товарной единицы:

cec337969e70a53c818d7841ef0aacd5.png

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

В отдельном разделе — информация об особенностях производства. Это поможет оптовикам лучше понять, стоит им приобретать продукцию, или нет. Сам блок выстроен таким образом, чтобы отразить большинство преимуществ компании.

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

Интегрировали проект с системой 1С-Битрикс24: Интернет-магазин и 1С: Комплексная автоматизация

Мы интегрировали каталог магазина с системой управления товарами 1С. Настроили компоненты умного фильтры и свойства для фильтрации. Подготовили модули интернет-магазина (цены, единицы измерения, информация о компании, типы плательщика, свойства заказа). 

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

Сделали две языковые версии сайта

b28d3112c393826a6f58a93a1c1b0441.png

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

  • Глоссарий с терминами — список ключевых запросов на языке оригинала и перевода.
  • Техническое задание на локализованную версию сайта,
  • Исходники сайта в нужном формате

Работу начали с технической подготовки. Перевели все служебные меню, ссылки, кнопки и другие компоненты, которые были в готовом решении, на английский язык. Затем подготовили копию сайта и удалили все лишнее.

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

Что получил клиент?

Заказчик остался доволен результатом. У бренда Forte появился простой, но очень функциональный и удобный сайт, отвечающий требованиям всех сегментов ЦА. Несмотря на кажущуюся минималистичность, мы выстроили все страницы таким образом, чтобы никто из посетителей не «потерялся», а быстро нашел нужный товар и дополнения к нему. 

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

Перейти на сайт

Полный текст статьи читайте на CMS Magazine