User Testing | Techlist.io

figmaDec 7, 20233 min readCurated summary

Why Cultivating a Prototyping Culture Will Help You Build Better Products | Figma Blog

Prototyping should move from a last-minute design enhancement to an integral part of product development. Interactive prototypes expose navigation, usability, and feasibility problems before engineering investment, while enabling teams to explore more ideas and secure stakeholder support. The article argues that organizations need shared skills, dedicated time, and leadership support to make prototyping an everyday practice. ## Prototyping as an Early Validation Tool - A prototype is a mock-up or interactive demonstration used to test and refine a product concept. - Unlike static designs, interactive prototypes reveal how an experience actually works, including: - Navigation complexity - Interaction problems - User-testing obstacles - Gaps between design intent and technical implementation - Introducing prototypes early can reduce wasted engineering effort and streamline collaboration between designers and engineers. - Prototypes let teams evaluate an idea’s value before committing to development or visual polish. ## The Power of Rapid Experimentation - Teams can quickly generate and validate multiple concepts without creating separate development cycles. - Exploring broadly before narrowing down encourages more innovative and unconventional experiences. - Proofs of concept help designers communicate ideas clearly and gain approval from stakeholders and senior leadership. - Advanced prototyping gives designers a stronger voice in product and business decisions by allowing them to demonstrate—not merely describe—their proposals. ## Building a Prototyping Culture - The growing emphasis on prototyping resembles the adoption of design systems, which also evolved from specialized practice into an organizational capability. - Companies such as Lyft encourage designers to move beyond static mockups by using: - Videos - GIFs - Interactive prototypes - Organizations must invest time and resources in training so prototyping becomes a natural, enjoyable part of the workflow rather than an obstacle. - Successful adoption requires alignment across the company: - Individual contributors need to build prototyping expertise. - Leadership must recognize its impact on efficiency and decision-making. - Managers should explicitly make time for prototyping in the product process. - Training programs and employee initiatives can help develop prototyping skills and apply them during important product reviews. ## Rewriting the Product Development Process - Prototyping challenges the idea that product development follows a simple linear sequence. - Adding prototypes earlier introduces more iteration, but it also helps teams identify obstacles and compare alternatives sooner. - Designers can use these insights to avoid known problems and move more directly toward viable solutions. - The shift affects the entire product organization, not only the design team, because prototyping changes how teams collaborate, make decisions, and obtain buy-in. Organizations should treat prototyping as a core product-development capability: provide training, protect time for experimentation, and require interactive validation early enough to influence the product—not merely decorate the final design.

Read original

User Testing Figma Design Systems Prototyping+2

figmaDec 13, 20212 min readCurated summary

The Figma prototype challenge: 15 tips in 15 days | Figma Blog

The Figma prototype challenge is a 15-day learning series designed to help designers move from basic prototyping to advanced, high-fidelity interactions. It emphasizes experimentation, user testing, developer handoff, and critique, using Figma’s newer features—especially Smart Animate and interactive components—to create more realistic prototypes with less wiring. ## Building a Foundation with Smart Animate - **Smart Animate** creates animated transitions between screens by matching layers with the same names. - It can be combined with preset transitions such as slide and push. - Matching layers with Smart Animate is useful for interfaces such as tab navigation. - Preserving consistent layer names between screens is essential for the animation to work correctly. ## Creating Reusable Interactive Components - **Interactive components** define interactions and animations between variants within a component set. - Instances become interactive immediately in prototype mode. - Component-level interactions reduce the size and complexity of larger prototypes. - They are particularly useful for demonstrating microinteractions. ## Nesting Components for More Complex Behavior - Interactive components can be nested inside one another. - Nested components allow elements such as list items to contain their own built-in interactions. - This reduces the number of prototype links required between component variants. - The approach makes complex interfaces easier to maintain and reuse. ## Applying the Techniques to a Mobile Prototype - The first week concludes by combining Smart Animate, matching layers, interactive components, and nesting. - These techniques are used to build a mobile prototype with interactive bottom navigation. - The challenge progresses from foundational transitions to increasingly complex, component-based interactions. - Figma Community files accompany the daily challenges so designers can follow along or create their own version. The practical recommendation is to learn prototyping incrementally: start with Smart Animate, preserve layer structure carefully, then introduce interactive and nested components to create sophisticated interfaces with fewer connections and more reusable behavior.

