Skip to content
Frank Stallone logo

Roll by ADP

Revamping Roll by ADP, I transformed complex HR processes into an intuitive mobile experience, focusing on simplifying payroll management for small business owners.

Who they are

Roll by ADP is a self-service app designed to simplify payroll and human capital management for small business owners, integrating advanced technologies like AI and ML to streamline processes on both mobile and desktop platforms.

Small business owner smiling on a call with a customer

What I did for them

I leveraged a blend of business insights and the specific needs of small business owners to innovate payroll and HCM handling, adopting a mobile-first strategy that spanned from initial concept through to the development of a comprehensive component library. Combining user-centric design with mobile technology, I helped the Roll team simplify payroll tasks to the point of being as easy as sending a text.

Small business owner smiling on a call with a customer Small business owner smiling on a call with a customer
Mock up of Apple iPhones with Roll by ADP app views Screenshot of VSCode showing the design tokens repository for Roll by ADP Screenshot of the payroll run conversation UI showcasing the components design and created for our clients Screenshots of the mock up in design tool highlighting sections and descripting intention

The challenge

The complexity of traditional payroll systems was the first hurdle. My goal was to simplify these complexities, making payroll management as straightforward as checking your phone. This involved addressing a wide range of employee attributes such as payment methods, mid-cycle raises, work hours, and more, all varying by company, location, and organizational structure. The real challenge was boiling these complexities down into a streamlined, mobile-first solution, making it seamlessly fit into the daily lives of small business owners.

My approach

I started us off with a collaborative workshop, bringing together a team with deep payroll and HCM knowledge to tackle the project's challenges. Through a process of discovery we narrowed in on an MVP that would simplify the overwhelming array of employee attributes. This process included prioritizing a specific payroll flow—managing employee hours—for initial development, aiming to reduce cognitive load and simplify the user experience for managers. This strategic narrowing down of scope was crucial in crafting a streamlined, intuitive solution that could be quickly shipped and then replicated in other areas.

Our solution

Identifying the accordion design as being key to an elegant solution here, I visualized - live, on a whiteboard, with the team - a way to simplify the payroll process while maintaining accessibility. This design choice effectively decluttered the interface, making intricate employee attributes easily manageable and navigable, significantly reducing effort for users. Key attributes were highlighted to lessen cognitive load, creating an experience that managers could quickly understand and use.

Small business owner smiling on a call with a customer

Through rigorous pressure testing and iterative refinement we further honed the design, ensuring it could handle a variety of payroll scenarios with grace. Collaborating closely with backend developers, we discussed data structures and the flexibility of our designs, focusing on the usability of flexbox for responsive layouts. This collaborative process also covered edge cases and the design's adaptability to different languages and data types, all while prioritizing readability and accessibility.

Moving into the build phase, I developed a suite of React components within Roll by ADP's component library. Utilizing Storybook allowed for a dynamic visualization and testing environment, crucial for adjusting our components to fit practical real-world needs, refining their functionality, and ensuring the API could support the complex requirements of the payroll system. It also allowed me to collaborate with the Product Owners, the SVP of ADP Innovation Labs, the backend engineers, and anyone else on the team who needed to be involved at any stage of the process.

The results

Through the innovative solution I implemented in the Roll by ADP project, the platform made a huge jump in usability and efficiency. By simplifying a complex payroll process into an intuitive, easy experience, I helped make payroll management as straightforward as sending a text. This strategic overhaul has led to improved operational efficiency for managers using the platform, and has helped Roll by ADP set a new standard for user-centric design in financial applications.

Want to work together?

I am working with a limited availability for consulting. Learn more about how I can sharpen your SaaS brand and product.

designzen logo

Reach out

Have a question or comment? Feel free to drop me a line below!