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

Transcription

1 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 inhouse 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 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: Attach company logo Product used: Telerik Extensions for ASP.NET MVC Product version used: 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

2 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

3 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 Supports Render() and Response.Write Yes Unknown Samples use jquery 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 Professional Documentation Yes Yes/No Requires MS Ajax client side templates 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

4 - 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.

5 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

6 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

7 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

8 Figure 7 Copying a Shift in Scheduler Figure 8 Quick Shifts in Scheduler

9 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

10 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).

11 - 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

12 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.