SlideShare a Scribd company logo
Copyright © 2019 ONE BCG. All rights reserved.
Rapid Prototyping
2
Copyright © 2019 ONE BCG. All rights reserved.
• What is Prototype?
• Prototyping
• What is Rapid Prototyping?
• Rapid Prototyping Process
• Tools for Rapid Prototyping
• Case Study
Topics to Cover
3
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
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
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
Rapid Prototyping: Design Thinking Process
8
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
• Rapid Iteration
• Low Budget
• Fun collaboration
• Easy documentation
Advantages of Paper Prototyping
13
Copyright © 2019 ONE BCG. All rights reserved.
Modern Prototyping Tools
14
Copyright © 2019 ONE BCG. All rights reserved.
Advantages:
• Familiarity:
• Basic element libraries
• Natural Linear flow
• Low cost
• Less time consuming
Presentation Software
15
Copyright © 2019 ONE BCG. All rights reserved.
Key Features:
• Free Samples:
• Drag- and- drop:
• Library of UI elements:
• Rough wireframes
Prototyping Tools - Balsamiq Mockups
16
Copyright © 2019 ONE BCG. All rights reserved.
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
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
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
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
Digital Prototyping
21
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.
• 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
Copyright © 2019 ONE BCG. All rights reserved.

More Related Content

What's hot (20)

PDF
Responsive Design and Joomla!
JoomlaChicago - Loop
 
PDF
Prototyping
Chad Udell
 
PPTX
Rapid Prototyping in UX Design
Stephen Denning
 
PDF
Mobile Prototyping
Donna Lichaw
 
PDF
Innovation in software architecture
Vishy Poosala
 
PDF
Designers are from Venus - Presentationas Given to CD2
Chad Udell
 
PPTX
Prototyping: A Component for Successful Projects
Chris Griffith
 
PDF
Connected Product Experiences
Alexandra Deschamps-Sonsino
 
PPTX
Prototyping and Piloting
Fung Hoi Si
 
PPTX
User-centered UX: Bringing the User into the Design Process
Dave Cooksey
 
PDF
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
Anton Chandra
 
PPTX
A Systematic Approach to Design Critique
TryMyUI
 
PPTX
Lean UX: Building a shared understanding to get out of the deliverables business
Jeff Gothelf
 
PDF
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
Anton Chandra
 
PDF
LeanUX - Presentation slides
Jose E. Rodriguez Huerta
 
PDF
Design Process YouTube
Hong Qu
 
PDF
Rapid Prototype the User Experience
Hong Qu
 
PDF
Lean UX
Chester Yiu-Lam Ip
 
PDF
STLCC 2017 Support for speculative thinking reflecting on a creative collabor...
Solent Learning and Teaching Institute
 
PPTX
Intro to user centered design
Rebecca Destello
 
Responsive Design and Joomla!
JoomlaChicago - Loop
 
Prototyping
Chad Udell
 
Rapid Prototyping in UX Design
Stephen Denning
 
Mobile Prototyping
Donna Lichaw
 
Innovation in software architecture
Vishy Poosala
 
Designers are from Venus - Presentationas Given to CD2
Chad Udell
 
Prototyping: A Component for Successful Projects
Chris Griffith
 
Connected Product Experiences
Alexandra Deschamps-Sonsino
 
Prototyping and Piloting
Fung Hoi Si
 
User-centered UX: Bringing the User into the Design Process
Dave Cooksey
 
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
Anton Chandra
 
A Systematic Approach to Design Critique
TryMyUI
 
Lean UX: Building a shared understanding to get out of the deliverables business
Jeff Gothelf
 
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
Anton Chandra
 
LeanUX - Presentation slides
Jose E. Rodriguez Huerta
 
Design Process YouTube
Hong Qu
 
Rapid Prototype the User Experience
Hong Qu
 
STLCC 2017 Support for speculative thinking reflecting on a creative collabor...
Solent Learning and Teaching Institute
 
Intro to user centered design
Rebecca Destello
 

Similar to What is Prototype,Rapid prototyping and Methods. (20)

PPTX
User Vision Breakfast Briefing - Prototyping
User Vision
 
PDF
MHIT 603: Introduction to Prototyping
Mark Billinghurst
 
PDF
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Mark Billinghurst
 
PDF
software Prototyping
Yahia Haider
 
PPTX
Prototyping
Eman Abed AlWahhab
 
KEY
Effective Prototyping Process for Software Creation
Jonathan Arnowitz
 
PPTX
20210821151927_ISYS6619-UX for Digital Business Topik 09.pptx
radiantknight008
 
PPT
Designing and prototyping
Andres Baravalle
 
