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

Сдача проекта: 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

Меню
Меню представляет собой две равнозначные секции с контрастным темно-серым фоном слева и белым фоном справа.
Products
Stories
Contact
About us
Visual inspiration
Articles
Страница листинга и карточка товара
Страница листинга товаров важна для максимально быстрого подбора необходимых товаров при помощи фильтра. Карточка товара позволяет выбрать нужную вариацию текстиля (размер, цвет) и количество товаров.
FN
Linens
mix&match
Homepage
Products
Linens mix&match
Category
Cotton
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. Переход на страницу корзины заказов
Интерфейс корзины делится на две части:
  1. Основной блок на 75% ширины, где отображен список выбранных товаров с возможностью удалять товар из корзины или редактировать количество.
  2. Правый сайдбар, где указан тотал товаров, возможная скидка и акцептная кнопка перехода в чекаут. Также здесь отображена кнопка, которая позволяет вернуться обратно в каталог.
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”. Оба варианта оплаты ведут на шлюз оплаты, который находится на стороне сервиса. После произведения оплаты пользователя переводит на страницу с электронным чеком и поздравлением о совершенной покупке. Копия чека и купленных товаров отправляется также на почтовый адрес, указанный при оформлении покупок.
Адаптивный дизайн
Сайт адаптирован под широкий спектр устройств (мобильные телефоны, планшеты) с сохранением структуры и визуальной привлекательности дизайна.
Mobile
320 px
Tablet
760 px
Desktop
1430 px
Шрифты и цвета
Заголовок
Playfair Display
48 40 32 24
Текст
Poppins
20 16 14 12
Акцент
#EB773B
Монохром
#FFFFFF
#F9F9F9
#D9D9D9
#B5B5B5
#5A5A5A
#191919
Остальные страницы
Визуальное вдохновение, листнинг товаров (stories), блог и страница проектов.
Наши последние работы по разработке сайтов
Если у вас появится желание с нами работать — заказать разработку сайта или приложение, мы всегда рады помочь и ответить на интересующие вас вопросы по разработке.
Все
Веб сервисы
Корпоративные сайты
Московский Шелк
Спроектировали веб сервис, увеличивающий выручку делового квартала за счет привлечения клиентов на аренду коммерческих помещений и продажи внутренних услуг действующим резидентам.
Подробнее
Fizika Group
Многофункциональный корпоративный каталог федерального производителя и оптового поставщика инженерной сантехники для систем отопления, водоснабжения, канализации и тепловых пунктов.
Подробнее
Cruise by River
Проект представляет собой букинг-каталог с онлайн-оплатой и покупкой актуальных билетов на речные путешествия.
Подробнее

Мы готовы взяться за проект
любой сложности

Мы готовы обсудить ваш проект, создать стратегию реализации сайта и сформировать индивидуальное предложение. У вас есть вопросы? Просто оставьте заявку на сайте и мы свяжемся с вами в ближайшее время.
Свяжитесь с нами
Отправьте нам запрос по проекту вашего веб-сервиса или приложения и в ближайшее время с вами свяжутся!

Этот сайт использует cookies.