Payroll Form

A comprehensive dashboard to view payroll information. Used by companies to manage previous, current, and future reports. Ability to export data in a variety of formats.
Payroll Screenshot

At a previous company, I worked at dealing with payroll documents was a large part of the job. For our administrators working on location, taking payroll information and submitting it was done by hand - often taking too much valuable time.

I created a Payroll Form to handle this process, allowing the administrators to access an online form that would streamline their payroll work.

Since the staff information per location is so different, a large part of the app relies on the structure of the data that is passed to it.

Learning Experiences

The 1st iteration of this application was launched only days before it was set to be used by administrators in the field. This was a case of "we need it now". It was launched without fully testing for bugs, and the bugs showed up fairly quickly.

This circumstance gave me a lot of insight on why that's not an ideal situation, as well as what do to when you need to fix production bugs on the fly.

I was able to listen to feedback and quickly incorporate what I was hearing. Additionally, I used LogRocket to show me exactly what the users were experiencing.

What worked well?

Even with some of the production bugs, this form still saved administrators hours worth of work.

The consolidation of all of this data into a digital format proved extremely useful when it came time to analyze the information.

What didn't work well?

The original form was built on a static HTML Bootstrap theme. I was simply replacing already existing code for a large part of the design This proved to be problematic when I needed to change it for specific purposeless.

Additionally, not having enough time to fully test the application led to numerous production bugs that were stressful to fix.


What would I do differently?

I did do it differently! I rebuilt the application using Gatsby, React, and Styled-Components. This allowed me to have much more control over each component, where using a Bootstrap theme did not.

Additionally, the logic to display data and filter through it was much cleaner.

The data structure was a local JSON document that was parsed through with GraphQL queries, making the data much easier to work with.

A Money Maker

I'm proud of this tool and the time that it saved the company. I love any time I can help someone move from writing something by hand to storing and working with digital data.