PepPrep: Prepare for tech interviews with Pep

CSE 440 Staff
7 min readDec 11, 2023

--

The PepPrep logo

Team LiMBic is brought to you by Lauren Kreiger, Micah Chang, and Brigit Parrish!

The Problem

Is anyone ever ready for the interview season? PepPrep aims to guide people through tech interview preparation with innovative, AI-powered practice rooms, as well as a community centered around interview prep.

Lots of people feel anxious about the job hunt process. Some, more than others — this is known as generalized or social anxiety. If the job hunt is stressful for people without anxiety, the job hunt is even worse for people with. Anxiety symptoms can get in the way of the job hunt process, such as preventing people from performing well in an interview, and can be very demotivating. This may lead to people with anxiety having a difficult time landing a satisfying job.

We recognize that anxiety is a complex mental illness with lots of factors and causes, and no app can solve everything. We (team LiMBic — Lauren, Micah, and Brigit) decided to focus our solution on just job hunts in the technology industry, as it is personal to us. User research, conducted through surveys with voluntary follow-up interviews, revealed two significant needs: the need for stress-less technical interviews, and for a non-competitive community for motivation.

The Solution

Our solution is a web app, in which users use asynchronous, AI-powered interview practice rooms to prepare for interviews. To do so, users can either use a preset practice plan, with suggested questions depending on the company, position, and other factors, or a completely custom-made plan, choosing from a wide range of practice questions. After the virtual interview, an AI will generate feedback based on both the code, and the user’s explanation of the code. Feedback is stored in the user’s account, so that they may review it later and track their progress.

Users can also interact with each other through community whiteboards, where they can text, draw, and insert images. This gives getting help on a technical question a new, exciting dimension. Users can add friends, and set up whiteboards for them and their friends; the app also has preset whiteboards for specific topics, such as specific questions, or companies.

If this app sounds good, that’s because we dedicated hours of our time to perfecting the design. Keep reading to check out how we created PepPrep!

Paper Prototype, Testing, and Results (oh my!)

Building on our previous steps, which you can read about here, our next step was to create a paper prototype, which is a low-fidelity, yet interactive, model of our final product.

We tested our paper prototype with three participants, including a tech student with a background in UI/UX, and a fellow HCI student with technical interview experience. Both completed the majority of the tasks effortlessly, but one major issue stood out: setting up a practice room. The problem lay in how we organized the settings a user could select. There were too many options on the screen at once, and it was not clear what some of the buttons meant to the user. One participant stated that the option sequence wasn’t intuitive. Other important critiques included options to run and test code while in the practice room itself, and features to add friends.

The original interface to create a practice plan and customize the question the user wants to practice.

These results meant that we needed to make significant changes to the workflow of how users selected questions. This involved changing screens after picking between behavioral or technical questions and the number of questions, then moving to selecting between what subject of questions or if they wanted a random set of questions. It was crucial to make the question selection more streamlined so we do not deter users from interview practice.

We also made edits to the practice room, including a way to run code, test code, and move the placement of the notes and the questions so the user can have them on the page at the same time. Additionally, we added a way to add friends on the home page through having suggested friends based on the subjects they are practicing. All of these changes are important for our tasks, by making the platform more intuitive and easy to use, as well as adding important features we missed in the original paper prototype.

Digital Mockup

Our final digital mockup was created in Figma, an online UX/UI design app. Since it’s online, you’re welcome to explore our full design here, although no interactive functionality was implemented. We highlight two main tasks below: practicing for an interview, and interacting with others in the community whiteboards.

Task 1: Practicing for an interview

The interview practice room is the main feature of our app. It is asynchronous, not requiring any volunteers to carry out the practice, and instead uses AI to generate feedback on both the code and the presentation and explanation of the code.

The home page.

To practice for an interview, a user must first have an account. Once they have one, they’re taken to the Home page, where they’ll have an overview of their account information, badges/achievements that they’ve earned for interview practice, recent boards that they’ve been active on, as well as a practice log.

The practice plan selection screen.

Next, they’ll navigate to the Practice tab, where they are prompted to choose a practice plan. Users have the option to either choose a preset practice plan, such as ones focusing on specific topics, roles, or companies, a completely random plan, or a custom plan. In this case, we’ll go with the Custom plan.

The individual question selection screen, with a question selected.

Once there, the user has a wide range of questions to choose from, which are tagged by topic and difficulty. Each question can be customized by time limit and other options, and more questions can be added, if desired. Once the user is satisfied with their selected questions, they start the practice.

The practice room interface, with tabs for the code, notes, and questions shown.

The practice room is set up such that the user has access to all of the most important parts of the question — the question, code, and notes about the code. The user can see themselves in the corner of the notes window, as well as a timer. At the bottom of the code window is a Run button, which tests the code, depending on whether testing is enabled or not. After finishing the question, or if the timer runs out, the user moves on to the feedback panel.

The feedback page, with feedback visible on the left pane, and playback and code on the right.

After the user submits their recording, a feedback report is automatically generated by AI. Each question has a feedback report, and the user can rewatch their video and notes. Notes can be saved for later, and can be pasted into the community whiteboards, for feedback on their explanations.

Task 2: Interacting with others in the community whiteboards

Interacting with others and building a community based around interviews, in order to make job hunts feel less isolating, is the second main goal of our app. To do so, we considered having text-based forums early in the design process; however, we felt like this wasn’t very unique, and wasn’t very fun to interact with others over. So, our community boards are actually virtual whiteboards, which provide more flexibility in user interaction, especially for freeform drawings used to explain technical interview questions.

The user’s personal board, where they can make notes to themselves.

From the Home page, users can select from their recent boards, or navigate directly to the “Boards” tab. This is the user’s personal board, where they can make notes to themselves, and where pasted notes from practice interviews are located.

The Community whiteboard, with several drawings already on the board.

The user navigates to the Community board. Community boards are public, made up of random members from around the platform, up to a set number of people. Users can also create new boards with just select friends, or join existing boards hosted by other users.

The user adds a new text box to the whiteboard, which says “Did my first practice interview here!”
Other users welcome the user.

The user posts a text message on the board, and other users welcome the new member. If the user wants to befriend these users, they can right-click on their text boxes, which will bring up an options pane to add the user as a friend.

Summary

Time and time again, our team identified a need through user research to make practice for technical interviews more approachable. PepPrep aims to close the gap between people who might struggle with interviews and those who don’t — and there’s a lot of us out there.

Looking for jobs in the tech industry isn’t awesome right now, with a recession and employers looking at layoffs instead of new hires. But the job hunt doesn’t have to be that bad. We can use this time to connect with and support each other, instead of bringing each other down. We can both empower people through practice, as well as build up a community of people who can collaborate, commiserate, and celebrate their job hunts with each other.

Everyone deserves access to a job that is fulfilling, and supports their future, whatever it may be. Maybe your first step towards that future is an interview. Maybe your first step towards that interview is PepPrep.

--

--

CSE 440 Staff
CSE 440 Staff

Written by CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction

No responses yet