Як ми робили додаток міжнародної програми лояльності PINS: кейс

В кінці 2016 року ми випустили мобільний додаток для міжнародної програми лояльності PINS, яка об'єднує понад 700 постачальників товарів і послуг і працює переважно на півночі Європи і в Росії. Але географія розширюється, кількість партнерів і користувачів PINS збільшується, тому додаток замислювалося як масштабований інструмент адресного обслуговування користувачів — де б вони не знаходилися. В рамках розробки перед нами стояло кілька цікавих завдань. У їх числі — забезпечити підтримку шести європейських мов, реалізувати ряд географічних функцій і зробити максимально просту процедуру реєстрації.




Мета: Мобільний додаток має стати потужним прискорювачем припливу клієнтів у систему лояльності PINS

image
Максим Димитренко, менеджер проекту, Redmadrobot
«До появи додатки люди оформляли іменну пластикову картку на сайті, чекали її доставки і тільки потім починали нею користуватися. Тобто заходив чоловік в магазин або кафе, бачив стікер PINS, розумів, що це потенційно вигідна для нього штука, але без картки зробити нічого не міг. А тепер може — завантажує додаток, вводить свій номер телефону і миттєво бере участь у програмі, користується знижками, збирає і витрачає бали. Іменна картка йому все одно прийде, але поки вона йде, він їй вже користується. В майбутньому від пластику можна буде і зовсім відмовитися».




Data is the key

Програми лояльності — явище не нове, але не всякий бізнес може собі дозволити запустити і підтримувати таку систему самостійно. Невигідно випускати пластикові карти, розгортати у себе IT-інфраструктуру для їх обслуговування і наймати фахівців для її підтримки. PINS надає все це на аутсорсе, а заодно проводить маркетингові активності по своїй загальній базі зареєстрованих користувачів, нарощуючи купівельну аудиторію для своїх партнерів (кафе, кінотеатрів, роздрібних магазинів тощо). Найцінніше в таких програмах — це, звичайно, користувальницькі дані, та отримати їх від клієнтів критично важливо для бізнесу.

image
Максим Димитренко, менеджер проекту, Redmadrobot

«Тут простежується принцип win-win: я, як простий користувач, хочу якусь знижку і отримую її, використовуючи карту PINS. Цю знижку мені оплачує партнер програми, який за ці гроші отримує доступ до бази з моїми даними, за яким потім може формувати таргетовані пропозиції».


Завдання на старті

Компанія PINS хотіла мобільний додаток, що:
— Замінить пластикові карти
— Буде простим та комфортним у використанні
— Буде пропонувати користувачеві систему винагород
— Буде збирати даними про клієнтів
— Буде мати географічну прив'язку до місцевості
— Буде працювати на шести мовах

Спочатку список був ширшим і включав в себе деякі ідеї, від яких довелося відмовитися. Наприклад, ми поклали в бэклог «погодні» функції – припустимо, йде дощ, і користувачеві виводяться пропозиції, де поблизу можна зі знижкою купити парасольку чи в якомусь кафе чи кінотеатрі можна «вигідно» перечекати негоду. На першому етапі ми зробили звичайне геотаргетирование — користувач заходить в додаток і дивиться найбільш актуальні в даний час і в даному місці пропозиції від партнерів PINS.



Проектування та дизайн

«Заміна» пластикових карт додатком — це найлегша частина історії: користувач показує віртуальну картку зі штрих-кодом та індексним номером з екрану мобільного пристрою. Індекс необхідний, оскільки поки що не всі партнери PINS тримають у себе пристрою для зчитування штрих-кодів, і в цьому випадку карту можна перевірити за номером.



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



Ми впевнилися, що в наш дизайн будуть вписуватися і зображення знижкових карт від партнерів PINS (партнерських знижкових програм), незалежно від їх насиченості і контрастності. Забігаючи вперед — в пам'яті самого пристрою зображення цих карт не зберігаються, а підтягуються з сервера (інакше збірка була б занадто важкою).

