2021

Vendify

Vendify — IoT-приложение, которое умеет общаться с фирменными холодильниками со свежей едой.

Vendify
  • Card

    Юзер добавляет кредитную карту

  • Vendify

    Юзер сканирует QR-код на холодильнике Vendify

  • Vendify

    После этого дверь холодильника разблокируется

  • Vendify

    Юзер забирает товары из холодильника

  • Vendify

    Холодильник видит, какие товары взял юзер и передает инфу в приложение

  • Vendify

    Перед оплатой юзер может проверить, что взял и вернуть часть продуктов

  • Vendify

    После этого с его карты снимается оплата за взятые товары

Vendify

Концепт

Vendify

Иллюстрации

Vendify

Анимации

Vendify

Фронтенд

Заказчик

Заказчики из Латвии. Максим — опытный бэкендер, Айвис — инвестор, который вкладывает деньги в идею.

Идея: фирменные холодильники Vendify будут располагаться в бизнес-офисах, гостиницах и других подобных заведениях, что позволит гостям быстро добыть себе свежую и полезную еду.

Vendify Vendify

Скоуп работы

  • Дизайн мобильного приложения

    • Концепт

    • Иллюстрации

    • Анимации

  • Разработка фронтенда на RN для мобильного приложения

    • Фронтенд

Дизайн

Инициализация

У заказчиков уже был разработанный фирменный стиль и брендбук — это сильно упростило работу над концептом, потому что нам не нужно было подбирать цвета и шрифты.

Экранов в приложении не так уж и много: логика приложения строилась на принципах работы холодильников. И, конечно, у заказчиков уже была бизнес-логика, поэтому по сути нам нужно было прорисовать то, что они придумали. Так, мы получили основные юзер флоу и приступили к работе.

Vendify Vendify

Концепт

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

Vendify

Понравилась работа над дизайном приложения, в особенности — решения, которые предлагала нам команда.

Айвис Руза, заказчик

Vendify

Юля Вакуленко, лид UI/UX дизайнер

С дальнейшей работой над интерфейсом было сложно: отступы меняли, пиксели двигали, кнопки переделывали. Правки продолжались, продолжались и продолжались. Работать по схеме “поменяйте” -> “мы поменяли” -> “нам не нравится, давайте обратно” — не очень. Поступили так: созвонились с заказчиком и в режиме реального времени утвердили все правки, дальше работа шла без свистоплясок.

Юля Вакуленко, лид UI/UX дизайнер

Онбординг

Ребята хотели сделать иллюстрации для онбординга, но потом отказались в пользу простого одноэкранного списка. Почему? Потому что MVP.

Vendify Vendify Vendify Vendify
Vendify Vendify Vendify Vendify Vendify Vendify Vendify
Vendify

QR-код

Изначально мы сделали экран QR-кода с блюром. Однако заказчики попросили, чтобы мы сделали как у Bolt, с затемнением. Мы такие — “окей, сделаем”, но не учли, что в России этот экран недоступен. В итоге нашли статью, где был скриншот этого прицела и выполнили просьбу заказчика.

Разработка

Стек для Vendify выбрали заказчики сами. Ruby on Rails — был у них на бэке, React Native был у нас на фронте.

Нужно было написать клиент на React Native, подключить Stripe для оплаты, сделать диплинки (ссылки, ведущие пользователей в мобильное приложение).

При сканировании QR-кода может произойти два сценария

  • Приложение скачано

    Смартфон открывает страничку сразу в приложении

  • Приложение не скачано

    Смартфон открывает страничку Vendify в магазине приложений

Система учета товаров вшита в бек — он знает, какие товары находятся в каждом холодильнике.

Вход в приложение планировали сделать по номеру телефона, но в итоге решили сократить, чтобы не нагружать пользователей ненужными действиями.

Для старта нужны только данные банковской карты, остальные данные (телефон, е-мейл, имя и т.д.) могут быть добавлены позже и опционально.

Т.е. приложение работает по принципу «Добавил данные карты и вперед»!

Tipsi-stripe

Мы использовали библиотеку tipsi-stripe, но со своей формочкой, так как у tipsi-stripe не работает STPPaymentCardTextField. Через tipsi-stripe получается соответствовать SCA — это аутентификатор карт, распространенный в Европе.

Гриша Шарапов, фулстек разработчик в Purrweb

Stripe хорош только для интеграции с ним веб-приложений и нативок под iOS и Android. Поддержки React Native у него нет, поэтому тут пришлось повозиться: взяли готовое решение tipsi-stripe v.10 — работает оно, правда, непонятно как (и поддерживается также) — доработали код и выкатили удобное в использовании флоу.

Гриша Шарапов,
фулстек разработчик
в Purrweb

Vendify Vendify Vendify

Пуши

Нам нужно было решить: идти через Amazon SQS или через нативные пуши. Если делать ненативные, то когда юзер свернет приложение, он не получит уведомления. С нативными такого не будет, поэтому пошли через них.

Поскольку мы работаем с «железом», то из-за лагов пуши все равно могут потеряться. Чтобы ничего не терялось, проверяли актуальное состояние холодильников с помощью дополнительных запросов к бэкенду.

Типографика

  • Montserrat

    Semibold

    AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
    [email protected]#$%^&*(){}?./,

  • Montserrat

    Regular

    AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
    [email protected]#$%^&*(){}?./,

Палитра

  • #FFFFFF

  • #53B476

  • #343535

Результат

Vendify

Наш проект технически сложный, поэтому важную роль играла разработка мобильного приложения. Мы обратились в компанию Purrweb для полной разработки приложения нашего проекта. Сотрудничество получилось успешным, результат нас очень удовлетворяет.

Айвис Руза, заказчик