KRUTCH AI-POWERED SALES PROCESS MAPS [ CASE STUDY / 2025 / USA ]
KRUTCH WEBSITE ↗Process and Methodology
With an aggressive timeline and high technical density, the project was structured on the Double Diamond framework within the Design Thinking process. This approach aligned decisions with stakeholders and converged on a solution focused on operational efficiency and user autonomy.
Discover
- CSD Matrix
- Competitive Benchmarking
Define
- Personas
- User Journeys
Develop
- User Flows
- Wireframes
Deliver
- High-Fidelity UI
- Interactive Prototype
Discover
- CSD Matrix
- Competitive Benchmarking
Define
- Personas
- User Journeys
Develop
- User Flows
- Wireframes
Deliver
- High-Fidelity UI
- Interactive Prototype
DesignOps and AI Integration
| Stage | AI Tool | Application |
|---|---|---|
| UX Research & Discovery (General and Market) |
Perplexity Gemini ChatGPT |
Specialized agents built to collect and consolidate public market data. Focused on automated generation of fictional data and test datasets for early structure validation, eliminating any exposure of the product. |
| Product Discovery (Sensitive data) |
Internal Copilot (Secure) |
Analysis of confidential data within a secure corporate environment. Integration of Teams AI Notes to automate meeting transcripts and insights, ensuring governance during requirements refinement. |
| Ideation & Wireframing | Gemini UX Specialist - Custom Personal Agent Relume AI, UX Pilot, Claude Code |
Prompt engineering and refinement dedicated to the agile generation of wireframes and low-fidelity screens. Speeds up validation of information architecture and user flows before final design. |
| High-fidelity prototype (UI Design) |
Figma Make with Design System |
Applied Figma Make for ideation testing and agile creation of new visual elements, integrated directly with the local Design System's atomic structures. |
| Phase 2: Evolution and testing of a specific feature |
Gemini UX Specialist - Custom Personal Agent Claude Code Figma Make + MCP Server |
Functional prototype built with Claude's assistance for faster visualization of interactions, visual feedback, and product behavior. |
Discover
CSD Matrix
A structured tool to organize the founders' decentralized knowledge about the business.
- Goal: map market certainties, pending hypotheses, and critical questions before starting the architecture.
- Result: risk alignment and a focused MVP scope, mitigating rework during development.
Benchmark
Competitive benchmarking mapped competitors' flows and interface patterns, revealing operational gaps in the market.
GOAL: identify friction points in competing platforms' journeys to differentiate the Krutch interface.
RESULT: a mapping of best practices for complex tables that led to the strategy of centralizing critical alerts on the main dashboard, eliminating deep submenus and ensuring operational efficiency.
Define
User Personas
Personas were built from real data across the sales ecosystem, precisely reflecting the pain points, daily responsibilities, and productivity triggers of each user profile involved in the operation.
JESSICA MILLER
SALES EXECUTIVE
Goal: close deals faster with smart lead prioritization and full pipeline visibility.
DANIEL THOMPSON
SALES MANAGER
Goal: see team performance in real time and anticipate risks before they turn into revenue loss.
EMILY JOHNSON
OPERATIONS MANAGER
Goal: ensure process and compliance data are standardized and auditable across the whole operation.
MICHAEL ANDERSON
CRO
Goal: hold a consolidated strategic view to support investment and revenue growth decisions.
Expanded User Journey Map
To capture not only the operational steps of the sales pipeline but also the shifts in cognitive and emotional load of the persona, the journey was structured across 9 distinct stages, spanning from Discovery through Reporting. This cross-functional mapping made it possible to directly correlate user frustrations and expectations with latent product opportunities, tracing the exact impact of AI on the emotional state of each profile throughout the flow.
Develop
Macro User Flow
A visual diagram of the navigation flow, mapping the logical paths a user follows to complete a task within the product.
How it was done: the flow was designed to detail the interaction architecture of complex automated processes, such as Sales Ingestion (automated reading of sales process PDFs via NLP). Specific blocks mapped the backend's logical triggers and the algorithm's expected responses, shielding navigation against dead ends before the visual stage.
Result: robust documentation that removed ambiguity from the AI's behavior, serving as a clear guide for the engineering team.
Mid-Fidelity Wireframes
Mid-fidelity wireframes that structure information hierarchy, data density, and functional grouping across the product's core screens.
How it was done: blocks were generated from the architecture validated in the Macro User Flow and refined manually to respect the business rules mapped during the discovery and define phases, without investing premature time into visual polish.
Result: structure approved by the founders with no rework cycles, freeing the team to move directly into high-fidelity refinement.
Deliver
The high-fidelity interface and interactive prototypes bring the solution to life, consolidating complex flows into a clean, high-impact brutalist experience that validated the product directly with the market and investors.
ACCESS THE INTERACTIVE PROTOTYPES:
Phase 2: Feature Prototyping in HTML/CSS
An evolution focused on the onboarding experience, structuring and validating the user's initial setup.
How it was done: I used Claude Code to build an interactive version of the setup flow from scratch, a step that was not detailed in the static Figma prototypes.
Result: this strategic use of code allowed drag interactions, modals, and menus to be tested directly in the browser, validating interactions and visual feedback quickly.
OPEN THE HTML PROCESS BUILDER ↗
Business Results
This project shows how Product Design turns complex ideas into clear flows, transforming abstract concepts into a high-impact prototype that gave investors confidence to commit funding.
ACCESS THE NAVIGABLE FIGMA PROTOTYPES:
ACCESS THE HTML PROTOTYPE FOR PHASE 2: