Разработан сайт по продаже постельного белья, салфеток, полотенец и другой текстильной продукции для уюта дома.
Сдача проекта: 2021 год
О проекте
E-commerce проект Arti представляет из себя витрину текстиля с онлайн-оплатой одноименной сети магазинов на территории Финляндии.
В рамках сотрудничества был разработан концепт и дизайн проекта.
Сайт заточен под визуальную эстетику европейской моды с использование пастельных цветов.
Задача
Реализация интернет-магазина для вывода бизнеса в онлайн и расширение географии продаж из Финляндии на всю Европу, что, в свою очередь, приводит к увеличению прибыли компании.
Демонстрация текстильной продукции, со всех точек офлайн продаж.
Подключение онлайн-сервисов логистики по Евросоюзу для быстрого и удобного расчета доставки.
Этапы реализации проекта
На проекте Arti был создан уникальный дизайн и проработаны следующие пункты:
- прототипирование (Wireframing)
- проработана UX-логика оформления
- созданы дизайн-макеты чекаута
- исследован рынок на предмет графических решений в нише клиента
- разработана страница товаров
- проработано меню и стартовая витрина товаров
- адаптивный дизайн для телефонов и планшетов
- компоновка цветовых решений
Целевая аудитория
Описание профильных характеристик аудитории на основе изучения бизнеса компании Arti
- Жители Финляндии и прибалтийских стран
- Активные пользователи интернет-магазинов
- Средний и высокий уровень достатка
- Обустраивают свой быт заказывая предметы обихода онлайн
- Владельцы собственного дома или квартиры
- Клиенты, предпочитающие скандинавский стиль в интерьере
- Активные покупатели в магазинах IKEA и пользователи houzz.com
- Возраст 25+
- Аудитория, понимающая и ценящая качественный эко-текстиль
- Пользователи, изучающие в Интернете дизайн-интерьеров для улучшения своего жилища
Wireframing прототипирование
Разработано около 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
Страница листинга и карточка товара
Страница листинга товаров важна для максимально быстрого подбора необходимых товаров при помощи фильтра. Карточка товара позволяет выбрать нужную вариацию текстиля (размер, цвет) и количество товаров.
FN
Linens
mix&match
mix&match
Homepage
Products
Linens mix&match
Category
Cotton
mix&match
mix&match
FN
Homepage
Products
Linens mix&match
Silk Long Shirt
Логика заказа
Ниже описаны шаги воронки покупки текстиля в интернет-магазине
FN
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” (в корзину), при нажатии на которую происходит переход в чекаут для дальнейшего оформления товара.
FN
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% ширины, где отображен список выбранных товаров с возможностью удалять товар из корзины или редактировать количество.
- Правый сайдбар, где указан тотал товаров, возможная скидка и акцептная кнопка перехода в чекаут. Также здесь отображена кнопка, которая позволяет вернуться обратно в каталог.
FN
Checkout
Cart
Checkout
Billing details
First name
Last name
Email
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", т.е. адрес доставки совпадает с указанным.
FN
Checkout
Cart
Checkout
Billing details
First name
Last name
Email
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”. Оба варианта оплаты ведут на шлюз оплаты, который находится на стороне сервиса. После произведения оплаты пользователя переводит на страницу с электронным чеком и поздравлением о совершенной покупке. Копия чека и купленных товаров отправляется также на почтовый адрес, указанный при оформлении покупок.
Адаптивный дизайн
Сайт адаптирован под широкий спектр устройств (мобильные телефоны, планшеты) с сохранением структуры и визуальной привлекательности дизайна.
Шрифты и цвета
Заголовок
Playfair Display
48
40
32
24
Текст
Poppins
20
16
14
12
Акцент
#EB773B
Монохром
#FFFFFF
#F9F9F9
#D9D9D9
#B5B5B5
#5A5A5A
#191919
Остальные страницы
Визуальное вдохновение, листнинг товаров (stories), блог и страница проектов.
Наши последние работы по разработке сайтов
Если у вас появится желание с нами работать — заказать разработку сайта или приложение, мы всегда рады помочь и ответить на интересующие вас вопросы по разработке.
Все
Веб сервисы
Корпоративные сайты
Московский Шелк
Спроектировали веб сервис, увеличивающий выручку делового квартала за счет привлечения клиентов на аренду коммерческих помещений и продажи внутренних услуг действующим резидентам.
Подробнее
Fizika Group
Многофункциональный корпоративный каталог федерального производителя и оптового поставщика инженерной сантехники для систем отопления, водоснабжения, канализации и тепловых пунктов.
Подробнее
Cruise by River
Проект представляет собой букинг-каталог с онлайн-оплатой и покупкой актуальных билетов на речные путешествия.
Подробнее
