Проектирование и дизайн нового интернет-магазина BASCONI
Запрос клиента
BASCONI — международный бренд обуви, сумок и аксессуаров из натуральных материалов.
На момент старта проекта компания продавала через розничную сеть и маркетплейсы. Однако ставила целью развитие собственного e-commerce. Существующий интернет-магазин не соответствовал задачам бизнеса.
Платформа была построена на устаревших технологиях и ограничивала развитие функционала. Интерфейс не отражал позиционирование бренда, а пользовательские сценарии уступали современным решениям фэшн-ритейлеров.
Поэтому компания приняла решение создать новый интернет-магазин с сильной технологической основой для онлайн-торговли и узнаваемым дизайном.
Цель проекта
Разработать современный интернет-магазин, который передаст ценности бренда и станет основным каналом продаж.
Задачи
- Проектирование интерфейса.
- Разработка дизайн-концепции.
- Подготовка проектной документации на разработку интернет-магазина.
Аудит
Мы провели серию интервью с руководителями направлений маркетинга, e-commerce и ИТ.Разобрали существующие бизнес-процессы, ограничения текущей платформы, способы управления ассортиментом и продажами. Изучили, каким заказчик видит развитие собственного интернет-магазина через несколько лет.
Результатом этапа стали карта пользовательского пути, архитектура будущего интернет-магазина, перечень функциональных требований, сценарии взаимодействия с основными разделами платформы.
Дизайн-концепция
Нам нужно было передать итальянский характер бренда и премиальный статус.Мы отказались от перегруженного интерфейса, большого количества декоративных элементов и плотной сетки. Использовали крупную типографику, свободную композицию, большое количество воздуха, полноэкранные фотографии и видео.
Проектирование
Мы разработали более 20 разделов и адаптировали каждый из них для разных форматов десктопной и мобильной версий. Уделяли внимание целостному сценарию взаимодействия пользователя с брендом: от первого знакомства до оформления заказа. Разберем основные интерфейсные решения.Главная страница
Построили страницу на чередовании эмоционального контента и коммерческих сценариев. Пользователь может перейти в сезонные и товарные категории, к просмотру всего каталога и ознакомиться с новостями компании.
Товарные блоки чередуются с крупными lifestyle-фотографиями, это визуально разгружает интерфейс и упрощает навигацию при скролле.
Каталог
Каталог выполнили в чистом минималистичном стиле. Использовали композицию с карточками разных размеров и акцентами на рекламные блоки.
Карточки снабдили текстовыми тегами, ценами и кнопкой добавления в избранное.
Дополнительно предусмотрели динамические изображения и короткие видеоролики, демонстрирующие обувь в движении.
Капсулы
Одной из интересных особенностей проекта стал раздел с коллекциями. Пользователь может просматривать сезонные образы как полноценную фэшн-съемку, а затем перейти к отдельным товарам при наведении на них или открыть всю коллекцию целиком.
Карточка товара
Карточка товара также разрабатывалась с учетом нестандартных решений. Мы рассматривали вариант расположения фотографии справа, а описания слева по аналогии с рядом зарубежных интернет-магазинов. Однако остановились на более привычной для российской аудитории структуре с изображением слева и информацией справа.
Помимо информации о товаре пользователь видит подходящие средства ухода за обувью, рекомендации и варианты, с чем носить выбранную позицию.
Корзина и оформление заказа
Корзина поддерживает изменение количества товаров и размера, удаление позиций и перенос в избранное.Все параметры оформления заказа объединили в едином процессе checkout. Здесь пользователь выбирает способ доставки, вариант оплаты, применяет промокоды, списывает бонусные баллы и видит итоговую стоимость заказа с учетом доставки и программы лояльности.
Реализовали поддержку самовывоза из магазина, доставки до пункта выдачи и курьерской доставки и бизнес-ограничения, связанные с количеством товаров в заказе. Из способов оплаты — банковская карта, оплата при получении и сервисы рассрочки.
Личный кабинет
Личный кабинет объединяет личные данные, историю заказов и программу лояльности.
Пользователь может просматривать состав каждого заказа, информацию о накопленных бонусах, текущем уровне лояльности и условиях перехода на следующий уровень.
Программа лояльности
Создали отдельную информационную страницу с подробным описанием условий бонусной программы и ответами на часто задаваемые вопросы.Особенности пользовательского опыта
Во всех разделах предусматривали интеллектуальный поиск с подсказками. Пользователь получает корректные результаты даже при ошибках ввода.Техническая документация
После завершения проектирования мы подготовили комплект документов, необходимый для последующей разработки интернет-магазина.Состав:
- пользовательские сценарии (User Stories);
- CJM;
- функциональные требования;
- требования к интеграциям;
- описание моделей данных;
- информация, необходимая для отображения элементов интерфейса в различных состояниях.
Команда
- Системный/бизнес-аналитик;
- UX/UI дизайнер;
- Менеджер проекта.
Результат
Сделали интернет-магазин ближе к запуску:- Разработали дизайн-концепцию и UI-кит, соответствующие позиционированию бренда.
- Создали комплект макетов страниц, адаптированный для десктопа и смартфонов.
- Подготовили техническое задание к новой e-com платформе, готовой к высоким нагрузкам и масштабированию.
