Usability Testing

8 posts

tossOriginal article

The era when everyone does research (opens in new tab)

In an era where AI moderators and non-researchers handle the bulk of data collection, the role of the UX researcher has shifted from a technical specialist to a strategic guide. The core value of the researcher now lies in "UX Leadership"—the ability to frame problems, align team perspectives, and define the fundamental identity of a product. By bridging the gap between business goals and user needs, researchers ensure that products solve real problems rather than just chasing metrics or technical feasibility. ### Setting the Framework in the Idea Phase When starting a new project, a researcher’s primary task is to establish the "boundaries of the puzzle" by shifting the team’s focus from business impact to user value. * **Case - AI Signal:** For a service that interprets stock market events using AI, the team initially focused on business metrics like retention and news consumption. * **Avoiding "Metric Traps":** A researcher intervenes to prevent fatigue-inducing UX (e.g., excessive notifications to boost CTR) by defining the "North Star" as the specific problem the user is trying to solve. * **The Checklist:** Once the user problem and value are defined, they serve as a persistent checklist for every design iteration and action item. ### Aligning Team Direction for Product Improvements When a product already exists but needs improvement, different team members often have scattered, subjective opinions on what to fix. The researcher structures these thoughts into a cohesive direction. * **Case - Stock Market Calendar:** While the team suggested UI changes like "it doesn't look like a calendar," the researcher refocused the effort on the user's ultimate goal: making better investment decisions. * **Defining Success Criteria:** The team agreed on a "Good Usage" standard based on three stages: Awareness (recognizing issues) → Understanding (why it matters) → Preparation (adjusting investment plans). * **Identifying Obstacles:** By identifying specific friction points—such as the lack of information hierarchy or the difficulty of interpreting complex indicators—the researcher moves the project from "simple UI cleanup" to "essential tool development." ### Redefining Product Identity During Stagnation When a product's growth stalls, the issue often isn't a specific UI bug but a fundamental mismatch between the product's identity and its environment. * **Case - Toss Securities PC:** Despite being functional, the PC version struggled because it initially tried to copy the "mobile simplicity" of the app. * **Contextual Analysis:** Research revealed that while mobile users value speed and portability, PC users require an environment for deep analysis, multi-window comparisons, and deliberate decision-making. * **Consensus through Synthesis:** The researcher integrates data, user interviews, and market trends into workshops to help the team decide where the product should "live" in the market. This process creates team-wide alignment on a new strategic direction rather than just fixing features. The modern UX researcher must move beyond "crafting the tool" (interviewing and data gathering) and toward "UX Leadership." True expertise involves maintaining a broad view of the industry and product ecosystem, structuring team discussions to reach a consensus, and ensuring that every product decision is rooted in a clear understanding of the user's context and goals.

figma2 min readCurated summary

A look back at Config 2022 | Figma Blog

Config 2022 brought together more than 100 speakers for 24 hours of talks on ambitious, urgent design work. The event covered topics ranging from Web3 and research strategy to design systems and emerging technologies. A central message was that designers can create meaningful local or global change by designing more inclusively and acting with urgency. ## Designing for Different Digital Experiences - Yuan Qing Lim discussed designing for Chinese users who moved directly from limited PC use to widespread mobile internet. - Three themes shaped the discussion: - **“More is More”**: Chinese digital products often embrace rich, maximalist experiences. - **Super apps**: Users expect broad functionality within unified platforms. - **Community**: Digital experiences should reflect strong social and communal behaviors. - The goal is to better serve China’s roughly 1 billion internet users by accounting for local expectations rather than applying Western design assumptions. ## Designing for New Internet Users - Rahul Goradia focused on people who are new to the internet, a group often overlooked by mainstream UX practices. - This population is especially significant in India, where internet access is expected to grow rapidly. - Designers should use usability testing to make e-commerce approachable for newcomers. - Products must account for changing behaviors, particularly as users adapt to a post-pandemic digital environment. ## A Broad Program of Design Topics - Other Config 2022 sessions explored: - Decentralizing design through Web3 - Turning research findings into strategy and product development - Design systems and their limitations - UX writing and product copy - Design tokens and collaboration - Dark-mode implementation - Multi-platform design systems - Designing super apps for Southeast Asia’s cultural diversity The event’s practical takeaway is to design for a wider range of users, challenge assumptions about “standard” digital behavior, and use research and collaboration to make products more accessible and effective.

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

