Telerik Case Study on Paylocity’s use of Telerik Extensions for ASP.NET MVC

Company Name: Paylocity

Company Profile:

Paylocity provides Payroll, Human Resources, Tax Filing, and Time and Labor Management software

solutions through the Software-as-a-Service (SaaS) model. Combining the flexibility and control of an in-

house solution with the time and money savings associated with an outsourcing solution, Paylocity

believes that you shouldn't have to choose. We have created the most technologically advanced,

integrated web Payroll, HR, and TLM Software-as-a-Service (SAAS) solution for the mid-market and

complemented that with award-winning customer service.

Paylocity has twice been named the Payroll “Service Bureau of the Year” by the Independent Payroll

Providers Association (IPPA) because of its exceptional growth and client retention rate. Paylocity

Web Pay has received multiple 5 star ratings from the CPA Technology Advisor. In addition, Paylocity

has been recognized by Inc. Magazine six times as being among the nation’s fastest-growing, privately

held companies. In 2010 Paylocity received a Stevie award for the Sales Department of the Year, and in

2011 another Stevie for Contact Center of the Year with up to 100 seats. Also in 2011 Microsoft’s SQL

Server group released a case study on Paylocity available online at

http://www.microsoft.com/casestudies/Case_Study_Detail.aspx?CaseStudyID=4000009565 which

chronicles our software development team’s success using Microsoft and VMWare products to help

build and host a highly available, high-performing SaaS solution.

Project Title: Paylocity Web Time

Industry: Time & Labor Management (TLM)

Project URL: http://www.paylocity.com/payroll_services/time_labor.aspx

Attach company logo

Product used: Telerik Extensions for ASP.NET MVC

Product version used: 2010.1.416.235

Operating System: Windows Server 2008 R2 for the server, and all major browsers for the client

Database Platform: SQL Server 2008

Number of developers involved: 4 Developers

Development Time: 8 months

Challenges and Objectives: Paylocity acquired a Web Time product which had many customers

successfully using it for their Time & Labor Management (TLM) solution. Although the product had the

core TLM functionality, the development team felt that it was important to update the technology stack

from VB6, COM+ objects, and ASP pages to the Microsoft .NET platform to take advantage of the

advances in web-based technology that have occurred over the last 15 years, and to make it much

quicker and easier for the team to enhance and support the product going forward. The development

team also felt strongly they would be able to greatly increase user productivity by making the

application easier to use, and that the end result would also be able to more easily support different

devices (like Pads and Smart Phones) and all of the current and future browsers.

Although Sales & Marketing wanted a more modern looking UI, time to market was critical because of

the desire to support and continually enhance the product with new features so they could attract new

customers and/or better satisfy existing ones. So an approach was agreed upon where we would focus

on improving the different user experiences in different phases and still allow for some product

enhancements while the migration to a new technology stack was going on. The first phase was

targeted at the managers who have to approve timecards, perform scheduling, and approve time off

requests since they represent the application’s power-users who stood the most to benefit from an

improved user interface. The second phase would target the employees who need to punch in and

punch out and make time off requests, since they make up the bulk of the users. And the third phase

would migrate the administration screens where weren’t heavily used once a company was setup.

Once the project was approved, the developers started evaluating all of the .NET options available that

were available and determined that Microsoft’s ASP.NET MVC clearly offered the best solution available

for this project -- even though they would not be able to leverage the ASP.NET server controls that had

been created for the Payroll + HR application with this MVC application. In order to build a modern,

complex web user interface very quickly it was important to find a set of user controls with a consistent

look and feel that were as good or better than the existing asp.net server controls so it wouldn’t be

necessary to allocate the equivalent of a developer full-time for a year (or more) creating them from

scratch.

The main project objectives included the following:

• Replace a dated User Interface with a much more modern look and feel (or, as our sales

department put it, build a “sexy interface” for a product in a very traditional market segment)

• Significantly increase the productivity for the different roles using our application

• Deliver a reliable product that was adaptable to new client devices, and much easier for us to

enhance and support

Solution: ASP.NET MVC 2 had just been released and, besides the numerous jQuery controls that were

available from numerous sources with different look and feels, there were only a couple of vendors

offering a suite of controls built specifically for MVC. So we quickly determined that there were only 2

commercial products available which could come close to satisfying our requirements for the project

and began evaluating them.

At first glance the only major competitive product to Telerik’s Extensions for ASP.NET MVC seemed to

have a broader selection of controls available -- including scheduling controls which was very relevant

for our project. As we looked under the hood it became apparent that Telerik’s controls were much

closer to the team’s existing coding standards and best practices. The preliminary detailed technical

