User Experience

165 posts

figma2 min readCurated summary

7 Questions We Had Going Into Config Leadership Collective | Figma Blog

The post captures lessons from Figma’s Config Leadership Collective, where more than 1,300 design, product, and engineering leaders discussed leading through AI-driven change. Its central argument is that successful leadership depends less on rigid processes or tool expertise and more on adaptability, human-centered design, judgment, collaborative teams, and supported experimentation. ## Leading Change Through Experimentation - Leaders are learning alongside their teams as AI rapidly changes established workflows. - Rather than adopting fixed processes, they emphasize adaptability and continuous adjustment. - Executives are experimenting directly with new tools, prototyping ideas, and sharing failures. - Teams need permission to explore, take risks, and remain enthusiastic even when experiments fail. ## Preserving Human-Centered Design Fundamentals - AI has changed methods, but core principles remain important: - Understand users and their workflows. - Continue prioritizing craft and quality. - Design for people rather than simply following new tools. - Leaders warn against “chasing the tool” at the expense of human needs and thoughtful design. ## Expertise Is Moving Toward Judgment - AI can increasingly handle execution and task completion. - Human expertise is becoming more valuable in higher-order activities such as: - Taste - Discernment - Contextual decision-making - Evaluating and editing AI-generated work - Expertise now means selecting the best answer for a particular situation, not simply knowing a single correct answer. ## Restructuring Teams for the AI Era - AI is blurring traditional boundaries between design, product, engineering, and other disciplines. - Airbnb is organizing work into small, self-contained pods that resemble startups. - These pods combine core product roles with perspectives such as data science or business expertise. - Strong editing judgment, diverse viewpoints, and constructive disagreement are treated as essential. - Effective teams should be scrappy, vocal, ambitious, and willing to challenge one another. ## Helping Teams Adopt New Tools - Adoption requires education, infrastructure, and psychological safety—not just instructions to use AI. - Expedia is building dedicated support and training to help employees become fluent with AI tools. - OpenAI recommends starting with small, low-risk tasks instead of imposing large automation programs from the top down. - A simple use case, such as summarizing a long Slack thread, can demonstrate value and encourage broader adoption. The practical recommendation is to lead AI adoption as an ongoing learning process: experiment personally, preserve user-centered standards, hire for judgment and curiosity, build cross-functional teams, and introduce tools through manageable, well-supported steps.

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

What Does the Future of Software Look Like? | Figma Blog

AI may reshape software around more human, contextual interactions rather than fixed menus and mechanical commands. The post argues that future interfaces could understand intent through voice, gesture, emotion, and situation, adapting their behavior to each person. Instead of forcing users to adapt to increasingly powerful systems, software could meet users where they are while encouraging focus, presence, and healthier technology habits. ## Ephemeral Tools - Controls appear only when users select an object and indicate what they want to do. - Contextual options replace persistent menus, panels, and modes. - A video editor, for example, might show timing, pacing, alternate cuts, and sound options around a selected clip. - This lets creators focus on decisions and intent rather than remembering how software is organized. ## Magic Marker - Users interact through a combination of voice, cursor movement, gestures, sound effects, and body language. - Someone could circle an object, drag it into position, and verbally request a change. - AI would interpret these signals together, making it feel more like collaborating with a teammate. - This reduces the need for precise prompt engineering or complex document references. ## Adaptive Presence - Intelligent systems adjust their communication style and level of assistance based on user behavior. - They might offer structured guidance when someone is confused, step back when help is unnecessary, or switch between text, voice, and visuals. - Software could change pacing, simplify language, and divide information into smaller steps. - This approach is especially valuable in healthcare and education, where differences in user readiness can have serious consequences. ## Empathetic Flows - Interfaces could infer emotional states from typing speed, stylus pressure, speech patterns, facial expressions, and repeated revisions. - A food app might reduce choices when someone appears overwhelmed. - A creative tool could become quiet when the user is concentrating, while a hotel app might stop promoting upgrades when the guest seems tired. - Rather than requiring users to explicitly state what they need, systems would respond to behavioral signals. ## Situational Cues - Sound, motion, pacing, progress indicators, and visual transitions can help users understand where they are in an experience. - Earlier digital products used cues such as dial-up sounds, progress bars, and “You’ve got mail” announcements to provide orientation. - Future interfaces should counteract the overstimulation caused by attention-driven notifications. - Persistent progress indicators, transition sounds, and consistent visual language could help users regulate their attention and nervous systems. ## Spatial Tuning - Users could control software through bodily movement instead of conventional tapping and clicking. - Examples include shaping music with hand movements, navigating augmented reality by changing body orientation, or adjusting design elements through gestures. - These interactions demand attention and presence, making them harder to rush or automate. - Technology becomes an experience that intentionally slows users down rather than continually rewarding speed. ## Mash-Ups - Future systems could combine any two inputs—files, objects, sounds, locations, or physical gestures—to create something new. - The system would synthesize the combined inputs while blending their structure, tone, and meaning. - Possible examples include merging a playlist with a city map or combining digital objects through touch or gestures. The overall recommendation is to design AI-powered software around human intent, context, emotion, and physical presence. The most successful future interfaces may be those that make technology feel less like a collection of controls and more like an adaptable, considerate collaborator.

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

