Unitsunit 28 Prototyping

lOMoARcPSD|20942097
Unit(s) Unit 28 :Prototyping
HND in Computing (ESOFT Metro Campus)
Studocu is not sponsored or endorsed by any college or university

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)
lOMoARcPSD|20942097
Higher Nationals
Internal verification of assessment decisions – BTEC (RQF)
INTERNAL VERIFICATION – ASSESSMENT DECISIONS
Programme title Higher National diploma in Computing
Assessor Internal
Verifier
Unit 28: Prototyping
Unit(s)
Developing and Testing a prototype for Kuoni
Assignment title
Senuri Liyanga Weerasinghe
Student’s name
List which assessment Pass Merit Distinction
criteria the Assessor has P1 P2 P3 P4 P5 P6 P7
awarded.
INTERNAL VERIFIER CHECKLIST
Do the assessment criteria awarded match Yes. The assessment criteria’s are
those shown in the assignment brief? Y matched with the criteria’s
mentioned in the assessment
brief.
Is the Pass/Merit/Distinction grade awarded Yes. Assessor has given a Pass to
justified by the assessor’s comments on the Y the student work. Student has
student work? done excellent work on his
assessment and assessor has
given sufficient comment to the
student work.
Has the work been assessed Yes. Assessor has assessed the
Y
accurately? student work accurately and
provided detailed comments on
the body of the document.
Is the feedback to the student:

Give details: Assessor has provided
• Constructive? Y
• Linked to relevant assessment Y
constructive and detailed
criteria? Y feedback on the student work.
• Identifying opportunities for
improved performance? Y
The given comments are linked to
• Agreeing actions?
the assessment criteria’s and also
provided areas need to be
improved by the student.
In formative feedback section,
1 Senuri Weerasinghe Prototyping Assignment no 1

lOMoARcPSD|20942097
assessor has given enough

guidance to the students to
complete his assessment.
In summative feedback section,

Assessor has mentioned the
actions needs to be taken to
improve the quality of the work
done by the student.
Yes. The assessment criteria’s are
matched with the criteria’s
mentioned in the assessment
brief.
Does the assessment decision need No. Agree with the assessor’s
N
amending? decision.
Gaveen.kith@esoft.lk 2023-01-
Assessor signature Date 30
Ishara.upayanthi@esoft.lk 2023-01-
Internal Verifier signature Date 01
Programme Leader signature (if
required) Date
Confirm action completed

Remedial action taken
Give details:
Assessor signature Date

Internal
Verifier Date
signature
Programme Leader
signature (if Date
required)

lOMoARcPSD|20942097
Higher Nationals - Summative Assignment Feedback Form

Student Name/ID Senuri Weerasinghe - 00070110
Unit 28 : Prototyping
Unit Title
Assignment Number 1 Assessor
Date
Submission Date Received 1st
submission
Date Received 2nd
Re-submission Date submission
Assessor Feedback:
LO1 Explore forms of prototypes appropriate for various functionality and end
user testing requirements.
Pass, Merit & Distinction P1 P2 M1
Descripts
LO2. Plan a prototype for specific target end users and planned tests.
Pass, Merit & Distinction P3 P4 M2 M3 D1
Descripts
LO3. Develop multiple iterations of the prototype using appropriate tools.

Pass, Merit & Distinction P5 P6 M4 M5 D2
Descripts
LO4. Evaluate user feedback and test results from multiple iterations of the prototype and end user
testing.
Pass, Merit & Distinction P7 M6 D3
Descripts
Grade: Pass Assessor Signature: gaveen.kith@esoft.lk Date: 2023-01-01
Resubmission Feedback:
Grade: Assessor Signature: Date:
Internal Verifier’s Comments: Agree with the decision of the assessor.
Signature & Date: ishara.upayanthi@esoft.lk 2023-01-01
* Please note that grade decisions are provisional. They are only confirmed once internal and external moderation has taken place and
grades decisions have been agreed at the assessment board.

lOMoARcPSD|20942097
Assignment Feedback
Formative Feedback: Assessor to Student
Excellent work done by the student. Most of the activities done by the student properly.
Action Plan
Need to submit the assignments on time.
Summative feedback
Excellent work done by the student. Most of the activities done by the student properly.
Need to submit the assignments on time.
Feedback: Student to Assessor
Gaveen.kith@esoft.lk 2023-01-01

lOMoARcPSD|20942097
Assessor Date
signature
Student Date
signature
General Guidelines

lOMoARcPSD|20942097
1. A Cover page or title page – You should always attach a title page to your assignment. Use
previous page as your cover sheet and make sure all the details are accurately filled.
2. Attach this brief as the first section of your assignment.
3. All the assignments should be prepared using a word processing software.
4. All the assignments should be printed on A4 sized papers. Use single side printing.
5. Allow 1” for top, bottom , right margins and 1.25” for the left margin of each page.
Word Processing Rules
1. The font size should be 12 point, and should be in the style of Time New Roman.
2. Use 1.5 line spacing. Left justify all paragraphs.
3. Ensure that all the headings are consistent in terms of the font size and font style.
4. Use footer function in the word processor to insert Your Name, Subject, Assignment No, and
Page Number on each page. This is useful if individual sheets become detached for any reason.
5. Use word processing application spell check and grammar check function to help editing your
assignment.
Important Points:
1. It is strictly prohibited to use textboxes to add texts in the assignments, except for the
compulsory information. eg: Figures, tables of comparison etc. Adding text boxes in the body
except for the before mentioned compulsory information will result in rejection of your work.
2. Carefully check the hand in date and the instructions given in the assignment. Late submissions
will not be accepted.
3. Ensure that you give yourself enough time to complete the assignment by the due date.
4. Excuses of any nature will not be accepted for failure to hand in the work on time.
5. You must take responsibility for managing your own time effectively.
6. If you are unable to hand in your assignment on time and have valid reasons such as illness, you
may apply (in writing) for an extension.
7. Failure to achieve at least PASS criteria will result in a REFERRAL grade .
8. Non-submission of work without valid reasons will lead to an automatic RE FERRAL. You will
then be asked to complete an alternative assignment.

lOMoARcPSD|20942097
9. If you use other people’s work or ideas in your assignment, reference them properly using
HARVARD referencing system to avoid plagiarism. You have to provide both in-text citation and a
reference list.
10. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be
reduced to A REFERRAL or at worst you could be expelled from the course
Higher National Diploma in Business

Assignment Brief
Student Name /ID Number Senuri Weerasinghe – 00070110
Unit Number and Title Unit 28: :Prototyping
Academic Year 2021/22
Unit Tutor
Assignment Title
Issue Date
Submission Date
IV Name & Date
Submission format
The submission should be in the form of an individual written report. This should be written in a
concise, formal business style using single spacing and font size 12. You are required to make use
of headings, paragraphs and subsections as appropriate, and all work must be supported with
research. You must provide in-text citations and the reference list using Harvard referencing
system.
The recommended word count is 4,000–4,500 words excluding annexures. Note that word
counts are indicative only and you would not be penalised for exceeding the word count.

lOMoARcPSD|20942097
Unit Learning Outcomes:
LO1. Explore forms of prototypes appropriate for various functionality and end
user testing requirements.
LO2. Plan a prototype for specific target end users and planned tests.
LO3. Develop multiple iterations of the prototype using appropriate tools.
LO4. Evaluate user feedback and test results from multiple iterations of the
prototype and end user testing.
Assignment Brief and Guidance:
Scenario
Kuoni has been a global leader in the travel industry for the past 110 years. They are not the
typical travel agency people have in mind. In order for Kuoni to create tailor-made trips, travel
experts listen to what the customers want and then create a vacation that’s right for them and
their budget. So far they have been doing everything offline, only recording basic things online
for the customer to view. The management of the trip is very basic however, customers today
are demanding more digital experiences and more control over their purchases. In order to
facilitate this requirement, the management has decided to create a web-based application to
enquire and manage the travel requirements of the customer.
The generic requirements of Kuoni have not been clearly defined, where the team is tentative
towards a creative and a complete web application that would suffice their business needs.
The essential requirement are as follows.
 Customer Should be able to make an inquiry without login, and he/she should be able
to track his enquiry with an enquiry ID.

lOMoARcPSD|20942097
 First, the customer should select whether he/she is a local or a foreign customer, and
then must provide the intended number of days that he/she shall stay, as well as how
many adults and children will be travelling.
 Then the customer must select the destinations he/she prefer, the customer should only
be allowed to choose the number of destinations based on the number of days staying
with the organisation.
 Then based on the requirement, the customer should be able to choose the hotel chain,
and the types of rooms required. The selection and the pricing should be generated
based on his/her duration and the package. You are free to assume the flow order of the
website as per your preference
 Customer should also be able to choose traveling type, with various agencies to select.
The Management expects you to make your own assumptions and selection here as
well.
 After the enquiry, enquiry form should collect the basic information of the client, and
upon completion of enquiry form, the enquiry ID should also be generated.
 If the Customer choose to register with the website, he/she should be able to manage
his/her enquiries and bookings trough his personal dashboard.
 The administrator can login and manage enquiries, agencies, hotel chains etc. (Should
be able to perform CRUD applications on selected entities.)
 The customer query generation should be optimal, where the result should be based on
customer’s travel type, destinations, and his/her expected budget. (adding separate
plans ie: luxury and economy will make this easier)
 Management expects an attractive design with UI and UX
 Alpha and Beta Versions must be released and should identify/modify appearance
and/or functions, based on the user review.

lOMoARcPSD|20942097
The management of Kuoni Leisure is looking forward to see how these requirements would
be met and what would be the feedback of the users and the clients. They expect an open
dynamic design while their initial requirements are met. The management insists on creating
an alpha and beta version of the product, and test in on functionality and user experience.
As the Project Manager, you are required to provide complete web-based management
system with design mock-ups and reports which you will generate along the process.
Task 01
1.1. Recognize specific forms of prototyping use in the software products development and
review how these specific prototypes can be used to test the functionalities and end user
testing requirements. Your answer should include a review to the advantages and
disadvantages of identified prototyping formats and appropriateness of them to meet
different testing outcomes.
1.2. Evaluate the standard tools that can be used for prototyping and how they can be used
in identifying and testing user requirements effectively in the context of Kuoni Leisure.
Task 2
2.1. Review different end user categorization, classification, and behaviour modelling
techniques available in prototyping and by applying them select the most appropriate
prototyping methodology for above given scenario.
2.2. Explore a specific end user from the user population and suggest a suitable prototyping
methodology that can be used to test the requirements of the selected and user. Provide
justification to the selection of the prototyping methodology and suggest a plan to test the
end user requirement of the selected end user effectively.
Task 3

lOMoARcPSD|20942097
3.1. Explore and employ appropriate prototyping tools and Develop a prototype to test the
user requirements for the selected end user.
3.2. Perform an experiment with the end user and based on the most important feedback,
modify the prototype. Create multiple iterations of your prototype by considering the
enhancements required in each iteration based on end user feedback until you are satisfied
with the final outcome.
Task 4
Analyse the end use feedback gathered from the multiple iterations of the prototype and
critically review the overall successful the final prototype you developed when comparing
with the original plan developed to test user requirements. Evaluate the impact of prototyping
methodology to effectively meet the objectives of software development life cycle by taking
examples from the prototyping methodology you followed for Kuoni Leisure.
.

