Login/Signup Improvements in Swiggy’s Android App
Over the last two years, Swiggy worked extensively on improving the app size to increase the app install for the Swiggy app [Swiggy app on diet!], and then on app launch time improvement [Improved app Cold start]. This article will highlight how we have been improving the login/ sign-up flow for users, as we have been seeing that in spite of optimization most of the people are getting dropped in login/signup making the current process very difficult
What was the problem?
Whenever the user wants to login/signup, the user has to enter several details like name, email, phone number, etc. More often people make mistakes while entering all these details, which results in an invalid phone number or email. So, How do we solve this?
Solution — Autofill framework
Android makes filling out forms easier with the autofill framework available in Android 8.0 (API level 26) and higher. Users can take advantage of autofill features only if there is an app that provides autofill services on their device.
Benefits
Filling out forms is a time-consuming and error-prone task. Users can easily get frustrated with apps that require such actions. The autofill framework improves the user experience by providing the following benefits:
- Less time spent in filling fields. Autofill saves users from re-typing information.
- Minimize user input errors. Typing is prone to errors, especially on mobile devices. Minimizing the need to type information also minimizes typos.
Let’s see how we went about implementing it in our android app. We will start with high-level components in autofill framework.
Components
The autofill framework contains the following high-level components:
- Autofill services: Apps such as password managers that save and store the user information that can be used in views across multiple apps.
- Autofill clients: Apps that provide the views that need to be filled out or that hold the user’s data.
- Android system: The OS that defines the workflow and provides the infrastructure that makes services and clients work together.
There can be multiple autofill services installed, which can be found in Settings > System > Languages & input > Advanced > Input assistance > Autofill service.
Note : you may have multiple autofill services installed, but only one can be active at a time.
To build autofill service, you can check here https://developer.android.com/guide/topics/text/autofill-services
Providing Hints to autofill
You can set hints by using the android:autofillHints attribute. The following example sets a "password" hint on an EditText:
//xml<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autofillHints="password" />//kotlinval password = findViewById<EditText>(R.id.password)
password.setAutofillHints(View.AUTOFILL_HINT_PASSWORD)
List of all predefined hint constants can be found here https://developer.android.com/guide/topics/text/autofill-optimize#predefined_hint_constants
Mark fields as important for autofill
You can tell the system whether the individual fields in your app should be included in a view structure for autofill purposes. By default, the view uses the IMPORTANT_FOR_AUTOFILL_AUTO mode, which lets Android use its heuristics to determine if the view is important for autofill.
You can set the importance of using the android:importantForAutofill attribute:
//xml<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:importantForAutofill="no" />//kotlinval captcha = findViewById<TextView>(R.id.captcha)
captcha.setImportantForAutofill(View.IMPORTANT_FOR_AUTOFILL_NO)
Other options are :
- auto: Let the Android System use its heuristics to determine if the view is important for autofill.
- no: This view isn’t important for autofill.
- noExcludeDescendants: This view and its children aren’t important for autofill.
- yes: This view is important for autofill.
- yesExcludeDescendants: This view is important for autofill, but its children aren’t important for autofill.
Autofill in action
Using the Phone Selector to get the number
During login, the app will prompt the user to enter a phone number, and you can use the Phone Selector to make this easier, using code like this:
// Construct a request for phone numbers and show the picker
private void requestHint() {
HintRequest hintRequest = new HintRequest.Builder()
.setPhoneNumberIdentifierSupported(true)
.build();PendingIntent intent = Auth.CredentialsApi.getHintPickerIntent(
apiClient, hintRequest);
startIntentSenderForResult(intent.getIntentSender(),
RESOLVE_HINT, null, 0, 0, 0);
}
The HintRequest builder tells Play Services that a phone number identifier is needed. This is then used to create and start an intent, which will show a Play Service dialog to the user allowing them to select their phone number to share with the app. This API does not require any permissions and displays the number(s) available on the phone or Google Account for the user to select.
When the user selects a phone number it will be returned to the application in onActivityResult in E164 format on devices running the latest version of Play Services
// Obtain the phone number from the result
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == RESOLVE_HINT) {
if (resultCode == RESULT_OK) {
Credential credential = data.getParcelableExtra(Credential.EXTRA_KEY);
// credential.getId(); <-- E.164 format phone number on 10.2.+ devices
}
}
}Results
- In Signup, we saw around 25% improvement in the number of users who were able to signup successfully due to autofill of name, email and mobile number
- In login, we saw around 4% improvement in the number of users who went to the OTP screen due to phone hint.
Acknowledgements
I am Viswanathan from Mobile team at Swiggy, If you enjoyed learning about this and want to be a part of an exciting tech culture then head to our career site we are hiring
Thanks to Manjunath Chandrashekar, Sourabh Gupta, Amrit Sanjeev, Lokesh Mahajan :)
