Кадр сезонной кампании бренда одежды ТВОЕ

Одежда, обувь и аксессуары · сеть магазинов

Приложение и сайт ТВОЕ

Q: Можно ли сделать сайт и мобильное приложение как один продукт?

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

Спроектировали, отрисовали и собрали интернет-магазин бренда сразу на трёх платформах: сайт, iOS и Android. Одна витрина, одна карточка товара, одна корзина — и сквозная программа лояльности, которая работает и в онлайне, и на кассе магазина.

Обсудить проект Открыть tvoe.ru ↗

КлиентТВОЕ, сеть магазинов одежды
ОтрасльFashion-ритейл: одежда, обувь, аксессуары
ПлатформыСайт, iOS, Android
ЗадачаЕдиный магазин в вебе и в мобильных
Что сделалиПроектирование, UX/UI и разработка

О бренде

ТВОЕ — российский бренд повседневной одежды, обуви и аксессуаров с розничной сетью по стране. Две аудитории в одном каталоге — «Женщинам» и «Мужчинам», постоянный поток новинок, базовые вещи и коллаборации.

Такой ассортимент нельзя показывать как справочник артикулов: покупатель приходит не за конкретной моделью, а посмотреть, что нового в сезоне. Витрина должна работать как съёмка, а фильтры и размерные сетки — подключаться вторым слоем, когда выбор уже сделан.

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

Задача

Бренду был нужен интернет-магазин, который одинаково работает в браузере и в телефоне и не разваливается на три независимых продукта. Ключевые требования:

01Одна дизайн-система на три платформы. Сайт, iOS и Android должны собираться из одних компонентов: карточка товара, мини-карточка, боттомшиты, поля ввода, статусы заказа.
02Витрина, которая продаёт сезон. Сторис, баннеры, образы и персональные подборки — контент, который маркетинг меняет сам, без задач на разработку.
03Сквозная программа лояльности. Бонусы начисляются и списываются одинаково в приложении, на сайте и на кассе магазина по QR-коду карты.
04Связка с офлайн-сетью. Наличие товара в магазинах, карта точек, самовывоз и пункты выдачи — в каждом сценарии покупки.

Решение

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

Витрина приложения ТВОЕ с баннером новой коллекции — Витрина

Переключение «Женщинам» и «Мужчинам» на витрине приложения ТВОЕ — Разделы и категории

Витрина: сезон в первом экране

Первый экран — полноэкранный кадр кампании с одной кнопкой и без плашек поверх съёмки. Логотип в красной плашке и нижний таб-бар — единственные элементы интерфейса, которые перекрывают фото.

Сразу под ним — переключатель «Женщинам / Мужчинам» и категории кадром: «Новинки», «Одежда», «Спорт», «Базовая одежда». Покупатель успевает почувствовать сезон до того, как начнёт выбирать раздел, а путь в каталог остаётся в один тап.

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

Каталог с разделами в приложении ТВОЕ — Каталог

Лента товаров с сортировкой и переключением вида в приложении ТВОЕ — Лента товаров

Фильтры по размеру, цвету, цене и длине в приложении ТВОЕ — Фильтры

Каталог: от раздела до нужного размера

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

Сортировка и переключение вида сетки вынесены в одну строку над лентой, фильтры открываются боттомшитом:

размер, цвет, длина и диапазон цены — набор под fashion-каталог, а не универсальный шаблон;
переключатели «только товары со скидкой» и «доступна доставка»;
кнопка подтверждения показывает количество товаров до применения — «Показать результаты (346)».

Корзина с расчётом скидки и порогом бесплатной доставки в приложении ТВОЕ — Корзина

Корзина: вся математика заказа на виду

У каждой позиции — выбранный размер, артикул, цена со скидкой и счётчик количества. Ниже одним блоком собрано всё, что влияет на сумму: скидка, итог и прогресс до бесплатной доставки — «Ещё 302 ₽ до бесплатной доставки» с пояснением, что порог зависит от способа получения.

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

Под составом заказа идут рекомендуемые товары — апселл встроен в сам сценарий оформления и не мешает дойти до кнопки оплаты.

Избранное с метками доступности в приложении ТВОЕ — Избранное

Профиль и бонусы

Избранное и профиль: бонусы под рукой

Избранное собрано теми же мини-карточками, что и каталог, но с пометками доступности: «Только самовывоз» на кадре сразу объясняет, почему вещь нельзя заказать курьером. Под списком — рекомендации из той же категории.

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

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

Что ещё внутри приложения

Мобильное приложение собрано из той же библиотеки компонентов, что и сайт: те же карточки, те же метки скидок, те же правила отображения цены и рейтинга. Отличается не содержание, а навигация — нижний таб-бар и боттомшиты вместо шторок и модальных окон. Поверх базовых сценариев работают сценарии, ради которых приложение и ставят.

Офлайн
QR-карта на кассе

Бонусная карта открывается из профиля в один тап и доступна без интернета — в примерочной и на кассе связь есть не всегда.
Поиск
Сканер штрихкода

Покупатель сканирует бирку в магазине и открывает карточку товара: отзывы, другие цвета, наличие размера в соседних точках.
Магазины
Карта и наличие

Карта точек с адресами, телефонами и графиком работы, поиск по адресу и проверка наличия конкретного размера в магазине.
Карточка товара
Решение на одном экране

Галерея на высоту экрана, цена с бонусами и графиком оплаты частями, размеры с таблицей, сроки доставки и закреплённая внизу кнопка «в корзину».
Контент
Сторис и пуши

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

