Prototype: Its methods, techniques, and key features.

Copyright © 2019 ONE BCG. All rights reserved.
Rapid Prototyping

2
• What is Prototype?
• Prototyping
• What is Rapid Prototyping?
• Rapid Prototyping Process
• Tools for Rapid Prototyping
• Case Study
Topics to Cover

3
• A prototype is a draft version or an approximation of a final product.
• Representation of a design that allows users to interact with it and explore its
suitability.
• Production of an intermediary product to be used as a basis for testing.
What is a Prototype?

4
• To Identify possible problems.
• To confirm the suitability of a design.
• Testing can be done more effectively.
• Stakeholders can see, interact with a prototype more easily than a
drawing.
• Prototype encourage collaboration.
• Save time, effort and money.
Why Prototypes?

5
Prototyping is the way to find what doesn’t work early and cheap, and spend your time
and money on solutions that do work.
Prototyping

6
• The term “Rapid” is Relative.
• Agile strategy is used throughout the product development process.
• Layer by layer formation of any product.
• Helps in earlier detection and deduction of design and errors.
• Rapid Prototyping decreases development time by allowing corrections to a product to
be made early in the process.
Rapid Prototyping

7
Rapid Prototyping: Design Thinking Process

8
• The first stage of the Design Thinking process is to gain an empathic understanding
of the problem you are trying to solve. This involves consulting experts to find out
more about the area of concern through observing, engaging and empathizing with
people to understand their experiences and motivations, as well as immersing
yourself in the physical environment so you can gain a deeper personal
understanding of the issues involved.
• During the Define stage, you put together the information you have created and
gathered during the Empathise stage. This is where you will analyse your
observations and synthesise them in order to define the core problems that you and
your team have identified up to this point.
Stages

9
• During the third stage of the Design Thinking process, designers are ready to start
generating ideas. You’ve grown to understand your users and their needs in the
Empathise stage, and you’ve analysed and synthesised your observations in the
Define stage, and ended up with a human-centered problem statement.
• The design team will now produce a number of inexpensive, scaled down versions of
the product or specific features found within the product, so they can investigate the
problem solutions generated in the previous stage. Prototypes may be shared and
tested within the team itself, in other departments, or on a small group of people
outside the design team.
• Designers or evaluators rigorously test the complete product using the best solutions
identified during the prototyping phase

10
• Scope the prototype: Figure out what exactly we want to build.
• Craft persons & user scenarios: Once we know the area for prototyping, we need to
know the who, why and how of the UX.
• Iterate gather feedback: Start with breadth and then dive into depth. You’ll usually
start with a horizontal prototype (main landing pages and homepage) and then
iterate into vertical prototypes based on specific user flows (like uploading, editing,
and tagging friends in your photo).
Rapid Prototyping Process

11
• Sketch each screen: Each screen’s sketch should be creative.
• Create user scenarios: Create a realistic scenario to run through, either to
demonstrate for a presentation or for your test-takers to try to figure out.
• Rehearsal: Run through the different scenarios until the “human computer” works a
real machine.
• Presentation: For presentations, just run through the scenario as rehearsed.
Paper Prototyping: Prototyping method

12
• Rapid Iteration
• Low Budget
• Fun collaboration
• Easy documentation
Advantages of Paper Prototyping

13
Modern Prototyping Tools

14
Advantages:
• Familiarity:
• Basic element libraries
• Natural Linear flow
• Low cost
• Less time consuming
Presentation Software

15
Key Features:
• Free Samples:
• Drag- and- drop:
• Library of UI elements:
• Rough wireframes
Prototyping Tools - Balsamiq Mockups

16
An easier web, desktop and mobile prototyping tool.
Key features:
• Built- in Libraries:
• Gesture and Transitions: Provides a lot of possibilities using the free plan, and allows
add gestures and transitions between pages.
• Good Exports: Supports the feature to export the entire view and use it as a flow
document.
• Live Video Presentation:
Prototyping Tools - Fluid UI

17
• The best UX design tool
• Allows Photoshop mock-ups to be
imported into a design for testing.
• Can add interactive elements such
as button and form fields
• Easy to collect notes on annotation
• The better collaboration of designs
Prototyping Tools -Invision

18
Rapid prototyping is a method used to accelerate the innovation process. This method
was used to create one of Google's newest inventions, Google Glass.
Watch Video - https://www.youtube.com/watch?v=d5_h1VuwD6g
For Web Applications Following Methods are used:
1. Paper Prototyping
2. Digital Prototyping
3. Native Prototyping
Case Study : How Google Implemented Rapid Prototyping

19
• Use of the scissor and paper
• Create more realistic sketches of the
application that needs to be delivered.
• Easy and fast to communicate
• Key user interaction
• Purposeful use of color
• Explore elevation and shadows
• Easy to visualize the workflow
• Simulate Interactions
Click to watch video
Paper Prototyping

20
Digital Prototyping

21
• The next step is to continue digitally.
• Abstract ideas in words are quite difficult, Visual is best to explain
• Gives the Idea, how the application will exactly look
• Focus on functionality.
• Artifact for testing and communication.
Click to Watch Video
Digital Prototyping

22
• Explore technology
• Library
• Write code in a way that it is
your paintbrush.
• Paint the application with
effective coding skills.
• Proficient in making working
prototypes.
Click to Watch Video
Native Prototyping

23

Prototype: Its methods, techniques, and key features.

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Prototype: Its methods, techniques, and key features.

Similar to Prototype: Its methods, techniques, and key features. (20)

More from ONE BCG

More from ONE BCG (11)

Recently uploaded

Recently uploaded (20)

Prototype: Its methods, techniques, and key features.

Editor's Notes