AffArts 
Тендеры и лиды
Информация
Разбираем, как измерять влияние дизайна на бизнес и принимать продуктовые решения на основе данных. Внутри — готовые шаблон для приоритизации гипотез, два шаблона «паспорта экрана» и пошаговый план внедрения дизайн-центричного подхода.
Привет! Меня зовут Игорь Фроловский, я — сооснователь, CEO и дизайн-директор дизайн-центричного агентства AffArts. Уже более 6 лет мы проектируем цифровые продукты, помогаем компаниям формировать долгосрочные отношения с пользователями и решать бизнес-задачи с помощью дизайна.
Всё это время я часто сталкиваюсь с одной и той же проблемой. Многие компании до сих пор воспринимают дизайн как просто способ «сделать проект красивым». На практике такой подход обходится дорого: страдает конверсия, растёт стоимость привлечения клиентов, а бизнес теряет деньги там, где мог бы зарабатывать.
В этой статье я хочу показать, почему сегодня дизайн — это полноценный инструмент управления продуктом. Разберём, как связать дизайн с бизнес-метриками, какие показатели стоит отслеживать и как превратить изменения в интерфейсе в измеримый финансовый результат.
AffArts — дизайн-центричное агентство. Мы помогаем компаниям превращать сложные проекты в понятные, удобные и эффективные цифровые сервисы. Наша задача — не сделать «красивее», а найти суть продукта и превратить её в работающую визуальную систему.
По версии Рейтинга Рунета мы занимаем:
14 место среди дизайн-студий России;
19 место среди креативных агентств;
17 место среди студий в продуктовом дизайне;
15 место среди студий по веб-дизайну.
В 2015 году Международный институт дизайн-менеджмента сформулировал концепцию дизайн-центричности. Её идея в том, что дизайн — это не очередной этап разработки, а один из ключевых инструментов развития бизнеса.
Дизайн помогает бренду выстраивать долгосрочные отношения с клиентами. Он определяет, как интерфейс решает задачи пользователей и ведёт их по нужным сценариям. От этого зависит, как часто человек будет пользоваться продуктом, как долго он будет клиентом компании и сколько денег ей принесёт.
Если бренды принимают бизнес-решения, опираясь на дизайн, они получает конкурентное преимущество.
Тогда эта идея звучала скорее как смелая гипотеза. Но спустя несколько лет консалтинговая компания McKinsey проанализировала результаты работы дизайн-центричных команд и пришла к похожим выводам. Исследование показало, что бренды, которые системно инвестируют в дизайн и выстраивают вокруг него процессы, быстрее растут, увеличивают выручку и показывают более высокую доходность для акционеров.
Самый известный пример такого подхода — Apple. После возвращения Стива Джобса дизайнеры перестали быть исполнителями, которые подключаются в конце проекта. Наоборот, именно дизайн начал определять, каким будет продукт, а разработка стала способом воплощать эти решения. Во многом благодаря такому подходу Apple стала компанией, которую мы знаем сегодня.
Сами по себе дизайн-макеты не увеличивают выручку компании. По крайней мере, не делают это напрямую. Между работой дизайнера и финансовыми показателями есть несколько промежуточных шагов.
Сначала дизайн влияет на то, как люди взаимодействуют с сервисом. Если интерфейс стал понятнее, человеку проще выполнить нужное действие: найти информацию, оформить заказ, заполнить форму или пройти регистрацию. Пользователи реже ошибаются, быстрее решают свои задачи и тратят на это меньше усилий.
Следом начинают меняться и продуктовые метрики. Растёт конверсия, увеличивается средний чек и LTV, снижается стоимость привлечения клиента, быстрее окупаются вложения. И уже эти изменения отражаются на бизнес-показателях: выручке, марже и прибыльности.
Например, после редизайна кнопку «Попробовать бесплатно» перенесли на первый экран, а форму регистрации сократили с восьми полей до трёх. Новым клиентам стало проще пользоваться сервисом, поэтому конверсия в регистрацию выросла с 15 до 18%. Если каждый зарегистрировавшийся в среднем приносит компании деньги, даже эти три процентных пункта превращаются в дополнительную выручку.
Есть задача на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR? Создайте тендер и выберите подходящего исполнителя из откликов.
Заполнить заявку
13843 тендера
проведено за восемь лет работы нашего сайта.
Раз дизайн действительно влияет на бизнес, значит, его влияние можно и нужно измерять. Иначе будет сложно понять, какие решения приносят деньги, а какие — нет.
Для этого существуют разные подходы. Один из самых известных — фреймворк HEART, который разработали в Google. Он помогает определить, какую именно цель должно решать конкретное дизайн-решение и по каким метрикам оценивать его эффективность.
HEART — это аббревиатура из пяти категорий метрик:
Happiness (удовлетворённость) — показывает, насколько пользователям нравится онлайн-сервис. Обычно это оценивают с помощью опросов, индекса потребительской лояльности (NPS) или индекса удовлетворенности (CSAT).
Engagement (вовлечённость) — отражает, насколько активно люди пользуются сервисом: как часто возвращаются, сколько времени проводят в продукте, какие функции используют.
Adoption (принятие) — показывает, как быстро люди начинают использовать новую функцию или сценарий. Например, сколько человек завершили онбординг.
Retention (удержание) — помогает понять, возвращаются ли клиенты в продукт спустя время и продолжают ли им пользоваться.
Task Success (успешность выполнения задачи) — оценивает, насколько легко пользователь достигает своей цели: оформляет заказ, проходит регистрацию или заполняет форму без ошибок.
На практике HEART часто используют в связке с подходом «Цели — Сигналы — Метрики». Сначала формулируют цель — какого результата хотят добиться с помощью изменений в продукте. Затем определяют сигналы — действия или изменения в поведении пользователей, которые будут говорить о движении к этой цели. И только после этого выбирают метрики — количественные показатели, по которым можно оценить результат.
Последний шаг — привязать выбранную метрику к конкретному экрану. Здесь действует простое правило: один экран — одна главная метрика.
Дизайн влияет на бизнес по-разному, но на практике чаще всего результат дают две вещи: скорость взаимодействия с интерфейсом и его простота.
Первый рычаг — скорость. Если сайт быстро реагирует на действия пользователя и сразу показывает ключевую информацию, клиенту проще дойти до цели, например, купить товар или оформить подписку.
Здесь важно следить за двумя показателями:
INP (Interaction to Next Paint) — показывает, насколько быстро пользователь получает отклик от интерфейса.
LCP (Largest Contentful Paint) — отражает, за какое время на экране появляется основной смысловой блок страницы.
Именно эти метрики сегодня рекомендует отслеживать Google при оценке качества UX. Они рекомендуют ориентироваться на INP до 200 миллисекунд и LCP до 2,5 секунды.
Даже небольшое ускорение может заметно повлиять на бизнес-показатели. Если сократить время загрузки мобильной страницы всего на 0,1 секунды, конверсия увеличится на 8–10%. Во многих случаях вместе с ней растёт и средний чек.
Второй рычаг — простой путь пользователя. Чем меньше человеку приходится разбираться в интерфейсе и искать нужную кнопку, тем выше вероятность, что он выполнит целевое действие. Поэтому важно сокращать количество полей и шагов, делать подсказки понятнее, а условия оформления заказа и дальнейшие шаги — максимально прозрачными.
Этот принцип хорошо описывает метрика Customer Effort Score (CES). Она показывает, насколько сложным пользователь считает выполнение своей задачи с помощью сервиса. В исследовании Harvard Business Review Customer Effort Score лучше предсказывала лояльность клиентов, чем CSAT (индекс удовлетворенности) и NPS (индекс готовности рекомендовать продукт). Чем меньше усилий требуется пользователю для выполнения задачи, тем выше вероятность, что он вернётся снова.
Именно поэтому принцип «меньше трения — больше денег и лояльности» работает практически для любого сценария: оформления заявки, бронирования, оплаты или идентификации.
Vodafone — один из крупнейших мировых операторов мобильной связи. После оптимизации производительности сайта Vodafone улучшила показатель LCP на 31%. A/B-тест показал, что вместе с этим продажи выросли на 8%.
Кейс показывает, что скорость интерфейса — это фактор, который напрямую влияет на бизнес-результат.
Farfetch — международный онлайн-маркетплейс. Компания связала Core Web Vitals — набор метрик от Google для оценки скорости загрузки и удобства сайта — с бизнес-метриками и рассчитала, как скорость влияет на конверсию.
Анализ показал, что после порога 2,5 секунды LCP каждые дополнительные 100 миллисекунд снижают конверсию примерно на 1,3%. А ускорение загрузки страницы товара примерно на 600 миллисекунд в A/B-тесте дало прирост конверсии на 1-5%. Кроме того, команда Farfetch разработала внутренний калькулятор, который помогает оценивать экономический эффект оптимизации производительности.
Zolla — российский бренд одежды. Команда переработала сценарии поиска и карточки товара, убрав лишнее «трение» в пользовательском пути.
В результате:
конверсия после поиска выросла в 4,66 раза,
переход из карточки товара в корзину — на 43%,
итоговая конверсия в заказ — на 97%.
Этот кейс показывает, что заметный рост может дать не полный редизайн сайта, а точечные изменения в конкретных сценариях.
Новозеландский сервис, где можно заказать анализы на биомаркеры. Однако пользователи не понимали, что их можно заказать через сайт. Исследование показало, что проблема была не в продукте, а в интерфейсе. На первом экране были абстрактные изображения, из-за которых пользователи не понимали ни ценность предложения, ни то, как заказать анализы.
Команда переработала первый экран: заменила абстрактные картинки наглядными визуалами и добавила акцентное сообщение, что анализы можно заказать онлайн. Через месяц после запуска обновлённой страницы конверсия выросла на 104%.
Первый шаг — перестать принимать дизайн-решения на основе личных предпочтений. Вместо вопросов «нравится или не нравится» и «красиво или некрасиво» стоит задавать другой: какое изменение в дизайне сервиса улучшит бизнес-метрику и как это проверить?
Работу с дизайном лучше строить как непрерывный цикл: гипотеза → проверка → доработка.
Каждая итерация занимает одну–две недели. Сначала команда формулирует гипотезу, что можно изменить в интерфейсе, чтобы улучшить конкретную метрику. Например, повысить конверсию или сократить время оформления заказа.
Затем команда оценивает ожидаемый эффект и стоимость внедрения, чтобы выбрать изменения с наибольшим потенциальным влиянием на бизнес.
После этого гипотезу тестируют — с помощью исследований, A/B-тестов или оценки продуктовых метрик после релиза. Если результат подтверждается, решение становится частью дизайн-системы и используется повторно в следующих проектах. Если нет — команда переходит к следующей гипотезе.
Чтобы упростить работу с гипотезами, мы подготовили шаблон. Он помогает фиксировать гипотезы, выбирать главные метрики, оценивать ожидаемый эффект и стоимость внедрения, а затем расставлять задачи по приоритету. Скачать шаблон можно по ссылке ниже.Шаблон для приоритизации и оценки UX-гипотез
Следующий шаг — составить «Паспорт экрана» для каждого ключевого сценария. Его основа — правило, о котором мы уже писали выше: один экран — одна главная метрика. Такой подход позволяет отслеживать, как изменения в конкретной части интерфейса влияют на продуктовые метрики.
Для первого экрана лендинга такой метрикой может быть переход к основному предложению, для формы заявки — доля заполнений, для карточки товара — добавление в корзину. Помимо основной метрики, полезно отслеживать и диагностические показатели. Например, время до первого клика, глубину просмотра, ошибки при заполнении формы, а также технические метрики INP и LCP. Такой «паспорт экрана» позволяет быстро увидеть, где пользователи не доходят до целевого действия и какие изменения стоит проверить в первую очередь.
Мы подготовили два шаблона «Паспорта экрана». Первый подойдет для лендингов, второй — для интернет-магазинов. Они помогают зафиксировать главную метрику, определить диагностические показатели и оценить, как изменения в конкретном экране влияют на продуктовые метрики.
Внедрять дизайн-центричный подход не обязательно сразу во всём продукте. Начните с двух узких мест — например, первого контакта пользователя с сервисом и ключевого шага оформления заявки или покупки. Для каждого сценария сформулируйте несколько гипотез, проведите тестирование, измерьте результат и сохраните удачные решения в дизайн-системе. Затем повторите этот цикл для следующих экранов.
Расскажите, как вы и ваша команда принимаете дизайн-решения? Вы по-прежнему опираетесь на личные предпочтения и насмотренность или проверяете решения на основе данных и бизнес-метрик? Поделитесь своим опытом в комментариях.
Если вам интересны темы продуктового дизайна, UX, исследований и онлайн-сервисов — подписывайтесь на Telegram-канал AffArts и читайте материалы на странице агентства в Workspace. Там мы регулярно делимся кейсами, исследованиями и практическими рекомендациями для бизнеса.
А также следите за нами здесь: VK, VC, Dribbble, Dprofile, Pinterest, Medium.
