Mocktalk
Bringing power to the interviewing process.

A new friend.

What is Mocktalk?

This is the design process behind Mocktalk’s Dashboard. Mocktalk is a mock interview experience powered by generative AI. I acted as the sole product designer, working with the CEO and CTO to define user, product, and technical needs. We did 7 week long sprints of experience and visual design in a waterfall process.

Team

Justin Catalano

Ryan Duong, CEO

Nick Stoneking, CTO

My role

Product Designer

Problem

I was approached

Ryan knew that he had found an interesting problem that could be solved with generative A.I. They had made a demo product and got great feedback. They wanted to grow the product, and wanted my help to create a scaleable product.

So I said,

Of course! What are the business needs and what do users want to see?

Research

Users needs

It was great that the demo went well, but what else do people need
I spearheaded Mocktalk's user research, and with my peers, we interviewed 10 college students preparing for interviews. We found the most common pain points in:

• Challenges in preparing for interviews due to a lack of practical and convenient resources.

• Identifying areas for improvement or measuring their progress effectively.

• Feeling left behind and alone when preparing for interviews

Mocktalks goals.

Influenced by our users, it was time to take the business steps.
I met with Ryan (CEO) and Nick (CTO) to discuss what the key points of interest are (KPI's) are for their next demo product. Working together, we came up with 3 things that this dashboard has to do.

• They should have easy access to the interview feature, so how fast can they get there?

• We should be showing interviewees their progress within our system

• Let's build a community of dedicated people to show and share their interviews

Goal based user.

Maya recently applied for an internship that aligns with her career aspirations. However, she feels underprepared for the interview stage, having never gone through a formal interview process before. Eager to learn and make a strong impression, she seeks resources that can provide guidance and practice to approach an interview with confidence. She is particularly drawn to solutions that offer personalized feedback, simulate real-world interview scenarios, and track progress over time.

Conceptualizing

So, how might we

• Create an authentic interview experience using generative A.I.?

• Make the experience feel fluid and easy to access?

• Create user retention by providing useful experiences?

Experience flow

Design Process

Design Sprints

We followed a waterfall development methodology.

This was chosen so that the engineering team could build as fast as possible while I designed the main sections of the MVP. The sprints were heavily influenced by our initial user research and usability heuristics. In this case study, I will be highlighting the main points of the product.

Initial wireframe

I took the experience flow into a wireframe format so that the engineering team could have some understanding of what they would be working on before they started to code.

Design System

To increase design and development speed, I created a design system for Mocktalk. The focus is on simplicity and recognition while serving business needs for future MVPs.

Dashboard

The dashboard provides a one-button process to start an interview while providing information about the user's performance at a glance. To navigate to the other states, the user would simply hover over to expand. Please hover over different sections to view them.

During the design process for each section, I took everything into mid-fidelity mockups and then applied the design system. Below is what those mockups look like and what the defined interaction will be for development.

Mocktalk Avatar

The main concept of Mocktalk is an interactive interviewing experience.

We asked our target audience how they felt talking to an avatar to practice interviewing. Here is a summary of their main thoughts.

• Some sort of avatar could make the user feel more at ease.

• Chatting with something and not a screen would provide a more engaging experience.

• Some humanistic A.I. avatars can be creepy and add to interview stress.

After some iteration, the avatar came to be.

I designed the different "talking" stages with the engineering team for better code feasibility.

Interview Screen

This was where the participant would spend the majority of their time. I worked with the CEO and CTO to conceptualize how the AI would flow in conversation and what needed to be displayed. This screen is similar to what they had in the first MVP, with minor design changes and a design system refresh.