AI powered forms
In CRM applications, the user experience often revolves around a few key page types: dashboards, grids/lists, and—most critically—forms. Though customizations vary, forms remain central to CRM workflows as users capture and update data. This case study explores our journey to integrate AI capabilities into form entry in the UCI platform, aiming to make the experience faster, smarter, and more user-friendly.
The Power of Context (FOR LLMs)
With Microsoft’s push to integrate AI across products, model-driven apps emerged as an ideal candidate for AI-driven form filling due to their inherent structure. Unlike more flexible canvas apps, model-driven apps are built on structured, multi-relational data tables, creating a framework that’s well-suited for language models.
To harness this structure, we identified two key components for a successful AI-driven form experience:
Enhanced Data Prediction
The prediction model would need to detect patterns in recent user activity, including past form entries. Over time, we aimed to incorporate data sources such as recent emails, meetings, and calls for even more precise predictions.
Seamless, Low-Friction UX
Given the importance of smooth data entry, the user experience needed to feel fluid, with minimal clicks or steps. Ensuring a high-quality, unobtrusive interaction was vital for user trust and ease of use.
Diagram of context powering form predictions
We had two months to create a viable MVP. Considering the crowded form UI, we designed an experience that required minimal visual elements. Additionally, we wanted to keep a “person in the loop” to build user trust, meaning predictions would remain in draft mode until the user explicitly accepted them.
To manage complexity, we focused on empty fields only, avoiding any interference with user-entered data. For maximum efficiency, we designed one-click acceptance for each prediction, allowing users to bypass manual entry. Inspiration came from similar systems, like predictive text in mobile apps, where suggested text appears ahead of the cursor. However, our design needed to go a step further. We avoided requiring users to tab or click into fields, streamlining interaction even further.
Through iterative feedback and user testing, we found that users preferred an explicit “Accept” button over implicit acceptance for easier editing control.
Some of the many options we explored. This is an example of a single but entirely ubiquitous micro-interaction that carries enormous risk if it adds any amount of friction to the experience.
Making AI Predictions Intuitive
Our goal was to make AI predictions visibly distinct without overwhelming users. We tested various styling options to ensure predictions were clearly identifiable yet did not resemble hint text or manual entries. Research confirmed that simple field styling, rather than heavy-handed design cues, effectively prevented confusion.
On the left, the teaching tool tip we went with. On the right, a heavier nudge to the user that would appear when they saved a page, this was mocked up because there was a recognized risk that users wouldn’t understand that predictions shown in fields were temporary and in a ‘draft’ state that would not be saved.
Scaling and Refining the Feature: ‘Smart Paste’ and Beyond
The feature’s success led to further investment, with “Smart Paste” identified as a promising next step. We envisioned an interface where users could drop files or lookup records to provide more context, allowing Copilot to generate predictions based on this added information. However, as we iterated on this concept, we scaled back to a more focused approach with a collapsible bar above the form, enabling users to add context seamlessly.
Below you can see the evolution of the design
Here you can see the initial thinking around showing external data sources that are powering the form prediction.
Continued exploration with more of the data previewed in the card and a clear way to add additional sources via Copilot.
The first exploration of knowledge cards on the form. These cards are massive and show both a thumbnail and a text preview which we quickly moved away from.
This exploration shows a knowledge card, a potential knowledge card being suggested by copilot, and the ability to add knowledge directly from a copilot powered lookup control.
An early proposal for the drag and drop state. The concept of directly dragging a file into the form stuck though the styles here changed.
We finally abandoned trying to keep this functionality in the form header and moved it closer to the fields for a more in line experience. This mock was more of a wireframe than a high def mock and was meant to illustrate how it could work directly on the form.
Refined styles and visuals while keeping the core experience from the previous exploration.
Addition of a hide/show ability in the cut out as well as the addition of an ellipses menu to for inline settings.
Key Takeaways
Context-Rich Predictions
Leveraging structured CRM data allows AI to make accurate, contextually relevant predictions, streamlining data entry.
User-Centric Design for New Technologies
Clear visual cues and a person-in-the-loop model were essential for user trust in AI-driven data entry.
Iterative Testing and Feedback
A rapid feedback loop enabled us to make informed decisions quickly, building an experience that resonated with users.
Scalable Design Thinking
Concepts like Smart Paste expanded on the MVP, introducing new ways for users to provide context, further enhancing prediction accuracy.
