A video interviewing application was commissioned by TribePad. Displayed below is an example of a user journey followed by showing the users invited to an interview.
The key objectives achieved in this project were:
- To clearly communicate the requirements and expectations for the interview – time, technical, content;
- Make sure the user has a technically correct setup before hurrying to respond to the interview questions;
- Give the user maximum comfort and confidence of going through this new (for them) process of replying to questions and recording themselves;
- Re-affirm that the submitted content has been received;
- Do not distract the user with secondary information when giving a reply, so that they can focus solely on answering the question.
Technologies used:
- invisionapp.com
- Adobe Photoshop
- Adobe Illustrator
- HTML5
- CSS3
Design skills:
- Layout
- Typography
- Colors
- Wireframing
- User experience design
- User interface design
- Interaction design
- Usability
- Copyrighting
Step 1: Email
The journey begins when a candidate receives an email inviting them to complete the video interview.
Step 2: Landing page
The landing page can have a video welcoming the candidate and explaining what they should expect. It also prepares them by listing the necessary technical requirements the candidate must meet in order to begin the interview process. Finally, it provides an option to do a test interview before the real one begins.
Step 3: Setting up
This settings page helps the candidate’s confidence in their technical setup. The user can see themselves using a web camera. Moreover, they can record a test video and play it back. When ready, depending on whether the candidate wanted to see a test question or a real one, the next page will show them the respective content.
Step 4: The question loop
The “question loop” is a set of 3 or 4 steps that are involved in the completing of a question. Most of them are automated, but necessary to communicate to the candidate what they need to do and if their actions were registered successfully.
The first step describes what the criteria for the question are. In this example, 30 seconds to read the question and prepare. 60 seconds to reply.
The second step involves reading the question. The page is clean and simple allowing the candidate to focus on the question. A timer counts down, indicating when the video will start recording.
The third step is recording a response. It automatically follows from step two. A timer indicates how long of the recording time is left. The message at the bottom-left-corner of the camera confirms that the video is recording. A button at the far right provides an option for completing the video before the time has finished.
The fourth and final step for completing the question loop is the automatic confirmation. It is displayed as soon as the time to record expires or if the candidate marks their recording as completed. This screen provides confidence that the video has been recorded and that the user can continue to the next question.
Following questions will repeat the loop until all have been completed. The progress bar at the top updates, displaying the relevant number of questions completed and how many are remaining.
Test vs Real
The only difference in terms of design between the test and the real question screens is the bold, red indicator at the top-right saying that an interview is a test one. When the candidate is replying to real questions, that red indicator will not show.
Step 6: Transition from a test interview to a real one
Once the test interview is completed, the candidate will be presented with two options. The first one, to continue to the real interview. The second, to do another test interview if they don’t feel ready for the real one.