DAILY UI 001 : SIGN UP
Create a sign-up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can imagine.
ABOUT THIS CHALLENGE
As a UX/UI Designer who is interested in the finance industry, I decided to scope down to doing a Sign Up page for digital banking service in Singapore.
DISCOVER
Research:
In Singapore, one can open an account at the age of 18 years old. However, users may also open a savings account at the age of 15 years. Parents or kids guardians are also allowed to open accounts on behalf of those aged below 18.
Singaporeans and permanent residents in Singapore can open bank accounts online conveniently by identifying themselves with MyInfo and SingPass. As a foreigner, users are expected to walk down to the bank in person with the above documents to open their first bank account.
Decision:
With these background information, I decided to focus on redesigning a standard Sign Up page with an easy identification process linking up with SingPass on DBS for this design challenge.
DEFINE
User Flow:
With these background information, I decided to focus on redesigning a standard Sign Up page with an easy identification process linking up with SingPass on DBS for this design challenge.
1. Personal Details
​
Select an identification type
Enter Passport number/ IC number
Enter recipient's date of birth
2. Verify Identity
​
Via ATM / Debit Card
Via Singpass Face Verification
3. Create User ID
​
User ID
Create & Re-enter PIN
4. Personal Details
​
Mobile No & Email Address
Unchangeable default mailing address
(only able to update in bank branch or AXS machine)
5. Registration Review
​
For users to confirm the specific account they want to activate digital banking for
Current Design:
The screenshots below were taken from the DBS official website. From there, I evaluated and would like to recreate the process of the sign-up form. Do note that the below evaluation is based on personal assumptions.
DESIGN
Inconsistency in header
The pages have different headers which might cause confusion to the users and wonder if they are registering for the right task.
​
Confusing copywriting
Users have already input information in the text fields, yet the assistive text remains as actionable, which might cause confusion thinking if it was an error or if the system did not register their input.
​
Lack of back button
Users might have instinctively keyed in the wrong information and went on to the next page, however, the cross button on the top left-hand corner of the second screen will bring users out of registration process which might cause increase tension.
​
A disconnection between the two pages
As there is no connection indicator between the two pages, users might feel slightly anxious when it switches to a brand new page.
Our final design
Solution:
Copywriting - When users key in the necessary information, the actionable assistive text will transform into a description of the respective input box.
Tabs - When users moved on to the next page, users will be able to go back to the previous page by tapping on the personal details tab to change/check the information they keyed in.
Animation - When users go from personal details tab to create your user ID tab, the page will animate for 300ms to show the connection between the two pages.
DELIVER
