Интернет-магазин atovee
Разработка интернет-магазина для Atovee — бренда аптечной косметики, созданного для решения проблем сухой и чувствительной кожи на основе научного подхода
atovee.ru
Сроки работ
Дизайн сайта:
19 фев - 28 фев 2025
Верстка сайта и программирование:
21 фев - 19 мая 2025
потребность заказчика
Заказчику требовался интернет-магазин, отражающий научный подход и философию бренда. Необходимо было разработать каталог с фильтрацией, личный кабинет, корзину, избранное, поиск, форму обратной связи и удобное оформление заказа с выбором площадки.
Задачи проекта
- Составление технического задания
- Анализ конкурентов
- Разработка прототипа
- Создание дизайн-концепции
- Дизайн всех страниц с адаптивами
- Адаптивная верстка дизайн-макетов
- Программирование на CMS
- Настройка административной панели
- Наполнение данными
- Тестирование и передача проекта
Цели проекта
- Выделить бренд среди конкурентов на рынке аптечной косметики (крупные аптечные сети и прямые конкуренты в сегменте b2c);
- Передать через интерфейс и функционал доверие и качество, соответствующее аптечному продукту;
- Увеличить количество заказов от целевой аудитории (люди с сухой и чувствительной кожей) за счёт продуманного UX/UI и удобного каталога;
- Обеспечить удобство взаимодействия пользователей с сайтом (каталог, карточки товаров, корзина, оформление заказа, личный кабинет);
- Реализовать сайт на удобной CMS с возможностью самостоятельного управления контентом (добавление товаров, коллекций, статей).
Используемые инструменты
Объем проекта
Разработали 17 уникальных страниц с адаптивами, добавили каталог с фильтрацией, личный кабинет, избранное, корзину и выполнили наполнение страниц.
Анализ конкурентов
Мы изучили десятки интернет-магазинов аптечной косметики, чтобы выявить, где конкуренты теряют клиентов (сложный поиск, отсутствие фильтрации по типу кожи, долгое оформление заказа), а какие решения работают на продажи (подробные карточки товаров, удобный личный кабинет, избранное). На основе анализа сформулировали требования к структуре и функционалу для быстрого и понятного выбора товаров.
Построение архитектуры сайта
Мы разработали удобную архитектуру: каталог с фильтрацией вынесен в отдельный раздел. Навигация позволяет быстро перейти из каталога в карточку товара, добавить в корзину или избранное и оформить заказ с выбором площадки. Администратор управляет контентом через встроенную панель.
Разработка прототипов страниц
Прототипирование стало важнейшей частью этапа проектирования, позволив визуализировать структуру будущего сайта до начала разработки. Мы создали прототипы всех страниц, которые позволили отобразить логику расположения элементов на каждой из них. Особое внимание уделили проработке ключевых пользовательских сценариев — от выбора товара в каталоге и просмотра карточки с составом до добавления в корзину, оформления заказа с выбором площадки и работы с личным кабинетом.
Подбор Цветовой палитры и типографики для проекта
Используемая сетка
Дизайн главной
Каталог
Область
Лицо
Коллекции
Коллекция
Карточка товара
Адаптивы
Реализованный Функционал на сайте
Каталог с фильтрацией
Реализован каталог товаров с фильтрацией, где пользователи могут быстро подобрать продукцию с указанием потребности кожи, желаемой области и коллекции. Отобранные позиции поступают в выдачу, что гарантирует удобный поиск подходящего средства и сокращает время выбора без необходимости просматривать весь ассортимент.
Поиск по сайту
Реализован стандартный поиск по каталогу товаров, который ищет по названию продукта. Пользователь вводит запрос в строку поиска и получает соответствующие позиции из каталога. Этого достаточно для быстрого доступа к конкретному товару, если пользователь уже знает, что ему нужно, и не требует настройки сложных алгоритмов.
Форма обратной связи
Создан отдельный канал связи для вопросов и консультаций, где пользователи могут быстро отправить запрос с указанием имени, контактных данных и текста обращения. Заявка поступает напрямую представителям бренда, что гарантирует оперативную обратную связь, решение возникших вопросов и помощь с выбором продукции без потери времени на общие консультации.
Блог
Реализован полноценный блог, где бренд публикует материалы об уходе за сухой кожей, особенностях различных компонентов в составе косметики, принципах восстановления кожного барьера, а также делится новостями компании и полезными советами. Это не только повышает доверие к бренду и демонстрирует экспертность команды, но и помогает привлекать новых клиентов через поисковые системы и социальные сети за счёт полезного и информативного контента.
Личный кабинет
Создан полноценный личный кабинет, где пользователи могут управлять своим профилем, просматривать историю заказов и отслеживать их статус, а также сохранять понравившиеся товары в избранное. Личный кабинет позволяет быстро повторно заказать уже купленные средства и хранить всю информацию о взаимодействии с магазином в одном месте, что экономит время при последующих покупках и повышает удобство использования сайта.
Корзина
Реализована корзина со стандартными функциями: добавление товаров, изменение количества и удаление позиций. Предусмотрено два варианта оформления: традиционный заказ на сайте с заполнением формы, а также ссылки на маркетплейсы (Wildberries, Ozon и Яндекс Маркет), где пользователь может приобрести выбранные товары. Это даёт покупателю свободу выбора удобной площадки для оплаты и получения заказа, не ограничивая его только одним способом покупки.
Настройка на CMS и наполнение
После завершения разработки сайт был настроен на удобной CMS, которая идеально подошла для проекта благодаря гибкой системе управления каталогом товаров и возможности точечного редактирования контента без вмешательства в код. Наполнение выполнено с использованием описаний товаров, состава, цен и контактной информации, предоставленных заказчиком, что позволило создать полную и структурированную карточку для каждого товара.
Тестирование работы сайта
Page Speed insights
По результатам тестирования PageSpeed сайт показывает отличные результаты: общая производительность — 96%, поисковая оптимизация — 100%. Первая отрисовка контента происходит через 0,3 секунды, отрисовка самого крупного элемента укладывается в 1,2 секунды, общее время блокировки скриптов минимальное — 50 мс, а совокупный сдвиг макета практически отсутствует, что гарантирует стабильность страницы при загрузке и комфортную работу пользователя.
как итог
По итогам работы разработан не просто интернет-магазин, а полноценный сервис для покупки аптечной косметики — полностью адаптивный, с продуманным каталогом товаров, фильтрацией по коллекциям и потребности кожи, удобной корзиной с выбором площадки для заказа. Дополнительно настроены личный кабинет с историей заказов и избранным, форма обратной связи и блог для публикации полезных статей об уходе за кожей.
Другие кейсы
Закрытый портал Стейвелт
Cайт ресторана пейзаж
Логотип рк-девелопмент
Другие наши услуги
наши контакты
Санкт-Петербург, Московский проспект, 183-185Ак7
info@saytspb.ruРабочие дни: пн-пт с 09:00 до 18:00
Выходные дни: сб-вс