Redesign and redevelopment of the on-boarding pages at hackaday.io. This was the project I worked on for the major portion of my summer internship. The complexity was in getting the users to go through the entire on-boarding process without quitting. To ensure this, we got rid of the older process (which had multiple screens), and I was given the responsibility of redesigning the new one. I decided to have one screen where the user chooses interesting topics and another to view the results (related users/projects).

Tasks involved identifying popular topics, creating icons for each of them and designing the page layout, background, aesthetics of the pages etc. This was done majorly on Sketch and Photoshop.

Here are different iterations of the page designs. The icons were instantly liked by all, the iterations were mostly for working out different background images and color styles.

The development process included aligning the icons with the text grids, maintaining page responsiveness, coding icon hover/click effects – the icons rotate on hover and change color on click, and displaying the results in a grid for larger screens and with horizontal scrolling for smaller ones. This was done using HTML, CSS, Javascript and AngularJS.

Here is a short screen video of the final working pages, after development. (Watch it in HD to see it clearly!)