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