PROTOTYPEING

UNIT IV
SYLLABUS
What is prototyping, Types of Prototyping, Storyboard prototype, Prototype Types and Test Techniques,
Process of prototyping –MVP(minimal viable product), Rapid Prototyping Techniques, Tools for Prototyping
AI: Wireframes, Storyboards, Building Low-Fidelity AI Prototypes.
What Is a Prototype?
Prototyping is a key stage in the design thinking process, where teams create a
tangible representation of an idea or solution to test it. Prototyping helps
designers understand users, learn about their needs, and improve their ideas.

Prototype is an early version of a software product or product concept created

to help understand its functionalities and design. Prototypes are mainly used to
display how a new design or a feature meets its end-users requirements and
desires.
Prototyping
• Prototyping is an approach that makes ideas and concepts more
tangible and visual as compared to written ideas.
• It helps us to empathize with the user in terms of the viability of the
solution and further minimizes the risk of failure at large scale.
• Prototyping is the process of transferring ideas and experiments
from your head to the physical world. A prototype can be a wall of
post-it notes, a role-playing exercise, a space, an object, an
interface, or even a storyboard.
• Prototypes are how you start bringing your ideas to life, ready for
testing.
• Building prototypes makes the selected ideas tangible and perceptible.

• Prototypes range from a simple critical function prototype to the final prototype.

• To build a prototype, we use simple materials that are good enough to test a function or an
experience.
• The “prototype” phase is closely connected to the following “test” phase.

• The feedback from the tests is used to learn more about the user and to improve or discard the
current prototype.

• This procedure is reflected in the design thinking motto: Love it! Change it! Or leave it! Early failure
gives us the opportunity of learning and building a better prototype in the next iteration.
How to carry out Prototyping?
Types of prototyping:

In design thinking and product development, prototyping is essential for iterating on ideas and testing concepts,

• Low-Fidelity Prototypes

• Medium-Fidelity Prototypes

• High-Fidelity Prototypes
Low-fidelity prototypes:
• Low-fidelity prototypes are basic, simplified representations of a design concept. They are often created using
inexpensive and readily available materials such as paper, cardboard, or foam.
• Low-fidelity prototypes are typically quick and easy to produce, allowing designers to generate multiple
iterations rapidly.

• These prototypes are useful in the early stages of the design process, where the focus is on exploring different
ideas and gathering initial feedback.
• Low-fidelity prototypes help designers test the overall concept, basic functionality, and user interactions. They
are particularly effective for identifying major design flaws and gathering broad feedback on the overall user
experience.

• A design thinking prototype example can be the design of a mobile app, a low-fidelity prototype could be
created using paper cutouts representing different screens and interactions.
• This prototype can be used to simulate user interactions and gather feedback on the app's flow and usability.
Medium-Fidelity Prototypes

• Medium-fidelity prototypes offer a higher level of detail and functionality compared to low-fidelity prototypes.

• They are created using more advanced prototyping tools and materials, such as digital wireframing software, 3D
modeling, or interactive mockups.

• Medium-fidelity prototypes provide a closer approximation of the final product's look, feel, and interactions.
• These prototypes are suitable for testing specific features, gathering more detailed user feedback, and evaluating the
feasibility of technical aspects.

• Medium-fidelity prototypes allow designers to refine the visual design, test specific interactions, and assess the
overall user experience in a more realistic manner.

• Example:
• The mobile app example, a medium-fidelity prototype could be created using interactive wireframing software. This
prototype would allow users to navigate through the app's screens, interact with buttons and menus, and provide
feedback on specific features.
•Examples:

•Interactive Learning Modules: For educational software, high-fidelity prototypes can include detailed
course content, interactive quizzes, and multimedia elements.
•Example: A prototype of an online learning platform where users can engage with interactive exercises,
view instructional videos, and track their learning progress.
•Example: An e-commerce site prototype where users can interact with the shopping cart, filter products,
and view product details as they would on the final site.