7 Tips for Using Figma Make Credits More Efficiently | Figma Blog

Figma argues that efficient AI prototyping is less about writing longer prompts and more about setting up projects carefully, limiting changes, and knowing when to edit manually. The first prompt should establish a strong foundation, while follow-ups should describe precise deltas. For minor visual or code changes, direct editing is often faster and cheaper than another AI request. ## Build a Strong First Prompt - Treat the initial prompt as a complete project brief. - Include: - The project goal and context - Key elements and behaviors - Constraints and exclusions - A clear definition of what “done” means - Use follow-up prompts as deltas that explain: - What should change - How it should change - What should remain unchanged - For larger projects, work in stages: - Establish the structure first - Add logic and behaviors - Refine content and visual polish afterward - Keep follow-ups tightly scoped. Combine requests only when they affect the same component or logic. - Specific instructions such as “Update the calendar component” or “Edit `tokens.ts`” are more efficient than vague requests like “Redo it.” ## Prefer Manual Edits for Small Changes - Use Figma Make’s **Edit tool** for minor adjustments such as: - Changing spacing - Removing an element - Adjusting text - Direct edits avoid spending credits on changes that do not require a new design solution. - Use **Go to source** when the relevant value is dynamic or unavailable in the preview. - Press **⌘F** to search the code for a specific tag or data source. - Start with `App.tsx`, then inspect other `.tsx` files in the component folder if necessary. - Direct source editing is particularly useful for repeated components or content populated from lists.

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

What Matters When Anyone Can Build | Figma Blog

AI has made building products faster and more accessible, but speed alone no longer creates an advantage. When anyone can ship, the differentiators become choosing the right direction and shaping the result with care. Figma’s Yuhki Yamashita argues that strong teams combine rapid exploration, deliberate decision-making, and relentless craft. ## Choosing What’s Worth Building - The abundance of possible ideas makes it easy to commit prematurely to the first promising concept. - Iterating deeply on one idea can become “local hill-climbing,” refining a path without questioning whether it is the right one. - AI tools can worsen tunnel vision by accelerating a chosen direction without challenging its assumptions. - Traditional strategic methods, such as MECE option mapping, encourage breadth but can remain too abstract to create conviction. - A stronger approach combines breadth and depth: - Explore several distinct directions in parallel. - Turn each direction into a realistic, end-to-end interactive prototype. - Compare actual user experiences rather than abstract diagrams or wireframes. - Invite teammates and AI agents to react and build on ideas collectively. - This creates a more collaborative, parallel way of working instead of a siloed, sequential process. ## Making the Product Yours - AI-generated products tend to converge on familiar patterns and statistically likely solutions. - “Good enough” becomes easy to produce and easy to accept, creating interchangeable products. - The main danger is passivity: accepting the first convincing result because it looks polished. - Craft requires active judgment: - Question every decision. - Revisit and refine multiple times. - Remove unnecessary elements. - Push beyond the first few acceptable versions. - Develop a distinct point of view. - As AI raises the baseline quality of products, differentiation will come less from tools or execution speed and more from the care and intention behind the final result. ## What Matters Now - The essential capabilities are **speed, direction, and craft**. - The best teams do not treat these as competing priorities: - They move quickly. - They choose deliberately. - They refine relentlessly. - In a world where nearly anything can be built, the lasting advantage lies in deciding what deserves to exist and shaping it into something distinctive.

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

It Almost Ended Up Ugly - The Making of Toss Front 2

