How I Designed an AI Companion Feature to End Dull Tasks
Client
Lupl
Role
UX/UI Designer
Team
Product Manager, Design Leadership, Fullstack & QA Engineers
Scope
Researching, UX Design, UI Design, Prototyping
Platform
Web App
Year
2024
What is Lupl
Lawyers are oftentimes flooded with documents, and instead of doing the legal work, they are in a constant battle.
Lupl is a tool designed to streamline legal processes and workflows.
Lupl is a tool designed to streamline legal processes and workflows.
What challenged me
The requirements changed several times, and I had to adapt quickly to new scenarios. Understanding the technical limits of AI and turning it into a delightful user experience was complex.
Impact
Through my contribution, we made AI easier to use and more relevant to the situation at hand, which allowed users to streamline their work directly within the app.
Context
How it started
Once Lupl successfully launched a plugin for users to add to Copilot in Teams, it set the stage for a more tailored experience within the app. That was going to happen with CasePilot, an AI helper from Lupl. This context-aware AI assistant was meant to have the following core features:
- has to be a text to text GenAI
- use prompt templates
- prompt suggestions appear in different sections
- has actionable follow-ups (create tasks, rewriting, expanding, summarizing)
Initially, the main goal was to test a prototype with clients to see what works and what doesn’t.
Problem
Navigating AI pitfalls
A key problem was that AI gave inconsistent answers, which could make it challenging for prototype designs to work in real situations. Another issue was with balancing the use of contextual AI and proper handling of auto-enabling.
For example, if AI pop-ups show up everywhere without asking users for permission or giving clear warnings, people might feel annoyed.
Another risk was the potential confusion among users: we had to differentiate between the Copilot plugin and the new AI assistant within the Lupl app.
For example, if AI pop-ups show up everywhere without asking users for permission or giving clear warnings, people might feel annoyed.
Another risk was the potential confusion among users: we had to differentiate between the Copilot plugin and the new AI assistant within the Lupl app.
Researching
Learning from the best
I looked into what others are doing. Notion, for instance, has the cleanest design with context-aware AI, integrated smoothly without overwhelming users.
ClickUp’s AI features focus more on automating processes and task management, and it seemed the most complex app I explored.
Asana has smart recommendations without disrupting the user experience. These examples influenced my decision to prioritise non-intrusiveness while maintaining visibility.
ClickUp’s AI features focus more on automating processes and task management, and it seemed the most complex app I explored.
Asana has smart recommendations without disrupting the user experience. These examples influenced my decision to prioritise non-intrusiveness while maintaining visibility.
Time do design
First review
After exploring various design ideas, I reached a point where I felt confident enough. Ready to get feedback on the first designs.
CasePilot: 1st iteration
1
Context-aware AI for collaborators section;
2
Context-aware AI for Notification Centre;
3
AI for text input;
Getting feedback
Using familiar patterns
During this feedback session, we concluded that the colour I picked didn’t match the brand. It had to stand out, but the above purple was too different from Lupl’s teal identity.
A key takeaway from this meeting was that since users are already using the Lupl plugin in Microsoft Copilot, we should take advantage of this familiarity. We decided to use the Copilot card design system for our assistant, as shown in the video prototype below.
A key takeaway from this meeting was that since users are already using the Lupl plugin in Microsoft Copilot, we should take advantage of this familiarity. We decided to use the Copilot card design system for our assistant, as shown in the video prototype below.
CasePilot: 2nd iteration
Simplifying
Focus change
Although the first designs were inspired by Notion's context-aware AI assistant, things turned out to be different along the way. Due to a development focus switch, the new requirements for a minimum viable product had been much simplified.
The new needs included 4 types of prompts on the dashboard AI modal that generated text answers with references and cards, similar to Copilot. These cards had action buttons for quickly turning text into actionable items within Lupl.
The new needs included 4 types of prompts on the dashboard AI modal that generated text answers with references and cards, similar to Copilot. These cards had action buttons for quickly turning text into actionable items within Lupl.
CasePilot: final design
1
Instead of displaying text prompts one by one, they were arranged in cards to make it easier for users to read and choose.
2
AI responses were simplified to plain text to make development easier and create a basic version of the product to test.
3
Matter-related cards were simplified even more for the final iteration. They provide quick follow-up actions for quickly creating items.
4
Task-related cards are simple and display only the essential information and a progress status.
It wasn't meant to be
Lessons learned
Unfortunately, in the end, this feature was completely deprioritised. But the iterative design process helped me gain valuable insights into meeting technical and business constraints.
It helped me develop an agile attitude and become more aware that not all design ideas will make it into production. And most importantly, it gave me an opportunity to learn and improve.
It helped me develop an agile attitude and become more aware that not all design ideas will make it into production. And most importantly, it gave me an opportunity to learn and improve.
