top of page

Buffet feature for AI Chat

Helping users get precise answers to their questions

Role

Product Designer @ Shape AI

Year

2024

Overview

Supply Chain managers and executives no longer need to wrestle with complex calculations or wait days for BI insights from their analysts. With Shapes AI, they can instantly ask questions about revenue, inventory, and supply chain metrics. To address cases where questions may be too broad or ambiguous, we introduced the Buffet feature—a dynamic tool that offers users a set of clarifying options, ensuring they get the most relevant and accurate answers quickly.

User problem

Supply chain managers need fast, relevant insights, but vague questions can lead to delays and incorrect answers.

Business problem

Incorrect answers can reduce trust in Shape. This lack of precision can make the tool seem unreliable, reducing its perceived value and satisfaction.

Before state

The before state was a tooltip that contained explanations about the Composition & Extraction methods. It would close when the user started typing and it wasn't informative enough. Also, the examples were not good enough.

Solution

Creating an interactive Composition and Extraction formula helper so users can easily understand how to write the syntax correctly without needing to leave the page.

Composition 

The Composition helper has Alert tag values that exist in the system that the user can choose from. On the right side it contains the explaination of the composition method with examples.

When the user types in the input the Alert tags appear. When hovering over an alert tag value it shows a detailed explaination on the right side.

Extraction

The Extraction helper has common patterns and syntax suggestions on the left side. On the right panel there is an explaination of the extraction method and some examples.

I decided to put common used patterns that our users usually use so they would only have to click on it and there done!

Design Process

​

Challenges

​

  1. How to represent alert tags and regex syntax in the helper?

  2. How to help the user understand the composition method?

  3. How to help the user understand the Extraction method?

  4. How to teach the user the correct syntax for the composition formula?

Insights from research

​

  1. Users have a hard time remembering the syntax

  2. Users struggle in creating correct regex formulas

  3. Users have a hard time understanding that what they put inside the capture group will become the value of the new tag

  4. Most of the users use the extraction method for extracting values between dots or hyphens.

​

After getting some insights around the problem I made some design Iterations and collected feedback from my UX team and product teams.

Design Iterations

Chosen version

User Testing

​

I tested the prototypes on 5 of my colleagues that were not familiar with the Formulas so to succeed in the task they needed to use the helper.

​

Extraction Prototype link

Composition Prototype link

​
Composition testing findings:
​

  • Some users with limited composition knowledge grasped the alert tag population after one attempt.

  • All users successfully completed the task.

  • Users with technical knowledge understood that clicking on the alert tag would populate it.

  • The helper function effectively reminds users of the syntax.

  • The options for free text and syntax input are user-friendly.

  • The use of colors facilitates understanding and writing the syntax.

​

Extraction testing findings:

​

  • Users struggled to understand the usage of different colors.

  • Explanations and examples helped users succeed in creating patterns with minimal regex knowledge.

  • The separation of syntax into different backgrounds confused the users.

  • Examples are crucial for understanding the syntax.

bottom of page