Read original

User Testing Figma Prototyping Interactive Components+2

figmaSep 2, 20202 min readCurated summary

Making Design Within Reach for online shoppers | Figma Blog

Design Within Reach (DWR) redesigned its e-commerce site to recreate the personalized showroom experience online, responding to changing consumer expectations and increased online shopping during COVID-19. In partnership with BASIC®, DWR adopted a transparent, collaborative workflow using Figma, conducted extensive customer research, and launched a responsive site with live sales support. The redesign increased sales and established a scalable design system for Herman Miller’s broader family of brands. ## A Transparent Agency Partnership - DWR partnered with BASIC® to combine the agency’s e-commerce expertise with DWR’s internal brand and product knowledge. - Both organizations worked as one co-creative team rather than in separate workstreams. - Shared Figma files allowed designers in different companies and time zones to collaborate in real time. - Continuous access to the latest files eliminated version-control issues and effectively created 14-hour workdays across teams. - Figma prototypes also made it easy for executives and other stakeholders to review progress through shareable links. ## Bringing the Showroom Experience Online - The redesign was informed by 110 hours of customer research and testing with more than 200 participants. - Interactive Figma prototypes enabled rapid usability testing and iteration. - The site launched in July 2020 with responsive layouts and video chat connecting shoppers with sales associates. - Customers using the new live chat features were nine times more likely to complete an online purchase. - DWR saw an immediate increase in purchases after launch instead of the typical temporary decline following a major website release. ## A Scalable Design System - The redesign became the foundation for Herman Miller’s first design system spanning multiple brands. - DWR and BASIC® created a shared set of reusable components and a consistent visual language. - Developers can implement standardized components more quickly. - Content authors can assemble pages by dragging in prebuilt components, updating images, and editing text. - Cloud-based Figma libraries make it easier to share assets and scale the system across internal teams and external partners. DWR’s experience suggests that combining close agency collaboration, user-centered research, real-time design tools, and reusable components can make complex showroom-style retail experiences effective online while preparing a brand for future growth.

Read original

User Testing Figma Design Systems User Experience+3

figmaJan 29, 20202 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

User Testing Figma User Experience Prototyping+3

figmaAug 4, 20193 min readCurated summary

How to run a design sprint | Figma Blog