Toss redesigned its Front 2 payment terminal by addressing real-world usability problems rather than settling for technically workable solutions. The redesign moved NFC to the front, made the card reader field-replaceable, and reworked the internal structure to simplify removal. The result was a smaller, cleaner device that improved both customer experience and repairability. ## Moving NFC to the Front - The first-generation terminal placed NFC on the right side because other components interfered with the signal. - This was inconvenient in narrow retail spaces, where users had little room to tap cards or phones. - Several alternatives were tested: - Moving the card reader upward made card insertion awkward and strained users’ wrists. - Enlarging the top made the vertically oriented terminal look excessively long and displaced the camera, complicating barcode and face-payment use. - Placing NFC around the camera caused interference, producing camera shake and reducing recognition accuracy. - The team reframed the problem by asking whether the display’s metal backing could be replaced. - A customized plastic backing allowed NFC signals to pass through while reinforced glass preserved the display’s rigidity. - Despite higher manufacturing complexity and cost, the design was successfully mass-produced, enabling reliable front-facing NFC without sacrificing appearance. ## Designing a Replaceable Card Reader - The first-generation card reader was integrated into the main body, so failures required repairing or replacing the entire terminal. - Repairs took more than a week on average, forcing stores to use backup devices and distributors to maintain extra inventory. - Front 2 introduced a docked, replaceable card reader designed for easy on-site replacement. - A USB-C connector was selected because users already understand how to connect and disconnect it. - The connector provided stable attachment without exposing additional brackets or mechanisms, preserving the product’s clean appearance. ## Making Removal Simple - Once the reader used USB-C, the team needed a way to remove it without adding buttons, levers, or protruding parts. - The simplest approach was to insert the reader from the front and push it out from behind, but existing power and network connections blocked the necessary space. - Instead of adding another mechanism, the team redesigned the internal layout from scratch. - The circuit board and connectors were tilted toward the top of the device, requiring redesigned and inverted cable components. - This created enough room to remove the reader without tools. - The revised layout also made the cables easier to see and connect. ## Results of Front 2 - Front-facing NFC made payments more natural on crowded counters. - The USB-C dock reduced the difficulty of replacing a failed card reader. - The terminal became smaller while retaining its visual simplicity and design quality. - Front 2 surpassed the first generation’s sales immediately after launch, while previous customer complaints shifted toward positive feedback. ## Building Quality Through Persistent Questions - The article argues that product quality comes from repeatedly challenging an acceptable technical solution. - The team focused on finding answers that were right for users and the overall product experience, not merely answers that functioned. - For similar design problems, the recommended questions are: - Can everyone use the design easily, including in edge cases? - What is the fundamental problem? - Is the current solution truly the best one? - If not, can the problem and solution direction be redefined? The practical lesson is to keep revisiting the problem until the solution is not only feasible, but genuinely appropriate for users.

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

Layers of your time : Celebrating the time spent with Toss

The article argues that effective internal branding is not about making attractive company merchandise, but about designing meaningful experiences around employees’ time and contributions. Through an eight-month redesign of Toss’s work-anniversary gift, the designer created a layered light that visually represents accumulated years, protected quality despite production delays, and carefully designed the delivery experience. The project concludes that strong internal branding requires a clear reason, end-to-end experience design, and unwavering standards. ## From Merchandise to a Celebration of Time - Toss celebrates employees’ work anniversaries with annual gifts such as medals, wine, and cubes. - Over time, some employees began giving the gifts away, suggesting they had become clutter rather than meaningful keepsakes. - The redesign aimed to: - Sincerely celebrate each employee’s time at the company. - Show appreciation for the six-month gap while the gift was being redesigned. ## Three Criteria for the New Gift The new product had to: - Avoid being immediately stored away in a drawer. - Physically show the accumulation of time. - Remain beautiful whether celebrating one year or ten years. A layered lamp was chosen because employees could add one disk for each anniversary. As the disks accumulated, the layers of light became deeper, making the passage of time visible through the object’s structure. ## Hardware Development and Quality Control - The designer had no previous hardware or lighting-production experience. - The team repeatedly tested: - Disk thickness, including differences as small as 0.5 mm. - The spacing between the lamp body and disks. - Light intensity as more disks were added. - The product was divided into two versions: - White for years 1–10. - Black from year 11 onward, symbolizing the beginning of a new period. - Dozens of defects appeared during final factory inspection. - Rather than compromise quality to meet the schedule, distribution was delayed. - Approximately 5,000 lamps were individually inspected and improved. ## Giving the Product a Warm Voice - The lamp was named **Layered Lighting**. - The phrase **“Layers of your time at toss”** was engraved on the lamp and packaging. - The communication emphasized remembrance and celebration rather than corporate motivation. - Serif typography, carefully matched packaging, and handwritten name cards created a warmer, more personal experience. ## Designing the Moment of Delivery - Instead of asking employees to pick up their gifts, the team placed them directly at employees’ desks. - The redesigned process gave employees the correct number of disks for their accumulated tenure. - The intended experience was: - Discovering the gift on a Monday morning. - Opening the box and reacting with surprise. - Taking photos and sharing the moment with colleagues. - Over one weekend, the team placed gifts at 2,500 desks among approximately 3,900 employees. - The operation took 26 hours. - Employee photos and reactions spread across Slack and Instagram, including one memorable comment: “I now have a reason to stay another year.” ## Principles of Good Internal Branding - **Start with the reason:** Every object or graphic should clearly communicate why it exists. - **Design the experience, not just the object:** The interaction begins before the product is opened and includes how it is received and shared. - **Protect the standard until the end:** Internal projects are easy to compromise because their results may not be immediately visible, making a clear standard essential. Good internal branding helps employees feel that they belong to a good team. That sense of belonging can strengthen engagement and ultimately improve the quality of the work they create.

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

