Experience Design Wireframing

Customer discovery via functional prototypes + PostHog is night & day better than the old school way of asking for feedback on Figma mockups. Here's why: I get to observe actual user behavior instead of asking the user to guess how they might use my product. My favorite example of why this matters comes from a Sony Walkman user study. They asked a bunch of people what they thought about a yellow walkman and they said "so sporty! not boring like the black one!". And yet, when they were given the opportunity to take a walkman home after the study, everyone picked the black one. We learned a lot more from user behavior than we did expressed preferences. Here's my setup for now observing user behavior from prototypes: 1. Create a functional prototype in your favorite prototyping tool (Bolt, Lovable, Reforge Build, Magic Patterns, Claude Code) 2. Ask the prototyping tool to integrate PostHog analytics 3. Ask the prototyping tool to instrument key user actions in PostHog Then you get all of these ways of observing actual behavior: - DAUs \ WAUs \ retention curves - I can actually see if people come back and use my prototype instead of taking their word for it - Action metrics dashboards - I can see what actions people are taking vs not - Post-usage survey - I can add a built-in pop-up survey to ask the user a question about the experience after they have engaged with the prototype - Session replays - I can see exactly where people are clicking and how they are using the product to identify usability issues - Heatmaps - I can see what part of my design is working across all sessions I'd never go back to testing with just a mockup after this.

Happy Friday, this week in #learnwithmz, let's explore how AI is revolutionizing product prototyping, from idea to interactive mockup faster than ever. I’m delivering an internal talk on this topic for my team, and thought it would be valuable to share some highlights here as well. 𝐓𝐨𝐩 𝐀𝐈 𝐏𝐫𝐨𝐭𝐨𝐭𝐲𝐩𝐢𝐧𝐠 𝐓𝐨𝐨𝐥𝐬 𝐟𝐨𝐫 𝐏𝐫𝐨𝐝𝐮𝐜𝐭 𝐌𝐚𝐧𝐚𝐠𝐞𝐫𝐬 -Visily Transform text prompts, sketches, or screenshots into editable UI designs. 🔗 https://lnkd.in/gcerJweq - Uizard Generate wireframes and mockups instantly from text descriptions. 🔗 https://lnkd.in/grdSadcb - Microsoft 365 Copilot Prototype ideas directly within your workflow using Word, Excel, PowerPoint, and Teams. Great for early PRDs, visualizations, and cross-team brainstorming. 🔗 https://lnkd.in/gB2PNq9k - V0 by Vercel Create full-stack web apps from prompts, integrating frontend and backend. 🔗 https://v0.dev/ - Bolt Rapidly build and iterate on AI-driven product ideas. 🔗 https://boltai.co - Lovable Design and deploy AI-powered products with minimal coding. 🔗 https://lovable.so 𝐎𝐩𝐞𝐧-𝐒𝐨𝐮𝐫𝐜𝐞 𝐑𝐞𝐬𝐨𝐮𝐫𝐜𝐞𝐬 - NodeTool: Build and automate AI workflows without code. 🔗 https://lnkd.in/gnnB_7UU - ReacType: Visualize and export React applications with drag-and-drop. 🔗 https://lnkd.in/geQbxbEC 𝐋𝐞𝐚𝐫𝐧𝐢𝐧𝐠𝐬 - Speed vs. Precision: AI tools are great accelerators, but manual polish is still needed for complex workflows and specific needs. - Experiment often: The space is evolving fast; test, learn, and share back. - Check before you use: Always check your company’s policies on tool usage, especially when working with sensitive product data or proprietary designs. 𝐅𝐮𝐫𝐭𝐡𝐞𝐫 𝐑𝐞𝐚𝐝𝐢𝐧𝐠 A Guide to AI Prototyping for Product Managers by Lenny Rachitsky and Colin Matthews 🔗 https://lnkd.in/ge6nbzcr Which AI prototyping tools are in your workflow or on your radar? Drop your experiences or recommendations below 👇 #AI #ProductManagement #Prototyping #AItools #learnwithmz

Data alone can often feel impersonal and hard to relate to but professionals have found an interesting way around it - at least in the consulting world. I found it interesting that Bain & Company tackles this by using "customer journey mapping" - an approach that transforms data into vivid narratives about relatable customer personas. The process starts by creating detailed personas that represent key customer groups. For example, when working on the UK rail network, Bain created the persona of "Sarah" - a suburban working mom whose struggles with delays making her miss her daughter's events felt all too real. With personas established as protagonists, Bain meticulously maps their end-to-end journeys, breaking it down into a narrative arc highlighting every interaction and pain point. Using techniques like visual storyboards and real customer anecdotes elevates this beyond just experience mapping into visceral storytelling. The impact is clear - one study found a 35% boost in stakeholder buy-in when Bain packaged its conclusions as customer journey stories versus dry analysis. By making customers the heroes and positioning themselves as guides resolving their conflicts, Bain taps into the power of storytelling to inspire change. Whether mapping personal experiences or bringing data to life, leading firms realize stories engage people and shape beliefs far more than just reciting facts and figures. Narratives make even complex ideas resonate at a human level in ways numbers alone cannot.

