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 документує те, що вже працює.

Процес

AI SDLCАудит продуктуJira-тікет на флоуПрототип у Claude CodeПеренос HTML to DesignАгент Figma для токенівОбмеження React NativeМапа едж-кейсів

01 · живий вебшлях

Аудит продукту

Кожен екран живого вебпродукту на одній дошці: семикрокова воронка вгорі, акаунт-портал нижче. Застосунок вирізали з цієї мапи, тому цифри в кейсі є підрахунками.

02 · усі шляхи до першого екрана

Юзерфлоу

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

03 · шлях до пікселів

Вайрфрейми

Увесь шлях купівлі як одна зв'язана дошка з обома входами: клієнт, що повертається і входить, і новий, що обирає інтерес до будь-якого плану.

04 · по сторі на флоу

Клікабельний застосунок у Claude Code

Флоу як застосунок, який команда могла проклікати, кожен поруч зі своєю історією в Jira і станами під нею. Клік по історії відкривав її екран.

05

Перенос HTML to Design

Зібраний застосунок перенесено у Figma справжніми шарами, флоу за флоу, тож файл документує те, що працює.

06 · адаптивні змінні

Фундамент агентом Figma

Токени, типографіка й відступи як змінні з режимом на кожен брейкпойнт, налаштовані агентом. Одна таблиця вирішує, як застосунок змінює розмір.

Ключова функціональність

01

Запуск без зв'язку

Проблема

Застосунок зв'язку відкривають тоді, коли зв'язок і є проблемою. На старті немає ні сесії, ні даних, тож людина бачить лише те, що вже на екрані.

Гіпотеза

Якщо одна перевірка йде до того, як щось намальовано, застосунок показує власний стан, а не напівзавантажений.

Рішення

Одна перевірка на старті і два виходи. Є зв'язок: звичайний вхід і маршрутизація. Немає: окремий екран з підказкою і кнопкою «Спробувати ще», без закешованого акаунта чи плану, що вдає актуальність.

Запуск без зв'язку, розкладений наскрізь ще до того, як зібрано перший екран: одна перевірка, два виходи, і офлайн-стан, який не показує нічого непідтвердженого

Збій намалювали раніше, ніж збудували щасливий шлях.

02

Головна, що підлаштовується під користувача

Проблема

Один екран мав служити трьом людям: тому, хто ще нічого не купив, тому, хто має Wi-Fi, і тому, хто має Wi-Fi і eSIM. Каталог продає клієнтам те, за що вони вже платять, а дашборд дає новачку порожню кімнату.

Гіпотеза

Якщо головну складати з того, що є на акаунті, одна сторінка буде магазином для одних і панеллю керування для інших.

Рішення

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

Акаунта ще немає, тож двоє дверей і нічого більше: подивитися плани або увійти

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

Клієнт: спершу стан активного плану, а під ним eSIM, єдине, що лишилося додати

Клієнт: спершу стан активного плану, а під ним eSIM, єдине, що лишилося додати

03

Оболонка застосунку: три таби

Проблема

У вебпорталі було сім пунктів навігації, і плани просилися восьмими, хоча плани є шляхом, а не місцем.

Гіпотеза

Якщо оболонка тримає три вкладки, навігація відповідає тому, як працює продукт.

Рішення

Сім сторінок стали трьома вкладками: Головна, Підтримка, Акаунт. Вкладки «Плани» немає, бо головна вже показує, що цей акаунт ще може купити.

Головна, Підтримка, Акаунт: три таби, які продукту справді потрібні; плани це шлях крізь них, а не четверте місце

Головна, Підтримка, Акаунт: три таби, які продукту справді потрібні; плани це шлях крізь них, а не четверте місце

04

Каталоги планів

Проблема

Партнерські заклади й універсальні плани стояли в одному списку, і ніхто не розумів, що з цього справді для нього.

Гіпотеза

Якщо в застосунку лише універсальні плани, каталог перестає плутати.

Рішення

Два універсальні каталоги: базовий Wi-Fi і мобільний eSIM. Реєстрація в закладах свідомо лишилася в captive-порталі.

Каталог: місячні плани й короткострокові паси на одному перемикачі, а над ними те, що входить у кожен пас

Каталог: місячні плани й короткострокові паси на одному перемикачі, а над ними те, що входить у кожен пас

05

Купівля плану: сім кроків до трьох

Проблема

Купівля у вебі мала сім кроків, а план обирали просто в чекауті, тож порівняння й оплата злились в одну довгу форму. Кожен крок був місцем, де можна здатися.

Гіпотеза

Якщо вибір плану вийде зі степера, а в ньому лишиться лише те, що мусить іти послідовно, купівля читатиметься як купівля.

Рішення

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

Три кроки, як їх зібрано: каталог, акаунт і план, який можна перечитати перед оплатою

У степері лишається лише те, що мусить іти послідовно.

06

Акаунт: план і пристрої

Проблема

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

Гіпотеза

Якщо кожен екран послуги несе свій стан і свої дії, акаунт перестає бути чеком і стає місцем, звідки керують продуктом.

Рішення

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

Акаунт: обидва сервіси і де кожен із них стоїть; змінити план можна тут, а не в каталозі

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

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

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

Керування пристроями: назва мережі й пароль, 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-тестами, подвоїв залученість клієнтів.

Переглянути кейс