Ми хотіли забезпечити чорним фоном і географічні карти, але від цієї ідеї довелося відмовитися, оскільки в додатку працюють Google Maps і на Чоловічий на iOS.

Реєстрація, гейміфікація і локалізація
З одного боку, все просто і зрозуміло: PINS надає користувачам знижки в обмін на інформацію про себе. Однак процес реєстрації може в буквальному сенсі розполохати всіх користувачів (особливо мобільних). За різними оцінками, від 15% до 68% користувачів видаляють свежеустановленные додатка, якщо їм здається, що onboarding (процес реєстрації) занадто довгий. Тому зручна реєстрація стала для нас одним із ключових завдань.

image
Сергій Гальцев, арт-директор Redmadrobot
«Партнерам PINS потрібно дізнатися безліч різних відомостей про користувача – адреса проживання, стать, вік і так далі. Цих даних дійсно дуже багато. Для користувача вводити їх все — очевидний стрес. Незручно, особливо з мобільного пристрою, неприємно — хочеться залишити якісь «ліві» дані. Якщо відразу запропонувати ввести всі ці відомості, буде дуже високий відсоток відмови, і ніякого притоку клієнтів не трапиться».


Як тут бути? Ми вийшли з положення за допомогою досить простої хитрощі: при первинній реєстрації користувач вводить тільки номер телефону. Все, програма готова до використання та накопичення пінів (бали PINS). Додаткові відомості знадобиться вводити тільки коли користувач захоче витратити накопичені бали. Тоді у нього з'явиться набагато більший стимул вводити потрібну інформацію.

Ще одна деталь: користувачі не люблять перегортати занадто багато екранів. Завдяки вікон, меню нам вдалося зробити так, що у користувача складається враження, ніби він залишається на одному і тому ж екрані.
Ми також інтегрували в додаток ігровий елемент: користувач може поставити собі мету накопичити піни, щоб їх вистачило на покупку якого-небудь товару або послуги (це можуть бути авіаперельоти, гаджети, подарункові сертифікати та багато іншого). Цей процес візуалізований у вигляді прогрес-бару, який, як і кінцева мета накопичення, видно відразу при вході в програму.

image
Дмитро Соколов, фахівець з диджитальным продуктів, PINS
«При проектуванні програми ми звернули пильну увагу на переваги наших користувачів, дізналися, що їх цікавить найбільше в нашій програмі. Однією з головних функцій, мабуть, є елемент гейміфікації – можливість поставити персональну мета. Ми хотіли, щоб користувачі відразу знаходили для себе мотивацію до активної участі в програмі і поступово йшли до поставленої мети»


Інша цікава історія – локалізація. Додаток повинен працювати відразу на шести європейських мовами – англійською, естонською, фінською, латиською, литовською і російською. Мови різні, розрізняється і середня довжина слова — на екранах мобільних пристроїв місця не так багато, а, наприклад, у фінському слова бувають дуже довгими. Тому тестувати різні мовні версії інтерфейсу доводилося особливо скрупульозно. З самого початку, ще на етапі проектування в дизайні ми закладали максимально допустиму довжину тексту у всіх елементах інтерфейсу. У тих випадках, коли довжини полів все одно не вистачало, ми підбирали більш короткі слова-синоніми.



Розробка

iOS-версія програми для PINS стала вже не першим нашим проектом цілком на Swift. Для написання Android-версії використовувався Kotlin. Ми активно застосовували власні бібліотеки.

image
Роман Чуркін firmach, провідний iOS-розробник Redmadrobot

«У нас є деякі внутрішні напрацювання, які ми використовуємо з проекту в проект. До них відноситься бібліотека Foundation, яка дозволяє швидко розгортати шар завантаження, обробки та зберігання даних і бібліотека з реалізацією найбільш типових UI-рішень — нестандартних контролів і прийомів, які люблять використовувати дизайнери Redmadrobot»

