Rapid Prototyping

5 posts

toss3 min readCurated summary

How AI Has Changed the Product Design Process

Toss redesigned its customer-service chatbot after finding that 60% of users abandoned the existing menu-based experience. Instead of forcing customers to identify the correct category, the team used AI to interpret natural-language requests and connect users directly to solutions. The project’s key insight was to prototype and validate experiences early, then improve the system through reusable rules rather than endlessly editing individual scenarios. ## Replacing Menu Navigation with Natural Language - The customer center serves roughly 600,000 visitors monthly, including about 170,000 chat users. - Users often know their problem—such as a failed payment or mistaken transfer—but not how Toss categorizes it. - The team therefore aimed to build a chatbot that understood intent and guided users directly to the appropriate resolution. ## Generating Scenario Drafts from Real 상담 Data - AI created initial scenarios for the 20 most common customer-service issues. - Personal information was removed and data was anonymized or pseudonymized before use. - Instead of relying primarily on policy documents, the team trained the AI on real consultation data. - This revealed: - The language customers actually use - The questions agents ask to narrow down causes - The order in which problems are diagnosed and resolved - Ways to explain complex policies in understandable language - As a result, the chatbot behaved more like a human 상담사 than a system that simply listed policies. ## Validating Many Situations with a Scenario Hub - A single request can hide dozens of possible conditions. For example, membership cancellation may depend on whether: - The monthly fee was already paid - Benefits were used - Cancellation was already scheduled - The team built a scenario hub where these conditions could be saved and selected. - Each selection immediately opened a prototype conversation with the chosen conditions applied. - This enabled rapid testing after scenario changes, new branches, or rule updates. - The prototype became an experimentation environment rather than a static mockup, allowing the team to judge realistic conversations instead of relying on assumptions. ## Replacing Individual Fixes with General Rules - Testing revealed recurring problems, including: - Asking for information the chatbot already knew - Repeating the same explanation - Guessing when it lacked reliable information - Rather than fixing each scenario separately, the team created general rules such as: - Resolve the customer’s problem before giving explanations - Admit uncertainty instead of guessing - Escalate to a human agent only under defined conditions - Clearly limit the AI’s authority - Improving one scenario helped only that scenario, while improving a rule improved many scenarios at once. ## Designing the Experience Before the System - The team first envisioned the desired customer experience, then worked backward to determine the required: - Data structures - APIs - Operational tools - System architecture - This reversed the conventional process of designing infrastructure first and fitting the user experience onto it. - Within approximately three weeks, the team completed analysis, experience design, scenario generation, prototyping, testing, and refinement. - AI changed not only productivity but also the order of product design: designers could validate more possibilities before committing to implementation. ## Practical Lessons - Build an imperfect prototype early instead of waiting for a complete design. - Study real user data before relying solely on guides or documentation. - When similar problems recur, identify a shared rule instead of repeatedly patching individual cases. The broader recommendation is to use AI as a fast experimentation tool. Its greatest value is not simply producing artifacts, but making it cheaper and faster to test which experiences and design principles actually work.

Read original(opens in new tab)
lineOriginal article

A month-long project in (opens in new tab)

