AI DATA MAPPER

Testing insights led to a redesign of this AI data mapping feature

Usability testing with real users led to many improvements in a redesign of this AI-driven suggestions feature.

Artificial Intelligence

Usability Testing

Redesign

AI DATA MAPPER

Testing insights led to a redesign of this AI data mapping feature

Usability testing with real users led to many improvements in a redesign of this AI-driven suggestions feature.

Artificial Intelligence

Usability Testing

Redesign

AI DATA MAPPER

Testing insights led to a redesign of this AI data mapping feature

Usability testing with real users led to many improvements in a redesign of this AI-driven suggestions feature.

Artificial Intelligence

Usability Testing

Redesign

Goal

Enhance the usability and design of this AI-driven feature to develop a more intuitive interface, ultimately improving the overall product data mapping experience.

Goal

Enhance the usability and design of this AI-driven feature to develop a more intuitive interface, ultimately improving the overall product data mapping experience.

Overview

A design-focused initiative aimed at testing and refining an existing AI-driven data mapping feature. This feature offers suggestions based on the marketplace 'template,' guiding users in aligning their product data with specific marketplace requirements. User feedback will be crucial in identifying usability issues and areas for enhancement, which will shape the direction of the redesign.

Role

Product Designer and UX Researcher

Timeline

January - March 2023

Team

Front-End Engineering Team, Back-End Engineering Team

Overview

A design-focused initiative aimed at testing and refining an existing AI-driven data mapping feature. This feature offers suggestions based on the marketplace 'template,' guiding users in aligning their product data with specific marketplace requirements. User feedback will be crucial in identifying usability issues and areas for enhancement, which will shape the direction of the redesign.

Role

Product Designer and UX Researcher

Timeline

January - March 2023

Team

Front-End Engineering Team, Back-End Engineering Team

Overview

A design-focused initiative aimed at testing and refining an existing AI-driven data mapping feature. This feature offers suggestions based on the marketplace 'template,' guiding users in aligning their product data with specific marketplace requirements. User feedback will be crucial in identifying usability issues and areas for enhancement, which will shape the direction of the redesign.

Role

Product Designer and UX Researcher

Timeline

January - March 2023

Team

Front-End Engineering Team, Back-End Engineering Team

Discover

Discover

Discover

What is data mapping?

Data mapping enables users to convert their product data into formats compatible with various marketplaces, eliminating the need for data editing or maintaining separate data sources for each marketplace, despite their differing requirements.

What is data mapping?

Data mapping enables users to convert their product data into formats compatible with various marketplaces, eliminating the need for data editing or maintaining separate data sources for each marketplace, despite their differing requirements.

What is data mapping?

Data mapping enables users to convert their product data into formats compatible with various marketplaces, eliminating the need for data editing or maintaining separate data sources for each marketplace, despite their differing requirements.

The existing user experience

Here's how users view and interact with suggested data mappings in this product today:

The existing user experience

Here's how users view and interact with suggested data mappings in this product today:

The existing user experience

Here's how users view and interact with suggested data mappings in this product today:

Data Mapping Page

Users go to this page to see all of the required fields across all categories for this marketplace.

Data Field Open

Users click into a field (or row) to see the allowed values for that field, data mapping options, and to complete their data mapping.

Suggestions Tab

The suggestions are presented on a separate tab, in a new format. Many actions are available, such as Apply, Dismiss, and Inspect.

Suggestion

Clicking "Inspect Suggestions" opens a modal the suggestion's details, and a list of other suggestions if the first one doesn't work.

Identifying users for testing

I utilized our data analytics tool (Pendo) to identify active users of the data mapping page within the product. By analyzing the data, I selected users with low, medium, and high levels of engagement to ensure a comprehensive range of perspectives.

Identifying users for testing

I utilized our data analytics tool (Pendo) to identify active users of the data mapping page within the product. By analyzing the data, I selected users with low, medium, and high levels of engagement to ensure a comprehensive range of perspectives.

Identifying users for testing

I utilized our data analytics tool (Pendo) to identify active users of the data mapping page within the product. By analyzing the data, I selected users with low, medium, and high levels of engagement to ensure a comprehensive range of perspectives.

Defining research objectives

I created a research plan, starting by identifying the primary objectives based on what I think would help inform the future design direction.

Defining research objectives

I created a research plan, starting by identifying the primary objectives based on what I think would help inform the future design direction.

Defining research objectives

I created a research plan, starting by identifying the primary objectives based on what I think would help inform the future design direction.

01

Learn how users are using the feature today

02

Uncover general usability issues with the current experience

03

Understand the pros and cons of the feature from the user's perspective

Coming up with the testing questions

Here is a sample of the questions I planned to ask during testing:

Coming up with the testing questions

Here is a sample of the questions I planned to ask during testing:

Coming up with the testing questions

Here is a sample of the questions I planned to ask during testing:

  • What is your first impression of the information displayed on the page?

  • Walk me through your process of evaluating a suggested mapping.

  • What information do you need to decide whether or not to apply the suggestion?

  • What questions come up when looking at the list of suggestions?

  • After you have decided you want to use a suggestion, what would you do next?

  • After you have decided that you DON’T want to apply the suggestion, what would you do next?

  • Why would you apply one of our suggestions over the mapping you already had?

  • DO you find anything confusing or frustrating about the suggestions?

  • What do you like most about the suggestions?

  • How are these suggestions impacting your workflow?

  • If you could change one thing about this experience, what would it be?

