Skip to content

Prototyping

This is where ideas come to life. In this phase, UX and ML teams work in parallel to transform concepts into implementation to create testable prototypes and pipelines and deployement for to help out solution scale with demand.
mlops-vs-design-cycle-implmentation-pipelines-deployment.jpg

Crawl-Walk-Run Approach

We start with a ✨ Minimum Viable Experience (MVE) ✨ where both teams begin simply and grow in complexity. This helps validate core concepts early and makes iteration easier.
Stage of Crawl-Walk-Run
Stage
UX Team
ML Team
Goal
Crawl
User flows
Model Developemnt
Validate core concepts
Walk
Wireframes
Pre-serving Prototype
Test key interactions
Run
High-fidelity prototypes
Scaling web to inference servers
Deliver robust solution
There are no rows in this table
prototyping-ux-vs-mlv5.jpg

🎨UX Prototypes: Growing in Detail

Each prototype builds on the previous, becoming more detailed and complex.
Crawl-Walk-Run for UX Prototypes: User Flows → Wireframes → High Fidelity Prototypes.

User Flows

What: Simple diagrams showing user journeys
Purpose: Map out key user actions, decisions, and paths
Ease of Change: Very easy - quick to edit and iterate
user-flow.png
wireframe-user-flow-2.jpg

Wireframes

What: Basic, low-fidelity layouts showing content structure and hierarchy
Purpose: Visualize screen layouts and information architecture
Ease of Change: Moderate - requires some design work but still flexible

High Fetidity Prototypes

What: Detailed, interactive designs that look like the final product
Purpose: Test exact interactions and visual design
Ease of Change: Most complex - requires significant design effort to modify


low-to-high-fidelity-prototype.png.webp

⚙️ ML Prototypes

Sometimes called Pipelines and Deployment, this phase transforms your ML models from local experiments into production-ready systems. Before building complex serving architectures, let's make sure the core interactions work using a crawl-walk-run approach.
Crawl-Walk-Run for ML Prototypes: Model Development → Pre-Serving → Production Deployment

Model Development

Train models locally: Start with notebooks and simple scripts
Track experiments: Use MLflow to monitor model versions and metrics
Focus on data quality: Clean data, handle missing values
Quick iterations: Test different models and parameters
Example Tools: Jupyter, Python, MLflow, Pandas

# Import the ML algorithm and Iris dataset
from sklearn.ensemble import RandomForestClassifier
from sklearn.datasets import load_iris

# Load and split the classic Iris flower dataset
iris = load_iris()
X, y = iris.data, iris.target

# Train model and print accuracy
model = RandomForestClassifier().fit(X, y)
print(f"Model Accuracy: {model.score(X, y):.2%}")

Pre-Serving

Basic API endpoints: Create simple REST APIs
Interactive demos: Build Streamlit apps for stakeholders
Real data testing: Use production-like data
Gather feedback: Test with actual users
Example Tools: Streamlit, FastAPI, Docker
Example of implementation:

streamlit_example.jpg

Production Deployment

Scalable systems: Handle multiple users and requests
Monitoring setup: Track model performance and drift
Automated pipelines: Set up CI/CD for model updates
Performance optimization: Balance speed and accuracy
Example Tools: Kubernetes, Cloud Services, Monitoring Tools
test.avif
Pro Tip: Start simple and scale as needed. It’s easier to build complexity on a strong foundation than to fix mistakes later.
← Previous
Next →

🚀 Let's Connect

I'm always excited to discuss the intersection of AI and user experience, or explore potential collaborations.
✉️ 🌎 Citizenship: US, Canada 📍 Location: Toronto, ON, Canada 💼



Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.