lOMoARcPSD|20942097
Table Of Content
Task 01...........................................................................................................................................13
1.1......................................................................................................................................................13
Prototyping.............................................................................................................13
Types of prototyping..............................................................................................13
Prototype testing....................................................................................................17
UAT........................................................................................................................17
Advantages of prototyping.....................................................................................19
Disadvantages of prototyping................................................................................19
Rapid (Throwaway) prototyping...........................................................................20
Evolutionary prototyping.......................................................................................22
Incremental prototyping.........................................................................................23
Extreme prototyping..............................................................................................24
Prototyping tools....................................................................................................25
Task 02...........................................................................................................................................36
2.1......................................................................................................................................................36
Different end user types, classifications, and behavior modeling techniques.......36
2.2......................................................................................................................................................42
Specific end user and appropriate prototyping methodology................................42
Task 03...........................................................................................................................................67
3.1......................................................................................................................................................67
3.2....................................................................................................................................................100
Task 04.........................................................................................................................................124
4.1....................................................................................................................................................125
References....................................................................................................................................132

lOMoARcPSD|20942097
Task 01
1.1
Prototyping
Prototyping in software development is the process of building a simulated user interface for
purposes of ideation, evaluation, and user feedback. Modern software prototypes are
interactive. They mimic as closely as possible the actual behavior of the software.
A prototype enables our developers and designers to show our understanding of the customer’s
requirements. If our interpretation of the requirements is off by just a little, the customer can
see the discrepancy and let us know right away. Doing this early in the development process
saves time, money, and aggravation. It’s much easier to make changes early in the development
cycle (Andplus, 2022).
Types of prototyping
1. Rapid (Throwaway) prototyping

2. Evolutionary prototyping
3. Incremental prototyping
4. Extreme prototyping
1. RAPID (THROWAWAY) PROTOTYPING

Rapid prototyping is the most commonly used AndPlus. Its name refers to the ease and speed
with which a prototype can be modified to try different ideas with the user audience and
incorporate their feedback.
Rapid prototyping is also known as “throwaway prototyping” because the prototype is expected
to be relevant only in the short term, such as one sprint in the Agile development framework. It
may go through several cycles of feedback, modification, and evaluation during that time.

lOMoARcPSD|20942097
When all the stakeholders are satisfied, it becomes a reference for the designers and developers
to use. After the sprint is completed, the prototype is discarded and a new one is built for the
next sprint.
Throwaway prototyping can be applied to less-than-rapid prototypes as well. Paper prototypes,
in which the designs are simulated on pieces of paper or cardboard, are by definition
“throwaway.” Computer files, whether static images or interactive prototypes, will end up on
someone’s hard drive for eternities even though they are almost never needed after the
development cycle.
2. EVOLUTIONARY PROTOTYPING
An evolutionary prototype differs from the traditional notion of a software prototype; an
evolutionary prototype is a functional piece of software, not just a simulation. Evolutionary
prototyping starts with a product that meets only the system requirements that are understood. It
won’t do everything the customer requires, but it makes a good starting point. New features and

lOMoARcPSD|20942097
functions can be added as those requirements become clear to the stakeholders. That’s the
“evolutionary” nature of this prototype.
In a way, the first iteration of an evolutionary prototype is similar to the minimum viable
product (MVP), or software that has the absolute minimum functionality to make it useful. The
distinction lies in how the requirements for that first version are selected.
3. INCREMENTAL PROTOTYPING
Incremental prototyping is useful for enterprise software that has many modules and
components which may be loosely related to one another. In incremental prototyping, separate
small prototypes are built in parallel. The individual prototypes are evaluated and refined
separately, and then merged into a comprehensive whole, which can then be evaluated for
consistency in look, feel, behavior, and terminology.
The risk with incremental programming is the look and feel can vary so much among the
prototypes, the modules feel like completely different pieces of software. The design team must

lOMoARcPSD|20942097
come up with some guiding principles in advance and keep the designers on a short leash to
ensure consistency.
4. EXTREME PROTOTYPING
Extreme prototyping is more common for web application development. Web applications are
composed of:
 Presentation layer
o Displayed in the user’s browser
 Services layer
o Communications services
o Business logic
o Authentication and authorization
o Other back-end services
Extreme prototyping is conducted in three phases:
1. Build HTML wireframes to simulate the presentation layer. These web pages have
limited interactivity. They are complete enough to show users the various user journeys
through the application.

lOMoARcPSD|20942097
2. Transform the wireframes to fully functional HTML pages, tying them to a simulated
services layer.
3. Code and implement the services layer.
With this approach, the user interface is designed and developed before any of the underlying
technology is implemented, which is what gives it the “extreme” tag. The services developers
then make the whole thing work.
(Andplus, 2022)
Prototype testing
Prototype testing is the process of testing your prototype with real users to validate design
decisions before development starts. The goal is to identify problems and areas of improvement
early so you can make the necessary changes prior to development and build a product that
meets users' needs and expectations (Maze, 2022).
UAT
User Acceptance Testing (UAT) is a type of testing performed by the end user or the client to
verify/accept the software system before moving the software application to the production
environment. UAT is done in the final phase of testing after functional, integration and system
testing is done (guru99, 2022).
Types of UAT
Multiple types of software tests qualify as user acceptance testing. These tests include the
following:
 Beta testing. The software is given to groups of end users who evaluate it for its intended
purpose and provide feedback to developers for improvements.

lOMoARcPSD|20942097
 Black box testing. An end user tests specific software functions without seeing the
internal code.
 Operational acceptance testing. The focus is on predefined workflow for the software
and operational readiness, such as product compatibility, reliability and stability.
 Contract acceptance testing. Software is tested based on specific criteria and
specifications that the project team defines in their contract.
 Regulation acceptance testing. This test focuses on ensuring the software meets legal
rules and regulations.
(TechTarget, 2022)
Source – https://www.techtarget.com/searchsoftwarequality/definition/user-acceptance-testing-
UAT
Advantages of prototyping

lOMoARcPSD|20942097
 Reduced time and costs: Prototyping improves the quality of the specifications and
requirements provided to customers. With prototyping, customers can anticipate higher
costs, needed changes and potential project hurdles, and most importantly, potential end
result disasters. Strong prototyping can ensure product quality and savings for years to
come.
 Improved and increased user involvement: Most customer want to feel like they are
involved with the intricate details of their project. Prototyping requires user involvement
and enables them to see and interact with a working model of their project. With
prototypes, customers can give their immediate feedback, request project changes and
alter model specifications. Prototyping most importantly helps eliminate
misunderstandings and miscommunications during the development process.
 Reduced time and costs: Nothing makes customers happier than projects that come in
under budget. Prototyping improves the quality of requirements and specifications
provided to customers. Needed changes detected later in development cost exponentially
more to implement. With prototyping, you can determine early what the end user wants
with faster and less expensive software.
(Rapidsrepro, 2022)
Disadvantages of prototyping
 Insufficient analysis: A focus on a limited prototype can distract developers from

properly analyzing the complete project. The potential end result: A potential overlooking
of better solutions, incomplete specifications or the conversion of limited prototypes into
poorly engineered and developed final projects that are hard to maintain.

lOMoARcPSD|20942097
 User confusion: The worst-case scenario of any prototype is customers mistaking it for
the finished project. Customers seeing a rough prototype may not understand it merely
needs to be finished or polished. Also, customers can wrongly perceive the prototype to
accurately model the performance of the final system. Customers may also grow fond of
prototype features that are not part of the final system.
 Developer misunderstanding of user objectives: For every project to be successful,
developers and customers must be on the same page and share the same project
objectives. If customers require all proposed features of a prototype be included in the
final product, this can lead to team and mission conflicts.
 Excessive Development Time: Remember, prototypes are by nature designed to be
developed quickly. If a developer spends too much time developing a complex prototype,
the project can run into roadblocks (especially if there are disagreements over prototype
details) and run over both time and cost budgets.
(Rapidsrepro, 2022)
Rapid (Throwaway) prototyping
Advantages
Speed
Using rapid prototyping, you can have your part or product designed and tested in a short
timeframe. This allows you to have a full-scale model ready to determine whether it meets your
requirement or not. If it’s all good, then you can approve the full production of the product and
move on to develop more products. If there are design flaws, then you can either work on
iterations or discard the idea altogether. With rapid prototyping, you did not waste much time as
you would in the traditional method.
Cost

lOMoARcPSD|20942097
It has been said repeatedly, but rapid prototyping is the most cost-effective among the forms of
prototyping. This is because you are dealing with low volume production and will not spend as
much in the final production model. It allows you to do product testing without great financial
risk. This help to keep your production within the budget and will save your money further in
case the prototype turned out to be a success.
Full-scale model for approval

Depending on your business model, with rapid prototyping, you can send physical model for
the client and management’s approval. These prototypes can help them determine its viability,
effectiveness, and reception of the market before an order for full-scale manufacturing is made.
The feedback from multiple sources can help improve the final design to gain the upper hand in
the market.
Disadvantages
Insufficient analysis
When the focus is on a limited prototype, it can distract the product developers from doing
proper product analysis of the complete project. They may overlook a better solution, or may
not complete the specification that will result in poor engineered projects that can be hard to
maintain.
User Confusion
If a prototype reached the customers, they might mistake it for the final product. If what they
see is a rough prototype, they will not understand that it is subject to further finishing or
polishing and may perceive that it is the actual performance or appearance of the final product.
Worst, they may grow found a prototype feature that will not be included in the final product.
Limited Options
Rapid prototyping techniques can also limit your option. There are many other options
available to make a prototype. Although they are not as fast, they have many good features too

lOMoARcPSD|20942097
like creating many moving parts that interlocks and work together. In complicated projects,
rapid prototyping may not be the best choice.
(apt-mold, 2022)
Evolutionary prototyping
Advantages
 Large projects- There is no porotype model that is suitable for larger projects than
evolutionary prototyping. This is because large projects can be easily broken down into
models that can be deployed separately to the customers. One of the major setbacks for
evolutionary prototyping is the difficulty of dividing the project into several segments
that are acceptable to the customer and easily incrementable from the developer's end.
However, distributing a large project is not as problematic as smaller projects.
 Reduced error- The fact that the project is segmented into modules means separate
modules can be thoroughly tested. Through thorough testing, it is possible to substantially
minimize errors in the different models of the core project.
 Minimize Resources- With evolutionary prototyping, the need to pull massive resources
for system development at once. Breaking them and doing a series of refurbishment
ensures the several models are deemed suitable independently.
 Meets user requirements- It is always crucial to deploy a product that fits the needs of the
consumers. By putting the prototypes into cycles of feedback and refinements according
to users' demands, it is possible to integrate user needs into the system. There will be no
complaints afterward from the customers as they take part in the design.
 Chance to experiment- With evolutionary prototyping, customers will experience the
product and thus is a chance to experiment on the target customers even before the
original complete version is released.
 Since it is possible to refine the prototype, new retirements can be easily included.

lOMoARcPSD|20942097
 The developed prototypes can be reused by the developer in the future to lessen the time
taken.
 It is easy to detect missing functionality.
(Evolutionary Prototype Definition., 2022)
Disadvantages
 As the project is open-ended, no time frame is able to be set.

 It is difficult to monitor the project.
 The visibility is low compared to the waterfall model.
(Prototypeinfo, 2022)
Incremental prototyping
Advantages
 Generates working software quickly and early during the software life cycle.
 This model is more flexible – less costly to change scope and requirements.
 It is easier to test and debug during a smaller iteration.
 In this model customer can respond to each built.
 Lowers initial delivery cost.
 Easier to manage risk because risky pieces are identified and handled during it’d
iteration.

lOMoARcPSD|20942097
Disadvantages
 Needs good planning and design.

 Needs a clear and complete definition of the whole system before it can be broken down
and built incrementally.
 Total cost is higher than waterfall.
(Tryqa, 2022)
Extreme prototyping
Advantages
 The main advantage of Extreme Programming is that this methodology allows software
development companies to save costs and time required for project realization. Time
savings are available because of the fact that XP focuses on the timely delivery of final
products. Extreme Programming teams save lots of money because they don’t use too
much documentation. They usually solve problems through discussions inside of the
team.
 Simplicity is one more advantage of Extreme Programming projects. The developers who
