Explore
Need help with your project?
This field is required
Incorrect phone number
Incorrect Email
This field is required
Please fill in all fields
Next
Next
Your role in the project
Services
Budget
Please select one option in each category
Submit
Submit
several colorful figures
Request sent
Our manager will contact you shortly.
Oops! Something went wrong while submitting the form.

Mobile App  •  UI/UX

NoTab

Independent Ecosystem

System of apps that simplifies interaction between guestsof a nightclub and its staff

Mobile app interface showcasing event listings
01

Project

Mobile App

Mobile app beverage selection screen
Cocktail menu item display with drink price
Cranberry cocktail with garnish
People enjoying drinks in a social setting
Nightclub scene with lighting effects
DJ mixing equipment with hand adjusting knobs

Project

About the project

The client

A professional football player — a former RBof the US National Football League. He has already received investments and a number of clients whowant to use the apps.

The idea

The main idea of the app is to minimize personal contact. It eliminates lines at a bar counter — guestsof a night club don’t have to waste time waitingfor their order to be prepared and delivered.

02

5 roles

Mobile App

Challenge

The main challenge:
there are 5 roles in the app

2 admins

Super admin

Sees all venues, authorizes
new venue owners

Admin

Adds new staff, food
and cocktails to the

Kitchen

Kitchen

Take up orders and make food — all actions are done via web app

Guests

Guests

Buy food and cocktails at a club, order lap dances

Staff

Server

Chooses a venue,
manage orders

Dancer

Can accept a request
and get payment online

Portrait of person

The project was really huge. We couldn’t test anything efficientlybefore the particular feature is implemented in all 5 apps.We had to wait for it to be ready in each of them to startthe integration tests.

Igor Andreev, QA engineer

Mobile app venue listing screen
Mobile app drink selection screen
Dancer client request screen
03

Verification

Mobile App

ID

Guest verification

Text input instruction for name and surnameText input field instruction for name entry
Uploads a scan or photo of ID
Mobile app feature prompt for selfie uploadMobile app selfie upload prompt
Portrait of person

At this stage, I offered to add the feature that would allow us to verify the age of guests — to make it easier for users. If a person is under 21,  nightclubs cannot sell alcohol to them. In the end, we decided to put the feature off for the next version. To ease the future implementation, I designed the feature in advance — all figures are savedin the JSON-base.

Alexander Purtov, teamlead

Mobile app verification ID screen
Order confirmation screen with food itemsMobile app verification ID screen
Mobile app nightlife venue list screen
Mobile app verification ID screenOrder confirmation screen with food items
04

QR-code

Mobile App

QR

QR code generation

Initially, we planned to link a QR code to a particular order. It wouldn’t have been convenient for users,so we decided to change this flow of generation. Now the QR code is linked to the guest and all his/her orders are transmitted by it. This way we saved time for both the guest and the server.

QR code generation screen with timer
Mobile app dancers listing screen
Cocktail selection screen on mobile app
Food order confirmation screen
05

Dance

Mobile App

01

Club

Lap dance ordering

There are two scenariosof ordering a private dance

01

Guests order the service. The idea is simple: a guest chooses a dancer and orders the service; the dancer comes and the client gets a QR-code. The dance starts.

Mobile app dancer selection screen
Mobile app cart screen displaying entertainment items

Worth noticing that

Dancers are not employees of NoTab, so each dancer sets a price for the service by herself. Any dancer can say ‘No’ if she is not willing to dance for a guest.

02

Dancers walk up to guests. The guest gets a QR-code, the dancer scans it and provides the service. The payment is processed afterwards, because you never know how many dances the guest wants.

Mobile app payment confirmation screen
06

Design

Mobile App

Design

Design

The app is designed to work in a dark mode. Not unintentionally, of course. By choosing dark tones we minimized the eye strain effect, because it’s always dark at night clubs. We added accents on the most important things for guests — prices and pictures.

Group of men in a bar raising glasses for a toast while socializing.
Audience silhouette holding a phone recording a live concert with purple stage lights and palm trees in the background.People clinking drinks in a lively indoor party and a silhouette of a person recording a purple-lit concert with a phone.

Fonts

Typography and colors

#050D1D

#0266FE

#FFFFFF

07

Onboarding

Mobile App

Smartphone screen displaying a welcome message for NoTab with a blue hexagonal logo and a white Continue button.
08

Payment

Mobile App

Mobile screen showing payment method selection with Mastercard, Visa, American Express, and other card options. Mastercard ending in 3543 is selected.

Payment

Payment

Money goes to 4 roles — NoTab, venue owners, dancers and servers.

We had to calculate the actual amount of money that will be paid by guests, figure out how much interest will be taken by Stripe, and make it work flawlessly, so money always went to the right account.

Smiling young woman with long curly hair wearing a light brown sweater in front of a pink circular background.

The payment system was the hardest part of the development.We got the details when the project entered final straight.To put it simply, we had agreed on one thing but had to tackon many other tasks to the scope.

Maria Volkova, project manager

Stripe

Integration with Stripe

Looking for a tool

It’s easy to integrate Stripe with a web app: they have the Stripe Elements for it. However, when we’re talking about React Native mobile apps, there is nothing that can help. To solve the problem, we began searching for a solution and found an open-source library called ‘tipsi-stripe’. With it, we managed to make a wrapper for native SDK.

Mobile screen showing payment method selection with Mastercard, Visa, American Express, and other card options. Mastercard ending in 3543 is selected.

App

App Center

Creating one build manually takes about half of an hour — take into account that we had more than one app, and all of them require regular updates — it would be time-consuming.

To speed up the process, we used App Center, a system that allows to manage the lifecycle of iOS and Android apps.

QR code generation screen with timerSmartphone screens showing a dark-themed app with drink menu, dancer profiles, order management, cocktail details, and a QR code generator.
Mobile app drink selection screen
Mobile app dancers listing screen
Cocktail selection screen on mobile app
Mobile app screen showing order management for 'Alcatraz' with two new orders #4112C, both ready, assigned to Andrew W., featuring Accept buttons.
09

Release

Mobile App

No Tab release screen animation

Release

The result

NoTab is available on the App Storeand Google Play Market. If you arein the US, download the appto experience better festivities.