Career Site Builder

UX Research & design

View Prototype
Career sites builder header image

Introduction

At Hireology, a subscription includes a career site focused on recruitment and employment marketing. A range of solutions are offered, depending on customer need. Customers with basic subscriptions can find an attractive career site template that a Hireology representative will launch for them. Hireology also offers a fully customizable career site for clients who need a very specific experience built out.

Regardless of how customized a site is, the site is always built using an internal-facing tool. While originally a reasonable solution at the time of its conception, the tool was clunky and difficult to use. The company also began to wonder if the older templates they were offering were still a good solution for their customers. Was having the implementation team continually launching the new career sites the best use of resources? These were some of the questions that were asked when I was given this project.

Research

When thinking about beginning research, I had two things in mind. I wanted to be sure that we were thinking about the tool itself that our internal team used, as well as the career sites that the tool built - and whether or not they were effective for our customers. I wanted to look at how other companies in our competitive space approached this problem to see if there were any takeaways we could use when focusing on the project for our own business.

Competitive Analysis

A competitive analysis table comparing features of various recruiting platforms for their career sites offering.

For my competitive analysis, there were a few questions I kept in mind while doing my research of how other companies addressed this issue for their customers:

Were the career sites built from scratch, or from a template?

A majority of the competitors I looked at offered their career site in a templated format. The design already existed and was lightly customized to match a company’s branding. A smaller sampling of competitors offered completely customized career sites built from scratch.

If from a template, how many options were provided for customers to choose from?

If built from a template, the maximum available options for customers to choose from was two templates. Most competitors only offered one streamlined template.

If from a template, did the customer set the site up themselves using an existing tool? Or did a customer implementation representative set it up for them?

The answer to this question largely depended on the company size of the clients and the amount of money those clients wanted to spend. Smaller companies who worked with our less costly competitors usually had to set up their career site on their own through a customer-facing editor. Larger companies who worked with more costly competitors usually had the career site set up for them.

What different kinds of information did other companies deem useful for a career site? Was anything vastly different from the information that Hireology proposed was important, based on our research and experience?

Looking specifically at what information was included in templates and on career sites, a majority of the information used by our competitors was the same. Key focus areas included a list of job openings, facts about company culture, a list of employee benefits, and a place to apply for open positions online.

Did these career sites consist of multiple pages, or a single page?

A majority of career sites offered by our competitors were single-page templates with room for information that was relevant to a job search.

User Interviews

Next I wanted to interview the users of the tool - our internal team members. The number of individuals who used the tool internally was about five. Because of this, I thankfully I had plenty of opportunity to not only interview them about their use of the app, but also to conduct contextual inquiry studies where I watched them use the application over several hours. I also had the opportunity to talk to a few Hireology customers about their use of the career sites they had through their subscription with us. It gave me helpful context around the process of setting up a career site from the customer end, and what pain points existed for them alongside the pain points of our internal team members.

After breaking down the process of Hireology’s career site implementation and looking at our competitors, I saw a few issues that I wanted to solve to make the career site experience better:

Time to Launch

The process of setting up a career site was both lengthy and full of back-and-forth email and phone communication. Sometimes customers wouldn’t be able to provide information or images for the career site for weeks after the initial implementation call. Reminders were needed often so that clients remembered to send the necessary information for their career site.

Scalability

Sites were all built by hand. This was not an issue for an early tech startup, but was definitely not scalable as Hireology’s customer base grew in numbers. We needed a way of customizing templates that could happen without engineering assistance for every request.

Customer Satisfaction

Site update requests could add up to a long queue, which meant that some requests would wait weeks to be updated. Some edits even had to be completed by a developer instead of simply being updated with our internal tool by an implementation manager. This could result in extra time and extra frustration for the customer, as well as our customer success team.

Flexibility

Hireology’s technical method of creating a career site was rigid. Template layouts could not be modified using the internal tool, and additional sections could not be added without additional work from an engineer. This needed to be addressed both in the templates themselves, as well as in the internal tool we used. For example, it wasn’t possible for a client to move a gallery of images above the benefits list on their site if the template didn’t already come that way.

Design and Accessibility

Since many of the templates were designed and built a few years earlier, some of them needed a facelift. Some templates were not designed to be mobile-friendly, and needed an overhaul to ensure that accessibility standards were met. Additionally, because of the multi-page nature of some of the templates, many clients wanted to include information on their career site that wasn’t necessarily relevant to a job-seeker.

User Personas

To help us remember the users that we were trying to focus on, I created a few user proto-personas based on the interview work I had done both with customers and our internal team members. I found these to be a helpful tool both while brainstorming with my PM, and while designing on my own.

A user persona for the implementation team member.
A user persona for the Casual Job Seeker.
A user persona for the Determined Job Seeker.

