Change the frontend without changing the backend

By: Alyssa Levitz - August 9, 2022

A challenge to making changes to application form questions is that it could require changes to the database (or backend). But it may be possible to update the applicant-facing frontend of the application (the “presentation layer”) without changing the backend. This is done by mapping new field options to existing options. 

Below is an example of New Jersey doing this to improve the highest level of education question in the unemployment application. During usability testing of the application, participants noted that they don’t think in years of education, but in categories of highest education. Thus, the question was reframed to ask the highest level of education completed. The web application maps that response back to a number that the backend knows how to interpret by working alongside their Labor Market Information experts. For example, “Less than High School” maps to 8, “Some High School” maps to 11, and “Associate’s Degree” to 14.

Before

After

Multiple states, including New Jersey, have achieved this result alongside other styling changes for improving mobile friendliness by leveraging JavaScript to separate changes to the presentation layer from the main code for the web application. This is a great option for those that may be unable to make changes directly and easily to primary codebase for whatever reason (fragility of system, or operational complexity of changes). To do this, you will make a one-line code change in the primary code base in order to load a new JavaScript file on that can be deployed and updated separately from the main website code base.  

TIP: If you can, load the JavaScript file at the top of the page. If it gets added to the bottom of the page, the page will load briefly with the original styling before refreshing with the updates. 

That JavaScript file will have everything you need in it to make your changes: additional design files (CSS) and the functions needed to apply that CSS. 

1. LOAD CSS files 

2. FIND the existing content by element 

3. TRANSFORM the existing content through one or more of the following types of functions: 

4. COPY AND INSERT the existing content into a new div corresponding to where it needs to be on the page 

5. REPLACE content with updated plain language, e.g., the years of education example above. 

6. APPLY STYLING to that content so it doesn’t render, or so that it renders in particular ways. To learn more, see Go mobile-friendly with media queries | U.S. Department of Labor (dol.gov) 

TIP: use a custom-built browser extension to rapidly make and validate changes if you don't have an easy staging environment for code changes. 

Related Posts

• Promising Practices