Reduced Time to Market by Optimizing Development with Modular Design
Role
Systems Designer, UI Developer
Methods & Tools
Code Audits, Modular Design, TailwindCSS, Ruby On Rails
Timeline
September - November, 2023
Overview
In early 2023, Workforce.com, a workforce management platform, expanded to begin offering payroll. However, as teams transitioned to primarily supporting this service, we were losing time to market due to inefficient development processes from a lack of reusable components and modular logic.
In an effort to accelerate the delivery of payroll support for various US states, I spearheaded an initiative that would introduce modular design and reusable templates to reduce the time spent building many of the front-end changes necessary for releasing payroll support for more US states.
Goals
Reduce the time to market for pushing out new payroll support for US states.
Outcomes
Time to market for front-end development work reduced from a 5 day average to only 1.4 days, transforming what had been a slow, cumbersome process into a streamlined, efficient workflow.
Approach
Research: Auditing Front-end Code
The first step was a comprehensive audit of the existing codebase. I meticulously analyzed files to identify duplications and redundancies of similar logical or visual patterns. This included similar layouts, language, and logical checks like displaying or hiding content. This audit revealed patterns in the code that could be abstracted into modular components—reusable building blocks that would not only simplify the development process but also maintain visual consistency.
Working with developers and product managers across regions, I proposed the different scenarios where a step in onboarding would or wouldn't show, confirming which steps would show based on the newly discovered conditions and the regions.
Creating Modular Components and UI Templates
Based on the audit findings, I focused on turning the identified patterns into reusable components and commands. These included simple commands to show, hide, enable, or disable content, and components that grouped similar visual elements into templates. The aim was to create easy-to-use modules and templates that developers could quickly plug in and reuse.
A tab component is made of both functional and visual attributes. The component can be shared across Settings and Onboarding mode.
The Form Template is made of 4 sections which can be developed quickly without having to design the form from scratch.
A tab component is made of both functional and visual attributes. The component can be shared across Settings and Onboarding mode.
Testing: Live Feedback from Developers
After developing these reusable modules and templates, I lead a portion of a live coding session to introduce our developers to the new utilities. During this session, they were able to provide feedback on areas of confusion. I could watch them try to learn and apply my instructions as they mocked code changes for practice. Ultimately, this led to a comprehensive review that I subsequently created revisions from before releasing the utilities officially to our team and producing technical guides on.
Based on live feedback from our developers, I revised my work before releasing it to our team and created a technical guide for how to use the templates and setup their modular components.
.png)
Feedback from developers helped identify areas that should be thoroughly explained in using the new modular components and the commands to use when enabling or disabling, showing or hiding an element. I presented the steps in an engineering meeting to introduce the concepts and walk our developers through the new process.
Measuring Time to Market
As it was our team’s goal to reduce the time to market, our team lead set up a self-report tracker for developers to log how long it took to ship payroll support for a new US state (each developer was assigned 2-3 states within the cycle). At the end of the cycle, we saw an average of 1.4 days time to market for front-end work, whereas prior to my optimizations the average was 5 days.
After releasing the changes, tracking the time to develop the UI of our payroll using the new modular components and templates totaled to an average of 1.4 days, significantly less than the week-long (5-day) process prior to these changes.
Impact
The introduction of these modular components and UI templates had an immediate and dramatic impact. Development time for the UI portion of tax forms plummeted from five days to less than 1.4 days—a remarkable near-400% reduction in time to market.
Not only did this optimization speed up development, but it also improved the overall consistency and quality of the final product. The components ensured that US state-specific payroll pages adhered to the same design principles and best practices, without needing to reinvent the wheel for each iteration. The modular system also reduced the risk of bugs and made future maintenance much simpler, as updates could be applied to the core components and modules rather than individual pages.
Optimizing for the Future
Unfortunately, we were only able to catch the need to optimize this process after we began releasing payroll support by US states. It would’ve been beneficial if the same work done to remedy this problem could have been applied before beginning building US Payroll. Already knowing we had 50 states to release, I and our team could’ve worked sooner on creating reusable modules and components to simplify the process from the beginning. In the future, identifying key bottlenecks like this to a rollout plan would save time and prevent refactoring work in the middle of the rollout.