School of Information Systems

What is Prototyping

Many people ask about What is Prototyping? Why we need to create prototype for our application or our website? Well, we can simply define prototype is the iterative process of building, testing, and adapting your idea or solution based on defined business goals, performance metrics, and user feedback. It’s not as complicated as it may sound : Any exercise in visually or interactively demonstrating your health technology can be considered a prototype. The process of making prototype will depend on your project, leveraging the major questions that surfaced during the research phase.

To design a prototype, you needs to involve in several design thinking process, which are Emphatize -> Define -> Ideate -> Prototype -> Test.

  1. Emphatize : In this step, you gather the idea from targeted users by review the current process that they facing right now, and what are the difficulties and expectation from users.
  2. Define : After you gather idea from targeted users, you try to formulate your idea, and think about your idea of application or website that you want to make.
  3. Ideate : You come up with your final idea and ready to explain your final idea, you start to design user journey in your application.
  4. Prototype : In this step, you create your low fidelity and then high fidelity prototype.
  5. Test : After your prototype has been done, you do usability testing to the users to get feedback about your application or website.

In this process, each iteration is cheaper than full-scale waterfall iterations. More iterations are possible, and give early feedback about a design is a must. This iteration can mitigate risk in early stages of design.

There are 2 types of prototype, which are Low Fidelity Prototype and High Fidelity Prototype. I will explain the differences :

  • Low Fidelity Prototype

In early stage of making prototype, you can creates low fidelity prototype by using paper prototyping (sketch) of create wireframe by using software like MIRO. The form and visual representation prototype utilizes sketches, wireframes, and app layouts to communicate your idea. This is perfect for innovators with limited technical knowledge. It enables rapid

iterations toward you final platform. Wireframe represent a software technology as intended for display to users. The can represent a variety of interface, including a mobile app, website, portal or dashboard, balancing market research with your own innovative design.

  • High Fidelity Prototype

After you create low fidelity prototype in wireframe, you can revise your design by using high fidelity software like Marvel, Figma, or Proto.io to make your design getting similar to the real application or website that you want to implement later. In this level of prototype, you must applied interaction design in every part of your prototype, which also include the real menu, icon, sentences that you will use in the real application. User can try to move from one page to another page in an easy way.

Marisa Karsen