Userhub

Dev Skill Landing Page

Goal oriented, minimalist, and intuitive design

December 1, 2016

Dev Skill is a platform for software developers. It helps everyone who is linked to software development, such as programmers, architects, graphic designers, UX experts, network engineers. Our vision is to help this community through software development contests, events, seminars, trainings in a continuous basis. We help you to improve your skills, and measure your improvements through various activities.

CHALLENGES

Dev Skill came to us with the requirement of two landing pages for their two kinds of users. The two kinds of users were Contestants and Employers. The first landing page would have to be designed so that Contestants and Employers knew what Dev Skill is about and how they can be benefitted from it.

The challenges we faced while designing it was:

  1. Users have very little time and attention span. The message had to be delivered as quick as possible.
  2. We had to route two different kinds of users from a single landing page.
  3. The page had to redirect the users to two different landing pages dedicated to them. The contestant’s landing page was not to be redesigned. The employer’s landing page had to be designed.
  4. We had to explain how the platform works for each user in the same page.

OUR SOLUTION

We discussed the different possibilities that could work for Dev Skill. We wanted to make the design intuitive and minimalist so that the challenge of time could be met. Finally, we decided on an illustration depicting a developer in his environment and an employer in his environment. They sat on the same table, the table being the platform given by Dev Skill to both of the users. We included a clock in the illustration to represent round-the clock service offered by Dev Skill to its customers.

We put two call to actions, one beneath each character, that would take them to their dedicated landing page. The one for the contestants was “Enter Contest” and the one for the employers was “Hire Talent”.

We decided to keep two tabs, one labelled “Programmers” and the other “Employers”. This would help the user to remain in context with their goals from the site. The tabs would contain a video and some text explaining the whole scenario to the user.

The header had both the option to take the user directly to their landing page if they wished to save time. The Sign In / Sign Up option was only in the same area, allowing the user to achieve his/her goal as quick as possible.

After going through a few sketches, we finalized the sketch.

Next, we moved on to creating a wire-frame along with Visual Design.

Landing Page for Employers

In the landing page for the employers, we used an image of a conference room to induce a corporate environment for the user and to indicate professionalism at the same time. A bold message explained the user what Dev Skill had to offer along with a call-to-action button so that the user can complete his/her goal.

For the second part of the page, we used three tabs to explain the steps required to follow to complete the recruitment process.

After ideation, we followed the same process of creating a sketch and then a wireframe for the design.