«Социальная Аптека» — аптечная сеть с 26-летней историей, которая развивала онлайн-направление и переходила от устаревшего сайта к полноценной e-commerce платформе. Пользователю нужно было не просто посмотреть ассортимент, а найти необходимый препарат, проверить наличие, выбрать аптеку или доставку и оформить заказ онлайн.

У компании уже была большая офлайн-сеть и огромный ассортимент, но существующий сайт не соответствовал масштабу бизнеса.

Нужно было полностью переосмыслить пользовательскую часть сервиса: сделать понятнее главную страницу, упростить работу с большим каталогом и выстроить единый визуальный язык для поиска, категорий, товарных карточек, акций и других e-commerce-разделов.

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

Главная страница была перегружена и не помогала пользователю делать основные сценарии. Не хватало фильтров и возможностей быстро подобрать альтернативу.

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

Дизайн должен был решить сразу 2 задачи, помочь найти нужный продукт и при этом дать возможность изучить большой ассортимент.

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

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

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

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

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

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

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

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

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

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

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