A corporate careers website case study (WordPress to Webflow, XML to RSS to Webflow CMS) built for HR & Hiring initiatives.
Our friends at Marsden Services recently launched a new careers website with the help of Aleberry & Webflow. We're breaking down common website issues & our solutions, along with why we moved the website from WordPress to Webflow.
One Corporation. Multiple Brands.
Marsden has one large corporate umbrella (Marsden Services), with many local smaller sub-brands, spread across the nation, under their umbrella.
Being a large company with many sub-brands, Marsden has hundreds of job listings spanning everything from janitorial & security to HVAC & Maintenance to Corporate & Office positions, all spread across the nation and handled by a variety of HR representatives based on the brand.
The Marsden Careers site needed to address:
Jobs spread across the nation
Span Multiple Service Lines:
Security
Janitorial
HVAC, Mechanical Maintenance & Calibration
Special Services
Corporate & Office
Multiple sub-brands have similar listings or span similar service lines
Adding of new brands as they are acquired or merged
Many Spanish & Somali speaking employees
Work with a dated job listing system with poor UX/UI
Easy to maintain
The former website was not only hard to maintain new brands, it relied on only linking out to a legacy job listings system with poor UI/UX. The layout of the main careers page was hard to navigate, even leaving some sub-brands off the site.
All job listings were grouped together regionally, and then grouped by service line. Each service line linked to a single sub-brand job listings page.
Unfortunately, this meant two sub-brands with the same service line or job type were often left out or mis-labelled. A security company with an office position wouldn't always show up under Office because it was listed as the Security company link only, or a second janitorial company would not be listed because there was already a link to the first janitorial brand.
Once you clicked on the service/brand link, it would go to an unfiltered external URL on a dated listings site that required the user to then filter for just that one brand, or go back and forth between the main careers landing and the brand listing external links to go between different brands and service types.
Someone applying for a job had to go through multiple unnecessary steps to find what they were looking for and many listings were missing from the main site. The mobile site was cumbersome to click through. Additionally, if someone was living on the border of Texas and New Mexico, they were unable to look at jobs together easily because of the forced one-region only.
Here's what the site looked like Before:
The Join Our Team was this map built with a WordPress Plugin:
Once you clicked a region, you were only shown these options off to the side. Each link was only one brand's jobs page, which caused a lot of missed listings with new companies being acquired/merged and made it hard to categorize individual listings:
Once a link was clicked, and it took you to only that one brand's listing, an employee would again have to search & filter. However in the example above, if this Security company wanted to hire an Office Administrator, the listing would not show up when clicking Office Positions. It would show up under Security because that was how the UX customer journey was setup.
There is also the added thought of "always hiring" or "always looking" that many companies are familiar with. Just because a position is not listed or available doesn't mean a company may not want to keep your application handy.
Our Recommendation: Subdomain built on Webflow
Aleberry recommended moving the Careers site off the main site and building it as a Webflow micro-website on a subdomain (careers.marsden.com). Not only would this allow us a ton more flexibility with the design, build-out, and all the listings data - we could create multiple pages as needed all centered around hiring initiatives and campaigns & load them up as quickly as possible.
The listings still needed to be hosted on the previously mentioned system, but we at least wanted control over the UX and customer journey + look & feel for a potential employee. Utilizing Webflow's CMS & Collections, in combination with an automation & syncing data tool (Byteline) and some fun Webflow additions (F'inSweet), Aleberry got the listings to a nicely designed & easy to navigate setup - all while keeping the actual job listings on the legacy HR system.
More on the automation tools & syncing of Webflow collection data for all the job listings below! We went through multiple options and methods before finally landing with Byteline as the PERFECT solution.
The use of a subdomain is perfect in cases like this, especially because the main corporate site needs to stay on WordPress for now.
WordPress to Webflow: Identifying the Right CMS
Because we wanted full design & development, UX/UI, and data control over all the job listings and general user journey, we recommended a move from WordPress to Webflow.
Plenty of CMS options exist, but Webflow's Collection and CMS setup are perfect for this case.
Webflow is much easier to update, includes on-screen fully responsive design/development & testing, easy to access SEO settings, constant backups, and allows plenty of parameters to prevent less technical folks from messing up a layout with a click of a button.
From a collections and data standpoint, Webflow allows you to build, filter, nest, and so much more over all your collections or data. You can also make updates to how you want to display or filter those collections very quickly. This is ideal for something like nationwide job listings, especially job listings from multiple companies and across multiple service lines.
With a Little Help from our Low-Code / No-Code Friends: FinSweet, Weglot & Byteline
Step One: Syncing Job Listings with Webflow Collections. XML to RSS to Webflow Collection.
Our first goal was to get the data (job listings) into Webflow, so Aleberry could add organization & customize the user experience for all new job applicants. We wanted to eliminate the 4-5 unnecessary steps + ensure all companies' listings were easily accessible.
By syncing the job listings with a Webflow collection, Aleberry could use filtering, conditionals, and create many different pages based on the search or categorization (like location and company). We could also have ALL listings from ALL Marsden sub-brands in one place, which was not available on the previous website.
Getting the data from a legacy job site to sync with Webflow required a few steps & lots of trial & error because we were working with a more dated system. The legacy listings system did not have a readily available RSS or API to work with, and listing feeds were all on individual lists/pages based on the brand.
We were able to access a consolidated XML for ALL Marsden listings provided, which was step one in ensuring ALL brands listings were visible!
Because many of the data syncing providers we looked at for syncing the job listings did not work with XML in the exact way we needed it to, we had a developer create a script to convert the XML to RSS format.
This new RSS also had the added feature of including Search URL parameters, which is beneficial when filtering or wanting to only display certain updated posts (for example "feed/search?search=texas"). This was an added feature just to make some future page buildouts a little easier to manage.
Building Version 1.0: Free Conversion RSS Tools and HTML Embeds
We hit a few bumps when looking at data syncing tools, including a big one: Auto-deleting (more on that below)! Because of this requirement and the need to get some of these bigger bugs resolved and on a new site quickly and not something that required custom development or cost 4x the budget, we opted for a version 1.0 with free solutions:
- Utilizing the URL Search parameters to create pre-filtered lists for things like service line/job type, location, sub-brand
- Combining multiple pre-filtered feeds into a single one (ie. janitorial, cleaning, etc. into one) with RSS Mix
- Taking the pre-filtered feeds and converting them into an easy to stylize & embed HTML with RSS 2 HTML
We kept track of the above in an Airtable. If anything ever snagged, we could locate the problem in the chain.
Using the collections, we inserted the HTML embed code in a Rich Text field, and created a draft page where we could control the CSS with dummy Webflow elements.
Once the items were in a collection, we added the embed code of the feed on applicable pages (by state, by company, by service line). Example in designer view here:
Here's a messy version of a dummy Draft CSS page we use to custom stylize the HTML Embed. Nothing fancy, just the classes applied to various elements:
While this 1.0 version worked well for a while, like many free tools - we were unable to control things like load or page speed when we had 500+ job listings.
Once the job listings grew or changed quickly, we began to see major load issues that were beyond our control because these were HTML embeds not raw data or collections.
If a project is smaller or a client needs to stay in that free range like many startups, or a client just wants something up and running quickly without having to worry about a large number of items (listings) or load time - this is not a bad option.
For this large 500+ job listing feed that changed daily and could have many people viewing it at a single moment, we needed a better solution that would require some monthly support fee but not be excessive in costs or rely on a custom build, should projects switch hands. We also wanted to ensure long-term success & ease of updating when needed with low-code or no code options.
Aleberry added a feature of "nearby states" using Webflow collections. This is nice if someone is looking a job in Texas or New Mexico - without the restrictions of the defined regions.
Building version 2.0: Byteline for auto-syncing RSS to Webflow Collection.
With page-load issues, we decided to revisit the solutions available for data syncing to bring the actual job listings into Webflow Collections as individual Collection Items that have the Job Title, Location, Link to Job, and Description. We eventually ditched Description because the jobs linked out. However, having that option built in and syncing is always nice, especially if we need it down the road.
Here's our Collection setup:
After much research & beta-testing of the known solutions, we worked with the Byteline (byteline.io) folks and created the perfect workflow for our needs.
The other solutions we tried included Airtable & Google Sheets syncing: syncing the RSS or XML over to a Google Sheet or Airtable, then syncing the spreadsheet to Webflow. We wanted to avoid this method to prevent another "too-many-steps-to-get-to-Webflow" load & other potential bumps. We also did not want the client to have to manage or keep an eye on two additional data lists should a problem occur.
We reviewed & tested Integromat, Automate.io, Zapier and a handful of other new and well-known solutions. The main hiccups with these included:
- RSS not auto-deleting items. With this being job-board, we had to have an auto-deletion. Zapier notes that their tools will not auto-delete when working with an RSS and a few other source types. We actually use Zapier for this site to filter the contact form, so it would have been nice to keep it together.
- Webflow not always showing live collection items because the site would not auto-publish. This obviously defeats a bit of the purpose of automation. This is a known issue when working with Webflow & APIs.
- The flow setup becoming too complex for a low-code or no code client to maintain.
- Some flow setups also required multiple actions for the setup, resulting in too many branches or actions per listing sync. These led to an excessive monthly fee that was 3-4x our client's budget.
- Single & Multi-Reference tags were not always working the way they needed to.
Byteline actually deletes, creates, and updates RSS Feed Items directly into Webflow Collection Items. It also Re-publishes the site automatically (a known issue when working with APIs on Webflow).
Byteline also did not require a complex flow that would make it hard to pinpoint an error or be hard to maintain for low-code or no code clients.
Here's a screengrab of the flow! So easy!
Byteline was the ONLY solution we found that worked in the exact way we needed it to, didn't require manual publishing of the site, and did not require a lot of different filters. This was one straight flow, with all filtering options directly inside the Webflow Node. You do not need to add a ton of filters or routers, unless you need it for a specific purpose.
As a bonus, the Customer Support at Byteline is outstanding! Their tutorial videos and quick response made the process so much easier. Thank you Byteline Team!
Step Two: Integrating FinSweet for superpowered Webflow filtering, collection lists, and searchability.
Once all the data (job listings) was synced, our next goal was to superpower the UX/UI and general customer experience for all potential job applicants. Our goal was always to eliminate the multiple steps & confusion of navigating the job listings, and ensure every sub-brand was included.
FinSweet Attributes is a brilliantly built script that allows tons of customization of functionality, and lets you control all the design elements, SEO, etc. directly in Webflow designer.
With FinSweet Attributes, we could easily allow applicants filter or search for jobs quickly and intuitively.
As a side note, we discovered that FinSweet has a script allowing you to use a navigation dropdown in place of the form dropdown. We plan on implementing this so we can fix that wonky arrow & dropdown list situation on the states that normally can not be edited with a form dropdown!
Check out this FinSweet filtering that includes utilizing a search input, filtering by state, going to a separate company page, and resetting. You can also stylize the hover states and add interactions as need below on "PART TIME EVENING CLEANER".
Now an assistant job at a security company would show up under assistant or office administrator, not security. Two companies looking for a similar position type will both show up as well.
Aleberry also digs the visual cue of how many jobs are showing in the results as you are filtering:
Plus when you search, you have an option for URL Parameters, which is great for sharing, bookmarking, etc.
Also some fancy pagination that can be customized & stylized:
All sub-brands under the Marsden umbrella have their listings showing up in ONE SPOT. We added a randomize on the Collection list as well to ensure there was a bit of a mix between the different service lines and brands.
Step Three: Inclusivity of multi-lingual employees
Marsden has many English, Spanish, and Somali speakers. One of the things that needed to carry over (and improve on) was the ability to switch languages. Because job listings are regularly updated, we could not always rely on an individual translator to
Thanks to Weglot, Aleberry implemented these translation services on both the Webflow Careers and the WordPress Main sites.
See the dropdown & Somali in action below:
Improved User Experience & Added Features:
In addition to all the above major functional improvement, Aleberry implemented a few recommendations as well.
By Company or Brand for Specific Applicants
We created a Brands page that is also part of a collection. Each brand has their own Collection Page Template where the jobs are filtered with the same FinSweet Attributes. This is for a potential employee or current employee to look for a job specifically within a brand or company.
Each company page had the ability to have the same filters (See Illinois jobs at CleanPower):
New brands can be added, edited, or removed based on any new acquisitions or mergers, and they would show up on the page and in the listings automatically. No need for too much extra work as Marsden acquires new brands, other than adding their logo in the Webflow Collection.
Quick Apply for Quick Applications + Empty lists
Marsden had a Quick Apply form on the previous site that we wanted to carry over to the new Careers site. The Quick Apply form serves as a catchall. We used Zapier here to direct certain form submissions to different people based on things like location or service line.
Here's Aleberry's Zapier flow to filter Webflow forms & direct them to specific people:
We also implemented an Empty State on all the Job feed collection pages that directed users to the Quick Apply. This is great if someone in Michigan is looking for a security job, but there may not be a listing today, but will be tomorrow. The "always looking" is a common UX experience we like to address with HR departments.
Updating Images: Reducing Steps
While this website's main updates will be reliant on an automated data sync of job listings to Webflow's Collection, some other common edits may arise like swapping out images, like logos for companies.
In the previous site, a team member would need to go into photo editor or to resources like Canva and resize + crop images to the exact dimensions before uploading. If they didn't, the image was often cropped oddly or screwed up a layout. This is a common issue in many sites.
Now, commonly updated images such as logos can be quickly uploaded as is! Our new template / CMS Collection is setup to auto adjust.
Updating Content, Links, & Images On-Site
No more having to flip between the back-end/dashboard view and live site. Life on WordPress and many other CMS options often involves changing text & images on the Dashboard, then previewing. Does this sound familiar? "Oops, that paragraph break is wrong and that image isn't aligned right, so let's go back to the Dashboard. Re-preview. Nope fix again. Ok, now we can publish!"
Having the on-site editing capabilities (seen below) allows users to see how the text works in the layout.
Other Technical Features: SEO, Responsive Design/Development & Testing, URL structuring
Some features make things nicer for Aleberry & the client!
With Webflow's setup, the client has access to all the key/basic SEO functions per page's settings (meta title, descriptions, slugs/URLs, OpenGraph, and more). This was not quick to update or find prior to the new site. Aleberry always sets up the basic SEO for websites prior to launch, but it's nice to be able to update descriptions and anything else on your own quickly.
The previous site was not fully-responsive (common with older sites). Many folks confuse having a mobile or tablet website with having a fully-responsive website. A fully responsive website means you can keep resizing your window any which way and the site will auto-adjust. With all the tablets, small laptops, large monitors, and varying versions of iPhones & Androids in 2022, your website should be FULLY-RESPONSIVE. With Webflow, we can design & develop at the same time & across varying screen widths. It also makes our standard beta-testing process much more efficient prior to launch.
Webflow has a 301 Redirect panel in the backend/site settings. With the way collections & CMS items are setup, you have the ability to fix messy URL structuring and 301 Redirect when necessary. Disorganized website content is like a disorganized closet! Good luck find the info you need quickly.
Life After Aleberry: Maintenance
The previous site required a third-party to make common updates like uploading a new bio photo. This means you have to email, wait for a response, see when they are available to sort it out, and possibly follow up. Due to older sites' backends & the structuring of some CMS platforms - this is a common practice.
Aleberry is here to make your life easier! With the exception of creating new pages or changing the design/layout of a page, we give you the ability to change and update your site easily. We'll always provide a tutorial with launch along with a CMS user-friendly guide to refer back to.
Of course, many of our clients come back to us for 1-40 hours/month of maintenance. This allows us to create new pages, change layouts or just take care of simple updates if you are too busy.
We don't own your data, accounts for plugins such as Google Analytics, or content! Your website shouldn't give you headaches.