Mobile Apps
Clickable App Prototypes: A high-fidelity prototype of a mobile app will often include detailed graphics,
animations, and interactions that simulate the actual user experience. Tools such as InVision used for this
purpose.
Example: A prototype for a fitness tracking app that includes interactive graphs showing workout
progress, a functioning calendar for scheduling workouts, and notifications for reminders.
High-Fidelity Prototypes
• High-fidelity prototypes are the most advanced and realistic representations of a design concept.

• They closely resemble the final product in terms of visual design, functionality, and user interactions.

• High-fidelity prototypes are often created using specialized software tools, coding, or even physical
manufacturing techniques such as 3D printing.

• These prototypes are ideal for conducting comprehensive user testing, gathering detailed feedback,
and evaluating the design's final look and feel.

• High-fidelity prototypes enable designers to simulate complex interactions, test usability, and assess
the overall user experience with a high level of accuracy.

• In the mobile app example, a high-fidelity prototype would be a fully functional and visually polished
version of the app. Users would be able to interact with all features, experience realistic animations and
transitions, and provide feedback on the final design before the actual development phase.
 Prototyping Techniques and Tools:
Paper Prototyping:

 Technique: Create sketches or cutouts representing the interface or product features on paper. Users interact with
these paper models to simulate how the product might work.
 Use Case: Useful for initial concept exploration and early-stage usability testing.
 Advantages: Low cost, quick to create, easy to iterate.

Wireframing

 Technique: Develop basic, low-fidelity layouts that outline the structure and elements of a user interface without
detailed design or content.
 Use Case: Ideal for mapping out the user flow and layout of digital products like websites and apps.
 Advantages: Focuses on functionality and user experience, quick to create.
Clickable Prototypes:

 Technique: Create digital models with clickable elements that simulate user interactions and navigation.
 Use Case: Suitable for testing user interactions and navigation flows.
 Advantages: Provides a more interactive experience than static wireframes, useful for user testing.

Functional Prototypes:

 Technique: Build prototypes that include interactive elements and limited functionality, often using advanced tools or
code.
 Use Case: Useful for testing complex interactions and gathering detailed feedback.

 Advantages: More realistic user experience, helps in identifying usability issues.

3D Prototyping:
 Technique: Use 3D modeling and printing to create physical models of a product or component.

 Use Case: Ideal for physical products, packaging, or hardware design.

 Advantages: Provides a tangible sense of scale, material, and ergonomics.

Mockups
 Technique: Build detailed and often high-fidelity physical or digital models that closely resemble the final product.
 Use Case: Suitable for final-stage testing and presentations.
 Advantages: Realistic representation, useful for stakeholder reviews and user feedback.

Storyboards
 Technique: Create sequential drawings or visuals that depict the user’s interaction with a product or service over time.
 Use Case: Useful for illustrating user scenarios and interactions in a narrative format.
 Advantages: Helps visualize user journeys and context.
A storyboard prototype
A storyboard prototype is a visual tool used to outline and explore the flow of a user’s
interaction with a product, service, or system. It’s a series of illustrations or images that
depict how users will interact with the system over time. Storyboards help visualize the
user experience and can be used to communicate ideas, test concepts, and gather
feedback early in the design process.
Key Characteristics of Storyboard Prototypes
•Sequential Layout: Storyboards display a sequence of steps or stages in a user's
journey, illustrating how they will interact with the product or service.
•Visual Representation: They use drawings, sketches, or digital images to show
different screens, actions, and user experiences.
•Focus on Narrative: The emphasis is on telling a story about the user’s experience
rather than providing detailed, interactive elements.
Real-Time Examples of Storyboard Prototypes
1. Mobile App Design
•Example: Travel Booking App
• Scenario: A company is designing a new travel booking app and wants to map out
the user journey from searching for flights to booking a trip.
• Storyboard Prototype: The team creates a series of sketches showing different
screens and user actions, such as entering travel dates, browsing flight options,
selecting a flight, and completing the booking process.
• Outcome: This storyboard helps the team visualize the entire user journey,
identify potential issues, and ensure a smooth flow before developing detailed
screens and interactions.
Real-Time Examples of Storyboard Prototypes
1. Mobile App Design
•Example: Food Delivery App
• Scenario: A company is designing a new food delivery app for
busy professionals who often work late and prefer ordering food
online.
• Storyboard Prototype: The team creates a series of sketches
showing different screens and user actions, such as entering
Discovering the App, Exploring Restaurants, Selecting Meals,
customize order, checking out, receiving order, feedback.

