UX/UI: Build Better Products with Miro & Figma

The relentless march of technology has fundamentally reshaped how we interact with digital products, making the role of UX/UI designers more critical than ever. We’re past the point where a functional product is enough; users now demand intuitive, delightful, and inclusive experiences. But how do you actually bake that into your development process?

1. Kickstarting with User-Centric Discovery: Unearthing Real Needs

Forget brainstorming in a vacuum. The first, most vital step for any product, regardless of its complexity, is to deeply understand your users. This isn’t just about what they say they want; it’s about observing what they do and identifying their underlying motivations and pain points. I’ve seen countless projects derail because teams jumped straight into feature development without this foundational work. It’s like building a house without knowing who will live in it or what their daily routines are.

To begin, we organize a dedicated discovery workshop, usually spanning 3-5 days for a new product, involving stakeholders from product, engineering, and sales. Our go-to tool for this is Miro, a collaborative online whiteboard. It allows for asynchronous and synchronous participation, which is gold when you have remote teams. We start with stakeholder interviews to align on business objectives, then transition into user research synthesis.

Specific Tool Settings & Workflow:

1. User Persona Creation: In Miro, we use the “User Persona” template. We populate fields like “Demographics,” “Goals,” “Frustrations,” and “Bio” based on interview data and existing analytics. My team usually creates 3-5 distinct personas.
2. Empathy Mapping: We then move to an “Empathy Map” template. For each persona, we fill out “Says,” “Thinks,” “Does,” and “Feels” sections. This is where the magic happens – it forces us to step into the user’s shoes.
3. User Journey Mapping: The “User Journey Map” template is next. We define key stages (e.g., “Awareness,” “Consideration,” “Purchase,” “Post-Purchase”) and plot out user actions, thoughts, feelings, and potential pain points at each stage. We often use different colored sticky notes for positive and negative experiences.

Screenshot Description: A Miro board showing a partially completed User Journey Map. The map has horizontal swimlanes for “Stages,” “User Actions,” “Thoughts,” “Feelings,” and “Opportunities.” Several colorful sticky notes populate the “Feelings” lane, with a mix of green (positive) and red (negative) notes indicating emotional states at different journey points. A specific stage, “Finding a Solution,” is highlighted, showing a user action of “Searching online” and a feeling of “Overwhelmed by options.”

Pro Tip: Don’t just rely on existing data. If possible, conduct 5-7 brief (30-minute) generative user interviews during this phase. Even a small sample can uncover profound insights that no analytics dashboard will ever show you. We often use a simple script focused on their daily routines and challenges, not just their interaction with a specific product type.

Common Mistake: Skipping direct user input in favor of internal assumptions. Your team’s intuition is valuable, but it’s not a substitute for actual user voices. I once worked on a healthcare app where the internal team assumed users wanted a complex symptom checker. After talking to just three potential users, we realized they primarily needed a simple way to book appointments and view lab results. We pivoted, saving months of wasted development.

2. Crafting Intuitive Interfaces: Beyond Just “Looking Good”

Once you understand the user, the challenge shifts to translating those insights into a tangible interface. This isn’t just about aesthetics; it’s about creating a clear path for the user to achieve their goals with minimal friction. A beautiful but confusing interface is worse than a plain but usable one. We strive for both, naturally, but usability always takes precedence.

My team primarily uses Figma for UI design. Its collaborative nature is unparalleled, allowing multiple designers to work on the same file simultaneously and product managers to leave comments directly on designs. This significantly speeds up iteration cycles compared to the old days of sharing static image files.

Specific Tool Settings & Workflow:

1. Information Architecture (IA) in Figma: We start with basic wireframes, often low-fidelity, to map out the application’s structure. We use Figma’s native shape tools for this, focusing on content hierarchy and flow, not visual details. We link screens together using “Prototype” mode to simulate basic navigation.
2. Component-Based Design: As we move to high-fidelity designs, we build a comprehensive component library. This means creating reusable elements like buttons, input fields, navigation bars, and cards as “Components” in Figma. For instance, a primary button component might have variants for “Default,” “Hover,” “Disabled,” and “Loading” states. This ensures consistency and speeds up design work.
3. Auto Layout and Constraints: We heavily leverage Figma’s “Auto Layout” feature for responsive design. This automatically adjusts component spacing and sizing based on content, making designs adaptable across different screen sizes. “Constraints” (e.g., “Left & Right,” “Top & Bottom”) are set for elements within frames to define how they behave when the parent frame is resized.

