Home Next Project >

Codechef Sign Up Flow

Rethinking the lengthy registration process

Type of Project Side Project
Role UI/UX Designer
Date August, 2017

About the Project

I am an undergraduate student at the Indian Institute of Information Technology, Allahabad which is known for it’s coding culture, here in India. 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.

It will not take long? Eh?

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.

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.

https://dribbble.com/shots/3735698-Rethinking-Codechef-s-Sign-Up-Flow
I used Sketch for designing the components

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

Original vs the Redesign

Closing Thoughts

This was my first case study and I thoroughly enjoyed it since I learned many things in this small excercise. The case study was appreciated by Anup Kalbalia, Lead at Codechef and Nick Babich from UX Planet.