Discord Update: March 24, 2026 Changelog

Discord’s March 24, 2026 changelog focuses on making desktop gaming and navigation faster and more convenient. New features include improved screen sharing, easier voice invitations, expanded game profiles, and gifting for Marvel Rivals items. Discord also introduced browser-style navigation controls, faster performance, role-member lists, and refreshed settings pages. ### Improvements for Game Nights - Screen shares can now be zoomed and panned with a mouse wheel or trackpad. - Single-window Go Live streams should start faster. - A new **Invite to Voice** option recommends server members and nearby friends for voice chats. - The Game Stats Profile Widget now supports **Wuthering Waves**, displaying information such as achievements and favorite Resonators. - Users can wishlist and gift Marvel Rivals items through the game’s Discord server and Game Shop. ### Faster Desktop Navigation - Behind-the-scenes performance improvements reduce lag when moving around the desktop app. - New **Back** and **Forward** buttons work similarly to browser navigation, including support for compatible mouse buttons. - Clicking an `@Role` mention now shows up to 100 users assigned to that role. - The Desktop Settings redesign continues with updated Notifications, Voice and Video, Clips, and Streamer Mode pages. ### Additional Developer News - Discord also highlighted new opportunities for game developers announced at this year’s Game Developers Conference, directing developers to a separate blog post for details. Overall, the update is aimed at smoother desktop performance, easier navigation, and more features for connecting around games.

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

Integration of LINE App’s Multi-party Chat Features

LINE is consolidating its two multi-person chat types—temporary “Rooms” and long-term “Groups”—into a single Group Chat model. The change aims to simplify the user experience, make all chat features available everywhere, and reduce duplicated server and client resources. A gradual migration strategy is being used to avoid disruption. ## Two Original Chat Models - **Rooms** were designed for temporary conversations: - No room name was required. - Invited friends joined immediately without approval. - Features such as albums and notes were unavailable. - **Groups** were designed for long-term communities: - They had names and supported features such as group albums and notes. - Invitees had to accept or reject invitations before joining. - Users often created Rooms without realizing their limitations, then created a new Group later when they needed additional features. ## Reasons for Unification - Users found the distinction between Rooms and Groups difficult to understand. - Existing conversations could not be converted from Rooms into Groups, forcing users to abandon their conversation history. - Users frequently created multiple chats with the same members, causing: - Cluttered conversation lists. - Unnecessary data accumulation on servers. - Increased client and server resource usage. - The unified model standardizes behavior and features while retaining flexibility in how invitations work. ## Migrating Groups to Group Chats - LINE introduced new Group Chat APIs and used **dual reads** to maintain compatibility with existing Group APIs and storage. - The migration proceeded gradually: 1. The new API initially read Group data through a routing layer. 2. The number of Group Chats was progressively increased. 3. Eventually, only Group Chats were created. - Batch processing migrated all existing Group data. - After migration, LINE stopped dual reads and relied exclusively on the Group Chat model. ## Differences Between Rooms and Groups ### Invitation Mechanisms - Groups required invitees to explicitly accept or reject an invitation. - Rooms added people immediately when they were invited. - The unified creation flow lets users choose whether invitees should join immediately or confirm participation first. ### Feature Availability - Rooms lacked many Group features because they were intended to be temporary. - The new model is based on the Group architecture, so all newly created conversations support the full feature set, including future features. ## Improving Conversation Discovery - Users often created a new chat with the same participants instead of finding an older, inactive conversation in a long chat list. - The new creation workflow displays a hint when an equivalent existing conversation is found. - Users can then return to the existing conversation, reducing duplicate rooms and improving navigation. ## Migration Plans for Existing Rooms - Conversations created in current LINE versions are already Group Chats. - Groups created with older app versions are being converted server-side. - The remaining objective is to migrate existing Rooms so their participants can use the complete set of Group Chat features. The project is a long-term effort designed to minimize disruption while improving consistency and efficiency. Duplicate conversations with identical participants fell from 15% for Rooms to 0.78% for invitation-free Group Chats, demonstrating the practical impact of the consolidation.

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