prefer to use this methodology create extremely simple code that can be improved at any
moment.
 The whole process in XP is visible and accountable. Developers commit what they will
accomplish and show progress.
 Constant feedback is also the strong side. It is necessary to listen and make any changes
needed in time.
 XP assists to create software faster thanks to the regular testing at the development stage.
 Extreme Programming contributes increasing employee satisfaction and retention.

lOMoARcPSD|20942097
Disadvantages
 Some specialists say that Extreme Programming is focused on the code rather than on
design. That may be a problem because good design is extremely important for software
applications. It helps sell them in the software market. Additionally, in XP projects the
defect documentation is not always good. Lack of defect documentation may lead to the
occurrence of similar bugs in the future.
 One more disadvantage of XP is that this methodology does not measure code quality
assurance. It may cause defects in the initial code.
 XP is not the best option if programmers are separated geographically.
(Disadvantages and Advantages in Extreme Programming, 2022)

Prototyping tools
1. Figma
Figma is an all-in-one tool that makes collaboration and accessibility easy for UX designers,
developers, and anyone else on a team with a browser-based, cloud-hosted platform. If
you’ve worked with Sketch before, you’ll find that Figma has a similar feel that makes it easy
to get started with.

lOMoARcPSD|20942097
Consistency is a priority in web design, and you can use Figma’s flexible styles to control the
appearance of text, grids, and other elements across a project. And a variety of useful plugins,
like Autoflow for illustrating user flows, Figmotion for creating animations, and many others,
enhance Figma’s functionality.
2. InVision Studio
Released in 2011, InVision has a well-established reputation, and their dedication to rolling
out new functionality and adding to their design platform makes them a favorite among many
designers.

lOMoARcPSD|20942097
With a host of well-designed tools, InVision gives designers the power to put together
functional prototypes quickly and to share them with others. It offers so many nice features,
including a handy vector drawing tool, repeatable components that can be changed sitewide,
and tools for creating animations and other dynamic visual effects.
Collaboration and communication are also strengths of InVision. Freehand lets team members
draw, add notes, and offer feedback. Team members can stay organized with Invision Spaces,
which creates a single source of truth for everyone working on the project. InVision also has a
handy developer handoff feature simplifies collaboration with the dev team members.
3. Adobe XD
Adobe XD offers a vector-based system for putting together prototypes, including tools for
creating interactions, transitions, and other types of dynamic functionality. Because its vector
based, scaling and resizing elements is no problem.

lOMoARcPSD|20942097
Adobe XD works well alongside other Adobe family apps like Illustrator and Photoshop. It’s
nice to be able to edit Adobe images, like a .psd file, right in the application.
From UI design to UX design, Adobe XD covers all the tools a designer needs from
conceptualization through high-resolution prototypes. And they’re continually adding to this
product with monthly updates that expand its functionality.
4. Webflow
Of course we’re biased on this one, but we know that you want a smoother and faster design
process — so we're here to help you out.

lOMoARcPSD|20942097
Webflow takes care of two jobs at once. While you’re designing and building a high-fidelity
prototype, you’re creating a live website that’s complete with all of the HTML, CSS, and
associated JavaScript. You don’t end up with just a mockup — you’ll have the real deal.
With an intuitive drag-and-drop interface, a powerful CMS, and the capability to create
advanced animations, transitions, and microinteractions, Webflow makes it possible to create
any type of professional-level website.
If you want a speedy way to design and prototype, Webflow gives you what you need, all
without knowing how to code, making it one of the best prototyping tools whatever your skill
level. Designers and marketers can easily collaborate in Webflow as well.
You can also check out Webflow University for a wide range of tutorials on how to get started
with prototyping in Webflow.
5. Axure RP
Axure RP puts the power of wireframing and prototyping all in one package, helping
companies improve their digital product design process. It allows designers to create low to
high resolution interactive prototypes of websites and apps, all without having to code.

lOMoARcPSD|20942097
Along with what you need to build the visuals, interactivity, and organization, Axure RP also
offers a comprehensive documentation tool, which makes keeping track of notes, tasks, and
other important assets organized and accessible to those who need to see it.
Axure RP also facilitates a better handoff to developers by letting a prototype be published on
their cloud, with all of the code, specifications, and other assets they would need to build it.
Built for professionals, with attention to all of the intricacies of building functional
prototypes, Axure RP 9 is for those designers looking for the right prototyping tool for
interactive design.
6. Origami Studio
Origami Studio was created for Facebook designers out of necessity, then Facebook shared
the free prototyping tool with the rest of the design community.

lOMoARcPSD|20942097
For designers who need a more advanced system, Origami Studio offers powerful prototyping
tools for websites and mobile apps. Central to Origami Studio is a Patch Editor that lets you
build logic, behaviors, animations, and interactions. Each patch is like a building block for
your prototype that helps you iterate quickly. The library includes a lot of prebuilt options,
but you’ll only need 15-20 to get started.
Origami Studio does have a bit of a learning curve, but the payoff of knowing how to use
their prototyping tools and pulling off sophisticated prototypes makes it worth learning. This
power, along with its compatibility in working with Sketch and Figma, makes Origami Studio
an important tool for designers who want to go above and beyond standard low-fidelity
prototyping.
7. Justinmind
Justinmind has been gathering momentum as a popular website and app prototyping tool.
There are quite a few reasons why, from drag-and-drop functionality, the capabilities to create
the simplest to most sophisticated of apps and web prototypes, and plenty of support, like
videos and blogs to help you learn how to use it. Plus, Justinmind offers unlimited projects
and pricing options ranging from free to enterprise level.

lOMoARcPSD|20942097
Justinmind comes with UI libraries and templates, as well as many other practical features. It
lets you create the logic for conditional navigation, allows for user testing, facilitates design
team management, and more. There’s also a number of integrations that let you use
Justinmind with Sketch, Adobe Suite, Azure DevOps Server, and Jira in your workflow.
Its simple interface makes it a great starting point for a beginner UX designer but also offers
enough for more advanced designers.
Design interactions and animations without code
Build complex interactions and animations without even looking at code.
Start animating

lOMoARcPSD|20942097
Start animating
8. Sketch
Many UX designers use Sketch as a part of their workflow — and for good reason. Unlike
many other prototyping tools, Sketch doesn’t have much of a learning curve — you can jump
right in and start creating.

lOMoARcPSD|20942097
Uniformity and consistency drive much of Sketch’s functionality. Reusable elements can be
used sitewide with a smart layout feature that changes their dimensions depending on what
content is inside of them. Then there’s the ease of use. Along with a well-designed user
interface, Sketch offers a host of shortcuts at your fingertips to speed up the design process
and simplify developer handoff.
Many consider Sketch an industry standard when it comes to wireframes and prototyping, and
its feature-packed and user-friendly interface are just a few reasons why so many designers
choose it.
9. Fluid UI
Fluid UI’s software is great for rapid prototyping thanks to it’s simple user interface. With
ready-made libraries for material design, iOS, Android, wireframing, Windows, and more,
Fluid UI gives you so much to get started with.
Fluid UI’s built-in libraries include more than 2,000 components to help you move quickly,
but you can also create personal libraries by uploading existing graphics. And since
everything is saved in the cloud, you can collaborate with others in real time. Fluid UI even
has live video calling so teammates can chat and design at once.

lOMoARcPSD|20942097
10. Framer
Framer is a design tool that lets you build interactive prototypes extremely fast. With Framer,
you can create completely functional prototypes — everything from linking pages together to
creating 3D effects.
Framer also has thousands of resources in the Framer X Store. You have access to everything
from live maps, UI kits, and media players all at your fingertips.
(Webflow, 2022)

lOMoARcPSD|20942097
Task 02
2.1
Different end user types, classifications, and behavior modeling techniques.
End users
The customer and other significant project stakeholders are then shown the developed
prototype. The suggestions are gathered in a systematic way and used to improve the product
that is currently being developed. Unquestionably, user experience surveys are crucial for
companies to collect wide user feedback.
The person for whom a piece of hardware or software is intended is known as an end user. The
phrase is based on the notion that a software or hardware product's "end objective" is to benefit
the user. The end user is used to distinguish between the developers and the individual for
whom a hardware or software product is built. The final consumer can be compared to the
product's designers or programmers. End user categories come in several forms.
End users are basically those people whose jobs require access to the database for querying,
updating, and generating reports. The database primarily exists for their use. There are several
categories of end-users these are as follows:

lOMoARcPSD|20942097
1. Casual End Users: These are the users who occasionally access the database but they
require different information each time. They use a sophisticated database query language
basically to specify their request and are typically middle or level managers or other occasional
browsers. These users learn very few facilities that they may use repeatedly from the multiple
facilities provided by DBMS to access it.
2. Naive or parametric end users: These are the users who basically make up a sizeable
portion of database end-users. The main job function revolves basically around constantly
querying and updating the database for this we basically use a standard type of query known as
the canned transaction that has been programmed and tested. These users need to learn very
little about the facilities provided by the DBMS they basically have to understand the users’
interfaces of the standard transaction designed and implemented for their use. The following
tasks are basically performed by Naive end-users:
1. The person who is working in the bank will basically tell us the account balance and post-
withdrawal and deposits.
2. Reservation clerks for airlines, railways, hotels and car rental companies basically check
availability for a given request and make the reservation.
3. Clerks who are working at receiving end for shipping companies enter the package
identifies via barcodes and descriptive information through buttons to update a central
database of received and in-transit packages.
3. Application programmers: The application programmers write different application
programs and are responsible for developing the user interface. The application programmers
are free to develop the user interfaces in any preferred language such as C/C++/Java etc.
4. Sophisticated end users: These users basically include engineers, scientists, business
analytics, and others who thoroughly familiarize themselves with the facilities of the DBMS in
order to implement their application to meet their complex requirements. These users try to
learn most of the DBMS facilities in order to achieve their complex requirements.
5. Standalone users: These are those users whose job is basically to maintain personal
databases by using a ready-made program package that provides easy-to-use menu-based or
graphics-based interfaces, An example is the user of a tax package that basically stores a variety
of personal financial data for tax purposes. These users become very proficient in using a
specific software package.

lOMoARcPSD|20942097
6. Specialized users: The special users are responsible for writing specialized database-related
programs and also have the task of creating the actual database as well as implementing
technical controls needed to enforce policies and decisions.
(GeeksforGeeks, 2022)
User classification
There are 3 main types of user

 Novice
 Knowledgeable / intermittent user
 Expert / frequent user
Users can however, be classified in any other way that is appropriate to the system being built.
1. Some users may have keyboard skills, others not.
2. Some users may have knowledge of other similar systems, others not.
The advantages of classification mean that generalisations can be made about users and their
needs.
1. This doesn’t necessarily mean that the best system has been designed for every
individual.
2. It means that the system has been designed to fit the generalisations for each user group.
The Novice
1. For the novice user of a system, progress is slow because of the limitations of
working memory.
2. Chunking is almost entirely absent.
3. Systems used by novices require more feedback and more opportunities for closure.
Guidelines for novice users
 All initiatives should come from the computer – the novice may not know what is to be
done

lOMoARcPSD|20942097
 Each required input should be brief – the shorter it is the more likely it is to be
remembered
 Input procedures should be consistent with user expectations – humans search for
patterns and will generalise
 No special training should be necessary – especially true in the case of web or
multimedia where the user is ‘on their own’
 All system messages should be clear – in the language of the user, not the designer
 User decision should be made from a small set of options – the more of a selection you
offer, the harder it is to choose
 Users should control the pace of interaction - they need to understand the system and feel
that they can control it, and not the reverse
 User decision making should be a response to a specific request for action – save - y/n?
 Help should always be available – tutor / book / online
 There should be sufficient feedback - closure