findings are found in Table 1 – MVC Control comparison.

Feature Telerik Comment Competitor Comment

Supports IE6 Yes No At the time this was still a requirement for this

product.

# of dlls registered 1 Telerik.Web.Mvc 5

Script Manager Yes Yes jQuery registration is still in <head> tag. Not as

advanced as Telerik script manager.

Supports latest jQuery

version

Yes Unknown Samples use jQuery 1.3.2

Supports Render() and

Response.Write

Yes Supports both so we can use

the faster Render().

No Only support <%= which is the same as

Response.Write.

Well behaved installer Yes ? Had to register aspnet after installation.

JSON paging support in

grid

Yes Yes/No Requires MS Ajax client side templates

Professional

Documentation

Yes No Their sales staff was extremely friendly and

helpful while we were evaluating the product,

working diligently with technical support to get

us answers to all of our questions.

Table 1 – MVC Control comparison

As we used the controls we found that the Telerik controls were not full of issues that needed to be

addressed in the code before we felt comfortable deploying them in production (even though the

competitor was very friendly and responsive to all of our questions and promised to address many of

our concerns in upcoming releases). But as an existing Telerik customer, we already knew from prior

experience that if we did find issues that we could count on on-going enhancements in their controls,

that they would always coordinate their releases with major Microsoft updates (even though ASP.NET

MVC is on an aggressive release schedule) so that we could continue to be aggressive about adopting

new technology quickly, and that their support is consistently the best that we have experienced with

any of our technology partners so we felt much more comfortable continuing to use Telerik.

Some of the other key factors that were ultimately behind our decision to go with Telerik’s Extensions

for ASP.NET MVC included the following:

- Ease with which we could extend or create composite controls using Telerik controls

- Ability to create a custom popup control for a complex object which uses the popup control, grid

and a custom version of the drop down control

- The ability of the Grid control to support their other controls as well as complex custom controls

(such as the data grid drop down) within the grid

- Ability to support our desired Employee Navigation composite control that combines multiple

Telerik controls to do a quick search for employees (AutoComplete, Grid, Dropdown)

Once we selected Telerik for this project, we started using the Menu control, TabStrip, Calendar,

ComboBox, Windows, and the Grid immediately. While each of these make significant contributions to

our application, the Grid provides by far the biggest value add out of all of the controls as it was used

from the more complex pages like our Dashboard, Timecard and Scheduling pages. And we were very

pleased that adding the Grid to our application did not have the same kind of overhead (for example,

with VIEWSTATE) that had prevented us from using third party grids in our Payroll + HR application

written in ASP.NET.

Once we had added Telerik Extensions for ASP.NET MVC to our programming toolkit, the team was able

to focus primarily on solving the biggest needs of the users by designing and building a more modern

user experience which increased user productivity that would be easier to enhance and support going

forward. So we started by building a Dashboard which would consolidate all of the most important

information that a manager needs on a daily basis on one page from which they could either act on the

information, or else drill down to the appropriate page where they could act on it as shown in Figure 1.

Figure 1 – Supervisor Dashboard

From the dashboard, Supervisors could quickly drill down into pages like Timecard Approvals as shown

in Figure 2.

Figure 2 – Timecard Approvals

After the Dashboard, we focused on the Timecard and the Scheduling functionality. With the Timecard

shown in Figure 3 we were able to increase the users’ productivity by making all of the information they

needed accessible on 1 page without the need to jump back and forth between 6 different pages to

complete a task. The new application provided easy navigation between pay periods, visual clues for

missing information, multiple timecard tabs if a pay period is longer than a week, and weekly totals at

the bottom. From the tabs at the bottom you can quickly get to benefit balances, pay adjustments, and

the employee’s schedule. Previously the user had to navigate back and forth between numerous pages

to get all of this information and then return to the page where they could act on it.

Figure 3 - Timecard

In addition to consolidating a lot of pages, we also wanted to let users edit information without

navigating to a different page and coming back, so we created embedded and pop-up data entry forms.

For example, Figure 4 shows that from the timecard you can quickly add punch information for the

current period or a series of days.

Figure 4 – Adding a punch or punches quickly on the timecard

When we wrote our scheduler, we create a page that looked more like a calendar as shown in Figure 5.

And from that page you can quickly Add shifts as shown in Figure 6, copy shifts as shown in Figure 7, or

create a quick shift as shown in Figure 8. So with this easier, more intuitive scheduling page it

dramatically reduces the amount of time to create a schedule and it is easier to see the results and

verify that they are correct.

Figure 5 - Scheduler

Figure 6 – Adding a Shift to Scheduler

Figure 7 – Copying a Shift in Scheduler