Vishal Kapoor’s 10 Rules for Building Honest Products with AI | Figma Blog

AI product development is ultimately a trust challenge, not merely a technical one. Vishal Kapoor argues that AI should accelerate exploration and execution without replacing human judgment, empathy, or accountability. His approach centers on building products that remain transparent, secure, emotionally aware, and honest—especially in sensitive areas such as personal finance. ## Start with First-Principles Thinking - Break complex problems into their fundamental components before reaching for an AI solution. - AI can accelerate ideation and iteration, but it cannot replace human intuition, taste, or a distinctive product perspective. - Question basic assumptions to uncover better alternatives. For example, Affirm challenges why customers receive three payment-plan options rather than one, five, or a customizable plan. - Thoughtful disagreement among people remains essential for generating meaningful insights; AI is best used to explore possibilities more quickly. ## Stay Close to Human Emotions - Product teams should regularly observe customers, conduct UX research, read app-store reviews, monitor social media, and speak directly with users. - Metrics and dashboards identify patterns, but they do not fully explain the emotions behind customer behavior. - Financial products especially require sensitivity to anxiety, frustration, trust, and relief—not just transactional outcomes. - Affirm uses an internal AI tool called Pluto to investigate recent customer disappointments, while still relying on human observation and empathy to interpret those experiences. ## Treat AI as a Teammate - AI is neither a guaranteed productivity multiplier nor an inevitable replacement for employees; it is another participant in a collaborative product-development process. - Tools such as Figma Make help teams convert customer insights into prototypes and test ideas faster. - AI can audit large numbers of screens and interaction patterns across web, mobile, and desktop experiences, identifying outdated or inconsistent designs. - Moving repetitive auditing and prototyping work from engineers to designers and product managers increases iteration speed and creates more room for creativity. ## Test the Edge Cases - Trustworthy products cannot be designed only around the happy path. - Teams should deliberately explore unusual inputs, failure modes, and unexpected customer situations rather than assuming normal usage. - The article begins this rule by emphasizing that authentic product quality depends on examining the difficult and overlooked scenarios where users are most likely to encounter confusion or harm. The overall recommendation is to use AI aggressively for exploration, prototyping, and repetitive analysis—but keep humans responsible for defining the problem, understanding customers, challenging assumptions, and ensuring the final product is honest.

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

Foreign User Research: Why

Toss investigated why many foreign users struggle to use Korea’s financial services, even after signing up. Research showed that confusing identity verification, name formatting, and address entry often prevented users from completing registration, forcing them to visit bank branches for routine tasks. By redesigning the name-entry and authentication process, Toss increased the foreign-user verification completion rate by about 15% and eliminated the gap with Korean users. ## Investigating Foreign Users’ Financial Experiences - Foreigners often perceive Korea’s banking system as complex and difficult to navigate without assistance. - Toss wanted to make its “finance for everyone” vision include foreign residents. - The team suspected that several verification steps caused users to abandon registration: - Preparing a foreigner registration card - Mismatches in telecom-provider information - One-won account verification - Difficulties entering names and personal details ## Field Research with Blue-Collar Workers - The team focused especially on blue-collar foreign workers, whose financial habits were less understood than those of students or white-collar workers. - Initial attempts to arrange factory interviews failed, so researchers visited the Siheung Industrial Complex during lunch hours. - Street interviews were difficult because formal clothing, identification badges, and consent documents made passersby cautious. - A more casual approach helped the team conduct several interviews. - Researchers later visited a multicultural center in Pocheon, where they met foreign residents from different countries and with varying lengths of stay. ## Why Foreign Users Rely on Bank Branches - Mobile banking often felt like a complicated system that users could access only after repeated trial and error. - Many users abandoned the process before reaching any financial-service features. ### Name Entry and Identity Verification - Users were unsure how to format their names: - Where to place spaces - Whether to enter family names first - Whether to match their foreigner registration card, bank account, or telecom records - A name such as “BRAD PITT” might need to be entered in an unexpected format, such as “BR AD.” - Some users repeatedly failed verification because their name format differed across institutions. - One participant had never successfully completed online identity verification under their own name in eight years. - Error messages rarely explained the actual cause of failure. - After five or more failed attempts, users could no longer continue. ### Address Entry - Entering Korean addresses was another major barrier, especially for users unfamiliar with typing Korean. - Users tried postal codes, English addresses, and lot numbers, then searched through address lists. - Search results often displayed too many options, making the correct address difficult to locate. - Repeated unsuccessful searches led some users to abandon registration and visit an offline branch instead. ## Improving the Authentication Funnel - Research identified name entry and authentication as the primary causes of foreign-user drop-off. - Toss’s product team redesigned the name-input structure and authentication flow. - The changes increased the foreign-user authentication completion rate by approximately 15%. - The completion-rate gap between Korean and foreign users was ultimately eliminated. Toss’s research demonstrates that inclusive financial services require understanding users who are often overlooked. Removing small but fundamental barriers in registration and authentication can make digital banking accessible to a much broader population.

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