Knowledgeable / intermittent users
These users need consistent structures, good help facilities, good documentation.
Expert users
1. These users have fast response time and will require brief feedback.
2. Experts organise their knowledge according to a higher conceptual structure.
3. They can recall more than novices because their knowledge is chunked.
4. Expert users will look for keyboard shortcuts, abbreviated sequences.
5. Experts can find constant confirmation screens irritating - Use these only when
important.
Examples
Logging on according to the experts view and the actual steps
Expert steps for logging on
1. Input username
2. Input password
Actual steps for logging on
1. Press any key to activate screen

lOMoARcPSD|20942097
2. Click into input box

3. Input username
4. Press tab or click into second input box
5. Input password
6. Press return
7. Wait for welcome message or error message
1. if welcome message then task ends
2. if error message then
1. repeat 2-7 or
2. toggle 'caps-lock' and repeat 2-7 or
3. ask for help
(User classification, 2022)
Behavior modeling techniques
Behavioral modeling is an approach used by companies to better understand and predict

consumer actions. Behavioral modeling uses available consumer and business spending data to
estimate future behavior in specific circumstances. Behavioral modeling is used by financial
institutions to estimate the risk associated with providing funds to an individual or business and
by marketing firms to target advertising. Behavioral economics also relies on behavioral
modeling to predict behaviors of agents that fall outside of what would be considered entirely
fact-based or rational behavior (Investopedia, 2022).
KEY TAKEAWAYS
 Behavioral modeling attempts to explain why an individual makes a decisions and the
model is then used to help predict future behavior.

lOMoARcPSD|20942097
 Companies use behavioral modeling to target offers and advertising to customers. Banks
also use behavioral modeling to create deeper risk profiles of customer groups.
 Behavioral modeling mainly uses a company's dataset, but it may also pull in other
relevant, public sources.
Behavioral modeling simply tries to capture some of the psychology of decision making to
provide a better simulation of how decisions are made by a consumer and the probability of a
particular consumer making one choice over another. Behavioral modeling is used by
companies to hone their value propositions or target marketing campaigns based on the outputs
of the model. In this sense, behavioral modeling mainly consists of analyzing data to categorize
subsets of people who share similar habits and purchase triggers.
Financial institutions, such as banks and credit card companies, use behavioral modeling to
segment and profile the users of their services. For example, a credit card company will
examine the types of businesses that a card is normally used at, the location of stores, the
frequency and amount of each purchase to estimate both future purchase behavior, and whether
a cardholder is likely to run into repayment problems. This data is usually aggregated to clump
customers in groups that have similar needs and usage patterns. The customers in a particular
group may be offered different promotions to either encourage more card usage or even
consolidation of other debts into the existing account.
(Investopedia, 2022)
Real World Examples of Behavioral Modeling

Once you are a customer of a company, they generally want you to be consistent or increasing
your interaction and purchases. This is also true of credit card providers. A credit card company
may notice, for example, that a cardholder has shifted from making purchases at discount stores
to high-end stores over the last six months. By itself, this may indicate that the cardholder has
seen an increase in income, or it could mean that the cardholder is spending more than they can

lOMoARcPSD|20942097
afford. To narrow down the options and create a more accurate risk profile, the card company
will also look at other data points, such as whether the cardholder is only paying the minimum
payment or if the cardholder has made late payments. Late payments may be an indicator that
the cardholder is at a greater risk of insolvency.
Behavioral modeling is also used by retailers to make estimates about consumer purchases. A
retailer could, for example, examine the types of products that a consumer purchases in-store or
online and then estimate the likelihood that the consumer will purchase a new product based on
how similar it is to their previous purchases. This is especially useful to retailers who provide
customer loyalty programs, which allow them to track individual spending patterns with more
granularity. For example, if a store determines that consumers that purchase shampoo will also
purchase soap if provided a coupon, the store may provide a coupon for soap at a point-of-sale
terminal to a consumer who only purchases shampoo. This type of behavioral modeling has
been refined into a subfield known as behavioral analytics.
(Investopedia, 2022)
2.2
Specific end user and appropriate prototyping methodology
The most essential features might be recommended by end users. End users can provide you
useful advice on what features the new software should be able to do because they have
firsthand knowledge of the issues that need to be resolved and experience with similar software.
I picked the naive or parametric end user because prototyping also requires us to develop a
rudimentary sketch of how to make anything conceivable; it is not required to be executed, and
it serves as the framework for the final product that we will eventually construct. In order to
achieve their goals, parametric end users commonly use data base apps in their daily lives while
not having any DBMS experience. Therefore, the management of Kuoni Leisure is interested to
observe how these needs will be met in this case as well as what the users' and clients' reactions

lOMoARcPSD|20942097
will be. While their original needs are satisfied, Kuoni expects an open dynamic design. Here,
the system aims to develop a tiny, straightforward system that will serve as a prototype login
screen for users. The client should be able to submit an inquiry without logging in and monitor
it using an enquiry ID.
The customer must first indicate whether they are a domestic or international customer, and
they must then specify how many people and children will be traveling, as well as the number
of days they plan to stay.
The customer must then choose the destinations they want to see. The consumer should only be
permitted to select the number of destinations that correspond to the number of days they will
be staying with the company.
The customer should then be able to select the hotel chain and the kinds of rooms they need
based on their needs. The choice and cost should be determined by the client's duration and
package. You are free to use the website's flow order however you choose.
Additionally, the customer ought to have a variety of travel firms from which to choose. The
Management anticipates that you will also make your own assumptions and choices in this
situation.
Following the inquiry, the client's basic information should be collected on an inquiry form,
which should also produce an enquiry ID.
The customer should be able to handle his or her inquiries and bookings through a personal
dashboard if they decide to register with the website.
Inquiries, agencies, hotel chains, etc. can all be managed by the administrator by logging in.
(Should be capable of running CRUD operations on particular entities.)
The best customer query generation should base the outcome on the customer's estimated
budget, travel style, and destinations. This will be simpler if distinct luxury and economy plans
are added. The system does not want to supply any sort of outputs or generate the final output
unless the create update delete and read operations are required for the functioning component
of the system. Therefore, I believe that this prototype's users can match naive ends in
suitability.

lOMoARcPSD|20942097
The rapid throwaway prototyping, evolutionary prototyping, incremental prototyping, and

extreme prototyping are prototype approaches to take into consideration. In light of that, I
decided for quick throwaway prototyping for my case study. Because the client requires a quick
prototype to address the choice and requirement right away. If you aren't traveling alone, ask
questions, verify the costs based on your journey time and stay, and look into travel companies.
A valuable and practical strategy for producing such fundamental information quickly, settling
on a price that fits the budget, and planning the safety trip appropriately is rapid trash
prototyping. The following considerations might be used to justify the benefits of rapid
prototyping approach in the context of the provided scenario.
 Allows functionality testing.

 Reduced design & development time.
 Improved and increased user involvement.
 Ability to evaluate human factors and ergonomics
 Reduced overall product development cost.
 Elimination or reduction of risk.
The chosen prototyping methodology is applied using the end user classification and behavior
modeling in the manner described below. I have either utilized the parametric or naïve methods.
The benefits of employing the simplistic process for prototyping are demonstrated here.
 Increased design efficiency

 Flexibility of reusing existing design data for creating new designs
 Capability to produce flexible designs
 Quick project turnaround
 Vast range of ways to view 3D solid models
 Better integration with downstream applications and reduced engineering cycle time
 Better product visualization, beginning with simple objects with minimal details

lOMoARcPSD|20942097
Here, we can easily see how quick throwaway prototyping, which is popular in naive or
parametric methodologies, may be used to review and explore.
Web applications prototyping

Web applications are essentially the same as regular applications, with the exception that the user
base is typically much larger and thus user interface errors can significantly affect the
organization's objectives for its e-business. Second, web applications benefit greatly from the
short development cycles and the evolutionary prototyping method.
Web prototype modules examples
 Mock Plus
 Wireframe.cc
 Proto.io
 Code Igniter
 Laravel
An environment that encourages design and prototyping but does not always imply
implementation is beneficial for a number of reasons
 Support in the early stage
 Multi delivery
 Technological flexibility
 Design advanced options
 Design incompleteness
 Visual Communication bandwidth
The project plan must include prototyping. The development team must budget for time, staffing,
and resources as though they were just as crucial as any other step in the design process. It is
necessary to approach prototyping as a separate project with an own lifecycle.
 Establish prototype objectives

lOMoARcPSD|20942097
 Define prototype functionality

 Develop prototype
 Evaluate prototype
 Repeat development and evaluation of prototypes until a consensus is reached on the
functionality and user interface.
Prototyping is mostly used for learning, communication, integration, and milestones. Therefore,
it is important that everyone involved in learning and communicating was on the same page
when creating the prototype. the designers and engineers, the customer's feedback, or the way
that verbal and nonverbal customer feedback is expressed. The system and the software products
communicate during integration. When a system error arises as a result of a failure, this
influences the various troubleshooting techniques as well as some engineers' perspectives on the
prototype. However, for a software to be prototyped, is what kind of manner to do the speed up
the data for the customers and customer handling. When determining the performance metrics, it
supports the speed of the automated generable system, weight, pressure, and but for a software to
be prototyped. When the user is developing the software product prototype, other criteria are
used to define the performance metrics. These other factors can be used to predetermine and
examine the manufacturing costs when comparing it to the case scenario. The following is a
traditional example of how to use the planning template for the case prototyping situation
mentioned above.
Name of the prototype Planning period

Purpose Select the final prototyping methodology and
gather the relevant material to it.
Confirm that the customers can register and
do their requirement filling successfully and
protect the payload of the customers via a
system.
Level of approximation Correct travelling information

lOMoARcPSD|20942097
Type selection whether he or she is a

foreigner or not
Accurate destination or many visits during the
time frame
Number of visits and charges per visit is
applicable and must have to be paid
More than one day of staying, the hotel room
service charges with the room boy tip charges
Considering all the above, the final amount is
calculated through the system to the customer
has to be paid.
Experimental plan Build 2 customer inquiry form registration
and completed planning of their visits.
Conduct impact tests at a range of customer
predetermine selected days duration.
Schedule 2nd November - Select the final prototyping
methodology and gather the relevant material
to it.
8th November - Complete the design stage of
the ‘Kuoni’ travel website prototype
15th November - Test the constructed system
using the testing methodologies
18th November - Assembly completed
21st November - Testing completed
23rd November - Analysing the test results
which are fully completed
Plan the prototyping methodology

lOMoARcPSD|20942097
Tools for usability testing can be used to speed up the process and acquire valuable information
about how customers see and use your product. In addition to screen recording, interviews,
surveys, and many other features, the majority of them offer remote, moderated, and
unmoderated usability testing.
Prototyping tools
1. InVision
Cost:
 Single project — Free
 3 projects (starter) — $15/month
 Unlimited Projects (Professional) — $25/month

lOMoARcPSD|20942097
Runs on:
 Web
Prototypes for:
 Android
 iOS
 Web
Invision is by far the most popular prototyping tool in the world. Their team is constantly adding
new features to help designers prototype more efficiently. With InVision’s project management
page, you can organize design components into a status workflow. You can set columns for To-do,
In progress, Needs review, and Approved, and drag and drop your design components into the
appropriate column.You could add interactions and animations to static images. You can upload
multiple file types, including JPG, PNG, GIF, AI, and PSD. It has push and pull integrations with
apps like Slack, Dropbox, Box, Trello, JIRA and much more.
It has simplified every aspect of our workflow and collaboration between design and
development. One can design better, faster, and more collaboratively with real-time, and it’s in-
browser design collaboration and presentation tools. Seamlessly launching meetings and creating
guided tours with clients, and also present designs to stakeholders.Many unicorns use this
prototyping tools for us UI/UX needs like Uber, Salesforce, Twitter, Linkedin etc which proves
that this tool is the best for prototyping.
2. Adobe Experience Design:

lOMoARcPSD|20942097
Cost:
 Free
Runs on:
 OS X
 Windows
 Android
 iOS
Prototypes for:
 All

lOMoARcPSD|20942097
With Adobe XD, you can draw, reuse, and remix vector and build artwork to create wireframes,
screen layouts, interactive prototypes, and production-ready assets all in the same app. We can
switch easily from design to prototype right within the app. Also, add interactions and transitions
and share with teammates and stakeholders to test the look and feel of your design. A product
coming from adobe allows integrations with several of its products like Photoshop and After
Effects which is a big plus.
Designers can be more productive by just importing files from their tools of Adobe without any
hassle. Clients can make comments on your prototypes when you share directly, and view designs
in real time on actual devices.
3. Origami Studio:
Cost:
 Free

lOMoARcPSD|20942097
Runs on:
 OS X
Prototypes for:
 Android
 iOS
Origami was initially created by Facebook to help teams build and design products. With this
prototyping tool, we can preview the mockup live on our mobile in real time using Origami Live.
Also, we can show off our designs in presentations in full screen, on a number of different
devices. Sketch and Photoshop designs can be imported into Origami, and your project layers will
be preserved, ready to be linked, animated and transformed as needed.
You can also export your prototype components (including animations) with just one click, so
engineers can copy-and-paste into the project. One of the harshest drawbacks, though, is the lack
of collaboration features. There’s little in the way of commenting and viewing version histories.
This prototyping tool seems more attuned to freelancers or individuals just starting out in the
business.
4. Sketch:

lOMoARcPSD|20942097
Cost:
 Free trial
 $99 for full version
Runs on:
 OS X
Prototypes for:
 OS X
 iOS

lOMoARcPSD|20942097
 Web
WebSketch is similar to Photoshop in many ways, allowing you to edit and manipulate photos.
Sketch’s Vector shapes easily adapt to changing styles, sizes, and layouts, allowing you to avoid a
lot of painful hand-tweaking. Sketch’s fully vector-based workflow makes it easy to create
beautiful and high-quality artwork from start to finish. In UI design, repeating elements is
something very common: buttons, bars, bubbles — all sorts of things; and these reusable elements
can be automatically copied and pasted using the sketch app.
5. Axure:
Cost:
 30-day Trial — Free

lOMoARcPSD|20942097
 Pro — $29/month ($495 to purchase)
 Team — $49/month ($895 to purchase, per user)
 Enterprise (includes on-premise solutions) — $99/month
Runs on:
 OS X
 Windows
Prototypes for:
 All OS’s
Axure provides powerful prototyping without the need for coding. It provides features like:
– Dynamic content for providing hover functions if present.
– Conditional flow statements for checking conditions
– Math functions like adding or removing from cart which reflects the amount
– Data-driven sorting
– Adaptive views for sizing the screen depending on the screen size
– Animations on the prototype can also be catered.
It also makes sharing a prototype to be viewed by your team or client very easy with the click of a
button. Also, Axure RP will publish your diagrams and prototypes to Axure Share on the cloud or
on-premises. Just send a link (and password) and others can view your project in a browser.
6. Webflow:

lOMoARcPSD|20942097
Cost:
 2 Unhosted projects — Free
 Personal — $16/month
 Pro — $35/month
Runs on:
 Web
Prototypes for:

lOMoARcPSD|20942097
 All
Webflow’s main selling point is that it provides such robust functionality without the need to write
a single line of code. Webflow is heavily focused on web animations, interactions, and responsive
web design. Although you can only build, design, and publish the entire site using the visual-
based UI. After you refine your UI mockup how you like it, you can turn into a production-ready
site with just a click. These features appeal to independent designers, who now have the option to
export the prototype without needing developers on-hand.
You can either host your prototype with Webflow or export the code in clean HTML, CSS, and
JavaScript. You can also start with a blank canvas and choose one among the hundreds of ready
webflow templates.
7. Framer:

lOMoARcPSD|20942097
Cost:
 Free Trial (14 days)
 $15/month
Runs on:

lOMoARcPSD|20942097
 OS X
 iOS
 Android
 Windows 10 Mobile
Prototypes for:
 All
Framer is one of the most popular prototyping tools. It’s based on the premise that with the code it
is possible to prototype anything, resulting in novel and beautiful designs. It provides a seamless
workflow, further complemented by device previewing, version control and easy sharing. In case
you do not understand, Framer has a very well structured documentation. Also, there are plenty of
how-to videos and courses on Udemy and O’Reilly about the UX prototyping tool. It offers a
first-hand view of how flexible and powerful code can be.
Like other tools, Framer supports Sketch, Photoshop projects, and will also preserve your design’s
layers. In addition to this, Framer’s Mac App is well designed and provides live previews as you
write code, which is encouraging for those who are writing code for the first time. You can also
import graphics directly from Sketch, Photoshop or Figma.
8. Principle:

lOMoARcPSD|20942097
Cost:
 Free Trial
 $129 for full version
Runs on:
 OS X
Prototypes for:
 iOS
 OS X

lOMoARcPSD|20942097
 Watch OS
Principle is built for OS X and comes with an iOS app to mirror live prototypes. Whether you’re
designing the flow of a multi-screen app, or new interactions and animations, Principle lets you
create designs that look and feel amazing. The app appears very much like the UI of Sketch
including other familiar aspects of alignment, art board creation, and screen connections, plus
real-time previews. You can also mirror your designs on an iOS device.
While Principle does not provide collaboration for teamwork, this drawback will likely be
overshadowed by its offline capabilities. The flexibility of working offline is further highlighted
by increased speeds since you’re not relying on a potentially unreliable or slow connection.
9. Just in mind:
Cost:

lOMoARcPSD|20942097
 $19/month
Runs on:
 OS X
 Windows
Prototypes for:
 Web
 iOS
 Android
Another popular prototyping tool, JustInMind is known for creating high-quality work, although
at a very steep cost. Another big plus is that it can be downloaded on your computer for offline
work anywhere. If you’re new to this tool it comes packed with tutorials and guided videos for
everyone from beginner to expert. Export your prototype to a fully functional HTML document
and make it readily available to view in any web browser. Also, it provides you access to use
items from UI libraries and download numerous add-ons.
10. Balsamiq Mockups:

lOMoARcPSD|20942097
Cost:
 30-day Free trial
 Web app — $12/month
 Single User — $89
 Volume License — Varies by number of users
Runs on:
 Web
 OS X

lOMoARcPSD|20942097
 Windows
Prototypes for:
 Web
 iOS
 Android
We’ll end the list with another powerful prototyping tool called “Balsamiq Mockups”. It
replicates the speed and convenience of creating mockups on paper, but on a digital medium.
Designers can choose from more than 500 pre — made icons and items — or components they
draw themselves. The interactions are basic, and the final, low-fidelity prototype feels more like
an interactive, high-fidelity wireframe.
If you are a ‘UX newbie’, this tool works wonders as it is highly straightforward to use.
Balsamiq’s sweet spot is the UX ideation phase. It produces really great rough sketches of the
prototype for clients to view, which is a big plus for brainstorming sessions. Adopting really
simple and fast keyboard shortcuts for users to increase productivity and the speed of creating
mockups. With all of its low fidelity features, we can consider it more as a wireframing tool rather
than a prototyping tool. If you are not a professional designer and you are looking for a tool that
allows creating simple and static wireframes, Balsamiq can be used.
These prototyping tools have their own special advantages, specialties and suit different needs.
Admittedly, we have not included a lot of other prototyping tools for UI/UX designers. There are
lots of other tools out there, most of which have the same features as mentioned in the above
prototyping tools. Some honorable mentions are Moqups, UXPin, Prototype on Paper, Proto.io,
and Flinto which have some unique features and ease of use as compared to the above.

lOMoARcPSD|20942097
Ultimately, it all comes down to choosing the one that works best for you. If you are a seasoned
designer working on complex animations, Principle might work best. Or, if you are a design
newbie, then Balsamiq Mockups should be your go-to.
(Theuxblog, 2022)
When analyzing how typical prototype techniques affect the software development lifecycle,

lOMoARcPSD|20942097
Task 03
3.1

lOMoARcPSD|20942097
Over the past ten years, several prototyping methodologies have developed. Low-fidelity
prototype, often known as static prototyping, is based on paper and pencil techniques,
storyboarding, and mockups.
Prototype tools can be divided into the following four categories.
 Hypermedia Management Tool
Hypermedia systems are computer-based multimedia platforms that enable the integration of
multiple types of digital content and offer interactive, link-based navigation. The following four
component kinds are distributed among several instances in the hyper form development
environment.
o a server for the hyper-base administration system.

o An integrator of tools.
o The editors.
o Tools for participation.
 Interface builders Tools
The two main categories of interface development tools are as follows.
o Drawing Applications
These are common applications, and the user base is typically well-versed in these tools and
capable of creating the interfaces themselves. Applications like, are among of those that permit
drawing the interface.
 Microsoft Paint (included in windows)

lOMoARcPSD|20942097
 Microsoft Word/Microsoft PowerPoint (available in the MS Office suite)

 Visio (from Microsoft)
o Web interface development tools
Web interface development tools are the programs that are used to create web interfaces. Web
interfaces can be created using programs like Dreamweaver and Microsoft FrontPage.
However, powerful graphics packages from Adobe XD CC won't be available until the delivery
of final prototypes.
 4th Generation Systems

With a variety of add-ons available, these tools enable interface design for Windows using
various user interface components and widgets. They may also be customized for use in various
situations. Power Designer and Microsoft Visual Studio are two of the more well-known
programs (from Sybase). These tools are very user-friendly and may be used for both
development and prototyping.
 Object-Oriented Application Frameworks
These are commercial application frameworks that enable widget-based application

development. The Java Beans Development Kit (Sun) is one example of them, while other
programs like JWeb are also utilized in research. Other object-oriented tools, such as Visual
Studio (Microsoft), Laravel, Code Igniter, Android Studio, Java Builder (Borland), etc., are
occasionally used for prototyping even though they are not entirely appropriate for that
purpose.
Features offered by Visual programming tools

lOMoARcPSD|20942097
o Commercially available, robust development tools

o Cross-platform tools
o Completely visual
o Usable by non-programmers
o Extremely user-friendly, actually after a one-day CHI
Without any precise planning, the RAD (Rapid Application Development) paradigm is built on
prototyping and iterative development. The preparation needed to create the product is done
throughout the software development process itself. Rapid prototyping is a method for creating
software that places a focus on short, iterative development cycles and small feature sets. Rapid
prototyping places more of a focus on the adaptive process than on planning because it is
frequently driven by user interface requirements. Utilizing three-dimensional computer-aided
design (CAD) data, a scale model of a physical item or assembly can be swiftly constructed
using a variety of processes known as rapid prototyping. Typically, additive layer
manufacturing, or 3D printing, is used to construct the item or assembly. In this prototype
model, a prototype is created, tested, reviewed, and authorized by the customer prior to the
designing process. Following this, the design is prepared for coding, testing, installation, and
maintenance. Based on the needs of the customer, this prototype was created.

lOMoARcPSD|20942097
Prototype model of SDLC
Prototyping is defined as the process of developing a working replication of a product or

system that has to be engineered. It offers a small scale facsimile of the end product and is used
for obtaining customer feedback as described below:
The Prototyping Model is one of the most popularly used Software Development Life Cycle
Models (SDLC models). This model is used when the customers do not know the exact project

