Video Interview App – UX Design

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

1_Email

The journey begins when a candidate receives an email inviting them to complete the video interview.

Step 2: Landing page

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

The settings page helps the candidate be confident that their setup will work correctly.

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.

3_Settings

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.

5_Test_question_1_counter

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.

6_Test_question_1_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.

7_Test_question_1_saved

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 is provided with 2 options. First, to continue on to the real interview. Second, to do another test interview if they don't feel ready.

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.

Applicant Tracking System – Mobile App

The example below is an applicant tracking system designed as a native Android mobile application. The project was commissioned by TribePad for KFC.

The main functionality includes:

  • Viewing active jobs and the total numbers of candidates that have applied for those jobs;
  • Viewing the list of candidates for each job;
  • The ability to move candidates through the steps of the application process;
  • The ability to see a candidate’s profile, including their screening questionnaire answers.

Technologies used:

  • invisionapp.com
  • Adobe Illustrator

Design skills:

  • Google’s Material design framework
  • Layout
  • Typography
  • Colors
  • Wireframing
  • User experience design
  • User interface design
  • Interaction design
  • Usability

The application’s login screen. Accounts are set on a global company level.

The list of jobs. Recruiters have the ability to search through the list in order to find the jobs they need. Each job shows the number of total candidates that have applied for that job, and also the number of new applications since the last login. Moreover, each listing displays the expiry date and the location for the job advert.

Tapping on a job lists the applicants for that job. At a glance, the recruiter can see the total number of candidates for each step of the application process. Each candidate listing shows a total score based on their pre-screening questionnaire answers and a status (“Incomplete”, “Application Submitted”). The recruiter can move a candidate to the next stage of the application process by tapping on the “thumbs up” icon or to the rejected list by tapping on the “thumbs down” icon.

Selecting more than one candidate allows for the action to be applied to all those selected. This is very important as it can save a lot of time for jobs that have a high number of applicants.

Once an action is selected, the list is updated. The recruiter can also undo their action.

Tapping on a candidate displays their profile. Each profile can contain general information, questionnaire answers (if applicable), portfolio (if applicable) and additional documents, such as certificates, awards, etc. The recruiter can move the candidate to the next step or to rejected (in the same way as shown on the previous screen).

There is also the option to skip a step in the process, and for example, directly invite a new applicant to an interview.

If a questionnaire has been assigned to the job, the candidate’s response to that questionnaire will be displayed on their profile.

BBC – Job Application User’s Journey

A project commissioned by TribePad for the BBC. The BBC, the same as Tesco are using TribePad’s applicant tracking system (ATS). The client requested an improvement on the existing user experience that candidates have when applying for jobs.

Some of the requirements for the project were:

  • AAA – full accessibility compliment with both the W3C requirements and BBC’s own internal requirements;
  • Responsive – the design must be user-friendly on mobile devices such as smart phones and tablets;
  • Backward compatibility with browsers as old as Internet Explorer 8;
  • Intuitive navigation;
  • A simplified process;
  • A dynamic process, that can be adjusted to accommodate the needs of different jobs, from internships to high-level jobs;
  • The ability for a candidate to provide a portfolio and documents in addition to their CV such as awards, certificates, etc.;
  • The ability to save an application’s progress and continue at a later date.

Technologies used:

  • invisionapp.com
  • Adobe Photoshop
  • Adobe Illustrator
  • HTML5
  • CSS3
  • Less
  • JavaScript
  • jQuery
  • Smarty
  • Blade for Laravel
  • Git

Design skills:

  • Accessibility
  • Responsive/mobile design
  • Layout
  • Typography
  • Colors
  • Wireframing
  • User experience design
  • User interface design
  • Interaction design
  • Usability
  • Copyrighting

The project took nearly a year to complete. Starting from the collection of all the requirements to discussing project prototypes and planning the integration. I was the designer assigned for the project and the main front-end developer working with TribePad’s back-end developers to integrate all the pages from the process. This included going to meetings with the BBC and their experts, discussing accessibility and usability requirements. It was a project that helped me grow on many levels.

