Explore
Уложитесь в мой дедлайн?
Обязательное поле
Некорректный номер
Некорректный Email
Обязательное поле
Все поля обязательны к заполнению
Далее
Далее
Роль в проекте
Интересующая услуга
Примерный бюджет
Пожалуйста, проставьте по варианту в каждой категории
Отправить
Отправить
several colorful figures
Заявка отправлена
В ближайшее время с вами свяжется наш менеджер
Oops! Something went wrong while submitting the form.
Вам кажется, что с дизайном все нормально. Но так ли это?
Бесплатный чек-лист для проверки интерфейса. Оцените, насколько хорош ваш дизайн и определите, нужно ли вам что-то менять.
Забрать чек-лист
Забрать чек-лист
Соберите архитектуру EdTech-платформы. Без IT-экспертизы
Понятная инструкция по разработке архитектуры. Для  тех, кто хочет сменить платформу,
но не знает как.
Полезно онлайн-школам, частным оффлайн-школам и отделам корпоративного обучения, которые хотят масштабироваться.
Забрать инструкцию
Забрать инструкцию
Время чтения:
10
минут

Прозрачный путь к идеальной паре очков: как мы сделали дизайн для федеральной сети оптик

Сергей Никоненко
COO
Опубликовано
Nov 11, 2025
Обновлено
Nov 12, 2025
теги кейса
кейс в фактах и цифрах

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

Мы помогли клиенту пройти путь от гипотезы продукта до финального дизайна веб-приложения. В кейсе расскажем, как исследовали рынок, собрали фидбек от пользователей и создали интерфейс, который объединяет бизнес-логику и удобство для покупателя.

Контекст проекта 

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

Таблица с целями, результатами и респондентами исследования: сформулированы гипотезы по позиционированию, ценам и аудитории маркетплейса очков.
Фрагмент исследовательского этапа: цели, результаты и аудитория discovery-фазы

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

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

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

Интерфейс маркетплейса очков: каталог оправ и промо баннер со скидкой
Так выглядит экран интерфейса маркетплейса очков

Смотрим на продукт глазами будущих покупателей

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

Черно-белый прототип, который мы показывали пользователям на этапе интервью
Прототип интерфейса маркетплейса оптики: экран карточки товара, представленный в черно-белом виде для тестирования сценариев

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

  • путались в иконках и сценариях («что значит вешалка?», «зачем оплачивать примерку?»);
  • ожидали онлайн-примерку через AR, а не офлайн;
  • хотели больше прозрачности: сколько очков можно взять на примерку, как долго хранится товар, где отследить заказ.

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

Хотите проверить гипотезу продукта, прежде чем вкладываться в разработку?
Мы в Purrweb проводим discovery-фазы, которые помогают бизнесу увидеть реальные запросы пользователей и избежать лишних затрат.
Обсудить исследование
Обсудить исследование

Создаем структуру будущего маркетплейса

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

Сравнение экранов корзины маркетплейса оптики: черно-белый прототип с базовой структурой и цветной финальный дизайн.
Экран корзины: слева — прототип с базовой логикой, справа — финальный дизайн с цветом и акцентами
Сравнение прототипа и финального дизайна карточки товара: слева монохромная структура интерфейса, справа цветной экран с фотографией очков и CTA-кнопками.
Карточка товара: на прототипе — только структура, в финале — выразительные фото и понятные кнопки
До и после: черно-белый прототип оформления заказа и финальный цветной интерфейс.
Экран оформления заказа: сравнение базового прототипа и итогового дизайна с чистой типографикой и акцентами

Мы сознательно не добавляли визуальных деталей — только логика и сценарии, без отвлекающих элементов.

Мудборды и поиск стиля

Чтобы найти визуальный стиль будущего сервиса, мы составили пять разных мудбордов. Каждый отражал свое настроение: от медицинской эстетики до техно- футуристичного визуала.

Мудборды для маркетплейса очков: разные визуальные стили — медицинская эстетика, fashion-подход, технологичные тренды

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

Итоговый мудборд
Мудборд, который в итоге лег в основу UI-дизайна приложения

Отталкиваясь от мудборда, мы продумали палитру, типографику и декоративные элементы. 

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

Палитра
В основе палитры — бежево-коричневые тона, разбавленные контрастом черного и белого

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

типографика Coolvetica и Raleway для интерфейса
Шрифтовые пары для дизайна интерфейса приложения

А вот как выглядела хиро-пейдж веб-приложения в нашем дизайн-концепте. Главный экран сразу создает ассоциации комфорта и чистоты благодаря легкости дизайна, визуальной “изюминке” в виде подписи-паттерна и нестандартной композиции.

Главная страница маркетплейса: логотип бренда, блок с популярными товарами и описание компании.
Цветовая гамма бежевых и коричневых оттенков поддерживает ощущение высокого сервиса на протяжении всего взаимодействия

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

каталог солнцезащитных очков с разделением товаров и названиями

Так появился минималистичный и современный интерфейс, где все внимание пользователя сфокусировано на удобном выборе товаров.

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

В итоге

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

В результате у федеральной сети оптик появился веб-сервис с понятной логикой:

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

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

Почему Purrweb

Экспертиза в дизайне

В портфолио более 550 проектов — от маркетплейсов и IoT до e-commerce и образовательных платформ. Мы знаем, как адаптировать дизайн под задачу и аудиторию.

Работаем как единая команда

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

Превращаем идеи в продукты

Не нужен 10-страничный бриф. Достаточно идеи — мы поможем её оформить, уточним детали и предложим креативные решения.

<a class="blog-modal_opener">Расскажите нам о проекте</a> — и мы прикинем сроки, бюджет и план работы.

Содержание
Ищете слаженную команду разработки?
Готовы помочь с дизайном  и разработкой приложений для бизнеса и стартапов
10 лет на рынке
550+ проектов

Похожие статьи

Гайд: как сделать приложение в сфере недвижимости и не разочароваться
Как из джуна вырастить сеньора: HR-инструменты для развития сотрудников
Фильмоскоп: сделали дизайн приложения, где можно купить одежду из сериалов
Процесс пресейла и оценка проекта: как избежать ошибок?