12hr Design Sprint: Talabat Login

7 Countries. One unified log in for the MENA region

About

Talabat is the biggest online food ordering platform in MENA, with more than 10,000 restaurants on the platform. It operates across the GCC (Kuwait, Saudi Arabia, Bahrain, United Arab Emirates, Oman, Qatar) and Jordan.

Problem Statement

Rethink Talabat’s login and registration experience and come up with a comprehensive and well-thought-out recommendation.

Constraints

• The solution should apply to all platforms(Mobile App, Desktop & Mobile Web).
• Reduce the login error rate of returning users.
• Achieve an uplift in successful registration rates.
• No quant or qual data to test out the problem or the solution might lead to an enhanced experience.

Exercise Duration

8–12 hrs

Starting Point

On Web

Full-page — Login and Create an Account

Inside Dialog — Login and Forgot Password

On Mobile

Mobile (Android) — Login // Forgot Password // Create Account

Design Evaluation

• Talabat uses a simple design for all screens.
• On mobile, the app is found to be using empty state illustrations.
• The login screen is immaculate and focuses heavily on the CTAs while muting all other colors.
• Web and Mobile use different design language systems. One important point to notice is the use of border-radius. While mobile uses 6px, web uses 4px on all corners. Banners on the web have mostly square corners.
• Talabat focuses more on mobile vs. on the web because data proves that mobile users' user acquisition cost is low, and retention is higher than the web.

Assumptions

• Talabat wants to appear as a brand that is playful and can be used by any age bracket.
• The app is mostly used by millennials but is open to be used by the older generations.

Why do users visit the Talabat app?

• To order food (mostly), groceries, and flowers.
• To find their favorite restaurant (chain) in the listing.
• To manage their past orders and bills.
• To participate in promotions and take advantage of vouchers.

Brainstorming/Wireframing

Designing for desktop (web), web-mobile, and mobile (android / iOS) is difficult to be consistent with. Unless designed using ReactNative and then just bundling that web-code in all the other places like the native mobile platforms.

• There are 3 paths to the current implementation:
  — Login, Create Account, Login using social accounts (Facebook, Google).
• The current Talabat implementation forces the user to remember the password and then reset the password once forgotten.
• Everything connected to the user stays in the Talabat cloud (account information, password, addresses, bills, and other information).
• It is too much for the user to remember for making a simple food transaction online. This increases the probability of the church rate from the user side.

Rough Sketch of User Flow (left) and Login screens wireframes (right)

A simpler way to do this is to make sure of all the information that Talabat has collected from the user and making good use of it to make the user’s login process more straightforward.

For a user creating an account, Talabat must be storing the following information:

• Email Address
• Phone Number
• Name

High fidelity wireframes

Once the user logs-in/post account creation:

• The user is requested to link Facebook, and Google (email address) accounts coupled with some 10% incentives.

Visuals

Simplified user flow

Results

By switching to an OTP model, some login flows are made redundant, and complexities are reduced. This mechanism makes the login process seamless for everyone because:

• Less than half by this mechanism cuts the number of clicks/taps.
• There is a stronger chance of registrations going up and completed orders since the checkout/login/account creation process is made hassle-free.
• Mobile-first validation system that works equally for the web. Additionally, most food ordered is done through the medium of mobile phones (assumption).
• Region gets driven by the mobile number rather than relying on one more user input towards selecting one of the seven countries Talabat serves.
• NO need to forgot the password.
• NO need for social logins (FB, Google).
• NO need to save any passwords. Because the user logs-in using an OTP, which is generated randomly every time. Which means stronger security.
• NO show/hide password functionality.
• NO or very minimal login errors because you will get your phone/email address wrong because it is implausible. OTP should be automatically fetched by the system (in Android).
• NO two mechanisms for login and create an account.

Want more? Download 100+ UX/UI design tools collection for free.