Англійська
Польська
Російська
UA
2022
Vendify
Vendify - IoT-додаток, який вміє спілкуватися з фірмовими холодильниками зі свіжою їжею.
-
Користувач додає кредитну картку
-
Користувач сканує QR-код на холодильнику Vendify
-
Після цього двері холодильника розблокуються
-
Користувач забирає товари з холодильника
-
Холодильник бачить, які товари взяв користувач і передає інформацію в додаток
-
Перед оплатою користувач може перевірити, що взяв і повернути частину товарів
-
Після цього з його картки знімається оплата за взяті товари
Концепт
Ілюстрації
Анімації
Фронтенд
Замовник
Замовники із Латвії. Максим - досвідчений бекендер, Айвіс – інвестор, який вкладає гроші в ідею.
Ідея: фірмові холодильники Vendify розташовуватимуться у бізнес-офісах, готелях та інших подібних закладах, що дозволить гостям швидко добути собі свіжу та корисну їжу.
Скоуп роботи
-
Дизайн мобільного додатка
-
Концепт
-
Ілюстрації
-
Анімації
-
-
Розробка фронтенду на RN для мобільного додатка
-
Фронтенд
-
Дизайн
Ініціалізація
У замовників вже був розроблений фірмовий стиль і брендбук - це сильно спростило роботу над концептом, тому що нам не потрібно було підбирати кольори та шрифти.
Екранів у додатку не так вже й багато: логіка додатку будувалась на принципах роботи холодильників. І звичайно, замовники вже мали бізнес-логіку, тому по суті нам треба було промалювати те, що вони вигадали. Так, ми отримали основні користувач флоу і почали роботу.
Концепт
Концепт інтерфейсу готували відразу у темній темі - До речі холодильнику. Замовник не очікував, що ми зробимо такий мув, проте концепт йому дуже сподобався.
Сподобалася робота над дизайном програми, особливо рішення, які пропонувала нам команда.
Vendify
З подальшою роботою над інтерфейсом було складно: відступи змінювали, пікселі рухали, переробляли кнопки. Правки продовжувалися, продовжувалися і продовжувалися. Працювати за схемою "поміняйте" -> "ми поміняли" -> "нам не подобається, давайте назад" - не дуже. Вчинили так: зателефонували із замовником і в режимі реального часу затвердили всі виправлення, далі робота йшла без свистоплясок.
Онбординг
Ми хотіли зробити ілюстрації для онбордингу, але потім відмовилися на користь простого одноекранного списку. Чому? Тому що MVP.
QR-код
Спочатку ми зробили екран QR-коду з блюром. Однак замовники попросили, щоб ми зробили як у Bolt, із затемненням. Ми такі - "окей, зробимо", але дещо не врахували. У результаті знайшли статтю, де був скріншот цього прицілу та виконали прохання замовника.
Розробка
Стек Vendify вибрали замовники самі. Ruby on Rails - був у них на беку, React Native був у нас на фронті.
Потрібно було написати клієнт на React Native, підключити Stripe для оплати, зробити диплінки (посилання, провести користувачів у мобільний додаток).
При скануванні QR-коду може статися два сценарії
-
Додаток завантажено
Смартфон відкриває сторінку відразу у додатку
-
Додаток не завантажено
Смартфон відкриває сторінку Vendify у магазині додатків
Система обліку товарів вшита в бек - Він знає, які товари знаходяться у кожному холодильнику.
Вхід до програми планували зробити за номером телефону, але зрештою вирішили скоротити, щоб не навантажувати користувачів непотрібними діями.
Для старту потрібні лише дані банківської карти, інші дані (телефон, е-мейл, ім'я і т.д.) можуть бути додані пізніше та опціонально.
Тобто. програма працює за принципом «Додав дані карти і вперед»!
Tipsi-stripe
Ми використовували бібліотеку tipsi-stripe, але зі своєю формою, тому що у tipsi-stripe не працює STPPaymentCardTextField. Через tipsi-stripe виходить відповідати SCA – це автентифікатор карт, поширений у Європі.
Stripe гарний тільки для інтеграції з ним веб-додатків та нативок під iOS та Android. Підтримки React Native у нього немає, тому тут довелося повозитися: взяли готове рішення tipsi-stripe v.10 - працює воно, щоправда, незрозуміло як (і підтримується також) — допрацювали код та викотили зручне у використанні флоу.
Пуші
Нам потрібно було вирішити: іти через Amazon SQS чи через нативні пуші. Якщо робити ненативні, то коли користувач згорне додаток, він не отримає повідомлення. З нативними такого не буде, тож пішли через них.
Оскільки ми працюємо із «залізом», то через лаги пуші все одно можуть загубитися. Щоб нічого не губилося, перевіряли актуальний стан холодильників за допомогою додаткових запитів до бекенду.
Типографіка
-
Montserrat
Semibold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
1234567890!@#$%^&*(){}?./, -
Montserrat
Regular
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
1234567890!@#$%^&*(){}?./,
Палітра
-
#FFFFFF
-
#53B476
-
#343535
Результат
Наш проект технічно складний, тому важливу роль грала розробка мобільного додатку. Ми звернулися до компанії ITLab Studio для повної розробки програми нашого проекту. Співпраця вийшла успішною, результат нас дуже задовольняє.