Mobile App • UI/UX
NoTab
Независимая
экосистема
Cистема приложений, которая упрощает взаимодействие гостей ночных клубов с персоналом
![App screens examples](/images/no-tab-intro-img.png)
![App screen](/images/no-tab-project-screen.png)
![Oak](/images/no-tab-project-anim-img-1.png)
![Cranberry](/images/no-tab-project-anim-img-2.png)
![Drinks](/images/no-tab-project-anim-img-3.png)
![Alcatraz](/images/no-tab-project-anim-img-4.png)
![DJ](/images/no-tab-project-anim-img-5.png)
О проекте
Клиент
Профессиональный спортсмен, бывший игрок в американский футбол. У заказчика уже есть инвесторы и пул клиентов, которым он планирует продавать готовый продукт.
Идея
Главная идея приложения — минимизировать персональный контакт. У гостей нет необходимости стоять в очереди на баре, ждать свой заказ и потом нести все до своего столика. Все эти задачи закрываются мобильным приложением NoTab.
Главный челлендж:
в приложении 5 ролей
-
2 админа
Супер-админСоздает профили, видит все заведения
АдминДобавляет персонал, еду и напитки для своего заведения
-
Кухня
КухняПринимают и отдают заказы — всё делается через веб-приложение
-
Клиент
КлиентПокупает еду и напитки в клубе, заказывает приватные танцы
-
Стафф
ОфициантВыбирает, где сегодня работает, управляет заказами
ТанцовщицаПринимает заявки, оплата производится через QR код
![Quote author](/images/no-tab-qoute-img-1.png)
Проект был действительно большим. Мы не могли сделать что-то одно и полноценно протестировать: чтобы сделать интеграционное тестирование, нужно было дождаться, когда кусочек функциональности будет готов во всех 5 приложениях.
Игорь Андреев, тестировщик
![App screens examples](/images/no-tab-verification-screens.png)
Верификация гостей в клубе:
Как это работает?
-
Вводит имя и фамилию
1 -
Загружает фотографию документа
2 -
Загружает селфи
3
![Quote author](/images/no-tab-qoute-img-2.png)
Я предложил внедрить возможность верифицировать возраст гостя по ID — есть ему 21 или нет. Это бы еще сильнее сокращало общение. Если тебе больше 21 — заказывай алкоголь, если нет — нельзя. По итогу решили выкатить первую версию без этой фичи, но положили ее в бэклог. Чтобы мы могли легко и быстро реализовать ее в будущем, я уже сейчас заложил это в архитектуре — данные о возрасте сохраняются в JSON-базе.
Александр Пуртов, тимлид
![App screens examples](/images/no-tab-screens-img.png)
Генерация
QR-кода
Изначально планировалось, что QR-код будет привязан конкретно к заказу. С точки зрения пользовательского опыта — работало бы плохо, поэтому решили поменять флоу его генерации. Теперь код привязан к пользователю. Таким образом, в одном QR-коде спрятаны все заказы, который сделал гость — это помогло сэкономить время и его, и официанта.
![App screen example](/images/no-tab-qr-img.png)
![App screen examples](/images/no-tab-dance-screens.png)
ЗАКАЗ ТАНЦЕВ
В КЛУБЕ
Есть два сценария заказа
приватного танца
Гость заказывает танец. Выбирает танцовщицу, заказывает танец. Если заказ принимается, танцовщица приходит, гость генерирует QR-код — начинается танец.
![App screen example](/images/no-tab-dance-img.png)
![App screen example](/images/no-tab-dance-img-2.png)
Танцовщица подходит сама.
Гость генерирует QR-код, танцовщица
его сканирует, танцует, выставляет счет — оплата происходит постфактум.
Это важно, потому что танец может быть не 1.
Стоит отметить, что
Танцовщица не наемный работник. Она сама устанавливает цену за танец. Сама выбирает, будет танцевать для гостя или нет.
![App screen example](/images/no-tab-dance-img-3.png)
Дизайн
Все приложения NoTab выполнены в темных тонах, чтобы в клубах светлый интерфейс не бил по глазам. Акценты сделаны на самые важные для гостей заведений моменты — цену и фотографии.
![Nightlife](/images/no-tab-design-img-1.jpg)
![Nightlife](/images/no-tab-design-img-2.jpg)
Типографика
и цвет
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 разрабатывали тоже мы. В основе логотипа лежит кубик льда — обязательный атрибут большинства коктейлей.
![NoTab logo](/images/no-tab-typography-logo.png)
![App screen example](/images/no-tab-payment-img-1.png)
Платежи
Деньги получают 4 роли: сам NoTab, владелец заведения, танцовщица и официанты.
Нам нужно было просчитать, сколько фактически должен будет платить гость, сколько за транзакции будет забирать Stripe, и сделать так, чтобы деньги уходили на нужный счет.
![Quote author](/images/no-tab-qoute-img-3.png)
С платежами было сложно. Потому что детали о том, как все будет работать, мы получили только под конец проекта. Условно говоря, мы договорились об одном, а потом пришлось допиливать множество нюансов
Мария Волкова, проектный менеджер
Интеграция Stripe
Поиск нужной библиотеки
Интегрировать Stripe с веб-приложением легко: под эту цель они написали библиотеку Stripe Elements. Для мобильных приложений на React Native ничего такого не было, поэтому нам пришлось искать обходной путь. Мы быстро пришли к решению — использовать стороннюю open-source библиотеку tipsi-stripe и написать оболочку для родного SDK.
App Center
На один билд в ручном режиме уходит примерно полчаса. Так как приложение у нас не одно, а в регулярном обновлении нуждаются все продукты — это было бы сильно времязатратно.
Чтобы ускорить процесс создания билдов мобильных приложений на React Native, использовали автоматизированную систему App Center.
![App screens examples](/images/no-tab-release-screens.png)
Результат
Скачать NoTab можно в App Store и Google Play Market. Если будете в США — обязательно попробуйте!
![NoTab app screen](/portfolio/no-tab/img/no-tab-release-screen.gif)
Ваша заявка уже у нас :)
Обычно ответ занимает от 12 до 24 часов.
Может, вы хотите запланировать онлайн встречу?
Что-то пошло не так.
Пожалуйста, попробуйте ещё раз позже.