Paylocity

Rebuilt Website and User Experience Using Paylocity’s New Brand and Messaging, and In-Depth User-Focused Research.

Industry-leading cloud-based payroll and human capital management giant Paylocity wanted to build a brand new website to showcase their rebrand and fix ongoing usability issues. To achieve this, we started from the ground up with research and a comprehensive web development process rooted in data. This process also included a complete SEO migration and Google Analytics migration for the new site.

The Challenge

Paylocity partnered with Marcel Digital to completely rebuild their website to showcase their rebrand, as well as to build a website where the user experience was engaging, intuitive, and simple. The message from key stakeholders about the user experience was clear, the site was:

• Hard to navigate
• Difficult to update
• Slow to load
• Doesn’t work as expected
• Doesn’t match the brand
• Doesn’t engage the customer
• Lacking in mobile engagement

In order to alleviate these pain points, the Marcel Digital UX and web development teams would work closely with multiple key stakeholders to fix multiple website pain points, develop a rethought information architecture translated into wireframes, and work with a partner design agency to bring it all to life.

Beyond the design and usability of the website, Paylocity also wanted to make sure that after the rebuild, they maintained as much of their current organic visibility, traffic, and rankings as possible. This would mean a full SEO migration would be needed to ensure all search engine traffic and visibility would be maintained, or increase, post launch.

The biggest challenge? All of this would have to be accomplished on a short timeline, with a large group of stakeholders, and taking into consideration many moving parts to ensure an efficient, successful launch.

The Analysis

To start, Marcel Digital’s UX and web development teams held regular collaborative meetings with various stakeholders at Paylocity. These meetings revolved around collecting feedback and insights for UX and design research, strategy planning, ongoing task check-ins, and finalization / approval of tasks and designs. The goal for Marcel Digital was to become an integrated part of the Paylocity team, to see the vision of the new website, and to understand what success would ultimately look like for the team.

Speak to the Rebrand

The top priority for Paylocity was to better showcase the rebrand. This means that logos, colors, layouts, fonts, and more, would have to change across the website and meet the new branding guidelines.

We worked closely with the marketing and branding teams at Paylocity to make sure the new branding guidelines translated to the new Paylocity website. We then provided designs to stakeholders for approval and continued forward as we worked through designs and began development.

Focus on User Experience

Key stakeholders at Paylocity had numerous pain points they were looking to alleviate on the old Paylocity website. Through research, our UX experts focused on the user flows of the website and analyzing heatmaps through Hotjar. With Hotjar we focused on:

• Heatmaps: Where users were moving their cursors on the site
• Clickmaps: Where users were clicking when on the site
• Scrollmaps: How far users were scrolling down the webpage
• User Videos: Videos of real users visiting the website
• Surveys: Asking users for direct feedback about the website and pages they are on

This information helped us understand how visitors used the website and how we could more effectively prioritize information and calls to action on the site.

Maintain SEO Visibility

Our SEO experts got to work behind the scenes conducting in-depth technical, content, and off-page SEO audits to collect the data we needed to ensure a successful migration.

Our goals were to identify content and pages on the Paylocity website that were the most valuable from an SEO perspective and to ensure they were migrated or 301 redirected properly to the new website.

In our analysis, we used tools like:

• Google Analytics
• Majestic
• Search Console
• Moz Link Explorer
• SEMRush

These tools would give us insights to the pages that had the most search engine traffic, conversions, keyword rankings, backlinks, and overall engagement. They would also show us important content gaps in the Paylocity site that would give us the opportunity to create new content and capture new qualified search engine traffic and conversions from searches Paylocity wasn’t previously appearing for.

Keep the Data Clear

All of this work would also result in a Google Analytics audit as well as a Google Analytics migration. Our Google Analytics team began by analyzing the current Paylocity Google 360 implementation to see if data was being collected and reported properly. From there, our GA experts worked with the usability, design, and digital marketing teams to track important conversions and events across the website so that Paylocity could properly measure performance across the website.

The Solution

When all was said and done with research, our teams got to work, cross-collaborating to ensure information architecture, content, design, development, and analytics would bring Paylocity’s brand new website to life. We broke our work down into four key areas.

Data-Driven Information Architecture

Our UX experts began optimizing the user flow of the website by categorizing content and pages into prioritized navigation items, influenced by data from Google Analytics, as well as ongoing conversations with key stakeholders. We broke the navigation down by:

• Who We Serve - Content geared toward the target personas and business sizes Paylocity works with
• Our Products - The products that Paylocity offers to help streamline the target personas and businesses processes
• Resources - Training resources and courses available to target personas to get the most out of Paylocity's products
• Who We Are - Information about Paylocity and the team behind it
  Careers - Information about open positions at Paylocity

Under each one of these sections, we prioritized content even further by providing more specific pieces of content to appease users moving through the site, and also by capitalizing searches and keywords in search engines. Understanding how the website would be laid out from a user flow and information architecture perspective, we got to work on the designs.

Brand Focused Designs

After we finalized wireframes and the new information architecture for the Paylocity website, we got to work on the designs. While Marcel’s team did not formulate the designs, we created the initial wireframes for the design agency to ensure the site was mobile-friendly and easily navigable.

We were in constant communication with the branding and design teams, roping in Paylocity stakeholders as needed for design approval. We had three focus areas for our designs:

• Meet the branding requirements for key stakeholders
• Keep it simple, from user flows to calls to action
• Make it mobile-friendly

To meet the above criteria for success, our digital marketing, UX, and web development teams reviewed designs, sending necessary edits back to the design teams or forwarding on to Paylocity stakeholders to review and approve. From there, we’d start coding.

Seamless Analytics Migration

As we worked through the information architecture and design of the Paylocity site, our Google Analytics team began auditing Paylocity’s current Google 360 setup and worked with the UX team to map what GA implementations would be carried over to the new site. The team also began reviewing designs as they came in to take inventory of what new items would also need tracking in GA. Our work in Google 360 included:

• Account setup
• Filtering
• Dashboard creation
• Event and goal tracking
• Ongoing Analytics testing
• Analytics transfer to new website

After the setup of Google 360 tracking items were in place, we seamlessly switched the Analytics tracking over to the new site, QAing as we went live to make sure everything migrated properly.

Highly Focused SEO Migration

We can’t stress the importance of SEO enough in a website migration. Most website migrations not focused on prioritizing SEO can potentially lose up to 40% of organic traffic to their website. Those that do typically increase their organic traffic by an average of 15%.

As with our Analytics teams, our SEO team got to work as soon as our analysis commenced. And, like our Analytics teams, the SEO team worked hand in hand with the UX and web development teams to ensure the new Paylocity website was fast, light on code, and mobile-friendly.

Our SEO migration task items included:

• Full Content Analysis: SEO scorecarding that was performed to rank pages based on organic value and SEO authority
• Redirect Mapping: Created a full mapping of old URLs to new URLs

In order to complete these tasks, we scored each URL on the Paylocity website based on SEO value. This includes the traffic coming to that page, the number of backlinks, the number of conversions, and how many keywords it's ranking for. We would aggregate this information and provide a score (based on 1 to 5, 5 being most valuable) and work our way down the list.

Here is a screenshot:

Based on the scores above, we decided how content would be redirected and migrated, as well as what content could be updated, consolidated, or removed to make the most of Paylocity’s organic visibility.

The Results

We couldn’t be more proud of the product we delivered to Paylocity. Not only did the new website result in a near 43% increase in organic traffic post-launch, but overall engagement improved thanks to the new information architecture and user-focused designs.