Mirrored landing page, glassmorphism and purple gradients: visual identity features for Tipper in Dubai
Tipper is an application for paying tips in Dubai that should become the first component in a large ecosystem of services for restaurant business in the region. We were asked by the brand team to develop the identity and the UI kit for the application. In our work, we combined the recent trends and the cultural specifics of the UAE.
Dubai is a center of attraction for businesses in various fields. We already developed a corporate identity for Bite of Time watch boutique in Dubai and keenly took on the new project in the Emirates. Tipper startup engaged us to improve their logo created by other agency. From that on, the project grew into a full-fledged visual identity development for combining all communications of the brand: we created a guideline with branded colors and fonts, developed illustrations and branded graphic techniques, and finessed the concept for all off-line media. UI design of the landing page became the culmination stage.
How Tipper presents itself in the Dubai market
Along with London and New York, Dubai is referred to as one of the major global gastronomic hubs. The number of restaurants here is steadily increasing. With the pandemic, competition among them has also increased. Restaurateurs have to perfect their operations and improve experience of their customers.
The culture of tips in Dubai is much similar to that in Russia. Giving tips is a very common practice there, though it is not mandatory as, for example, in the USA. Therewith, functional applications for electronic tips have only appeared on the market quite recently. They still have to gain traction in the minds of guests and the restaurants themselves. Several applications are available in test mode: they do have interfaces, but they are unable to make payments. Tipper is one of the first such services.
In Dubai, developing such a full-fledged application is an expensive project. Not all the entrepreneurs possess sufficient resources for that. There are also administrative difficulties: we need to integrate a payment system, and banks in Dubai are wary of electronic services and conduct a lot of tests. It is not easy to get the license. This requires more time and effort.
Tipper will be free for the businesses. A small service fee will be payed by the guests giving tips. For the future, the company plans to develop an ecosystem of services for restaurateurs and guests. For example, it strives to accumulate a big cloud of customer knowledge and offer data-driven solutions to businesses: deliver generation of leads, provide booking services, and establish customer loyalty programs. This will give Tipper a competitive advantage, even if other tip payment applications emerge.
We commence the engagement and update the logo
Before working with us, Tipper contacted another agency. It was important for the brand to find its visual identity concept and reflect it in the logo, as well as to find flexible design solutions suitable for different media. Purple was the main preference of the client. It is the color of creators and dreamers, which reflects the approach of Tipper team to its business. The concept of the logo proposed by the other agency was interesting, but it was not possible to scale it further to a design system consistent with the Tipper’s vision.
Tipper team turned to us for development of a full-fledged visual identity. And we started building it around the already created logo. We did not change it. We only created one additional version (a combination of the symbol and the letter T) for convenient placement on small media.
Developing the comprehensive color scheme, adapting the colors to the two themes and creating the gradient
One of the most demanding processes that took considerable time was selection of the color scheme that had to be broad enough. Firstly, different shades for digital media and for print media have to be selected to ensure correct color rendering.
Secondly, Tipper team wished to have both light and dark themes for the service. Using the same colors on a dark and light background is not the best solution. They may be insufficiently contrast (thus complicating perception) and, sometimes, even seem different due to peculiarities of human vision. We chose specific shades for each of the 2 themes. Everything has been tailored carefully so that the colors could be comfortably perceived in the both versions.
For example, the colors on the dark and the light backgrounds here may look similar, however, they are actually different.
We selected the paints from the Pantone palette, with which the colors will be definitely stable to ensure accurate color rendering of purple for the print media. With conventional printing, shades are obtained by mixing magenta, cyan, yellow, and black pigments. This results in distortions. Pantone is a ready-made paint with the shade we need. It will always be the same.
The client asked us to forego flat design. So we chose the gradients with complex shape as a signature technique. They add dynamics, depth, and three-dimensionality.
Adding a glassmorphism effect
This is an additional style shaping technique: overlapping of translucent cards with background blurring. It enlivens the visual identity and makes the design not boring. Moreover, glassmorphism adds tangibility to the visual identity solution and it is in tune with the brand’s plans to keep up comprehensive offline communication on physical media in restaurants and cafes.
Choosing the font
The previous agency has already suggested using jobbing font RF Dewi. We selected several of its type styles to build a visual hierarchy for all textual information. We also added another moveable type (Raleway) to print the main text, as this font is simpler.
An important point was the presence of Arabic characters in the type styles. Tipper will use texts in both English and Arabic.
Creating instructive pictures: a person in Arabic dress and a problem with a coin jar
We developed several illustrations for advertising stands and for the website. They demonstrated the process of interaction with the service.
It was especially interesting to draw a person in Arabic clothes. This was a creative challenge. The main difficulty was that the position of the human body was not visible in Arabic clothes. Our illustrator helped us to work out movements of the character so that his pose looked natural.
We also made several mini-illustrations for various tasks: for example, to demonstrate operation of the service, processing the transactions, and keeping records by the business owner who has connected the service. The illustrations include various objects: a tip jar, a smart phone, a coin jar, a receipt, a payment terminal, etc. We combined them into a constructor with which one can assemble compositions with different meanings on any media: on the website, advertising banners and in social media posts. Each of the illustrations has dedicated versions for dark and for light themes.
When drawing one element, the coin jar, an embarrassing situation occurred. Along with other ideas, we suggested the image of a piggy bank that is usual in Russia. The client immediately asked us not to use it, because a pig for a Muslim environment is ethically not the best solution. As a result, we settled on a glass jar to be on the safe side.
Devising various formats for the print media
With Tipper, restaurant guests will give tips using QR codes placed on table tents, in menu inserts and on glass coasters. It was important for us to make these materials attracting attention and inviting to use the service. Therefore, we used the signature gradients and glassmorphism in our design.
Table tents
To make the print media even more interesting for guests, we came up with an “analog” version of glassmorphism. We decided to print the QR-code on tracing paper and put it on the menu insert. The insert describes operation of Tipper, and payment may be made using the QR-code.
Menu insert
We wanted to adapt the glassmorphism effect for personnel business cards as well by printing them on transparent plastic. This service is available in print shops in any Russian city, however, as it turned out, it was impossible to find UV printing (that was needed for making the badges on plastic) in the Emirates. As a result, we gave up with the transparency and rather adapted glassmorphism by combining stylistically the digital and the print media formats.
We also developed the door signs for the cafes and restaurants and the designs for cup holders:
Creating the UI kit and the design layout for the service, including the mirrored design
Upon completing the visual identity, we continued our cooperation with the Tipper team. Our next task was to create a promotional landing page.
First, we developed a UI kit, in which we used all the signature techniques (glassmorphism, gradients, illustrations), and devised individual interface elements — icons, shapes and various statuses of the buttons and respective color shades for them. To demonstrate the UI kit, we developed the concept for the first screen of the service.
At the next stage, we put together the design layout in Figma and provided for automatic color change when switching from a light to a dark theme.
Tipper website will work in English and Arabic. So we created two versions. Since Arabic is read from right to left, we made mirrored design.
In case of a tap and go payment of the receipt, the guest would tap the card to the payment terminal, where generic interface is usually displayed. We supposed that contact with a specific brand would mean a more customer-oriented approach. Therefore, we suggested making a menu for the terminal in the Tipper brand style. For that purpose, we created the screen prototype using the brand style and the UI kit techniques. To implement this solution, however, more expensive equipment was needed. So far, we left the idea for the perspective.
Plans for the project development
On September 28, 2022, Tipper took part in the major industry event Caterer Middle East Awards 2022 — a ceremony of awards for achievements in the restaurant industry. The service presented its stand as a sponsor of the event. Thanks to this, large restaurateurs, prospective customers of Tipper, learned about the service.
Now the Tipper team is finalizing the service for the release: the main part of the work to change the design of the service itself with reference to the new corporate visual identity and the UI kit. The release of the application is planned in the near future. It will continue to be promoted at offline events, as well as in social media.
