About

Kukuryku is one of the most popular and highest rated Polish cuisine restaurants in Katowice. To boost their revenues they developed a tipping system on the mobile app. This case seems to be typical example of a dark pattern which damages the users' trust in the brand and therefore hinders the overall user experience.

That’s sick, isn’t it?

There are many defects in this solution. Besides, making the users feel manipulated, we can see that there are also opportunities for design improvements.

The most important question

Is it worth losing users' trust to gain a few more unwittingly tips? Companies usually use dark patterns to increase earnings. In this case, it is absolute nonsense. When a user unchecks the default tip amount, it goes to a higher tip amount, which the users are likely to miss and be charged without knowing or have complete two actions more to finish the process.

We need to understand business value

Tips are often one of the most valuable sources of income for restaurant. For sure deleting the default tip is the wrong idea. The best solution is setting the higher tip amount as the default, but without any dark patterned actions.

Visual design can help

The biggest problem of this design is that every element looks the same. Tipping is not visible as it should be. There are also more things to repair. Let’s see all of these details.

Before redesign

Solution

Colors and contrasts

Two monochromatic colors were used in design. It makes project consistent. I used yellow and neutral from TailwindCSS framework. All of fonts and buttons in project are contrasting at least on AA level described in Web Content Accessibility Guidelines.

Visual design can help

Now this important element is on the most visible area of the screen. The colorful banner is eye-catching. The default amount is higher but above it there is information that it is the most popular option – user knows why it is selected. There is also possibility to input custom tip. It enables to earn more money from tipping system.

Tips in banner on the top

Hungry user can see what he lost when he close app. Descriptions of bonus costs are shorter – one word for one thing. Prices fonts are smaller because user doesn’t like to think too much about the money which he will spent.

No more items behind the button

No more items behind the button
Behind the line there is seperated space only for button. If list of items is long items below the line are not visible.