#DailyUI challenge day 01
Designing a signup page
Task
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.
Process
For this and upcoming challenges, I’ll try to stick to the following process:
- Research. 30-60 mins [Includes case study, moodboard creation]
- List down observation and sketch ideas for my own creation. Create wireframe model. 30-60 mins
- Create Hi-detail mockup in Adobe Xd or InVision Studio. 15–45 mins
Case study
I began with the most obvious thing all designers do when looking for inspiration — hit up Dribbble, Behance and Pinterest. After spending about 30mins looking on signup screens, I observed few common pattern which included-
- All signup screens needed basic info like email address and password
- Some sites require additional info like name, gender, phone number, etc. However, mostly where more than 4 fields was required, form was split into multiple page forms.
- Social login feature was provided as an alternate to signup form. In some places it was the primary option.
Self Challenge
In this exercise I’d try to follow the given constraints for myself in addition to the task provided.
- Make it unique. I’ll try to be as creative and unique as possible while attempting this task. I’ve created a signup form and page few times before in my actual projects so here I’d try to do something which I couldn’t do there. So, in a nutshell my design will focus on creativity more than anything else (even practicality)
- Design for all devices. Although task allows me to create a view for my preferred screen-size — mobile or desktop, I’ll design for both.
- Password free. Design of login/ signup pages currently have a major drawback — they require user to remember passwords. I believe that’s the reason why social login became so popular in first place. However, in mobile phones these days, this problem is addressed in a different manner using biometric scan. Through fingerprint scanning and face recognition, mobile phone users can securely access their accounts without worrying about the passwords. However, presently this feature is majorly limited to mobile devices and most of laptops, desktops and tablets available in market will still need an additional hardware. So, the challenge I took is to design a password free system without the need of additional hardware.
- Make it quick and the fun way.
Outcome
This was my first iteration for desktop version of login screen. The QR code in center is to facilitate login using mobile camera. This can be handy for those who forget their passwords easily. However, this cannot be the only option given it’s strong dependence on mobile phone (and possible privacy issues for some users), social login is provided as secondary option.
After few modifications and detailing I reached the final version which is shared below. It retains the QR code within a round container in center. On top of that are avatars of users who signed up using QR method from same device. Social login is retained as secondary option. On mobile phone, the order of elements is changed such that primary option can be easily pressed by thumb which is a priority for majority of users who prefer single handed use of phone.
Thanks for reading. Please let me know your opinion in the comments.