PDF
UX/Design Thinking Prototyping Workshop
Chris Becker
 
PPTX
Rapid prototyping - Fast continuous design solutions to help realise an idea
Eewei Chen
 
PDF
The ultimate guide to prototyping
Marcelo Graciolli
 
PPTX
Prototyping and storyboarding.pptx
Lassonde School of Engineering
 
PPTX
Design Thinking : Prototyping & Testing
Sankarshan D
 
PDF
Introduction to prototyping
Alexis Antonelli
 
PPTX
Ux prototyping
Mohammed Abdallah
 
PPT
Designing and prototyping
Andres Baravalle
 
PPTX
Prototype Model
khushi kalaria
 
PPTX
HoytUX Design Process 2016
Rob Hoyt
 
PPTX
Prototyping
Eman Abed AlWahhab
 
PDF
Prototyping Workshop
Tamara Pinos
 
User Vision Breakfast Briefing - Prototyping
User Vision
 
MHIT 603: Introduction to Prototyping
Mark Billinghurst
 
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
Mark Billinghurst
 
software Prototyping
Yahia Haider
 
Prototyping
Eman Abed AlWahhab
 
Effective Prototyping Process for Software Creation
Jonathan Arnowitz
 
20210821151927_ISYS6619-UX for Digital Business Topik 09.pptx
radiantknight008
 
Designing and prototyping
Andres Baravalle
 
UX/Design Thinking Prototyping Workshop
Chris Becker
 
Rapid prototyping - Fast continuous design solutions to help realise an idea
Eewei Chen
 
The ultimate guide to prototyping
Marcelo Graciolli
 
Prototyping and storyboarding.pptx
Lassonde School of Engineering
 
Design Thinking : Prototyping & Testing
Sankarshan D
 
Introduction to prototyping
Alexis Antonelli
 
Ux prototyping
Mohammed Abdallah
 
Designing and prototyping
Andres Baravalle
 
Prototype Model
khushi kalaria
 
HoytUX Design Process 2016
Rob Hoyt
 
Prototyping
Eman Abed AlWahhab
 
Prototyping Workshop
Tamara Pinos
 
Ad

Recently uploaded (20)

PPTX
Building and Operating a Private Cloud with CloudStack and LINBIT CloudStack ...
ShapeBlue
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PPTX
MSP360 Backup Scheduling and Retention Best Practices.pptx
MSP360
 
PDF
NewMind AI - Journal 100 Insights After The 100th Issue
NewMind AI
 
PDF
Complete JavaScript Notes: From Basics to Advanced Concepts.pdf
haydendavispro
 
PPTX
Darren Mills The Migration Modernization Balancing Act: Navigating Risks and...
AWS Chicago
 
PDF
Empowering Cloud Providers with Apache CloudStack and Stackbill
ShapeBlue
 
PDF
Human-centred design in online workplace learning and relationship to engagem...
Tracy Tang
 
PDF
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
PDF
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
PDF
Why Orbit Edge Tech is a Top Next JS Development Company in 2025
mahendraalaska08
 
PDF
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
PDF
Smart Air Quality Monitoring with Serrax AQM190 LITE
SERRAX TECHNOLOGIES LLP
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PDF
Predicting the unpredictable: re-engineering recommendation algorithms for fr...
Speck&Tech
 
PDF
Persuasive AI: risks and opportunities in the age of digital debate
Speck&Tech
 
PDF
Français Patch Tuesday - Juillet
Ivanti
 
PPTX
Extensions Framework (XaaS) - Enabling Orchestrate Anything
ShapeBlue
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
Building and Operating a Private Cloud with CloudStack and LINBIT CloudStack ...
ShapeBlue
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
MSP360 Backup Scheduling and Retention Best Practices.pptx
MSP360
 
NewMind AI - Journal 100 Insights After The 100th Issue
NewMind AI
 
Complete JavaScript Notes: From Basics to Advanced Concepts.pdf
haydendavispro
 
Darren Mills The Migration Modernization Balancing Act: Navigating Risks and...
AWS Chicago
 
Empowering Cloud Providers with Apache CloudStack and Stackbill
ShapeBlue
 
Human-centred design in online workplace learning and relationship to engagem...
Tracy Tang
 
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
Why Orbit Edge Tech is a Top Next JS Development Company in 2025
mahendraalaska08
 
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
Smart Air Quality Monitoring with Serrax AQM190 LITE
SERRAX TECHNOLOGIES LLP
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
Predicting the unpredictable: re-engineering recommendation algorithms for fr...
Speck&Tech
 
