Batangas State University

College of Engineering, Architecture and Fine Arts

ENGG 401 - INTRODUCTION TO ENGINEERING

MODULE 4
PROTOTYPING, RAPID PROTOTYPING,
PRETOTYPING, LOFI HIFI

Dr. Elisa D. Gutierrrez

Engr. Janice F. Peralta
Engr. Danica Marie B. Mercado
 TABLE OF CONTENTS

ENGG 401 - INTRODUCTION TO ENGINEERING 1

Course Rationale and Description 1
Intended Learning Outcome 1
Criteria for Assessment 1
Supplemental Content 1

MODULE 4 - PROTOTYPING, RAPID PROTOTYPING, PRETOTYPING, LOFI HIFI 2

Introduction 2
Topic Outcome 2
Lectures 2
Prototyping: Varied Definitions and Descriptions 2
Advantages of Prototyping 3
Types of Prototypes 4
Activity 6
Supplemental Content 6
References 6
ENGG 401 - INTRODUCTION TO ENGINEERING

Course Rationale and Description

Introduction to Engineering is a course designed to teach students about the different

engineering fields and expose them to research opportunities, career possibilities, and
coursework that will challenge and engage them. Engineers must be problem solvers, creative
thinkers, and leaders in order to be successful in the profession. For this to happen, students
need to stay in engineering programs, be pleased with their choice of major, and develop
engineering identity. This introductory course provides a framework for the practice of
engineering. This framework is a broad outline of the tasks and responsibilities of an engineer,
and the use of disciplinary knowledge in executing those tasks. Further, this course aims to
stimulate students' interest and strengthen their motivation for, the field of engineering by
focusing on the application of relevant core engineering disciplines. The course also includes
personal and interpersonal skills knowledge, skills, and attitudes that are essential at the start of
a program to prepare students for a more advanced product, process, and system building
experiences.

Intended Learning Outcome

● ILO1 ​- Develop professional behavior and a code of ethics in areas like project
management, teamwork, and leadership.

● ILO2 ​- Demonstrate understanding in design thinking and engineering design

process to create effective problem statements, and design, build, test, and analyze
a simple prototype product that addresses realistic constraints and system
requirements while using basic project management techniques.

● ILO3 ​- Apply appropriate design process, prototyping, and modern engineering tools
in activity/project building.

Criteria for Assessment

Group Project (GP) 45%
Experiential Learning Activities (ELA) 25%
Self and Peer Assessment (SPA) 10%
Midterm Exam (ME) 20%

Supplemental Content
Course Information Syllabus (CIS) (​link​)
Introduction to Engineering Website (​link​)

1 | ​ENGG 401 - Introduction to Engineering

MODULE 4 - PROTOTYPING, RAPID PROTOTYPING, PRETOTYPING,
LOFI HIFI

Introduction

Prototyping is a step to materialize an idea. Prototypes are the sample version of the
product you intend to function as a solution to a specific problem or need. Through prototypes,
testing and iteration or repetition with improvement is possible before someone arrives into a
final output. Prototypes come in different forms, from the low to high fidelity, to simple sketches
to innovative digital.

This module intends to discuss the concept of prototyping and its types along their
applications. Also, tools and techniques available to attain such prototypes will also be
presented.

After going through this module, it is expected that you can explore the options and use
them in your final design output, to your future engineering courses and to your other potential
design endeavors and activities. You can also look into various choices of materials, and select
upon which fits your idea the most, considering also the need of your target market or audience.
Be ready to test, to deal with users, and learn from their feedback as prototyping and testing
come hand in hand. Skills on making informed design decisions thereafter is expected after
finishing the module, alongside the activities for the whole course, allowing you to be engaged
on prototyping and designing.

Topic Outcome

1. Differentiate types of prototyping and its application

2. Apply common techniques employed in LoFi and HiFi Prototyping

Lectures

Prototyping: Varied Definitions and Descriptions

A primitive representation or version of a product

Smith (2019) defines prototyping as building a primitive representation or version

