web

Guide

Benefiting job seekers and employees with referral services.

Guide

Guide wants to make an impact on both sides of the job search by offering free referral services.

Team
UX Designers (2)
Engineers (2)
Timeline
9 Weeks
IntroductionResearchDefinedesigntestConclusion
01

Introduction

How might we provide an experience that helps both job seekers and referrers?

Many people struggle to find employment in today's job market. Guide wants to assist people with their search by boosting their chances of getting a job through networking. They hope to offer referral opportunities from working professionals, who can also be rewarded with bonuses from their company for finding high-quality talent. After enlisting the help of another UX Designer, I set out to build a website for Guide.

Here are some challenges and solutions we found from this project:

Challenges

  • Build a reliable system for job seekers and referrers
  • Discover how the referral process works

Solutions

  • Produce a responsive website that meets user and client needs
  • Provide an intuitive, user-friendly referral experience
02

Research

We kicked off the research phase by conducting competitor analysis and user interviews.

Viewing our competitors

To gain insight into the competition, we looked at 6 different job searching tools. 3 of them were industry-standard sites, 2 referral sites, and 1 remote job site. I chose Refsy and ReferHire in particular since there weren't a lot of referral sites that allowed us to view the perspective of both job seekers and referrers.

Most sites offered the ability to search for and post a job, so there were still opportunities for two different types of users. Some unique features included adding specific skills to a profile or job posting, referral how-to videos, pre-filtering of candidates, and more.

Talking to potential users

For our primary research, we split up the interviews between two different types of users. I took on the job seekers while my partner interviewed job posters. Here's what we found:

All of the job seekers I interviewed believed networking was useful for their search, yet had definite concerns about actually doing it. Requesting referrals proved to be somewhat successful, with all participants having received a referral before and two of them getting a job after using one.

My partner reported that job posters preferred to use their internal job board vs. 3rd party websites. They believed in the power of referrals, and often attached things like recommendation letters along with a candidate's resume to give them a better chance.

Summary

Our competitors helped us discover commonalities between the structure of a job site, and gave us direction for what to include for Guide. Speaking to some people involved in the job search and recruitment process delivered helpful considerations for our user base.

03

Define

We used the information found from our research to map out the site's structure.

(Re)Forming a sitemap

There were a lot of changes made to the original sitemap, since it was more focused on client needs and less on users. Once my partner came on to help with the project, we reformatted the sitemap to best fit the insights from users as well as the client. As you can see through the highlighted sections, even the latest version ended up facing some changes further into our timeline.

Visualizing a user flow

The client previously wrote down their ideas for different user flows to be explored on the site. This gave us a good base of information for creating our flowcharts, which also contributed to the design of our wireframes.

Summary

We worked to ensure that the structure of Guide's site would be beneficial for both its users and the client. Doing so informed our decisions for creating potential user flows and gave us inspiration for wireframes later on.

04

Design

Moving into the design phase, we went from wireframes to producing the full visual.

Creating a dashboard

For this project, I was tasked with creating the user dashboard, which lets users see their profile information, job applications, and more. For my wireframes, I wanted something that would include the point of view of both a job seeker and job poster at the same time. I found space to do this by separating the navigation into different sections. Another pivotal aspect was discovering how to refer a candidate to a job from the dashboard. I learned a lot about how to layout the different pages in a way that users would understand.

After completing our wireframes, I made sure to set up a meeting with the client to go over everything and ensure that we were moving in the right direction. They had some helpful insights on what to improve, and we were given the green light to start on branding and UI design.

Rebranding Guide

At the start of the project, the client asked me "What do you think about our logo? Be honest." I mentioned that their previous style seemed more like a casual vacation guide than a job searching tool. They were open to changes, so I used my logo design skills to produce something more professional and indicative of the services they're trying to offer.

Applying the visual design

The client requested that we test our users with the full visual design of the site, so we worked to ensure consistency among color scheme, typography, and other elements of UI design.

Making things responsive

It was also requested that designs could be made responsive and translated to smaller screen sizes. Here, you'll see multiple page views of Guide on desktop, tablet, and mobile screens.

Summary

Using our user flows as guidance, my partner and I started ideating with wireframes. After receiving client approval, we then rebranded Guide's previous style in order to create the final visual design.

05

Test

We used Figma to conduct usability testing with our prototype.

Gathering user insights

Since our UI design was created with Figma, we saved some time by using their prototyping feature as well. After building our interactive prototype, the client helped us schedule usability testing with 5 participants. My partner and I took turns moderating each test and discovered some important areas for improvement for the design.

Overall, the participants enjoyed the layout of the website. They thought that finding and posting a job was easy to do. The biggest pain point came from the referral process, however, as many felt stuck and confused by the verbiage used to refer candidates. At this point, the client and user needs didn't seem to match up the way we expected. We would have to think of a way to make things more intuitive for our users.

Task flows

01
Create an account

You are browsing the internet during your job search, and you stumble upon Guide’s website. After reading about how the referral process works, you decide to use this tool to help you find a job. How would you go about creating an account?

02
Find a job

After creating your account, you wish to start browsing the site for open opportunities. How would you find and apply for a job?

03
Post a job

Your company is looking for someone to fill an upcoming role. How would you post a new job?

04
Refer a candidate

You’ve posted a job, and have reviewed some applications. After reaching out to potential candidates, you’re ready to move forward with a referral. How would you refer a candidate to a job?

Updated flows

Here's a breakdown of the major changes made to the referral process.

At first, Referrers were able to see "Posted Jobs" and "Candidates" as separate sections on the user dashboard. We later decided to consolidate things, since users could view their candidates from within the posted job page.

Users felt confused by the term "Accepted" while viewing the candidates. They weren't sure how it was related to referring a candidate and didn't see why they would have to approve an application before referring someone.

Upon asking for clarity from the client, it seemed that accepting an application was meant to be more of a way for the referrer to organize a smaller list of more qualified candidates. We changed "Accepted" to a "Saved" option instead, so referrers could still be able to shortlist their preferred candidates.

Summary

We tested out our prototype using Figma, and found a significant problem with the referral process. Communicating with the client and expressing the concerns of users helped us find a solution that worked for everyone. We updated the flow for a more efficient, intuitive experience.

Conclusion

Designing for Guide helped me learn a lot about teamwork and collaboration. Not only did I have the chance to work with another designer, I could also communicate with developers to discover any particular needs and constraints for the website. Working with an actual client gave me more experience with explaining, and at times, defending my design decisions—an important aspect of being a designer.

Moving forward, I would conduct a second round of testing to ensure there are no usability issues. I would also encourage the client to implement a messaging or notification system within the site for faster communication purposes.

I hope that everyone can benefit from Guide's referral services and look forward to seeing the fully developed website in the future.