Сайт Yota v2

Главное о кейсе

1. Переосмыслили новую главную страницу. Исправили проблемы, которые прослеживались на UX-исследованиях. Теперь учитываем потребности не только новых пользователей, но и действующих абонентов (например, пополнение баланса). Главная страница лучше разводит трафик на 14% и лучше адаптирована под мобильные устройства

2. Обновили страницу ключевого продукта – конструктора – и доработали сценарий покупки. Также запустили возможность заказа eSIM. Улучшили конверсию в заказ на 6%.

3. Сценарий перехода со своим номером стал дружелюбнее и эффективнее за счет пошаговой реализации с помощником-волшебником, нетипичную для операторов связи. Конверсия в заявку улучшилась на +35%

4. Обновили раздел поддержки абонентов. Обновили структуру и отображение популярных вопросов

5. Сайт Yota.ru пережил успешный рефакторинг и переезд на новую CMS. Скорость загрузки ключевых страниц улучшилась на 22%

6. Запустили долгожданную веб-версию личного кабинета. Теперь абоненты Yota могут управлять тарифом и оплачивать связь не только через мобильное приложение. На запуск MVP потребовалось всего 1,5 месяца

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

Как проект изменил жизнь пользователей

Пользователям проще теперь ориентироваться на сайте, что показывают UX-исследования и пользовательские метрики после запуска новой версии. Запуск веб-версии кабинета значительно облегчило управление связью для абонентов на старых устройствах и планшетах.

Бизнес-задача и ее решение

Редизайн сайта
В 2023 году мы сфокусировались на перезапуске сайта Yota, который затронул как визуальные изменения, так и масштабные доработки «под капотом», сайт переехал на новую CMS. Проблема была в технических ограничениях старой платформы, сложности в поддержке. При редизайне мы опирались на потребности пользователей и болевые точки предыдущей верстки, которая была простой, но не информативной.

Новая главная
Переработали витрину и вынесли основные сценарии на главную страницу, чтобы пользователь мог быстро решить свой запрос. Теперь мы показываем не только основные продукты, но и базовые запросы действующих абонентов – например, пополнение баланса телефона/модема и обращение в чат. Конверсия в переход на продуктовые страницы увеличилась на 14%.

Новые продуктовые страницы и сценарий заказа
Улучшили взаимодействие пользователя с основным продуктом – калькулятором. Добавили дополнительное отображение выбранных минут и ГБ, что значительно повысило конверсию перехода в корзину.

Переработали страницу СИМ-карты для умных устройств, ускорив загрузку и оптимизировав форму заказа.
Также запустили продажу eSIM. Теперь пользователь может заказать не только пластиковую симку, но и электронную.

Пошаговый переход со своим номером
Через AB-тесты проверили гипотезы, которые позволили оптимизировать сценарий перехода со своим номером в Yota. Внедрили во флоу игровую механику с персонажем-рассказчиком, нетипичную для операторов связи, но показавшую отличный результат: + 35% к конверсии в заказ.

Реструктурировали раздел поддержки
Раздел поддержки ранее имел множество UX проблем. Теперь решить свою проблему стало проще, а обращений в чат с раздела поддержки стало меньше

Переехали на новую CMS
Обновили движок сайта, что дает больше возможностей по управлению контентом и SEO-оптимизации. Важным критерием для нас стала время загрузки страницы. После запуска нового сайта скорость загрузки ключевых страницы улучшилась на 22%

Веб-версия личного кабинета
Отдельной важной задачей для нас стал запуск веб-версии личного кабинета Yota. Ранее пользователи могли управлять связью только через мобильное приложение, USSD-команды или оффлайн в точках ритейла.
Новая команда смогла запустить MVP-версию всего за 1,5 месяца. Кабинет регулярно пополняется функционалом, а его постоянная аудитория растет.

Дизайн-система
Также мы выделили трек развития дизайн-системы Yota. Еще недавно на разных витринах и экранах использовался зоопарк стилей, компонентов и шрифтов. Это создавало трудности при разработке и поддержке, ошибки росли как снежный ком, а пользовательский опыт не наследовался.
Благодаря комплексному подходу в построении элементов как в мобильной разработке, так в веб, мы облегчаем жизнь:
— пользователю – за счет единых паттернов взаимодействия
— дизайнерам – не нужно придумывать одни и те же элементы по 100 раз, появилось понимание, где и как используются компоненты
— разработчикам – сократилось время время верстки, появилась полноценная документация по компонентам

Мы оптимизировали дизайн-процессы – теперь проектирование интерфейсов ориентирован на решение бизнес-задачи, а не над тем, как сделать правильно элемент.

Крафт (мастерство), реализация, технические детали

Переезд на новую CMS. Реализация сайта по технологии Single Page Aplication (SPA), за счет чего переходы на последующие страницы и сценарии стали значительно быстрее.
Внедрили дизайн-системы в процесс разработки.
Для работы над веб-версии Личного кабинета была собрана первая в Yota команда на React. Фреймворк известен своей гибкостью, удобством в масштабировании и относительной дешевизной. Но таких команд в Yota не было, как не было и готовых UI-китов и Storybook под стек. Так что нам предстояло с нуля выстраивать процесс разработки и готовить компоненты. С задачей справились на ура, и запустили кабинет даже на день раньше установленного дедлайна.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

В процессе создания продукта опирались на постоянные UX-исследования, которые проводили с активными пользователями нашей ЦА. В качестве основы использовались jobs stories, которые проверялись на прототипах.

При создании веб-версии ЛК мы стремились создать единый опыт: чтобы клиент переходя из мобильного приложения в браузер и обратно не замечал разницы. Но в вебе и приложениях действует разные паттерны и правила. Так что существующие сценарии мы мягко редактировали под движения мышки и браузерную строку.

Скриншоты