3 Ways Teams Are Building Conviction Faster With Figma Make | Figma Blog

Product teams are using Figma Make to turn abstract product ideas into interactive prototypes earlier in the process. By making concepts tangible, PMs can align designers and engineers, test assumptions, collect feedback, and build conviction before significant development begins. The article highlights examples from ServiceNow, Ticketmaster, and Affirm. ## Prototyping Instead of Relying Only on PRDs - Product managers traditionally translate customer needs, design goals, and engineering constraints into shared decisions. - Figma Make lets them create prototypes that demonstrate both a product’s appearance and behavior. - Interactive prototypes provide more useful early feedback than static mockups or abstract explanations. - Teams can identify problems, test ideas with users, and adjust direction before implementation progresses too far. - Earlier visibility helps teams make better-informed decisions and build products that more closely meet user needs. ## Bringing Complex Product Thinking Into Shared Focus - At ServiceNow, Product Director Ram Devanathan works with a design team serving multiple product groups, making dedicated design support difficult to obtain. - He needed to redesign a configuration page containing 15–20 settings, including technical options affecting incident prioritization and system load. - The initial mockup was functional but did not fully communicate the desired hierarchy, guidance, or tone. - Ram used Figma Make to transform the mockup into a clearer prototype: - Settings were grouped logically. - Simpler options appeared first. - Tooltips explained individual settings. - A warning clarified that changes required restarting the service. - The prototype gave Ram and the designer a shared, concrete representation of the intended experience. - Figma Make templates can also embed design systems and UX patterns, allowing PMs to iterate consistently without requiring designers for every early exploration. - Ram found that showing the idea directly was much more effective than describing it abstractly, helping the team reach agreement faster. ## Validating Features Before Building - The article next introduces Ticketmaster’s use of Figma Make for validating new features before development. - Ticketmaster applies prototypes to situations involving high-demand concert ticket purchases and internal dashboards for monitoring sales and troubleshooting issues. - The provided excerpt ends before explaining the specific feature-validation process or the third approach involving Affirm. Figma Make is presented less as a replacement for design or engineering and more as an early collaboration and validation tool. Product teams can use it to communicate complex behavior, explore alternatives, and secure alignment before committing substantial resources.

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

The most-seen UI on the Internet? Redesigning Turnstile and Challenge Pages

