Components for AI-generated responses

How we designed ✨Assist, a flexible text-box toolbar to work within multiple use-cases of our customer service platforms.

How we designed ✨Assist, a flexible text-box toolbar to work within multiple use-cases of our customer service platforms.

How we designed ✨Assist, a flexible text-box toolbar to work within multiple use-cases of our customer service platforms.

Output

Our solution involves a toolbar of customer response actions now embedded into our platform's interface allowing business owners to:

  • draft a written response to their customers using AI

  • call the customer

  • leave case notes for teammembers on where a customer issue stands

  • resurvey a customer for up-to-date feedback

  • mark customer issues as resolved

Results

⚡️ Our team reduced average customer response times by 80% for 500+ clients since Dec 2024 launch date.

🌐 I successfully built a compatible design pattern for other products in our organization to generate and edit AI response - saving months of of future development work.

Design stages

We tested various AI applications for customer support, initially developing an MVP with LLM-based comment analysis, chatbots, and executive summaries. Based on funding and client feedback, we've focused our product solely on AI-powered customer response.

  1. Manual PDF reports showcasing customer insights

  1. Tested first online reporting MVP, complete with chatbot

  1. Pivot to customer response tool based on budget and user feedback

  1. Iteration to Assist product and launch

Our MVP's qualitative feedback indicated a strong client preference for the AI chatbot's ability to quickly draft comprehensive customer replies.

Iterations to launch Assist

Initially, we assumed this feature would be a simple "Write with AI" button embedded in existing response fields throughout our apps.

By conducting a competitive UX analysis of products solving similar problems, we identified key interaction patterns and industry standards that inform our design decisions. Notably, examining AI text editors like Superhuman (1st image) and Apple Intelligence highlighted the innovative use of shortcuts for modifying customer responses.

This insight inspired us to integrate comparable quick adjustment options on the written content, which we anticipated would be valuable for our users (below).

Following multiple iterations, we optimized the user interface by bottom-aligning the AI options within the text field. This placement resulted in a more subtle and unobtrusive experience, ensuring users could freely compose responses without feeling obligated to write a response using AI.

Responsiveness

Responsive behavior was achieved by collapsing secondary AI actions into a kebab menu as the text field resizes within our application, with 'Revision' maintained as a primary post-generation action.

We optimized horizontal space within the lower toolbar by opting for a dropdown instead of a segmented button for 'Send Email' and recommend a similar treatment for the options above the text field in smaller viewports.

The challenge was to design a toolbar that is fully responsive and fits easily within several screen sizes and frames as our clients are able to respond to customers at various points within the application that requires this toolbar to present.

Appending other actions

To streamline customer issue resolution, we needed to provide a comprehensive toolkit beyond just written responses. This included:

  • available call-number indication

  • internal team collaboration through notes

  • customer re-surveying for updated feedback

  • and clear case-resolution marking.

We aimed to consolidate these actions with the Reply option, resulting in a functional Assist toolbar configuration.

To streamline customer issue resolution, we needed to provide a comprehensive toolkit beyond just written responses. This included:

  • available call-number indication

  • internal team collaboration through notes

  • customer re-surveying for updated feedback

  • and clear case-resolution marking.

We aimed to consolidate these actions with the Reply option, resulting in a functional Assist toolbar configuration.

Results

⚡️ Our team reduced average customer response times by 80% for 250+ clients since Dec 2024 launch date.

🌐 I successfully built a compatible design pattern for AI response - saving months of of future development work.

What I learned

  • Benchmarking your prototype with competitors is essential to recognize problems that have already been solved for.

  • Some users are skeptical of AI interfering with their lives/workflow - always consider a subtle approach when introducing new features.

  • Don't be afraid to use existing design language for new features - make devs lives easier when possible.