Со стороны это выглядит как одна кнопка «Подобрать ремешок». Клиент, серия часов, размер, корпус — и вот перед тобой ремешки, которые точно подойдут. На макете это была пара строк в брифе. В разработке — один из самых упрямых модулей, которые нам доводилось собирать: с долгими согласованиями, переделанной с нуля логикой и правками почти до последнего дня перед запуском. Рассказываем честно, как это было.
Задача, которая казалась простой
LYAMBDA — бренд электроники и аксессуаров с десятками моделей ремешков для Apple Watch: сталь, нейлон, силикон, кожа, керамика. У часов Apple тем временем — 11 серий (S1–S9, SE1, SE2), у каждой серии — несколько размеров корпуса, и не каждый ремешок физически подходит под каждый размер и тип застёжки.
Бриф звучал просто: «Сделайте фильтр, чтобы покупатель выбрал свои часы и увидел подходящие ремешки». Мы кивнули, оценили в голове как задачку на один спринт — и, как обычно бывает с «простыми» фильтрами, узнали, что дьявол в деталях, только когда сели рисовать таблицу совместимости.
Ловушка совместимости: когда фильтр — это не фильтр, а матрица
Обычный фильтр в каталоге работает по одному-двум независимым признакам: цвет, цена, бренд. Здесь признаки оказались не независимыми. Серия часов ограничивает доступные размеры корпуса; размер корпуса ограничивает, какие ремешки физически налезут на крепление. Стоило показать в выдаче хотя бы один несовместимый ремешок — и вся идея инструмента теряла смысл: покупатель терял доверие к «подбору», а не находил его полезным.
Поэтому прежде чем рисовать интерфейс, мы фактически собрали отдельную базу совместимости — таблицу, где каждая серия часов состыкована с реальными размерами, а каждый размер — с реальными артикулами ремешков в каталоге.
Четыре шага вместо одного клика
В итоге интерфейс свели к четырём последовательным шагам — «Серия → Размер → Корпус → Ремешки», — где каждый следующий шаг зависит от предыдущего, а сверху крутится наглядная карусель моделей часов. Само решение звучит в одно предложение. Путь к нему — нет.
Мы несколько раз пересобирали сценарий заново: первая версия пыталась показать вообще все шаги сразу — и в тестах люди в ней путались. Вторая версия ушла в другую крайность — слишком много отдельных экранов, из-за чего подбор ремешка ощущался как заполнение анкеты. Финальная логика — раскрывающиеся друг за другом шаги в одном компактном блоке — это уже третья по счёту архитектура интерфейса для одной и той же задачи.
Долгое согласование: сколько было раундов правок на самом деле
Честно: точное число итераций мы не считали, но правок было заметно больше, чем в среднем проекте такого объёма. Часть — по существу (как вести себя фильтру, если для выбранного размера пока нет ни одного ремешка в наличии; как показывать «премиальные» линейки отдельно от базовых). Часть — стилистические: карусель моделей несколько раз меняла скорость и способ переключения, чтобы ощущаться «дорого», а не как обычный слайдер баннеров.
Отдельно много времени ушло на согласование самой логики совместимости с командой бренда — сверяли данные по каждой серии и размеру, чтобы в продакшене не всплыл ни один «пустой» или ошибочный результат подбора.
Что получилось в итоге
Готовый инструмент выглядит обманчиво просто — в этом, наверное, и есть главный результат: вся сложность спрятана внутри, а покупатель просто листает знакомую картинку своих часов и получает ремешки, которые точно подойдут. Меньше ошибочных заказов и возвратов «не налезло», меньше однотипных вопросов в поддержку — и один из самых нетривиальных модулей, которые мы собирали для e-commerce клиента.
Что мы вынесли из этого проекта
- «Простой фильтр» в брифе и «простой фильтр» в проде — часто два разных проекта по трудозатратам, если у признаков есть взаимные ограничения.
- Прежде чем проектировать интерфейс подбора, полезно сначала честно построить таблицу совместимости — интерфейс потом собирается вокруг неё быстрее.
- Долгие согласования — не всегда признак того, что «что-то идёт не так». Иногда это признак того, что клиент действительно проверяет каждую мелочь перед тем, как показать инструмент своим покупателям — и это того стоит.
Подробнее о самом проекте и его задачах — в кейсе LYAMBDA: конфигуратор подбора ремешка. Если у вас в каталоге тоже есть товары со сложными правилами совместимости — разберём вашу задачу на бесплатном аудите и покажем, как это решить без путаницы для покупателя.