Rethinking Codechef’s Sign up flow
Solving real life design problems
This summer, I interned at an early age startup. When I was done with my internship, I finally got a taste of how big the design world really is and I realised that I really need to work on my skills. I had tried taking the UI Design Challenge in the past, but soon realised this is contributing to The Dribbblisation of Design.
Too many designers are designing to impress their peers rather than address real business problems.
So I decided to take up this challenge again but with a pinch of salt by actually trying to solve problems I face in my day to day life.
I am an undergraduate student at the Indian Institute of Information Technology, Allahabad. In case you don’t know, my college is known for it’s coding culture and people here literally “Eat, Sleep, Code, Repeat”. So Codechef is one of the website you will find people practicing and solving problems. But there’s a small problem I faced on this website, first time starting out. The Sign Up form is time consuming and complex.
The Problems
Extra-ordinarily long sign up form: The first sight of the form is intimidating to the user, the user has to scroll in order to view the complete form. I wanted to give it a simpler design, so that the user can quickly get away with the registration and start coding. If your site sports a long sign up form, it is possible that the users who are totally into the site, jetting along, getting stuff done, may get terrified by the length of form and close the window.
Let’s have a look at some of the other online judges’ sign up forms:
See how easy and simple, they’re?
Placeholder text is used as labels: Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. Here the form designer succeeded in solving this problem partially, by providing the details about the input box in the right hand side of form but the user has to shift his attention back and forth which increases cognitive load. Read more about this here, beautifully explained by Katie Sherwin.
Asking too many questions upfront: The current design of the form overwhelms the user with a lot of questions. If you need more info from the user, you can always ask for it after the sign up. Reducing the number of question can help maintain a healthy conversion rate, instead of scaring users off with too many fields and questions.
The Solution
I decided to split the form into two parts, following One thing per page strategy. The pattern is about splitting up a complex process into multiple smaller pieces, and placing those smaller pieces on screens of their own. This technique drastically reduced the length of the form and ultimately the cognitive load. I also clubbed together some of the fields which were related. The unused elements (such as terms and conditions check box) were also removed in order to reduce the visual clutter.
After working for few hours, this is what I came up with.
In my solution I tried to keep the flow simple and intuitive. Scrolling also vanished!
If pages are small, users won’t have to scroll. And the call to action is more likely to appear above the fold, which reinforces the requirements, making it easier to proceed
This was a great experience and I hope to solve tougher problems in the subsequent challenges. I’d love to have some feedback on this, so feel free to comment.
Disclaimer: I am a student working on my design skills, trying to improve, by looking at real life design scenarios. This design is in no way an attempt to mar Codechef’s online image. No copyright infringement intended.
Recommended Readings:
