Prázdny

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)

Prázdny

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

Prázdny

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

Prázdny

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
Prázdny

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:

 

Prázdny

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

Prázdny

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

Prázdny

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

Prázdny

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.

Prázdny

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.

Prázdny

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.

Prázdny

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

 

 

Prázdny

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%

Prázdny

Lesson learned:

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

 

Contact


 

Marian Lacko

+420 773 247 036

marian.lacko@hotmail.com

 

Designed in 2019