Мужская одежда · сеть магазинов

Сайт и мобильное приложение CLIMBER B.C.

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

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

Сайт App Store Google Play

КлиентCLIMBER B.C.
ОтрасльМужская одежда, обувь, аксессуары
ПлатформыСайт, iOS, Android
ТехнологияFlutter
Что сделалиПроектирование, UX/UI и разработка

О клиенте

CLIMBER B.C. — бренд мужской одежды с собственной розничной сетью. Магазины работают в торговых центрах, ассортимент закрывает весь гардероб: одежда, обувь, аксессуары и ароматы.

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

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

Задача

Нужен был не один продукт, а связка «сайт + приложение + магазины», работающая по одним правилам. Ключевые требования:

01Онлайн и офлайн в одном сценарии. Покупатель бронирует вещь онлайн и забирает её в магазине, оплачивая при получении.
02Честные остатки. Наличие товара и доступные размеры — по каждому конкретному магазину, а не «в среднем по сети».
03Одна платформа на три экрана. Сайт, iOS и Android должны развиваться параллельно, без трёх разных команд и трёх разных бэклогов.
04Характер бренда. Строгий чёрно-белый интерфейс, крупная типографика и приоритет съёмки — без лишнего визуального шума.

Ключевой сценарий

Закажи и забери

Главный экран сайта отдан не акции и не новинкам, а самому сценарию: забронировать вещь онлайн и получить её в ближайшем магазине. Оплата — при получении, после примерки.

01
Выбор магазина

Покупатель указывает город и видит только те магазины, где вещь действительно есть в его размере.
02
Бронь без предоплаты

Товар резервируется за покупателем. Платить онлайн не нужно — это снимает главный барьер перед заказом одежды.
03
Примерка и оплата

В магазине вещь можно померить и оплатить только если она подошла. Магазин получает трафик, онлайн — заказ.

Часть первая

Сайт

Интернет-магазин собран на Flutter Web. Витрина построена как чередование крупных баннеров и товарных каруселей: сначала сценарий и коллекция, затем — конкретные вещи.

Баннер «Гайд по джинсам» на сайте CLIMBER B.C.

Мини-слайдер вместо меню категорий

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

Формат выбран не случайно: вертикальный кадр 4:5 одинаково хорошо смотрится и на витрине сайта, и в ленте приложения — одна съёмка работает на оба продукта.

Товар без рамок и подложек

Карточки в каруселях «Новинки» и подборках лишены рамок, теней и цветных плашек: только кадр на светлом фоне, название и цена. Вся съёмка сделана в одной сетке и одном свете, поэтому лента читается как единая витрина.

Кнопка «в корзину» появляется прямо на карточке — выбрать размер и добавить вещь можно, не открывая товар.

Часть вторая

Мобильное приложение

Приложение повторяет логику сайта, но добавляет то, что работает только в смартфоне: геолокацию, камеру и push. Пять разделов в нижней навигации — Витрина, Каталог, Корзина, Избранное, Профиль.

Витрина мобильного приложения CLIMBER B.C. — Витрина с вкладками «Главная» и «Блог»

Каталог в приложении CLIMBER B.C. — Каталог: одежда, обувь, аксессуары, ароматы

Сканер штрихкода в приложении CLIMBER B.C. — Сканер штрихкода — поиск вещи прямо в зале

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

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

В карточке открывается список адресов с доступными размерами, часами работы и телефоном. Видно не «есть в наличии», а где именно и в каком размере.
Карта магазинов и ПВЗ

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

Вход по SMS, история заказов и просмотров, избранное, уведомления и настройки — всё синхронизировано с сайтом по одному аккаунту.

Наличие товара в магазинах в приложении CLIMBER B.C. — Наличие и размеры по конкретным адресам

Карта магазинов в приложении CLIMBER B.C. — Карта магазинов сети

Выбор пункта выдачи на карте в приложении CLIMBER B.C. — Выбор пункта выдачи при оформлении

Технологии и интеграции

Сайт и приложения построены на Flutter: один стек и одна дизайн-система на три платформы. Правка в карточке товара или корзине доходит до сайта, iOS и Android одновременно.

Платформа
Flutter и Flutter Web

Приложения в App Store и Google Play и сайт на рендерере CanvasKit — общая кодовая база и общие компоненты интерфейса.
Гео
Карты и геолокация

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

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

Единая программа лояльности для сайта и приложения: накопление бонусов и персональные предложения по одному аккаунту.
Камера
Сканирование штрихкодов

Доступ к камере и распознавание штрихкода с бирки — поиск товара по коду прямо в торговом зале.
Надёжность
Мониторинг и защита форм

Сбор ошибок фронтенда и собственная капча FITTIN на формах входа и оформления — без внешних сервисов проверки.

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

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

Чёрный — основа

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

Фон каталога и карточек. Товар снят на светлом, поэтому интерфейс не спорит с вещью.
Светло-серый — подложка

Фон карточек, плиток каталога и пустых состояний. Отделяет предметную съёмку от белого поля, не добавляя рамок.

Прописные и плотный набор. Заголовки повторяют логотип: тяжёлое начертание, тесный трекинг, никаких засечек и курсивов.

Прямые углы. Кнопки, поля, плашки и карточки — строгие прямоугольники. Скругления есть только у иконок в навигации.

Кадр решает. Съёмка занимает большую часть экрана, интерфейс уходит на второй план и не перекрывает изображение.

Итог

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

Сайт и два приложения. Интернет-магазин, iOS и Android на общем Flutter-стеке.
Бронь и самовывоз. «Закажи и забери» с оплатой при получении — сквозной сценарий во всех продуктах.
Остатки по точкам. Наличие и размеры по каждому магазину, а не по сети в целом.
Инструменты для зала. Сканер штрихкода и карта магазинов работают и внутри торговой точки.
Одна команда. Общая кодовая база и дизайн-система вместо трёх параллельных разработок.

climberbc.ru App Store Google Play

ОТЗЫВЫ О НАС

Retail Rocket

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

Европа

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

Цветовик

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

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

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

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

Зачем делать сайт и приложение на одном стеке?

Flutter позволяет держать общую кодовую базу и общую дизайн-систему для iOS, Android и веба. Новая логика — например, бронь с самовывозом — реализуется один раз и выходит сразу на всех платформах. Это дешевле трёх параллельных разработок и исключает расхождение в поведении продуктов. Подробнее — на странице «Приложение + сайт на одной базе».

Как реализовать бронь товара с самовывозом из магазина?

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

Можно ли добавить сканер штрихкода в приложение магазина?

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

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

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

Хотите так же?

Обсудим вашу задачу и предложим решение — от сценариев и дизайна до запуска сайта и приложений в сторах.

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

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

Сайт и мобильное приложение CLIMBER B.C.

О клиенте

Задача

Закажи и забери

Выбор магазина

Бронь без предоплаты

Примерка и оплата

Сайт

Мини-слайдер вместо меню категорий

Товар без рамок и подложек

Мобильное приложение

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

Наличие по магазинам

Карта магазинов и ПВЗ

Профиль и история

Технологии и интеграции

Flutter и Flutter Web

Карты и геолокация

Остатки по магазинам

Бонусная программа

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

Мониторинг и защита форм

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

Чёрный — основа

Белый — воздух

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

Итог

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

Услуги FITTIN

ОТЗЫВЫ О НАС

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

Хотите так же?

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

Контакты