Built 8 interactive UI prototypes with Claude Code in about a week to experiment with different ideas for small HTML apps as problem solving tools. Each one is just a single HTML file. No build tools, no frameworks, no npm install. The lineup: 1. Cable Configurator (39KB) — A* pathfinding algorithm for routing cables through a visual editor. You draw obstacles, set start/end points, and it finds the optimal cable path. Real pathfinding, not fake lines. 2. 3D Configurator (30KB) — general-purpose product configurator with parameter controls and live preview. 3. Side Table Designer (17KB) — furniture design tool where you tweak dimensions, materials, and proportions interactively. 4. Draw-Refine — multi-file system where you sketch rough ideas and an AI refines them into cleaner versions. 5. Inline-Draw-Chat — chat interface that lets you draw diagrams mid-conversation. 6. Thinkboard — collaborative thinking tool, basically a freeform canvas for organizing ideas spatially. 7. Tldraw-Chat — chat interface integrated with the tldraw drawing library. 8. Side Table Grid (7.5KB) — grid-based variant of the furniture designer. The pattern across all of them: single HTML file, vanilla JS, canvas-based rendering, no dependencies. The cable configurator implements real A* pathfinding in 39KB of self-contained code. The furniture designer does real-time 3D-ish projection in 17KB. I think there's something underappreciated about single-file prototypes (Simon WIllison was one of the first I saw point this out in his amazing blog). No build step means you can iterate in seconds. No dependencies means it works everywhere forever. The constraint of one file forces you to keep things simple — and simple often means better UX. The cable configurator is probably the most technically interesting one for me. Implementing A* in a visual editor where users can paint obstacles in real-time was a fun evening project. → Single-file prototypes: no build, no deps, no excuses. Cheers! B)

I recorded a quick walkthrough on how to turn Figma design system components into interactive code using Cursor or Lovable.dev. 🔥 No fluff. Real components. In less than 20 minutes, I built interactive prototypes ready for user testing for: ✅ Tag component (with all states) + specifications with all the details ✅ Dropdown with five variations (different designs) What you'll learn: → How to structure Figma components for MCP → The Cursor workflow (Claude 4 Sonnet vs Gemini 2.5 pro) → What breaks (and how to fix it) → When Lovable.dev helps If you're building or scaling a design system, this streamlines your Figma-to-code workflow. 🧪 Tools mentioned: → Cursor → Figma MCP → Lovable.dev Youtube https://lnkd.in/eZ9wfyz8 Who's testing this workflow? 🙌 #designsystem #cursor #ai #productdesign #figmamcp

Great journey maps start from the intersection of user touchpoints. A customer journey map shows a customer's experiences with your organization, from when they identify a need to whether that need is met. Journey maps are often shown as straight lines with touchpoints explaining a user's challenges. start •—------------>• finish At the heart of this approach is the user, assuming that your product or service is the one they choose to use in their journey. While journey maps help explain the conceptual journey, they often give the wrong impression of how users are trying to solve their problems. In reality, users start from different places, have unique ways of understanding their problems, and often have expectations that your service can't fully meet. Our testing and user research over the years has shown how varied these problem-solving approaches can be. Building a great journey map involves identifying a constellation of touchpoints rather than a single, linear path. Users start from different points and follow various paths, making their journeys complex and varied. These paths intersect to form signals, indicating valuable touchpoints. Users interact with your product or service in many different ways. User journeys are not straightforward and involve multiple touchpoints and interactions…many of which have nothing to do with your company. Here’s how you can create valuable journeys: → Using open-ended questions and a product like Helio, identify key touchpoints, pain points, and decision-making moments within each journey. → Determine the most valuable touchpoints based on the intersection frequency and user feedback. → Create structured lists with closed answer sets and retest with multiple-choice questions to get stronger signals. → Represent these intersections as key touchpoints that indicate where users commonly interact with your product or service. → Focus on these touchpoints for further testing and optimization. Generalizing the linear flow can be practical once you have gone through this process. It helps tell the story of where users need the most support or attention, making it a helpful tool for stakeholders. Using these techniques, we’ve seen engagement nearly double on websites we support. #productdesign #productdiscovery #userresearch #uxresearch

As a product leader, I’ve spent years refining product development cycles — from ideation to launch. But AI is forcing all of us to rethink the how. Recently, I’ve been diving into how AI can enhance prototyping, and tools like blot.new or V0.dev have genuinely impressed me. What have I learned? 🔹 Instead of static designs in Figma → we’re using blot.new to turn those into working UIs It accepts plain-text prompts and instantly scaffolds React components styled with Tailwind CSS. The UI output is clean, componentized, and ready to plug into a real product. 🔹 Product managers can write functional prompts directly No need to wait for handoffs. A PM can now write something like: “A form with email/password input and a login button, responsive for mobile” …and blot.new returns the actual code and live UI preview within seconds. 🔹 A/B tests without code deployments We can test variations of user flows or UI layouts directly in blot.new, collect early feedback, and refine before it ever hits the dev backlog. What this changes: ✅ PMs and designers are now more hands-on with execution ✅ Engineers spend less time on throwaway prototypes ✅ Idea-to-feedback loops are dramatically shorter This shift has been energizing. And we’re just scratching the surface. Curious if others are doing the same. How are you integrating AI into your product workflow? #ProductLeadership #AIinProduct #PromptDrivenDevelopment #PrototypingWithAI #blotnew #TailwindCSS #React #RapidIteration #LeanProduct

