Roll by ADP
I designed and built Roll's mobile payroll experience for small business owners. The goal was simple: make payroll feel like sending a text.
Make payroll feel small
I joined ADP Innovation Labs to help turn a traditional payroll system into a mobile experience for small business owners. We wanted running payroll to feel as simple as sending a text.
The system still had to handle payment methods, raises during a pay cycle, work hours, overtime, and sick time. The rules could change by company, location, and organization. The interface had to keep that complexity out of the owner's way without losing it.
Narrow the first problem
The team brought more than 40 years of combined payroll and HCM knowledge. It included our SVP of Innovation, Product Owners, Chief Architect, Content Designer, QA Lead, and ML and Backend Engineers.
I asked the team to list the employee data and payroll workflows we needed to support. The list grew fast, so we picked one critical flow: a manager entering employee hours. We would solve that first, then test the design against the other workflows.
Keep the common work visible
I sketched while our SMEs named the data each employee could need. Some of it mattered only in special cases. The common task was much smaller: scan a list of employees, enter hours, and submit payroll.
An accordion pattern let us keep that task visible while hiding overtime, bonuses, payment types, and other less common details. I drew the pattern on the whiteboard so the team could react to the same idea.
We then decided which employee details deserved to stay visible. Every item added weight, so a field had to earn its place in the main row.
Once the wireframe held together, we returned to the other payroll workflows and checked whether the same pattern could support them.
Pressure test the layout
I moved the approved wireframe into high fidelity mockups. I laid out the accordion panels, made room for more actions, and arranged the main employee details.
I worked with Backend Engineers to understand the data and how the layout could adapt with flexbox. We tested long values, different pay cycles, and German translations. The layout had to bend without breaking the hierarchy.
We checked color contrast, type size, and readability as part of the design. Then we removed anything that pulled attention away from the payroll task.
Build the pattern, not just the screen
I built the approved design as compound React components in Storybook. Flexbox let the employee rows adapt across screen sizes and orientations.
The Backend Engineers needed control over the data and our conversation authors needed to show the right details. As the only UX and UI Designer on the team, I had to make that flexibility safe. The component allowed the content to change without giving up the hierarchy we had agreed on.
Ship it into the app
I shipped a beta of the component library with the new AccordionList component. Backend Engineers could then integrate it into their local app builds.
Integration showed what worked and what needed to change. I cleaned up the code, finished the remaining behavior, wrote tests, and documented the component. We kept checking the result against the original goal: make payroll simpler for small business owners.
Thirty seconds a week
Roll turned a dense payroll process into a focused mobile flow. The accordion kept the common work close and the unusual details within reach.
Roll's goal was to be almost invisible. Customers spent about 30 seconds a week in the app, on average. That is the result I care about here. People could finish payroll and get back to running their business.
The component also gave the team a reusable way to handle dense employee data without designing every payroll workflow from scratch.
Contact
Availability, partnerships, and questions.
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.
Reach out
Have a question or comment? Feel free to drop me a line below!