Adobe XD CC Tutorial

Other Account Signup Screens

In our previous articles, we created Login and Registration Screens. For a complete Registration and Login Process, we need an Email / Mobile verification Screen and in case user forgot the password a Password Reset Screen. In this article, we are going to cover the same.
Following is the reference image of what we are going to create in this article.

For this article, we are going to use document which we created in the last article. Following is the download URL for Adobe XD document which we created in the last article.

FileTypeSizeDownload
Dealsatoxyz_Registration_Screen.xdNA998377Login to Download

If you noticed our screen for Password Reset and Activation Screen is similar to our Registration screen. So we are going to first create two copy of Registration Screen. Rename copies of Registration Artboard to Password Reset and Activate Account.
Next, we are going to edit Registration Header's text item text to Reset Password and Activate Account. If required align headers text items. Finally, rename Registration Header Group name.
For password reset and account activation we don't require social login icons and or elements. Remove not required elements. Following images shows the current progress.

For registration screen, we have following text boxes and button

Email Mobile TextBox
Confirm Email Mobile TextBox
Password TextBox
Confirm Password TextBox
Sign Up Button

For Password Reset screen, we need following text boxes and button

Email Mobile TextBox
Send OTP Button
Password TextBox
Confirm Password TextBox
Reset Button

Similarly, for Account Activation screen, we need following text boxes and button

Email Mobile TextBox
Send OTP Button
OTP TextBox
Activate Button

Now let's first work with Password Screen. Select the Email text box and placed it just below the Reset Password Header. Also, don't forget to change the width of email text box. Now we need to Send OTP button, create a copy of Sign Up button and place it just below email text box. Rename Sign Up text to "Send OTP", also rename the button group.  Align text item if required. Next, we need an OTP text box. For this move Confirm Email text box just below to the Send OTP button. Rename the text item text to "OTP (*)", align it if required and then finally rename the group name. Now remove the Terms & Policy text item. Arrange Password and Confirm Password Textboxes. Arrange Sign Up button. Rename text item text to "Reset" for Sign Up button and then rename the group name. Last remaining item is "New Here? Create Account" text item rename it to "Go Back to Login" and rename text item name.
Our Password Reset Screen is now ready. Next, we are going to work on Activate Account.

Following image shows the final output for Password Reset Screen.

For the rest of Activate Account Screen changes, we are going to first remove all the textboxes, buttons and bottom text items. Now from Password Reset screen select following items
Email /Mobile text box.
Send OTP button
OTP text box
Reset Password Button
Go Back to Login Text Item
Finally past all the selected items on the Activate Account Screen.

We need to rename the text of Reset Button text item to "Activate Account". Rename the group name and change the button position if required. Finally, following image shows the final result for Activate Account Screen.

Our Password Reset and Activate Account Screen is now ready. If you want to download the Adobe XD document for this article check the following Download Link.

FileTypeSizeDownload
Dealsatoxyz_Other_Account_Screen.xdNA1057808Login to Download

We are done with all the initial screens. In our next article, we are going to create an E-Commerce application Home Page.

...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add