Развитие сайта Burger King. Кейс по продуктовому дизайну
О проекте
Сайт Burger King — это полноценный канал продаж с месячной аудиторией более 1 млн пользователей, который по своей стратегической значимости не уступает мобильному приложению.
Через веб-версию пользователи оформляют доставку и самовывоз как с десктопов, так и с мобильных устройств. Именно поэтому развитие сайта напрямую влияет на бизнес-метрики: выручку, LTV, удержание клиентов (retention) и восприятие бренда в целом.
Контекст проекта
Во время моей работы над сайтом он проходил масштабную трансформацию: фронтенд переводили на новый технологический стек.
Это открыло отличную возможность не только обновить техническую базу, но и переосмыслить пользовательский опыт (UX), повысить юзабилити и сформировать единый визуальный язык между веб-версией, мобильным приложением и киосками.
Параллельно продуктовая команда работала над ростом конверсии в заказ и усилением роли сайта как полноценного канала продаж.
Ключевые метрики
Конверсия корзины (Cart CR)
SUS (шкала системного юзабилити)
Показатель брошенных корзин
Размер аудитории
1 мин
Моя роль в проекте
Веб-сайт являлся моим ключевым продуктом в период работы в Burger King.
В зону моей ответственности входило:
Оптимизация пользовательского пути (CJM) — от выбора адреса до успешного оформления заказа;
Проектирование новой функциональности и улучшение существующих сценариев взаимодействия;
Создание единой библиотеки компонентов и дизайн-системы для веб-платформы;
Проведение UX-аудитов, конкурентный анализ и бенчмаркинг;
Плотное взаимодействие в кросс-функциональной команде с продакт-менеджером, исследователями, аналитиками, разработчиками и QA;
Авторский надзор за реализацией через дизайн-ревью и контроль качества релизов.
Ниже представлены ключевые кейсы и инициативы, которые наиболее полно отражают мою работу над продуктом.
Библиотека компонентов
Проблема
Сайт переходил на новую архитектуру фронтенда, однако его макеты всё еще были собраны на фреймах и группах.
Существующие экраны состояли из разрозненных решений и несогласованных UI-паттернов. Это критически замедляло как проектирование дизайна, так и разработку новых пользовательских сценариев.
Проблема
Создать переиспользуемую библиотеку дизайн-компонентов для сайта, синхронизировав её с другими цифровыми продуктами Burger King — мобильным приложением и киосками самообслуживания.
Методология проектирования
Я провела аудит существующего интерфейса, изучила библиотеки мобильного приложения и киоска, а также дизайн-системы других крупных цифровых продуктов.
На основе этого спроектировала архитектуру переиспользуемых компонентов.
В первую очередь в библиотеку вошли навигация, карточки, контролы и основные паттерны взаимодействия. Для каждого компонента я документировала поведение, правила использования, размеры touch-зон и краевые сценарии.
Также я организовала воркшопы для других дизайнеров, чтобы команда единообразно использовала новые компоненты и быстрее включалась в работу с библиотекой.
Итог работы
Разработано около 100 новых компонентов;
Сократилось время проектирования новых функций;
Повысилась консистентность интерфейса на сайте, в мобильном приложении и киосках;
Упростился онбординг новых дизайнеров благодаря подробной документации.
Редизайн веб-интерфейса
Проблема исследования
Старый сайт имел устаревшую навигацию, непоследовательные паттерны взаимодействия и разрозненные сценарии оформления заказа.
Это усложняло использование сайта и создавало лишнее трение на ключевых этапах воронки заказа.
Одновременно команда переходила на новый фронтенд-стек Nuxt, что позволяло пересобрать пользовательский опыт с нуля.
Контекст и вызов
Провести редизайн ключевых пользовательских сценариев веб-сайта.
Кейс
Я начала с UX-аудита существующего сайта, изучила внутренние исследования мобильного приложения и провела бенчмаркинг конкурентов в сегменте foodtech.
Вместе с продакт-менеджером мы сформировали приоритеты редизайна и сфокусировались на наиболее важных для бизнеса сценариях: навигация, авторизация, выбор способа получения заказа, корзина и оформление заказа.
Один из примеров — хедер, одна из наиболее видимых и критически важных частей. При редизайне я разделила хедер на 2 части:
Верхняя часть с менее важными для заказов разделами (купоны, новинки и акции, работа и контакты), которая скрывается при скролле;
Нижняя часть — основная, в ней лого, поиск, выбор способа получения заказа, вход в личный кабинет и корзина.
Ещё один пример — сценарий выбора ресторана.
В старой версии доставка и самовывоз существовали как отдельные сценарии. В новом дизайне карты я предложила дать пользователям возможность менять способ получения заказа внутри карты (с помощью контрола-свитчера). Также карта стала открываться не на отдельной странице (десткоп), а в виде поп-апа, что позволяет добавлять карту на разные участки пользовательского пути, при этом не прерывая его.
Итоги кейса
Показатель SUS вырос до 70+, превысив средний рыночный порог отличного UX;
Взаимодействие с брендом стало бесшовным во всех цифровых продуктах Burger King;
Снизился процент ошибок, а скорость загрузки страниц заметно увеличилась;
Визуальный язык сайта стал более современным, что повысило общую лояльность пользователей.
Снижение процента брошенных корзин
Проблема исследования
Более трети пользователей сталкивались с недоступностью товаров после изменения адреса доставки или выбора другого ресторана для самовывоза.
При этом текущий сценарий просто выдавал ошибку, вынуждая пользователя самостоятельно искать альтернативы.
Это усложняло пользовательский путь и создавало риск брошенной корзины.
Контекст проекта
Спроектировать сценарий корзины, который позволит заменить недоступные блюда, не прерывая оформление заказа.
Методология проектирования
Я проанализировала решения конкурентов и спроектировала несколько вариантов пользовательского взаимодействия.
Моя гипотеза заключалась в том, чтобы удержать пользователя в корзине и дать возможность заменить недоступное блюдо на аналогичное прямо на текущем экране, избавив его от необходимости возвращаться в меню.
Учитывая технические и временные ограничения, я разработала два варианта сценария и совместно с продакт-менеджером определила поэтапный план их запуска:
На первом этапе — MVP-решение, более простое в разработке;
На втором этапе — целевой, более бесшовный и функциональный сценарий.
Такой подход позволил нам быстро протестировать гипотезу на реальных пользователях и заложить прочный фундамент для дальнейшего масштабирования продукта.
Итог
+0,2 п.п. к конверсии (CR) в оформление заказа — результат, в два раза превысивший первоначальную бизнес-гипотезу;
После запуска решение принесло измеримую дополнительную выручку;
Разработанный паттерн лег в основу аналогичной фичи в мобильном приложении.
Ретроспектива
За время работы над платформой Burger King я помогла масштабировать веб-версию до уровня полноценного цифрового продукта.
Помимо точечных продуктовых задач, я спроектировала первую библиотеку компонентов для веб-версии, переработала ключевые пользовательские сценарии, вела работу над метриками конверсии и оптимизировала внутренние процессы дизайна.
Также я регулярно инициировала улучшения: находила новые продуктовые возможности, формулировала гипотезы и защищала их перед командой и стейкхолдерами для дальнейшего приоритезирования в бэклоге.
В целях сохранения конфиденциальности и соблюдения NDA я не раскрывала фактические значения продуктовых метрик.
