Exercise Overview

<aside> 💡

My name is Nurfaiz Foat, and I’m a Senior Product Designer based in Malaysia. This case study is a take-home exercise from CoffeeSpace for the third-stage interview for the Product Designer role. This document outlines the steps I took to plan and shape the design for CoffeeSpace’s new mock AI Interview feature. It serves as my sincere application.

</aside>

Problem Statement

The assessment calls for a feature that lets the candidate sit for an interview fully run by an AI called Luca. The interface should be desktop-only and must set expectations early in the process while clearly guiding the candidate to start the call.

This AI Interview serves as a gauge, allowing CoffeeSpace’s Luca to collect structured signals about their experience, motivations, and startup readiness. These signals can then be used to connect them with a startup company that best suits their preferences.

Another section, the Candidate Section, needs to be designed to populate the candidate’s profile from their LinkedIn profile. This includes their Profile Snapshot, Archetype Thesis, Hard Evidence, Spike, Past Working Experience, and Education.

It is also important to note that I need to refer to Jack and Jill (a well-known, venture-backed AI Career Agent) as a guide for this case study. I will not copy them directly, but will use them as a structural reference so this new feature can plug into the existing CoffeeSpace ecosystem without jeopardizing its branding and CI.

Goals and Objectives

In this case study, I’ll look into this AI Interview feature and try to come out with a complete process from the ideation, user interaction and high fidelity mockups in Figma.

Research

Since I’m treating this as a design challenge exercise, I need to gather as much information as possible. To do that, I’m paying close attention to both the written assignment and the inspiration I found in Jack and Jill’s AI Interview (a similar feature).

In the written assignment, the AI Interview flow is meant to follow Jack and Jill’s experience. It narrows down to three states:

1️⃣ Before Call

2️⃣ During Call

3️⃣ After Call

Apart from that, in Jack and Jill, the profile section is a hidden side UI that slides out from a hover menu when clicked. The page then splits into two equal sections, although it is resizable using a drag handle.

This side UI is divided into four subsections: Home, Jobs, Profile, and Jack’s Brief

Ideation

The Process

I started by distilling the instructions into a mind map so I could process them more easily instead of just reading them on screen. This helped me create a clear mental note of what to do first and what to tackle next.

This process will also help me rationalise any decisions I make when I design the HiFi version of this AI Interview in Figma later.

I also use ChatGPT to help me catch small details I might have missed in my first pass of defining my process. This step augments my earlier work so I can deliver the best results.