Prototyping for Web Application: A Practical Guide

Desklib provides solved assignments and past papers to help students succeed.

Prototyping

Table of Contents
Introduction......................................................................................................................................4
LO1..................................................................................................................................................5
P1. Recognise specific forms of prototyping functionality and end user testing requirements...5
P2. Evaluate standard tools available for use in prototyping.......................................................9
LO2................................................................................................................................................13
P3. Review different end user categorisations, classifications and behaviour modelling
techniques...................................................................................................................................13
P4. Explore a specific end user and an appropriate prototyping methodology to test with this
user type.....................................................................................................................................17
LO3................................................................................................................................................22
P5. Explore appropriate tools to develop multiple prototypes...................................................22
P6. Perform end user experiments and examine feedback.........................................................27
LO4................................................................................................................................................31
P7. Analyse end use feedback from multiple iterations of your prototype................................31
Conclusion.....................................................................................................................................33
References......................................................................................................................................34
List of Figures
Figure 1: low fidelity.......................................................................................................................7
Figure 2: medium fidelity................................................................................................................7
Figure 3: High fidelity.....................................................................................................................8
Figure 4: User Acceptance testing...................................................................................................9
Figure 5: Flinto..............................................................................................................................10
Figure 6: Axure..............................................................................................................................10

Figure 7: Origami. Design.............................................................................................................11
Figure 8: Prottapp..........................................................................................................................11
Figure 9: InVision..........................................................................................................................12
Figure 10: Design thinking methodology......................................................................................19
Figure 11: Use case diagram..........................................................................................................21
Figure 12: About Us Page..............................................................................................................22
Figure 13: Contact Page.................................................................................................................23
Figure 14: Games page..................................................................................................................24
Figure 15: Home Page...................................................................................................................25

Introduction
Prototyping refers to an initial phase of the software development. Before a final release of the
software, fixes in the product are made. Such testing is known as the beta testing or the beta
phase. These are the incomplete version of the developing software program and it simulates few
aspects of the final product of it may be different from the same. It has several benefits and
therefore given preference while developing the software. It is used by the developers to evaluate
the design by getting the feedback from the target users in the early stage of the project
development. Different prototypes recommended by DSDM are capacity and performance,
usability, business, and capability prototypes.

LO1
P1. Recognise specific forms of prototyping functionality and end user testing
requirements.
Prototyping is the first phase of the software development which is done before initializing the
actual implementation of the software and it helps in fixing the bugs which occurs before the
actual release. Testing one is called the beta testing or the beta phase. This prototype is used by
the software developers to get the actual feedback of the target users. It is a part of detailed
process of software service or product implementation (Devadiga, 2017). Best practices of
prototyping include the idea of making initial users aware about the software or demystifying
prototyping. Another way is to communicate the stakeholder about all the activities to ensure that
the same page consists all of the information. Also, the company can develop a detailed strategy
for events and team meetings around prototyping. Categories of prototypes recommended by
DSDM include:
 Capability prototypes: used to demonstrate, evaluate and develop a concept or a design
approach.
 Business prototypes: it is used to demonstrate and design the processes of business being
automated (Dove, et. al., 2017).
 Capacity and performance prototypes: used to define, predict, and demonstrate the
performance of the system at the time of peak load and to evaluate the system’s non-
functional aspects.
 Usability prototypes: used to refine, demonstrate and define the design of user interface
by look, feel, accessibility and usability.
The prototype’s DSDM lifecycle:
 Prototype identification
 Plan agreement
 Prototype creation
 Review of prototype (Huddleston, 2017)

The challenge for a developer or a designer is that they have to communicate the feel and look of
the product and service to the product management team. Prototyping can give the following
benefits:
 Better understanding:
It represents a strong visualization of the design to know about the look and feel. It also
helps the members of the team to comprehend the whole designing process (Liedtka,
2015).
 Early changes:
It helps to save the cost and the time because making changes in ready model is quick
and less cost consuming which helps to achieve the objective at very fast rate.
 Early feedback:
Gathering of feedbacks is most significant at it can give review about the software going
to develop. If any changes desired, then it can be made at the earlier stage only (Low, et.
al., 2015).
 User testing and user research:
The research about the user’s requirements is most important and also their opinions
matters a lot. This can be achieved by the prototyping,
 Validation before development:
Multiple discussions are required between the iterations and prototypes allow this before
developing a final product.
Approaches of prototyping:
 Low fidelity:
They are prototypes on paper which are given at the early stages with a rough idea and
sketch (Miller, et. al., 2018). In such prototypes changes are made quickly and easily. It
aims to focus on the usage of system instead on look and feel.

Figure 1: low fidelity
 Medium fidelity:
In such prototypes albeit limited, practical functionalities are also created which are
based on the needs of the user. This the best practice at the intermediate stage of the
product development (Na, et. al., 2016)
Figure 2: medium fidelity

 High fidelity:
Such prototypes give the design similar to the actual product after finishing. It provides a
realistic experience with the functionalities (Schwarz, 2017). It consumes lots of money
and time.
Figure 3: High fidelity
End user testing
It is technically known as the user acceptance testing (UAT) or he beta testing. In this type of
testing, product is tested in the targeted real world with the help of real end users. This ensures
the satisfaction of the clients according to their needs. It is done especially to validate the flow of
business (Tondello, et. al., 2016). It does not aim to focus on the spelling mistakes, cosmetic
errors or the system testing. It involves end users and clients. It is necessary because change in
requirements is not effectively communicated to the developers and also because sometimes
developers add some additional features according to their understanding.

Figure 4: User Acceptance testing

P2. Evaluate standard tools available for use in prototyping.
Prototyping tools are used to make the look of the project and it simulates the low of application,
performance testing and the creation of good user experience without the code. There are various
tools for UX designing which aims to fulfill different requirements of the user (Devadiga, 2017).
Some of the tools are discussed below in detail:
 Flinto: it has two versions: web app and IOS app. It is capable for designing both
complex interactive prototypes and simple click-throughs without the skills of
programming. Transitions can be reused, layer can be controlled, and complexities can
vary. It uses the system drag and drop (Dove, et. al., 2017).
Figure 5: Flinto
 Axure: it is used mostly by the professional designers. Mastered peoples are able to
create the more advanced interactive prototypes, customer journey maps, click through
wireframes, and user flow (Huddleston, 2017). Creating prototypes for website is easy
using this tool but prototypes for the mobile application is time consuming and complex.

Figure 6: Axure
 Origmi.Design: this tool has many features for prototyping which includes sketches,
forums, and Photoshop. Facebook’s design is created by this tool. This also mallows the
testing of the interactive prototypes for mobile on IOS device using the app called as
Origami Live (Liedtka, 2015).
Figure 7: Origami. Design
 Prottapp: this tool is used to create the prototypes of the mobile and web apps. This is
versatile and rich prototyping which allows the creation of UI mockups, desktop software

prototypes, screen navigation, interactive wireframes, and website layouts (Low, et. al.,
2015).
Figure 8: Prottapp
 InVision: it is a powerful tool for designing prototypes because team constantly adds new
features. It also helps the designer to design the prototypes more easily and efficiently.
Feedback is smoothly management which attracts the designer to use such a tool.
Feedback can be directly achieved by the designers and the clients (Miller, et. al., 2018).
Figure 9: InVision