Разработка интерфейса заказа товара для Yota

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

- Разработали интерфейс заказа как с доставкой, так и самовывозом для всех городов России.
- Новый дизайн продуман не только для пользователя, но и для команды Yota: система компании развивается и все дизайн-решения должны быть легко реализуемы на backend.
- Интерфейс продуман и для легкого внедрения новых продуктов и услуг. Например, благодаря блочному дизайну карточек легко добавлять новые разделы — блоки, формы, баннеры и т. п. — без нарушения логики пути пользователя.

- We have designed an order interface both with delivery and customer pick-up for every city of Russia.
- The new design is thought through, but it’s not for users only, but for the Yota team as well. Yota’s system is constantly developing and all the design solutions should be easy to implement on the back end.
- The design is thought through to make the implementation of new products and services easy. E.g. thanks to the flypage’s block-type design it’s easy to add new sections like blocks, forms, banners, etc. All without ruining the logic of the user flow.

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

Задача
Детально проработали User Flow, спроектировали теоретический и самостоятельно протестировали на практике CJM, провели тестирование решений на релевантной аудитории, выявили ряд сервисных недочетов на пути покупателя и разработали интерфейс под все регионы и типы покупки продукта.

Изучение задачи, исследований и документации Yota —> User Flow —> Дизайн-гипотезы —> CJM —> Прототип дизайна —> Тестирование —> Финальный дизайн

Решение
Изучение вводных и документации
Вначале полностью изучили бизнес-функциональные требования компании к процессу заказа sim-карт, все имеющиеся исследования UJM, маркетинговые карты CJM и изменения интерфейсов Yota за последний год.

Проработка User Flow
Проверили путь пользователя на сайте для понимания какая информация на каком шаге и какая логика пути строится для потенциального клиента компании. По итогам выявили непоследовательность дополнительной информации, ряд UX-недочетов. Сделали срез аналогичных интерфейсов по конкурентным брендами, нашли недочеты в иерархии преимуществ доставки, лишние шаги до цели. Проработали вариант интерфейса со скроллом, табами, пошаговым заполнением и всеми полями на одном экране для будущих тестирований.

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

Дизайн-правила для проектирования:
максимальный минимализм; 2. переиспользование UI kit для органичной встройки интерфейса; 3. не революционное, а эволюционное развитие интерфейсов Yota
UX-принципы:
Короткий клиентский путь; 2. Информация подается своевременно; 3. Дизайн формирует прозрачные ожидания.

Тестирование
Провели два исследования с релевантной ЦА аудиторией. Выявляли прозрачность и понятность подаваемой информации и удобство пути. Обратная связь собиралась и открытыми формулировками, и дублировалась статистически. По итогам — порядка 68% внедренных изменений были реализованы в финальном дизайне.

Task
We have thoroughly worked out User Flow, designed a theoretical Customer Journey Map, and single-handedly tested it in effect. We have tested the chosen solutions on a relevant audience, uncovered several service-related weaknesses in the user flow. In the end, we have developed an interface for all the regions and types of sales.

Solution
We have studied the client's business- and functional requirements to the sim-card order process, all the UJM research on hand, CJM marketing cards and the changes that were made to Yota interfaces over the last year.

We have tested the website's User Flow to understand how and when a potential user of the company gets information on each stage, and how it is built.

We have followed Yota’s client all the way through from the point of interaction with an advertisement piece to getting a sim-card any way possible. As a result, we uncovered a discrepancy between the theoretical and ‘ideal’ way and a real one. The next step was to build clickable interfaces for further testing.

We have conducted two pieces of research with an audience relevant to the target one. We’ve tested the transparency and accessibility of the information presented, as well as whether the overall flow was user-friendly. The feedback came to us through liberal wording that doubled in statistics. In the end, about 68% of the changes implemented made it to the final design.

Прочая информация о кейсе

Разработка интерфейса для заказа товара Yota: минимум шагов до цели, своевременное информирование об этапах и формирование прозрачных ожиданий у пользователя.

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

Development of the order interface for Yota products with the minimum number of steps to the target action, timely updates on the checkout and post-checkout stages, and formation of transparent user expectations.

Текущая доступность работы

В данный момент ведутся работы по внедрению интерфейса на сайт.

Скриншоты

Видео

Комментарий заказчика

«Звучит просто — запускаем «нормальный» самовывоз на сайте yota.ru. Но у нас только с виду простой продукт — под капотом всё сложнее чем у остального телекома. И ребятам нужно было в этом разобраться очень быстро и в сжатые сроки.

Но было просто, когда на выходе первой итерации мы получили, то что я называю «хрусталевщина» — подробный CJM с включением всех точек касания. Т.е. ребята позаказывали на сайте, скатались в точку продаж. Посмотрели как продают. Даже потыкали наш продукт усиления розницы.

И это не стандарт отрасли. Просто видно, что ребятам нравится своя работа. А мне нравится работать с теми, кому нравится их работа».