Figure 8 – Quick Shifts in Scheduler

Results: First and foremost we were able to delivery on the promise of a more modern user interface.

After considering the products our sales staff competes against for TLM deals Mike Haske, the Paylocity

VP of Sales & Marketing, stated “The look and feel of the new Paylocity Web Time has jumped way

ahead of the competition, and has set new standards for usability in the Time & Labor Management

market.” This point is aptly illustrated when you look at the metamorphosis of these pages in Figures 9

with the old and new dashboards, and Figure 10 with the old and the new scheduler.

Figure 9 – Old Dashboard shown with New Dashboard

Figure 10 – Old Scheduler shown with New Scheduler

But even more important than just providing a pretty timecard, the new version increases user

productivity. By consolidating multiple pages worth of information on a single page, providing the

ability to refresh individual components without reloading the entire page, and making data entry

accessible from the page or a pop-up without having to navigate to another page, and then come back

and refresh the entire page, supervisors – the real power-users of the system – are able to get their

work done much faster and more accurately than they could before.

Some of the additional benefits that we discovered working with the Telerik Extensions for ASP.NET

MVC were:

- The tab control used by the timecard enabled us to take advantage of AJAX to lazy load parts of

the page for better performance.

- The menu control was reused on the timecard and gave us an elegant way to present options on

the timecard.

- The DataBinding API of the grid (both server & client-side) allowed for a very simplified solution

for combining different filtering and navigation mechanisms on the Employee Scheduler (filter

employee attributes, navigate over different date ranges, page through result sets)

- The menu control made for an easy action bar which could be controlled based on the user’s

current selection context (enabling/disabling options).

- We were also able to use the Telerik menu controls for all of our products regardless of the

version of .NET they are written in providing us with a more consistent user experience across

our product line.

- Using MVC with the Telerik Extensions and jQuery we were also able to build a user interface

that virtually eliminates the need for users to scroll vertically (something they used to do a lot to

see all of the components of the supervisor dashboard) since we are now able to display the

information in a way that fits on a standard display.

When we made the decision to go with ASP.NET MVC and the Telerik Extensions for ASP.NET MVC we

knew that we could not re-use the user controls and many of the components we spent 7 years building

for our ASP.NET/ASP.NET AJAX products, but we felt strongly that doing so would pay off in the long run

by providing an architectural platform that was easier to enhance and support. As we started working in

the second phase enhancing the Employee experience we definitely saw the benefits in the significantly

reduced time it took to complete the new features for this release.

We also found that the decision to go with Telerik worked very well for our virtual development team

since the team includes remote employees who work at home or at a different office location than our

corporate headquarters in Illinois. Although we always look for the best and brightest developers to join

our team, and of all of our awards are proudest of the fact that we have been included for 6 years as

one of the “Chicago Area’s 101 Best and Brightest Companies to Work For”, it still consumes a lot of

valuable time to create documentation and training materials necessary to get employees up and

running on new technologies -- especially when those materials must be delivered to remote

employees. But with the extensive sample applications, online documentation and examples, videos,

and one of the biggest .NET communities with numerous forum members and threads, we didn’t need

to make as nearly a significant investment in training materials for the Telerik Extensions for ASP.NET

MVC as we would have otherwise. And every time there was a question or an issue that we couldn’t

quickly solve among ourselves, we were always able to get a quick, accurate, and extremely helpful

response from Telerik’s awesome support team or the extensive Telerik community of software

professionals.

Project ROI: The new version has coincided with a boost in the sales of our TLM product. Steve

Beauchamp, the President and CEO of Paylocity, indicated that “Web Time sales have increased more

than 50% from last fiscal year.”

But using the Telerik Extensions for ASP.NET MVC has also produced significant labor savings for this

project. The $6K in initial license fees we paid for the Premium Collection (since we are also using the

Telerik controls with our ASP.NET/AJAX application) meant that we did not need to add the equivalent

of another full-time employee to focus exclusively on rewriting our server controls for this project -- in

addition to other benefits like meeting the project timelines since we needed these controls completed

up front in order to complete the project on time.

Our developers also learned a lot of valuable lessons by looking at how Telerik wrote these controls for

ASP.NET MVC, saving us months in initial development time and subsequent refactoring costs. Also, if

we had written these controls ourselves they wouldn’t have been nearly as robust initially, and we

would not have been able to continually add all of the additional functionality which Telerik has added

since our initial purchase – features (like pop-up data entry forms from the grid) which we were able to

take advantage of right away to increase user productivity. When you take all of those factors into

account, the $6K initial investment, and even the $4K annual maintenance fees, associated with this

project both have both produced a return of more than 15 times the actual cost.