А ось компонент Progress Bar ми писали з нуля, з прицілом на красиву анімацію. Завдання полягало в тому, щоб зробити процес взаємодії користувача з додатком безперервним. Анімація завантаження досить неординарна сама по собі: для Android-версії ми вирішили не використовувати покадрову анімацію, оскільки вона була б не настільки плавним, наскільки нам хотілося. До того ж вона збільшила обсяг споживаної пам'яті і підсумковий розмір програми. А ось в iOS вирішено було все-таки робити покадрову анімацію: це дозволило заощадити час на початкових етапах розробки, так як реалізація елементарна.



Ми також зробили однакові поля текстового введення у версії під iOS і Android. Частково цей елемент ми вже реалізували в ході розробки минулих проектів. Він входить до складу нашої UI-бібліотеки. Під час розробки PINS ми відшліфували компонент, допрацювали анімації між станами.



image

Олександр Блінов Xanderblinov, провідний Android-розробник Redmadrobot

«Візуальне подання iOS і Android стає дуже близьким, так як вони використовують UX-патерни один одного. Це позитивна тенденція, оскільки спрощує міграцію користувачів між операційними системами.
До недавнього часу на платформі Android не було передбачено нижньої горизонтальної панелі, яка давно є в iOS. Навігацію доводилося робити бічній, в результаті додатки під iOS і під Android, навіть виконані в єдиному стилі, все одно розрізнялися в цьому аспекті. Також розмір пристроїв на Android все збільшується, і область комфортного взаємодії спускається в нижню частину смартфона.
Платформа Android відчувала величезну потребу в паттерні нижній навігації і коли ми розробляли програму для PINS, Google несподівано анонсував появу Bottom Bar. Зрозуміло, ми вирішили включити його в програму»


Проблема була в тому, що анонс основні рекомендації від Google надійшли, а ось інструменти для розробки – ні: розробники ще не встигли викотити стандартну реалізацію цього віджета. Вона з'явилася вже після релізу PINS і до теперішнього часу залишається вкрай нестабільною. Ми використовували сторонню відкриту бібліотеку, в якій виправили ряд помилок.

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

image
Андрій Муравйов, backend-розробник Redmadrobot
«Більшу частину даних для мобільного додатку наш бекенд отримує з CLM замовника, яка має ряд обмежень. Також нас попросили по можливості знизити кількість запитів до цієї системи, щоб не перевантажувати її, адже саме через неї проходять всі транзакції, що здійснюється нарахування бонусних балів і так далі. В результаті, скрізь, де це можливо, бекенд додатки кешує інформацію на своїй стороні, деякими даними системи обмінюються не в реальному часі, а через регулярну синхронізацію. У ряді випадків звернення до CLM ми здійснюємо асинхронно, щоб скоротити час відповіді від нашого сервера»

Два інших великих компонента системи, з якими було потрібно інтегруватися — rewards-платформа PINS, що дозволяє з користю витратити накопичені бали, і карта партнерів. Окрема історія стосується «подвійного» пошуку — по геозапросам і по брендам.
Ми зіткнулися з обмеженням наявної системи, що зберігає актуальну інформацію про точках продажу партнерів, яка, як з'ясувалося, вміє шукати об'єкти за тегами (наприклад, назва, рід діяльності), але не за їх адресами. В умовах стислих термінів команда спільно з PINS виробила рішення з двома пошуковими полями, географічний пошук був реалізований з використанням можливостей Google Maps.

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

Потрібно було придумати архітектуру, яка дозволила б швидко шукати відповідні пропозиції для кожного користувача. Ми зупинилися на рішенні з використанням пошукового движка Elasticsearch і залишилися задоволені вибором.

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

Підсумок
Нам вдалося зробити зручний і корисний продукт: досягти наступності на iOS — і Android за рахунок нижній навігації, зробити зручний onboarding, реалізувати таргетовану подачу пропозицій і акцій за місцем розташування користувача/ часу/ використовуваної мови. Додаток буде розвиватися, з'являться нові функції, в тому числі з упором на геймификацию.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.