Screenshot Description: A Figma workspace showing a design file for a mobile banking app. On the left, the “Assets” panel is open, displaying a library of components such as “Primary Button,” “Text Input,” and “Navigation Bar” with various states. The main canvas shows a detailed screen design for an account overview, utilizing several of these components. The right-hand panel displays “Auto Layout” settings for a selected section, showing padding, spacing, and direction configurations.

Pro Tip: Don’t be afraid to scrap work. If a design isn’t meeting user needs or business objectives after testing, iterate aggressively. Sticking to a “pretty” but flawed design is a recipe for user frustration and product failure. I always tell my junior designers, “Your ego doesn’t pay the bills; user satisfaction does.”

Common Mistake: Over-designing too early. Resist the urge to perfect pixel details before you’ve validated the core flow. You’ll waste hours on something that might be completely re-thought after the first round of user feedback. Focus on functionality and flow first, then polish the visuals.

3. Prioritizing Accessibility: Designing for Everyone, Always

In 2026, accessibility isn’t an optional extra; it’s a fundamental requirement and a moral imperative. Ignoring it is not only bad business – you alienate a significant portion of your potential user base – but it can also lead to legal repercussions. We integrate accessibility from the very beginning, not as an afterthought. It’s a non-negotiable part of our design process. According to the World Health Organization, over a billion people experience some form of disability, making accessible design crucial for global reach.

Specific Tool Settings & Workflow:

1. Color Contrast Checks: Within Figma, we use plugins like “Contrast” (from Stark or other reputable providers) to check text and background color contrast ratios against WCAG 2.2 AA standards. We set the target to “AA” for all designs. If a color combination fails, the plugin flags it, and we adjust.
2. Keyboard Navigation and Focus States: We explicitly design and document focus states for all interactive elements (buttons, links, input fields). This ensures users navigating with keyboards or assistive technologies know where they are on the page. In Figma, this means creating a “Focus” variant for components within our design system.
3. Semantic Structure and Alt Text Documentation: While designers don’t write the final code, we document the intended semantic structure (e.g., using <h1> for main titles, <nav> for navigation) and provide alt text suggestions for all meaningful images directly in the Figma file using annotations or component descriptions.

Screenshot Description: A Figma design file showing a web page layout. A “Contrast” plugin panel is open on the right, displaying a color contrast analysis for a specific text element against its background. The plugin shows a “Fail” status with the calculated ratio (e.g., 2.3:1) and recommends a higher contrast. Below this, there’s a small annotation box near an image, containing suggested alt text: “A diverse group of professionals collaborating around a whiteboard in a modern office.”

Pro Tip: Conduct usability testing with participants who use assistive technologies, such as screen readers. This provides invaluable feedback that automated checkers can’t capture. You’ll quickly learn where your assumptions about “accessible” design fall short.

Common Mistake: Delegating accessibility solely to developers. While developers implement the code, the fundamental design decisions about color, layout, and interaction patterns determine accessibility. Designers must be proactive in integrating accessibility principles from the outset.

4. Iterative Testing and Feedback Loops: The Only Path to Perfection

Design is never “done.” It’s an ongoing process of improvement. Launching a product without rigorous testing is like driving blindfolded. We embrace an iterative approach, constantly gathering feedback and refining our designs. This is where the rubber meets the road, proving whether our initial assumptions and designs actually work for real users.

For us, usability testing is paramount. We conduct at least two rounds of formal usability testing for any significant feature or product, typically with 5-8 participants per round. We use tools like UserTesting.com for remote, unmoderated tests, and sometimes Lookback for moderated sessions when we need deeper qualitative insights.

Specific Tool Settings & Workflow:

1. Test Plan Creation: In UserTesting.com, we create a test plan that includes screening questions to recruit the right participants (e.g., “Do you use online banking at least once a month?”), specific tasks for them to complete (e.g., “Find your current account balance,” “Transfer money to a new payee”), and open-ended questions (e.g., “What was most confusing about this process?”). We aim for 3-5 key tasks per test.
2. Prototype Integration: We link our Figma prototype directly into UserTesting.com. This allows participants to interact with a high-fidelity, clickable version of our design as if it were a live product.
3. Analysis and Synthesis: After receiving video recordings and written feedback, we use a spreadsheet to log observations, categorize issues (e.g., “Navigation confusion,” “Unclear error message”), and assign severity ratings. We then prioritize these issues for the next design iteration.

Screenshot Description: The UserTesting.com dashboard showing a list of completed usability tests. One test, “Mobile App Onboarding Flow v2,” is selected, and its summary details are visible. This includes the number of participants, average completion time, and a list of key findings with associated video clips. A specific finding, “Users struggled with password reset link location,” is highlighted, with a play button next to a video segment demonstrating the issue.

Pro Tip: Don’t just focus on failures. Pay close attention to moments of delight or unexpected ease. These reveal what’s working well and can be amplified in future designs. Also, always record your moderated sessions and get consent; the video evidence is invaluable for convincing stakeholders.

Common Mistake: Testing too late, or not testing at all. Finding major usability issues days before launch is a nightmare. Integrating testing throughout the design process, even with low-fidelity prototypes, saves immense time and resources in the long run. I had a client last year who insisted on a full product build before testing. We found a critical flaw in their core payment flow, forcing a costly re-architecture that could have been avoided with a simple prototype test.

5. Building a Living Design System: Consistency is Key

As products grow, maintaining consistency across multiple platforms and features becomes a Herculean task without a robust design system. A design system isn’t just a style guide; it’s a single source of truth for all design and front-end development, comprising reusable components, guidelines, and principles. It’s what truly scales UX/UI designers’ impact across an organization. A well-maintained design system can reduce design debt by 30-40%, based on our internal metrics from several enterprise projects.

We build our design systems directly in Figma, leveraging its component capabilities, and then work closely with engineering to translate these into code components. This ensures a seamless handoff and reduces discrepancies between design and development.

Specific Tool Settings & Workflow:

1. Atomic Design Structure: We organize our Figma design system file following an Atomic Design methodology (Atoms, Molecules, Organisms, Templates, Pages). “Atoms” are basic elements like colors, typography, icons. “Molecules” combine atoms (e.g., a label + input field + button = search bar).
2. Component Variants and Properties: For each component, we define multiple variants (e.g., “Button/Primary,” “Button/Secondary,” “Button/Disabled”) and use Figma’s “Properties” feature for granular control (e.g., a “Switch” component might have a “State” property with “On” or “Off” values, and a “Size” property with “Small,” “Medium,” “Large”).
3. Documentation and Version Control: Each component in the Figma library includes detailed documentation in its description panel: usage guidelines, accessibility notes, and references to its corresponding code component. We use Figma’s version history for tracking changes and ensure all component updates are reviewed and approved before publishing to the main library.

Screenshot Description: A Figma file dedicated to a design system. The canvas shows a neatly organized collection of components. One section displays variations of a “Button” component: primary, secondary, tertiary, and disabled states, each with clear labels. Another section showcases different input field types with their respective states (default, focused, error). On the right-hand panel, a selected “Primary Button” component’s properties are visible, including “Size” (Medium), “Icon” (False), and “State” (Default). A detailed description for the button component is also visible, outlining its usage guidelines and accessibility considerations.

Pro Tip: Don’t try to build the entire design system upfront. Start with the most frequently used components and iterate. It’s a living document, not a static deliverable. Also, involve developers early and often; their input on technical feasibility and implementation details is invaluable.

Common Mistake: Creating a design system that isn’t adopted by engineering. If the coded components don’t directly mirror the design system’s components, you’ve just created extra work and confusion. Ensure a tight feedback loop and shared ownership between design and development teams.

The role of UX/UI designers has profoundly evolved, moving from mere aesthetics to strategic business drivers. By systematically applying user-centric discovery, thoughtful interface design, unwavering accessibility, continuous testing, and robust design systems, teams can create digital experiences that truly resonate and perform. Embrace these steps, and you won’t just build products; you’ll build loyalty.