Conducting usability testing

Here is a high-level overview of the framework I used for note-taking and documentation. It includes screenshots of the screens presented to users, a list of questions asked for each screen, and the corresponding responses from each user.

Conducting usability testing

Here is a high-level overview of the framework I used for note-taking and documentation. It includes screenshots of the screens presented to users, a list of questions asked for each screen, and the corresponding responses from each user.

Conducting usability testing

Here is a high-level overview of the framework I used for note-taking and documentation. It includes screenshots of the screens presented to users, a list of questions asked for each screen, and the corresponding responses from each user.

Define

Define

Define

Key takeaways from testing

There were SO many learnings that it took awhile to analyze the data to identify common themes! Here were the primary insights:

Key takeaways from testing

There were SO many learnings that it took awhile to analyze the data to identify common themes! Here were the primary insights:

Key takeaways from testing

There were SO many learnings that it took awhile to analyze the data to identify common themes! Here were the primary insights:

Goals and constraints for the design

Based on the insights gathered from our users, here are the goals and constraints outlined for the current project.

Goals and constraints for the design

Based on the insights gathered from our users, here are the goals and constraints outlined for the current project.

Goals and constraints for the design

Based on the insights gathered from our users, here are the goals and constraints outlined for the current project.

A while we're at it, a design audit!

I marked up the current UI with notes for areas of improvement and cleanup.

A while we're at it, a design audit!

I marked up the current UI with notes for areas of improvement and cleanup.

A while we're at it, a design audit!

I marked up the current UI with notes for areas of improvement and cleanup.

Design

Design

Design

The first iteration

In my first pass at the design, I merged current and suggested mappings into one view and did some general UI cleanup. The user clicks a button on the field to open a modal to review the suggestions for that field.

The first iteration

In my first pass at the design, I merged current and suggested mappings into one view and did some general UI cleanup. The user clicks a button on the field to open a modal to review the suggestions for that field.

The first iteration

In my first pass at the design, I merged current and suggested mappings into one view and did some general UI cleanup. The user clicks a button on the field to open a modal to review the suggestions for that field.

Feedback from internal stakeholders

The overall feedback indicated that the suggestions felt disconnected from the existing data mapping experience. Additionally, the modal approach was not well-received, as it interrupts the user's workflow during the review and editing of mappings.

Back to the drawing board

I continued iterating to figure out the best approach to create a seamless view and flow of reviewing suggested data mappings.

Back to the drawing board

I continued iterating to figure out the best approach to create a seamless view and flow of reviewing suggested data mappings.

Back to the drawing board

I continued iterating to figure out the best approach to create a seamless view and flow of reviewing suggested data mappings.

Result

Result

Result

Final designs

After a few more rounds of internal feedback, we landed on a final design that best met the needs of our users!

Final designs

After a few more rounds of internal feedback, we landed on a final design that best met the needs of our users!

Final designs

After a few more rounds of internal feedback, we landed on a final design that best met the needs of our users!

Main Data Mapping Page

  1. Reduced the number of page-level buttons, hiding infrequent actions behind a drop-down button

  2. Moved important filters above the table to clean up the table view and remove column/value misalignment

  3. Reconfigured the category selector so the user can focus on one category at a time, which fixes the awkward row hierarchy in the table

  4. Introduced a subtle call out at the field level for suggestions​​

  5. (not labeled) Overall altered and reduced the colors on the page to help focus the user's attention on the primary actions, callouts, and statuses

Data Field Open

  1. Cleaned up the section that provides information on the marketplace's allowed values

  2. Redesigned the data mapping selections

  3. Repositioned and redesigned the primary, secondary, and tertiary CTA buttons

Data Mapping Suggestions

  1. New UI for the suggested mapping, including:​​

    • User can easily toggle between their current mapping and the suggestion for that particular field

    • User can fully evaluate all details of the mapping before making the decision to apply

    • User can still see the marketplace's allowed values next to the suggestion to validate it

    • The top suggestion is called out with a label (will hopefully soon replace that with a true confidence score)

    • User can flip through a maximum of 3 suggestions

    • Applying the suggestion immediately updates the current mapping, and the user will have an option to 'revert' if needed

    • User can dismiss any or all suggestions to remove them from view

Reflections

Reflections

Reflections

The research insights learned here were invaluable for this project and beyond. It was so fun to collaborate with the data science team and learn more about machine learning algorithms. I'm excited for users to start using this new design so that I can get more feedback and refine the design further. This was a challenging project to be fully design-led, but very rewarding to see the before and after screens side by side!

Thanks for scrolling!

I'm always open to discussing new opportunities to connect and create.

thigpen.j.bailey@gmail.com

+1 (919) 818-0813

Thanks for scrolling!

I'm always open to discussing new opportunities to connect and create.

thigpen.j.bailey@gmail.com

+1 (919) 818-0813

Thanks for scrolling!

I'm always open to discussing new opportunities to connect and create.

thigpen.j.bailey@gmail.com

+1 (919) 818-0813