Cloudflare redesigned Turnstile and Challenge Pages because these security interfaces are encountered billions of times daily and increasingly interrupt users as bot attacks grow. The redesign focused on reducing frustration through consistent information architecture, clearer language, better accessibility, and a deeper understanding of user journeys. The central conclusion is that security products must be designed not only to stop bots, but also to provide a humane, understandable experience for people at global scale. ## A Security Interface Seen Everywhere - Turnstile and Challenge Pages are served approximately **7.67 billion times per day**. - Their enormous reach creates a responsibility to support users across: - Different languages and cultures - A wide range of technical abilities - Different ages and accessibility needs - Varying devices, network conditions, and environments - As bot attacks increase, users are encountering verification challenges more frequently: - **2023:** 2.14 billion daily checks - **2024:** 3 billion - **2025:** 5.35 billion - This represented an average year-over-year increase of **58.1%**, making usability increasingly important. ## Auditing the Existing Experience Cloudflare reviewed every state, error message, and interaction in both products. - The audit found no consistent approach to error handling. - Some messages were overly technical and verbose, such as explanations involving incorrect device clocks or cached challenge pages. - Other messages were too vague, such as simply saying “Timed out.” - Layouts, visual hierarchy, and tone varied substantially between states. - User feedback mechanisms used ambiguous options like: - “The widget sometimes fails” - “The widget fails all the time” - These choices required frustrated users to interpret unclear distinctions and produced less useful feedback. - Challenge Pages also contained confusing states, technical jargon, and insufficient guidance about what users should do next. ## Mapping the Complete User Journey The team mapped both successful and unsuccessful paths through the verification experience. - The process covered initial encounters, errors, retries, and escalating frustration. - Designers collaborated with engineers who understood technical edge cases and product specialists who tracked user sentiment. - The team emphasized that technical sophistication does not automatically produce clear communication. - Interfaces needed to work for people with different: - Physical and mental capabilities - Cultural backgrounds - Ages - Levels of technical knowledge - At Cloudflare’s scale, unusual cases are common enough that they cannot be treated as negligible edge cases. ## Establishing a Unified Information Architecture Cloudflare applied the principle from *Don’t Make Me Think*: every moment users spend interpreting an interface creates friction, especially when they are already frustrated. - Previously, Turnstile and Challenge Pages placed information differently across states. - Users had to relearn where to find explanations, actions, and documentation links. - The redesign introduced one shared structure for both products. - Each experience would use: - The same visual hierarchy - Consistent placement for explanatory text - Consistent locations for actions - Consistent placement of documentation links - This approach limited some creative design options, but the team viewed those constraints as useful for improving clarity and consistency. Cloudflare’s redesign treats verification as a human-facing product rather than merely a security mechanism. A consistent structure, clearer messaging, and attention to accessibility can reduce the unnecessary frustration caused by challenges while preserving their protective purpose.

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

Workflow Lab: AI Image Tooling and Interactive Prototyping in Figma | Figma Blog

Figma’s Workflow Lab demonstrates how teams can combine AI image editing, vector tools, and interactive prototyping to test conversion-focused product experiences quickly. For Trivet, a recipe app, the goal is to increase referral-program signups without disrupting the user journey. The team explores three approaches—an immersive modal, an integrated feed card, and a full-screen overlay—each using different visual strategies to balance attention and usability. ## The Signup Problem - Trivet’s referral banner is generating fewer clicks and signups than expected. - The team must determine whether the banner is: - Too subtle to attract attention - Too disruptive to support a smooth experience - The sprint tests three levels of visibility: - A modal - An in-feed card - A full-screen overlay - The team evaluates not only layout, but also tone, visual tension, and how attention affects conversion. ## Direction One: Use Visual Treatment to Spark Curiosity - A modal creates a more immersive interruption than an in-feed card. - Photography is used to support messaging about “unlocking” exclusive recipes. - Recipes are partially blurred so they appear visible but inaccessible. - Figma’s glass effect, refraction, and progressive blur create a frosted, layered surface. - The visual treatment makes the reward feel tangible while justifying the interruption. ## Direction Two: Add Personality to the Interface - The referral message is integrated directly into the feed to feel more supportive and less disruptive. - A hand-drawn cake illustration replaces photography because it requires less visual space. - Figma’s Remove background and Vectorize tools turn the raster sketch into an editable vector asset. - The designer: - Adjusts colors using brand variables found through inline fill search - Uses the Cut tool to refine edges while preserving paths - Rotates anchor points with bounding boxes to polish details - The result is a reusable, scalable illustration that adds texture and approachability to the card. ## Direction Three: Create a Full-Screen Overlay - A full-screen experience maximizes visibility and clearly signals priority. - The larger format requires photography strong enough to carry the entire interaction. - Instead of replacing an imperfect image, the designer adapts it to the layout. - The workflow uses precise image-editing tools such as Erase object to remove distracting elements, including a spoon. - This approach prioritizes visual impact, though it introduces the greatest interruption to the user experience. ## From Design Exploration to Prototyping - The workflow connects Figma Design, AI image tools, FigJam, and Figma Make. - Designers can move from visual experimentation to interactive prototypes without waiting for production assets. - A broader team—including product, content, growth, and engineering—can compare the concepts and evaluate which level of attention best supports signups. The practical recommendation is to test visual intensity against user experience rather than assuming maximum visibility will perform best. Figma’s integrated image and prototyping tools make it faster to create and compare multiple directions before committing to implementation.

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

Improving the iOS WebView Input Experience for