Design sprints help teams solve complex problems quickly by combining alignment, ideation, prototyping, and user testing within a fixed timeframe, typically five business days. The method emphasizes one clearly defined challenge, a small cross-functional team, and rapid validation of ideas. Effective preparation is essential: the better the brief, research, agenda, and logistics, the more productive the sprint will be. ## What a Design Sprint Is - A structured process for solving major problems through: - Designing - Prototyping - User research - User testing - Usually runs for five business days with clear goals and deliverables. - Follows six phases: - **Understand** - **Define** - **Sketch** - **Decide** - **Prototype** - **Validate** - Teams may adapt the framework based on their existing knowledge, timeline, and goals. ## Origins of the Google Design Sprint - The methodology was developed at Google to strengthen UX culture and design leadership. - It draws from: - Traditional UX practices - IDEO - Stanford’s d.school - Business strategy - Psychology - Its modern form is flexible and can be tailored to different organizations and challenges. ## Preparing the Sprint Preparation should take roughly as much effort as the sprint itself; teams should reserve planning time before the workshop begins. ### Write a Focused Brief - Define the problem, goals, deliverables, agenda, and methods. - Include relevant project background and existing research. - Focus on one major challenge and frame it as a specific question. - For example, replace “Make our homepage more shoppable” with “Redesign a user flow to increase conversion.” ### Assemble the Right Team - Keep the group to approximately five to seven people. - Include people responsible for implementing the outcome afterward. - Typical participants include: - UX designers - User researchers - Product managers - Developers - Relevant leaders - Larger organizations can divide participants into smaller teams working on the same problem. ### Create the Agenda - Use the six sprint phases as the basic structure. - Adjust the time allocation according to the team’s knowledge and objectives. - For example, a team familiar with the problem may shorten **Understand** and spend more time prototyping. ### Prepare Visual References - Gather screenshots, competitor or inspirational examples, data, research summaries, and other relevant material. - Make these references easily accessible throughout the sprint, whether in a presentation or another shared format. ### Compile User Research - Existing and exploratory research gives the team evidence to guide ideas. - Research can reveal: - What users want - How they currently use the product - Which behaviors or experiences need to change - This information provides the foundation for the **Understand** phase. ### Schedule Lightning Talks - Invite internal presenters or outside experts to provide focused perspectives. - Talks should generally last 10–15 minutes. - Useful topics include customer-support findings, competitive analysis, and product-performance data. - Presenters can join remotely by audio or video if necessary. ### Set Up the Workspace - Choose a bright, flexible space that supports creativity and collaboration. - Ensure there is room for whiteboards, visual references, and rearranged furniture. - Changing locations during the week—such as working from a café or park—can add variety. ### Plan an Icebreaker and Supplies - Use an icebreaker to help participants become comfortable and encourage creative thinking. - Prepare all necessary workshop supplies before the sprint begins. A successful design sprint depends on disciplined scope, the right cross-functional participants, useful research, and thoughtful facilitation. Teams should treat planning as a core part of the process rather than an administrative task.

Read original

User Testing Figma User Experience Prototyping+3

figmaMay 2, 20192 min readCurated summary

5 ways to level up your prototyping workflow in Figma

Figma prototyping can be made faster and more realistic by reusing connected components, managing scrolling content centrally, and simulating natural interaction timing. The post presents five techniques that reduce repetitive setup while improving testing, presentation, and collaboration workflows. ## Master Components for Repeated Connections - Turn persistent navigation, such as tab bars or hamburger menus, into master components. - Link each item in the master component once; new instances inherit those prototype connections. - For components from a team library, place the library instance inside a new local master component. - Deep-select nested layers to create links without detaching the instance. ## Components for Scrolling Content - Convert long scrolling content into a component to preview how different device viewports initially crop it. - Set constraints for internal elements and enable **Clip content**. - Configure the desired scrolling direction through **Overflow Behavior** in prototype mode. - Place and resize component instances within designs to compare viewport-specific views while managing content centrally. ## Timed Delays and Overlays - Use the **After Delay** trigger to make transitions feel less abrupt. - Combine timed delays with overlays to simulate loading states or intermediate feedback. - For example, a form can show a submission state, brief loading sequence, and success message before navigating to a confirmation page. ## Table of Contents for Multiple Flows - Create a table-of-contents frame as the prototype’s starting screen. - Link each option to a different user flow, allowing one shared URL to present multiple design alternatives. - All flows must be located on the same Figma page. ## Observation Mode - Use Observation Mode to follow a collaborator’s view in the editor or prototype. - It supports remote user testing by showing where users are and how they interact with the design. - It is also useful for helping meeting participants follow along during presentations. These techniques make Figma prototypes easier to build, reuse, test, and present. Centralizing repeated behavior in components and using realistic timing and navigation can significantly streamline the workflow.

Read original

User Testing Figma User Experience Prototyping+3

figmaDec 2, 20182 min readCurated summary

Introducing Overlays | Figma Blog

