7min read

UX / UI design and development of a lottery platform for the Middle East

LinkUp Studio case for the UAE and North Africa markets

"Create a lottery that complies with Sharia laws and encourages visitors to zealously buy as many different products as possible and feel a sense of belonging to an elite club."

With this task, a customer from the UAE сalled for the expertise of the Ukrainian software development company LinkUp Studio. The result was the Kanzy marketplace lottery. This is a mobile application that combines the sale of goods and drawing of elite prizes.

LinkUp Studio chief design officer Natalia Sambir is talking about the features of the case, design experiments and other challenges the team faced.

Challenge

To make the project compliant with the UAE's religious restrictions, our team analyzed several types of lotteries and chose a lottery-marketplace. The operating principle is as follows: when buying a certain product via a mobile application, the customer automatically receives a ticket (something like a lottery ticket), which will participate in the drawing of prizes. You can't buy a ticket separately, but if the customer doesn't need the product, it can be sent to a friend or given to charity.

Based on the selected type of lotteries, we implemented everything else: from design solutions to UX. Our task was to create not just a lottery, but a well-built marketplace that encourages users to buy more, be active and stay on the platform for years.

The customer called for the team’s comprehensive service: he had the idea of ​​the application, but it was necessary to implement it on a turn-key basis. Here at LinkUp Studio we always try to surpass ourselves in each subsequent project, so we perceived this particular one as a challenge. The task was interesting and unusual, so we had to create something innovative.

Research

We started working on the development of Kanzy platform at the end of October 2020. The Discovery phase lasted for 2 and a half months. At this stage, we identified the target audience, strengths and weaknesses of the project, created a BPMN-diagram (Business Process Model and Notation), specification, designed the information architecture, user interface, and other components.

The development lasted for about 2 and a half months. The project was created from scratch: the customer did not have a well-thought-out architecture and any layouts. We were in touch with the customer all the time, held weekly meetings, reported on progress and received feedback. Close cooperation with the customer allowed us to do custom tests from the potential audience of the application on the client side.

That was the first project where we used the Navigator API 2.0 in Flutter. It was impossible to use some of our experience in this navigation, so we had to rethink certain solutions.

While creating the concept of the application, we came across two challenges.

  1. When the entire architecture had been created and tested, the client changed the vector of the business task. Our program had to become not just a lottery, but an application for daily use. The challenge before us was to add a part of functionality that needed to be brought to the fore, while saving the current architecture as much as possible.
  2. The platform already had a strong competitor in the UAE, which used a similar type of lotteries. It was necessary not only to surpass its functionality, but also to develop a visual concept that would be remembered as well as create more trust among users.

In general, Kanzy's UX design, compared to the competitor's platform, turned out to be more user-friendly.

Finding the design concept

Since our product involved working with elite brands, we wanted to move away from multicolor fun design, which first comes to mind when discussing typical lotteries.

At first, we tried on a minimalist design in white color for the platform. There was a lot of space in this version, but it seemed boring to us - there was not enough dynamics. Minimalism is really in trend, but now every second application looks like this, and we strived for freshness and innovation.

Finding the right concept

We couldn’t use red as the main color because it was dominant in the competing platform. So we experimented with the orange color. But it looked more like a mobile application of a car dealership or a mobile operator.

Colors choice for platform

Finally we came up with the idea to use green. This color is associated with money, dollars in particular. Users of such an application will subconsciously expect a profit. Also of great importance in the choice of the main color was the fact that the project was focused on the markets of the Middle East, where green is a color associated with maturity and status.

We started experimenting with different shades of green, but they all seemed wrong: some resembled a pharmacy, others - environmental issues. The customer suggested starting from the olive. But this color is associated with the military style, and we didn’t intend for such associations.

We began to go down to more pleasant glossy colors in the palette, in particular to the Tiffany colour. It is associated with a costly brand, but it is also very common. Finally, we opted for a darker range, which created a gradient between the tones to convey the depth and mood of the luxury brand.

The style turned out to be reserved, clean, and it looked expensive.

White color was used for the background and text blocks. Speakers were added using a gradient from white to light gray. White objects in this background look more voluminous and noticeable. After all, a white block with a shadow on a white background looks a bit dirty.

With a gradient to light gray, the elements look completely different.

With a gradient light gray, the elements look completely different

We also implemented a new type of buttons. Users are accustomed to rectangular buttons in applications. But we decided to go beyond that. Our buttons look like a steering pedal for shifting gears in sports cars. Rounded buttons on one side add freshness, a solution that is not often found in mobile applications.

However, you should be careful with such experiments, because the design of the application should be intuitive, and a new shape of a button should not confuse users.

We also added some gold accents - they are relevant in this project, because it’s all about the luxury style. Also, the color of gold is associated with the first place, with victory. That's why we marked the winners of the lottery in gold.

Orange and crimson were chosen as secondary colors. As I mentioned earlier, orange was absolutely not suitable as a primary color, but in combination with the main green it added bright accents and freshness.

Orange and crimson were chosen as secondary colors.


Our task was to simplify user interaction with the application as much as possible. Despite a rather complex operating principle of the lottery itself, it was necessary to create an intuitive interface so that everything was at hand, and at the same time without the accumulation of images and information.

In particular, it was necessary to show many elements on the product cards at once:

  • A prize that can be won;
  • The product you want to buy;
  • Its price;
  • "Add to cart" button;
  • Buy Now button;
  • Button "add to wish list";
  • Progress scale: how many tickets have been bought.

The card was supposed to create a wow effect, and at the same time not to take up a lot of space on the screen. Here's how we implemented it:

This card was supposed to create a "wow" effect

Another challenge for us was working on the implementation of the QR-code scanner in the application. We received this task after the main functionality had been implemented, so it was necessary to harmoniously weave a new option into the actually finished product architecture.

The idea is that in addition to the tickets that participate in the prize draw, customers are also given points to get a discount in this application, or in partner stores. The cash equivalent of points can be displayed simply on the card. One point is equal to 1 dirham (UAE currency, at the rate it is about 7 dollars).

To make it easier to receive bonuses, the customer suggested implementing the function of scanning QR-codes found in partner stores of Kanzy platform. The user could scan the QR code when paying in the store and get a bonus. They could also show their personal QR-code so that they would receive personal bonuses.

It was necessary to think about where to place this feature in the application so that the user could get to it in one click. Finally, to make the feature easily accessible and not break the ready-made information architecture, we placed access to the scanner in the lower toolbar next to the main icons, and the application was supplemented with a list of partners and their locations.

To encourage users to use bonuses, we added a CTA section on the main page, clicking on which the user could read a list of current promotions and receive bonuses for a certain action - for example, "Buy a large latte from Starbucks and get 500 bonuses."

In the end, the new functionality fit in as harmoniously as if it had always been in this place.

To encourage users to buy more actively, each company has a timer that shows how much time is left until the end of the draw, and how many tickets you can still buy to participate. The user can also view additional information about the craftsman, if it is an author's product.

The customer also asked to implement the function of quick repetition of an already made order: for example, if the buyer purchased a certain set of goods, he could repeat exactly the same purchase with one click.

And it is specified in the cart, how many points it is possible to earn on purchasing this product.


Points can be redeemed when purchasing a product

The application is currently in the phase of a business model testing: in the future it is planned to improve and add new features, in particular - using blockchain technology to store the entire history of campaigns, winners and prizes.

Share

Looking for software
development partner?

We work flexitime to suit our clients’ time zone

How can we help?

We'd love to hear what you are working on. Drop us a note here and we'll get back to you in 24 hours, or you can chat with us live using the bubble at the bottom right of your screen.