Redesign Challenge: Handshake Job Search Bar

Lyndsey Kong
7 min readOct 6, 2019

--

This redesign challenge is part of the Kleiner Perkins Design Fellows 2020 Application.

Introduction

As a college student constantly on the lookout for new opportunities for professional growth, I have learned to use and love Handshake as a digital career platform to access great jobs and internships. Daily use of the platform (always on that recruitment grind) has also prompted a lot of my own thoughts and reflections on Handshake’s user experience design. Whenever the experience doesn’t feel quite right, it presents an opportunity for improvement! In the following challenge, I will specifically focus on the job search bar on Handshake for examination and re-design.

1. Identifying Re-Design Opportunities

Key question: How can the angsty college student’s experience of looking for jobs on Handshake be improved?

Job Search on Handshake (Left: Mobile, Right: Web)

Ah, the job search bar: where the rabbit hole of every internship search party begins, displaying a continuous scroll of roles from all over the place waiting to be filled.

Functionality wise, this is arguably the most important feature of the entire platform, which is why I chose to optimize it for this redesign challenge.

Opportunity 1: Refinement filter placement across web and mobile

Without even typing in a single search word on Job Search, Handshake presented me with a list of opportunities based on my previous search history and career interests. Nice!

To navigate through all of these opportunities though, I do need to apply the filters to narrow down my options. Interestingly, the placement of the “Filters” button is prioritized on the mobile interface but not on the web browser’s. I wonder whether this inconsistency between the two platforms is an intentional design decision, but in my opinion the prioritized Filters placement on mobile is more user-friendly in being accessible and effective at reducing the cognitive load on users.

Opportunity 2: More explicit filter options

If you take a closer look on the web interface, the first job showing up on my search isn’t actually a good fit for me.

This job opportunity’s employer preferences only partially matched my profile, yet the search algorithm (or lack there of?) somehow made it appear at the top of my research results, above the next opportunity for which I match all of the employer’s preferences. Huh.

As I scrolled down to see the other opportunities below, they were a mixed bag of job types with different compensation models and requirements. I need to do something to navigate through all this better.

The string of buttons in the customization bar right below the search bar allows me to limit my search to Full-Time, Part-Time, Internship, and On-Campus opportunities. These certainly help me narrow down my options.

And look! The Filters (which-I-did-not-first-see-but-should-have-applied-earlier-before-getting-myself-into-this-professional-talent-seeking-mess)!

The Refined Job Search Filter

I click on the Filters button, lo-and-behold, there are actually eight main job filtering categories I can customize my search with: Job Type, Employer Preferences, Work Authorization, Industry, Job Function, Major, Employer, and Labeled by Your School. Of all these, the first five are selected from finite options by multiple choice boxes and/or drop down menus, while the latter three are customizable through a more open-ended text box search.

A selection of the refined job filter categories

As a user, seeing these refinement categories after clicking on Filters is both a relief and a point of question. I am glad that I can now finally fine-tune my search results, but I kind of wish that I could have done it earlier without having to click on Filters all the way at the end of the string of buttons in the customization bar, and to be taken to a filter category selection screen that covers up the job search results entirely.

After a doing quick survey to collect the opinion of 10 peers (s/o to my supportive friends who are already amidst the internship application season), I found out that having matching employer preferences and work authorization (especially for the international students) filters are just as important as the four listed job types at the top of the customization bar, yet they are not displayed and cannot be selected until one clicks on Filters to discover their existence and use them efficiently. Did someone say opportunity for re-design?

Let’s go!

2. The Re-Design Process

From my aforementioned observations, experiences, and quick user interviews, I have identified the following objective for my Handshake re-design:

Improve the efficiency of user navigation and customization of job search results by prioritizing search categories that students care about the most.

Lo-Fidelity Sketches

A quick napkin sketch is the beginning of bringing any idea to life!

I began the design process by sketching out an alternative layout for the job search customization bar. This includes two main adjustments from the original:

  1. Explicitly listing the top three most-used search categories: Job Type, Employer Preference Match, and Work Authorization. Once the user clicks on the search category, the specific options are displayed in a drop-down menu for selection to fine-tune the search results. The previous list of Full-Time, Part-Time, Internship, and On-Campus job type buttons are now organized into the drop-down menu under Job Type, for example.
  2. Replacing the Filters button with “More” button: Clicking on this button displays additional search categories which the user uses less frequently. Furthermore, the “Customize Your Search Bar” feature enables users to adjust their default search category preferences, which can be relevant when the student’s job selection criteria and priorities change over time.

Now let’s implement these design decisions!

Hi-Fidelity Mockups

Priority Search Bar: Job Type, Employer Preference Match, Work Authorization buttons. The user can intuitively select these right after entering the keyword above, without ever encountering the feed of unsorted job opportunities.

Drop-down menu selection within categories: Specific selection within categories for more refined search. Declutter, declutter, declutter. The actual split-screen feed of job options is still visible behind the drop-down menu rather than completely covered during refined category selection, so the user can directly see how their selection criteria narrows down their suitable job options!

Doing more with the “More” button: Priorities matter. With limited time and cognitive capacity, we as desperate job-seeking students need to dedicate our attention at what’s meaningful to us. While my user interviews pointed to Job Type, Employer Preference Match, and Work Authorization as the three top priorities for job-seeking college students, the truth is the priority of these criteria can differ greatly depending on the individual. The user can add or remove their top displayed search categories under “Customize My Search Categories” depending on their own needs, accomplishing the true meaning of adulthood: choosing what we value.

My Takeaways!

  1. Every project is an opportunity for growth. Tackling this design challenge has been a fun process of brainstorming, hacking, and problem-solving. These are some key lessons I learned along the way:
  2. Details matter. One tiny feature can mean all the difference between an optimal user experience and a frustrating one. As designers, designing with intentionality and thought into every detail is incredibly important. Sometimes one small change can make an experience so much better!
  3. The importance of understanding the user. As a college student who is a regular user of Handshake and with plenty of peers who belong to the Handshake user demographic, I very fortunately had a lot of personal experience on the platform from which I can generate re-design insights from. In the real world, I wouldn’t always have the luxury of knowing the product this well right off the bat. In those cases, I would prioritize spending a lot more time on need-finding through interviews to gain user perspectives and insights before tackling the design.
  4. Iterate, iterate, iterate. Handshake has arrived at its current version through a continuous process of iterative improvement — even during my limited time using the platform since my undergraduate career, I have witnessed so many amazing optimizations to the platform’s UI/UX features. The purpose of re-designing is constructive, and a timely reminder to maintain a positive growth mindset in always striving to make things better with design.

Thank you to the Kleiner Perkins Design Fellows program for giving me a reason to spend Saturday night doing what I love: design! I look forward to continue learning, experimenting, and embracing everything the future has in store for me as a product designer.

--

--