HCM Replacement

Spring 2024 - Present

Dev

UI/UX

Figma

Vue

Nuxt

Nitro

Postgres

Jira

Bit Bucket

Docker

Tanstack Query

TypeScript

Zod

Usability Testing

Prototyping

Expirence Overview

Serving as lead designer and primary developer on a large-scale, multi-phase initiative to replace the organization’s legacy Human Capital Management (HCM) system with a custom-built, modern solution.
Collaborated with project managers and HR stakeholders to define requirements across key domains—pay, org structure, compliance, and workforce insights—ensuring alignment with business needs and HR operations.
Designed and prototyped all application interfaces using Figma, conducting usability tests with end users to validate workflows and refine designs across multiple release phases.
Spearheaded adoption of a modern tech stack, introducing TypeScript standards, Tanstack Query, Zod, and transitioning backend architecture to Nitro for enhanced Nuxt.js integration and API flexibility.
Developed robust, scalable frontend and backend systems using Vue.js, Nuxt.js, Postgres, and Docker, enabling faster feature development and easier maintenance over time.
Led engineering efforts with a strong focus on code quality, type safety, and architectural maintainability, mentoring team members in new tooling and best practices.
Managed agile project execution via Jira and Bitbucket, delivering iterative progress on a mission-critical enterprise platform designed to scale with company growth.

My Role

I acted as the sole designer for this project, working closely with the project manager and stakeholders on defining requirements and setting the direction of the project. The scope of this application included all employee management activities by our HR team, from pay to organizational structure to legal compliance. Because of the scope we broke the project into phases to ensure we are making progress on our deliverables. Through each phase I built mockups, performed usability tests with end users of the application, and collaborated with stakeholders on process changes.

I also performed a role as the primary developer of the application pioneering a new technology stack that I recommended including TypeScript, Tanstack Query, and other new modern backend and frontend technologies.

Problem

Managing a large company like the Space Dynamics Laboratory requires a system that can quickly and accurately give an HR team insight into company metrics and employee information to make critical business decisions. The current system was built on very old technology that was increasingly becoming unusable and hard to maintain, and off-the-shelf solutions didn't fit the unique business model that my company operated in. The decision was made to rebuild the system from scratch to fit the growing needs of the company and decrease maintenance costs from the old system.

Process

Planning and Requirements Gathering

The project manager and I worked very closely to understand the end users of the new HCM system, which encompassed all employees in the company. We had several meetings with HR to understand their processes and look for opportunities to improve them, such as moving manual data entry in Excel into the application for more accuracy and less maintenance overhead. We also needed to capture all of the requirements of the current system to ensure no functionality was lost. We were very thorough in this phase to ensure we had all the information upfront to prevent costly rework in the future.

Design and Iteration

Once we had defined sufficient requirements to begin wireframing, I moved on to sketching ideas and mocking up the application design in Figma. I worked closely with the project manager to ensure all processes were correct because she is an expert in the HR domain. After going through design reviews with the appropriate members of my team, I started conducting usability tests with our Figma prototypes to understand if our assumptions about the usability of the application were correct. Based on information we got from those tests we modified the designs and validated our changes with additional tests. Once we felt we had designed the optimal interface we got it approved with our stakeholders and moved into implementation.

Implementation

Because we are a small team and wear a lot of different hats, I was also the lead developer on the project. I lead a team of 3-4 engineers as a mentor and project expert. This project was unique in that I was pioneering, in collaboration with another engineer, a lot of new technologies for our stack, including TypeScript and Tanstack Query. I had used some of these technologies on projects outside of work and had been trying to convince our technical managers to give them a try for a while, and finally got the green light.

Testing

As we moved through development, our process requires that we test each other's branches before we approve pull requests to ensure quality. We also have a testing team that will test our code on a testing build of our site before they are resolved.

Repeat

Because of the scope of this project, it wasn't feasible to release the final product until we had moved through the process of requirements gathering, design, implementation, and testing multiple times. We are currently in the third iteration of this process and are planning on releasing the application later this year. Our HR team is very excited.

If you want to put me to work solving the biggest pain points for your business, reach out to me here, and let's talk!