Context

When CodinGame was acquired by CoderPad, the product inherited a significant UX debt across its interfaces. I was brought on board to bring clarity and consistency to a SaaS platform used by technical recruiters to hire top developers.

CoderPad is used by major companies such as Apple, Facebook, LinkedIn, Spotify…

In this case study, I walk through three major design initiatives: the test creation flow for recruiters, navigation within the question bank, and the redesign of the development environment used by candidates.

Today, list of recruiter-created tests inside the SaaS platform.

1. The problem: complex interfaces, an underused product

Recruiter side

• An outdated interface, often causing confusion during sales demos.

• A tedious test creation flow, especially hard to use for non-technical profiles.

• The question bank for tests, one of the product’s core values—was buried behind a 6-click navigation flow.

Candidate side

• The integrated development environment (IDE) was only available in light mode, poorly suited to real-world developer habits.

• The UI lacked clarity and fell behind the standards of modern development tools.

The product as it was when I joined in August 2022.

2. Approach

My design strategy was built on three pillars:

1) Benchmarking & best practices

I analyzed the UX approaches of CoderPad’s four main competitors (Codility, HackerRank, CodeSignal, and TestGorilla), as well as other comparable B2B SaaS platforms. This research helped identify strong industry standards—like direct access to a “Questions” tab—which users had come to expect.

2) Collaborative iteration

Working closely with the PM, developers, and the two other product designers, I challenged user flows, tested assumptions, refined specifications, and contributed to short development cycles. I also regularly engaged with end users to validate our ideas and inform design decisions.

3) User behavior analysis & field observation

I spent time reviewing FullStory sessions (a tool that records real user sessions) to identify navigation mistakes, friction points, and recurring confusion in key flows—especially test creation and question bank navigation.

3. Challenges: Functional complexity and a diverse user base

✍️ Test creation: clarifying the logic

Creating a test is the first key step in using CoderPad: it’s where the recruiter defines who the assessment is for (role, level, language…), allowing the system to automatically select the right questions—with the appropriate difficulty, duration, and format. Once the test is created, candidates can be invited to take it, and their results are then analyzed.

The original flow relied on a complex system: users had to manually select domains, skills, and/or roles from two long dropdown menus. These choices would then automatically trigger the addition of related questions. But this logic proved confusing—especially for HR profiles, who are often less familiar with technical concepts.

The flow before I joined the project, based on a dual-entry logic.

Guided by FullStory observations and user interviews, we flipped the approach: instead of starting with skills, we proposed starting from the target role (e.g. “Frontend developer”) and automatically suggesting the relevant skills.

To support this new logic, we launched a quantitative study by analyzing our database to identify the most frequent role/skill combinations. This mapping helped us design a smart suggestion system that was simpler to understand and more effective.

Result of the quantitative study mapping developer roles to relevant skills.

While implementing the skill suggestion system, an unexpected front-end challenge arose: dynamically displaying selected skills. When multiple skills are added, some need to wrap onto a second line fluidly—without jumping or flickering—which required a carefully designed animation.

To eliminate ambiguity during implementation, I used Jitter, a UI animation tool, to precisely prototype the expected behavior. This approach gave developers clear guidance (timing, transitions, easing) that could be translated directly into code. This micro UX detail helped enhance the perceived smoothness and quality of the flow.

📚 Question bank: designing an interface that serves both tech and HR needs

The question bank is one of CoderPad’s key assets: it contains over 4,000 expert-crafted coding questions and exercises, which candidates encounter directly in the IDE during technical assessments. Yet access to it was previously buried several layers deep within the test creation flow—an obstacle, especially during the free trial period when prospects need to be convinced quickly.

Two distinct user types had opposing needs:

• Technical users expected a powerful search engine and an interface that allowed for precise filtering.

• HR profiles, less familiar with concepts like programming languages or algorithm complexity, needed simplicity, guidance, and immediate access to content.

To address both needs, I prototyped a clear and intuitive interface centered around a visual table enriched with turnkey and advanced filters (type, duration, difficulty, domain, source, etc.). Each question can also be previewed with a single click, making it easier to navigate and evaluate content.

Wireframe chosen to support advanced search needs in the question bank.

💻 IDE: balancing visual overhaul, accessibility, and performance

Switching to dark mode was more than just a cosmetic update. I conducted an in-depth study to build a structured color system, drawing inspiration from the concept of elevation—introduced by Google in Material Design.

The idea: the higher an element sits in the visual hierarchy, the more light it receives—therefore, the lighter its color. This approach allowed me to bring depth to the dark theme while preserving readability and accessibility.

Diagram illustrating the elevation principle used in my work.

Each shade in the dark theme was carefully paired with its light theme equivalent, enabling shared design variables in the existing system. This ensured smoother maintenance and perfect consistency between modes. The method I used is rooted in a well-established UX design approach; this article explains the core principles I applied.

Image from Pete Woodhouse’s article, illustrating the light-to-dark theme mapping method.

4. Solutions

✍️ Test creation

The old flow was replaced with a new one, broken down into clear, progressive, and user-friendly steps:

1. Choose the role to assess (e.g. Front-end, Data, etc.)

2. Smart suggestions of associated skills (based on our quantitative analysis)

3. Fine-tune the test settings

The flow is now guided, with tailored explanations for non-technical users and an experience that anticipates user needs.

📚 Question bank

The previously complex access to the question bank was replaced with a modern, feature-rich interface:

• Clear visual table, smart sorting, and advanced filters (type, duration, difficulty, domain, source…)

• One-click question preview

• Premium questions highlighted as a lever for paid conversion

This page quickly became a strong sales asset, showcasing the depth and quality of CoderPad’s content.

💻 IDE

The new IDE was thoroughly overhauled:

• New dark theme enabled by default, aligned with developer preferences

• Language selection visible right from the start—no more digging through submenus

• Settings made more accessible and self-explanatory

• A more modern and accessible interface

This redesign not only boosted user satisfaction—it also helped secure a partnership with LinkedIn, integrating the IDE into their LinkedIn Learning modules.

The IDE before.

The IDE after.

Conclusion: design serving both product and business

Through this redesign, I improved access to CoderPad’s key features, streamlined critical workflows, and enhanced the product’s appeal—for both end users and internal teams. My work directly contributed to conversions, deals, and overall product visibility.