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

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

Контекст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 5. Заказ

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

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

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

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

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

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

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

Результат

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

Показатели: до и после

Метрики из проекта — «до» и «после», с источником замера. Данные те же, что в кейсе ниже.

Что не сработало

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

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

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

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

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

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

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

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

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

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

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