Telecom
Wi-Fi та eSIM застосунок
Британський застосунок зв'язку, де Wi-Fi-плани і мобільний eSIM живуть в одному продукті. Я перебудувала зношену дизайн-систему і спростила архітектуру, а весь процес пройшов як AI SDLC: спершу застосунок у коді, потім Figma. Менше ніж 50 годин мого дизайн-часу.
- Країна клієнта
- Велика Британія
- Платформа
- Кросплатформно (React Native)
- Моя роль
- UX/UI Designer
- Тривалість
- 1 місяць · 2026

Огляд
Три типи користувачів: люди на військових базах, гості партнерських закладів і клієнти eSIM.
Продукт
Головна складається з того, що вже є на акаунті, тож той самий екран для новачка працює як магазин, а для клієнта як панель керування.
Процес
Кожен флоу був тікетом у Jira, потім клікабельним застосунком у коді, потім Figma через HTML to Design, а токени налаштував агент Figma.
Статус
Менше ніж 50 годин дизайн-часу. Це дав процес, а не години.
Контекст
01
Продукт
Купити зв'язок і керувати ним: плани, оплата, підключення, підтримка. eSIM має один універсальний план.
02
Користувачі
Здебільшого не технічні люди в дорозі і на реальних мережах, де ясність важливіша за дотепність.
Живий продукт і жодного дизайн-файлу. Що має робити застосунок, ми взяли з того, як продукт працює сьогодні, а не з бібліотеки у Figma.
Підхід
Опис
Кожен флоу описаний Jira-тікетом ще до першого екрана.
Збірка
Клікабельний застосунок у коді з Claude Code, перевірений на пристрої.
Перенос
Figma згенерована через HTML to Design; токени та стилі налаштував агент у Figma.
Спершу застосунок. Figma документує те, що вже працює.
Процес
Ключова функціональність
01
Запуск без зв'язку
Проблема
Застосунок зв'язку відкривають тоді, коли зв'язок і є проблемою. На старті немає ні сесії, ні даних, тож людина бачить лише те, що вже на екрані.
Гіпотеза
Якщо одна перевірка йде до того, як щось намальовано, застосунок показує власний стан, а не напівзавантажений.
Рішення
Одна перевірка на старті і два виходи. Є зв'язок: звичайний вхід і маршрутизація. Немає: окремий екран з підказкою і кнопкою «Спробувати ще», без закешованого акаунта чи плану, що вдає актуальність.

Збій намалювали раніше, ніж збудували щасливий шлях.
02
Головна, що підлаштовується під користувача
Проблема
Один екран мав служити трьом людям: тому, хто ще нічого не купив, тому, хто має Wi-Fi, і тому, хто має Wi-Fi і eSIM. Каталог продає клієнтам те, за що вони вже платять, а дашборд дає новачку порожню кімнату.
Гіпотеза
Якщо головну складати з того, що є на акаунті, одна сторінка буде магазином для одних і панеллю керування для інших.
Рішення
Головна будується зі стану. Немає акаунта: двоє дверей, плани або вхід. Є одна послуга: її картка зі швидкістю, пристроями і наступним платежем, а нижче eSIM як єдине, що ще можна додати. Є обидві: купувати нічого, бо двох однакових ні в кого не буває. Купівля eSIM одразу його активує, бо план лише один.

Продукт, який не може продати те, що в тебе вже є.

Клієнт: спершу стан активного плану, а під ним eSIM, єдине, що лишилося додати
03
Оболонка застосунку: три таби
Проблема
У вебпорталі було сім пунктів навігації, і плани просилися восьмими, хоча плани є шляхом, а не місцем.
Гіпотеза
Якщо оболонка тримає три вкладки, навігація відповідає тому, як працює продукт.
Рішення
Сім сторінок стали трьома вкладками: Головна, Підтримка, Акаунт. Вкладки «Плани» немає, бо головна вже показує, що цей акаунт ще може купити.

Головна, Підтримка, Акаунт: три таби, які продукту справді потрібні; плани це шлях крізь них, а не четверте місце
04
Каталоги планів
Проблема
Партнерські заклади й універсальні плани стояли в одному списку, і ніхто не розумів, що з цього справді для нього.
Гіпотеза
Якщо в застосунку лише універсальні плани, каталог перестає плутати.
Рішення
Два універсальні каталоги: базовий Wi-Fi і мобільний eSIM. Реєстрація в закладах свідомо лишилася в captive-порталі.

