Custom Fields

Portfolio > Case Study: Configuration Redesign for Genologics > Custom Fields

PROBLEM

Users of Clarity benefit from the flexibility of the product by creating their own fields to track data on. These fields are associated with objects and with steps in the system. For example: When creating a new Project, our users could create a field like ‘Vendor number’ which would be used when billing their customers.

WHAT MADE IT HARD FOR USERS

The initial design was too difficult for users. The architecture was unclear at the highest level. Both Global and Step-level fields were interspersed in the same navigation, making scanning and selecting fields difficult. Configuring the fields themselves was chaotic in terms of organization of choices and language used.

<br />

APPROACH

I consulted with Subject Matter Experts (SMEs) throughout the design process to fully understand how the fields were used, which settings were still relevant and what common pain points existed.

A permutations and combinations table, used for Custom Fields UX documentation (and sanity checking).

The field types (and choices within those types) had a fair bit of detail and conditions related to them. Text (and text dropdown), Numeric (and numeric dropdown), multi-line text fields, date and hyperlink fields. Additionally, other choices could be made like: read-only, required etc.

To ensure that the design covered all of these nuances, I used a permutations and combinations flowchart to document each case, as 100% UX and QA coverage was business critical for such an essential feature set.

UX TECHNIQUES USED

Cross-disciplinary collaboration
Wireframe prototypes and user testing analysis

SOLUTION

We tested the new architecture of the form with users using a clickable wireframe. Once validated, I took the visual design forward.

The design shows the users the right amount of information to allow them to make the choices they need to, given their Field Type choice. General settings are on the left (where almost all fields required them) and the more type-specific settings are on the right. I used iconography to allow users to scan the Custom Fields and see what the fields were without selecting them.