<a href="https://storyset.com/technology">Technology illustrations by Storyset</a>

 

Form-tastic Overhaul

Filling out forms should be as easy as pie! Revamp the Questionnaire form UI, making our Risk Management platform more user-friendly.

 
 

Product

A Risk and Control Form in Third-Party Risk Management (TPRM) is a document used to identify, assess, and manage risks associated with working with external vendors or partners. It helps ensure that any potential risks are understood and that controls are in place to mitigate them.


 
 
 

Project Duration

  • 2 Months

Project Scope

  • 1 Product Managers

  • 3 Developers

  • 2 UX Designers

 

My Role & Responsibilities

Lead UX Designer:

  • Analyze user research


  • Competitive Research

  • Ideation with Designers and Product Managers


  • Wireframing 
Prototyping

Current Questionaire UI

The Challenge:

Customers are complaining that there is too much white space and it causes too much Vertical Scroll

 
 
 

Identifying Pain Points to reduce white space and vertical scroll

Pain point 1: Breadcrumbs need to be responsive depending on the length of the Title, currently has a 50/50 container split

Pain point 2: Remove Form Response Section navigation as there is not content

Pain point 3: Reduce Padding; Too much white space

Pain point 4: “Indicates Required Questions” Needs to be moved up to reduce vertical space consumption

Pain point 5: The “Progress” bar needs to be redesigned to take up less horizontal space

Pain point 6: Highlight the question the user is currently working on

Pain point 7: ”Done” verbiage needs to be removed, added on hover. The icon outline is too light and easily missed, needs to be updated to fill instead of a stroke.

Pain points 8 & 9 : Move up the question verbiage to start at the same line as the question number

Pain point 10: Remove the white background, each question should be its own card to create a visual separation of and reduce cognitive load

Pain point 11: Remove the “Draft” icon, users are confused by the iconography

Pain point 12: Radio Buttons / Checkboxes should fill horizontal real estate to reduce the white space

Pain point 13: Question action button placement needs to be updated due to additional features

 
 
 

Problem Statement

How can we redesign the Risk and Control Form in TPRM to reduce clutter, enhance visual separation, optimize space usage, improve progress indicators, and ensure clear iconography to enhance usability and user satisfaction?

 

Toolbox

Research & Ideation

 

New Design: Updated UI for Questionnaire

1: Updated Breadcrumbs to be responsive to flexible to the text & label length

2: Updated “Progress Bar“ UI to a doughnut with % indicator, making it significantly smaller to accommodate for other UI elements

3: Moved up“Indicates Required Questions” Needs to be to reduce vertical space consumption

4: “Done” icon is fill instead of stroke

5: The question text has been moved up to be on the same line as the question #

6 & 10: Checkbox & Radio Buttons are horizontally aligned to create less vertical space

7: Question level actions are Right aligned to have a constant and persistent presence at each question

8: Each “Question” is a separate card with a visible background creating a visual separation

9: Replaced the “Draft” icon & verbiage with disabled fill icon that will become green fill ones question is completed

 
 

Old UI

New UI

 

Next Steps

  • The updated UI has been approved by the stake holders

  • Developers have been groomed to this story and currently working on the updated UI