This blog post explores how LY Corporation reduced a month-long development task to just five days by leveraging "vibe coding" with Generative AI tools like ChatGPT and Cursor. By shifting from traditional, rigid documentation to an iterative, demo-first approach, developers can rapidly validate multiple UI/UX solutions for complex problems like restaurant menu registration. The author concludes that AI's ability to handle frequent re-work makes it more efficient to "build fast and iterate" than to aim for perfection through long-form specifications. ### Strategic Shift to Rapid Prototyping * Traditional development cycles (spec → design → dev → fix) are often too slow to keep up with market trends due to heavy documentation and impact analysis. * The "vibe coding" approach prioritizes creating "working demos" over perfect specifications to find "good enough" answers through rapid feedback loops. * AI reduces the psychological and logistical burden of "starting over," allowing developers to refine the context and quality of outputs through repeated interaction without the friction of manual re-documentation. ### Defining Requirements and Solution Ideation * Initial requirements are kept minimal, focusing only on the core mission, top priorities, and essential data structures (e.g., product name, image, description) to avoid limiting AI creativity. * ChatGPT is used to generate a wide range of solution candidates, which are then filtered into five distinct approaches: Stepper Wizards, Live Previews with Quick Add, Template/Cloning, Chat Input, and OCR-based photo scanning. * This stage emphasizes volume and variety, using AI-generated pros and cons to establish selection criteria and identify potential UX bottlenecks early in the process. ### Detailed Design and Multi-Solution Wireframing * Each of the five chosen solutions is expanded into detailed screen flows and UI elements, such as progress bars, bottom sheets, and validation logic. * Prompt engineering is used iteratively; if an AI-generated result lacks a specific feature like "temporary storage" or "mandatory field validation," the prompt is adjusted to regenerate the design instantly. * The focus remains on defining the "what" (UI elements) and "how" (user flow) through textual descriptions before moving to actual coding. ### Implementation with Cursor and Flutter * Cursor is utilized to generate functional code based on the refined wireframes, using Flutter as the framework to ensure rapid cross-platform development for both iOS and Android. * The development follows a "skeleton-first" approach: first creating a main navigation hub with five entry points, then populating each individual solution module one by one. * Technical architecture decisions, such as using Riverpod for state management or SQLite for data storage, are layered onto the demo post-hoc, reversing the traditional "stack-first" development order to prioritize functional validation. ### Recommendation To maximize efficiency, developers should treat AI as a partner for high-speed iteration rather than a one-shot tool. By focusing on creating functional demos quickly and refining them through direct feedback, teams can bypass the bottlenecks of traditional software requirements and deliver user-centric products in a fraction of the time.

figma2 min readCurated summary

Issue No.12: New Roles, New Rules | Figma Blog

Figma’s “New roles, new rules” highlights how AI and faster iteration are blurring traditional boundaries between product roles. Product managers, designers, and developers are increasingly working across disciplines, using prototypes and shared principles to collaborate directly. The issue argues that effective teams are replacing rigid handoffs with experimentation, co-creation, and better systems for guiding AI. ## Shifting Roles - Research found that: - 64% of product builders identify with two or more roles. - 56% of non-designers perform design-related work. - Faster development cycles and AI tools are enabling people to contribute further outside their formal specialties. - As responsibilities expand, teams are also reconsidering how they manage time, ownership, and collaboration. ## Prototyping to Create Shared Understanding - Figma product designer Natasha Tenggoro struggled to explain how video playback should work in Figma Buzz. - Instead of relying on verbal descriptions, she used Figma Make to build prototypes herself. - The prototypes helped the team reach three “aha” moments and provided a clearer basis for discussion. - The example demonstrates how building interactive artifacts can replace lengthy explanations and accelerate alignment. ## Music-Inspired Design in Figma Draw - Figma Draw’s new scatter brushes were shaped by musical concepts such as tempo, texture, and volume. - Designers translated the character of genres including Honky-tonk, Screamo, Doo-wop, and Vaporwave into brush behavior. - The release adds 10 scatter brushes, giving designers more control over attributes such as gap, wiggle, and jitter. ## Duolingo’s Collaborative Method - Duolingo’s Math team is changing the traditional design-to-engineering handoff for its math games. - Designers and engineers work through co-creation, scrappy prototypes, and continuous experimentation. - Shared principles—including “show, don’t tell” and distinguishing between a v1 and an MVP—help the team move quickly while refining ideas. - Collaboration is treated as an ongoing product practice rather than a stage that ends when design is handed off. ## Broader Changes in Creative Work - Agencies and freelancers are also abandoning rigid client boundaries and involving clients throughout the creative process. - Design systems can improve AI-generated code by giving agents structured, relevant, and brand-consistent input. - MCP servers are presented as an important connection between design systems and AI-powered workflows, helping agents produce more useful output. Overall, the issue recommends embracing broader roles and replacing formal handoffs with shared prototypes, collaborative iteration, and well-structured design systems—especially as AI becomes more involved in product development.

