Mobile App • UI/UX
NoTab
Независимая
экосистема
Cистема приложений, которая упрощает взаимодействие гостей ночных клубов с персоналом
О проекте
Клиент
Профессиональный спортсмен, бывший игрок в американский футбол. У заказчика уже есть инвесторы и пул клиентов, которым он планирует продавать готовый продукт.
Идея
Главная идея приложения — минимизировать персональный контакт. У гостей нет необходимости стоять в очереди на баре, ждать свой заказ и потом нести все до своего столика. Все эти задачи закрываются мобильным приложением NoTab.
Главный челлендж:
в приложении 5 ролей
-
2 админа
Супер-админСоздает профили, видит все заведения
АдминДобавляет персонал, еду и напитки для своего заведения
-
Кухня
КухняПринимают и отдают заказы — всё делается через веб-приложение
-
Клиент
КлиентПокупает еду и напитки в клубе, заказывает приватные танцы
-
Стафф
ОфициантВыбирает, где сегодня работает, управляет заказами
ТанцовщицаПринимает заявки, оплата производится через QR код
Проект был действительно большим. Мы не могли сделать что-то одно и полноценно протестировать: чтобы сделать интеграционное тестирование, нужно было дождаться, когда кусочек функциональности будет готов во всех 5 приложениях.
Игорь Андреев, тестировщик
Верификация гостей в клубе:
Как это работает?
-
Вводит имя и фамилию
1 -
Загружает фотографию документа
2 -
Загружает селфи
3
Я предложил внедрить возможность верифицировать возраст гостя по ID — есть ему 21 или нет. Это бы еще сильнее сокращало общение. Если тебе больше 21 — заказывай алкоголь, если нет — нельзя. По итогу решили выкатить первую версию без этой фичи, но положили ее в бэклог. Чтобы мы могли легко и быстро реализовать ее в будущем, я уже сейчас заложил это в архитектуре — данные о возрасте сохраняются в JSON-базе.
Александр Пуртов, тимлид
Генерация
QR-кода
Изначально планировалось, что QR-код будет привязан конкретно к заказу. С точки зрения пользовательского опыта — работало бы плохо, поэтому решили поменять флоу его генерации. Теперь код привязан к пользователю. Таким образом, в одном QR-коде спрятаны все заказы, который сделал гость — это помогло сэкономить время и его, и официанта.
ЗАКАЗ ТАНЦЕВ
В КЛУБЕ
Есть два сценария заказа
приватного танца
Гость заказывает танец. Выбирает танцовщицу, заказывает танец. Если заказ принимается, танцовщица приходит, гость генерирует QR-код — начинается танец.
Танцовщица подходит сама.
Гость генерирует QR-код, танцовщица
его сканирует, танцует, выставляет счет — оплата происходит постфактум.
Это важно, потому что танец может быть не 1.
Стоит отметить, что
Танцовщица не наемный работник. Она сама устанавливает цену за танец. Сама выбирает, будет танцевать для гостя или нет.
Дизайн
Все приложения NoTab выполнены в темных тонах, чтобы в клубах светлый интерфейс не бил по глазам. Акценты сделаны на самые важные для гостей заведений моменты — цену и фотографии.
Типографика
и цвет
San Francisco
Pro Text
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
-
#050D1D
-
#0266FE
-
#FFFFFF
Логотип
Логотип для NoTab разрабатывали тоже мы. В основе логотипа лежит кубик льда — обязательный атрибут большинства коктейлей.
Платежи
Деньги получают 4 роли: сам NoTab, владелец заведения, танцовщица и официанты.
Нам нужно было просчитать, сколько фактически должен будет платить гость, сколько за транзакции будет забирать Stripe, и сделать так, чтобы деньги уходили на нужный счет.
С платежами было сложно. Потому что детали о том, как все будет работать, мы получили только под конец проекта. Условно говоря, мы договорились об одном, а потом пришлось допиливать множество нюансов
Мария Волкова, проектный менеджер
Интеграция Stripe
Поиск нужной библиотеки
Интегрировать Stripe с веб-приложением легко: под эту цель они написали библиотеку Stripe Elements. Для мобильных приложений на React Native ничего такого не было, поэтому нам пришлось искать обходной путь. Мы быстро пришли к решению — использовать стороннюю open-source библиотеку tipsi-stripe и написать оболочку для родного SDK.
App Center
На один билд в ручном режиме уходит примерно полчаса. Так как приложение у нас не одно, а в регулярном обновлении нуждаются все продукты — это было бы сильно времязатратно.
Чтобы ускорить процесс создания билдов мобильных приложений на React Native, использовали автоматизированную систему App Center.
Результат
Скачать NoTab можно в App Store и Google Play Market. Если будете в США — обязательно попробуйте!
Ваша заявка уже у нас :)
Обычно ответ занимает от 12 до 24 часов.
Может, вы хотите запланировать онлайн встречу?