iOS WebViews can shift the entire page upward when an input receives focus, disrupting users as the virtual keyboard appears. The post describes four progressively refined approaches, ultimately using a single input whose opacity is temporarily set to zero before focus. This avoids iOS’s automatic scroll behavior, though it remains a fragile, version-dependent workaround best reserved for input-critical screens. ## Understanding the iOS WebView Problem - iOS uses two viewport concepts: - **Layout Viewport:** The CSS layout area, which does not shrink when the keyboard opens. - **Visual Viewport:** The area visible to the user, which becomes smaller. - Because the focused input must remain visible above the keyboard, iOS shifts the page upward. - The resulting movement can push important content off-screen, and WebView code cannot fully control this behavior. ## Attempt 1: Restore the Scroll Position - The first approach listened for `visualViewport` `resize` and `scroll` events. - It reduced the wrapper’s height by the keyboard height and called `window.scrollTo(0, 0)`. - This failed because iOS moved the page before the event handler could restore it. - Users saw flickering and shaking as multiple resize events triggered repeated corrections. ## Attempt 2: Follow `offsetTop` - Instead of undoing the movement, the implementation followed it. - `visualViewport.offsetTop` was used to adjust a fixed wrapper’s `top` position. - A short delay was required because iOS updates `offsetTop` asynchronously. - This reduced the visible jump but still caused subtle shaking while the keyboard animated. - Rapidly switching inputs or opening and closing the keyboard made the instability more noticeable. ## Attempt 3: Fake and Real Input Swap - This approach prevented iOS from scrolling to the focused input by focusing a real input positioned off-screen. - A visible, read-only “fake” input received the user’s tap, then focused the hidden real input. - Once the keyboard appeared, the two inputs were swapped so the real input became visible. - The page no longer experienced major upward movement. - However, two inputs required synchronization of values, selection, placeholders, textarea sizing, mentions, and emojis. - Swap timing, keyboard detection, and native bridge dependencies made the implementation increasingly complex. ## Attempt 4: Temporarily Hide the Input with Opacity - The final approach kept only one input. - On `touchstart`, the input’s `opacity` was set to `0` before calling `focus()`. - iOS appeared not to perform its automatic scroll-into-view behavior for an invisible input. - After detecting that the keyboard had opened—using the visual viewport and a keyboard-height threshold—the input’s opacity was restored to `1`. - This preserved the input’s state and avoided synchronization problems. - The technique is still a hack: behavior may change across iOS versions, and it can cause minor timing issues. The recommended compromise is to apply the opacity workaround selectively on pages where writing is central to the experience, rather than across the entire WebView application. It prioritizes uninterrupted user interaction despite the lack of a clean, standard iOS API.

Read original(opens in new tab)
discordOriginal article

Your Discord Checkpoint is Rolling Out! Celebrate What You Did in 2025 (opens in new tab)

Discord has introduced "Discord Checkpoint," the platform’s first comprehensive year-end recap designed to provide users with a personalized summary of their 2025 activity. By analyzing data such as message counts and voice call duration, the feature offers a nostalgic overview of a user's digital footprint and social interactions over the past year. This initiative marks a shift toward data-driven user engagement, rewarding active community members with exclusive digital collectibles based on their usage patterns. **Accessing the Activity Recap** * The feature is rolling out globally over several days and requires users to be on the latest version of the Discord application. * Desktop users can find their recap by clicking the flag icon located in the top-right corner of the interface. * Mobile users can access the experience via a Checkpoint banner located within the "You" tab at the bottom-right of the screen. * Visibility is contingent upon having "Use data to personalize my Discord experience" enabled in privacy settings and meeting a minimum activity threshold. **Key Metrics and Personal Statistics** * The recap calculates the total volume of messages sent and the cumulative time spent in voice channels throughout the year. * Users receive a breakdown of their most-frequented servers and their most-used emojis. * The system identifies a "top contact," highlighting the individual user with whom the account owner interacted the most. **Personalized Rewards and Social Integration** * Upon completion of the recap, users are assigned one of ten distinct "Checkpoint cards" that categorize their year. * Each card unlocks a corresponding Avatar Decoration that remains available to use until January 15, 2026. * The feature includes a direct sharing toggle that allows users to post a summary card into text channels, though the data remains private by default if the user chooses not to share. To ensure you can view your 2025 Checkpoint before it expires, confirm that your privacy settings allow for data personalization and that your client is fully updated. If the Checkpoint does not appear, you may need to increase your platform activity for future recaps or check the Help Center for specific troubleshooting regarding data permissions.