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.
Lunadio.cz
2019
UX/UI Designer, Researcher
QUICK NAV:
01 EMPHATIZE
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
Survey
I created and analyzed Survey results from 106 user feedbacks. Download the Survey Questionnaire below:
Interviews
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
02 DEFINE
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.
03 IDEATE
I split the ideas to eliminate pain-points and present additional improvements into two categories:
USER EXPERIENCE / Business
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.
USER INTERFACE / APP
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.
04 DESIGN
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
COLORS
FONTS
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
05 TESTING
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
06 RELEASE
New app version has been released in the Summer 2019.
In addition to Brno, it is now spreading to Prague and Olomouc as well.
RESULT IN NUMBERS:
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.
All projects