self-designed & programmed site

Qo: Interview Practice Tool

A self-designed and programmed website for interactive behavioral interview practice, offering users personalized skill practice and guidance.

Link to Qo Interview Practice Tool
My roles
UX/UI Designer,
Programmer
project focus
Web Development,
Programming
Project year
November - December, 2022

TL;DR: Project Outcome

In this project, I designed and developed a behavioral interview practice tool that includes the following metrics: 

- Building a js database that includes over 100+ behavioral questions relevant to 6 key tech industry jobs; 

- Personalizing up to 12 behavioral questions to users with sample answers and an additional 3 features for practice & learning; 

- Using 3 external .CSS and web API tools for user experience optimization and adhering to Web Content Accessibility Guidelines (WCAG).

Problem Statement

Lack of confidence during the interview is why 40% of interviewers don’t take a candidate past the first stage. - Twin Employment & Training

Job interviews can be incredibly nerve-wracking for job-seekers, and thorough preparation is essential. However, traditional mock interview websites come with significant limitations, such as fixed time constraints and high costs.

Proposed Solution & Target Audience

This project is focused on creating an interactive tool for practicing behavioral interviews within tech-based professions. It offers users personalized questions and valuable guidance to enhance their confidence and preparation.

The primary audience is active job-seeking individuals seeking to improve their interview skills. Currently, my JavaScript database covers six jobs in tech industries, but there's expansion potential to cater to users in different sectors.

The ideation, prototyping and user testing document can be found here.

Interaction Descriptions

This website is responsive and designed for two screen sizes:
- Desktop: 1176px x 651px
- Mobile: 390px x 844px

1. Setting Up

In this system, users have the option to input their desired profession and check its availability in the database. If the auto-complete dropdown lists their profession, it's present in the database.

The current available professions consists of "Product Designer," "Data Scientist," "Software Engineer," "Product Manager," "UX Designer," and "UX Researcher." Just start typing, and selecting any of these six will get them started.

2. Practice

At this stage, the website personalizes questions based on the user's chosen profession or job role and their desired practice volume. It compiles a randomized set of questions from the JavaScript database for their practice.

There are four features, including sample answers, that help users practice:

- Get a Hint: Access a hint by clicking the lightbulb icon. Hints last 5 seconds.
- Saved Questions List: Store a question for later review. Press the star icon to save and turn it yellow. Access saved questions by tapping the stacked star icon. Tap again to close the list.
- Turn Camera On: Practice with your camera on. Tap the camera icon, grant permission, and turn it off the same way.
- View Sample Answer: Get extra help by clicking "sample answer" to reveal/hide the answer text.

3. Saved Questions List

Here, users have the option to review their saved questions or remove any questions they no longer wish to keep.

Overall, this practice tool enables users to practice freely, save questions for future review, use the camera for self-practice, and receive hints and tips.

External Tools & APIs Used

Below are the external tools & APIs used for this website beyond what's available in HTML/CSS/Javascript:

Animate.css:

- I chose animate.css for web element animations due to its simplicity and visual appeal.
- I Integrated it mainly in JavaScript files after event triggers, like sliding setup content or buttons.

Google Font API (IBM Plex Mono):

- I continued my font selection IBM Plex Mono in Figma prototype for style, and used Google Font API to implement it in the web browser.
- Incorporated API link in HTML with font weights 300, 600, and 700 as needed.

Mediadevices.getUserMedia() API:

- I chose to enabled camera functionality using getUserMedia API in JavaScript, so users can watch their performance and identify areas for improvement.
- When camera button is clicked, API streams video to designated HTML div.

Click to access website source code & assets.

Accessibility Checks

To ensure compliance with Web Content Accessibility Guidelines (WCAG), I employed the WAVE web accessibility evaluation tool to fix errors and contrast issues.

This tool also assists in scrutinizing the structural elements of my website to identify areas for code improvement.

Iteration Process & Potential Features

In my original design, I had additional features that weren't included due to time constraints, including a timer and a "practice again" option for saved questions.

For the timer, user testing feedback indicated its existence may cause stress, so I prioritized other stress-free features over it. Realistically, during interviews, there wouldn't be a timer as well.

Regarding the "Practice Again" button in saved questions list, while it can be a valuable addition, it's less essential compared to refining other features. Its complexity, involving different practice flows, requires careful consideration in future iterations.

Reflection

My primary obstacle was converting my Figma design into a functional website.

My limited programming experience required additional time to grasp and implement specific elements. Complex features presented challenges in aligning them with my coding style and abilities.

Nevertheless, I methodically tackled each detail, resolving issues and debugging as I progressed. Remarkably, I achieved my envisioned measurable outcome independently, without requiring external assistance or guidance from TAs.

Through overcoming challenges, refining features, and independent problem-solving, I successfully transformed my self-designed concept into a functional website, demonstrating my learning journey in coding.

Other Projects

All works