SaaS Recruitment Application for Developer Hiring

Summary

About the company

HackerEarth is a start-up that makes products that help tech companies hire software developers.

About the product

This SaaS application that allowed recruiters to create coding tests and filter candidates based on automatically scored code responses.

My role

Full-time UX Designer

Problem, Solution,
Impact

When I joined the company, this product was in the beta phase in which the development team was hand-holding the users in the process of creating tests and inviting candidates. I designed the public version of this product surfacing the features that the development team was handling on the back-end, thus, enabling the users to independently operate the application. After implementation of the changes, this application was marketed heavily and gained new active customers for the startup.

Other team members

Two startup founders, One back-end developer, and one front-end developer

Process

Understood the developer recruitment process and associated pain points

Since the problem space was completely new to me, I interviewed the startup founders and 7 existing users to understand the developer recruitment process and associated pain points. The users were both from small and multinational companies and were at different levels of technical experience and recruitment role within their company.


Understood the existing application flow and the rationale for new features

I discussed the findings from the interviews with the startup founders and we talked about the rationale for the proposed features.


Brainstormed ideas and rapidly prototyped the changes using minimal documentation

We worked collaboratively as a team to brainstorm and sketch ideas for the changes. I detailed the designs using just enough prototyping that was required to understand the interaction/visual design and communicate the idea to the developers. The final finishing touches were made directly in the live code.

Create Test Flow


One of the biggest changes I proposed was creating a new test as a draft so it is not immediately live as soon as it is created. The reason for this was that a test was created by multiple users working on it over a period of time. Until then it would stay as "draft" and they could "publish" it when it was ready. The test introduction page could then be accessed online.

Another change the founders wanted to include was the option to select from template tests when creating a new test. These templates would contain pre-selected questions based on the job role. The founders' hypothesis was this would be helpful in quickly creating tests and would serve as one of the USPs of our product.

We together brainstormed and sketched ideas for how these changes could be incorporated in the application.

Since the test now had a draft and a published state, I thought about the corresponding changes that would need to be made to the test listing page.

Below is shown the complete flow for creating and publishing a draft test. The new elements I added to the test list page include filters, the status of the test, and the number of candidates.

I also updated the design of the headers to show the current state of the test and additional options associated with the test. Below are the header states for a published test. Once the test is published, the user can invite candidates to take the test and view reports for those who have taken the test.


Updated the visual style and assisted in front-end development

The startup founders wanted to launch the new product with an updated visual design that looked professional and modern. So, I created the new UI style and the visual mockups based on that new style. Throughout the development process, I assisted the developers by providing them the visual specs and suggesting CSS corrections in the implemented design. Some examples are shown below:

After the project finished

Accessibility

I have recently been reading about how to make interfaces accessible. Based on what I have learned so far, I have made color corrections to the visual design that are included in the mockups shown above.