Я спроектировал интернет-магазин для сети «Браво-Оптика» под десктоп и мобильные устройства. На входе были прототипы и ТЗ: вместе с проджект-менеджером мы уточнили логику, ограничения, ключевые сценарии и состав экранов, после чего я разработал финальные макеты и UI Guide для передачи в разработку.
Ключевые ограничения: сохранить SEO-структуру при переходе с Bitrix-шаблона, не потерять накопленный трафик, выдержать большой ассортимент с вариациями и сделать мобильные сценарии достаточно быстрыми для выбора и оформления заказа.
Проект охватывал все ключевые eCommerce-сценарии и занял около 2 месяцев. Общий объём — 200+ макетов
Задача бизнеса
Проект запускался как переход от Bitrix-шаблона «каталога-витрины» к полноценному eCommerce-каналу продаж, который выдерживает нагрузку ассортимента 20,000+ товаров и приносит выручку онлайн:
- Увеличить долю онлайн-продаж за счёт полноценного чекаута вместо формы заявки и сокращения пути до покупки
- Снизить потери трафика и выручки из-за медленной загрузки страниц, особенно на мобильных устройствах
- Сохранить SEO-активы при миграции: структуру URL, индексацию и накопленную ссылочную массу
- Повысить конверсию выбора в корзину за счёт удобного поиска/фильтрации и сервисных сценариев доверия
Моя задача
Спроектировать путь пользователя и интерфейс так, чтобы они напрямую работали на онлайн-продажи, удобство выбора и повторные покупки:
- Сократить путь до покупки: сделать навигацию, каталог и карточку товара такими, чтобы пользователь быстрее находил нужную модель и принимал решение без лишних переходов
- Снизить ошибки и сомнения при выборе оптики: структурировать параметры, вариации товара и подсказки (оправы/линзы/рецепт)
- Повысить конверсию чекаута: сделать оформление заказа с понятными сценариями доставки/оплаты
- Поддержать повторные покупки и LTV через личный кабинет: история заказов, персональные промокоды, бонусная система и применение скидок в корзине
Сегменты аудитории
Сегменты выделил на основе логики ассортимента и ключевых сценариев покупки: часть пользователей выбирает оптику по рецепту и параметрам, часть — по внешнему виду и бренду, родители чаще ориентируются на надёжность и безопасность.
| Сегмент | Характеристики | Доход | Главная задача | Почему будут пользоваться |
|---|---|---|---|---|
| Покупатели «для здоровья» | Выбирают оправу и линзы по рецепту, важны параметры, сроки изготовления, консультации | Средний: 50–120 тыс ₽/мес | Подобрать оправу и лизы без ошибок | Структурированная карточка товара, понятные параметры и доставка/самовывоз, сценарии под рецепт |
| Покупатели «для стиля» | Солнцезащитные очки, выбор по внешнему виду, бренду и посадке | Средний/выше среднего: 70–180 тыс ₽/мес | Быстро сузить выбор и понять, как очки выглядят на лице | Сильный листинг, удобные фильтры, онлайн-примерка, быстрый просмотр вариантов |
| Родители (детская оптика) | Ищут детские оправы/линзы, важны надёжность, гарантия, простота заказа | Средний: 60–150 тыс ₽/мес | Купить без ошибки с минимумом риска для ребенка | Ясные категории и подсказки, быстрый путь к покупке, возможность записи на диагностику |
Job Stories — боли и гипотезы
| Когда (обстоятельство) | Я хочу (мотивация) | Чтобы (результат) | Боль | Гипотеза |
|---|---|---|---|---|
| Я выбираю очки в каталоге | быстро сузить ассортимент | увидеть подходящие модели | Слишком много вариаций, сложно сравнивать | Фильтры по смысловым признакам + удобная карточка товара прямо в листинге |
| Я ищу конкретный бренд/модель | найти за несколько секунд | не перебирать категории вручную | Поиск выдаёт не релевантные модели и не ведет к нужной категории | Поиск с подсказками: запросы/категории/страницы/товары в виде карточек |
| я выбираю оправу и сомневаюсь, как она будет смотреться | быстро проверить посадку и образ | не ошибиться с выбором и не выбирать “вслепую” | По фото сложно понять посадку, а похожие модели сложно отличить друг от друга | «Онлайн-примерка» как способ проверить посадку модели как опция в карточке + фильтр “доступна примерка” + быстрый запуск из листинга |
| Я смотрю карточку товара | быстро понять важные мне моменты | принять решение без прокрутки «простыни текста» | Важная информация размазана по странице | Простая и понятная структура: фото, варианты, характеристики, описание, детали заказа и доставки |
| Я оформляю заказ | завершить покупку без ошибок | заранее понимать итоговую сумму | Чекаут выглядит длинным, а итог и условия считываются не сразу | Оформление в 2 этапа: состав заказа → доставка/оплата, фиксированный итог-блок справа |
| Я возвращаюсь после покупки | купить повторно и выгоднее | не вводить данные заново | Нет удобного ЛК и выгодных повторных механик | ЛК: заказы, бонусы, скидки, промокоды, избранное, сообщения, настройки |
| я выбираю очки и не уверен, что именно мне подойдёт | быстро получить рекомендацию и понять следующий шаг | не тратить время на случайный выбор и прийти к подходящему варианту | Ассортимент большой, хочу посмотреть вживую, страшно ошибиться с покупкой | CTA «Записаться на диагностику»: короткая форма, чёткий результат , затем сценарий продолжения — подбор и рекомендации с переходом к подходящим товарам |
Решения — ключевые разделы
Главная
Главную собрал как витрину и развилку воронки: пользователь мог сразу перейти к выбору товара или выбрать сервисный сценарий – запись на диагностику. В шапке привычная навигация: поиск, быстрые категории и быстрый доступ к избранному, корзине и личному кабинету
Разделил первый экран на два сценария, характерных для рынка оптики: пользователь либо идёт в каталог, либо выбирает личную консультацию и диагностику
Ниже добавил коммерческие подборки: новая коллекция, скидки, хиты. Такая структура сокращает путь до каталога и даёт точку входа для пользователей, кто не готов покупать сразу, но готов ознакомиться с ассортиментом
Навигация каталога
Верхнее меню раскрывается в мега меню-хаб под каждую крупную категорию: формы и типы оправ (визуал), пол (сегментация), бренды с логотипами (имидж), популярные подборки и быстрые ссылки (скорость навигации)
Для каталога на 20 000+ позиций мега-меню стало быстрым входом в ассортимент: пользователь попадал в нужный раздел без длинной цепочки подкатегорий, а бизнес получал прямые входы в высокомаржинальные и промо-разделы
Каталог и фильтры
Сделал карточки в каталоге компактными, чтобы на первом экране помещалось больше моделей и было проще сравнивать. В базовом состоянии они показывают только главное: фото, название, цену и лейблы
В проектировании фильтров я опирался на реальные критерии выбора оптики: наличие, параметры оправы и линз, бренды, материалы, цвета, размеры, промо-теги и возможность онлайн-примерки. Это сокращает шум в выдаче и ускоряет поиск подходящей модели в ассортименте с большим количеством вариаций.
Карточка товара в каталоге
При наведении карточка товара раскрывается в самодостаточный мини-просмотр: появляется слайдер, быстрые параметры и варианты, артикул, доступ к онлайн-примерке и целевые кнопки. Мини-просмотр снижал количество лишних переходов и давал пользователю быстро считать главное по модели прямо из листинга, не открывая каждую модель отдельно. Это сокращает путь до избранного и корзины.
Страница товара
Страницу товара собрал компактно и по приоритетам. Первый экран собрал вокруг решения «подходит ли мне эта модель»: галерея, цвет и размер, наличие, цена, акции, онлайн-примерка и кнопки покупки находятся до длинного описания.
Ниже — информационная часть, которая помогает уточнить выбор: характеристики с размерами, описание и доставка в виде отдельных блоков. Такая структура сокращает прокрутку, ускоряет сравнение вариантов и снижает риск ошибки при выборе: нужные параметры и условия покупки пользователь видит до добавления в корзину.
Корзина и оформление заказа
Оформление разделил на понятные блоки: личные данные, доставка и оплата. Справа — фиксированный итог с промокодом, бонусами и финальной суммой. Пользователь видит итог, доставку и оплату до подтверждения заказа, что снижает вероятность ошибки и отказа на последнем шаге
Личный кабинет
Я собрал ЛК вокруг повторных покупок и удобства клиентского сервиса: быстрый доступ к последнему заказу и статусам, бонусы и персональные скидки, промокоды с логикой «выбрать и применить в корзине», избранное, сообщения и настройки
Сохранённые данные и адреса ускоряют повторный заказ, а история заказов закрывает пост-покупочный сценарий без обращения в поддержку.
Поиск
Поиск даёт подсказки и ведёт к результату несколькими путями: частые запросы, релевантная выдача, совпадения по страницам, разделам каталога и товаров в мини-карточках в выпадающем окне. Это сокращает путь к товару для пользователей, которые приходят за брендом или конкретной моделью
Сравнение
Добавил сценарий сравнения для похожих моделей, чтобы пользователь видел ключевые отличия по параметрам в одном месте. Это упрощает выбор и убирает необходимость постоянно переключаться между карточками товаров
Отложенная загрузка (Skeleton)
Добавил skeleton-состояния для главной, каталога и карточки товара, потому что при большом ассортименте и mobile-трафике загрузка могла восприниматься как зависание, что влияет на потерю трафика и выручки. Skeleton сохраняет структуру страницы во время подгрузки и делал ожидание понятнее для пользователя
Дизайн-система и UI Guide
Собрал UI Guide и компонентную базу для 200+ макетов, чтобы разработка получила единые правила сборки, состояний и поведения элементов. Это снижало риск расхождений между макетами и реализацией на большом количестве eCommerce-экранов. Дизайн система включает в себя: типографику и цвета, токены, сетки под устройства, карточки, фильтры, таблицы/списки, формы и состояния интерактивных элементов, поп-апы и служебные статусы
Итоги
В результате за 2 месяца я спроектировал полноценный eCommerce-канал для десктопа и мобильных устройств: каталог, поиск, фильтры, карточки товаров, корзину, оформление заказа и личный кабинет. Сайт сохранял SEO-структуру и переводил пользователя от выбора модели к покупке через корзину.
- Перевел сайт из каталога-витрины в «интернет магазин»: корзина, чекаут и сценарии выбора сделали онлайн-покупку полноценным каналом продаж
- Упростил поиск товаров: фильтры, поиск и карточка в листинге сократили время до выбора модели в ассортименте 20 000+ позиций
- Собрал понятный чекаут: доставка и оплата были разнесены по блокам, закрепленный итог снижал ошибки и сомнения на финальном шаге
- Поддержал повторные покупки и сервис: личный кабинет на 9 разделов закрывал пост-покупочный сценарий, а запись на диагностику дает вход для пользователей, не готовых покупать сразу