of a product that a design team or front-end-development team typically creates during
the design process. The goal of prototyping includes testing the flow of a design solution
and gathering feedback as basis for iteration before constructing the final product.

An Experimental Process

2 | ​ENGG 401 - Introduction to Engineering

 Introduction to Engineering

Prototyping is defined by Interaction Design Foundation as an experimental

process where design teams implement ideas into tangible forms from paper to digital.
Teams build prototypes of varying degrees of fidelity to capture design concepts and test
on users. With prototypes, you can refine and validate your designs so your brand can
release the right products.

Building a model of a system.

University of Missouri-St. Louis defines prototyping as the process of building a

model of a system. Prototyping as an iterative process is a part of the analysis phase of
the systems development life cycle as it converts specifications into a tangible but limited
working model. Through a physical system as a prototype, user feedback is gained and
facilitates an evaluative response that the analyst can employ to modify existing
requirements as well as in developing new ones.

Initial stage of a software release

Techopedia defines prototyping as “an initial stage of a software release in which

developmental evolution and product fixes may occur before a bigger release is initiated.
These kinds of activities can also sometimes be called a beta phase or beta testing,
where an initial project gets evaluated by a smaller class of users before full
development”.

Advantages of Prototyping

1. It involves user

Prototyping allows the inputs from the users through the testing stage, as they try
the sample version or model, and provide feedback. Being able to seek their involvement
may reduce misunderstandings and prevent unfulfilled expectations as they may suggest
changes or modify the details of the provided working prototype.

2. It saves money.

Since prototyping is considered an experimental process, you start with a draft

version to show the intention behind a concept to users before investing time and money
into development. Prototypes need not to be of expensive materials and may be
considered a trial version. Also, prototyping allows early changes, thereby avoiding
commitment to a single considered ideal-version, and later incurring heavy costs due to
oversights.

3 | ​Module - Prototyping, Rapid Prototyping , Pretotyping LoFi Hifi

 Introduction to Engineering

3. Results in higher user satisfaction.

Prototypes increase the quality and amount of communication between the

developer and the end user. The user’s feedback after seeing potential benefits, risks
and costs through the prototype are used as foundation from which to ideate towards
improvements, resulting in higher user satisfaction. Users get to have a sense of
ownership with the emotional investment they share as their feedback is valued.

4. Exposes developers to potential future system enhancement.

Exposing the prototype to users and being open to receiving criticism and
suggestions helps you pinpoint which elements/variants work best and which do not or
those that need make-over. Sometimes, their point of view opens up opportunities for
other development or potential inspirations for innovation or invention

Types of Prototypes

1. According to Fidelity

Fidelity relates to the intricacy of the details incorporated on the prototype and its
level of functionality. Depending on the product’s development stage, the prototype may
simply be presenting a small aspect or could be the complete picture of the entire
system. The level of fidelity you choose should be appropriate for presenting to users in
user testing so they can give focused feedback.

❏ Low-fidelity prototypes

Low-fidelity prototypes are usually paper-based ranging from sketches,

hand-drawn concepts to print outs. These are helpful to visualize a range of possible
alternative design solutions, promoting brainstorming among the members of the design
team, and the users. An advantage of this approach is that its simplicity makes the users
feel more comfortable in suggesting changes. However, some consider paper prototypes
lacking realism, and may limit the feedback of the users. It may require them longer time
to process as they need to imagine how it works or how to use it as there is limitation on
the offered interaction or user experience during the testing

Samples:
Paper Prototypes
Sketches
Journey maps
Behavior maps
System flow diagrams
Storyboards

4 | ​Module - Prototyping, Rapid Prototyping , Pretotyping LoFi Hifi

 Introduction to Engineering

❏ High-fidelity prototypes

These are computer-based and/or digital making use of softwares. Lectures on

available tools you may use will further be discussed on Module six. While your previous
experiential learning activities on design thinking provided opportunities to learn some of
the available softwares such as Tinkercad, Sketch or Adobe XD. An advantage of Hifi
prototypes includes its ability to be engaging. It provides opportunity for the users to
realize more of the real features of the potential final product, and have a more valid user
experience. However, this requires longer time to create, needing skills and knowledge
on the use of the softwares, and access to the software.
Samples:
interactive prototypes
digital prototypes
coded prototypes

