Overcoming Technical Challenges

We ran into an unforeseen issue during the rebuild and redesign of our core product. So we worked together as a product team to figure out how to introduce a new design while carrying over some elements of the old design.

The Background

The image on the right was the intended transformation of a decade-old design.

Along with incorporating increased text and field size and a more neutral color palette, a big change to the structure was going to be removing the two-column design of the form sections and moving the global nav bar from the top to the left side of the screen.

There were issues with how the forms displayed due to how an XML database was rendering the data for each form.

The Problem

Some of the main form rendering issues included:

  • An inability to edit and update old row names

  • Some rows not displaying at all

  • Some fields displaying the field name within the field itself and not using the above-field label

These led to an inconsistent design and presentation of information within an individual form itself and across many form variations.

I facilitated conversations with the team that owned these forms to see what could be done, but they didn’t have the time or people power to prioritize these changes.

So we made lemonade out of lemons.

I worked with the developers on my team to figure out a new design based on these considerations:

1

Generate a versatile design that could work for many form structures

2

Elegantly incorporate the row names from the old design into the new one

3

Identify a way to display field names in the above-field labels

I quickly mocked up concepts for alternative designs to walk through with my engineers.

The Process

I thought at this stage that creating a few options based on our new constraints for engineers to react to was a good starting point.

I facilitated design review sessions with the engineering team to quickly gather feedback on which approaches were most feasible while they were still identifying the scope of affordance and constraints.

We were able to identify a feasible alternative that didn’t delay our launch window and that saved multiple teams time and effort.

The Solution

To help create better distinction between rows - especially since some had rows names and others didn’t - I added section dividers between rows and added row names that copied field names to create consistency.

We also ensured that field labels were applied to fields where the label was automatically inserted as placeholder text within the field.

Form Design Evolution

(Click to enlarge)