Reduced Time to Market by Optimizing Cross-Regional Developer Experiences
Role
Systems Designer, UI Developer
Methods & Tools
Code Auditing, Secondary Research, TailwindCSS, Ruby on Rails
Timeline
September - November, 2023
Overview.
In early 2023, Workforce.com launched a new payroll service on their scheduling platform. However, as teams transitioned to primarily supporting this service, feedback from developers indicated we were losing time to market due to inefficiencies around redundant and duplicated code in our onboarding experience.
This was particularly felt when adding necessary steps, including W-4 (state tax withholding) Forms, to the experience, as progress towards expanding support for all 50 US states was hindered by complex and tedious code maintenance across our regional teams in the US, UK, and Australia.
Goals.
Create a reusable, efficient, and region-agnostic process to adding steps onto our employee onboarding experience.
Outcomes.
01 Time to market for building a step's UI for W-4 Forms reduced from 5 days to 1.4 days.
02 Adding onboarding steps was reduced from requiring upwards of 5 code files to primarily 1 file.
03 Modifying a step could involve as little as a 1-line code change.
Research.
Collecting screenshots of all the 2023 state W-4 forms, I identified sections which were commonly found on each form.
The original project for building our onboarding page had only focused on building the fundamental ability to add steps to onboarding, without yet considering cases that might require the step to only show for certain reasons, such as only showing for the US vs Australia.
However, as these conditional cases arose post-launch, developers began expanding the original solution, creating duplicated and repetitive semantics, files, and functions. These required a review and assessment of how developers were using the solution to meet their project needs.
Comparing Developer vs User Experience Needs.
For W-4 forms, developers had already created two W-4s, one federal and one state-specific. I conducted code audits on those two solutions and compared them with all the official 2023 state W-4s to get a sense of common layouts, content, or other fields which appear repeatedly across the forms.
Discovering Developer Needs for System Design.
Conducting a code audit of the original onboarding files, I found developers had created quite a few functions and additional files for asserting if a step should appear in onboarding, such as whether a feature like payroll was turned on for the user or not.
A Strategic Pivot.
A primary effort in the original development of onboarding was in expediting development time by utilizing the existing architecture supporting our user profile & settings page.
While reviewing code, I identified an opportunity to streamline both pages since they shared similar functionality and visual elements. Incorporating the profile & settings page into my revisions further minimized code duplication and redundancies.
Insights.
01 Seven Shared Characteristics
There were 7 functional and visual characteristics common to the onboarding page and profile & settings page. These would form the basic blueprint for a new modular solution.
02 Four Common W-4 Sections
The W-4 Form UI layouts needed standards around 4 common sections: filing status, allowances, deductions, exemptions. Certain UI fixes like padding and dividers would also provide better usability and 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.
Solution.
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.
A "Tab" Component.
A "Tab Component" was configured to autonomously manage its entire visual presentation, leaving developers with only the task of defining the 7 characteristics (which were automatically interpreted). For instance, if a tab was meant to display in only US onboarding, developers would assign the value “US” to the Tab's “region” characteristic.
W-4 Form Templates.
I created a form template where developers could enter W-4 details and connect data retrieval calls for the 4 sections of any state's W-4. Further handling of the visual design and functionality of a W-4 occurred under the hood in 3 additional templates, eliminating the need for developers to be directly involved or aware of this setup.
Additional Deliverables.
01 Workshop
During a collaborative coding session, I introduced the new W-4 templates before launch, gathering feedback and refining my solution.
02 Technical Documentation
After releasing the new architecture, I wrote an internal document outlining the process for adding a W-4 and using the template.
03 Global Collaboration
Working with developers across regions to QA their region-specific onboarding needs against my new solution, I ensured a bug-free launch.
04 Global Presentation
Once released, I held a talk at our global development teams meeting, facilitating seamless adoption of the new solution by walking through a comprehensive guide on the architecture and setup process.
Impact.
01 Nearly 400% reduction in time to market for developing and shipping the interface for adding and editing state W-4 Forms.
02 Developed support for 13 out of our targeted 15 states in the fourth quarter of 2023.
​
03 Improved collaboration between our sales and product team, as the development pace aligned more with sales closures.
​
04 Region-related bugs around onboarding were reduced to 0, underscoring the success of the new region-agnostic process and modular architecture introduced in the new revisions.
Takeaways.
01 Developers are users too.
In this case, the developer was just as much a user as our clients were. By considering the quality of your internal team’s experience, you can establish and build design-developer relationships which support and improve both experiences.
02 Achieving developer efficiency extends beyond mere speed.
Rather than building code faster, building robust structures and back-end architecture facilitates and streamlines workflows to support the efficiency and success of teams, even regionally.