Кейс по разработке интернет-магазина для косметологического салона SkinLab
SkinLab – известный белорусский бренд люксового сегмента в косметологии. Компания обратилась в нашу веб-студию с просьбой провести редизайн существующего сайта, а также расширить функциональные возможности для посетителей в виде создания интернет-магазина.
После встречи и дебрифинга мы с командой выделили основную проблематику и способы решения:
Дизайн
При разработке дизайна сайта SkinLabстаяла задача придумать новую концепцию, которая будет современной и премиальной. Интерфейс должен быть понятным и привлекать внимание соответствующей аудитории.
Мы подобрали рефернесы разного стиля и направления, чтобы определиться со стилем сайта.
После обсуждения дизайн-решений и вариантов видов блоков было принято решение акцентировать внимание пользователей на реальных фото. Для выполнения этой задачи Заказчик провел фото и видео съемку в фирменных цветах салона для всех категорий услуг. Таким образом, заходя на главную страницу, соблюдается единый стиль и цветовая гамма бренда. Внимание потенциального клиента сразу привлекает раздел услуг.
В остальном дизайн решили сделать минималистичным, с плавной анимацией, чтобы не отвлекать пользователя от контента, но при этом выдерживать стилистику сайта.
Из дизайна предыдущего сайта был перенесен прелоудер в виде бьющегося сердца, а также информация о салоне и акциях. Таким образом были решены поставленные задачи редизайна сайта, акцентируя внимание пользователей на услугах, оказываемых в салоне.
Создание интернет-магазина
Важной задачей стала разработка фильтра товаров в интернет-магазине. При выборе косметики есть множество параметров, на которые следует обращать внимание. И для каждого человека они индивидуальны. Мы изучили какие параметры наиболее важны для покупателя при выборе косметики и разместили их по приоритетности.
Услуги также были распределены на понятные пользователю категории. Каждый подраздел сопровождается фотографией для упрощения восприятия и содержит краткое описание, которое поможет сориентироваться в навигации по странице.
Архитектура сайта
Мы сохранили основные проиндексированные разделы с услугами, которые имели вес в поисковой выдаче. В целом структура сохранилась, но добавились новые посадочные страницы для услуг. А также появились страницы с товарами, корзиной и оформлением заказов. В структуре мы добавили возможность сквозного меню для удобной навигации, а также лид формы для заказов и обратных звонков.
Из предложенных нами стеков технологий, Заказчик остановился на WordPress + Woocommerce.
Всё это представляет собой секции из блоков товаров с постраничной навигацией и левого сайдбара с множеством Ajax фильтров. Товары на сайте можно оформить через корзину или найти в каталоге нужный, ознакомиться с характеристиками на странице товара во вкладках и оформить заказ по телефону.
Оплату можно произвести на сайте или при получении (в форме оформления заказа выбрать опцию).
Каталог услуг представляет собой листинг списка услуг категории с переходом на страницу услуги и возможностью записаться на прием через форму. Далее заказ падает в раздел админ панели сайта и уведомлением на почту администратору сайта.
Из дополнительных опций: реализовано динамическое мега-меню, sticky header и блок содержимого корзины, видео-фон, слайдеры товаров с интерактивным фоном, добавление товаров в корзины без перезагрузки страницы, формы связи, попапы.
Перенос и запуск проекта
Так как в Беларуси действует законодательный акт, по которому любой интернет-магазин обязан хостится в РБ, то для кастомизированной разработки на WordPressне так просто найти хостинг. Из предложенного на рынке мы выбрали тариф со специальным хостингом под WordPress.
После переноса сайта с дев сервера, были проведены работы по оптимизации страниц, настройке кэширования и дополнительные манипуляции, чтобы конченый пользователь испытывал больше удовольствия от скорости работы сайта.
Мы всегда предоставляем все нашим клиентам подробную видео инструкцию по работе с сайтом, независимо от того продолжат ли они снами работу.
Наша задача – это экспертная реализация бизнес-цели. И мы с этим справились. Сейчас ведутся переговоры по поводу стратегии продвижения этого проекта.