Bridging design and code with Variants | Figma Blog

Figma’s Variants feature was created to bring component organization closer to how developers structure reusable code. It combines related component versions into component sets, supports multiple property dimensions, and simplifies switching between variations. The feature’s design was shaped through user research and usability testing, which refined both its interface and its name. ## Bridging Design and Code - Designers need freedom to iterate, while developers prioritize rigor, reuse, and scalability. - Figma identified component management as a major opportunity to connect these workflows. - Existing components were difficult to find, switch between, and organize, especially when systems contained many variations. - Variants was designed to make design-system components resemble their code counterparts more closely. ## Aligning Component Organization with Code - Teams often used forward-slash names such as `default/primary/large/icon` to represent component states and properties. - Variants replaced this workaround with key-value properties, such as: - `state="hover"` - `style="secondary"` - The system supports both simple components and components with multiple dimensions, including state, type, color, and size. - Research showed that design-system managers commonly arranged component variations in grids to compare and maintain them. - Figma therefore allows all variations of a component to be displayed side by side. - Existing component variations can be selected and converted into a component set using “Combine Variants.” ## Refining the Interface Through Usability Testing - Figma built a working prototype and conducted four rounds of usability testing over six weeks. - The initial interface displayed all property values as pills, but users found this confusing because pills typically represent multiple tags or attributes. - Figma changed the interaction to: - Use dropdowns and simple input fields when editing a selected variant. - Retain pills when viewing all properties and values in a component set. - Generic default labels such as “Property 1” and “Property 2” proved clearer than predefined labels like “State” and “Style,” because users understood they should customize them. ## Choosing the Name “Variants” - The feature was initially called “States,” reflecting its early focus on interactive states such as hover, active, and disabled. - User feedback showed that “States” understated the feature’s broader capabilities. - Variants can represent any component property, including type, color, and size—not just interaction states. - Testing confirmed that “Variants” better communicated the feature’s flexibility and scope. Variants, combined with updates to Auto Layout and the Inspect panel, is intended to make design systems easier to organize and easier for developers to interpret. Teams should use component properties and sets to model reusable UI elements in a way that matches both design workflows and code structures.

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

Learning and failing as a team | Figma Blog

Config Europe highlighted how better products emerge from better teamwork. Figma argues that inclusive processes, cross-functional collaboration, and a willingness to fail openly help teams build more human-centered experiences. The success of its Variants feature demonstrates that iterative testing and diverse perspectives can turn early shortcomings into meaningful improvements. ## Learning Through Collaboration - Figma’s virtual Config Europe conference explored both product craft and team culture. - Sessions covered: - Accessibility-first design - Keeping design aligned with code - Technology ethics - Collaboration and shared failure - The central theme was balancing product function with human feeling while working more effectively together. ## Expanding the Team - UX designer Declan Talbert presents design systems as services for entire product teams, not merely pattern libraries for designers. - An inclusive design system can contain: - UI components - Accessibility guidance - Data resources - Project-management tools - Designers, developers, product managers, and other contributors should all be able to participate. - Broader collaboration and diverse skills lead to more human-centered products and services. ## Failing Together on Variants - Product Manager Kelsey Whelan and Product Designer Nikolas Klein describe shared failure as a major factor in the development of Figma’s Variants feature. - Early testing showed that the feature was powerful but difficult to approach, contradicting the team’s initial assumptions. - Usability testing expanded from a planned couple of weeks into four rounds over six weeks. - Figma invited employees from different roles—including design advocates, product educators, and engineering managers—to participate remotely through Zoom. - Participants identified usability problems and bugs, while a dedicated Slack channel helped coordinate fixes. - Repeated testing made the feature more intuitive and reinforced the idea of “failing forward”: using visible mistakes to improve the product and strengthen team culture. Figma’s practical recommendation is to open product development to more people, test ideas early, and treat failure as shared information rather than individual blame.

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

