Date Picker - Flex Conversational Insights - Frame AI

[Porlin]

Background

CC @cdpestitschek

Twilio Flex are leveraging Frame AI as an Add-on to Flex to provide conversational understanding via Frame AI analysis and dashboards for the Supervisor persona. 

Frame.AI analyzes customers' conversations and uses AI to derive insights such as; how is the customer feeling about the product, what is the cost in supporting customer requests, how are the agents performing when it comes to complicated conversations? Conversational Insights helps customers reduce cost while serving their customers and managers prioritize work effectively, ultimately improving the experience for their customers.

This is a separate dashboard in the Flex experience and below is an example of where we have placed the Select range and Date picker.

https://drive.google.com/file/d/1_-0cgD94eNegfh4EI9lX8DgFlz1mu1M2/preview

Our Product/Engineering partners have raised the issue that the Paste Date picker is not as intuitive and we wanted feedback on the following:

Weekly Date Range
When you select a week, it doesn't tell you what week it's starting from. You can still select individual dates which isn't ideal.

https://drive.google.com/file/d/1KaTladNysOmfmhetsgoLHINo7rp_U1mC/preview

Example of Frame AI implementation

https://drive.google.com/file/d/1pMqlyplWe-APe55FnygtOVTDEAjCQEFi/preview

Month selection

When you select a month, you can skip to previous months and it generates the information but doesn't allow you to confirm first - it just refreshes with a new month information.

https://drive.google.com/file/d/1t8L1Xm577igHtg8dOln9QU_m1udTJsGR/preview

Example of Frame AI implementation

https://drive.google.com/file/d/10u8fJeOaF2SaeahoKslKIpf5kc7SQCXZ/preview

Questions

• Any improvements that can be made?
• Is this on your roadmap?
• What could we do in the meantime to navigate some issues we have?

Stage of design
High-fidelity designs. Engineering are in build.

Research
Supervisor Frame AI research

[nkrantz]

Hey @Porlin - going to share this with the team today and get back to you soon, in the meantime can you grant access to the google drive so I can see the links you shared?

[Porlin]

Let me know if you can view the links?

[nkrantz]

I can see them now, thanks!

[nkrantz]

A couple questions so we can better understand your Date Picker needs:

1. I couldn't find this info in the research doc but might have missed it. What is the most common use case for date ranges that your users will be selecting? Would it be more common for them to select the most recent day/week/month or would it be more common for them to select a day/week/month farther in the past? More likely to filter by a day or by a week, etc.?
2. Have you already considered using 2 side-by-side Date Pickers (seen here in this example) for a way for users to more straightforwardly select their range, rather than the Combobox/Date Picker combination in your designs? What about a Combobox with a "custom" option that leads to 2 side-by-side Date Pickers (seen in this example)?

Having this context will help us give you some more specific guidance for the Conversational Insights filter.

One more thing to note - it looks like some of your filters are aligned to the left of the screen while others (the Date Picker) are aligned to the right side. Please follow our Filter Group pattern for standardized filtering layouts! We'll also be releasing the Complex Filter Group pattern soon, so keep an eye out for that in the coming weeks.

[premkrishnanv]

For #1, the most common use case is for the users of this page to choose the current day/week/month, since that is what they will need to take any action on. Past data will be required for any analysis or comparison purposes.

[premkrishnanv]

On the backend, we have starting day ranges for week and month set i.e. the starting day of the week is always Monday, the starting day of the month is the 1st etc. So when user chooses a 'week' timeframe and sets the day to Wednesday, they need to understand that the week is still considered to be starting on Monday. Here, we have seen the Frame UI to be more intuitive, against a week filter, it does not permit any day to be chosen apart from a Monday. Similarly, for a month filter, it just allows specifying the month and not any particular date.

[nkrantz]

Thanks @premkrishnanv - that's helpful context. Knowing that, I'd go with a variation of the second example I shared (Combobox with default options that leads to Date Picker for custom options). You can consider the most common selections based on user needs and make those the Combobox options (e.g. "Last 24 hours"/"Last 7 days"/"Last month"), with the final Combobox options being "Custom day", "Custom week", "Custom month", etc. When a user selects "Custom X", you'll replace the Combobox with a Date Picker, like we do in the example I've linked, and restrict the selectable options using Date Picker properties (hint: defaultValue="2024-06-03" and step={7} together will only allow the user to select days that are 7 days from today, or in other words, all Mondays). If you think it might be unclear to the user why they're only seeing Mondays as options for "Custom week", for example, you might consider adding an InformationIcon Tooltip by the Date Picker explaining why those restrictions exist.

Let me know if that solution better fits your needs. If you'd like to talk about the proposed flow further, or work on other solutions together, please sign up for an office hours slot this Thursday (sign-ups here). Thanks!

[Porlin]

Hi @nkrantz Thank you for the feedback. I think an office hours session will be great. This Thursday the timing doesn't work for us as the sessions start from 8:30pm GMT. Could I suggest an ad-hoc session for us this week? Let me know if that's possible.

[nkrantz]

Just updating this thread to confirm that we'll come back to this discussion during office hours on June 13

[roxanagomez]

Thanks for coming to office hours, @Porlin and @cdpestitschek ! Here's the recording link

You can find the password in slack!