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