Persuasive AI: risks and opportunities in the age of digital debate
Speck&Tech
 
Français Patch Tuesday - Juillet
Ivanti
 
Extensions Framework (XaaS) - Enabling Orchestrate Anything
ShapeBlue
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
Ad

What is Prototype,Rapid prototyping and Methods.

  • 1. Copyright © 2019 ONE BCG. All rights reserved. Rapid Prototyping
  • 2. 2 Copyright © 2019 ONE BCG. All rights reserved. • What is Prototype? • Prototyping • What is Rapid Prototyping? • Rapid Prototyping Process • Tools for Rapid Prototyping • Case Study Topics to Cover
  • 3. 3 Copyright © 2019 ONE BCG. All rights reserved. • 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. 4 Copyright © 2019 ONE BCG. All rights reserved. • 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. 5 Copyright © 2019 ONE BCG. All rights reserved. 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. 6 Copyright © 2019 ONE BCG. All rights reserved. • 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. 7 Copyright © 2019 ONE BCG. All rights reserved. Rapid Prototyping: Design Thinking Process
  • 8. 8 Copyright © 2019 ONE BCG. All rights reserved. • 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. 9 Copyright © 2019 ONE BCG. All rights reserved. • 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. 10 Copyright © 2019 ONE BCG. All rights reserved. • 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. 11 Copyright © 2019 ONE BCG. All rights reserved. • 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. 12 Copyright © 2019 ONE BCG. All rights reserved. • Rapid Iteration • Low Budget • Fun collaboration • Easy documentation Advantages of Paper Prototyping
  • 13. 13 Copyright © 2019 ONE BCG. All rights reserved. Modern Prototyping Tools
  • 14. 14 Copyright © 2019 ONE BCG. All rights reserved. Advantages: • Familiarity: • Basic element libraries • Natural Linear flow • Low cost • Less time consuming Presentation Software
  • 15. 15 Copyright © 2019 ONE BCG. All rights reserved. Key Features: • Free Samples: • Drag- and- drop: • Library of UI elements: • Rough wireframes Prototyping Tools - Balsamiq Mockups
  • 16. 16 Copyright © 2019 ONE BCG. All rights reserved. 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. 17 Copyright © 2019 ONE BCG. All rights reserved. • 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. 18 Copyright © 2019 ONE BCG. All rights reserved. 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. 19 Copyright © 2019 ONE BCG. All rights reserved. • 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. 20 Copyright © 2019 ONE BCG. All rights reserved. Digital Prototyping
  • 21. 21 Copyright © 2019 ONE BCG. All rights reserved. • 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. 22 Copyright © 2019 ONE BCG. All rights reserved. • 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. 23 Copyright © 2019 ONE BCG. All rights reserved.

Editor's Notes

  • #5: Prototypes help designers and developers build partial product implementations, which potential end-users or customers use to provide feedback to the development
  • #6: Prototyping is a method to develop prototypes.
  • #7: Rapid Prototyping is a process of developing a minimal functional product of the final product so that the customer or client can have a look at how the final deployment will look. Rapid Prototyping consists of various stages of development with their parallel set of usability.
  • #11: For example, if you’re building a photo sharing app, one scenario might be Vain Vanessa choosing a new filter for her latest selfie because she wants to attract more followers. • Iterate gather feedback – You might start on paper, but finish in a high fidelity tool after multiple rounds of feedback.
  • #12: Paper prototyping is a technique that allows you to create and test user interfaces quickly and cheaply. It's easier to change a prototype than the final design.
  • #13: Rapid iteration. It takes minutes to create a few different versions of a design Low cost. Paper prototyping is very inexpensive. Basic tool set includes pen and paper.
  • #16: Free samples: The official site provides plenty samples of sketch skin and wireframe skin, including desktop app, mobile app, website, etc. Drag: The elements in Balsamiq Mockups are available to simply drag-and-drop, including some buttons and lists, and each styled as a hand-drawing. Designers also can arrange pre-built widgets using a drag-and-drop editor. Library: The large library of UI elements is a great source of design inspiration.
  • #17: With 16 built-in iOS, Material Design and Wireframe libraries containing over 2000 customizable widgets and icons, you can design a wireframe simply by a drag-and-drop. Live video: You can present your ideas interactively on live video calls with clients or interact as you design with your team.But one thing, upload multiple images is not supported.
  • #19: Google Glass is a wearable computer featuring a head-mounted display in the form of eyeglasses. The Google glasses function as a hands-free smartphone, letting users access the mobile internet browser, camera, maps, calendar, and other apps by voice commands.
  • #23: Advantage: Realistic experience to be given to a stakeholder for a valuable feedback.