Mock AI
MockAI is a conversation-first, AI-powered interview coach designed to help candidates overcome communication barriers during live interviews.
MockAI is a conversation-first, AI-powered interview coach designed to help candidates overcome communication barriers during live interviews.
MockAI is a conversation-first, AI-powered interview coach designed to help candidates overcome communication barriers during live interviews.
MockAI is a conversation-first, AI-powered interview coach designed to help candidates overcome communication barriers during live interviews.
Prepared for
Prepared for
LeetGPT Inc.
LeetGPT Inc.
Date
Date
2025
2025
Timeline
Timeline
6 Months
6 Months
Team
Team
3 Designer
3 Designer
Awards
Awards
London Design Award Winner
London Design Award Winner
UX Design Award (Nomination)
UX Design Award (Nomination)
Muse Design Award Winner
Muse Design Award Winner
Indigo Design Award Winner
Indigo Design Award Winner
Design Overview
Mock AI: Designing an AI-Powered Interview coach experience
A user-centered solution that transforms interview prep into clear, confident, and engaging practice.
Define Your Persona and Surface Key Stories
MockAI begins with onboarding that helps users define the persona they want to present—visionary, collaborative, or detail-oriented. Guided prompts surface key work experiences that form the foundation for personalized interview preparation.
STEP 2 Collect your story
STEP 1 Define your unique persona
Build Confidence Through Interview Challenges
Users practice in realistic scenarios—recording answers, receiving instant feedback, and progressing through multi-stage evaluations.
Transform Stories Into Job-Ready Prep
Helps candidates refine their experiences into clear STAR-structured narratives, supported by AI feedback on tone, clarity, and structure.
Integrated Support for Practices
Combines technical and behavioral prep in one place, offering targeted feedback on both content and delivery under time pressure.
Build Confidence Through Interview Challenges
Users practice in realistic scenarios—recording answers, receiving instant feedback, and progressing through multi-stage evaluations.
Transform Stories Into Job-Ready Prep
Helps candidates refine their experiences into clear STAR-structured narratives, supported by AI feedback on tone, clarity, and structure.
Integrated Support for Practices
Combines technical and behavioral prep in one place, offering targeted feedback on both content and delivery under time pressure.
Gamified Interview Practice That Drives Growth
Turns routine prep into an engaging experience with daily challenges, streaks, and live battles that build consistency and motivation.
Smart Prep Sheets for Behavioral Questions
Generates editable prep sheets tailored to each role and company, providing AI-driven suggestions that turn rough stories into polished answers.
AI-Powered Coaching for Impactful Delivery
Provides tailored feedback on clarity, pacing, and language, helping candidates strengthen presence and deliver ideas with confidence.
Gamified Interview Practice That Drives Growth
Turns routine prep into an engaging experience with daily challenges, streaks, and live battles that build consistency and motivation.
Smart Prep Sheets for Behavioral Questions
Generates editable prep sheets tailored to each role and company, providing AI-driven suggestions that turn rough stories into polished answers.
AI-Powered Coaching for Impactful Delivery
Provides tailored feedback on clarity, pacing, and language, helping candidates strengthen presence and deliver ideas with confidence.
What I design
60+ wireframes & prototypes
Visual Design
Design system
AI-powered prep flows
I impacted…
Shipped MockAI MVP
enabling 10K+ interviews within 3 months
Increased task completion rate by 40%
Increased task completion rate by 40%
Please view the rest of the case study in the bigger window for better view, Thank you!
Background
In the aftermath of the pandemic and ongoing economic uncertainty, The job market is more competitive and less equitable than ever. Many candidates don’t struggle with skills—they struggle with communication. Yet soft skills remain the hardest to practice and improve.
96 %
recruiters say communication is just as important as coding
80 %
candidates fail interviews due to poor soft skills, not technical gaps
31 %
increase in job applications has intensified competition, making it harder for candidates to stand out.
Research
Competitor Analysis
Establishing our edge through UX and interaction benchmarking
MockAI’s competitors offer isolated features for interview prep, but they often lack continuity, personalization, and soft skill support.
💡 Why AI-First as the Solution?
From the competitor analysis, traditional prep tools are static or inconsistent, while AI enables structured, explainable, and adaptive practice that feels more realistic.
Without AI |
|---|
📚 Question banks = repetitive, don’t teach how to improve |
👥 Peer feedback = inconsistent, sometimes contradictory |
❌ Static practice is generic, no reasoning |
With AI
✍️ Structure: break answers into STAR components |
🔁 Explainability: show why an answer needs revision |
🧠 Adaptability: simulate dynamic conversations like small talk or presentations
User Interview
Interviewing 7 job seekers to uncover what’s broken in interview prep
To understand how we could better support interview success, we 1:1 interviewed 7 users—ranging from PhD students to professionals—about their prep methods, mock experiences, and what tools they wish existed.
We use 1 on 1 Zoom meeting to interview people, and the basic information of interviewees:
2
Technical
Engineer
2
PhD Student in Tech
3
Software
Engineer
7
interviewees
During the interview, we received those quotes and asked the following question:
When you get into the mock interview process, how did you prepare for it? What did you mock for? (e.g. coding? Behavioral? Challenge questions? etc.)
How confident do you feel about preparing for interviews?
What’s the most challenging and the easiest part for you? Why?
In which area of the interview process, do you feel the most needed to mock? Why?
Mock Interview related
“I mock with different people and everyone has different feedback, and I don’t know who to listen to in the end.” (PhD student, Tch)
When did you have your most recent interview? What is it for?
How’s the interview process look like? (Number of interview steps, duration, type & category)
How did you prepare for it? Please explain step by step in detail (e.g. timeline, tools/platforms have used)
What kind of help have you asked for throughout the preparation process?
Interview Prep related:
“I know technical prep resources like LeetCode, but I don’t know how to prepare my stories.” (Software Engineer)
Have you ever used any virtual AI tools/platforms that help you mock the interview? If so, what are they?
If there’s a virtual AI tool/product that helps you mock interviews, how would you imagine it to help you with? (e.g. which area do you want to mock)
If you have ever used the tools/platforms above, compared with mocking interviews with another real person, what’re the differences?
AI related
“AI is fast, but I don’t trust it unless it explains why its feedback makes sense.” (Technical Engneer)
Research Insights
We synthesized four major insights from their responses:
Lack of Realistic Practice Tools
AI tools like ChatGPT and Pramp were helpful but felt generic, lacking realism and emotional nuance like tone, delivery, or body language.
Behavioral Interviews = Blind Spot
Most users focused on technical prep but neglected behavioral questions. Storytelling, case studies, and soft skills were consistent pain points.
Demand for Guided Feedback
Demand for Guided Feedback
Users wanted structured feedback to improve over time—particularly for communication, confidence, and storytelling clarity.
Time Pressure & Anxiety
Time Pressure & Anxiety
Candidates struggled with managing time during interviews and staying calm under pressure, especially in multi-stage assessments.
Persona
Among the 7 interviewees, these three groups showed the most distinct communication challenges and prep needs — hence we prioritized them in our design.
Our primary users are engineers, often with strong technical skills but struggling to express themselves in behavioral interviews. They need a way to build confidence, structure answers, and practice soft skills in realistic settings.
Engineer as Candidate
Focused on passing coding interviews, but often overlook soft skill preparation. Needs practice beyond LeetCode.
Focused on passing coding interviews, but often overlook soft skill preparation. Needs practice beyond LeetCode.
Engineer as Communicator
Struggles to organize stories using STAR, and feels uncertain about how to phrase experiences clearly.
Struggles to organize stories using STAR, and feels uncertain about how to phrase experiences clearly.
Engineer as Job Seeker
Faces anxiety in real-time conversations, especially small talk or open-ended questions.
Faces anxiety in real-time conversations, especially small talk or open-ended questions.
💡
How Might We...
empower job seekers to practice soft skills through realistic, personalized interview simulations?
✨ Final Solution Preview
Prototyping Realistic, AI-Powered Interview Practice
To help job seekers practice soft skills in a structured and motivating way, we designed three key modules:
Behavior Question Prep Sheet
Supports users to structure answers using the STAR framework.
AI breaks down responses into sections, gives tone suggestions, and explains the rationale behind each revision.
✅ Solves: “I don’t know how to organize my answer clearly.”Small Talk Simulation
Simulates real-time casual conversations to reduce social anxiety.
Users receive feedback on eye contact, tone, and engagement style to build confidence in informal settings.
✅ Solves: “I freeze or feel awkward in small talk situations.”Presentation Deck
Helps users improve public speaking and storytelling through timed presentation practice.
AI provides instant feedback on pace, clarity, tone, and delivery style during slide walkthroughs.
✅ Solves: “I don’t know if I’m speaking too fast / I struggle to present confidently.”
Behavior Question Prep Sheet
Supports users to structure answers using the STAR framework.
AI breaks down responses into sections, gives tone suggestions, and explains the rationale behind each revision.
✅ Solves: “I don’t know how to organize my answer clearly.”Small Talk Simulation
Simulates real-time casual conversations to reduce social anxiety.
Users receive feedback on eye contact, tone, and engagement style to build confidence in informal settings.
✅ Solves: “I freeze or feel awkward in small talk situations.”Presentation Deck
Helps users improve public speaking and storytelling through timed presentation practice.
AI provides instant feedback on pace, clarity, tone, and delivery style during slide walkthroughs.
✅ Solves: “I don’t know if I’m speaking too fast / I struggle to present confidently.”
These Hi-Fi designs directly reflect the core user needs surfaced in our interviews —
clarity, confidence, and contextual feedback.
Product Thinking
Brainstorm
From User Pain Points to Product Priorities
After identifying key challenges in soft skill development — like structuring answers, handling small talk, and presenting ideas confidently — we translated these needs into potential features.
We used a prioritization matrix (impact × feasibility) to evaluate ideas based on:
🎯 Relevance to pain points
Target to
pain point
⚙️ Technical feasibility (esp. for AI features)
📈 Potential user impact
🧠 Complexity / scope constraints
✅ The green area in the matrix highlights our core features:
Behavior Question, Small Talk Simulation, and Presentation Practice
— which directly correspond to the needs of our three target user groups.
Design Exploration
On-boarding
Feedback
Presentation
Behavior Question
Feedback
Lo-Fi Sketches
Focus on our design principle, we put pen to the paper.
Exploring key features to address the complexities of the mock interview
On-boarding
Feedback
Presentation
Behavior Question
Feedback
Flowchart
Consolidate our potential ideas and envision the core features of the webpage
After the sketches, we figured out the flow of main pages and primary features.
Behavior Question
Dashboard
On-boarding
Design Strategy
After mapping out the core product flow, we asked:
“How can we make this practice not just useful, but also engaging and confidence-building?”
From our user interviews, we derived three principles that guided our design choices:
User Engagement
We designed every interaction to feel purposeful and motivating — from dashboard micro interactions to progress feedback — helping users stay invested even during routine prep tasks.
We designed every interaction to feel purposeful and motivating — from dashboard micro interactions to progress feedback — helping users stay invested even during routine prep tasks.
Gamification
To reduce anxiety and improve retention, we incorporated game-inspired elements like streaks, badges, peer challenges, and interview simulations that mimic real-world scenarios.
To reduce anxiety and improve retention, we incorporated game-inspired elements like streaks, badges, peer challenges, and interview simulations that mimic real-world scenarios.
Adaptive Learning
We prioritized adaptive learning paths and feedback based on each user's goals, personality, and performance history — ensuring the experience feels supportive, not generic.
We prioritized adaptive learning paths and feedback based on each user's goals, personality, and performance history — ensuring the experience feels supportive, not generic.
Competitive inspiration
Learning from SaaS + AI Design Trends to Shape Our Dashboard
When analyzing SaaS and AI dashboards, we noticed that most products rely on side navigation combined with content/action zones. This familiar layout helps users quickly locate key functions and lowers the learning curve.
Traditional dashboards: clear side navigation, modular content blocks, but often lacked adaptability for AI-driven interactions.
we adopted the same familiar side-nav structure to maintain usability, but introduced clearly defined practice zones and AI-powered modules that surface relevant insights in context.
Mid-FI wireframes
Clarifying hierarchy and refining layout to support usability
When moving into the mid-fi wireframes, we made a critical design decision:
Dashboard
Lo-fi sketches
❎
❎
❎
No Call-to-Action bottoms
Prioritize Tracking, not practice
Low Motivation
Mid-fi sketches
☑️
☑️
☑️
Call-to-Action as Top Hierarchy
Motivational Layer
Progress Tracking Below CTA
Behavior Question
Lo-fi sketches
☑️
❎
❎
Brainstorming categories and listing sample questions
Lacked structure for user answers and feedback
Only captured question banks
Mid-fi sketches
☑️
☑️
☑️
Shifted from Q&A to interactive practice environment
See completion indicators (80% / 100% complete)
Get AI suggestions and tags to improve answers.
Presentation
Lo-fi sketches
☑️
❎
❎
Gave us clarity on what elements were essential
Didn’t consider dual video frames, only basic layout
Lacked realism and didn’t fully simulate presentation
Mid-fi sketches
☑️
☑️
☑️
Add dual video frames simulate real practice environment
Expanded script panel with scrolling capability
Clearer hierarchy: timer & record remain visible at top
Small Talk
Lo-fi sketches
☑️
❎
❎
No realistic simulation of small talk dynamic
Didn’t include AI-driven cues or conversation prompts
No feedback mechanics
Mid-fi sketches
☑️
☑️
☑️
Introduced structured conversation blocks
Added live AI tips to guide practice dynamically
Layered in hierarchy and supporting features
Iteration
Dashboard - From Scratch to MVP
We explored and iterated on multiple layout directions of the dashboard—refining each to maximize clarity, usability, and user engagement in our final design. Through this process, we learned that engagement grows only when the product evolves from static dashboards to contextual tasks and finally to gamified, motivating experiences.
Iteration 1
We started with a basic dashboard featuring a pie chart and badge system for visual feedback. While it provided progress tracking, users found the layout static and not sufficiently AI-driven, leading to low engagement.
Iteration 2
To address engagement, we introduced trending tasks, richer progress states, and a clearer navigation hierarchy. These changes helped users stay oriented and more motivated, but the experience was still mostly passive.
Iteration 3
We added mock interview challenges and contextual tasks to simulate real-world preparation. This increased relevance for users preparing for interviews, but testing revealed a need for stronger gamification to sustain long-term motivation.
Iteration 4
We launched Battle Board rankings and a Live Mock Battle module to foster friendly competition and real-time practice. This transformed the dashboard into an interactive hub, boosting user motivation and making preparation more dynamic.
Design system
Balancing bold and calming visuals to create consistent branding in a dark mode interface
Through multiple iterations, we refined the design system to achieve the best balance between brand consistency, accessibility in dark mode, and scalability across modules.
Color
Primary
#BA90FA
Secondary
#CCA0D3
#9AD470
#D6D882
#67D2C8
Neutral
#D6D2D3
Primary Tonal Surface Color
Secondary Tonal Surface Color
Secondary Green Tonal Surface Color
Secondary Yellow Tonal Surface Color
Secondary blue Tonal Surface Color
Surface Color
Design
We combined the strongest aspects of each iteration to create a strong collective visuals
Gamified Interview Practice That Drives Growth
MockAI turns prep into a motivating experience with daily time-bound challenges and live mock battles that sharpen communication and consistency.
Build Confidence Through Interview Challenges
Users practice in realistic scenarios—recording answers, receiving instant feedback, and progressing through multi-stage evaluations. One-click applications, multi-round formats, and challenge-based scoring replicate the full hiring journey.
AI-Powered Coding Practice
Solve coding challenges with instant AI feedback, offering hints, step-by-step guidance.
Solve coding challenges with instant AI feedback, offering hints, step-by-step guidance.
Define Your Persona and Surface Key Stories
MockAI begins with onboarding that helps users define the persona they want to present—visionary, collaborative, or detail-oriented. Guided prompts surface key work experiences that form the foundation for personalized interview preparation.
MockAI begins with onboarding that helps users define the persona they want to present—visionary, collaborative, or detail-oriented. Guided prompts surface key work experiences that form the foundation for personalized interview preparation.
Transform Stories Into Job-Ready Prep
Collected stories are transformed into company-specific prep sheets using STAR frameworks. Users refine their responses through AI-powered feedback, tone suggestions, and chat-based editing. Download the final prep or go for a mock interview.
AI-Powered Presentation Deck Practice
Get suggestions on tone, speaking speed, posture, and time management to enhance performance.
AI-Powered Coaching for Impactful Delivery
Peer feedback adds human nuance and actionable tips for real-world improvement.
AI-Powered Small Talks Practice
Feeling embarrassed or stuck with small talk? No worries, just practice anytime, anywhere, and boost your confidence.
Video
A Designer-Created 2 Minute Demo to Showcase the Final Experience
I produced this video to clearly communicate our product’s core features, user flow, and polished design, making it easy for stakeholders to quickly understand the value of the final solution.
Looking Forward
We documented the design system and prepared for scalability
After launching the MVP, we began laying the foundation for long-term growth. We documented every design component for smooth developer handoff and future scalability. Our next steps focus on refining personalization, deepening AI feedback accuracy, and introducing more peer-driven learning mechanics. With early user signals validating core features like behavioral loops and presentation coaching, we’re now preparing to support more complex interview paths and expand our offering to group practice and team-based prep.
Reflection
Designing with empathy, pressure, and potential in mind
This project wasn’t just about building a tool—it was about helping people perform under real-world pressure. Throughout, I learned to balance AI capability with human vulnerability, designing flows that reduce friction and interfaces that encourage progress. Whether it was shaping the onboarding to feel less overwhelming or iterating on the feedback experience to make it more actionable, each decision was grounded in how it would feel to a nervous job-seeker. As a product designer, this experience sharpened my ability to connect user emotion with functionality—and reminded me that great design supports not just behavior, but belief.