Как мы собрали сайт, который ведет покупателя к заказу: кейс VITTORIA VICCI

VITTORIA VICCI — российский бренд женской одежды, обуви и аксессуаров, который с 2016 года строит образ вокруг женственности, уверенности и самовыражения через стиль. Перед брендом стояла задача обновить интернет-магазин так, чтобы он соответствовал уровню продукта: выглядел премиально, удобно работал на мобильных устройствах и помогал растить конверсию.

В 2024 году интернет-торговля в России выросла на 41%, а доля e-commerce в рознице достигла 16,2%. Для бренда одежды это означает, что сайт должен выдерживать сравнение не только с конкурентами, но и с маркетплейсами, крупными ритейлерами, приложениями и привычным для покупателя быстрым сервисом.

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

Работа шла 4 месяца. В задачи входили аналитика, прототипирование, UX/UI-дизайн и верстка. Среди бизнес-целей были повышение среднего чека, развитие мобильного сценария и сокращение ручной работы за счет интеграций с 1С и службами доставки.

Пресейл

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

Это изначально задало другой тон работе. Нам не нужно было вытаскивать задачу из общих формулировок вроде «хотим красивый сайт». На входе была система, и к ней нужно было отнестись так же системно.

Стандартный тендерный ответ с несколькими референсами здесь бы не сработал. Нужно было показать, что мы понимаем продукт, рынок и масштаб будущей разработки.

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

VITTORIA VICCI понравился наш подход и уровень проработки концепции для тендера. Даже несмотря на идеи, которые выходили за рамки изначального ТЗ, наша инициативность и переосмысление некоторых блоков продемонстрировали для них потенциал этого сотрудничества.

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

Разработка

1. Анализ

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

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

Еще один важный фокус — мобильная версия. Около 75% аудитории приходилось на мобильных пользователей. Поэтому телефон рассматривали как основной сценарий покупки, а не как адаптацию, которую можно оставить на потом.

Дальше началось исследование. Мы смотрели не только прямых конкурентов VITTORIA VICCI. В fashion легко открыть несколько брендов одежды, найти похожие блоки и на этом остановиться. Но пользователь сравнивает сайт со всем своим опытом онлайн-покупок.

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

Так появилась большая рабочая база из 200+ референсов. Ее ценность состояла не только в количестве ссылок, а в комментариях к каждой из них. Таблица позволяла быстро вернуться к нужной находке: «здесь удачно решена корзина», «здесь интересная навигация», «здесь хорошо подана программа лояльности».

Из этого этапа выросли отдельные решения. Например, нестандартное навигационное меню появилось после анализа прямых конкурентов. Команда увидела навигационный прием, который выбивался из общего ряда, и переосмыслила его под стиль VITTORIA VICCI. LookBook сразу рассматривали как сценарий, который может подталкивать к покупке комплектов.

2. Проектирование

После исследования мы перешли к структуре сайта и прототипам. Сначала собрали общую карту сайта, которая помогла нам выстроить новую структуру каталога и синхронизировать понимание проекта между командой и клиентом. Для интернет-магазина это базовый, но критичный этап. Если структура не держит сценарий покупки, дизайн уже не спасает.

Карту сайта сделали более визуальной, чем обычно. Мы добавили иконки, статусы и акценты. Идея была в том, чтобы клиент видел весь объем работ и понимал, какие страницы уже находятся в работе.

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

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

Перед переходом к дизайну мы старались получить явное согласование прототипов у клиента. На таких проектах легко сразу начать дизайнить, но когда логика согласована заранее, меньше риск, что на этапе красивых экранов всплывет вопрос из серии «а почему вообще так устроен каталог?».

3. Дизайн

VITTORIA VICCI нужен был сайт с стильной-подачей, демонстрирующий крупные фотографии, спокойную типографику, журнальную композицию, и ощущение премиальности. При этом сайт оставался интернет-магазином. Пользователь должен быстро найти товар, выбрать размер, добавить его в корзину и оформить заказ.

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

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

Концепция каталога

Дизайн LookBook

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

Отдельно проработали LookBook, где пользователь смотрит образы, переходит в карточку товара и может добавить вещи в корзину прямо из образа. Для fashion-бренда это сильный сценарий: человек видит комплект целиком и быстрее понимает, какие вещи можно взять вместе.

4. Верстка

В работе использовались PHP, Bitrix, HTML, JavaScript, и MySQL. Также были предусмотрены интеграции с 1С, службами доставки и онлайн-кассами, которые напрямую влияют на скорость обработки заказов. 

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

Для e-commerce это значимая часть экономики проекта. Чем меньше ручной работы, тем быстрее бренд может работать с ассортиментом, остатками, доставкой и клиентским сервисом. Внешне пользователь видит каталог и корзину, но интернет-магазин должен нормально жить внутри бизнес-процессов. 

На верстке особенно важно было не потерять аккуратность визуала. На fashion-сайте мелкие расхождения быстро становятся заметны. Например, фотография обрезалась не так, отступ стал меньше, кнопка потяжелела. Поэтому мы передавали много состояний и заранее показывали, как должны вести себя элементы.

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

Бизнес-эффект

В результате мы разработали новый интернет-магазин VITTORIA VICCI — с подчеркивающим бренд визуалом, мобильным приоритетом, продуманным каталогом, нестандартной навигацией и интеграционной архитектурой.

За счет четких вводных, паспорта проекта и раннего согласования ключевых сценариев мы:

1. Быстрее вышли на рабочую концепцию сайта
2. Сократили количество возвратов к базовой логике магазина
3. Уменьшили число лишних итераций на проектировании
4. Снизили риск поздних переделок
5. Собрали цельный путь к покупке
6. Соединили LookBook и навигационное меню с коммерческим сценарием
7. Сделали сайт сильнее как собственный канал бренда
8. Снизили барьеры перед заказом с помощью продуманных сценариев и удобной структуры
9. Подготовили магазин к реальной e-commerce-нагрузке благодаря интеграциям с 1С, службами доставки и онлайн-кассами
10. Адаптировали основной сценарий под мобильную аудиторию

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

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

Кейс VITTORIA VICCI хорошо показывает подход Фьюче к e-commerce: сначала разобраться в задаче, затем выстроить сценарии, согласовать логику, найти визуальный язык бренда и довести все до работающего сайта. У fashion-бренда сайт должен быть красивым, но красота быстро теряет смысл, если пользователь не может найти размер или оформить заказ. Поэтому здесь такой тщательный подход оказался особенно важен.