Robyn Marie Brechun

Snap Design Pattern Library
Principles for Effective Project UX and UI
Customer Portal


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

Existing & Out-of-the-Box Solutions
Interaction Guidelines
Concept Testing

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:

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:

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.

x Close