Prototyping is how ideas turn into evidence. It surface hidden assumptions, generate better stakeholder conversations, test specific hypotheses, reveal unforeseen interactions, and give you a concrete artifact to evaluate before code or tooling locks you in. Use low fidelity sketches and storyboards when you need speed and divergent thinking. They help teams externalize ideas, reason about user goals, and map flows before pixels appear. They are deliberately rough to avoid premature polish. Move to click through wireframes in Figma when the question is structure and navigation. Validate information architecture, menu depth, labeling, and path efficiency while changes are still cheap. When the feel of interaction matters, use interactive digital prototypes to evaluate micro interactions, timing, and visual polish. Treat them as validation instruments, not trophies. Plan change criteria up front so attachment to a pretty artifact does not silence real feedback. Some questions require real performance and materials. Coded prototypes and functional hardware mockups tell you about latency, reliability, durability, ergonomics, and safety. In medical devices and other regulated domains, high fidelity functional and contextual testing is expected for Human Factors validation. Not every question lives on screens. Experience prototyping and bodystorming put bodies in space to surface constraints that lab tasks miss. Acting out a shared autonomous ride with props reveals comfort, cue timing, and social norms. Wearing a telehealth mockup for a week exposes stigma, routine friction, and alert patterns that actually fit domestic life. Before building intelligence, simulate it. Wizard of Oz studies let a hidden human drive system responses while participants believe the system is autonomous. You learn vocabulary, trust dynamics, acceptable latency, and recovery strategies without heavy engineering. AI of Oz replaces the human with a large language model so you can study conversational realism early. Manage risks like model bias, hallucinations, and outages with guardrails and logging so findings remain trustworthy. Strategic prototypes also matter. Provotypes and research through design artifacts challenge assumptions, surface values, and force early conversations about privacy, power, and trade offs that slides tend to dodge.

We used to talk about the funnel. Now we talk about flows. Then journeys. Then loops. But most brands today? → Homepage → Add to cart → Buy (or not) → Goodbye Here’s how to rebuild an actual customer journey, one that extends beyond the sale. Use this map: Step 1: Intent → What made them search in the first place? Speak to that in your ad/email. Step 2: Decision → Don’t just describe features. Connect to what matters in their daily life. Step 3: Post-purchase → Reinforce their identity. “Smart choice” content. Setup tips. First 7 day support. Step 4: Connection → Let them see other users like them. Not influencers, real people. Step 5: Re-intro → Send a “You’re not new anymore” email. Show new features, upsells, community. That’s how brands go from “store” to “relationship”. Journeys aren’t dead. But yours might be.

Friday honesty: Customer-centricity is a lot harder to maintain than it seems. Even for those of us in Customer Success. The tendency is always to drift toward making our processes and focus company-centric rather than customer-centric. Don't believe me? Just look at one example of this: Customer Journeys. Many teams say that they have a defined Customer Journey. But rather than actually being oriented around the customer, for many the journey map is a list of activities from the company's perspective that are built around milestones the company cares about (contract signature, go-live, renewal, etc). I know about this, because I've been guilty of it in the past myself. I confuse my activity list with a customer journey and wonder why customers aren't as successful as they'd like. While important, that isn't a customer journey. It's an activity list. It's a rut none of us mean to fall into, but it's the natural drift because we live and breathe our own organization. So what do you do about it? How can you adopt a more customer-centric mindset in this area? TRY THIS APPROACH INSTEAD: 1. List out the stages your customers' business goes through at each phase of their experience with your product. Use these to categorize journey stage, rather than your contract lifecycle. 2. For each stage, list out what their experiences, expectations, and activities should be to get the results they want. Don't focus on listing what YOU do, but rather focus on listing what a customer does at each phase of their business with your product. List out the challenges they'd face, the business benefits they'd experience, the change management they'd have to go through, the usage they'd expect. Think bigger than your product here. 3. Then map what support a customer would need to actually accomplish these desired outcomes at each stage of the journey. Think education, change management enablement, training, etc. 4. Based on all of the above, you're finally ready to start identifying what your teams do to support the customer. ____________________________________________ Following a process like this helps build customer-centricity in 3 ways: 1. It causes customers to be the center of how you decide which activities are most important to focus on. 2. It empowers your team to become prescriptive about what customers should be doing for THEIR success. 3. It exposes what you don't know about your customers' business. And if you don't know something, just ask them. Don't make assumptions when you can instead talk to your customers directly. Avoid the company-centric drift, fight to maintain true customer-centricity however you can. This isn't just a nice to have in 2024. It's a business imperative that's important for any business to survive in this climate. But I want to hear from you! How do you guard your org from drifting to company-centricity? #SaaS #CustomerSuccess #Leadership #CustomerCentric