Кейс по разработке сайта-каталога для компании, продающей тонометры и термометры

Клиент: ООО «ЯНДЕЙЛ»
Проект url: sertsa.com

О компании: Sertsa – новый проект компании «Сэйсимед», который занимается продажами плечевых тонометров и тонометров на запястье, а также электронными и инфракрасными термометрами.

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

Краткий бриф на разработку сайта
Наименование компанииООО «ЯНДЕЙЛ»
Сфера деятельностиПродажа медицинских приборов
Страна, на которую рассчитан сайтБеларусь
Основные товары и услугиПлечевые тонометры и тонометры на запястье, а также электронные и инфракрасные термометры
Домен сайтаsertsa.com
Целевая аудиторияФизические и юридические лица, заинтересованные в приобретении медицинских приборов как для собственных нужд, так и перепродажи
Задачи сайтаИнформирование аудитории о товарах, приобретение узнаваемости на рынке Беларуси, информация о местах продажи товаров
Тип сайтаСайт-каталог
ТарифИндивидуальное решение
CMS WordPress
ХостингHoster.by
Пожелания заказчикаМинималистичный светлый сайт с красным акцентным цветом, наличие видео на главной странице, поиск и фильтр на сайте, добавить сравнение товаров

Обращение

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

Фирменная палитра и дизайн

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

Цвета

#2d2d2d
#f9f9f9
#ee2737
#ffffff

Специально для данного проекта была отрисована полигональная абстракция, напоминающая логотип бренда. В дополнение к этому были созданы специальные тематические иконки для продукции компании. Некоторые из иконок были предоставлены самим Заказчиком: они использованы на странице “Сравнение”.

Процесс разработки

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

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

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

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

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

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

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

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

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

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

Скорость загрузки

Пожеланием Заказчика была высокая скорость загрузки сайта, и ожидания клиента оправдались сверх меры: несмотря на наличие видео на главной странице, наши специалисты добились самого высокого показателя в 100 баллов на десктопных устройствах и 92 балла на мобильных (возможны более низкие результаты из-за медленного интернета, сильной нагрузки на устройства). Благодаря этому, клиенты будут быстрее перемещаться по сайту и лояльность к компании повысится, что влечет за собой увеличение прибыли.

Результаты

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