Rapid Prototyping: Goal-based types.

Prototype on the basis of which phase of the design process you are in.

In continuation with thoughts about Rapid Prototyping mentioned in the article earlier, ‘Rapid Prototyping: Deliver an experience, not a document’, here are some further thoughts on ‘Goal based types’ of prototypes.

Structure of this article: 🛠

In the design process- (Discover — Define — Design — Test) there are various goals tied to each phase. There could be types of prototypes that can be helpful based on goal at the given point in any phase.

That is how this article is structured:

Each section is detailed using the following breakdown:
0. The phase of the process, and its goal
1. Prerequisites 
2. What needs to be done?
3. Definition
4. How to do? Suggested Tools
6. Expected results


Define Phase

Goal

To define and communicate the foundation of the product.

Prerequisites

  • Have passed the Discover phase of the design process
  • Have good enough understanding and clarity about the domain, users, and requirements.

What needs to be done?

  • Need to validate and communicate the foundation of the product. Show concepts, entities, and relationships in function.
  • To validate and communicate the Information Architecture, Hierarchy and workflow.
  • Other stakeholders want to know the basic flow of the product and functionalities. To understand the information structure and its relationships.

01. FLOW DEFINING PROTOTYPE

Goal

  • To take the requirements forward — from the zero state.
    e.g. “User needs a login page” towards adding various states, actions, and their reactions. Almost like a ZONE FLOW (Gives a good idea of the number of pages)

(The prototypes in this article are demonstrated using an example flow of login, ‘forgot password’, and sign up.)

02. CONTENT DEFINING PROTOTYPE

Goal

  • Move the requirements even further by adding accurate content to the flow. Almost like a ‘WIRE FLOW’ (Clickable Wireframes)

How to do?

  • Identify scenarios that would address all the requirements and storyboard on paper.
  • Use prototyping tools which have inbuilt UI elements.

Suggested tools —

Paper sketch, Axure, Just in mind, Adobe XD, etc.

What to expect?

  • Clarity of requirements.
  • Iteration of the workflow.
  • Decisions about various states, exceptions, content and actions.
  • Identify unique patterns to be designed.
  • Test early feedback of users.

Design Phase

Goal

To give a shape to the product, to design the product.

Prerequisites

  • You have passed the Discover phase of the design process. You have a good enough understanding and clarity about the domain, users and requirements.
  • You are clear on workflows and also have a fair enough idea about the structure.
  • You might or might not have finished working on the visual design, and have the UI component library ready for the product.

What needs to be done?

  • To verify whether everything is working, combining the workflow with the design system.
  • To give a precise, clear and exact idea of the product, its functions, and workflows.

03. VISUALLY IDENTICAL PROTOTYPE

is a prototype that is made using the actual UI components from the visual design or design system of the product. It looks like an actual product.

Goal & Benefits

  • Usually, to be as close as possible to the real product.
  • Gives a very good idea of how it will look and feel.
  • Extremely powerful for final decision making.
  • For demonstrating the product to potential clients, before having to finish developing it.

04. TRANSITIONS AND MICRO INTERACTION PROTOTYPE

A prototype demonstrating the transitions, micro interactions in a product, might not necessarily demonstrate an entire workflow. 
This type of prototype is highly dependent on the scope of the project.

Goal & Benefits

  • Behaviours of various patterns, transitions between various screens, etc that help in giving life to the product.
  • To come up with precise keyframe animation.
Source: Internet

How to do?

Use prototyping tools which help in the efficient moving of visuals from design tool e.g. plugins to auto sync, copy/paste, export PNGs, etc.

Suggested tools —

Dynamic tools are recommended to accommodate iteration and updates.

What to expect?

Communicate the final look and feel.
Evaluate technical feasibility and iterate if something is infeasible.
Sell the product (to potential buyers, investors, etc)


Conclusion

You might have also noticed the difference in the level of details in each type of the prototype.

Bird’s eye view 🦅 — to ant’s eye view 🐜

Usually, in the initial phases, you look at the prototype from the bird’s eye view, gradually you zoom in, and zoon in more and reach the insect’s eye view.

For eg. In the initial prototype, i.e. flow defining prototype, we were focused on making the flow clear. whereas in the visual prototype, we also thought about various states, like error state, etc.


A rapid prototype has no ‘one definition’. There are various ways it can be approached on the basis of many factors:
1. The phase of design that you are in.
2. What is the goal?
3. What do you want to communicate?
4. To whom?
5. How much time you have?

etc.

Stay tuned for more aspects of rapid prototyping:
- Structure-based types & tools
- How to evaluate a prototyping tool?

Happy (Rapid) Prototyping!

Co-Authored by bhaktidudhara