lOMoARcPSD|20942097
requirements beforehand. In this model, a prototype of the end product is first developed,
tested and refined as per customer feedback repeatedly till a final acceptable prototype is
achieved which forms the basis for developing the final product.
In this process model, the system is partially implemented before or during the analysis phase
thereby giving the customers an opportunity to see the product early in the life cycle. The
process starts by interviewing the customers and developing the incomplete high-level paper
model. This document is used to build the initial prototype supporting only the basic
functionality as desired by the customer. Once the customer figures out the problems, the
prototype is further refined to eliminate them. The process continues until the user approves
the prototype and finds the working model to be satisfactory.
There are four types of models available:
A) Rapid Throwaway Prototyping –

This technique offers a useful method of exploring ideas and getting customer feedback for
each of them. In this method, a developed prototype need not necessarily be a part of the
ultimately accepted prototype. Customer feedback helps in preventing unnecessary design
faults and hence, the final prototype developed is of better quality.
B) Evolutionary Prototyping –
In this method, the prototype developed initially is incrementally refined on the basis of
customer feedback till it finally gets accepted. In comparison to Rapid Throwaway
Prototyping, it offers a better approach which saves time as well as effort. This is because
developing a prototype from scratch for every iteration of the process can sometimes be very
frustrating for the developers.
C) Incremental Prototyping – In this type of incremental Prototyping, the final expected

product is broken into different small pieces of prototypes and being developed individually. In

lOMoARcPSD|20942097
the end, when all individual pieces are properly developed, then the different prototypes are
collectively merged into a single final product in their predefined order. It’s a very efficient
approach that reduces the complexity of the development process, where the goal is divided
into sub-parts and each sub-part is developed individually. The time interval between the
project’s beginning and final delivery is substantially reduced because all parts of the system
are prototyped and tested simultaneously. Of course, there might be the possibility that the
pieces just do not fit together due to some lack of ness in the development phase – this can
only be fixed by careful and complete plotting of the entire system before prototyping starts.
D) Extreme Prototyping – This method is mainly used for web development. It is consists of
three sequential independent phases:
D.1) In this phase a basic prototype with all the existing static pages are presented in the
HTML format.
D.2) In the 2nd phase, Functional screens are made with a simulated data process using a
prototype services layer.
D.3) This is the final step where all the services are implemented and associated with the final
prototype.
This Extreme Prototyping method makes the project cycling and delivery robust and fast, and
keeps the entire developer team focus centralized on products deliveries rather than
discovering all possible needs and specifications and adding unnecessitated features.

lOMoARcPSD|20942097
Advantages –
 The customers get to see the partial product early in the life cycle. This ensures a
greater level of customer satisfaction and comfort.
 New requirements can be easily accommodated as there is scope for refinement.
 Missing functionalities can be easily figured out.
 Errors can be detected much earlier thereby saving a lot of effort and cost, besides
enhancing the quality of the software.
 The developed prototype can be reused by the developer for more complicated
projects in the future.
 Flexibility in design.
Disadvantages –
 Costly w.r.t time as well as money.

lOMoARcPSD|20942097
 There may be too much variation in requirements each time the prototype is
evaluated by the customer.
 Poor Documentation due to continuously changing customer requirements.
 It is very difficult for developers to accommodate all the changes demanded by the
customer.
 There is uncertainty in determining the number of iterations that would be required
before the prototype is finally accepted by the customer.
 After seeing an early prototype, the customers sometimes demand the actual product
to be delivered soon.
 Developers in a hurry to build prototypes may end up with sub-optimal solutions.
 The customer might lose interest in the product if he/she is not satisfied with the
initial prototype.
Use –
The Prototyping Model should be used when the requirements of the product are not clearly
understood or are unstable. It can also be used if requirements are changing quickly. This
model can be successfully used for developing user interfaces, high technology software-
intensive systems, and systems with complex algorithms and interfaces. It is also a very good
choice to demonstrate the technical feasibility of the product.
What is Software Prototyping?
Prototype is a working model of software with some limited functionality. The prototype does
not always hold the exact logic used in the actual software application and is an extra effort to
be considered under effort estimation.
Prototyping is used to allow the users evaluate developer proposals and try them out before
implementation. It also helps understand the requirements which are user specific and may not
have been considered by the developer during product design.

lOMoARcPSD|20942097
Following is a stepwise approach explained to design a software prototype.
Basic Requirement Identification
This step involves understanding the very basics product requirements especially in terms of
user interface. The more intricate details of the internal design and external aspects like
performance and security can be ignored at this stage.
Developing the initial Prototype
The initial Prototype is developed in this stage, where the very basic requirements are
showcased, and user interfaces are provided. These features may not exactly work in the same
manner internally in the actual software developed. While, the workarounds are used to give
the same look and feel to the customer in the prototype developed.
Review of the Prototype
The prototype developed is then presented to the customer and the other important
stakeholders in the project. The feedback is collected in an organized manner and used for
further enhancements in the product under development.
Revise and Enhance the Prototype
The feedback and the review comments are discussed during this stage and some negotiations
happen with the customer based on factors like – time and budget constraints and technical
feasibility of the actual implementation. The changes accepted are again incorporated in the
new Prototype developed and the cycle repeats until the customer expectations are met.
Prototypes can have horizontal or vertical dimensions. A Horizontal prototype displays the user
interface for the product and gives a broader view of the entire system, without concentrating
on internal functions. A Vertical prototype on the other side is a detailed elaboration of a
specific function or a sub system in the product.
The purpose of both horizontal and vertical prototype is different. Horizontal prototypes are
used to get more information on the user interface level and the business requirements. It can
even be presented in the sales demos to get business in the market. Vertical prototypes are

lOMoARcPSD|20942097
technical in nature and are used to get details of the exact functioning of the sub systems. For
example, database requirements, interaction and data processing loads in a given sub system.
(SDLC - Software Prototype Model, 2022)
The tools required to carry out end-user testing on a prototype for an end user. Prototyping
tools for usability testing.
1. InVision
About
InVision is a very popular cloud-based prototyping platform. InVision allows its users to
collaborate, research and test their ideas on the cloud-based digital platform.
InVision has a library of templates for beginners to choose from.
InVision also offers a Studio tool that has features like vector editing, layer styling and
animated drawings which help multiple designers collaborate on instant playback, mirroring
mobile devices and editing timelines.
Runs On

lOMoARcPSD|20942097
 Web Browser
 OS X
 Windows
Distinct Features
 Presentations
 Prototype creation
 Digital whiteboards
 Wireframe planning
 Feedback management
 Works with any design tools
 Drag & Drop feature
 Add gestures in prototypes (Mobile Apps)
 Supports integration with Basecamp, JIRA, Teamwork, Trello, Dropbox, Slack,
Confluence and Microsoft Teams
Cost
 FREE (1 PROTOTYPE) — $0/mo

 STARTER ( 3 PROTOTYPES) — $15/mo
 PROFESSIONAL (UNLIMITED PROTOTYPES) — $25/mo
 TEAM (UNLIMITED PROTOTYPES) — $99/mo [UP TO 5 TEAM MEMBERS]
 ENTERPRISE (UNLIMITED PROTOTYPES) — Varies according to plan [PLUS
ADVANCED FEATURES]
2. Marvel

lOMoARcPSD|20942097
About
Marvel is a cloud-based prototyping platform. With the help of mobile support, Marvel enables
multiple different sized teams to collaborate in a centralized workspace.
App and screen wireframes can be generated easily, using models from the desktop, tablet, and
smartphone to suit each system accurately while providing access to all contributors to post
constructive feedback.
Marvel proud itself on its integration with a number of third-party workflow products and
services through API support.
Marvel also has a companion app for iOS and Android that enables designers to create
mockups natively on the devices.
Marvel also supports codeless drag and drop interface and designers can import mockups from
Sketch or Photoshop easily.
Runs On
 OS X
 Windows
 Web Browser

lOMoARcPSD|20942097
Distinct Features
 Software prototyping
 Wireframing
 Code export
 Swift support
 Android XML support
 Application integration
 Collaborative workspace
 Custom mockup development
 Customizable branding
 Data synchronization
 Mobile integration
 Offline access
 Third-party integration
 Drag & drop interface
Cost
 Free (1 user, 2 active projects) — $0

 Pro (1 user, unlimited projects) — $12 per month
 Team (3 users, unlimited projects) — $42 per month
 Company (6 users, unlimited projects) — $84 per month
3. MockPlus

lOMoARcPSD|20942097
About
Mockplus is a user-friendly, fast and powerful prototype software that allows you to create
mock-ups of mobile applications, web applications and more.
Mockplus proud themselves on their totally visualized interaction designing. That is “What
You See Is What You Get” (WYSIWYG).
The platform comes with various pre-designed components like Pop-up Panel, Stack Panel,
SlidingDrawer, Scroll Box, and Image Carousel for faster and easier mock-up creation.
There are various other features packed in the tool. Check them out!
Runs On
 Web Browser (Cloud-based Deployment)

 OS X
 Window
Distinct Features
 Fast Interaction
 Fast Design
 Fast Testing
 Short Learning Curve (Code-free so get started right away)

lOMoARcPSD|20942097
 Auto Recovery
 Auto Backup
 MindMap Design Mode
 Team Collaboration
 Collaboration Design
 Review
 Page Design
 Support All Platforms
 Pre-Designed Components
 Visualized Interaction Design
 Highly — Customized Interaction Components
 Sketch Import
 Revision history
 Create, Sync and Share “My Libraries” and more.
Cost
 Individual — Mockplus Professional — $59 per user/year

 Unlimited Perpetual License Learn more — $199 per user for a lifetime
 Team — Professional — $599 per team/year
 Unlimited Perpetual License — $1799 per team for a lifetime
 Enterprise — Professional — $2999 per enterprise/year
 Unlimited Perpetual License — $8999 per enterprise for lifetime
4. Adobe XD

lOMoARcPSD|20942097
About
Adobe XD is an all in one solution for UX and UI designers to design and create prototypes in
one go.
It enables designers to create designs and mock-ups for websites and mobile applications.
Featuring a range of UI tools and templates, a versatile artboard and contextual layer panels,
and deep integration with Adobe’s creative suite of products Adobe allows designers to fast-
import of objects from these applications.
It is an all-in-one platform for all the design needs.
Runs on
 OS X
 Windows
 Android
 iOS
Distinct Features
 Advanced animations with auto-animate features

 Drag-and-drop controls
 Preview prototypes on mobile devices

lOMoARcPSD|20942097
 Repeat grid
 Responsive resize tools
 Voice prototyping
 Sketch, Photoshop, and Illustrator file import
 Optimized vector tools
 Auto-Animate in prototypes
 Private invitations (Preview)
 Review and commenting for stakeholders
 Web-based Design Specs for developers and many more.
Cost
 Individual
 Starter — $0
 Single App — $9.99
 Creative Cloud All Apps — $52.99
 Business
 Starter — $0
 Single App for teams — $22.99/user
 Creative Cloud All Apps for teams — $79.99/user
5. Figma

lOMoARcPSD|20942097
About
Figma is an interface design application that is browser-based and there is also a desktop
version for both Windows and Mac OS.
One of Figma’s best features is that even if you lose connectivity you can still keep working on
any document you already had open.
Figma allows for live, real-time collaboration and lets you create libraries of reusable
components that the whole team has access to.
Runs on
 OS X
 Windows
 Browser-based
Distinct Features
 Round-trip component editing

 Live components display
 Drag & drop
 Unsplash photo integration
 Live collaboration with clients
Cost
 Starter (Free)
 Professional ($12 per editor/month)
 Organization ($45 per editor/month)
6. Axure

lOMoARcPSD|20942097
About
Axure RP is an easy-to-use method for wireframing and prototyping that incorporates models,
diagrams, and specifications.
Axure introduces a new approach to software development and the resolution of inefficiencies
created by the discrepancy in skill sets.
With Axure, business and UX practitioners can evaluate challenges, design solutions and build
code-free interactive prototypes using one platform.
Runs on
 OS X
 Windows