Отзывы работают в двух форматах — со структурой «достоинства / недостатки» и сплошным текстом. Низкая оценка приложения ведёт в форму для поддержки, а не в публичный рейтинг.

Сценарии и интеграции

Интернет-магазин одежды держится не на витрине, а на скучных сценариях: чем платить, куда привезти, что делать, если размер закончился. Их мы описывали до дизайна — каждый экран в макетах идёт с комментарием по бизнес-логике.

Лояльность
Бонусы и карта

Начисление и списание бонусов, приветственные баллы за регистрацию, персональная цена и QR-карта для кассы — один баланс на сайте, в приложении и в магазине.
Оплата
Карта, при получении, частями

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

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

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

Сегментированные пуш-рассылки и диплинки на товар, категорию и элементы витрины — чтобы переход из рассылки не заканчивался на главной.
Аналитика
Электронная торговля

События e-commerce на всём пути — от просмотра карточки и добавления в корзину до оформленного заказа, с разбивкой по платформам.

Дизайн и фирменный стиль

Интерфейс построен вокруг фирменного красного: он не фон и не украшение, а сигнал — скидка, действие, статус. Всё остальное — графит, светло-серые подложки и белое поле, на котором работает съёмка.

Красный — сигнал

Логотип, цена со скидкой, метки процентов, главные кнопки. Нигде не используется как декоративная заливка.
Графит — основа

Текст, навигация, кнопки второго уровня и подложка блока «Образы». Вместо чистого чёрного, чтобы не спорить со съёмкой.
Светло-серый — подложка

Фон карточек каталога и плашек в приложении. Отделяет предметную съёмку от белого поля страницы без рамок.
Белое поле

Воздух между блоками. Единственный фон, на котором одинаково читаются и студийная съёмка, и уличные кадры.

Заглавные буквы с увеличенным межбуквенным интервалом. Так набраны заголовки блоков, названия товаров и надписи на кнопках — тот же приём, что на вывесках магазинов сети.

Прямые углы. Ни у карточек, ни у кнопок, ни у полей ввода нет скруглений: геометрия повторяет логотип в красной плашке.

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

Итог

Бренд получил не три отдельных продукта, а один магазин в трёх оболочках. Покупатель начинает выбор в браузере, дочитывает отзывы в приложении, меряет вещь в магазине и платит бонусами на кассе — и нигде не сталкивается с разной логикой и разным интерфейсом.

Сайт, iOS и Android из одной библиотеки. Общие компоненты и описанная бизнес-логика каждого экрана.
Витрина под сезон. Сторис, баннеры, образы и персональные подборки собираются маркетингом из готовых шаблонов.
Сквозные бонусы. Один баланс в онлайне и на кассе, QR-карта работает без интернета.
Полный e-commerce. Каталог с фильтрами, корзина с частичным заказом, промокоды, оплата частями и личный кабинет.
Связка с офлайном. Наличие по магазинам, карта точек, самовывоз, пункты выдачи и сканер штрихкода.

Витрина интернет-магазина ТВОЕ на ноутбуке — кейс FITTIN

ОТЗЫВЫ О НАС

Retail Rocket

«Работаем с Fittin не первый год — это партнёрство, где обе стороны усиливают друг друга. Команда отлично чувствует задачи e-commerce и помогает быстро запускать качественные мобильные приложения. Такие партнёрства особенно ценны, и мы точно планируем их развивать дальше.»

Европа

«На протяжении нескольких лет работаем с Фиттин и ни разу не пожалели о выборе. Команда оперативно реагирует на запросы, проявляет ответственность на всех этапах работы и предлагает эффективные решения. Рекомендуем их как надёжного и компетентного исполнителя.»

Цветовик

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

Частые вопросы

Сколько стоит разработка приложения и сайта для магазина одежды?

Стоимость зависит от объёма каталога, числа сценариев и набора интеграций: оплата, доставка, программа лояльности, учётная система, аналитика. Типовые сценарии и стартовые цены опубликованы на странице тарифов; точная смета фиксируется после согласования технического задания.

Можно ли сделать сайт и мобильное приложение как один продукт?

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

Как связать интернет-магазин с офлайн-сетью?

Через остатки и программу лояльности. Наличие размера показывается по конкретным магазинам, заказ можно забрать самовывозом, а бонусы списываются и в онлайне, и на кассе по QR-коду карты. Отдельно продумываются офлайн-сценарии: сканер штрихкода в зале и доступ к карте лояльности без интернета.

Кто наполняет витрину после запуска?

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

Сколько времени занимает такой проект?

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

Хотите такой же магазин?

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

Обсудить проект

Я даю согласие на обработку персональных данных в соответствии с Политикой конфиденциальности

Приложение и сайт ТВОЕ

О бренде

Задача

Решение

Витрина: сезон в первом экране

Каталог: от раздела до нужного размера

Корзина: вся математика заказа на виду

Избранное и профиль: бонусы под рукой

Что ещё внутри приложения

QR-карта на кассе

Сканер штрихкода

Карта и наличие

Решение на одном экране

Сторис и пуши

Отзывы и оценка приложения

Сценарии и интеграции

Бонусы и карта

Карта, при получении, частями

ПВЗ, курьер, самовывоз

Наличие в магазинах

Пуши и диплинки

Электронная торговля

Дизайн и фирменный стиль

Красный — сигнал

Графит — основа

Светло-серый — подложка

Белое поле

Итог

Похожие кейсы

Услуги FITTIN

ОТЗЫВЫ О НАС

Частые вопросы

Хотите такой же магазин?

Обсудить проект

Контакты