admin tool setup: customized form

role

Research, Design, Development

Project Background

A 20 year old UI was rewritten in AngularJS with features moved over one at a time. We had low adoption rates to our new site because a highly used feature from the 20 year old site was not in place. This feature allows one of the forms on the website to be customized by our administrative users.

goal

Transfer functionality from a 20 year old site to a new site that allows administrative users within the company to customize a UI form for users outside of the company.

Research

I conducted user interviews with administrative, internal users that create the customizations for our users outside of the company, external users. These internal users ranged from having a lot of experience in the 20 year old system to none at all.

Key insights from the user interviews:

• Each administrative user received requests for different labels, input field visibility, and required fields to match the external user’s own systems. It was often the selling point of our product and why those users chose to do business with us.

• Most users customize the form upon initial on boarding of the external user. Sometimes it required tweaks at a later time as the business grew or changed, but it was mostly used once in the beginning and never looked at again.

• The most common customization was renaming input field labels. There were also users that had a need to require/not require fields, show/hide fields, and create custom drop downs for the external users. There was some consistency between users over which fields were being renamed, however the new name was vastly different.

• The old system had a straightforward way of making these customizations. Most users were able to navigate this easily, despite typically performing this task only at on boarding of new users.

• The form to create these customizations involved lots of expanders that the users found irritating.

• The administrative user was allowed to un-require fields that the back-end system required for form completion, causing the UI to break for the external user.

• The system did not provide a consistent way for external users of the same customer to have the same customizations, resulting in inconsistent views and confusion between external users.

Design

After synthesizing the research from the user interviews, I created a clickable prototype in AdobeXD using a common scenario heard in the user interviews. I recruited previous participants as well as new administrative users to participate in usability tests. The users were asked to modify the form so that a field called "Primary Reference Number" was renamed to "Internal System #", require a field called "Secondary Reference Number", and hide a field called "Notes".

Key insights from the usability tests:

• Users were able to complete the scenario without guidance and with ease

• Users appreciated not having to expand each section

• Users were able to quickly navigate to their desired section with the side, sticky navigation

• Users felt the prototype would fit their initial needs but would need more features as more users get rolled into the new system