• Outcome: This storyboard helps the team visualize the entire

user journey, identify potential issues, and ensure a smooth flow
before developing detailed screens and interactions.
MVP(minimal viable product)

An MVP (Minimum Viable Product) is developed with essential features to

meet early users' needs and gather user feedback. It provides functional value
without being fully polished. In contrast, a prototype is an early model
focusing on design and functionality validation, used to test and refine
concepts initially
What is rapid prototyping?

Rapid prototyping is a design workflow that includes prototyping and testing a design
solution with users and stakeholders to help designers and product teams refine and
validate ideas quickly.

What is rapid prototyping used for?

The main goal of rapid prototyping is to get effective insights and user feedback early,
refining the design until it meets all user requirements and needs.
Why is rapid prototyping important?
Rapid prototyping is an essential part of the user interface design process. It allows
designers and product managers to test new concepts and theories with users and
create a final solution that has been validated before handoff. Instead of waiting until
launch to find out if a new product or feature performs well, rapid prototyping
enables product teams to get the insights they need earlier in the process.
Low-fidelity prototypes
The simplest way to start prototyping is to use pen and paper and create what's
known as a paper prototype. This type of prototype is usually referred to as a low-
fidelity prototype because of its minimal level of interactivity, visuals, and content.

High-fidelity prototypes

Designers usually create high-fidelity prototypes to validate the final design and uncover
any usability issues before starting development. One of the main benefits of high-
fidelity prototypes is that you can test specific design elements and interactions and get
more accurate feedback.
Rapid prototyping use cases
Rapid prototyping is valuable at all stages of the product development process. Let's
take a look at some common use cases:
Validating new product ideas or concepts: Prototypes can be used to test ideas and
concepts early on to determine which ones add real value for users. In this way, you
can focus your efforts on building a solution that meets users’ needs and expectations
before starting development, saving precious time and resources.
Market validation: Rapid prototyping can be an invaluable tool for market validation.
Instead of just imagining your product, users can interact with a prototype and
provide better insights into what works and what doesn’t.
Testing new features with users: If you want to test new features, building a
prototype is the best way to go about it. You can see how users interact with your
prototype, identify issues and pain points, and understand what works and what
requires attention and iteration.
Example :Gaming Industry

Video Game Level Design

• Scenario: A game developer is working on a new level for an existing game and
needs to test different design elements and mechanics.
• Rapid Prototyping Approach: They create a basic, playable version of the level
using game development tools. This prototype includes the core gameplay
mechanics and level layout but may not have final graphics or sound.
• Outcome: The prototype is tested by gamers to identify issues with gameplay,
level design, and overall enjoyment. The team uses this feedback to make
adjustments and improvements before developing the final version.
Tools for Prototyping AI:
1. Wireframes
2. Storyboards
Prototyping Tools
1.Sketch
• A vector design tool popular for UI/UX design, allowing easy prototyping.
2.Figma
• A collaborative interface design tool that supports real-time editing and prototyping.
3.Adobe XD
• A design tool for creating user experiences with prototyping features.
4.InVision
• Focuses on creating interactive prototypes and collecting feedback.
5.Axure RP
• Advanced prototyping tool that allows for detailed wireframes and interactive elements.
6.Balsamiq
• Low-fidelity wireframing tool, great for quick sketches and layouts.
7.Marvel
• Simple tool for prototyping and user testing, with easy integration for design handoffs.
8.Webflow
• Allows designers to create responsive prototypes directly in a web environment.
Cont..