NOVUS – українська мережа продуктових супермаркетів, яка увійшла до «200 лідерів української економіки» за версією Forbes. У компанії розуміють, що мобільний застосунок – це не лише можливість онлайн-покупок і, відповідно, збільшення прибутку, а й майданчик для якісної комунікації та взаємодії з покупцями. Коли твоя ніша переповнена пропозиціями, варто створювати додаткову цінність для клієнтів – завдяки цьому вони обиратимуть бренд і надалі. 

Для створення застосунку NOVUS шукали компанію, яка теж зможе запропонувати «щось більше», ніж шаблонне рішення для ритейлера. Взявши до уваги портфоліо, знання і досвід у розробці застосунків для електронної комерції та рекомендації від своїх партнерів, вони обрали саме Devlight. 

У цій статті ділимося деталями створення мобільного додатку для Novus та подальшими планами цього проєкту.

Цілі проєкту

Перед початком розробки мобільного застосунку клієнт ставив перед нами три основні завдання:

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

Фаза Discovery

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

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

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

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

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

Документацію щодо API проєкту було створено в Postman із запитами та наочними прикладами цих запитів. 

На основі артефактів ми сформували ТЗ на розробку MVP версії мобільного додатку, а також кошторис на проєктування та розробку застосунків  для iOS та Android.

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

Фаза дизайну

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

На цьому етапі важливо предметно попрацювати з брендбуком клієнта, щоб органічно включити в застосунок основні елементи брендингу (логотип, колірні схеми, типографіку тощо) та забезпечити повну інтеграцію нового застосунку в наявну екосистему NOVUS.  

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

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

Фаза розробки

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

Ще на етапі Discovery ми з командою Novus визначили та погодили  технологічний стек проєкту та спосіб інтеграції мобільного застосунку.

Розробники ретельно перевели концепції дизайну у функціональний код так, щоби кожна функція та елемент узгоджувалися з цілями проєкту. Також створили  надійну архітектуру застосунку. Розробники працювали з багатомодульною архітектурою, single-activity підходом та використанням патерну MVVM. Це найбільш актуальний підхід для подібної задачі, який дозволяє легко підтримувати та розвивати застосунок.

Після закладання базової архітектури, ми зробили розбивку на шари згідно Clean Architecture: у проєкті з’явились  логічно згруповані шари data, domain та ui/presentation. Завершальним етапом втіленням бізнес-логіки стало налаштування навігації, інтеграція зі сторонніми сервісами та верстка базових компонентів UI.

Тестування

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

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

Нарешті, реальні користувачі мали можливість випробувати продукт у реальних умовах, перш ніж він був випущений, щоб виявити будь-які дефекти чи проблеми. Це був останній раунд тестування перед тим як випустити продукт на ринок.

Реліз застосунку Novus

Офіційний запуск застосунку відбувся 6 грудня 2023 року і лише за перший  місяць в додатку зареєструвалися понад 100 000 клієнтів. Користувачі мають опції:

1. Картка в телефоні. Застосунок став зручною альтернативою фізичній карті NOVUS plus. Тепер, щоб отримати бонуси за кожну покупку, достатньо просканувати QR-код з застосунку на касі;
2. Рекомендації акцій. У меню застосунку є окремий каталог, який дозволяє слідкувати за знижками на товари, що найбільше цікавлять покупця;
3. Персональні пропозиції. Кожна запропонована знижка чи нова пропозиція базується на попередніх історіях покупок. 

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

Однією із найцікавіших фішок є сканер ціни, який можна застосувати під час покупок у фізичних магазинах NOVUS. Для цього достатньо навести сканер на штрих-код і перевірити актуальну вартість товару.

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

Розвиток додатка

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

Наприклад, за даними Novus, 78% покупців роблять онлайн-замовлення саме з мобільного телефону. Тож зараз ми працюємо над створенням повноцінного онлайн-магазину у застосунку.