Vodafone Ukraine: паспортизація абонентів
- Рік: 2018
- Країна: Україна
- Тип: сервіс реєстрації мобільних номерів
- Сфера: телекомунікації
- Розроблені елементи: UML діаграми, UX прототипи, UI дизайн
Український уряд прийняв новий закон, який зобов'язує реєструвати всі мобільні номери. Користувачі всіх мобільних операторів повинні вносити особисту інформацію до своїх акаунтів. Інформація повинна бути підтверджена особистим ID або цифровим підписом.
Компанія Vodafone Ukraine вирішила допомогти своїм клієнтам втілити нову вимогу уряду максимально зрунчо. Для розробки програмного забезпечення вона найняла українську ІТ-компанію Document.online. Ця команда має величезний досвід у розробці сервісів електронного документообігу. А розробити UX/UI дизайн вони запросили нашу студію.
Підготовка
Ми вирішили розпочати з UML діаграм взаємодії користувача. Це була візуалізація всіх дій, які юзер міг виконувати з інтерфейсом.
Style Guide
Цей новий сервіс мав виглядати подібно до інших сайтів Vodafone. У нас була задача чітко наслідувати їхній UI кіт і концепти дизайн системи. Нам довелося працювати із неймовірним посібником настанов по стилю компанії, який мав 376 (!) сторінок.
.
Розробка UX
Прототип
Наші UX-дизайнери дослідили путівник по стилю і розпочали UX-прототипування в Axure. У прототипі були реалізовані всі кроки взаємодії, підтвердження дій та анімація. Він був настільки реалістичним, що замовник подумав, ніби це вже фінальна версія UI-дизайну. Ми написали різні можливі сценарії поведінки користувача, щоб перевірити всі функції системи. Цей документ заощадив купу часу програмістам та QA.
Кейси
Ми реалізували функцію, яка дозволяла додавати безліч номерів.
Деякі користувачі Vodafone мають кодові слова, прив'язані до аккаунтів. Нам потрібно було створити декілька різних способів підтвердження: за допомогою СМС та цих кодових слів.
Ми розробили два різні інтерфейси для приватних користувачів та компаній.
Ми додали три варіанти для підтвердження особистої інформації: за допомогою BankID, digital signature та MobileID.
Ми розробили wizard інтерфейс у стилі вертикальної гармошки. Коли користувач закінчує перший крок, цей пункт автоматично згортається і відкривається наступний. Це зосереджує увагу користувача і дає фідбек про виконану дію.
Вся інформація, яку ми могли витягнути з цифрового підпису, заздалегідь заповнювалася у бланку.
Ми використали існуючий словник адрес і додали розумні підказки при пошуку.
Користувач мав можливість перевірити всю інформацію та виправити помилки перед тим як завершить реєстрацію.
Розробка UI
Для розробки UI ми вибрали додаток Figma. Це полегшило роботу програмістам, бо вони могли запросити якийсь новий елемент і отримати його в реальному часі
Керівництво по стилю компанії було не ідеальним. Воно складалось із 376 сторінок, з яких лише 22 були з елементами UI кіта. Стиль мав проблеми з деякими розмірами, падінгами та маленькими шрифтами. Але ми змогли ідеально втілити його у нашому проекті та вразити замовника
Адаптивність
Для мобільної версії сайту дуже важливо виглядати якісно та зрозуміло на маленьких екранах. Ми брали до уваги всі розміри екранів, які були вказані в настановах по стилю. Розробляючи всі елементи з нуля, ми розуміли, що вони мають виглядати коректно на всіх стандартних розширеннях: настільна версія, для планшету та мобільна.
Підсумок
Щоб проект був успішний, в ньому має бути хороша кооперація між дизайнерами, програмістами та QA. Ми розробили багато корисних елементів (UML діаграми, сценарії поведінки користувача тощо), щоб зробити ефективнішою нашу співпрацю та полегшити процес розробки всім. Також цьому сприяли сучасні технології Axure та Figma. У нас був чат, з усіма залученими до проекту, де ми оперативно вирішували проблеми.
Ми раді працювати із такою великою компанією, як Vodafone, яка має свій власний стиль, оформлений у style guide. Також нам дуже приємно співпрацювати з Document.online, це блискучий приклад компанії з розробки програмного забезпечення, яка має високий технічний рівень і розумну ІТ-команду. І ми дуже щасливі за нашу країну, що створила такий дивний закон, завдяки якому наші дизайнери мали можливість працювати над цим проектом.
