Product Manager
Designing a Complete User Flow for a New Product in 90 Seconds
Designing a Complete User Flow for a New Product in 90 Seconds
Key Takeaway
Describe your product idea in plain text and get a full information architecture, user journey map, wireframe specs, and decision trees in 90 seconds.
The Problem
Day one of a new product. You have an idea. Maybe a pitch. Maybe a napkin sketch.
The traditional next step: gather 3-5 people in a room. Whiteboard session. 4 hours. Sticky notes everywhere. Someone takes photos of the whiteboard. The photos go into a Slack channel. Nobody looks at them again.
Then someone opens Figma and starts designing screens. Without a flow. Without mapping error states. Without thinking about what happens when the user says no. Three weeks later, the developer asks "what happens if the user doesn't verify their email?" and nobody has an answer.
I've watched this happen at Artificial-Lab. Day one of a new project: energy is high, people jump straight to UI. The information architecture gets figured out retroactively, in code, by developers making ad-hoc decisions.
That's how you get products where the settings page has 47 items in a flat list and the error flow redirects to the homepage.
The Solution
Our UI/UX Pro Max agent takes a plain-text product description and generates the complete information architecture before anyone opens a design tool.
On Artificial-Lab's last product sprint, we used this on Day 1. Before the first Figma file existed. Before the first wireframe. The agent mapped the entire product flow in 90 seconds. The team spent the rest of the day debating the flow instead of debating layouts.
That's the right order.
The Process (with code/config snippets)
The input is deliberately low-fidelity. Plain text. No templates. Just describe what the product does:
markdownShow code
Product: Collaborative document editor for legal teams
Users: Lawyers, paralegals, clients (view-only)
Core features:
- Create and edit legal documents with version tracking
- Comment and suggest changes (like Google Docs)
- Approval workflow: draft → review → approve → finalize
- Client portal: share specific documents with clients for review
- Template library for common document types
- Audit trail for compliance
Business context:
- Target: mid-size law firms (20-100 lawyers)
- Must be more secure than Google Docs
- Compliance with legal data retention requirements
The agent outputs four artifacts:
1. Information Architecture:
View details
App Structure
├── Dashboard
│ ├── Recent Documents
│ ├── Pending Approvals (badge count)
│ ├── Client Requests
│ └── Quick Create
├── Documents
│ ├── All Documents (filterable)
│ ├── My Documents
│ ├── Shared With Me
│ ├── Templates
│ └── Archive
├── Document Editor
│ ├── Editing Mode
│ ├── Suggesting Mode
│ ├── View Mode
│ ├── Version History
│ ├── Comments Panel
│ └── Approval Status Bar
├── Client Portal
│ ├── Shared Documents
│ ├── Request Access
│ └── Download Center
├── Admin
│ ├── User Management (roles: admin, lawyer, paralegal, client)
│ ├── Audit Trail
│ ├── Retention Policies
│ └── Security Settings
└── Settings
├── Profile
├── Notifications
└── Integrations
2. User Journey Map (primary flow — document approval):
View details
[Lawyer creates document]
→ Select template or blank
→ Edit with auto-save
→ Add collaborators
↓
[Collaborators review]
→ Add comments/suggestions
→ Suggest changes (tracked)
→ Resolve discussions
↓
[Lawyer submits for approval]
→ Select approver(s)
→ Set deadline
→ Add notes
↓
[Approver reviews]
→ Approve ──→ [Document finalized, locked, version stamped]
→ Request changes ──→ [Back to Lawyer with feedback]
→ Reject ──→ [Archived with reason]
↓
[Share with client]
→ Select document
→ Set permissions (view/comment/download)
→ Generate secure link
→ Client gets email notification
3. Error States and Edge Cases:
markdownShow code
## Edge Cases Mapped
| Scenario | Current Screen | Behavior | Recovery |
|----------|---------------|----------|----------|
| Concurrent edit conflict | Editor | Show conflict banner, offer merge | Side-by-side diff view |
| Approval deadline passed | Approver Dashboard | Auto-escalate to admin | Configurable: extend or reassign |
| Client link expired | Client Portal | Friendly expiry page | "Request new access" button |
| Document deleted during review | Review Queue | Soft delete, notify reviewers | 30-day recovery from archive |
| User removed mid-edit | Editor | Save draft, revoke access on next sync | Notification to document owner |
| Offline edits | Editor | Queue changes, sync on reconnect | Conflict resolution if diverged |
| Template updated after use | Document | No effect on existing docs | Option to "rebase" on new template |
4. Wireframe Specs:
For each screen in the IA, the agent generates a wireframe spec — not a visual wireframe, but a structural spec that a designer can implement in any style:
markdownShow code
### Screen: Document Editor
Layout: Three-column (collapsible side panels)
- Left panel (240px): Document outline / table of contents
- Center (fluid): Document canvas with toolbar
- Right panel (320px): Comments + Approval status
Toolbar elements (top, sticky):
[Back] [Title (editable)] [Mode: Edit|Suggest|View]
[Share] [Version History] [Submit for Approval]
Status bar (bottom):
[Last saved: timestamp] [Word count] [Collaborators online (avatars)]
Responsive breakpoints:
- >1440px: Three columns visible
- 1024-1440px: Left panel collapsed, toggleable
- `<1024px`: Single column, panels as bottom sheets
The Results
| Metric | Team Workshop | Agent-Generated |
|---|---|---|
| Time to complete IA | Half day (4 people × 4 hours = 16 person-hours) | 90 seconds |
| Error states mapped | 2-3 obvious ones | 7+ including edge cases |
| Screens identified | 8-10 (major flows) | 18+ (including admin, settings, error pages) |
| Format | Whiteboard photos | Structured markdown (version-controlled) |
| Responsive considered | "We'll figure it out" | Breakpoints per screen |
| Ready for design | After someone transcribes the whiteboard | Immediately |
The workshop isn't eliminated. It's transformed. Instead of starting from zero, the team starts from a complete draft. The 4-hour session becomes a 1-hour review. "Is this right? What did we miss? What should we cut?"
That's a better use of four people's time.
Try It Yourself
Write a product description in plain text. Include: user types, core features, and any business constraints. The more context you give, the better the IA. But even a two-paragraph description generates a useful starting point.
The output is markdown. Version-control it. Iterate on it. Let it evolve alongside the product.
Design the flow before you design the screens. Sounds obvious. Almost nobody does it. Now a machine does it for you in 90 seconds, so there's no excuse.
Related case studies
Product Manager
We Map Every New Product's User Flow Before Writing a Line of Code
We map every new product's user flow before writing a single line of code — using an AI agent that generates complete information architecture, user journey maps, and edge cases in 90 seconds.
Engineering Lead
Building a Decision Tree for Agent Routing — Which Agent Gets What?
We mapped how 31 AI agents across 8 teams route requests as a visual decision tree — and immediately found a gap that had existed undetected for months.
Engineering Lead
Mapping the Cron Job Dependency Chain as a Visual Diagram
We turned 14+ cron job descriptions into a color-coded dependency diagram and discovered that 4 critical jobs all depended on one authentication token.
Want results like these?
Start free with your own AI team. No credit card required.