Интернет-магазин для «Autentica Aroma» для косметики по уходу за кожей

Крафтовый интернет-магазин нишевой косметики

2023

Дизайн

UI/UX

Frontend

Маркетинг

Адрес:

autenticaroma.com

Перейти
на сайт

<div class = 'width88'><a href='/services/web-development/development-online-store/' class='link'>Интернет-магазин для <span>«Autentica Aroma»</span></a> для косметики по уходу за кожей</div>

Autentica Aroma – бренд косметики, философия которого обозначена как «Линия холистического ухода за кожей, созданная для пробуждения высочайшего потенциала кожи и поддержания ее долгосрочного здоровья и сияния»

В основе продуктов компании, только натуральные ингредиенты и нет никаких синтетических соединений. Задача средств Autentica – «дать коже импульс для самовосстановления и регенерации».

Мы всей командой полностью разделяем эти идеи.

Задача, поставленная
заказчиком

Разработать интернет-магазин для продажи уходовых косметических средств бренда

Резюме проекта

Начало работ:

сентябрь 2023

Окончание работ:

март 2024

Какие задачи мы решали
в проекте «Autentica Aroma»

Сделали структуру главной страницы

Спроектировали карточку товара

Разработали стиль оформления

Сделали макет

Подобрали визуализации

Сверстали сайт и сделали Frontend-приложение

Корзина и check-out

Личный кабинет пользователя

Придумали подсказки

Сделали SEO-оптимизацию

Подключили платежную систему

Какими инструментами
мы пользовались

Для дизайна – традиционная Figma.
Word для формирования отчетности

Figma

Nuxt.js

HTML

MS Word

CSS

Vue.js

Проработали структуру главной страницы

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

Спроектировали карточку товара

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

Посмотрите на карточку товара:

Посмотреть

Разработали стиль оформления

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

Сделали макет

Макет сайта отрисовали в Figma. Для согласования отрисовали не только страницы, но и их разные состояния (с модальными окнами и раскрытыми аккордеонами), а также пользовательские сценарии (авторизация и регистрация, добавление
товара в корзину

Посмотреть макет можно в Figma:

Посмотреть

Подобрали визуализацию

Владельцы компании предъявляли очень высокие требования к фото-материалам на сайте, и их видение не совпадало с нашим. Мы по привычке собирали фото с людьми и лицами, основываясь на исследованиях (проверенных личной практикой), что лицо и взглад в объектив существенно повышают эффективность рекламных материалов.

Заказчик видел иначе, и просил в качестве сюжетов использовать природу и фотографию не с глазами, а с кожей. На подбор «относительно соответствующих ожиданиям» фотографий на стоках, понадобилось 4 итерации. Но мы справились) Договорились,
что после запуска сделаем отдельную фотосессию для создания идеальных фотографий, а первое время поработаем на стоковых.

Посадочная страница

Сверстали сайт
и сделали Frontend-приложение

Традиционно, верстали с применением подхода БЭМ и использованием единиц rem для масштабирования. Frontend реализовали на Nuxt (vue.js v.3), часть интерфейсов сохранили на одинком фронтенде статикой – управление проще реализовать через небольшие задачи на техническую поддержку.

Сайт расположен на непривычном для нас хостинге reg.ru – его выбрал заказчик. Еще раз убедились в правильности выбора других хостинг-провайдеров :)

Посмотреть макет можно в Figma:

Посмотреть

Корзина и check-out

Корзина и оформление заказа спроектированы в соответствие последним трендам. Весь сценарий реализован в модальном окне, которое занимает ¼- 1/3 экрана, и расположено
в правой части. Для возврата к покупкам достаточно просто закрыть модальное окно.

В оформлении заказа 3 шага:

1. Ввод данных, содержит 3 поля, все поля обязательны: имя, телефон, e-mail.
2. Способ получения. Доступны 2 варианта: доставка почтой либо курьером. Содержит поля для ввода адреса.
3. Выбор способа оплаты: при получении либо онлайн.
При выборе способа оплаты Онлайн – сайт перенаправляет покупателя на шлюз платежной системы.

Придумали подсказки

Не все пользователи знают, какие полезные
свойства есть у того или иного растения. Для удобства покупателей сделали мини-энциклопедию
с подсказками при наведении / тапе на название: названия на сайте даны на латыни, во всплывающих подсказках даны переводы и описание
полезных свойств.

Дополнительно сделали сводную страницу со всеми ингредиентами косметических средств.

Посадочные страницы

Личный кабинет пользователя

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

В личном кабинете доступны:

- Личная информация с возможностью ее редактирования и обновления, смена пароля

- История заказов. История реализована в виде одной страницы, детализация спрятана в аккордеон. При просмотре детальной информации доступны тип оплаты, стоимость,
статус заказа: оформлен/в пути/доставлен
и выдан/отменён.

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

Сделали внутреннюю SEO-оптимизацию

У нас не было цели попасть в выдачу по средне - и высокочастотным запросам в поисковых системах: продукция бренда «нишевая». Но мы стремимся быть в выдаче выше чем маркетплейсы и магазины, в которых представлены товары бренда. Сделали микроразметку, устранили ошибки по рекомендациям Google и Yandex. Оптимизировали скорость загрузки. Учли коммерческие факторы: сделали страницу с адресами offline мест продаж и страницу «Доставка и оплата».