Embedded BI
An AI analysis panel inside an ERP invoice. I took it from a paper sketch to a prototype. The PM signed off with no notes. Built with the Fanoos skill.
Embedded BI is an AI "smart analysis" feature inside Rahkaran, the ERP. It was built with my Fanoos design system skill. Here is that one feature at each step, from paper to a link the PM clicked.
- Pen and paper. My research found enterprise products like SAP putting AI assistants in a side panel. I aligned that direction with the PM, then explored on paper.
- Black-and-white wireframe. Interactive, built with a cheap, fast model. The right model for the right fidelity.
- High fidelity. Built with the Fanoos skill and checked by
check.mjs. - Polish. The
/animateskill for motion. Thegrill-meskill before building, so the agent doesn't wander.
The wireframe had low visual fidelity and high interaction fidelity. I used it to:
- check structure, information architecture, page flow and interaction early
- get feedback without bias toward colors or existing styles
- check consistency with the existing UI
- confirm the solution fits the need
I shared it as an HTML link. Feedback came back in Mattermost.
The PM clicked, and found the real rule
The PM clicked through the wireframe and realized the AI should not run automatically on load. It has to be triggered by the user. A static frame would never have shown that.
Then I explored how to show the response: tabs, a side panel, an expanded view for charts plus AI text. I built several variants.
The mini job we built and dropped
Before hi-fi, I talked to the developers. The AI runs as a background job, they said, so show a small job indicator in the corner. I built it. It felt bad.
A mini job indicator in the corner, as the developers suggested.
No indicator. The user clicks the AI icon, the side panel opens at once with skeleton loaders, and the response streams in.
We talked it through as a team. The job is a technical detail, not a user problem. The final design reuses a pattern from CRM: an AI icon on the description field, and voice-to-text with an AI summary. AI now behaves the same way across products.
Beyond done
The prototype worked, but it wasn't done. I added an animated AI icon, a streaming text animation and interactive charts. Then I stress-tested it in the browser before handoff: long text, edge cases, error states.
Signed off, no notes
The PM clicked through and signed off with no notes. The link then travelled to other teams.
Replying to Mohammad Sharifi: User flow: please take a look and tell me if you have any feedback…
