Дизайн интернет-аптеки «Губернских аптек»: конверсия в заказ выросла на 30%

Зачем аптеке понадобился новый дизайн

«Губернские аптеки» – сеть государственных аптек в Красноярске и Красноярском крае, в ней больше 300 подразделений. Главное преимущество сети: медицинские товары доступны жителям города и края, а их качество гарантирует государство. Онлайн сеть продаёт через интернет-аптеку 24farmacia.ru, где больше 50 000 наименований.

Дизайн был частью большого проекта. С 2019 года мы продвигали в поиске 24farmacia.ru и корпоративный сайт сети губернскиеаптеки.рф. Для интернет-аптеки в стратегию вошли три направления: проработка категорийных и товарных запросов, перелинковка с корпоративным сайтом и оптимизация UX/UI с внедрением нового дизайна. Здесь рассказываем о третьем.

Сначала аудит, потом макеты

Работу начали с UX/UI-аудита прежнего сайта и данных его аналитики. По итогам собрали прототипы, а затем нарисовали новый дизайн.

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

Задачи редизайна сформулировали так:

1. Сделать удобными основные инструменты, которыми покупатель пользуется на сайте, с опорой на аналитику прежней версии.
2. Сделать дизайн современным и лёгким, чтобы внимание доставалось ключевым функциям.
3. Показать, что на 24farmacia.ru продаются не только аптечные товары: есть ортопедия и ветеринария.

Главная: каталог и поиск на первом месте

Главную строили вокруг двух инструментов, каталога и поиска. Зелёная кнопка «Каталог» стоит в шапке рядом с логотипом, справа от неё широкая строка поиска. Искать можно по названию, действующему веществу или симптому, об этом подсказывает сама строка.

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

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

Справочник заболеваний и блог

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

У справочника и блога три задачи:

• привлекать на сайт дополнительную целевую аудиторию;
• показывать аптеку как эксперта;
• помогать ранжированию: сайт постоянно пополняется новыми полезными материалами.

Каталог: подкатегории и фильтры

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

Фильтры сделали полноценными: назначение препарата, количество в упаковке, страна, цена и переключатель «По рецепту». Выбранные значения показываются над фильтрами отдельными метками, каждую можно снять крестиком или сбросить все сразу.

В плитке товара есть всё, что нужно для выбора без перехода в карточку: действующее вещество (МНН), производитель и страна, отметка «по рецепту», старая и новая цена, кнопка «В корзину». Между товарами можно поставить промоблок, а внизу страницы покупатель видит недавно просмотренные товары.

Карточка товара без лишнего

В карточке товара оставили только то, что нужно покупателю лекарства:

• название, дозировку, форму и количество в упаковке;
• цену, счётчик и кнопку «В корзину»;
• действующее вещество, форму выпуска, первичную упаковку, производителя и страну;
• плашку о том, что рецептурные препараты доставляются только до пункта выдачи.

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

Фирменный стиль в интерфейсе

Интерфейс собран на шрифте Museo Sans в четырёх размерах: 38, 24, 18 и 14 px. Основные цвета: тёмно-зелёный Forest Green (#296654), Leaf Green, красный Heart Red и светло-серый. Зелёным отмечены кнопки и навигация, красным скидки.

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

Состояния и сообщения

Отдельно продумали, как интерфейс отвечает на действия покупателя. После нажатия кнопка «В корзину» показывает подтверждение «В корзине» и превращается в счётчик количества.

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

Все меняющиеся элементы и сценарии взаимодействия описаны в UI-ките, а под приоритетные задачи сделаны отдельные макеты.

Мобильная версия

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

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

Что получилось

Новый дизайн мы внедрили на 24farmacia.ru в 2020 году. Когда подводили итоги проекта, статистики для окончательных выводов было ещё мало, но конверсия в заказ уже выросла на 30%.

По итогам всего проекта продвижения посещений интернет-аптеки из поиска стало в 3 раза больше, а конверсия в оформление заказа из поиска составила 13%. Графики и подробности в кейсе о SEO-продвижении «Губернских аптек».

Если покупатели теряются в каталоге вашего магазина или не доходят до оформления заказа, начните с UX/UI-аудита: найдём, где интерфейс мешает покупке. А если менять пора всё, посмотрите редизайн сайта.