Case Study

The UX Interview Handbook

Case Study
UX Interview Handbook Homepage mocked up on iMac
UX Interview Handbook Homepage. https://uxinterviewhandbook.com/
End Present
Role

Creator

Research

Content & Strategy

Design

Development

Maintainer

Technology

Figma

HTML/CSS/JS/MDX

React

Docusaurus/Alogolia

Cloudflare

What is UX Interview Handbook?

The UX Interview Handbook is a free collection of resources designed to help UX professionals prepare for their interviews. Inspired by similar resources such as the Front End Interview Handbook & the Tech Interview Handbook, this began as a personal resource to study and prepare for UX interviews, and is now free and open-source to help others prepare for their interviews too.

The Problem

Job searching is a highly stressful period of uncertainty. UX as an industry has become popular, over-saturated, and highly competitive. It’s become a gold rush for people trying to get into the tech industry without the challenge of learning how to code, and the UX industry has pushed back by increasing the barriers to entry.

Now, juniors must do more to prove that they belong in the industry. UX interviews have become more challenging and intensive. Regardless of how you feel about whiteboard design challenges, portfolio presentations, app reviews, the reality is that these are all becoming increasingly more common in interviews. Thus, interview preparation has become key to getting their foot into the door.

If UX juniors can get an interview, what can they do to increase their chances of receiving an offer? How might we support juniors trying to prepare for their UX interviews? UX Designers need to prepare for UX interviews, but there isn’t a good, definitive, or convenient resource they can rely on to guide them through this process.

The Solution

While studying for front-end interviews, I came across many comprehensive interview study guides, such as The Front-end & Tech Handbook. But for UX, there were only medium articles or blog posts. Comprehensive UX interview study guides didn’t exist.

A more convenient, better approach is to have a single collection with questions and answers readily available, with links to reliable sources so users have the option to learn more. Without a reliable resource to prepare for UX interviews, I created my own.

UX Research

Why current resources aren’t good enough

I keep mentioning the tech & front-end handbook as inspirations for this website. To see why they are so good, let’s first look at the current top resources for UX interview questions on Google.

User Persona
  • These are blog posts on websites that are designed to use SEO to market and sell their courses, products, and services.
  • The content is superficial. Most questions are behavioral, which are important but not unique to UX, and can be misleading because technical questions are commonly asked to screen candidates. Users who prepare using only these top websites can get a false sense of confidence and preparation.
  • They don’t link resources or cite their sources. Some answers are too short and aren’t satisfactory, and should redirect the user to more resources.
  • 2 of 3 websites have poor UX. UX designers are sensitive to bad UX, which makes it annoying and even frustrating to use.

These types of web pages are the top search results for other similar, related search phrases as well. There was no existing resource dedicated to preparing UX designers for their interviews—except one, but it’s a product design book that isn’t free.

What makes the other guides so great?

User Persona
  • They are comprehensive resources dedicated to preparing people for interviews. It covers all the essential aspects of interviewing and provides a clear structure for the entire interview process.
  • They provide clear answers to questions and cite their sources for readers to go more in-depth.
  • Simple, clean, and non-intrusive design. It has a good navigation structure to allow users to navigate and find content quickly, and even helps create a mental model of the interview process.
  • Free to use and open-source. There are no paywalls to prevent users from accessing content, and has been thoroughly vetted by the open-source community.

SWE & Front-end have a big open-source culture, so there are tons of free resources that help people interview. Despite the existing competition, the Tech Handbook & Front-end Handbook have both become popular resources.

If we imagine a website like this except for UX, we can see what a successful UX Interview Handbook looks like. The challenge now is to tailor it to UX, so I began by furthering my understanding of the potential users.

Who are our users?

Our primary demographic will be young, new graduates preparing for their first UX interviews. They might have a variety of different degrees and backgrounds, but most will not have a comprehensive knowledge of all interdisciplinary fields that influence UX, so the handbook should briefly cover all of the basics to make them more well-rounded UX practitioners.

  • UX juniors. College students, new graduates, and people trying to get into UX are preparing for their job interviews.
  • UX professionals. They might be preparing to interview again but are unfamiliar with the current interviewing process or need to brush up on the basics. They could be using it as a general UX reference.
  • UX interviewers. Interviewers may use this as an interviewing resource or question bank to ask their candidates.

Information about UX professionals was derived from NN Group's report on User Experience Careers.