Below you will se an example journey that a candidate would take when applying for a job. There are many variations of this process. It was designed so that it can accommodate the needs of different jobs. Some of the options include: the ability to ask for detailed information from the candidate regarding their hobbies, references, skills, education and career history; to request a CV, documents and portfolio where each of these requirements can be customised as optional, mandatory or not asked at all.

You can see the different application user experiences for yourself by visiting www.careerssearch.bbc.co.uk and applying for one of the jobs advertised. Note: the design of www.careerssearch.bbc.co.uk was not done by me. However, all of the pages that follow are, including the registration page.

Step 1: Careers Search – Results

1) careers_search_results

The application user experience can begin at different points and the BBC careers website is one of them. It lists all the jobs that the BBC offers and allows candidate to search and filter to find the most relevant for them one.

Step 2: Careers Search – Job

2) careers_search_job_advert_new_upload2

A candidate can come to the job advert page not only from the search results, but also for job adverts on third-party websites. Once a candidate clicks “Apply” they will continue to registration.

2) careers_search_job_advert

Step 3: Registration

3) registration

This page features 2 main features. Login and registration. If a candidate applying to a job already has an account they can simply login. If the candidate doesn’t have an account, they can register. In most cases applicants need to register and that’s why the registration form is more prominent.

Step 4: Profile Builder

4) profile_builder_simple

After registration the candidate is brought to create their profile. In this example the only information required is contact and address information. In other variations of the page, careers and education, skills, hobbies, references and additional information can be asked for. This would provide the recruiter with a more detailed view of the application.

Step 5: Questionnaire

5) questionnaire_p1

After having created a profile in the system (that applies for all jobs) a candidate is almost always presented with a questionnaire. The questionnaire can prevent them from continuing with the application process if they are not suitable for the job. In such case the next page would inform them about the incompatibility and provide instructions of how to find more suitable jobs. The questionnaire also provides a more fine-grained view of the candidate, tailored specifically for the job.

Step 6: Choose a CV

6) cv_upload_initial

On this page a CV can be uploaded. Once a CV has been selected for upload this screen will automatically be replaced by the next one, showing the completed upload.

Step 7: Uploaded CV

7) cv_upload_second

The page shows the list of uploaded CVs and only one of them can be selected. If the candidate is applying for a second time this list is what they will seed with the options to either select an already existing CV (from previous job applications) or to upload a new one.

Step 8: Equal Opportunities Questionnaire

8) diversity_questionnaire_completed

The equal opportunities questionnaire is a requirement by the BBC, but not all clients will have that enabled. It helps collect additional information that the company is required to have by low to prove that there is no discrimination when selecting candidates.

Step 9: Application Summary Before Submit

9) application_summary

Finally the candidate can see a summary of their application’s information, collected from the previous steps. This allows them to have confidence that all the information has been saved correctly. It is also the place where the applicant confirms all the information is valid. Once they confirm and submit, the application process will be completed.

Step 10: Application Completed Message

10) application_complete

The final page that confirms the successful completion of the application. At this point the candidate will also receive an email to re-affirm this. The page can vary for different jobs. The pages directs the applicant to their profile. The profile can be tailored to provide more information for the matching functionality of the system and increase the candidate’s chances to be sent a 1) job that is suitable for them via email or 2) be seen by a recruiter as a good match for a job.

Tesco – Applicant Tracking System

One of the biggest projects I have worked on, expanding for over two years. It was commissioned by TribePad to be used by companies such as Tesco, BBC, G4S, Sodexo and others. The product is a SaaS applicant tracking system (ATS).

Due to the nature of the project I cannot disclose more screens, but the system is a complete solution offering job posting, CRM, social and other modules.

Technologies used:

  • Adobe Photoshop
  • Adobe Illustrator
  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Smarty
  • SVN

Design skills:

  • Layout
  • Typography
  • Colors
  • Wireframing
  • User experience design
  • User interface design
  • Interaction design
  • Usability

Below the main ATS screen is displayed, where new applicants can be reviewed and moved to the relevant status. It gives an immediate overview of the state of the job’s applications and offers an easy way to process multiple applications in a fast and intuitive manner.

Main_ATS_Mockup