Distinct Features
 Create Interactive Prototypes, Wireframes, and Diagrams

 Annotate Prototypes and Diagrams
 Organize Notes for Different Audiences
 Dynamic Content
 Conditional Flow
 Animations

lOMoARcPSD|20942097
 Data-Driven
 Match Functions
 Adaptive Views
 Password-Protected Projects
 Dynamic
 Publish To Axure Share
 View Prototypes and Diagrams from Mobile Devices
 Easy Team Collaboration
 Team Projects
 Check-In/ System
Cost
 30-day Trial — Free

 Pro — $29/month ($495 to purchase)
 Team — $49/month ($895 to purchase, per user)
 Enterprise (includes on-premise solutions) — $99/month
7. Proto.io
About

lOMoARcPSD|20942097
Proto.io is a powerful web-app with many functions. With its code-less working platform,
everything works by drag-and-drop, pressing buttons, and choosing values from lists.
It does often results in finding the setting you want can be a bit overwhelming.
Adding complex micro-interactions is a more sophisticated prototyping method, but the

learning curve is quite simple.
Prototypes can be displayed and experienced interactively within the browser app, but more
significantly, they can be deployed on the actual mobile device, i.e. iPhone, iPad or the
equivalent, providing a beautiful user experience
Runs on
 Cloud, SaaS, Web

 Mobile — iOS Native
 Mobile — Android Native
Distinct Features
 Fully interactive mobile app prototyping

 Prototypes work and interact as real apps
 100% web-based
 Intuitive drag-and-drop User Interface
 Realistic, sharable prototypes
 Actual device prototype testing
 Interactive comments
 High-fidelity prototypes
 Screen transitions
Cost
 Freelancer — $ 24 /mo (Paid annually, 1 user, 5 active projects)

 Startup — $ 40 /mo (Paid annually, 2 users, 10 active projects)
 Agency — $ 80 /mo (Paid annually, 5 users, 15 active projects)
 Corporate — $ 160 /mo (Paid annually, 10 users, 30 active projects)

lOMoARcPSD|20942097
8. Flinto
About
Flinto for Mac is a versatile Mobile application prototyping platform that lets you make
everything from basic click-through prototypes to sophisticated prototypes with interesting
interactions.
With Flinto you can handle projects with all Low, Medium and High fidelity.
Runs on
 Mac OS
Distinct Features
 Animated Transitions
 Micro-Interactions
 Sketch and Figma Support
 Drawing Tools

lOMoARcPSD|20942097
 Scroll Animations
 Sound Effects
 Video Layers
 3D Rotation
 Video and GIF Export
 Dribbble Integration
 Viewer App
 Drag & Drop
Cost
 Starting Price — USD 99.00
9. Justinmind
About
A popular prototyping tool is known for its high-quality prototype creating capabilities. It is an
all in one prototyping & wireframe platform for web and mobile apps.

lOMoARcPSD|20942097
It allows creating prototypes for all types of screens like web browsers, android apps, iOS
apps.
And the best feature of all is its drag-and-drop interface, which makes it very easy for
beginners to use.
Another good feature is that it can be downloaded on your computer for offline work from
anywhere.
The platform is easy to use to even designers who don’t have a technical background as has
code-less wireframe design creating features.
It can also integrate with Google Font & other design tools such as Photoshop and Sketch.
The platform also comes with tutorial videos from beginners to expert level users.
Distinct Features
 Code-free prototyping
 Pre-built UI-Libraries
 Android & iOS UI elements
 Web UI elements
 Custom UI-libraries
 Sharing and feedback feature
 Interactive prototypes viewing and testing feature
 Export and documentation
 Team and collaborative prototyping and more.
Runs on
 OS X
 Windows
Cost
 Professional: $ 19 per user/month (if billed annually) or $29 month-to-month

 Enterprise: $39 per user/month (if billed annually) or $49 month-to-month

lOMoARcPSD|20942097
10. Origami
About
Origami Studio is a prototyping tool developed and used by Facebook. It is only compatible
with macOS.
A mobile app is also available for you which allows you to check out your prototypes on a real
device.
Designed by Facebook with one goal in mind that is to help designers build and quickly test
the user interface (UI) interactions and flows.
But Origami, unlike other prototyping tools like InVision or Sketch, does not support drag &
drop development environment.
Although, you can copy anything from Sketch and paste native layers into Origami Studio.
Then quickly adjust, add behavior and animate any layer property right there.
You can create prototypes for both Android & iOS devices.
Runs on

lOMoARcPSD|20942097
 Mac OS
Distinct Features
 Easy to get started

 Better user stories, prototypes, and workflows
 Interactive design drafts
 UX testing while prototyping
 Making communication between designers & developers easy
 From prototyping to production at no time
 Intuitive and self-explanatory interface.
Cost
 Free for all
(Uxplanet, 2022)
I used end users from the Kuoni travel company as examples while examining the effects of
typical prototyping methodologies within the software development lifecycle. They are listed
below.
 Regular end user
Regular end users interact with the product prototype on a regular basis and are well-versed in
prototyping tools, processes, coding structures, and extensive implementations.
 Novice end user
A novice end user is unfamiliar with the concept of prototyping as well as the tools and
techniques that are utilized in prototyping, unlike the regular end user who actively contributes

lOMoARcPSD|20942097
to the development of the prototype. The end users who are at the beginner level and less
capable of prototyping are the novice end users.
 Professional end user
These users differ from frequent and novice end users. Professional end users are aware of the
techniques for prototyping successfully using paperboard in the initial phases. They have a
large range of prototyping equipment, are well-stocked with them, and are knowledgeable
about how to construct a prototype for various stages of business development. They are those,
such as research scientists, who create software to advance their careers while working in
extremely technical, knowledge-rich fields.
 Expert end user
Expert users are people who are skilled in acquiring and using such knowledge to accomplish
objectives or tasks in an interaction. They have a wealth of interaction knowledge, task
knowledge, and domain knowledge of a particular system. I have developed a feedback form
for the users of this prototype utilizing end-user studies. This is how it works.

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097
3.2
The main prototyping technologies that turn a pencil sketch plan into a prototype are five. They
are Framer, Marvel, Origami, InVision, and Proto.io.
InVision
InVision is a web-based prototyping tool that allows designers to create highly interactive
mockups for web and mobile projects. While you can’t create designs directly within the
InVision app, you can upload your static page designs into the tool and then add hotspots to
transform them into fully interactive mockups. Additionally, InVision has the ability to sync

lOMoARcPSD|20942097
with your Sketch or Photoshop documents, allowing you to update your prototype in real-time
within your design suite program of choice.
In terms of features, InVision has a wide array of valuable tools to facilitate your workflow,
including preview mode, build mode to create hotspots, inspect mode for handing off assets to
team members, comments, version control, and file syncing. It also offers a variety of transition
animations and mobile gestures (swiping, tapping, etc.) that can help bring your design to life.
One of my favourite features in InVision is its ability to create hover states for any design
element. This allows your prototype to be even more representative of the final product as you
can add advanced interactivity such as drop-down menus and hover states for buttons.
InVision is dedicated to creating resources that offer their users enhanced functionality when
tackling design projects. Most recently, InVision announced they acquired Wake, a design tool
focused on supporting design visibility throughout a particular organization. InVision
consistently updates and improves their product offering. Check out their website for the latest
feature announcements.
InVision’s ability to facilitate collaboration is its greatest asset. Teammates, clients, or anyone
shared on the mockup have the ability to leave location-specific comments and threads. This
eliminates confusion created through back and forth email threads, and helps ensure that
changes are implemented exactly where they need to be. Plus, with InVision’s Freehand tool ,
teams can co-draw to share sketches and rough ideas in real-time.
Framer
Framer is a screen design tool that runs on macOS, requires coding, and is best used when
creating animated or interactive prototypes. Using Framer, you can design elaborate UX flows,
insert shapes, add text, and reposition images. The tool has a wide range of capabilities ranging

lOMoARcPSD|20942097
from design, collaboration, and prototyping, making it ideal for teams with varying skills and
requirements.
Framer offers an all-in-one design workflow, with a design workspace equipped with a vector
editing toolkit that allows for easy exports of each frame and shape as bitmaps or vectors.
Framer also has a code workspace for adding animations, gestures, and components. You can
export production-ready code by right-clicking to Copy CSS or Copy SVG.
While in the design workspace, your work can be made responsive so it’s possible to design for
a variety of devices. When programming inside Framer, documentation is easily accessible
inside the app. This includes code and building blocks for layers, animations, states, events, and
more. Programming is done in the CoffeeScript language, a more accessible version of
Javascript described by the creators as, “an attempt to expose the good parts of JavaScript in a
simple way.”
When you’re ready to share your work with your team or stakeholders, you can copy and paste
assets or export your entire canvas. Since it’s a browser-based tool, anything that’s designed is
optimized for the web. For projects that require collaboration, this can be done by exchanging
comments and uploading prototypes to Framer Cloud.
Marvel
Marvel is a great mobile and web-based prototyping tool that excels in its ability to simplify the
prototyping process. As soon as you’ve signed up for your Marvel account, you’re immediately
dropped into the interface and can begin creating your first prototype. From there, you can
easily upload your image files into Marvel and start adding gestures and transitions. The

lOMoARcPSD|20942097
platform supports direct uploading of certain image file types, including PSD, GIF, and JPG, as
well as third party uploading via Google Drive, Sketch, or Dropbox.
While Marvel doesn’t offer the kind of complete image editing capabilities found in other
software, it does have some basic functionality like background color changes and image
resizing. You also have access to 8 different project frames when creating your prototypes. This
allows you to rest assured that your mockups are fully optimized for the specific device you are
designing for.
Marvel’s mobile companion app is probably the tool’s coolest feature. If you’re a designer who
loves starting projects on paper, the app can turn your sketches into prototypes just by taking a
photo. Your photos are automatically synced with your Marvel account, allowing you to
quickly create mockups to experiment with before even designing a single layout in Photoshop
or Sketch.
Not only is Marvel simple to use, but it’s also simple to learn. Their website is complete with
FAQs, video and written tutorials, as well as a regularly updated blog. Marvel is also home to a
thriving community of designers who regularly share their prototype designs to help inspire the
workflows of others.
While the simplicity of Marvel may limit the functionality desired by some designers, its low
barrier to entry and companion app makes it the perfect tool to get up and prototyping quickly.
Origami
Origami Studio is a Facebook-owned prototyping tool that has been used to create mockups for
several apps including Instagram, Messenger, and Paper. Although Origami is reserved for Mac
users only, it offers the ability to preview prototypes live both on Android and iOS devices. The

lOMoARcPSD|20942097
tool also offers designers a suite of gestures and transition animations common to mobile UI
patterns—many of which are available via downloadable sample files.
Origami offers a couple of useful features for interactive prototyping, including copying
anything from Sketch and pasting it as a native layer, as well as an extensive documentation
library complete with forums, video tutorials, and guides. Origami Studio is useful when
showing many microinteractions, since they can be visualized in high detail to show exactly
how something will work.
Proto.io
Proto.io is a web-based design tool that’s used to create fully interactive prototypes for many
interfaces including mobile, web platforms, the Apple Watch, and games. It was developed by
the Labs Division of SNQ Digital for user experience professionals, interaction designers,
mobile designers, and app enthusiasts.
Proto.io offers a familiar and intuitive drag-and-drop UI with no coding required, making it
accessible to anyone. It has the capability to create layers on different screens, making working
on a prototype much easier. Designing in Proto.io can be done quickly, since the whole library
of interactions is integrated and ready to be applied to any layer of the screen. The development
team consistently introduces new features to the product. They most recently launched
Overflow, a user flow diagramming tool for designers.
(Shopify, 2022)

