AI Interview - Frontend Case Study

Upon becoming full-time as a Product Engineer, Our company was operating in the Ed-tech industry, where our primary function was sourcing candidates for employers.

However, in mid-2023, we faced significant headwinds as the entry-level hiring market contracted, making it a struggle to achieve break-even. So we have decided to pivot to newly emerging HR-tech industry which, at the time, lacked a dominant market leader. we held a 24-hour company-wide hackathon that produced three promising MVPs, and we decided to move forward with the most viable concept: an AI Interview product.

My initial responsibility was to build the frontend for this new platform. The goal was to create a simple web application where an AI is taking interview of a candidate without any need of human intervention. To accelerate our time-to-market and validate the product idea, the strategy was to prioritize backend development—focusing on prompt engineering, question generation, and evaluation quality. So the Idea was to rapidly develop a functional and clean user interface with minimal overhead.To achieve this, I leveraged our company's existing design system, which was built on React.js (ES6+), Material UI, and styled-components. This initial version included core features essential for a remote interview: audio and video recording, proctoring checks such as full-screen enforcement and tab-switch detection, and an integrated code editor built with the Monaco Editor.

As a SaaS platform, we were in a cycle of constant iteration based on reviews and feedback from clients and our customer success team. This rapid pace soon exposed a critical issue. As we scaled, the opinionated nature of Material UI components introduced significant overhead. Customizations became complex and brittle, leading to increased technical debt and slowing our development velocity

To solve this problem, I proposed and led a strategic frontend refactor of the entire product. I architected a new frontend using a modern stack: Next.js for its performance and server-side rendering capabilities, and TypeScript for enhanced code reliability and maintainability and The cornerstone of the revamp was our move to Shadcn and Tailwind CSS. The key difference is that MUI provides fully-styled, often complex components, making deep customization difficult. In contrast, Shadcn provides unstyled, accessible component primitives. This gave us full control over styling via Tailwind and allowed us to build a truly bespoke and flexible UI without fighting a framework. This revamp took over a month, as it included a steep but rewarding learning curve with TypeScript, which was a critical investment in our codebase's future.

This change dramatically improved our design flexibility and development speed

 However, despite having a product with superior backend logic and a descent frontend, we faced a new market reality. The AI boom had flooded the HR-tech industry with competitor products. While many didn't have the same technical depth as ours, they often presented more polished and aesthetically pleasing designs. We found that while our technology was superior, we were losing potential clients whose purchasing decisions were heavily influenced by a premium user interface.

Our next mission was clear: which is to elevate the aesthetics and User Experience of our product to be the best in the market, I was entrusted with full ownership of the product's aesthetic direction and user experience

Working as an individual contributor on this initiative, I began by conducting a comprehensive competitive analysis and drew inspiration from best-in-class interfaces like Google Meet, finalized some designs and started planning out things, breaking the work down into smaller, manageable subtasks. This time, my focus was not just on features but on performance, subtle micro-animations, and eliminating key friction points from the old version. I specifically worked on optimizing the product for lower-specification systems and improving communication within the UI to make the product completely self-usable for candidates. This mission took nearly a month to complete.

The result was a complete transformation. We launched a well-designed, intuitive interface with significantly less latency, achieved through real-time data streaming via WebSockets. The enhanced candidate experience, improved with thoughtful micro-animations and a high-performance front-end, was a massive success. This was directly reflected in our metrics: our Net Promoter Score (NPS) increased by 3x, and the platform achieved a near-perfect Lighthouse performance score of 98.

DEMO: