Project Overview

This portal application provides the ability for Sales Representatives to quote computing solutions for over 40 supplier lines. Each supplier has its own process requiring unique information to be entered on the quote. Due to usability and design challenges the team was facing from the large amount of data and fields on the screen, a radical move to a data grid solution was proposed and executed.

My Role & Responsibilities

UX lead responsible for improving usability of out-of-the-box Angular grid solution (ag-Grid), writing documentation, and collecting and incorporating user feedback.

Skills Used

• User Interviews
• Whiteboard Design Sessions
• Wireframing (Axure)
• Producing Interaction Guidelines Documentation
• HTML & CSS Prototype Creation
• Concept Testing
• Functional Testing
• Collecting User Feedback through Conference Room Pilots (CRPs) and User Acceptance Testing (UATs)
• Incorporating User Feedback

User Research & Insights

We had our work cut out for us. Based on user feedback, our current solution was providing quite a few limitations:

1. Each line had it’s editable fields stacked vertically requiring scrolling to view a single quote line. Because of this, the user lost their reference to which line was being edited.
2. Only one edit could be made at at a time. Saving the edit was timely and once it was saved, the user lost their current scrolling location.
3. Editing was located in three different views and the user had to remember which view to go to in order to enter or update a certain piece of information.

Through user interviews, we identified that Sales Representatives also required to edit their quote lines the following ways:

• "I need to add a Serial Number to Line #10."
• "I need to make updates to quantities across multiple lines. I expect tabbing to take my focus down to the next line’s quantity."
• "I need to update multiple pieces of information on one line, such as Quantity, Customer Price, and Install Date. I expect tabbing to take my focus across the row to the next piece of information."
• "I need to add the same Contract Start Date to 15 out of 20 of my quote lines."

Our Conclusions

Our data grid solution needed to provide:

1. A single view to edit all line information.
2. Horizontal scrolling with locked cells to retain context.
3. The ability to make multiple updates at once.
4. The ability to edit the information in four different ways:
   1. A single cell
   2. All fields within a grid column
   3. All fields within a grid row
   4. Selecting multiple lines to apply the same value

Design Iteration 1

We received resounding feedback from the users that the new GridView was easier to use, allowed for faster editing on their quotes, and overall, a huge improvement.

uring the User Acceptance Testing, however, we noticed quite a bit of confusion around Multi-Line Editing functionality. Originally, the first phase of the GridView was not going to include the ability to edit multiple lines at once; the feature was identified to be our first enhancement rather than included in the initial roll-out. Because of this, the Multi-Line Edit solution was never vetted by users in the Concept Testing sessions. Even when the users were walked step-by-step how to edit within the grid, they were getting confused on several aspects:

• When did they need to click on the checkbox or on the pencil icon to edit
• What was the difference in the fields in the column header versus the fields in the cells
• How could they apply an edit to their selected rows

This prompted a redesign of the Multi-Line Edit feature.

Design Iteration 2

With the next iteration, we addressed many of the critiques and points of confusion around applying a single value to multiple lines. We let the UI guide users into correct steps through progressive disclosure.

• The checkbox and edit icon were combined into a single action
• Fields for Multi-Line edit display only when multiple lines are selected
• The button to apply the value to the selected lines was more incorporated into the field
• Added the ability to select lines by a range or by part number