Figma’s Overlays feature makes prototypes more realistic by allowing content to appear flexibly above existing screens. Designers can position modals, sidebars, tooltips, and dropdowns, stack multiple overlays, and add interactions without rebuilding entire frames. The release aims to reduce repetitive prototype setup and better support interactive user flows. ## Simple Overlays - A destination frame can be designated as an overlay after creating a prototype link. - Overlays can be positioned relative to the device for modals and action sheets. - Designers can manually position overlays relative to triggering objects, such as for tooltips and dropdowns. ## Multiple Overlays - Multiple overlays can be layered simultaneously. - This supports complex flows such as multi-step purchases and confirmation dialogs. - Creating stacked overlays follows the same process as creating a single overlay. ## Interactions on Overlays - Designers can use “swap” interactions within overlays. - Swapping changes the overlay’s content without dismissing it or replacing the entire underlying frame. - This enables interactive states such as button hover effects inside an overlay. ## Additional Controls and Shortcuts - Back and Close actions can be selected directly on the canvas while dragging connections. - Holding Option while hovering over a destination frame quickly selects a swap connection. - Swap links can create more flexible Back behavior by returning to the last navigated frame rather than simply showing the preceding frame. Overall, Overlays extend Figma’s existing prototyping tools and make layered, interactive interface patterns easier to build and test.

Read original

User Testing Figma Prototyping User Interface+2

figmaAug 22, 20182 min readCurated summary

The finale of Prototyping Week: Interactions | Figma Blog

Figma concluded Prototyping Week with **Interactions**, allowing prototypes to respond to user behavior more realistically. Designers can now model hover, pressed, mouse, touch, and timed behaviors, making prototypes more suitable for realistic testing. The release also rounded out a week of updates focused on navigation, device presentation, and external linking. ## Interactions for More Realistic Prototypes - New interaction types include: - On Click - While Hovering - While Pressing - Mouse Enter - Mouse Leave - Mouse Down - Mouse Up - After Delay - “While Hovering” and “While Pressing” can show button hover states or pressed list-item states. - “Mouse Enter” and “Mouse Leave” provide finer control, such as keeping a dropdown menu open until another interaction occurs. - On device frames, some interactions appear as On Tap, Touch Down, and Touch Up. ## Timed Transitions with After Delay - “After Delay” automatically transitions between screens after a specified duration. - It can simulate notifications, splash screens, and automatic redirects. - The transition applies only from one screen to another, rather than from a specific layer within a frame. ## Other Prototyping Week Releases ### Landscape Device Frames - Figma added device frames for screens designed to be viewed in landscape orientation. - This expanded the device-frame support introduced with Figma 3.0. ### Clickable URLs - Prototype frames can link to external websites or other Figma files. - For example, a presentation can link directly to a designer’s portfolio. ### Back Transitions - Users can return to the previous screen without duplicating screens or transitions. - Back navigation preserves the user’s starting point when a screen is reachable from multiple locations. - If the original navigation used animation, the back action plays that animation in reverse. Figma’s updates make prototypes better representations of real application behavior. Designers can use the new interaction triggers, timed transitions, links, and back navigation to create more accurate and flexible user-testing experiences.

Read original

User Testing Figma Prototyping Interaction Design+2

figmaAug 6, 20182 min readCurated summary

Master the art of design portfolios with this free online Skillshare class | Figma Blog

The post introduces a free Figma and Skillshare course designed to help aspiring product designers create stronger portfolios and improve their chances of landing a job. It argues that an effective portfolio should present not only polished results, but also the designer’s process, learning, adaptability, and outcomes. The course covers portfolio creation from initial content choices through interviews and peer feedback. ## Why Portfolios Matter - Applying for a first product design role can be difficult because the field includes many specialties and interview expectations. - A portfolio is central to the job search and should represent work both accurately and memorably. - New designers should be deliberate about what they include and how they frame their experience. ## What the Course Covers The free Skillshare class addresses: - Which information belongs in a design portfolio. - How to create a clear and effective visual presentation. - How to structure projects as case studies. - How to maintain a consistent professional story across: - An online presence - Applications - Interviews - How to iterate on portfolio designs and collaborate with peers in Figma. - How to invite mentors into Figma projects for practical feedback. ## Understanding Product Design Roles - Product design can combine: - User research - User experience design - Prototyping - User testing - Visual design - Smaller companies often expect designers to handle several of these responsibilities. - Larger organizations may divide product design into specialized roles. - Designers should identify their strengths and interests while remaining open to adapting as tools, methods, and industry needs change. ## Showcasing Process and Growth - Portfolios should highlight: - The design process - Key decisions - Lessons learned - Project outcomes - A final visual result alone does not demonstrate how a designer thinks or works. - Employers value candidates who show curiosity, adaptability, and a willingness to learn. - Sharing projects with classmates and mentors can provide useful critique and improve the portfolio. The practical recommendation is to use the course—or the linked written guidance—to build a portfolio that tells a complete story: what you did, why you did it, what you learned, and what changed as a result.