Context/Environment/Habits

When are they studying? What kind of mindset are they in? What are they doing? What are their habits? Some people immerse themselves into the preparation process, studying whenever they have the downtime to think-during bus rides, car rides, etc. They could be at their desk, room, or library, in a deep flow state. Whereever our users are, the website needs to be accessible and responsive to support all users and devices in various environments.

Interview preparation is partly an exercise in self-reflection. Users must be aware and honest about their abilities, so the website must support that by removing distractions—no flashy animations or anything unexpected, annoying, or distracting. Dark mode is essential for our night-owls make it easier on their eyes and giving users more control over their environment.

Another anticipated use case is to use it as a quick reference before going into interviews. To support this, I provided a search function using Algolia DocSearch so users can easily search and reference material.

User Goals & Needs

Users are here because they are looking to prepare for their interviews. Their idea of preparation might be to get interview questions and answers, but deep interview preparation goes beyond that. With this perspective, it makes sense to include sections that prepare users for design challenges and presentations, arguably the more challenging parts of UX interviews. These additional resources were added to fully meet their needs and goals.

How do users know to trust the information on this website? Briggs, Simpson, and De Angeli (2004) looked at trust in advice websites and developed a model of how people determine whether or not to trust the advice they receive from websites. The authors developed a 22-point scale designed to break down trust into a set of judgments that can be measured. They are:

  • whether the user perceives the information to be prepared by an expert or a knowledgeable source
  • whether comments from other users were available on the site
  • if the site was owned by a known and respected company
  • if they had to wait a long time on the site
  • if different options were suggested by the site
  • if the site was perceived as hard to use
  • whether the user felt involved in how the site constructed the advice offered
  • if the site was perceived to be interactive
  • if the advice was tailored to the user
  • if the reasoning was explained to the user
  • if there was an opportunity to contact a human
  • if the advice appeared to be impartial
  • if the advice was perceived to be good and the user trusted it
  • if the site behaved in a predictable way

Some of these issues, such as user comments, cannot be realistically addressed because of the additional complexity of working with a database and API. For other issues, there are a few ways to tackle them. The first is through transparency. For each question, I cite the resources used to answer them and show how the questions were sourced.

Asking for feedback can demonstrate that we value their opinions and are constantly looking to improve. Providing contact information can increase trust. Advertising that we are open-source signifies that it is community focused and thoroughly proofread.

For normal prep, users can explore the website however they want. For people with less time, they might be more selective of things to learn. To support this, I indicated which questions I felt they should focus on.

Business Strategy & Goals

My strategy was to create an MVP for market validation and feedback, so I set a deadline and scaled the project scope to meet that deadline.

Monetization was not a real consideration for this project, but can be achieved through sponsors & advertising deals. This means the website needs to be professional, accurate, trustworthy, and have high user traffic with analytics to demonstrate value. For open source projects, marketing by posting it on online communities will be the best way to get it out there.

The idea is easy to copy and isn’t difficult to develop, so being the first to market will be key to capturing the initial market and gaining an advantage over potential competitors. My deadline was set to June 2022 so new grads can use it to study for their interviews.

Constraints

  • Time to market is critical, so development has to be fast. With a custom website, there is more flexibility for design but requires more developmental investment. In contrast, frameworks such as Docusaurus have less development time, but it may be challenging to make significant changes since it locks you in an existing framework. Since the design I had in mind was relatively simple and time-to-launch was critical, I used Docusaurus.
  • Since this is an advice/information/content-based website, copywriting will be extremely important. To deliver high-quality content to my users, I need to essentially become an expert in interviewing and focus on UX writing.
  • Limited development resources. Since I would have to do both the design, development, and copywriting, I need to limit the project’s scope to meet the deadlines. The plan was to focus on development and technical questions first, then get the behavioral questions sorted and figure out how to answer those later.

To work within these constraints, design and development went hand in hand. I prototyped and designed the website as I developed it, which provided a considerable advantage as traditional design and prototyping may have taken too much time.

UX Design

Design Principles

  • Convenient. Making things more convenient is usually enough to get people to start using your product. It saves time, money, and effort.
  • Reliable. The website must be easily accessible from all devices, for all environments and time of day. No paywalls.
  • Simple. Keeping it simple helps users focus on what’s important. Limit distractions and don’t make things more complicated than it has to be.
  • Helpful. The entire point of this project is to help people. All feature must be implemented with the intention to help.

