Role - Product Designer
Tools - Sketch, Photoshop, HTML/CSS
User Story
As a product designer I need forms to be generated with consistent HTML markup and better layout standards so that I can quickly and easily style forms across the site with minimal CSS and provide better UX for end users.
The Problem
Many of the modules in our platform were developed and generated over a 10+ year period through various development teams, client requests, or internal strategies with no consistent way of implementing new features or standards in how the features should be built or what sort of DOM they should generate. A great example was the mishmash of ways the Create/Edit Blog module was built out. In the example below you can see how without a heavy amount of CSS styling the different inputs were all laid out in different ways.
Base module without extra CSS styling to force inconsistent and outdated HTML structures to behave the same across the entire form.
The Solution
I approached this issue from a few directions: first, I wanted to change the layout of the form so that it was easier for the clients to read and tab through; secondly, I wanted to move the buttons within the module and, more importantly, the form tag so that we could address a blatant accessibility violation; finally, I worked planned out generic form wrappers that ensured that the majority of the generated DOM for all inputs had similar structure and classes to improve consistency and ease of styling, that we replaced outdated techniques for layout like the use of tables for non-tabular data, and that WCAG violations like labels linked to inputs or assigning group roles to content areas were addressed.
New form layout flows better, has more consistent styling with less CSS, and addresses accessibility concerns.