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