Wireframes / Prototypes

explorationevaluationmediumIntermediate

TL;DR

Low to high fidelity interface representations for user validation.

What is it

Wireframes and Prototypes are visual representations of an interface at different fidelity levels. Wireframes (low fidelity) show structure and hierarchy without visual design. Prototypes (medium-high fidelity) simulate real interaction for user validation before development.

What it is for

✓Visualize design ideas before investing in development
✓Validate flows and interactions with real users
✓Align the team on design direction
✓Iterate quickly on design solutions

Research methods that feed it

Previous usability test resultsUser Personas and their needsCustomer Journey Map (pain points to solve)Card Sorting / Tree Testing (for structure)

When to use it

✓Before developing any new interface
✓To validate design solutions with users
✓When there's disagreement about design direction
✓To communicate design ideas to stakeholders and development

When NOT to use it

✗As a substitute for prior research (research first, design second)
✗If you won't test with users (a wireframe without validation is an opinion)
✗For minor changes that don't require prototyping

How to create it step by step

1Define scope: Choose which flows or screens to prototype based on research findings.
2Low-fidelity wireframes: Draw content structure and hierarchy without visual design (boxes, lines, placeholder text).
3Validate structure: Present wireframes internally and adjust before adding detail.
4Interactive prototype: Add real interactions (navigation, forms, states) in Figma, Sketch, or similar.
5Test with users: Conduct usability tests with 5-8 users to validate the flow and comprehension.
6Iterate and document: Adjust the prototype based on findings and document design decisions.

Tips for small teams

Start on paper or whiteboard — you don't need Figma for the first iteration
Low-fidelity wireframes save time and reduce design attachment
Test with 3-5 users before investing in high fidelity
Use reusable design components to accelerate iterations

Common mistakes

✗Jumping directly to high fidelity without validating structure
✗Not testing with real users (relying only on team opinion)
✗Prototyping everything instead of the most critical flows
✗Getting emotionally attached to the design and resisting post-test changes

Contextualized example

Context: Checkout redesign for an online clothing store.

Wireframe V1: Single long-page checkout. Test: 4/6 users got lost halfway through the form.

Prototype V2: 3-step checkout with progress bar. Test: 5/6 users completed without issues. Additional finding: users wanted to see the order summary at all times, not just at the end.

Phase

explorationevaluation

Audience

product-teamdevelopmentmultidisciplinary

Complexity

medium

Experience level

Intermediate

Related deliverables

Related methodologies

Free tool by UXR — UX Research Consulting in Chile