Read original

User Testing Figma User Experience Prototyping+4

figmaAug 1, 20182 min readCurated summary

Figma feature highlight: Observation Mode | Figma Blog

Figma’s Observation Mode lets one person mirror another collaborator’s screen in real time. By clicking a teammate’s avatar, users can follow cursor movements, navigation, text changes, and prototype interactions as they happen. Figma presents it as a useful alternative to traditional screen sharing for critiques, client feedback, and user testing. ## How Observation Mode Works - When multiple people are viewing a Figma file, click a person’s avatar in the upper-right corner. - Your view then follows everything that person sees and does. - The mirrored activity includes: - Moving through the file or prototype - Editing text inside frames - Selecting objects - Expanding design elements - Moving the cursor - Observation Mode is available even to users with view-only access, provided sharing is enabled for the file or project. ## Real-Time Design Critiques and Feedback - Designers can watch clients or teammates explore a design instead of relying only on verbal explanations. - The feature makes remote critiques more interactive by allowing everyone to follow the same part of the file. - Clients can demonstrate their reactions and questions directly within the design. ## User Testing in Figma - Researchers or designers can observe users as they move through a prototype. - Watching interactions live reveals: - Where users hesitate - Which elements cause confusion - Where navigation breaks down - Which interface areas create pain points - This provides more direct evidence than collecting anecdotal feedback after a test. ## Sharing and Privacy Considerations - Anyone with access to a shared file may be able to use Observation Mode, including viewers. - Designers should be comfortable being observed before sharing a design URL. - Teams should consider file-sharing permissions when using the feature for sensitive work. Observation Mode is best used as a lightweight collaboration and research tool: enable sharing, ask participants to explore the file or prototype, and follow their activity live to gather more precise feedback.

Read original

User Testing Figma Prototyping Real Time Collaboration+2

figmaJun 4, 20182 min readCurated summary

With websites, what comes first: The copy or design? | Figma Blog

Website projects often become slow, repetitive exchanges between copywriters, designers, and stakeholders. The post argues that copy and design should be developed together rather than sequentially, using a shared, cloud-based workspace like Figma. Real-time collaboration reduces revisions, meetings, delays, and confusion while producing better web assets. ## The Problems with Separate Copy and Design Workflows - Copywriters may work in Google Docs while designers work in Sketch or another separate tool. - Teams repeatedly exchange drafts after discovering that text does not fit the design. - Design critiques, copy reviews, and stakeholder feedback can force additional redesigns. - Remote collaboration makes the process even more cumbersome; the author describes printing designs, writing edits by hand, scanning them, and sending them back. - Siloed tools make the project difficult to track, even for project managers. ## Developing Copy and Design Together in Figma - The author outlined the main copy points for each page in a Google Doc. - Designers created Figma frames representing the website pages. - Marketing and design worked simultaneously, progressing from high-fidelity wireframes to final designs. - Copy could be edited directly while viewing it in its intended visual context. - Designers spent less time handling communication and more time focusing on the design itself. ## A Shared Source of Truth - Stakeholders could access the latest copy and designs through a single project URL. - Team members could leave comments and review version history without exporting or emailing files. - The same designs could be used for user testing, allowing everyone to connect feedback with the current work. - Fewer meetings were needed, and the remaining meetings became more efficient. - Last-minute updates no longer required a separate scramble before milestone reviews. The practical recommendation is to replace sequential, tool-separated workflows with real-time collaboration between writers, designers, and stakeholders. Treating copy and design as interconnected parts of one process can make website projects faster, clearer, and less frustrating.

