Битрикс, брекеты, шампанское. Как мы сделали сайт для дистрибьютора ортодонтии

Генеральный директор ОВК Анна обратилась к нам за разработкой магазина на Битрикс. У компании уже был сайт на шаблоне Битрикса, но он терялся на фоне крупных конкурентов и никак не продавал услуги.

Клиентам нужен был красивый сайт, на котором пользователи смогут изучить всю продукцию, дистрибьютором которой является ОВК. Это более 1000 товаров для ортодонтов.

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

Итак, клиент пришёл за классным кастомизированным интернет-магазином на Битриксе. Но бюджет проекта позволял реализовать только шаблонные решения.

Поэтому мы (не без продолжительных обсуждений и доводов) уговорили отказаться от площадки и сделать промо-сайт с каталогом на Тильде.

С чего мы взяли, что Тильда будет лучше, чем Битрикс?

— Клиент хотел продвигать бренд, а не каталог

Когда мы начали изучать причины и цели, то выяснили, что важнее всего для Анны было сделать компанию узнаваемой на рынке:

«Цель сайта — сделать продукт популярным, вывести компанию в топ — на уровень с американскими, немецкими и японскими производителями». Анна, генеральный директор ОВК

Стандартный магазин никак не создаёт имидж и не привлекает новую аудиторию.

— Старый сайт продающую функцию не выполняет

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

— Специалисты не станут покупать у малоизвестной компании

Чтобы доказать надёжность, нужно рассказывать о производстве и материалах, демонстрировать процесс работы и показывать товар лицом.

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

Убедить экспертную аудиторию одним каталогом не получится.

Разобрались, что важно ортодонтам при покупке товаров, а ещё покопались во всех незнакомых терминах

—  Изучили конкурентов и поняли, как можно выделить ОВК на рынке

— Придумали три креативных концепции для сайта

— Написали имиджевые и полезные для аудитории тексты

— Спроектировали каталог с системой фильтрации и конфигуратором на 1000 товаров

— Отрисовали дизайн-концепцию

— Сверстали сайт на Тильде, наполнили каталог и адаптировали сайт под все устройства

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

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

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

«На таких сайтах холодно. Они по дизайну все серые и синие, так ещё и текст создаёт ощущение общения с железякой, а не человеком. Мы от такой коммуникации решили точно отказаться». Настя Бобровская, лид-редактор «е—б эдженси»

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

«В дизайне у конкурентов всё довольно плохо. У многих очень устаревший стиль, у кого-то прям совсем древний. У некоторых — получше, но все равно достаточно так себе. Куда ни зайди, одни неприятные стоковые фото. Сразу считывается шаблонность: очень заметно, что такие сайты делаются по одному образу и подобию. Как на конструкторах собрали, такими они и выглядят — без души». Настя Косаткина, лид-дизайнер «е—б эдженси»

Словом, мы точно поняли, как делать не надо.

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

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

— Наглядная технология

Хай-тек концепция, центральное место в которой занимает товар. Здесь мы делали ставку на демонстрацию качества через факты, 3D-элементы, чертежи и текстуры металла. Это сайт, который позволяет увидеть продукт со всех сторон, изучить все достоинства и едва ли не подержать его в руках

— Экспертам от экспертов

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

— Клиенту навстречу

ОВК предлагает своим клиентам по-настоящему лучшие условия: здесь и постоплата, и персональные напоминания о заказах, и консультации для молодых специалистов. Эту заботу людей о людях мы решили раскрыть в третьей, самой яркой и душевной концепции.

После презентации Анна вернулась к нам с решением — делаем третью концепцию.

«Выбранная концепция нравится тем, что она необычная. Мы работаем с дистрибьютором технологичных штук, который при этом очень человечный. Это нестандартная концепция для ниши, но очень органичная для бренда». Егор Митькин, бренд-шеф «е—б эдженси»

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

Мы продумали структуру, написали тексты, а потом пошли показывать результат клиенту. Первая реакция оказалась скорее настороженной — в воздухе повисла фраза «давайте всё переделаем».

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

Вся проблема оказалась не в структуре или качестве материала, а в тональности — Анне хотелось добавить дружелюбности в заголовки. Мы быстро внесли правки и сразу успокоили как себя, так и клиента.

Дальше все итерации прошли гладко, и мы быстро утвердили финальные тексты. Вот так один созвон уберёг нас от неверных выводов и глобальных изменений.

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

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

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

У нас получился светлый и воздушный дизайн, где хорошо выделяются как продукт, так и эксперты. Главной фишкой сайта стал уникальный контент. Анна поддержала идею провести фотосессию команды, а мы собрали под неё ТЗ: предложили сделать как портретные фотографии, так и более расслабленные снимки с продукцией. Даже перчатки в фирменном оранжевом цвете клиенты смогли найти по референсу.

Такая преданность своему делу и качественному результату очень подкупает. Эти ценности и настроение, за которую команду ОВК любят клиенты, теперь считывается и на сайте.

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

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

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

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

Одним из таких необычных блоков был рассказ о трёхэтапном контроле качества продукции. В сравнении с конкурентами это сильное преимущество, потому что мало кто тестирует товар в трёх странах. ОВК же проводит исследования в США, Китае и России. Поэтому на истории хотелось задержаться. Мы рисовали карты, работали с крупной типографикой, меняли анимацию, подбирали фотографии, чтобы найти лучшую форму блока и подать его ярко.  

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

Когда мы вышли из состояния полного нуба, начался путь проб и ошибок. Перенести на Тильду печатный каталог из более 1000 товаров и не сломать пользователю глаза — задача ещё та. Но после длительных командных разборов каталога, анализа принципов, по которым ортодонты формируют корзину, и двух трёхчасовых разборов с Анной мы всё-таки смогли оптимизировать процесс заказа.

В итоге мы собрали понятную и удобную систему. В каталоге клиент может:

— сразу открыть подборку по нужному типу товара

— отобрать продукцию по ключевым параметрам

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

Так мы сильно сократили объём каталога. Если в печатной версии каждый параметр — это отдельный продукт, то в нашей версии все дополнения спрятаны в фильры. Это решение позволят быстро сориентироваться в ассортименте и внутри одной карточки собрать как полную брекет-систему, так и подобрать товар под каждый зуб.   

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

А если хотите узнать, как мы работали над проектом, из первых уст, то просто посмотрите видео нашего лид-дизайнера Насти.

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

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

Мы даже подняли пару бокалов шампанского за классную совместную работу