2. According to form

❏ Role-Playing

Role-playing, or experiential prototyping, is a method that allows your design

team to explore scenarios within the system you are targeting physically. Role-playing is
usually used for capturing and expressing the users’ emotional experience of using a
product or service and to gain an empathic understanding of your users. Role-players
reenact situations on the experience and use of the prototype to gain insights and seek
areas for improvement. Role-playing may be used with varying levels of detail, but the
best experience happens when the physical environment of the user is simulated.

❏ Physical Models

The purpose of a physical model is to bring an intangible idea, or

two-dimensional sketch, into a physical, three-dimensional plane. This allows for much
better testing with users, and it can spark discussions about the form factor of the
solution. Materials that can be used here may range from papers, cardboards, clay,
foam, or anything that can build physical models.

Rapid Prototyping

Rapid prototyping aims to develop learning experiences in a continual

design-evaluation cycle throughout the life of the project. This cycle, known as the spiral
cycle or layered approach, is considered to be iterative, meaning that products are
continually improved as the cycle continues.

5 | ​Module - Prototyping, Rapid Prototyping , Pretotyping LoFi Hifi

 Introduction to Engineering

This can be seen more clearly by comparing Rapid Prototyping with a traditional
development model:

Table . Classic Design Model vs Rapid Prototyping

Classic Design (waterfall) Model Rapid Prototyping (spiral) Model

1. concept definition 1. concept definition

2. requirements definition 2. implementation of a
3. preliminary design skeletal system
4. detailed design 3. user evaluation and
5. code implementation concept refinement
6. test and acceptance 4. implementation of refined
7. griping because you now requirements
realize that there was 5. user evaluation and
something that got left out concept refinement
in step 2 6. implementation of refined
requirements
7. etc., etc., in a continuous
cycle

Rapid prototyping allows the designer to start with a low fidelity medium (such as
paper and pen) and move to increasingly higher fidelity prototypes as time goes on.

There are two types of prototypes that can be developed:

● Vertical Prototypes – in-depth functionality for a few or sample features
● Horizontal Prototypes – entire screen or the whole prototype with no
underlying functionality

Activity
Review Quiz 4 [​Google Form​]

Supplemental Content
Watch the following videos about “Prototyping” in Introduction to Engineering website
[ ​link​ ]

References

C. Melissa Mcclendon, Larry Regot, Gerri Akers. (2012, April 2). Prototyping. UMSL.
http://www.umsl.edu/~sauterv/analysis/prototyping/proto.html
Dam, R. F., & Siang, T. Y. (n.d.). Prototyping: Learn Eight Common Methods and Best
Practices. Retrieved August 8, 2020, from
https://www.interaction-design.org/literature/article/prototyping-learn-eight-common-method

6 | ​Module - Prototyping, Rapid Prototyping , Pretotyping LoFi Hifi

 Introduction to Engineering

s-and-best-practices
Prototyping. (n.d.). Usability.gov. Retrieved August 5, 2020, from
https://www.usability.gov/how-to-and-tools/methods/prototyping.html
Prototyping. (2017, June 9). Techopedia.
https://www.techopedia.com/definition/13136/prototyping
Rapid Prototyping. (2018, November 30). Retrieved August 08, 2020, from
https://www.instructionaldesign.org/models/iterative_design/rapid_prototyping/
Smith, Q. (n.d.). Prototyping User Experience. Retrieved August 8, 2020, from
https://www.uxmatters.com/mt/archives/2019/01/prototyping-user-experience.php
What is Prototyping? (n.d.). Interactive Design Foundation. Retrieved August 5, 2020, from
https://www.interaction-design.org/literature/topics/prototyping?ep=ixdf-mediu​m

7 | ​Module - Prototyping, Rapid Prototyping , Pretotyping LoFi Hifi