Ideation

Project Goals

After my initial research, I discussed with my product manager what our goals for the project were. We came up with the following goals to address:

Improve the user experience of the existing internal tool to make it easy to use in the immediate future for our team members.
Consolidate our career site templates into one solid, well-performing design that could be used for any career sites moving forward.
Design an external tool that could be used by customers to update their career sites on their own.

With those goals in mind, my product manager and I built out a rough roadmap that he could carry forward and start to refine on his end.

Sitemap

A sitemap showing the organization of the career sites builder and its architecture.

Once we were aligned on our project goals and the roadmap, I started to focus on the more immediate goals of updating our career site templates, as well as improving the user experience of our existing tool. While I was primarily concerned with making it relevant and easy for our internal users, I wanted the tool to be simple enough that in the future, it could potentially be made available with some tweaks to our customers to use themselves.

Gathering all the information that our internal team members used to build sites, I put together a sitemap of how I wanted to structure the new tool. In the existing tool, team members had to jump all over the page when filling out the fields and making selections. I wanted to design so that the flow of building the site out was easier and more straightforward.

User Flows

Keeping in mind that I was not only creating the tool, but also streamlining the career site template itself, I made some task flows for the two different job-seeker personas to keep myself on the right track. This was to ensure that no matter what kind of user found the career site, they would always have access to that “apply now” button.

User flow showing a casual job seeker using a career site.
The Casual Job Seeker

The first user flow features an applicant who needs to be convinced to apply for a job at that company. After arriving at the site, they explore and read about employee benefits or workplace accommodations. This information compels them to apply. This user requires a site architecture that is easy to navigate to find the information they most want to know.

User flow showing a determined job seeker using a career site.
The Determined Job Seeker

I also mapped out a user flow for a job applicant who already knows they want to apply to the specific company that owns the career site. They are more likely to skip over pages that contain information they already know. This user requires the shortest path to a list of open jobs, and then to an application.

Design

Low-Fidelity Wireframes

After that preparation, it was time to start on wireframes. I sometimes like to start out with my low fidelity wireframes on my ipad. It makes me feel less attached to any initial solution I create and helps me to really branch out to come up with multiple solutions. It also allows me to be as messy as I need to be.

Low-fidelity sketches of the career sites builder.

Mid-Fidelity Wireframes

Once I’d gone through some sketching, I started moving my wireframes to Figma so that I could start mid-fidelity mocks. This is also when I start preparing some mocks for user testing. I like user testing at mid-fidelity because it gets users to look at the structure and experience of the design, and I also start getting helpful feedback from users earlier in my process. It was at this phase when I got feedback from internal users that they liked the idea of a vertical navigation that was easier to see, rather than having to scroll back to the top all the time to see their options.

Mid-fidelity wireframes showing the Company Info page.Mid-fidelity wireframes showing the "main" page.

High-Fidelity Wireframes

And finally, once I had some feedback from my fellow designers and the internal users, I moved on to high-fidelity mocks.

High fidelity mock showing the Company Info and Branding page.

The vertical, sticky navigation was a request from the internal team so that they could always have the sections of the website form at their fingertips and easy to find. Clicking on one of the links would automatically take them to the relevant section that they were looking for on the page.

High-fidelity mock showing the Code page.

Losing work was a problem in the old product. To help our internal team members out, we also included a sticky save button that they would always see at the top and would always be available for them.

High fidelity mock showing the History page.

In the old product, items could only be reordered by deleting them and starting over with the correct order. In the new product, we wanted to include the ability to drag items into different orders, depending on the needs of the site.

Testing

Testing Plans

I conducted five usability tests with the high fidelity prototype - one with each of the internal users. My overall goal was to assess the usability of the product and to see if the users ran into any issues while completing their tasks. The tasks for each test were:

Testing Results

Users were able to complete the testing tasks without any confusion. All of them were extremely pleased with the redesign of the tool and stated that it was going to make their work tasks of setting up new career sites so much easier. I did receive some feedback on rearranging the order of some of the fields to more easily align with the flow that they used to create the sites, which was a very easy change to make.

Future Considerations

After ensuring that the tool was easier for internal users to interact with, I wanted to turn my attention to what a future tool could look like that was accessible for customers to use to publish career sites on their own. My first concern was splitting up the long form of the original tool into more easily processed pieces. Similar themes were made into pages that the user could click to save as they moved through the various parts of their site construction. Individual pages were devoted to areas of interest, such as benefits, employee testimonials, a gallery of work space images, and site appearance. At the end of the process, users would even be able to determine the order of their site layout through a simple drag-and-drop interface.

High-fidelity mock showing the Benefits page.High-fideilty mock showing the gallery page.High-fidelity mock showing the layout page.