Кейсы
Интернет-магазин для «Autentica Aroma» для косметики по уходу за кожей
Крафтовый интернет-магазин нишевой косметики
2023
Autentica Aroma – бренд косметики, философия которого обозначена как «Линия холистического ухода за кожей, созданная для пробуждения высочайшего потенциала кожи и поддержания ее долгосрочного здоровья и сияния»
В основе продуктов компании, только натуральные ингредиенты и нет никаких синтетических соединений. Задача средств Autentica – «дать коже импульс для самовосстановления и регенерации».
Мы всей командой полностью разделяем эти идеи.
В основе продуктов компании, только натуральные ингредиенты и нет никаких синтетических соединений. Задача средств Autentica – «дать коже импульс для самовосстановления и регенерации».
Мы всей командой полностью разделяем эти идеи.
Задача, поставленная
заказчиком
Разработать интернет-магазин для продажи уходовых косметических средств бренда
Резюме проекта
Начало работ:
сентябрь 2023
Окончание работ:
март 2024
Какие задачи мы решали
в проекте «Autentica Aroma»
Какими инструментами
мы пользовались
Для дизайна – традиционная Figma.
Word для формирования отчетности
Word для формирования отчетности
Figma
Nuxt.js
HTML
MS Word
CSS
Vue.js
Проработали структуру главной страницы
Главную страницу разработал заказчик: она отражает и описывает философию бренда, которая указана
и в названии – компания делает упор на натуральность, аутентичность, холистика. а странице запланировали специальный интерфейс для знакомства с ингридиентами, которые использованы в косметических средствах Autentica.
и в названии – компания делает упор на натуральность, аутентичность, холистика. а странице запланировали специальный интерфейс для знакомства с ингридиентами, которые использованы в косметических средствах Autentica.
Спроектировали карточку товара
В разделе товаров сделали каталог товаров и карточки товаров. В каталоге кроме стоимости и типа продукта предложили сделать сегментацию по назначению товара.
В карточке товара решили показывать несколько основных разделов с информацией, среди которых свойства, основные компоненты с подробным описанием, полный состав и способ применения.
В карточке товара решили показывать несколько основных разделов с информацией, среди которых свойства, основные компоненты с подробным описанием, полный состав и способ применения.
Посмотрите на карточку товара:
Посмотреть
Разработали стиль оформления
Общий стиль выполнен в пастельных тонах с низким контрастом. Это нужно чтобы выделить в дизайне блоки с фото-контентом, и подчеркнуть визуальную концепцию бренда.
Сделали макет
Макет сайта отрисовали в Figma. Для согласования отрисовали не только страницы, но и их разные состояния (с модальными окнами и раскрытыми аккордеонами), а также пользовательские сценарии (авторизация и регистрация, добавление
товара в корзину
товара в корзину
Посмотреть макет можно в Figma:
Посмотреть
Подобрали визуализацию
Владельцы компании предъявляли очень высокие требования к фото-материалам на сайте, и их видение не совпадало с нашим. Мы по привычке собирали фото с людьми и лицами, основываясь на исследованиях (проверенных личной практикой), что лицо и взглад в объектив существенно повышают эффективность рекламных материалов.
Заказчик видел иначе, и просил в качестве сюжетов использовать природу и фотографию не с глазами, а с кожей. На подбор «относительно соответствующих ожиданиям» фотографий на стоках, понадобилось 4 итерации. Но мы справились) Договорились,
что после запуска сделаем отдельную фотосессию для создания идеальных фотографий, а первое время поработаем на стоковых.
что после запуска сделаем отдельную фотосессию для создания идеальных фотографий, а первое время поработаем на стоковых.
Посадочная страница
Сверстали сайт
и сделали Frontend-приложение
и сделали Frontend-приложение
Традиционно, верстали с применением подхода БЭМ и использованием единиц rem для масштабирования. Frontend реализовали на Nuxt (vue.js v.3), часть интерфейсов сохранили на одинком фронтенде статикой – управление проще реализовать через небольшие задачи на техническую поддержку.
Сайт расположен на непривычном для нас хостинге reg.ru – его выбрал заказчик. Еще раз убедились в правильности выбора других хостинг-провайдеров :)
Посмотреть макет можно в Figma:
Посмотреть
Корзина и check-out
Корзина и оформление заказа спроектированы в соответствие последним трендам. Весь сценарий реализован в модальном окне, которое занимает ¼- 1/3 экрана, и расположено
в правой части. Для возврата к покупкам достаточно просто закрыть модальное окно.
в правой части. Для возврата к покупкам достаточно просто закрыть модальное окно.
В оформлении заказа 3 шага:
1. Ввод данных, содержит 3 поля, все поля обязательны: имя, телефон, e-mail.
2. Способ получения. Доступны 2 варианта: доставка почтой либо курьером. Содержит поля для ввода адреса.
3. Выбор способа оплаты: при получении либо онлайн.
При выборе способа оплаты Онлайн – сайт перенаправляет покупателя на шлюз платежной системы.
2. Способ получения. Доступны 2 варианта: доставка почтой либо курьером. Содержит поля для ввода адреса.
3. Выбор способа оплаты: при получении либо онлайн.
При выборе способа оплаты Онлайн – сайт перенаправляет покупателя на шлюз платежной системы.
Придумали подсказки
Не все пользователи знают, какие полезные
свойства есть у того или иного растения. Для удобства покупателей сделали мини-энциклопедию
с подсказками при наведении / тапе на название: названия на сайте даны на латыни, во всплывающих подсказках даны переводы и описание
полезных свойств.
свойства есть у того или иного растения. Для удобства покупателей сделали мини-энциклопедию
с подсказками при наведении / тапе на название: названия на сайте даны на латыни, во всплывающих подсказках даны переводы и описание
полезных свойств.
Дополнительно сделали сводную страницу со всеми ингредиентами косметических средств.
Посадочные страницы
Личный кабинет пользователя
Предусмотрели возможность регистрации пользователя
и расширенный функционал для зарегистрированных пользователей. Сценарий регистрации и авторизации также спроектировали в модальных окнах.
и расширенный функционал для зарегистрированных пользователей. Сценарий регистрации и авторизации также спроектировали в модальных окнах.
В личном кабинете доступны:
- Личная информация с возможностью ее редактирования и обновления, смена пароля
- История заказов. История реализована в виде одной страницы, детализация спрятана в аккордеон. При просмотре детальной информации доступны тип оплаты, стоимость,
статус заказа: оформлен/в пути/доставлен
и выдан/отменён.
статус заказа: оформлен/в пути/доставлен
и выдан/отменён.
- Раздел избранное, куда можно добавить любимые товары, с возможностью оформить заказ не покидая личный кабинет.
Сделали внутреннюю SEO-оптимизацию
У нас не было цели попасть в выдачу по средне - и высокочастотным запросам в поисковых системах: продукция бренда «нишевая». Но мы стремимся быть в выдаче выше чем маркетплейсы и магазины, в которых представлены товары бренда. Сделали микроразметку, устранили ошибки по рекомендациям Google и Yandex. Оптимизировали скорость загрузки. Учли коммерческие факторы: сделали страницу с адресами offline мест продаж и страницу «Доставка и оплата».
Подключили
платежную систему
При оформлении заказа покупателю доступна онлайн оплата. Для этого используем эквайринг Tinkoff (T-Bank)
Галерея
Посмотите дизайн макеты сайта,
сделанные для проекта «Autentica-Aroma»
сделанные для проекта «Autentica-Aroma»
Немного цифр
Считаем мы всегда, но не все цифры можем показывать.
Но некоторые немножко можем!
Но некоторые немножко можем!
0,8 секунд
Скорость загрузки
страниц сайта
страниц сайта
6 месяцев
Потратили на обсуждение деталей и запуск первой версии сайта
59 Штук
Макетов страниц отрисовали пока работали над дизайном
Заказать проект
У вас есть похожая задача? Напишите нам и мы поделимся опытом и поможем с реализацией!
Написать
Cмотрите
похожие кейсы
похожие кейсы
Web-AR для Gauss
Сделали небольшой промо-сайт и решение с дополненной реальностью на web-ar для компании Вартон
2022
Amarylis
В 2019 году компания перезапускала интернет-магазин, и, столкнувшись с задачей проектирования интерфейса и создания дизайна обратилась
к нам за помощью.
к нам за помощью.
2020
COFFF
Разработали дизайн продающего сайта для монобрендового магазина по продаже кофейного оборудования
2023
VITRAJI
Разработали сайт для презентации продуктов компании и преимуществ работы с ней для строительных компаний, дизайнеров и агентств.
2022
Noirot
Совместно с компанией ООО Нуаро наша команда провела предметную фотосъёмку для каталога и рекламы.
2019
Premium Technologies
Разработали промо-сайт и рекламные кампании для продвижения розничных и мелкооптовых продаж продукции Schüco и дополнительных услуг компании Премиум Технолоджис.
2021
АНО ДПО РИПКиПМР
Создали интернет-магазин учебных программ для медицинских работников и рекламную кампанию на федеральном уровне.
2018
Oscar-Et-Valentine
Случается, что после запуска сайта сразу же требуется его редизайн. С сайтом Oscar Et Valentine произошла именно такая история.
2020
Показать еще
