DejKafe app UI & UX redesign

Main goal was to improve the user experience in terms of user interaction while creating an order in the Café. In addition, addressing any challenges and improvements that would support the business case between all - the User, Café and Business owner.


UX/UI Designer, Researcher



Understanding the challenge, research

The business idea (as it was)


The app allows users (coffee-lovers) to discover new Cafés and use their membership in contracted Cafés to get a free coffee. They can use one credit per day to get the coffee. With saved money for the coffee, they are supposed to purchase a cake, by which they are supporting those Cafés. At the same time, (mostly) new Cafés are getting discovered, which brings more visibility to them.

Win-Win situation: Cheaper coffee for users and Cafés will get discovered


Target Personas:

  • Ladies
  • 30 years old
  • employed
  • coffee lovers
  • willing to walk distance for a good coffee


ORIGINAL User Journey, using the app

1 Install the app & Pay for the membership (only one option of 300 CZK for duration of one month)

2 Find a Café on the map or list and get there

3 Order coffee by scanning QR code (this has to be mentioned at the very beginning, so the waitress will present the QR code to scan) = pay at the beginning

4 While ordering, add a cake to your order (for money) to support the Café


Preview of the main screens:

So what went wrong?

1 Café employees do not follow the procedure

  • They bring the QR code when users are already leaving the Cafe
  • They almost never ask whether the users would like to add something sweet to their order

2 Users are mostly students, who just want to save the money and do not add a cake to the order

3 Many users did not to continue the membership after first try


My innitial assignment was to:

1 Unify the payment process within Café’s and make it more effective in terms of a cake proposal

2 Find & fix any other obstacles on the way


selected research methods


I created and analyzed Survey results from 106 user feedbacks. Download the Survey Questionnaire below:


I interviewed several users on existing version of the app and I also observed them using it. Seeing where it did not work as they expected.

Additional engagement: I became the user

I became a user for one month to get the best understanding of the user. I visited Cafés daily, where I observed following conditions:

  • Waitress - When I mentioned that I will use the app (providing the QR immediately or not?)
  • Waitress - General behavior and approach to me as a user
  • Waitress - Checking app confirmation after scanning QR
  • My comfort of using the app
  • Easiness of the whole process
  • I also observed other customers at Café's, noticing how many of the really have a cake with their coffee



I discovered many additional pain-points, based on which I redefined the comlexity of this project.

PainPoints and discoveries

Main PainPoints and Discoveries:

  • Distance to café is crucial. It needs to be on a daily commute route of the user to prevent frustration.
  • Missing well-known Cafés on the list, that would attract new users
  • App is simple, but missing features that would make it easier to use
  • Membership is expensive for the first try
  • Café employees:
    • often not offering a cake
    • check payment confirmation (as the user, I am able to take step back after the QR scanning, and not use my daily credit)
    • always asking for payment when users are already leaving the café. Too late to add a cake
  • Cafés use several versions of SW for processing payments and it is too complex and expensive to link the app with them
  • Feeling “cheap” when mentioning that I will use the app and not add a cake (perhaps just me?)
  • With visiting previously unknown Cafés, I found out that I discovered a lot of new great places

we Redefined the project

updated persona

  • student, up to 25 years old
  • trying to save money for the coffee
  • having the Café near to his/her location where he/she spends most of the day
  • average knowledge about coffee

updated project goals

  • need for new UI
  • redefining business case and user story to fit the new Persona

changes proposed based on my observation as a user:

1 Stop pushing further on making the Café employees to proceed with the payment at the beginning of user's visit. The main reasons:

  • It is not a standard procedure to do so for any other items
  • Due to the amount of Cafés' and employees and part-timers rotating often, this is not a factor that is controllable at the current stage of the app implementation.

2 Work with the personas / users, that we already had and adjust the whole business case to work for them. Set it up the way that we can make them coffee lovers that would become the personas that it was originally designed for.


I split the ideas to eliminate pain-points and present additional improvements into two categories:




Collecting Promocodes – This could motivate the users to promote the app within friends, visit more Cafés and enjoy some free coffee.

Adding more membership options – Shorter/cheaper membership options (or credit) would be an easier start for new user.

Include more Cafés – The challenge here is to include café’s that are popular and on good spots (which is also the reason why they refuse the app).

Door sticker improvement – A door sticker with “DejKafe” logo is already on each door of enlisted café’s. 
My suggestion – Add below the app name and logos of Google Play and App Store. Potential new users will immediately realize that it is an app so they can look for it.


Securing the payment – After pressing the CTA button, app first asks for which type of coffee is the user ordering (for tracking purpose). Next step is the scan of QR code, which is automatically considered as a payment confirmation. Not giving the option to undo, as in current app.

Add more interaction & options to UI – Develop new UI based on testing and research.

Improve home screen, add helpful info, explain coffee types, etc. – All frequent actions and information should be accessible with ease. Also including the app guide and a brief description about each type of coffee.

Improve search function – Including search by typing and adding filters (open now, favorites, recent week, sorting)

Add a simple “counter” of how money-saving every membership package is.

To consider later: Dark theme , widget, voting for next new Café to be added to the list, etc.


Wireframing new UI

Button layout / Navigation Bar


Option #1 
All buttons at the bottom bar

Option #2
Action buttons at the bottom, others on the top bar

> I decided for option #1, as all of the buttons can be reachad by thumb finger, which creates better user experience when using single-hand. It also provides more space on the screen.


ENHANCING Home screen
Improved Home screen provides easier access to all needed information at glance and often used actions. Going from the top of the screen:

  • Membership suggestion

  • Added “Stories” about news in your favorites café’s - scrollable horizontally

  • Action buttons bar, reachable by thumb finger


Wireframes and User Journeys




Rosario 24 - Category names 

Rosario 18 - Normal text and descriptions

I used Bold vs. non-Bold for highlighting in both sizes

Roboto 24 - Menu items

Going Pixel-Perfect


New features in the app

Added more interactivity and usefull information into the app, such as information about type of coffee, option to return into to tutorial, social options, etc.


Home screen >

New Menu view >

About Coffee >

About Coffee Type

User flow: Finding a Café

User Journey in searching for the Café has been significantly improved, as described in section three. Added filters and search options, more information about Cafés as well.


Scroll down to search from list >

Search from map >

Map + added filtering function >

Selected café

User flow: Ordering a coffee (secured)

User Journey when taping on the red CTA button. Process has been improved and secured, as requested.


Selecting Coffee - added before scanning QR, so it is necessary to select it first

Scanning considered as a confirmation, not able to take step back - so credits are used.


Selecting Coffee type >

Scanning QR >

Successful payment - CAKE


I started testing as soon as I finished the  first paper wireframes. Then, I transformed them into first, simple, clickable form in Marvel app and tested it with pottential users.

I am sharing one screen from Marvel, which was my earliest clickable protoype. I played with an idea of having a separate Home screen, from which users would access the main functions. At the end, it turned out that it is not needed. Users were dragged into action better when they saw a list of Cafes right from the app start-up. I was also able to accommodate those functionalities easily on the original list screen.

Once I was sure I cought up on most relevant feedbacks from users, I went ahead and build the pixel-perfect prototype in Figma.

Download and test the new version for yourself on the App store and Google Play





New app version has been released in the Summer 2019.

In addition to Brno, it is now spreading to Prague and Olomouc as well.




Amount of active members with membership: +100%

Amount of coffee orders per day: +70%

Amount app users: +25%


Lesson learned:

Never underestimate the importance of communication thru all development stages of the project.




Marian Lacko

+420 773 247 036


Designed in 2019