ООО "Петербургские аптеки" — компания, занимающаяся оптовой и розничной продажей лекарственных препаратов. Продажа производится как онлайн, так и через магазины сети.
Задача
Перед студией стояла задача — задизайнить и разработать новый сайт для сети "Петербургские аптеки" — одной из старейших аптечных сетей Санкт-Петербурга, насчитывающей 86 аптек, расположенных во всех районах города и в пригороде. На сайте пользователь должен иметь возможность приобрести фармацевтические препараты как онлайн с доставкой, так и зарезервировать их для оплаты в одном из аптечных пунктов и самовывоза. Основной задачей при проектировании сайта было дать пользователю возможность быстро и удобно найти нужный препарат, изучить информацию о нем и совершить заказ, воспользовавшись одним из способов оплаты и доставки. Пользователь должен иметь возможность одинаково легко выполнять все эти действия на любом популярном устройстве.
Архитектура и прототипы
Рабочий процесс, как и в подавляющем большинстве случаев, начался с проектирования архитектуры сайта на основе гипотетических пользовательских сценариев. Основные пути взаимодействия целевого посетителя с интерфейсом были сформулированы в формате user-flow. Далее, на основе схем архитектуры ("дерево" сайта) и user-flow, мы перешли к этапу рисования черно-белых прототипов (wireframes) основных, наиболее важных для решения задач сайта, страниц. Руководствуясь опытом, полученным в ходе разработки других e-commerce проектов и сайтов для фармакологических компаний, мы логично, последовательно, шаг за шагом визуализировали то, как потенциальный пользователь сайта взаимодействует с навигацией, поиском, каталогом, карточками товаров, модулями корзины и оформления заказа. Мы постарались сделать этот путь пользователя на сайте интуитивно-понятным и бесшовным. Судя по статистике уже давно работающего проекта — у нас получилось. Также этот проект должен выполнять ряд других, побочных задач, некоторые из которых, тем не менее, заслуживают отдельного освещения. Например, немалое количество людей имеет те или иные льготы на приобретение лекарственных препаратов, и этими льготами можно воспользоваться в том числе в Петербургских Аптеках. Мы должны были информировать о такой возможности эту категорию пользователей — достаточно четко для того, чтобы те, кому это нужно, это поняли, но не слишком навязчиво, чтобы не мешать остальным посетителям считывать основную информацию и пользоваться сайтом.
Карточки товара мы, согласно задаче, спроектировали таким образом, чтобы посетитель мог узнать всю информацию о препарате — изучить все его характеристики, прочесть инструкцию. То есть, страница о товаре должна была выполнять не только коммерческую, но и справочно-информационную функцию. После прототипирования основного функционала мы нарисовали wireframes для оставшихся страниц, всплывающих окон, форм, и двинулись далее.
Дизайн
После того, как прототип был закончен и согласован с клиентом, мы перешли к рисованию нескольких версий концепции дизайна на примере основных страниц. Основаны они были на фирменном стиле клиента. Одной из важных задач на этапе дизайна было, отразив узнаваемый корпоративный стиль компании, не перегрузить сайт стилистическими элементами, сохранив фокус внимания посетителя на блоках и элементах, необходимых ему для поиска и покупки необходимых препаратов, а клиенту — для решения коммерческих задач. После того, как одна из версий дизайн-концепта была выбрана клиентом, мы, основываясь на ней, нарисовали все страницы, блоки и элементы сайта, ранее визуализированные в черно-белом виде на этапе прототипирования.
Верстка и сборка
Наши технические специалисты качественно выполнили адаптивную верстку сайта, благодаря чему он корректно отображается и работает на всех популярных устройствах и браузерах. Код был тщательно протестирован и дополнительно оптимизирован для максимально быстрой загрузки страниц. Сайт был собран нашими специалистами на CMS 1С-Битрикс с применением передовых технологий, предлагаемых разработчиками платформы.
