Интернет-магазин Дизайн Фронтенд Бекенд

Интернет-магазин по продаже товаров для домашнего уюта

Сдача проекта: 2021 год

E-commerce проект Arti представляет из себя витрину текстиля с онлайн-оплатой одноименной сети магазинов на территории Финляндии.

В рамках сотрудничества был разработан концепт и дизайн проекта.

Сайт заточен под визуальную эстетику европейской моды с использование пастельных цветов.

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

Демонстрация текстильной продукции, со всех точек офлайн продаж.

Подключение онлайн-сервисов логистики по Евросоюзу для быстрого и удобного расчета доставки.

На проекте Arti был создан уникальный дизайн и проработаны следующие пункты:

прототипирование (Wireframing)
проработана UX-логика оформления
созданы дизайн-макеты чекаута
исследован рынок на предмет графических решений в нише клиента
разработана страница товаров
проработано меню и стартовая витрина товаров
адаптивный дизайн для телефонов и планшетов
компоновка цветовых решений

Описание профильных характеристик аудитории на основе изучения бизнеса компании Arti

Жители Финляндии и прибалтийских стран
Активные пользователи интернет-магазинов
Средний и высокий уровень достатка
Обустраивают свой быт заказывая предметы обихода онлайн
Владельцы собственного дома или квартиры
Клиенты, предпочитающие скандинавский стиль в интерьере
Активные покупатели в магазинах IKEA и пользователи houzz.com
Возраст 25+
Аудитория, понимающая и ценящая качественный эко-текстиль
Пользователи, изучающие в Интернете дизайн-интерьеров для улучшения своего жилища

Разработано около 100 прототипов страниц с разными вариантами размещения блоков и элементов Интернет-магазина

Back

YOUR SHOPPING CART

Silk Long Shirt

Color: Pink

Size: L

23,07 €

100,17 €

Tablecloth

Color: Pink

Product Size: 90x180 cm

13,82 €

Go to cart

The most wonderful cottage parties in the world

This summer, many cottages will come together after a long separation.

about us

title

€0.00

Blue blanket fabric

€300.90

Меню

Меню представляет собой две равнозначные секции с контрастным темно-серым фоном слева и белым фоном справа.

Collections

Cotton mix&match

Linens mix&match

Kitchen mix&match

Your bedroom

Pillowcases

Duvets

Bed Sheets

Kitchen & Table

Tablerunners

Tableclothes

Napkins

Aprons

New In

Sale

Fabric Samples

Blue blanket

Blue blanket

Страница листинга и карточка товара

Страница листинга товаров важна для максимально быстрого подбора необходимых товаров при помощи фильтра. Карточка товара позволяет выбрать нужную вариацию текстиля (размер, цвет) и количество товаров.

Linens
mix&match

Homepage

Products

Linens mix&match

Category

Cotton
mix&match

Homepage

Products

Linens mix&match

Silk Long Shirt

Логика заказа

Ниже описаны шаги воронки покупки текстиля в интернет-магазине

Homepage

Products

Linens mix&match

Silk Long Shirt

Шаг 1. Взаимодействие с карточкой товара

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

В перспективе клиент планирует размещать на сайте на данных страницах примеры использования того или иного товара в разных интерьерах. Для этого предусмотрен слайдер под основным изображением товара.

Правая колонка секции товара является информационной и содержит:

Заголовок
Наличие на складе
Стоимость
Скидка
Мини-описание
Переключатель выбора цвета
Выпадающий список с размерами
Выбор количества товаров
Добавление в список желаний
Аккордеон с табами: характеристики товара, условия доставки и описание требований к уходу.
Кнопка "Добавить в корзину"

Product size

Size 150x220 + 50x60 cm selected

Quantity

Back

YOUR SHOPPING CART

Silk Long Shirt

Color: Pink

Size: L

23,07 €

100,17 €

Tablecloth

Color: Pink

Product Size: 90x180 cm

13,82 €

Go to cart

Шаг 2. Добавление товара в корзину

При выбранном цвете, размере и количестве товара нажимая на “Add to cart” (добавить в корзину) пользователю демонстрируется Pop-up окно в правой верхней части экрана в виде списка выбранных товаров и кнопкой “Go to cart” (в корзину), при нажатии на которую происходит переход в чекаут для дальнейшего оформления товара.

Cart

Checkout

Silk Long Shirt

Color: Pink

Product size: 90x180 cm

Total discounts: 9.88 € (30%)

- 2 +

23,07 €

100,17 €

Silk Long Shirt

Color: Pink

Product size: 90x180 cm

Total discounts: 9.88 € (30%)

- 2 +

23,07 €

100,17 €

Шаг 3. Переход на страницу корзины заказов

Интерфейс корзины делится на две части:

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

Checkout

Cart

Checkout

Billing details

First name

Last name

Phone

Finland

Town / city

Street address

Postcode / ZIP

Place order

Шаг 4. Переход в чекаут. Заполнение контактных данных

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

First name (Имя)
Last name (Фамилия)
Email (Электронная почта)
Phone (Номер телефона)
Country (Страна)
Town/City (Город)
Street address (Полный адрес)
Postcode / zip (Почтовый индекс)

После заполнения клиент обязан для возможности дальнейшего оформления заказа подтвердить поле с галочкой "The delivery address matches the one specified", т.е. адрес доставки совпадает с указанным.

Checkout

Cart

Checkout

Billing details

First name

Last name

Phone

Finland

Town / city

Street address

Postcode / ZIP

Place order

Шаг 5. Выбор метода доставки и точки выдачи заказа

После заполнения контактных данных пользователь выбирает "Next step" и появляется выбор метода доставки. В рамках первичного запуска проекта планировалось использовать в методах доставки государственные почтовые отделения, для этого специально выделен таб "Post Office".

В данной вкладке присутствует чекер "Select address on the map", обозначающий что пользователь планирует найти необходимый адрес почты с которого будет забирать посылку. Данное поле заполняется автоматически с учетом введенного адреса, однако это не всегда удобно для покупателя или же адресов почты в районе может оказаться несколько.

Back to the address

Delivery of 3 items

Where to deliver the order?

Select a pick-up point on the map

Confirm

Шаг 6. Выбор адреса доставки

Если адрес автоматически не подгрузился или его необходимо поменять, пользователь может нажать на "Edit address". Появится специальное Pop-up окно с интерактивной картой с указанными почтовыми отделениями.

Найти адрес можно через поиск, введя адрес, или напрямую через карту. Нажимая на адреса в списке или pin-точки на карте появляется "Pick-up point" окно с подтверждением выбора. Нажимая на Confirm пользователь возвращается в заполненный чекаут обратно.

Шаг 7. Выбор метода оплаты

Финальный шаг в чекауте - это определиться с способом оплаты и произвести ее. Для этого пользователь нажимает на ”Payment option” и появляется две кнопки: “Paypal” и “Visa/MasterCard”. Оба варианта оплаты ведут на шлюз оплаты, который находится на стороне сервиса. После произведения оплаты пользователя переводит на страницу с электронным чеком и поздравлением о совершенной покупке. Копия чека и купленных товаров отправляется также на почтовый адрес, указанный при оформлении покупок.