Prototyping in Design
What is a Prototype?
Prototype
Preliminary version of a system or product, designed to demonstrate its core features and functionality
A prototype can be working or non-working, physical or digital, and serves as a tangible representation of the final product.
- Prototypes are not final products.
- They are tools for exploration, feedback, and iteration.
Make mistakes cheap and fast!
Prototype types
We can narrow down different categories of prototypes:
Low Fidelity Prototypes:
- Quick, inexpensive (e.g., paper sketches, wireframes)
- Focus on core functionality and structure
- Ideal for early-stage idea exploration and validation
Paper sketches illustrating layouts of basic screens, including login, account overview, and transfer money.
Medium Fidelity Prototypes:
- Interactive mockups or clickable prototypes
- More detailed with essential features
- Useful for testing usability and user flows
Clickable wireframe mockup where users can tap buttons to navigate between login, account summary, and transfer screens.
High Fidelity Prototypes:
- Closely resemble the final product (visual design, interactions)
- Created with prototyping tools or coded
- Used for advanced testing and detailed feedback
Fully designed and interactive app prototype with real colours, fonts, animations, and user flows that look and feel like the final app.
By medium, the most popular are:
Paper Prototypes
- Hand-drawn, low-fidelity sketches
- Map basic layout and user flow
- Great for brainstorming, early feedback, and collaboration
Hand-drawn versions of the login page and transaction page used in a team workshop to brainstorm user flow.
Digital Prototypes:
- High-fidelity, interactive models made with software
- Mimic final product’s design and functionality
- Essential for usability testing and stakeholder presentations
Created in a tool like Figma or Adobe XD with interactive features, allowing user testing and stakeholder demos showing actual navigation and animations.
Why is Prototyping Important?
- Visualising Ideas: Prototypes transform abstract concepts into tangible models, making it easier for stakeholders to understand the proposed system.
- Facilitating Feedback: By interacting with a prototype, clients and users can provide valuable feedback early in the development process.
- Identifying Issues: Prototypes help uncover design flaws, usability issues, and technical challenges before full-scale development begins.
- Validating Assumptions: By testing assumptions early, prototypes reduce the risk of costly changes later in the development process.
- Clarifying Ambiguities: Prototyping helps identify gaps or ambiguities in the system requirements, ensuring a clear understanding of what needs to be built.
- Encouraging Collaboration: Prototyping fosters collaboration between developers, designers, and stakeholders, ensuring that everyone is aligned on the project goals.
- Think of a prototype as a blueprint for a building.
- It allows architects, builders, and clients to visualise the structure, make adjustments, and ensure everyone is aligned before construction begins.
When creating a prototype, focus on the most critical features that need validation. Avoid overloading it with unnecessary details.
Skipping the prototyping phase can lead to misunderstandings, misaligned expectations, and costly rework later in the project.
Real-World Examples
- Software Development: In software projects, prototypes are often used to demonstrate user interfaces, workflows, and key features.
- Product Design: In hardware development, physical prototypes allow designers to test form, fit, and function before mass production.
- Service Design: Prototyping can also be applied to service design, where role-playing or storyboarding is used to simulate customer interactions.
- Prototyping is not limited to digital tools.
- Physical models, storyboards, and even role-playing can be effective prototyping techniques, especially in service design.
- Can you explain the difference between low-fidelity and high-fidelity prototypes?
- How does prototyping contribute to stakeholder engagement and collaboration?
- Why is it important to iterate on a prototype based on user feedback?
- How can you apply prototyping techniques to your own projects or studies?
- What are the potential risks of skipping the prototyping phase in system development?
- How does prototyping align with the broader principles of iterative design and user-centred development?
- How does the iterative nature of prototyping reflect broader principles of scientific inquiry and problem-solving?
- What parallels can you draw between prototyping in computer science and experimentation in other fields?