The case for lightweight prototyping | Figma Blog

Lightweight prototypes do not need to be polished to be valuable. Figma argues that early, informal prototypes accelerate feedback, clarify communication, expose technical constraints, and reduce wasted effort. The best prototype is often the one shared early enough to influence the final product. ## Why Lightweight Prototypes Matter - Prototypes support more than formal usability testing: - They communicate a product vision. - They help collaborators and stakeholders respond to work in progress. - They encourage early course correction before changes become expensive. - High fidelity is not always necessary; an informal prototype can be more useful than a polished one if it prompts meaningful feedback. ## Testing Copy and Content - A prototype reveals whether headers, body text, and buttons work together coherently. - It helps identify: - Unclear calls to action - Inconsistent terminology - Mismatched writing styles or tone - Reviewing copy in context is especially useful when multiple people contribute UX writing or microcopy, even before a formal style guide exists. ## Adding Context for Developers - Sharing early prototypes with developers can expose: - Feasibility problems - Technical roadblocks - Areas requiring further exploration - Prototypes are blueprints rather than finished implementations, so additional context helps developers understand the intended experience and bring the design to life accurately. ## Communicating Interactions - Even simple prototypes should clearly map user paths and interactions. - Specifying behaviors such as **On Click**, **On Drag**, and **While Hovering** makes the intended experience easier to understand. - Explicit interactions lead to more accurate feedback and more effective testing. ## Using Figma for Internal Communication Figma also uses prototypes as a communication medium, particularly for remote collaboration. - **All-hands meetings:** Team members add presentation slides directly to a shared master Figma file. - **Information sharing:** Teams use Presentation View for quarterly plans, research findings, and remote-collaboration ideas. - **Customer conversations:** Sales teams send prototype URLs instead of static PDFs, enabling customers to click through presentations and view animated elements such as GIFs. - **Events:** Figma speakers use Figma files and Presentation View to build and deliver conference presentations. Lightweight prototyping is most effective when it is shared early, includes enough interaction detail to convey intent, and provides the surrounding context that collaborators need. Teams should treat prototypes as flexible communication tools—not merely as final-stage testing artifacts.

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

Research, remotely | Figma Blog

Remote research requires more than transferring in-person methods to video calls; it demands empathy, clear guidance, and intentional collaboration. Figma’s research team recommends adapting participant communication, limiting observers, documenting sessions, and using shared virtual boards to synthesize findings. Remote work also creates opportunities to reach people who would otherwise be difficult to interview in person. ## Lead with User Empathy - Recognize that participants may be facing personal or professional difficulties and may not be ready to participate. - Be willing to pause or slow research when the situation calls for it. - Avoid assuming participants are comfortable with video-conferencing tools. - Send preparation materials and detailed instructions explaining how to join the call and what the session will involve. ## Keep the Research Team Involved - Limit live participants to essential roles, such as a facilitator and note-taker, since too many observers can make participants uncomfortable. - Record interviews only after obtaining permission; recordings preserve tone and context that written notes may miss. - Hold post-session debriefs with the full research team, including people who did not attend the interview. - Share recorded status updates in Slack to communicate interview progress, emerging findings, project materials, and outstanding sessions. ## Use a Virtual Research Board Figma’s team uses shared boards to collect and synthesize research remotely. A useful board can include: - **Research questions:** The study’s goals and questions to answer. - **Participants:** Participant profiles, roles, images, and notable quotes. - **Theme board:** Grouped notes showing patterns across interviews. - **Open questions:** Issues requiring further investigation. - **Next steps:** Specific follow-up sessions, analysis, or team discussions. ## Take Advantage of Remote Research - Remote sessions can reach participants who live far from a company’s headquarters or outside typical in-person recruiting areas. - Although remote research introduces technical and interpersonal challenges, it can broaden access to geographically diverse audiences. Remote research works best when teams prioritize participant comfort, provide unusually clear instructions, and maintain shared documentation. Use remote tools not merely as substitutes for in-person work, but as a way to expand who can participate and how findings are shared.

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