lOMoARcPSD|20942097
After making a few iterations of the prototype, I received some customer feedback, which is
seen in full here.
In this feedback form have 15 responses.

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097
Planning the prototype

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097
After getting the feedback, additionally add to the two questions for feedback form.
Responses for feedback form after the adding new two questions.

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097
Utilize the right tools to transform your plan into a prototype.

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097

lOMoARcPSD|20942097
After some system iterations, I updated the prototype in accordance with user feedback after
soliciting thoughts and suggestions from the customer.
After that, I experimented with the prototype and iterated on the system in response to
consumer input.
The rebuilding of the prototype is shown in the following.
Task 04

lOMoARcPSD|20942097
4.1
Changed the login page picture for this
Changed the register now page
According to the responses have undergone several changes and additions in the study. Similar
to how the first page picture changed, some features were missing, and those were found and

lOMoARcPSD|20942097
fixed. Examples include the login page button not appearing on the register now page. It is now
fix one. After making the changes, it is then possible to observe that the clients are satisfied.
Compare original plan and final output
Features Original Plan Final output

Login In this plan upload below picture. But according to the customer feedback this
Page picture is changed
Register Previously not to insert the login page According to customer feedback insert the
Now button button of the login page button.
Page

lOMoARcPSD|20942097
The table above shows how the final prototype was evaluated critically and how the test results
compared to my original design. This was done using the instructions on the feedback forms.

lOMoARcPSD|20942097
The following are some key features, in my opinion and from the perspective of my website.
Prototypes help to get feedback:

Reviews are always important. They help you know about the concerns in your design.
You can find out what your clients really want and what changes are to be done. For example, a
client can tell you where they need improvement as they go through a functional prototype.
This way, you can get their issues resolved even before the expensive and hectic development
stage begins.
Prototypes let me explore new creative dimensions:

The prototype lets you think from the various angles to make things better. What if you change
the navigation style? Will the design look better if you put the menu bar at the bottom? What
about using whitespace as a background?
With a fully functional graphical prototype, you can easily make the changes to see how things
behave. You just get the freedom to experiment.
Prototyping Reducing development time:

Last minute design changes or tweaks hinder the entire development process. Even worse,
maybe you have to start from scratch again. It is really frustrating and time-consuming to
recode an app, website or other digital product.
Such things not only thwart the process but also cost money and time. Therefore, a visual
representation is a must for a timely “fine tune”.
Prototypes help to stay focused:

Designing is a hectic and cumbersome process, no matter if you are doing it for a mobile app or
a website. Therefore, focusing on the outcome is really important in such situations. Prototype

lOMoARcPSD|20942097
clarifies the things about the products as well as the user flow. The process is all about giving
you an overview of your concept, not minute details. It helps you get valuable insights while
moving to the next stage without doubts or worries. Prototyping helps you to see the things
from the user’s viewpoint.
Prototype helps to iterate quickly on design:

Iterative design is a cyclic process which involves prototyping, testing, analysing and
improving. Or you can say that it is the process of testing and evaluation of the product at
different design stages. Prototyping simplifies the process as it helps to find out if minor fine
tuning or replacing the entire part can work.
Prototypes help to build a great UX:

Whether it’s a website or an app, your digital product should be capable enough to hook the
users for longer. Therefore, it’s important to retain users and understand their behaviours.
A prototype lets you observe their interaction with your digital product. You can take note of
their behaviours in the development process and tweak your product accordingly. For example,
you can make the buttons more noticeable observing that users are clicking them more often. It
will help you enhance user experience with your product.
(Information-age, 2022)
This model is flexible in design.

It is easy to detect errors.
We can find missing functionality easily.

lOMoARcPSD|20942097
There is scope of refinement, it means new requirements can be easily accommodated.

It can be reused by the developer for more complicated projects in the future.
It ensures a greater level of customer satisfaction and comfort.
It is ideal for online system.
It helps developers and users both understand the system better.
Integration requirements are very well understood and deployment channels are decided at a
very early stage.
It can actively involve users in the development phase.
Disadvantages of prototyping
This model is costly.

It has poor documentation because of continuously changing customer requirements.
There may be too much variation in requirements.
Customers sometimes demand the actual product to be delivered soon after seeing an early
prototype.
There may be sub-optimal solutions because of developers in a hurry to build prototypes.
Customers may not be satisfied or interested in the product after seeing the initial prototype.
There is certainty in determining the number of iterations.
There may be incomplete or inadequate problem analysis.
There may increase the complexity of the system.

lOMoARcPSD|20942097

lOMoARcPSD|20942097
References
Anon., 2022. Andplus. [online] Available at: <https://www.andplus.com/blog/4-types-of-

prototyping> [Accessed 5 December 2022].
Anon., 2022. Maze. [online] Available at: <https://maze.co/blog/prototype-testing/> [Accessed 5

December 2022].
Anon., 2022. TechTarget. [online] Available at:

<https://www.techtarget.com/searchsoftwarequality/definition/user-acceptance-testing-UAT>
[Accessed 6 December 2022].
Anon., 2022. Rapidsrepro. [online] Available at: <https://rapidsrepro.com/advantages-

disadvantages-prototyping/> [Accessed 6 December 2022].
Anon., 2022. apt-mold. [online] Available at: <https://www.apt-mold.com/blog/the-advantages-

and-disadvantages-of-rapid-prototyping/> [Accessed 6 December 2022].
Anon., 2022. Prototypeinfo. [online] Available at: <https://prototypeinfo.com/evolutionary-

prototyping-and-throw-away-prototyping/> [Accessed 6 December 2022].
Anon., 2022. Evolutionary Prototype Definition. [online] Available at:

<https://mockitt.wondershare.com/prototyping/evolutionary-prototyping.html> [Accessed 6
December 2022].
Anon., 2022. tryqa. [online] Available at: <http://tryqa.com/what-is-incremental-model-

advantages-disadvantages-and-when-to-use-it/> [Accessed 7 December 2022].

lOMoARcPSD|20942097
Anon., 2022. Disadvantages and Advantages in Extreme Programming. [online] Available at:
<https://hygger.io/blog/disadvantages-and-advantages-of-extreme-programming/> [Accessed 7
December 2022].
Anon., 2022. webflow. [online] Available at: <https://webflow.com/blog/prototyping-tools>

[Accessed 7 December 2022].
Anon., 2022. Theuxblog. [online] Available at: <https://medium.theuxblog.com/11-best-

prototyping-tools-for-ui-ux-designers-how-to-choose-the-right-one-c5dc69720c47> [Accessed
25 December 2022].
Anon., 2022. GeeksforGeeks. [online] Available at: <https://www.geeksforgeeks.org/software-

engineering-prototyping-model/> [Accessed 25 December 2022].
Anon., 2022. SDLC - Software Prototype Model. [online] Available at:

<https://www.tutorialspoint.com/sdlc/sdlc_software_prototyping.htm> [Accessed 26 December
2022].
Anon., 2022. uxplanet. [online] Available at: <https://uxplanet.org/guide-to-top-10-prototyping-

tools-745e5b539dbc> [Accessed 26 December 2022].
Anon., 2022. Shopify. [online] Available at: <https://www.shopify.com/partners/blog/62745923-

5-of-the-best-prototyping-tools-to-test-out-your-web-and-mobile-designs> [Accessed 26
December 2022].
Anon., 2022. Information-age. [online] Available at: <https://www.information-

age.com/prototypes-ideas-13789/> [Accessed 26 December 2022].
Anon., 2022. GeeksforGeeks. [online] Available at: <https://www.geeksforgeeks.org/advantages-

lOMoARcPSD|20942097
and-disadvantages-of-prototype-model/> [Accessed 26 December 2022].

lOMoARcPSD|20942097
Grading Rubric
Grading Criteria Achieved Feedback
LO1 Explore forms of prototypes appropriate for

various functionality and
end user testing requirements.
P1 Recognise specific forms of prototyping functionality and Achieved Yes. Recognised specific forms of prototyping functionality
and end user testing requirements.
end user testing requirements.
P2Evaluate standard tools available for use in prototyping. Achieved Yes. Evaluated standard tools available for use in
prototyping.
M1 Review specific forms of prototyping and the Not No. Due to late submission.
advantages and disadvantages of end user testing Achieved
requirements for appropriateness to different testing
outcomes
LO2Plan a prototype for specific target end
users and planned tests.
P3 Review different end user categorisations, classifications Achieved Yes. Reviewed different end user categorisations,
classifications and behaviour modelling techniques.
and behaviour modelling techniques
P4 Explore a specific end user and an appropriate Achieved Yes. Explored a specific end user and an appropriate
prototyping methodology to test with this user type. prototyping methodology to test with this user type.
M2 Apply end user classification and behaviour modelling Not No. Due to late submission.
to select an appropriate prototyping methodology. Achieved
M3 Suggest a plan to use appropriate prototyping Not No. Due to late submission.

lOMoARcPSD|20942097
methodology and tools to conduct end user testing. Achieved
D1 Evaluate the impact of common prototyping Not No. Due to late submission.
methodology within the software development lifecycle. Achieved
LO3Develop multiple iterations of the prototype

using appropriate tools
P5 Explore appropriate tools to develop multiple Achieved Yes. Explored appropriate tools to develop multiple
prototypes.
prototypes.
P6 Perform end user experiments and examine feedback Achieved Yes. Performed end user experiments and examine
feedback.
M4Employ an appropriate set of tools to develop your Not No. Due to late submission.
plan into a prototype. Achieved
M5 Using end user feedback build a new iteration of your

Not
prototype modified using the most important feedback Achieved No. Due to late submission.
and enhancements.
D2 Create multiple iterations of your prototype and Not No. Due to late submission.
modify each iteration with enhancements gathered from Achieved
user feedback and experimentation.

lOMoARcPSD|20942097
LO4 Evaluate user feedback and test results from

multiple iterations of the prototype and end user
testing
P7 Analyse end user feedback from multiple iterations of Achieved Yes. Analysed end user feedback from multiple iterations
your prototype of your prototype.
M6 Undertake a critical review and compare your final Not No. Due to late submission.
prototype and your test results with your original plan.. Achieved
D3 Critique the overall success of your prototype and Not No. Due to late submission.
discuss your insight using prototyping. Achieved

Unitsunit 28 Prototyping

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unitsunit 28 Prototyping

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|20942097

Unit(s) Unit 28 :Prototyping

HND in Computing (ESOFT Metro Campus)

Studocu is not sponsored or endorsed by any college or university

Is the feedback to the student:

In formative feedback section,

1 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

assessor has given enough

In summative feedback section,

Confirm action completed

Assessor signature Date

2 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

Higher Nationals - Summative Assignment Feedback Form

LO3. Develop multiple iterations of the prototype using appropriate tools.

Grade: Pass Assessor Signature: gaveen.kith@esoft.lk Date: 2023-01-01

Grade: Assessor Signature: Date:

Internal Verifier’s Comments: Agree with the decision of the assessor.

Signature & Date: ishara.upayanthi@esoft.lk 2023-01-01

3 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

Feedback: Student to Assessor

4 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

5 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

2. Attach this brief as the first section of your assignment.

3. All the assignments should be prepared using a word processing software.

Word Processing Rules

2. Use 1.5 line spacing. Left justify all paragraphs.

7. Failure to achieve at least PASS criteria will result in a REFERRAL grade .

6 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

Higher National Diploma in Business

7 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

Unit Learning Outcomes:

Assignment Brief and Guidance:

8 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

 Management expects an attractive design with UI and UX

9 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

10 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

11 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

12 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

1. Rapid (Throwaway) prototyping

1. RAPID (THROWAWAY) PROTOTYPING

13 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

14 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

15 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

16 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

17 Senuri Weerasinghe Prototyping Assignment no 1

Downloaded by Sandhil Lakvindhu (sandhillakvindhu@gmail.com)

18 Senuri Weerasinghe Prototyping Assignment no 1