Information Architecture

User Flows

The expected user flow was simple. Users can follow a linear flow that covers the entire UX interview process step-by-step, as you might expect in an actual interview. This structure is reflected in the sidebar.

Ideally, a sequential flow would resemble the most representative form of the interview process. Not all interviews follow this sequence, but it’s important to frame it in a way that creates a structured flow to provide structure for juniors to follow.

Content Strategy

To source real interview questions, I created a web scrapper to automatically scrap interview questions for UX related positions from Glassdoor. Additionally, I created some of my own questions which were helpful in clearing up some ambiguity or nuance in my UX knowledge.

The copywriting must be easy to understand while demonstrating an understanding of UX vocabulary and knowledge. The approach for technical questions was to start with a simple answer, then elaborate with increasing complexity. The answers should be brief, concise, and link to resources where they can dive deeper into the topics.

The strategy for behavioral questions was a little different because these questions are designed to assess personality traits and culture fit. These were more challenging and required research to answer appropriately, so I decided to defer this content until I had more time to write my answers and determine good approaches.

UI Design

Docusaurus comes with a preset theme with a design system and UI library. There were three major changes I made to the original design.

Homepage

I removed the default homepage and changed it to a document page with a visible sidebar. This way, the user can immediately see the table of contents and what this handbook offers.

Navigation Bar

The navbar doesn’t provide any extra functionality, so I mostly got rid of it. This has an advantage of providing more vertical space for users to focus on the content.

Footer

I refactored the layout to include the footer inside the main document container primarily for aesthetic reasons. UX designers who use design systems may be more familiar with this type of layout. In the original design, when you scroll down, the footer pushes the sidebar out of view. With the footer inside the document page, the sidebar remains in the same consistent location.

Default footer
New swizzled footer

Branding

Colors

To determine what colors to use, I referenced websites designed for designers. These websites commonly use red for their logo, and because blue is known as a trustworthy color, I used a combination of red and blue. These colors were run through an accessibility checker to ensure proper contrast for light and dark mode.

New swizzled footer

Typography

My first option was Helvetica because designers generally like Helvetica and its a safe and familiar option. However, since Helvetica isn’t a free font, I found Arimo, a free alternative on Google Fonts.

User Persona

Logo Design

I saw this diagram from an HCI textbook I was reading and thought it was a fitting metaphor for the handbook. It’s a diagram of how to draw the golden rectangle.

User Persona

Tone

The tone should be professional and confident to convey expertise in the subject knowledge and increase trust from the user. Anything less might have the user question the credibility of the information and affect their confidence in the website.

Technology Used

The website was developed using Docusaurus, which uses MDX for easy content writing and allows the use of React components all in the same file. It’s also a static site generator, so we can expect high performance and better SEO.

The website is deployed on Cloudflare Pages. I selected Cloudflare Pages because it has unlimited free bandwidth, saving money should the website scale and receive high traffic. DocSearch by Algolia is used to implement search.

Evaluation

Analytics

Analytics is collected using Google Analytics (GA) and Cloudflare’s built-in analytics. There’s a significant discrepancy between GA and CF because GA doesn’t count web crawlers or bots but is easily blocked by ad-blockers, while Cloudflare measures all traffic. However, without Cloudflare’s paid analytics service, GA has more useful, in-depth data.

User Persona
Cloudflare Analytics from Dec 21 2022 - Jan 19 2023.

Key Metrics

Following the HEART Framework..

  • Happiness: NPS, Satisfaction, Overall Experience. Currently no feedback.
  • Engagement: Monitoring events and engagement time. However, if users answer the questions alongside, they might have it open but have another browser window focused instead. If this is the case, I would expect a low average engagement time with high views per user as they might be tabbing in and out, which seems to be the case for pages with questions but needs to be verified.
  • Adoption: Unique Users, DAU
  • Retention: Returning Users.
  • Task Success: N/A.

Usability Testing

Primary usability testing methods were the usability inspection methods such as Heuristic Evaluations and Cognitive Walk-throughs.

Heuristic Evaluations

NN Usability Heuristics were used along with guidelines I compiled from NN group and research articles. Usability Heuristic Evaluation was performed through a mix of task and aspect analysis. Evaluators were given tasks and sections to perform, evaluate, and report any heuristic violations. At the end, the appropriate fixes were implemented.

Next - Psi Chi OmegaGo to next case study psi chi omega