Мастер подбора очков и линз: UX/UI-модуль для сети оптик

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

Контекст

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

Это классическая развилка для интернет-магазина оптики. Либо покупатель разбирается сам и часто ошибается, либо идёт в салон. Оба пути теряют тех, кто готов купить онлайн прямо сейчас.

Что показал разбор конкурентов

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

• сложная навигация, в которой покупатель теряет начатую конфигурацию;
• недостаток информации о товаре — непонятно, чем варианты отличаются;
• отсутствие адаптивного дизайна: на смартфоне подбор не работает;
• медленная загрузка страниц с изображениями товаров.

Эти четыре пункта стали нашими требованиями «наоборот»: мы проектировали так, чтобы каждая из ошибок была исключена по построению.

Задача проекта

• Создать интерактивный мастер, который шаг за шагом подбирает очки и линзы под индивидуальные параметры.
• Обеспечить быструю и понятную навигацию между шагами без потери введённых данных.
• Интегрировать модуль с основным сайтом сети — не отдельным сервисом, а частью каталога.
• Заложить возможность масштабирования: новые типы линз и покрытий добавляются без переделки логики.
• Уложиться в сжатые сроки: нужен был MVP с последующим запуском рекламного трафика.

Как устроен мастер

Шаг 1. Выбор оправы

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

Шаг 2. Тип линз

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

Шаг 3. Параметры рецепта

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

Если рецепта нет вовсе, мастер не обрывает сценарий — предлагает записаться на проверку зрения. Это не просто забота о покупателе: для сети оптик это трафик в салоны.

Шаг 4. Толщина и покрытия

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

Шаг 5. Заказ

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

Проектирование и прототипы

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

Дизайн опирается на визуальный стиль основного сайта: мастер выглядит продолжением магазина, а не встроенным сторонним виджетом. Это экономит и время разработки, и нервы покупателя.

Правки по ходу проекта

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

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

Результат

За три месяца мы прошли путь от исследования конкурентов до готового к внедрению продукта: пошаговый мастер с адаптивным дизайном, интеграцией с основным сайтом и расширенным функционалом. Сервис стал инструментом, который переводит посетителя из «интересуюсь» в «оформил заказ» — и заодно направляет поток на проверку зрения в салоны.

Что забрали в другие проекты

• Разбор чужих ошибок дешевле собственных. Четыре типовые проблемы конкурентов стали чек-листом требований.
• Конфигуратор должен доводить до заказа. Если в конце — форма «мы перезвоним», вся проделанная работа теряется на последнем шаге.
• Модульность шагов позволяет дорабатывать продукт после запуска, не переписывая логику.

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

Сколько времени занимает разработка конфигуратора подбора очков?

MVP такого мастера реально собрать за три месяца — это срок проекта для сети оптик «Счастливый взгляд». Он включает исследование, прототипирование, дизайн всех шагов, адаптив и интеграцию с каталогом.

Может ли мастер подбора работать без рецепта у покупателя?

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

Чем конфигуратор отличается от обычной формы заявки?

Форма заявки передаёт работу менеджеру, конфигуратор доводит покупателя до оформленного заказа с рассчитанной стоимостью. Для товаров с параметрами — линз, очков, тканей, метизов — это разница между «перезвоните мне» и готовой сделкой.

Модуль проектировался в рамках услуги «Дизайн сайтов». Смотрите также основной кейс сети оптик «Счастливый взгляд».