Каталог: місячні плани й короткострокові паси на одному перемикачі, а над ними те, що входить у кожен пас
05
Купівля плану: сім кроків до трьох
Проблема
Купівля у вебі мала сім кроків, а план обирали просто в чекауті, тож порівняння й оплата злились в одну довгу форму. Кожен крок був місцем, де можна здатися.
Гіпотеза
Якщо вибір плану вийде зі степера, а в ньому лишиться лише те, що мусить іти послідовно, купівля читатиметься як купівля.
Рішення
Три кроки: план, акаунт, перевірка й оплата. Порівняння переїхало в оболонку застосунку, бо це шопінг, а не чекаут, і з інтеграціями купівля займає секунди замість хвилин.

У степері лишається лише те, що мусить іти послідовно.
06
Акаунт: план і пристрої
Проблема
План був чимось, що можна лише прочитати: тариф, ціна, поновлення. Пауза, апгрейд чи ще один ноутбук жили деінде, а оскільки другу копію послуги ніхто не купує, акаунт є єдиним місцем для таких змін.
Гіпотеза
Якщо кожен екран послуги несе свій стан і свої дії, акаунт перестає бути чеком і стає місцем, звідки керують продуктом.
Рішення
Акаунт відкривається на послугах і їхньому стані. Кожна послуга має свій екран: «Активна» або «На паузі» з датою відновлення, а під цим пристрої, апгрейд, скасування. Пристрої мають окремий екран із назвою мережі, паролем і QR-кодом, що підключає телефон без набору.

План на паузі має казати, коли повернеться.

План на паузі: дата повернення просто на картці, а під нею три дії

Керування пристроями: назва мережі й пароль, QR-код, щоб під'єднатися без набирання, і вже підключені пристрої
07
Підтримка, завжди за один тап
Проблема
Допомога зазвичай потрібна саме тоді, коли зв'язок не працює, і часто ще до акаунта. Підтримка, що живе в акаунті, приходить запізно.
Гіпотеза
Якщо допомога є окремою вкладкою і посиланням на екранах до входу, ніхто не мусить входити, щоб дістатися людини.
Рішення
Підтримка є однією з трьох вкладок і посиланням «Потрібна допомога» на кожному екрані до акаунта. Вона дає телефон і пошту замість форми, тож працює навіть тоді, коли питання саме про зв'язок.

Допомога має працювати раніше за акаунт.

Вкладка підтримки і способи дістатися людини у шторці над нею: телефон, пошта та асистент
Ключові рішення
01
Спершу застосунок, дизайн-файл потім
Проблема
Статичні макети не показують, як купівля відчувається на справжньому пристрої, а повний файл до робочого застосунку подвоює роботу.
Рішення
Тікет у Jira на кожен флоу, клікабельний застосунок у коді з Claude Code, перевірений на пристроях, потім Figma через HTML to Design, а всі токени і стилі налаштував агент Figma.
Підтвердження
Менше ніж 50 годин дизайн-часу, і команда клікала застосунок, а не дивилась на його картинки.
02
Основи з живого продукту, а не з бібліотеки
Проблема
Дизайн-файлу не було. Веб-інтерфейс ріс як вийде: дві системи кольорів, стилі тексту множилися з кожною сторінкою, а рамки зникали на темних поверхнях.
Рішення
Основи перебудовано з живого продукту: колір ніколи не несе текст, лише заливки, обведення й іконки, з контрастом, що витримує темні поверхні. Зелений належить тільки eSIM. Manrope для заголовків, Inter для тексту, брейкпойнти 768 і 1024 із запобіжником у 600px за висотою, щоб повернутий телефон лишався телефоном.
Підтвердження
Одна система основ там, де не було жодної, налаштована у файлі агентом Figma.
03
Архітектура, що видаляє UI
Проблема
Стара структура запихала все в степери, вкладки й перемикачі: більше хрому, більше рішень.
Рішення
Купівля в три кроки, вибір плану поза степером, один універсальний план eSIM замість перемикача режимів і навігація з трьох вкладок.
Підтвердження
Сім кроків стали трьома, сім сторінок стали трьома вкладками, перемикач Wi-Fi/Mobile зник, і немає кнопки «Купити» для того, що вже є на акаунті.
Результат
- Купівля: сім кроків на вебі → три в застосунку
- Чекаут: хвилини → секунди, коли інтеграції на місці
- Навігація: сім сторінок верхнього рівня в порталі → три вкладки в застосунку
- Менше 50 годин дизайнерського часу на всі флоу
- Jira-тікет → прототип у коді → Figma, з токенами від агента
Продукт, для якого ніхто не мав дизайн-файлу, тепер має файл, що відповідає зібраному застосунку, і архітектуру, яка більше не воює з користувачами.
Наступний кейс
AI-конструктор сайтів для малого бізнесу
AI-конструктор сайтів для малого бізнесу. З етапу концепції я відповідала за e-commerce, live-редагування, онбординг і дизайн-систему, на якій стоять 2000 шаблонів, а AI-візард, перевірений A/B/C-тестами, подвоїв залученість клієнтів.
Переглянути кейс
