Overview of the company

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. A recruiter can easily manage multiple verticals like assessments, jobs, and candidates.

Duration

4 weeks

Role

Lead Product Designer

Tools

Figma, Miro, Google Docs, and forms

Outcome

Fully shipped redesign of desktop web page

Introduction

This project served as one of my projects for my internship as a UX designer at CodeDrills in the month of September 2023. As a UX designer, I find myself in an exciting position working closely with our CEOs and developers.  Now, here at Codedrills, the company has entrusted me with the crucial task of leveraging my UX design expertise to enhance the user experience for our projects. The company's expectations are high, seeking innovative solutions that can revolutionize the digital landscape. The opportunity to collaborate with visionary leaders and talented developers, while shaping the future of user experiences, is an opportunity I simply couldn't afford to miss.

Handling a Figma file with zero documentation

- When I was an intern, I was given a Figma file without any written documentation. All I knew was that the redesign of the CodeDrills Homepage had been in progress for almost a year with no clarity.

- At this point, I had a bonus point, as I worked for 1.5 years in CodeDrills so I knew what CodeDrills was, who my stakeholders were, and what exactly is the problem space that I was about to deal with.

However, the beautiful thing was that I was ready to be curious, ask questions, and get to work.

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 major pain points of the current product?

The picture shown below is the first version of the CodeDrills Homepage. After further investigations, I found four major factors that needed to change.

- Clarity and Messaging

Homepage lacks clear and concise messaging, users were confused and disinterested

- User Onboarding

If the homepage doesn't effectively guide new users on how to get started with the SaaS product, it can lead to frustration and drop-offs.

- Ineffective Call to Action (CTA)

Homepage’s CTA buttons weren’t clear, compelling, or strategically placed. Users weren’t able to take desired actions, such as signing up for a free trial or demo.

- Design System

Homepage doesn’t match the rebrand of CodeDrills’s design system components

What will success look like?

An increased percentage of the users applying for the free trial or demo of the product and a decreased percentage of visitors drop-off.

These words helped me to keep up with the challenges to figure out the right solution

Trying to solve the Puzzle

Competitive Research

What makes/ breaks a good landing page?

During my research, I found insightful articles on Medium that explain what makes a user-centric landing page. I worked with my team to compare landing pages of SaaS companies similar to us, and synthesized specific elements of what we believed to make them successful. We then listed out repeated elements of the most user friendly landing pages, and I took these into consideration when beginning to experiment with mid-fi iterations

‍

Elements of a user-friendly landing page

1. Having a sticky header with the company’s logo and CTA

2. Having an intriguing headline that prompts the user to keep scrolling

3. Balance of photographs and illustrations/icons to convey meaning

4. Some kind of social proof such as ratings, achievements testimonials, etc.

5. Descriptive hero image so that a user can get an introduction on what to expect from the features

‍

What design system components are we working with?

In addition to find the answers beyond CodeDrills, I also had to find the answers within the CodeDrills Design System that which elements could be used to our advantage.

Fixing the pieces with the stakeholders

- As I was preparing to understand what exactly I was going to revolve my content around my design, I knew that it was important to get buy-in from all my stakeholders (CEO, CTO, developers, business development, and localization). However, I found that my stakeholders had varying opinions on how to strategically market CodeDrills, and I was stuck on what content should represent my designs.

- So, in order to find a solution, I proactively went back to the drawing board and organized a live Figjam collaboration meeting and follow-up where all we did was talk about prioritization of content.

The outcome? I was able to realign with the stakeholders to agree to a single content strategy in order to move forward.

The Problem Statement

How might we create an engaging, user friendly home page experience that is informative, and persuasive to gain users and clients to use the CodeDrills platform?

Time to design

Designing a desktop website

The Hypothesis

If we used a balance of photographic assets & dynamic visuals paired with innovative elements that create a successful home page (i.e. progressive disclosure), then users will feel more trusting of the platform and will sign up for the trial and start using it

Usability Testing

I had the pleasure of working with the team to prepare for our user research. Because of less time and resources, we prepare it on Google forms and Sheets.

Please feel free to check the form for user testing, Click here to check the CodeDrills User Testing.

‍

‍

Below are things to note

- We worked together to write and revise a user research script document

- We ran a total of 5 live usability tests together, 2 of which I conducted

- We synced to figure out what takeaways we found from each section of the user’s flow through the home page and sign-up flow.

What I was testing for

- How the user organically scrolled through the landing page and observed their first reactions to the site.

- Qualitative data regarding users’ understanding, opinion, and relevance of the content once I provided questions to test for user comprehension of CodeDrills platforms and features

- Learn more about how the targeted audience responds to the home page

User Research Takeaways and design revisions

Given all of the qualitative data that the team collected, I decided to review and implement the current design to match our own.

Before

After

Actionable Takeaways

- 5 of 5 users wanted more information about why or how it’s free

- 3/5 users wanted to see an image/video overview of how the platform works

- 3/5 users want to see the company's achievements and clients to believe in CodeDrills more.

Design Revision

Take away the “Why CodeDrills” section, and instead fill it with information that proactively answers the user’s questions about the overall features and platform.

Before

After

Final Product

Here is the final design of the CodeDrills Home Page. Having our deadline 1 week right after user research was tough, but we did it!

I successfully completed the CodeDrills Homepage Page Redesign as the owner and Product Designer of the project.