PHILIP CHEUNG

Project Overview

Interviewr: the ultimate hiring intervewing application.

Interviewr is a template-based web application where interviewers of all industries can build, organize, and conduct their interviews through a streamlined process. The team is currently working together to create a minimal viable product to release into the world.

My Responsibiliites

Product Owner/Manager
Product Designer

Time

14 months (ongoing)

Programs

Illustrator
Photoshop
Adobe Xd

Team Members

Philip Cheung (Design Lead/PM)
Janani Ramesh (UI/UX)
Joohee Chung (UI/UX)
Ian Chok (Lead Dev/PM)
Aaron Pua (Full Stack Dev)
Yang Xia (Full Stack Dev)
Natasha Mattson (Data Analyst)

The Mission

An inquiry was asked in a car conversation I had with my lead developer (Ian Chok) in August 2019: "why is that when we interview others for industry related jobs that we use different programs to build, organize, conduct, and reflect on our interviews? Is there a better, more efficient way to do this?" I had an inquiry. Are there applications that streamline the interview process? And if so, can we do it better?

The Solution

The solution was to create a template based web application where no matter what industry you are in, you can streamline your interview process. There are four major parts to the web app: 

1) The template builder

2) The dashboard

3) Interview mode

4) Interview reflection

Approach

How I Did it

In the span of 8 months (and still ongoing) I completed the following to create the designs for the web app:

Overall

1) Secondary Research

2) Primary Research

3) Personas, Design System + Branding

4) User Stories + Information Architecture

Template Builder UI/UX

5) Wireframes (Low & Hi)

6) Round 1 User Testing

7) Development (For a Minimal Viable Product)

8) Round 2 User Testing

9) Design Quality Control

10) Constructing industry specific templates

Secondary &
Primary Research

Evidence Based Research

I've spent around 4 months researching, interviewing, and conducting competitive analyses on my inquiry. In that time, I've learned various methods of interviewing for different industries. I learned the processes of interviewing for HR, copywriting, UX, etc. In addition, I've looked at roughly 20+ competitors and analyzed their UX.

1) Who we are Designing for & our intentions

In the field of interviewing software, I wasn't alone. There are many web applications out there that seek to help interviewers through the hiring process. However, there are few applications that help guide a user from start to finish through a streamlined process. This is where we come in. We wanted every user who uses our app to say: "Wow. the process of finding the right candidate from start to finish was easy." We had heavy work to do. We started with interviewing everyone who would use such an application.

2) Interview Findings

1) "I have to alternate between [browser] tabs and different applications when I interview candidates."

2) "We usually use Google Docs as a note keeper for panel interviews. Live editing as a panel really helps us"

3) "Interviews are not robotic. It flows as a conversation between individuals; each seeking to learn more about each other."

4) "Oftentimes, I forget what a candidate said in an interview."

3) Competitive analysis

Most of the interviewing web applications I analyzed were typically rigid in their user journey (VidRecruiter, JazzHR, BreezyHR). I also looked into various template building and task management software. The goal was to look into the UX of how users build templates, organize them, and use them. I really appreciated Canva's template builder (it was freakishly easy to use), Taskcade's UX (block customization) and Webflow's user error prevention system.

Some of the software I looked at to better grasp the market this project resides in

4) Personas

Based on our findings we've derived three core personas. Our personas help drive the direction of our app and keep us in check as we develop it. Below is William Salvador, the meticulous, structure driven user.

William Salvador— one of our core personas

User Stories &
Information Architecture

Importance of User Stories & Information Architecture

By completing this phase of the project, the dev team and I were able to see the whole app flow and all the parts needed to build the app. The information architecture allowed us to look at the 'blueprint' and flow for each major section of the app (template builder, dashboard, website, reflection mode, interview mode, the store). User stories helped the devs understand what components at each touchpoint are needed to complete a task.

Information Architecture

Below is the full ecosystem of the application. Our information architecture map is consistently growing and additional pieces are added in weekly.

The in progress version of our information architecture

User Stories

For each feature that needed to be pushed, I created user stories that outlined the necessary components that are needed to complete a task. The user story below outlines what a user would need to create a basic template, save it, and view it in the dashboard.

Interview mode — User stories to direct how the features will be shipped

Design Direction

Design Direction

Originally we wanted to use the design system called argon by Creative Tim (see image below). However, we wanted our own unique look and feel as we wanted to stand out. I wanted the experience to be friendly, calm, and peaceful. Hence, I chose our primary color palette to be blue to evoke that calmness. The visual design language had to be calming as our vision was to make the hiring interview process less stressful. Rounder edges for cards and a softer primary typeface (we used Open Sans) helped evoke the experience we wanted.

BEFORE: The Argon design system by Creative Tim
AFTER: Our revamped design system inspired by the Argon design system (this is our dashboard)

Corporate Logo/identity

The logo and brand name had many challenges to get to our current stage. We went through many tiresome iterations. Our brand identity had to represent our vision, the experience, and brand name had to resonate with our users. This logo is the summation of these things.

Our corporate logo

Wireframes
(Template Builder)

Low-fi Wireframes

From the information obtained through the last phase, I created the wireframes for the project. I first went through the process of figuring out what templates would look like before diving into creating the template builder wireframes. The team settled on Version C as it allows for blocks to be added on a X and Y axis. User testers felt that Version C felt like a tool and usable. Version A was a vertical template builder. Early user tests showed that users felt as if they were taking an exam and were not happy with the experience.

We went through three styles before settling on version C
Some of the low fidelity wireframes for the template builder.

Hi Fi Wireframes

With the approval of the team, I advanced to the next stage of the process: fully fleshing out the hi-fi wireframes and creating a clickable prototype.

A simplified flow of some of the hi-fi wireframes for the template builder

User Testing

How I did it

The goal of my user tests was to determine if the process to build a template was intuitive and evaluate whether it was useful for interviewing others. I gave testers hi-fi clickable prototypes and instructed them to complete a series of tasks. Their task was to add video, notes, and question blocks to the canvas and edit them. There were 5 testers in this round of testing.

Some findings with my user testers

1)popovers

Before and after the implementation of popovers for the template builder

Development

Breaking down the design into sprint cycles

In the many meetings I've had with my dev team, we broke down the template builder design into sprints. Features such as saving, moving and creating blocks were some of our first dev sprints. By splitting our dev team into two teams (front-end and back end), we were able to cover more ground.

Early development of the template builder from the dev team.

Going Forward

Some of our design work in progress

These are my plans for the future

Flesh out the Template Builder

I'll need to fully flesh out the favourites system and the user error prevention system in the builder. Additionally, I'll need to look into how users will be able to navigate, sort through large template designs. Last, I need to revamp the icon design system so they are completely consistent throughout the app.

Continue speaking to potential users

I think its important to put the user first before anything else. After all, the goal of our app is to help our users easy find the best candidates to fill job positions. I plan to continue interviewing folks in HR, leadership, and those who are in a position to hire candidates. This is so I can better understand their needs and update my personas as need be.

Continue Exploring

UI/UX
Product Design

IoT Smart Controller

A case study of a IoT floor controller for a multi-floored building

VIEW PROJECT
Branding
WEb Design

Richmond Alternate Medical Clinic

Web design for a medical clinic with over 20 years in practice.

VIEW PROJECT
Branding
WEb Design

WIC Marketing

Brand identity and web design for one of Canada's largest seasonal distributors.

VIEW PROJECT