Overview of the project

At Codedrills, we aimed to design the experience for the team (Hiring manager, UX design, Product manager, Developer, and others) of the company to make hiring fast and easy. In the recruiter’s flow, the user can create or customize the assessments and track the test journey of the candidate with a detailed report. The recruiter can easily manage multiple verticals like assessments, jobs, and candidates.

Duration

24 weeks

Role

Lead Product Designer

Tools

Figma, Miro, Google Docs, and forms

Outcome

Fully shipped redesign of desktop web page

My role

- I was the sole product designer working on the website right from scratch by conceptualizing, designing, and delivering the hand-offs to the developers working for multiple sizes of platforms.

- My primary responsibilities included defining the product strategy, and the vision for the product, wireframing low-fidelity designs to prototyping high-fidelity designs, and collaborating with the product managers and developers by managing the entire design lifecycle in bringing out the product life.

Getting Started

After completing the new design system for CodeDrills, Our team updated the design of the candidate's side of CodeDrills. Now it’s again a new challenge for me to design the recruiter side. I started my research on the user (recruiters )needs, and what users require to complete their task to hire the perfect candidate for the job post by handling the hiring from creating custom AI CodeDrills Assignments to managing the AI-based analytics.

Time to know about the company

Documenting the research and Contextualization

What exactly is CodeDrills?

“CodeDrills makes AI-based custom tests for businesses to hire the perfect candidate for them and also provides a platform to the recruiters for tests, interviews, and detailed analytical report

What are the problems? (Need for proper Recruiter side)

- Lack of a recruiter side to create tests and have AI-based analytics to hire the best candidate.

- Customers demanded more features like a dashboard and report of the candidates

- A strong count of users asked about the invited candidate and made changes in the dashboard as each report

Success: Vision and strategy

- The vision was to build minimum viable features in a quick span of time as the users were waiting for the features and we had the risk of losing customers because of the same.

- Identifying the features that users wanted and designing the product with the agile methodology was the strategy that was inherited to bring out an efficient product and usable product.

Designing the Agile way

- The product was meant to reach the users as soon as possible since this was the first version of the product and the evolving features demanded a need for it.

Hence, the agile methodology was defined to bring out the product quickly. Each step of the process was very quick and at its best pace contributing to the development of the product. The agile methodology process is shown below

User Interviews - Inquiring users for valuable insights

Initially, we identified and talked to some hiring managers or recruiters of different companies and categorized and asked a few questions with regard to their hiring process like how they manage each process: Creating Assignments, inviting candidates, Different rounds, Results, Analytical Reports, and finalizing candidates. The users were primarily using different different methods and software to manage the hiring process. These answers were the base to start designing features for version one.

- The common features they use?

- Features they wanted to use in the whole hiring process?

- What are the tasks they do to complete the hiring?

- How often do they hire?

Key insights

- Users want to accomplish things quickly

‍Users want to complete a task or a function in the minimum number of steps and time.

- Prefer a lightweight experience

‍No clutter and unwanted elements in the product where they can focus on what they want to achieve.

- Competitors are used as an alternative

Many competitors are used by hiring but they are not providing all features in one platform.

- Zeroing in the features

From the research, We narrowed down the primary feature set for version one which makes it a minimum viable one. All the sub-features were categorized under this primary set of features. They are as below.

‍‍

‍

‍

‍Detailed Features & workflow

The research result clearly showed that the participants would want to have the basic features that helped us nail the workflow for the product, phasing the strategy and a clear product feature roadmap. All the items below were validated and finalized based on our user needs, engineers and tech feasibility, and the business vision.

User-Flow Diagram

Designing for the user experience began by sketching out a typical user journey based on the accomplishment of specific tasks within the app. Once the user journey had been established, we began to unpack the design flow

Conceptualization and Sketching

After finding out the basic requirements of the user, the key features were identified and ideated. Sketching helped us as we followed an agile method to quickly get an idea of how the product is going to shape and give a rough idea of the concepts

Low-Fi Designs

The Low-fidelity prototypes helped us take the sketches to the next level but a step before the high-fidelity mockups. Simple prototypes were of great use in identifying components for framing the design system and getting initial feedback from the team before we stepped into concentrating on the visual design which required a major effort.

Framing a Component based design system

- A design system was created for each operating system incorporating a set of visual elements like color, typography, and UI components.

- These components were, in turn, converted as symbols in sketch to use the elements throughout CodeDrills. This not only helped me in design but also allowed developers to reuse components increasing code efficiency.

Final Product

- The above image is of the Recruiter Dashboard showing features like AI - powered status, stage and scores of the overall company, assessments and candidate. Also, the left navigation bar to make user easily navigate through the dashboard and make hiring easy.

‍

- The above image shows the detailed candidate report showing test details, candidate score for a particular test, Rating Badge for the candidate, detailed performance analysis and the whole journey of the candidate during the test from invitation to completion. The detailed report also help the recruiter to to track if the candidate had switched the tab or exited the full screen.

- The above image shows the page of creating jobs with every possible field required for a job by the recruiter.

Validation: Evaluating interfaces and usability

The people whom we were involved in evaluating the solutions involved people both new users using hiring software first time themselves and regular users who were using CodeDrills or other competitor platforms.

Re-designing some important components

- After the usability test and analyzing the competitors, we re-designed some of the components. The invite candidates button was a little confusing and users wanted a detailed dashboard for the candidate report and analytics.

- Attention Insight is a pre-launch analytics tool that enables marketers and design teams to improve design performance. Our AI-powered algorithm assesses design element visibility with 90% accurate heatmaps compared to real eye-tracking studies but without data collection.

Icing on the cake: The Final Product

- According to the user feedback and redesigning some components, the above was the final product. (For more details, please check the CodeDrills website .