Read original

User Testing Figma User Experience Web Design+4

figmaOct 29, 20173 min readCurated summary

How Inneract Project empowers brown and black designers | Figma Blog

The article highlights ten UI/UX design internships recommended by Figma users, arguing that the best programs offer meaningful design work, mentorship, user research, and opportunities to learn—not merely perks or high compensation. Across companies ranging from Shopify and Facebook to Hotels.ng and Palantir, interns are given varying degrees of responsibility, collaboration, and professional guidance. The strongest internships help students build practical skills and often lead to full-time employment. ## What Makes an Internship Valuable? - Respondents valued opportunities to practice design, conduct real user testing, and learn from experienced professionals. - Mentorship was a recurring theme: - Shopify assigns every intern a staff mentor. - Spotify provides interns with a designated mentor or manager. - Perks such as catered meals, generous stipends, travel credits, and office amenities were appreciated but considered secondary to meaningful work and learning. ## Shopify - Places interns on cross-functional teams to develop communication and collaboration skills. - Design interns work on deployable products, including Timeline. - Approximately 80% of interns reportedly return to Shopify or become full-time employees. - Strong emphasis on individual mentorship. ## Hotels.ng - Offers a remote, paid UI/UX internship for Nigerian residents through a partnership with the Akwa Ibom State government. - Interns must complete assigned tasks successfully to remain in the program. - The program lasts three months. - Many graduates receive full-time offers from Hotels.ng or other local companies. ## Facebook - Provides a reported average stipend of about $5,600 per month. - Interns receive substantial responsibility and are treated similarly to full-time employees. - The work environment is described as resembling an intensive “college campus.” ## Spotify - Runs a ten-week program organized into close-knit squads and two-week sprints. - Interns are treated as “band members,” reinforcing the company’s collaborative culture. - The product design program is highly design-focused, with strong expectations for visual craft. - Mentorship and free food are notable parts of the experience. ## Salesforce - Its Futureforce program gives interns meaningful projects and opportunities to learn design systems. - Interns participate in social events with executives and receive up to seven days of Volunteer Time Off. - The program combines professional development with networking and community activities. ## Uber - Offers health benefits, unlimited vacation, and Uber credits. - Interns work in an intense but rewarding environment. - Product design interns may have direct access to senior leaders, whose willingness to listen can give interns significant influence. ## IBM - Austin’s Maelstrom program guides roughly 15 young designers through four tracks: - Design research - Visual design - UX design - Front-end development - Program leaders attribute its success partly to an emphasis on emotional intelligence. ## Airbnb - Known for a strong design culture, influenced in part by its designer co-founders. - Offers a close-knit, progressive, and innovative work environment. - Interns receive travel credits and access to extensive employee perks. - The company was ranked highly as a workplace in 2016. ## Square - Gives interns flexibility to explore different types of design problems as their interests develop. - Recognized for efforts to address gender inequality in technology. - Interns may work beyond conventional UI design, with opportunities to approach problems creatively and artistically. ## Palantir - Product design interns focus on solving complex problems rather than making minor visual adjustments. - The company’s open-source Blueprint style guide reduces repetitive interface work. - The program emphasizes product thinking and meaningful design challenges. ## Practical Takeaway When evaluating internships, prioritize mentorship, real product responsibility, cross-functional collaboration, and opportunities to learn from feedback. Compensation and perks are useful, but a program that develops practical design skills and provides a path to future employment is likely to have the greatest long-term value.

Read original

User Testing Figma Design Systems User Experience+3