Read original(opens in new tab)
figma2 min readCurated summary

The Duolingo Method: Collaboration As A Core Practice | Figma Blog

The Duolingo Math team treats collaboration as a continuous practice rather than a one-time handoff from design to engineering. Designers, engineers, and product managers co-create ideas, validate them through rapid prototypes, and refine features together. This approach helps the team make better decisions quickly while building entirely new learning experiences. ## Ideating Together - The Math team develops new lessons and games without established templates or patterns to follow. - Designers, engineers, and product managers begin projects together in a shared FigJam file. - After agreeing on a direction, designers create detailed Figma mockups, including interactions and motion. - Engineers participate early by evaluating technical complexity and commenting on implementation challenges. - Jira is connected directly to Figma, reducing context switching during development. ## Experimenting Through Rapid Prototyping - Engineers quickly build initial prototypes using components from Duolingo’s design system. - Designers and engineers share Figma files, working prototypes, questions, and feedback in Slack. - The team repeats a “prototype, test, tweak” cycle for each feature. - Duolingo’s “show don’t tell” principle encourages building and experiencing ideas instead of debating them abstractly. - Prototypes reveal how an interaction actually feels, helping the team test assumptions and make decisions before investing in a polished implementation. ## Polishing and Shipping Together - Continuous collaboration allows the team to make decisions and polish features during development. - The team may simplify animations or remove nonessential mechanics to ship faster. - When exploring educational games, Duolingo first created a batch of simple prototypes instead of building two fully developed games. - The team tested seven different prototypes to learn what resonated with users and prioritized features based on those findings. The Duolingo method replaces rigid handoffs with shared ownership, frequent communication, and working software. For exploratory products, teams should involve engineers early, prototype quickly, and use real user or team feedback to guide what gets polished and shipped.

Read original(opens in new tab)
figma2 min readCurated summary

When To Off-Road the Product Roadmap | Figma Blog

Product roadmaps provide direction, but they should not become rigid commitments. Figma’s experience building Dev Mode shows that rapidly changing technology and user feedback often require teams to abandon planned work, pivot, or restart entirely. The best products are shaped by these course corrections rather than harmed by them. ## Why Traditional Roadmaps Need Flexibility - AI tools, agents, and coding assistants are accelerating product development and raising user expectations. - Six-to-twelve-month plans can become outdated before execution is complete. - Prescriptive roadmaps risk keeping teams committed to assumptions that are no longer valid. - Modern product development requires more experimentation, iteration, and willingness to change direction. ## Dev Mode’s Pivot from Code Generation - Figma initially envisioned Dev Mode as a way to automate the conversion of designs into code. - User feedback revealed that many developers already had reusable code for their design systems. - Developers often needed help assembling existing components rather than generating new CSS or code. - Figma shifted its focus to **Code Connect**, which lets teams customize the code snippets shown in Dev Mode using their existing design-system code. - The change delayed launches and frustrated people who had invested months in the original plan, but it better addressed user needs. ## Course Correction as a Product Strength - Figma argues that great products are often defined by twists and pivots. - Loom and Slack are cited as examples of companies that began with very different product concepts before finding their current direction. - Figma avoids letting sunk costs dictate future decisions. - Teams may abandon or restart projects when research, internal testing, or beta feedback shows that the product is not working. ## Learning Through Real-World Feedback - After Dev Mode’s 2023 beta, user feedback became more important than following the original roadmap. - Figma released more than 200 fixes and new features in a single month. - Rapid iteration can be frustrating, but it helps teams move toward outcomes that genuinely work for users. - Valuable information can come from user research, internal dogfooding, rapid prototypes, and beta programs. Teams should treat roadmaps as adaptable guides rather than fixed contracts. When evidence challenges the plan, experiment quickly, revisit assumptions, and be willing to go “off-road” to build the product users actually need.

Read original(opens in new tab)