How we made the application of the international loyalty program PINS: case
At the end of 2016, we released a mobile application for the international loyalty program PINS, which brings together more than 700 suppliers of goods and services and operates mainly in northern Europe and in Russia. But the geography is expanding, the number of partners and users of PINS is increasing, so the application was conceived as a scalable tool for targeted service to all its users - wherever they are. As part of the development, we faced several interesting problems. Among them - to provide support for six European languages, to implement a number of geographic functions and to make the registration procedure as simple as possible.
Goal: Mobile application should become a powerful accelerator of customer influx into PINS loyalty system.
')
Maxim Dimitrenko, Project Manager, Redmadrobot
“Before the application appeared, people made out a personal plastic card on the site, waited for its delivery, and only then started using it. That is, a person went to a shop or cafe, saw a PINS sticker, understood that this was a potentially beneficial thing for him, but could not do anything without a card. And now it can - it downloads the application, enters its phone number and instantly participates in the program, uses discounts, saves and spends points. The name card will still come to him, but as long as it goes, he already uses it. In the future, plastic will be completely abandoned. ”
Data is the key
Loyalty programs are not a new phenomenon, but not every business can afford to run and maintain such a system on its own. It is worthwhile to issue plastic cards, deploy IT infrastructure for their services and hire specialists to support it. PINS provides all this on an outsourcing, and at the same time conducts marketing activities in its common database of registered users, increasing the consumer audience for its partners (cafes, cinemas, retail stores, etc.). The most valuable thing in such programs is, of course, user data, and getting it from customers is crucial for business.
Maxim Dimitrenko, Project Manager, Redmadrobot
“The win-win principle is traced here: I, as a simple user, want some kind of discount and get it using the PINS card. This discount is paid to me by the partner of the program, who for this money gets access to the database with my data, which then can form targeted offers. ”
Startup Tasks
PINS wanted a mobile app that:
- Replace plastic cards
- It will be simple and comfortable to use
- Will offer the user a reward system
- will collect customer data
- Will be geo-referenced
- Will work in six languages
Initially, the list was broader and included some ideas that had to be abandoned. For example, we put back "weather" functions in the backbone - let's say it rains, and the user gets suggestions where you can buy an umbrella nearby at a discount or in which cafe or movie theater you can “wait out” bad weather. At the first stage, we did the usual geotargeting - the user enters the application and sees the most relevant offers from PINS partners at this time and in this place.
Design and design
“Replacing” plastic cards with an application is the easiest part of the story: the user shows a virtual card with a bar code and an index number from the screen of a mobile device. The index is necessary because not all PINS partners keep bar code readers, and in this case the card can be checked by number.
PINS has a corporate identity, which is based on white dots of various sizes and circles on a black background - a reference to the stationery buttons-carnations. Our visual concept was built on the basis of this style: severity, contrast, minimalism. Almost everywhere - a black background and mostly white color of fonts and interface elements. We even made an exclusive set of icons, starting from the PINS identity.
We made sure that images of discount cards from partners of PINS (partner discount programs) will also fit into our design, regardless of their richness and contrast. Looking ahead - in the memory of the device itself the images of these cards are not stored, but are pulled from the server (otherwise the assembly would be too heavy).
We wanted to provide geographic maps with a black background, but this idea had to be abandoned, since Google Maps works on both Android and iOS in the application.
On the one hand, everything is simple and clear: PINS gives users discounts in exchange for information about themselves. However, the registration process can literally scare away all users (especially mobile). According to various estimates, from 15% to 68% of users delete newly installed applications if it seems to them that the onboarding (registration process) is too long. Therefore, convenient registration has become for us one of the key tasks.
Sergey Galtsev, art director of Redmadrobot
“PINS partners need to find out a lot of different information about the user - address of residence, gender, age, and so on. This data is really a lot. For the user to enter them all is notorious stress. It is inconvenient - especially from a mobile device, unpleasant - I want to leave some “left” data. If you immediately propose to enter all this information, there will be a very high failure rate, and no influx of customers will happen. ”
How to be here? We got out of the situation with a rather simple trick: during the initial registration, the user enters only the phone number. That's it, the application is ready to use and accumulate pins (PINS points). Additional information will be required to enter only when the user wants to spend the accumulated points. Then he will have a much greater incentive to enter the necessary information.
Another detail: users do not like to scroll through too many screens. Thanks to the overlapping menus, we managed to make it so that the user gets the impression that he remains on the same screen.
We also integrated the game element into the application: the user can set himself a goal to accumulate pins so that they would be enough to buy some product or service (this could be air travel, gadgets, gift certificates and much more). This process is visualized as a progress bar, which, like the ultimate goal of accumulation, is visible immediately upon entering the application.
Dmitry Sokolov, specialist in digital products, PINS
“When designing the application, we paid close attention to the preferences of our users, we learned that they are most interested in our program. One of the main functions, perhaps, is the element of gamification - the ability to set a personal goal. We wanted users to immediately find for themselves the motivation to actively participate in the program and gradually go to the goal ”
Another interesting story is localization. The application should work immediately in six European languages ​​- English, Estonian, Finnish, Latvian, Lithuanian and Russian. Languages ​​are different, the average word length is also different - there is not much space on the screens of mobile devices, and, for example, words in Finnish are very long. Therefore, testing different language versions of the interface had to be especially meticulous. From the very beginning, even at the design stage in the design, we laid the maximum permissible length of the text in all interface elements. In those cases, when the length of the fields was still not enough, we picked up shorter words-synonyms.
Development
The iOS version of the PINS application was no longer our first project entirely on Swift. Kotlin was used to write the Android version. We actively used our own libraries.
Roman Churkin firmach , a leading iOS developer Redmadrobot
“We have some internal developments that we use from project to project. These include the Foundation library, which allows you to quickly deploy a layer of loading, processing and storage of data and a library with the implementation of the most typical UI solutions - non-standard controls and techniques that Redmadrobot designers like to use. ”
But the component Progress Bar we wrote from scratch, with an eye to the beautiful animation. The task was to make the process of user interaction with the application continuous. The download animation is quite extraordinary by itself: for the Android version, we decided not to use frame-by-frame animation, since it would not be as smooth as we would like. In addition, it would increase the amount of memory consumed and the total size of the application. But in iOS, it was decided to still do frame-by-frame animation: this saved time at the initial stages of development, since the implementation is elementary.
We also made the same text input fields in the iOS and Android versions. We have partially implemented this element during the development of past projects. It is part of our UI library. During the development of PINS, we polished the component, finalized the animation between states.
Alexander Blinov Xanderblinov , leading Android developer Redmadrobot
“The visual presentation of iOS and Android is getting very close, as they use each other’s UX patterns. This is a positive trend, as it simplifies the migration of users between operating systems.
Until recently, the Android platform has not provided for the lower horizontal navigation bar, which has long been in iOS. Navigation had to be done sideways, as a result, applications for iOS and Android, even executed in the same style, still differed in this aspect. Also, the size of devices on Android is increasing, and the area of ​​comfortable interaction goes down to the bottom of the smartphone.
The Android platform had a tremendous need for a lower navigation pattern and when we were developing an application for PINS, Google unexpectedly announced the appearance of Bottom Bar. Of course, we decided to include it in the application "
The problem was that the announcement and the main recommendations from Google were received, but the development tools were not: the developers had not had time to roll out the standard implementation of this widget. It appeared only after the release of PINS and to this day remains extremely unstable. We used a third-party open library where we fixed a number of bugs.
In addition to the mobile applications themselves, we also completed the backend part of the project. The implementation of the necessary functionality required integration with a sufficiently large number of customer systems, as well as the development of its own solutions.
Andrei Muravyev, Redmadrobot backend developer
“Most of the data for the mobile application is received by our backend from the customer’s CLM, which has several limitations. We were also asked, if possible, to reduce the number of requests to this system so as not to overload it, because it is through it that all transactions go through, bonus points are credited, and so on. As a result, wherever possible, the backend of the application caches information on its side, some system data is not exchanged in real time, but through regular synchronization. In some cases, CLM calls are made asynchronously to shorten the response time from our server. ”
Two other major components of the system with which it was necessary to integrate are the rewards-platform PINS, which allows to spend accumulated points, and the partner card. A separate story concerns a “double” search - by geo-queries and by brands.
We are faced with the limitation of the existing system that stores actual information about the points of sale of partners, which, as it turned out, is able to search for objects by tags (for example, name, type of activity), but not by their addresses. Under tight deadlines, the team, together with PINS, developed a solution with two search fields, geographic search was implemented using the capabilities of Google Maps.
Among the interesting tasks in terms of the backend was the targeting of offers to certain users on a number of grounds - gender, age, country of residence, current geographic location and date. In addition, offers can be directly targeted to specific users, and some of them should be displayed to customers only before the first use of the service.
It was necessary to come up with an architecture that would allow to quickly search for suitable offers for each user. We settled on a solution using the Elasticsearch search engine and were pleased with the choice.
Push notifications are also personalized and, if necessary, can be sent only to the desired segments of users. There are also several categories of automatic notifications - for example, birthday greetings, or, for example, if the user has not entered the application for a long time, he will receive an invitation to finally do it.
We managed to make a convenient and useful product: to achieve continuity on iOS- and Android due to lower navigation, to make convenient onboarding, to implement targeted submission of offers and promotions by user’s location / time / language used. The application will evolve, new features will appear, including with an emphasis on gamification.
Goal: Mobile application should become a powerful accelerator of customer influx into PINS loyalty system.
')
Maxim Dimitrenko, Project Manager, Redmadrobot“Before the application appeared, people made out a personal plastic card on the site, waited for its delivery, and only then started using it. That is, a person went to a shop or cafe, saw a PINS sticker, understood that this was a potentially beneficial thing for him, but could not do anything without a card. And now it can - it downloads the application, enters its phone number and instantly participates in the program, uses discounts, saves and spends points. The name card will still come to him, but as long as it goes, he already uses it. In the future, plastic will be completely abandoned. ”
Data is the key
Loyalty programs are not a new phenomenon, but not every business can afford to run and maintain such a system on its own. It is worthwhile to issue plastic cards, deploy IT infrastructure for their services and hire specialists to support it. PINS provides all this on an outsourcing, and at the same time conducts marketing activities in its common database of registered users, increasing the consumer audience for its partners (cafes, cinemas, retail stores, etc.). The most valuable thing in such programs is, of course, user data, and getting it from customers is crucial for business.
Maxim Dimitrenko, Project Manager, Redmadrobot
“The win-win principle is traced here: I, as a simple user, want some kind of discount and get it using the PINS card. This discount is paid to me by the partner of the program, who for this money gets access to the database with my data, which then can form targeted offers. ”
Startup Tasks
PINS wanted a mobile app that:
- Replace plastic cards
- It will be simple and comfortable to use
- Will offer the user a reward system
- will collect customer data
- Will be geo-referenced
- Will work in six languages
Initially, the list was broader and included some ideas that had to be abandoned. For example, we put back "weather" functions in the backbone - let's say it rains, and the user gets suggestions where you can buy an umbrella nearby at a discount or in which cafe or movie theater you can “wait out” bad weather. At the first stage, we did the usual geotargeting - the user enters the application and sees the most relevant offers from PINS partners at this time and in this place.
Design and design
“Replacing” plastic cards with an application is the easiest part of the story: the user shows a virtual card with a bar code and an index number from the screen of a mobile device. The index is necessary because not all PINS partners keep bar code readers, and in this case the card can be checked by number.
PINS has a corporate identity, which is based on white dots of various sizes and circles on a black background - a reference to the stationery buttons-carnations. Our visual concept was built on the basis of this style: severity, contrast, minimalism. Almost everywhere - a black background and mostly white color of fonts and interface elements. We even made an exclusive set of icons, starting from the PINS identity.
We made sure that images of discount cards from partners of PINS (partner discount programs) will also fit into our design, regardless of their richness and contrast. Looking ahead - in the memory of the device itself the images of these cards are not stored, but are pulled from the server (otherwise the assembly would be too heavy).
We wanted to provide geographic maps with a black background, but this idea had to be abandoned, since Google Maps works on both Android and iOS in the application.
Registration, gamification and localization
On the one hand, everything is simple and clear: PINS gives users discounts in exchange for information about themselves. However, the registration process can literally scare away all users (especially mobile). According to various estimates, from 15% to 68% of users delete newly installed applications if it seems to them that the onboarding (registration process) is too long. Therefore, convenient registration has become for us one of the key tasks.
Sergey Galtsev, art director of Redmadrobot
“PINS partners need to find out a lot of different information about the user - address of residence, gender, age, and so on. This data is really a lot. For the user to enter them all is notorious stress. It is inconvenient - especially from a mobile device, unpleasant - I want to leave some “left” data. If you immediately propose to enter all this information, there will be a very high failure rate, and no influx of customers will happen. ”
How to be here? We got out of the situation with a rather simple trick: during the initial registration, the user enters only the phone number. That's it, the application is ready to use and accumulate pins (PINS points). Additional information will be required to enter only when the user wants to spend the accumulated points. Then he will have a much greater incentive to enter the necessary information.
Another detail: users do not like to scroll through too many screens. Thanks to the overlapping menus, we managed to make it so that the user gets the impression that he remains on the same screen.
We also integrated the game element into the application: the user can set himself a goal to accumulate pins so that they would be enough to buy some product or service (this could be air travel, gadgets, gift certificates and much more). This process is visualized as a progress bar, which, like the ultimate goal of accumulation, is visible immediately upon entering the application.
Dmitry Sokolov, specialist in digital products, PINS
“When designing the application, we paid close attention to the preferences of our users, we learned that they are most interested in our program. One of the main functions, perhaps, is the element of gamification - the ability to set a personal goal. We wanted users to immediately find for themselves the motivation to actively participate in the program and gradually go to the goal ”
Another interesting story is localization. The application should work immediately in six European languages ​​- English, Estonian, Finnish, Latvian, Lithuanian and Russian. Languages ​​are different, the average word length is also different - there is not much space on the screens of mobile devices, and, for example, words in Finnish are very long. Therefore, testing different language versions of the interface had to be especially meticulous. From the very beginning, even at the design stage in the design, we laid the maximum permissible length of the text in all interface elements. In those cases, when the length of the fields was still not enough, we picked up shorter words-synonyms.
Development
The iOS version of the PINS application was no longer our first project entirely on Swift. Kotlin was used to write the Android version. We actively used our own libraries.
Roman Churkin firmach , a leading iOS developer Redmadrobot
“We have some internal developments that we use from project to project. These include the Foundation library, which allows you to quickly deploy a layer of loading, processing and storage of data and a library with the implementation of the most typical UI solutions - non-standard controls and techniques that Redmadrobot designers like to use. ”
But the component Progress Bar we wrote from scratch, with an eye to the beautiful animation. The task was to make the process of user interaction with the application continuous. The download animation is quite extraordinary by itself: for the Android version, we decided not to use frame-by-frame animation, since it would not be as smooth as we would like. In addition, it would increase the amount of memory consumed and the total size of the application. But in iOS, it was decided to still do frame-by-frame animation: this saved time at the initial stages of development, since the implementation is elementary.
We also made the same text input fields in the iOS and Android versions. We have partially implemented this element during the development of past projects. It is part of our UI library. During the development of PINS, we polished the component, finalized the animation between states.
Alexander Blinov Xanderblinov , leading Android developer Redmadrobot“The visual presentation of iOS and Android is getting very close, as they use each other’s UX patterns. This is a positive trend, as it simplifies the migration of users between operating systems.
Until recently, the Android platform has not provided for the lower horizontal navigation bar, which has long been in iOS. Navigation had to be done sideways, as a result, applications for iOS and Android, even executed in the same style, still differed in this aspect. Also, the size of devices on Android is increasing, and the area of ​​comfortable interaction goes down to the bottom of the smartphone.
The Android platform had a tremendous need for a lower navigation pattern and when we were developing an application for PINS, Google unexpectedly announced the appearance of Bottom Bar. Of course, we decided to include it in the application "
The problem was that the announcement and the main recommendations from Google were received, but the development tools were not: the developers had not had time to roll out the standard implementation of this widget. It appeared only after the release of PINS and to this day remains extremely unstable. We used a third-party open library where we fixed a number of bugs.
On the server side
In addition to the mobile applications themselves, we also completed the backend part of the project. The implementation of the necessary functionality required integration with a sufficiently large number of customer systems, as well as the development of its own solutions.
Andrei Muravyev, Redmadrobot backend developer“Most of the data for the mobile application is received by our backend from the customer’s CLM, which has several limitations. We were also asked, if possible, to reduce the number of requests to this system so as not to overload it, because it is through it that all transactions go through, bonus points are credited, and so on. As a result, wherever possible, the backend of the application caches information on its side, some system data is not exchanged in real time, but through regular synchronization. In some cases, CLM calls are made asynchronously to shorten the response time from our server. ”
Two other major components of the system with which it was necessary to integrate are the rewards-platform PINS, which allows to spend accumulated points, and the partner card. A separate story concerns a “double” search - by geo-queries and by brands.
We are faced with the limitation of the existing system that stores actual information about the points of sale of partners, which, as it turned out, is able to search for objects by tags (for example, name, type of activity), but not by their addresses. Under tight deadlines, the team, together with PINS, developed a solution with two search fields, geographic search was implemented using the capabilities of Google Maps.
Among the interesting tasks in terms of the backend was the targeting of offers to certain users on a number of grounds - gender, age, country of residence, current geographic location and date. In addition, offers can be directly targeted to specific users, and some of them should be displayed to customers only before the first use of the service.
It was necessary to come up with an architecture that would allow to quickly search for suitable offers for each user. We settled on a solution using the Elasticsearch search engine and were pleased with the choice.
Push notifications are also personalized and, if necessary, can be sent only to the desired segments of users. There are also several categories of automatic notifications - for example, birthday greetings, or, for example, if the user has not entered the application for a long time, he will receive an invitation to finally do it.
Total
We managed to make a convenient and useful product: to achieve continuity on iOS- and Android due to lower navigation, to make convenient onboarding, to implement targeted submission of offers and promotions by user’s location / time / language used. The application will evolve, new features will appear, including with an emphasis on gamification.
Source: https://habr.com/ru/post/321458/
All Articles