Aisle Dating App UI Screen  Design

Aisle Dating App UI Screen Design

·

10 min read

About the App:-

Aisle is a relationship-focused dating app imagined in India. Over the years Aisle has become the largest community of vibrant Indians, South Asians, Desis, from around the world connecting online to go on meaningful offline dates.

Online matchmaking in India is a gender, age, proximity, faith and mother tongue based business. We think it’s also essential to understand a person’s taste & intent - these are equally important to us. Aisle’s balance in these criteria are good and this balance adds much value to singles looking for meaningful relationships, especially women,” explains Able Joseph, Founder & CEO of Aisle.

The platform works towards building a niche community that is highly curated on various interest aspects and requires users to undertake a long drawn registration process for the same.

“While casual dating apps that use the gamification model rise and fall by the dozen, Aisle as a product has induced seriousness in its users, who are looking to meet people for meaningful relationships. Aisle has a healthy male to female ratio on their app that is hard to sustain unless both men and women equally have taken a liking to their product offering,” says Anthony Thomas of CIO Angel Network who is also the lead investor in the round.

Aisle is a members-only online singles community that aims to serve as a middle path between traditional matrimony websites & casual dating applications for Indians from around the world. Aisle follows a membership model that involves a subscription fee for users to use the platform.

Contents of the App:-

  • UI interface that implements a fast and engaging experience for the user.

  • Short and precise code design.

  • Variety of Design Attributes implemented without unnecessary complication.

Technical Description:-

Opening Activity

aisle.png

This screen involves the concept of a splash screen. A splash screen is mostly the first screen of the app when it is opened. It is a constant screen that appears for a specific amount of time, generally shows for the first time when the app is launched. The Splash screen is used to display some basic introductory information such as the company logo, content, etc just before the app loads completely.

Creating Splash screen using handler in Android

To execute a splash screen we create the image that we want to display for a short while in the first activity after which we move on to the next activity or the screen

Code:- Screenshot (150).png

First Screen:-

Screenshot (151).png

Screen After using the object handler as shown in the code:-

5f9f7581-476b-41f6-bc04-1ec976641edf.jpg

Activity 02

This screen involves implementing a video view in the background of the android screen. In the foreground, we have buttons that lead to the further pages of the app as shown in the image above.

Code-behind this activity:-

Screenshot (152).png

Phone Authentication Activity

Here the user inputs the number that he owns for the OTP verification done on the following page.

User interface:-

f520759d-466c-4eee-8afe-179703fe33e2.jpg

The code involves an intent that opens the next activity after the continue button is pressed.

Code

Screenshot (153).png

If the number does not contain 10 digits the continue button does not activate. Instead, we receive an error that prompts us to input a valid phone number.

OTP Activity:-

After a certain amount of time, we move to the next activity where the generated OTP is displayed and the user is asked to click the Continue button.

User interface after receiving the OTP:-

19d5cdcb-a42c-4ac9-a8db-8322b2d1eb2e (1).jpg

Code behind the design:-

Screenshot (154).png

Image upload Activity:-

In this activity, we ask the user to choose and upload up to 4 images from the gallery of his phone. Also, it is mandatory for the user to insert at least two images or else he receives a toast message to do so.

We have to include the following method, which lets the user choose how he/she want to upload the picture, either through camera or Gallery/Photos. Once included, we move on to implement the onActivityResult override method as shown in the code below.

Code behind the Design:-

####Asking the user to input at least two images Screenshot (929).png

####How to choose an image from the gallery Screenshot (930).png

###Following User Interfaces in a chronological manner

a61028c3-7a6b-40c7-92ec-6a33492b10b2.jpg

922c633d-63fb-4eae-929f-cd6d1e251a51.jpg

1191f822-0cd9-405f-a656-7c24035087eb.jpg

Basic User Information Page

This activity involves multiple edit texts and a spinner and a calendar.

The edit texts are for the user to insert information like first name, emailId, etc. The spinner is used for the gender selection having Male and Female options so that the UI after the completion of data entry can be decided. The calendar is used to insert the date of birth.

Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.

To populate the spinner with a list of choices, you then need to specify a SpinnerAdapter in your Activity or Fragment source code.

Key classes are the following:

*Spinner SpinnerAdapter AdapterView.OnItemSelectedListener

*

###Code behind the design

#####Spinner usage

Screenshot (932).png

####Calendar usage

Screenshot (934).png

####User interface of Calendar usage

716eed24-1332-4709-ab1f-1e98ff67db56.jpg

Also, each edit text is implemented with certain restrictions like name must have at least 3 characters and as shown in the following picture.

b444b8eb-f663-440d-8669-c7e6794ab4bb.jpg

ScrollView usage to seeking further information

Here we use Scrollview in the next few pages where we ask for information of user like height, status, faith, mother tongue, etc individually on each page.

After the user has entered the required information on this page he/she can proceed further as shown in the below images:-

6c6e1209-058f-4921-8d8b-f4cee9076728.jpg

60b80758-c131-490e-a74d-e41425360102.jpg

7e8795e4-fc85-4931-a6ea-11277c231c4c.jpg

eb9133d6-afde-4298-85e3-3b3386f015ec.jpg

a5443eec-6dcb-45b1-9765-b81d56aaee9c.jpg hnode.com/res/hashnode/image/upload/v160976..)

a9b24ba6-149f-44dc-88fc-f93eef44a0af.jpg

##Final information activity

In this activity, a user can select only one option, and after selecting all options the button color will change.

###User Interface

1cae1d54-3ac0-4e34-89c0-feef334c8a94.jpg

##Aisle Dashboard

Here we have a cardview dialog interface. Which helps the user to move on in the dashboard after a certain message from the developer as shown below.

08c0d183-c29c-43f3-94fd-7056de39d27f.jpg

Once the user clicks on the "OK.Got it.", message the card view vanishes and the user is left on the Dashboard from where he starts using the various features provided by the app.

87e19fec-bd5e-4757-ba81-67a1a64c0185.jpg

Here the user can view an opposite gender user's profile and can scroll and view their complete profile information. Also, there are buttons that allow the user to like or unlike the profile that they see. Also, there are buttons that lead to different activities.

##Concierge Activity

This activity shows the profile of nearby people in your location.

5b5703ff-c759-4b9f-8157-665091e94a47.jpg

Like Activity

From here users can view the profile pic of the other users that have liked this specific user's profile. User can switch to home, chat and profile screen.

b6cfcbf7-3574-49f8-814e-f98c482ece61.jpg

Link of the app:- github.com/Shohilupadhyay044/Dating/tree/main

Disclaimer:- The above-mentioned app has been developed by Milind Jha and Sohil Upadhyay and is made according to the initial layout design of the actual Aisle app. This app has been made for learning purposes only and does not intend to violate any copyright issues.