Toolkit

Creating Prototypes

Prototyping
User Testing

Prototyping is a crucial method in co-design process. A prototype is a simplified and basic version of the final product. It allows stakeholders to interact with and give feedback on its features and functionalities.

Screnshot of a figma prototype

Overview

The main aim of prototypes is to explore many different solutions early on. At the start of the project you you should use low fidelity prototypes - they will allow you to iterate much quicker. Later in the project, when requirements are more clear, you can use high fidelity prototypes.

Figma is the go-to tool for creating prototypes in BGS. To learn how to use Figma for prototyping, refer to the guide below.

Different types of prototypes

To make the discussion about prototypes clearer you can use the below definitions:

1. FEASIBILITY PROTOTYPES

  • For prototyping new technology (ex. updated algorithm).
  • Engineer writes just enough code to see if it’s feasible.
  • Helps understand technical risk, often related to performance.

2. LOW-FIDELITY USER PROTOTYPES

  • Essentially an interactive wireframe (doesn’t look real).
  • Created by interactive designers to test the workflow.
  • Simulates process to identify usability issues early.

3. HIGH-FIDELITY USER PROTOTYPES

  • Realistic looking, working simulation.
  • Good for communicating a proposed product to stakeholders.
  • Used in defensive user testing, not to see if they’ll like it, but to learn if they won’t.

4. LIVE-DATA PROTOTYPES

  • Very limited implementation created by developers to actually prove it works.
  • Has access to real data and is sent real live traffic.
  • Hasn’t been “productised” (no test automation, SEO, localization, etc).

Which prototype is the most useful for your project?

The prototype that is the most useful depends on the questions you want to answer early in the project, before the full product development begins.

  • Do you want to measure user interest? (low-fidelity prototype)
  • Evaluate how easy to use a system is? (high-fidelity prototype)
  • Test technical capabilities? (feasibility prototype, e.g. Jupyter notebook).

When to use it?

  • Uncertain Requirements: When the requirements for the final product are unclear or not well-defined, prototyping can help explore different possibilities and refine the specifications through iterative feedback.
  • User-Centric Design: Prototyping is beneficial when the end product’s success heavily relies on user experience and feedback. It allows designers to gather user input early in the process and create a more user-friendly final product.
  • Innovation and Exploration: If the project involves novel or innovative ideas, prototyping enables teams to experiment with new technologies or approaches and assess their feasibility.
  • Risk Mitigation: When there are potential risks associated with the project, prototyping can help identify and address these risks in the early stages, reducing the likelihood of costly errors later on.
  • Agile Development: Prototyping aligns well with agile development methodologies, where continuous feedback and adaptation are essential for successful product development.

When NOT to use it?

  • Well-Defined Requirements: If the project requirements are already well-established and there is little room for change or exploration, a full-fledged prototyping process may not be necessary.

  • Limited Resources: For projects with strict budget and time constraints, investing resources in the prototyping process might not be practical. In such cases, it might be more efficient to proceed directly to the final development phase.

  • Simple and Familiar Projects: For straightforward and familiar projects, where the design and implementation process is straightforward, prototyping may add unnecessary complexity and delay.

  • Highly Complex Systems: In situations where building a prototype itself is a challenging and resource-intensive task, it might be better to focus on comprehensive planning and feasibility studies.

  • Fixed Scope and Budget: When the project scope and budget are rigidly defined, prototyping may lead to scope creep or budget overruns if not managed carefully.

image Screenshot of BGS component library for prototyping

What are the benefits of creating prototypes?

  • Requirement validation: Use prototyping to ensure that the product’s requirements align with the stakeholders’ expectations and needs. This helps identify any misunderstandings early in the development process.

  • User feedback and engagement: Prototyping allows users to interact with a tangible representation of the product, providing valuable feedback on usability and identifying potential improvements.

  • Risk reduction: By creating a prototype, potential design flaws, technical issues, or challenges can be identified and addressed before investing significant resources in full-scale development.

  • Communication and collaboration: Prototypes facilitate better communication between development teams, stakeholders, and clients, as they offer a clearer understanding of the envisioned end product.

  • Design exploration: Prototyping allows for experimentation and iteration, enabling designers and developers to explore different ideas and options efficiently.

  • Time and cost efficiency: Building a prototype is generally quicker and less costly than developing the entire product. It can help save resources in case changes or improvements are needed.

Creating your first prototype

If you’re interested in learning how to create prototypes, this guide is for you! It will demonstrate how to enhance an existing prototype, making it ready for testing with users.

Simply open the provided slidedeck and follow the step-by-step instructions. You’ll learn how to set up, edit, and share your prototype easily.

This is the project file you’ll be working with throughout the process. Happy prototyping!

After the prototype was developed, it was tested by a range of intended users to assess its usability and effectiveness. This case study briefly describes the activities of this design sprint, the outcomes and the lessons learned.

Other tools for prototyping

Low-fidelity prototypes

  • Pen and paper - it’s great for early design stages. Pen and paper will allow you to iterate quicker.

High-fidelity prototypes

  • Figma - for creating high fidelity prototypes you can use Figma. It has a slightly steeper learning curve, but it will allow you to create more detailed wireframes that resemble the real product. They are good for communicating a proposed product to stakeholders, but it is important to remind stakeholders that they are not the final product.
  • Framer X - this tools is good for prototypes that require the use of 3D models or real data. You can import 3D models from
  • Sketchfab, real data from APIs or google sheets and real maps.
  • Webflow - this tool is good for prototyping websites.
  • Framer Sites - similar to webflow, but still in BETA.

Questions and comments

For any inquiries regarding Figma usage or prototype creation, feel free to contact ux@bgs.ac.uk.