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

логотип осанг
Клиент: ОДО «Сэйсимед»
Проект url: infopia.by

О компании: С самого начала компания занимается разработкой диагностических биосенсоров для измерения уровня глюкозы в крови. Заботясь о здоровье клиентов по всему миру, OSANG Healthcare доносит превосходство корейских биотехнологий до людей всего мира.

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

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

Обращение

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

Фирменная палитра и шрифты

У заказчика были готовы и логотип, и фирменные цвета, и шрифты: все фирменные элементы были указаны в макете. Цветовая палитра соответствует направленности компании – передаёт медицинский характер товаров.

Однако с выбором шрифтов для сайта возникли проблемы: в макете все текстовые элементы были набраны двумя шрифтами – Source Han Sans KR и Montserrat – в хаотичном порядке. Допускается наличие заголовков, набранных отличным от основного текста шрифтом, однако в макете заказчика данная пара шрифтов присутствовала и в заголовках, и в наборном тексте. Возникла еще одна проблема со шрифтом Source Han Sans KR: из-за большого веса файлов замедлялась скорость загрузки всего сайта. Мы порекомендовали заменить шрифт на схожий Source Sans Pro, оптимизированный для сайта, что одобрил клиент.

Цвета

#d6efff
#d5251e
#f6f6f6
#ffffff
#646569

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

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

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

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

Еще одной отличительной чертой сайта является наличие страницы “Где купить” продукцию OSANG Healthcare в Беларуси. Здесь представлены разделы с интернет-магазинами, аптеками, медтехниками и интерактивной картой. Такая страница очень важна для удобства пользователей, так как при наличии спроса на товар очевидно желание знать, где можно его приобрести. Реализованный функционал помогает потенциальному покупателю выбрать наиболее подходящий для него магазин по расположению или личным требованиям.

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

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

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

https://infopia.by/
Анализировать
Мобильные устройства
Компьютер
93
https://infopia.by/
0-49
50-89
90-100
Мобильные устройства
Компьютер
100
https://infopia.by/
0-49
50-89
90-100
Показания сервиса
Google PageSpeed Insights

Результаты

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