Test designs early and often with the new Maze integration | Figma Blog

Figma’s new Maze integration lets teams test interactive prototypes with real users before development, making research faster and less expensive than waiting for production A/B tests. By importing a Figma prototype link into Maze, teams can measure usability across individual tasks or complete user flows. The post also recommends practical research habits to ensure tests produce reliable, actionable insights. ## Earlier Testing with Figma and Maze - Maze provides quantitative UX insights from real users, supporting both small-scale interviews and tests involving thousands of participants. - Teams can copy and paste a Figma prototype link into Maze to begin testing during the design phase. - The integration helps product teams identify usability problems before committing to development. - At launch, Maze offered Figma users 30% off paid plans for three months with the code `MAZE_LOVES_FIGMA`. ## Define Measurable Goals - Establish what success means before building the prototype. - Use specific metrics, such as requiring 80% of participants to complete tasks successfully and fewer than 2% to misclick. - Tailor goals to the purpose and scope of each test. ## Pilot the Test First - Run the test internally with teammates, friends, or family before involving real users. - Confirm that tasks are understandable, the prototype works correctly, and the success criteria are meaningful. - A pilot functions like a beta release, revealing problems before testing at scale. ## Include Users and Non-Users - Existing customers can provide informed feedback and may be enthusiastic early adopters. - Target customer segments most likely to use the proposed feature. - Include people unfamiliar with the product to avoid bias and gain fresh perspectives. ## Write Neutral Tasks - Avoid leading instructions such as “click here,” “go to,” or “navigate to.” - Focus tasks on the outcome users should achieve rather than the specific interface steps. - Avoid internal product terminology so the test measures intuitiveness rather than participants’ ability to follow directions. ## Collaborate on Analysis - Reviewing results as a team helps build agreement around findings and next steps. - Maze supports collaboration through instantly generated reports and shareable URLs. - Involving the broader product team can make research insights easier to act on. Teams should use the Figma–Maze workflow to validate designs early, measure outcomes against clear goals, and involve collaborators in interpreting the results.

Read original(opens in new tab)
datadogOriginal article

What product designers can learn from explanatory journalism | Datadog (opens in new tab)

Product designers can significantly improve their impact by adopting the techniques of explanatory journalism, which prioritizes deep context over the constant noise of new information. By shifting the focus from simply presenting features to explaining the "why" and "how" behind them, designers can better navigate the complex needs of various stakeholders. This approach fosters more rigorous decision-making and ensures that product solutions are grounded in a comprehensive understanding of the problem space. ### Prioritizing Impact Over Recency * Designers often face a "newness bias" where the latest support ticket or customer call carries disproportionate weight compared to long-term goals. * To counteract this, designers should aggregate feedback from diverse sources—such as high-value customers and recurring requests—to identify and prioritize what is truly important rather than what is merely recent. * Effective prioritization requires a centralized system to track the frequency and source of feedback, allowing for a more objective weighting of product requirements. ### Mitigating Context Collapse * In a large organization, "context collapse" occurs when information is shared across different teams (Sales, Support, Research, Executives) without accounting for their unique perspectives or goals. * A designer's role involves assembling disparate pieces of data—including interview notes, sales requirements, and executive goals—into a single, cohesive narrative. * Beyond just presenting work, designers must frame their solutions specifically for each audience, explaining how the design addresses their specific context or why certain requests were triaged out. ### Leveraging the Unlimited Design Papertrail * The design process should cycle through "expansion," where research and data are gathered without space constraints, and "contraction," where that information is distilled into actionable insights. * Developing a thorough "papertrail" of documentation helps the designer master the subject matter, making their eventual summaries more concise and authoritative. * This documentation should include organized interview notes—categorized by job role and company size—and competitive research to serve as a permanent "canon" for all design decisions. To produce more effective work, designers should embrace the role of an "explainer" by meticulously documenting their research and expansion phases. Building a robust, updated papertrail not only clarifies the designer's own thinking but also provides the necessary evidence to defend usability and interaction design choices in a fast-moving product environment.