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

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

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

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

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

— у пользователей есть интерес к покупке дизайнерских очков,

— наибольший потенциал для роста — в регионах, где мало офлайн-альтернатив,

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

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

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

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

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

• путались в иконках и сценариях («что значит вешалка?», «зачем оплачивать примерку?»);

• ожидали онлайн-примерку через AR, а не офлайн;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• пользователь сразу видит, как заказать очки на примерку или купить их онлайн;

• главная и каталог не перегружены деталями, а ведут к нужному товару;

• оформление заказа прозрачно и без сюрпризов;

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

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