User Story:

As a user, I need the ability to easily find the products that meet my project test and measurement specification needs so that I can build a new system or add on to an existing system.

The Problem:

As part of a large digital transformation project, a new customer facing shopping experience had been released. With that, a product selection table had been incorporated onto the product pages as a means for users to filter down to their specific product model via product specifications. This was a new way for shopping and filtering for our users. Due to timelines and scope being cut, the first release of the product selection table was not feature rich. As a result, we received ample feedback from users that they were having a difficult time finding the products (models) they needed on the product pages. The E-Commerce Product Owner reached out to the UX Team and asked us to come up with a set of recommendations that the e-Commerce team could implement on the product selection table.

The Process:

3 of us UX’ers went off and started working. We each conducted our own competitive analysis, sketched out some ideas, talked with FED friends to understand options, and came back together to collaborate and share ideas. From there, we agreed on a set of features that we would like to present to the the E-Commerce P.O. which included:

• Display density

• Fluid tables

• Making the entire row clickable instead of just the model number

• Moving the filter dropdown into the column header

• Compare functionality

• Allowing users to delete columns they didn’t need

• Allowing users the ability to resize table columns

• The ability to customize table filters

At this stage, I took point and worked to bring our collective ideas to life in the form of wireframes. We then presented to the P.O. and agreed on a first set of features to refine and work towards implementing which would be display density, clickable rows and having a fluid table. I worked to refine the wireframes and bring them to a high fidelity state. From there, I met with FED to review the designs and annotations and talk through any implementation questions. I then worked to collaborate and answer questions as FED completed the implementation piece.

The Result:

Original Design:

Looking at the image below, you can see the original MVP product selection table that went live. You will notice that the table is fixed to the 12 column grid. There are data columns that are hidden and the user must use horizontal scroll to see more data. The rows and columns are rather wide, wasting a good deal of space. Also, while the rows expand, there is no clear indication of this to the user. The only way for a user to expand the row is for them to click on the blue model number in the first column of the table.

New Design with Added Features:

Looking at the image below, you can see the new product selection table that went live. You will notice that the table is no longer fixed to the 12 column grid but is instead fluid. There are now display density controls on the table so the user has the freedom to select the density with which they want to view the data. Additionally, the rows now have a hover state, and the row will expand when the user clicks anywhere on the row.

After these 3 new features went live, we immediately started receiving feedback from both internal and external users about the improved usability of the product selection table.

With display density, our users now have the freedom to choose how densely they will view the data tables. Making the tables fluid allowed our users the ability to view more data and waste less space. The combination of these 2 features have allowed our engineers the ability to view and compare product specifications with greater ease while reducing the need for horizontal scrolling and hidden data columns.

Clickable rows was an easy way to improve the usability of this table and help users clearly understand how to interact with the table and expand for more information.

While impactful, these feature enhancements were all baby steps to improve the MVP product selection table. There is still a ton of work to do to improve the product selection table and plenty of great ideas for how to continue this progress.

Below you can view my Axure file to see the multiple features and iterations that were explored in this exercise.

What’s Next?:

We will work with the E-Commerce Product Team to see when the other features can be prioritized and added to the product roadmap to further enhance our shopping experience. We will also be working with our analytics team to track the display density feature and better understand how our users are interacting with it. This will help inform how we can continue to improve that piece of functionality.

Role:

UX & UI Design

Medium:

Desktop

Methodology:

• Stakeholder Interviews

• Competitive Analysis

• Sketching

• Low Fidelity Wireframes

• High Fidelity Wireframes

• Annotations

Tools:

• Paper & Pen

• Axure

Duration:

• 6 weeks