Prototyping Assignment: User Experience, Interface Design and Testing

This project explores the concept of prototyping in user experience and interface design. It begins by defining prototyping and providing examples, including wireframing for a news website, and discussing end-user testing methods like feedback systems, usability testing, and contextual interviews. The assignment then evaluates and compares prototyping tools such as Adobe XD, Sketch, and Balsamic mockups based on different criteria. Finally, the project delves into the design thinking methodology, using it to explore a specific end-user through the creation of a questionnaire to gather requirements and define system features. The project emphasizes the importance of prototyping in gathering user feedback and refining designs for effective product development.

Running head: PROTOTYPING
Prototyping
Name of the Student:
Name of the University:
Author Note

1
PROTOTYPING
Table of Contents
P1 Recognise specific forms of User Experience and Interface Design and end user testing
requirements...............................................................................................................................2
Define what prototyping is.....................................................................................................2
Discuss some examples of prototypes....................................................................................3
Discuss end user testing.........................................................................................................5
P2 Evaluate standard tools available for use in prototyping......................................................6
Discuss and Compare at least 3 prototyping tools (e.g. Adobe XD, Sketch) based on
different criteria......................................................................................................................6
P4 Explore a specific end user and an appropriate prototyping methodology to test with this
user type.....................................................................................................................................9
Explain the design thinking methodology..............................................................................9
Use design thinking methodology to explore a specific end user by:..................................11
Creating a questionnaire to gather requirements..............................................................11
Defining the requirements and understanding the features of the system.......................11
References................................................................................................................................12

2
PROTOTYPING
P1 Recognise specific forms of User Experience and Interface Design and
end user testing requirements
Define what prototyping is
Prototyping is a process that would provide the client with a sample system which is
to be developed for the clients. In addition to this, the prototyping is a process which would
be used for gather further requirements for the development of a particular system (Adiono et
al. 2016). The prototype developed provides an insight to the visualization of the front end
and the functionalities of the system. The developed product is presented in front of the
clients who provide feedback on the products which are used for the further development of
the system. Upgrades are used in the product as per the feedback of the clients. It is very
important in development stages of the system.
The developer of the system is also able to make some additional assumptions
regarding the development of the system. The problems in the current development can be
fixed easily by the prototyping method. The prototyping method also includes the process of
making clients in the system aware of the main functions in the system (el Khalid et al.
2016). These would also be efficient for the developers to come to the exact solution that is
demanded by the clients. In addition to this, all the procedures are being communicated fully
to the stakeholders in the system.
The prototype preliminary of the actual system to be developed is basically designed
for the validation of the product design, presenting the investors with the licences options,
protecting the intellectual property, kinks removing in manufacturing and testing the product
and refining it. Representation is one of the main characteristics of a prototype and the
representation is a rudimentary development of the actual product which shows the correct
working and designs of the product. The precision is an important characteristic of the system
which would yield better response and feedback from the clients. The prototype should be
performing the some of the functionalities of the actual system if the possible (Senouci et al.
2016). The prototype design is also required to be flexible and should be having scope for
improvements so that there are no problems during the full implementation of the system.
Additionally prototypes can be categorised into several categories. These include the
functional prototypes, display prototypes and the miniatures.

3
PROTOTYPING
 Functional prototypes - The designing of the functional prototypes are designed
efficiently so that they can incorporate the actual functionalities that would be
performed without the visualization. Of the actual product.
 Display Prototypes – The display prototypes are actually the front end designs of the
prototype without providing much of the backend functionalities (el Khalid et al.
2016). They provide the screen display and describe the look and functionality of the
actual end product to be developed.
 Miniatures – The miniatures are basic versions of the actual product, which are
smaller than the actual product and provide less functionalities than the actual one.
They are the implementations of the sub-systems in the actual system to be developed
for the organization.
Discuss some examples of prototypes
The development of the miniatures are usually done with the help of the 3D printing
products. Additionally, paper printing is also an example that would be used for the
development of the throwaway prototype that is rough hand drawing and that is also used for
the identification of the screen designs and the functionalities of the system.
In addition to this there are mock-up of different type of prototyping tools that are
used for displaying the navigation and usability of the prototype used for the development of
the actual system (Hammer 2015). For explanation and an example the news publishing
website has been selected here. The design provided below has been developed in visual
paradigm.

4
PROTOTYPING
This is method of prototype development is known as the wire framing. This is a
wireframe of the front page of the new website. This is used for defining the blocks in which
particular set of contents are required to adjusted in and the navigation procedures are also
displayed using the wireframes. Additionally, the wire flow makes an effective by using the
UX designs which gives them the option to design step-based UX designs (Chacon and
Ivantysynova 2019). The interactions of the user involves the cases which are exceptions and
the alternate options which is used for the navigation purpose of the easing out the
complexity in the development.

5
PROTOTYPING
A wireframe have obvious limitations on visual characteristics. Generally a wireframe
can be finished by using boxes, lines, and a grayscale colour palette (to represent different
levels of visual hierarchy in the design). This is one of the major characteristics of a
wireframe.
Discuss end user testing
End user testing involves the users using the prototype and providing feedbacks about
the different components of the designed prototype. There are various type of testing which
are involved in the testing of a prototype (Devadiga 2017). These are categorised under the
usability testing procedures. Additionally, different type of testing for any type of system is
described below:
Feedback System: The online feedback system is used for the development of the
requirements as expected by the clients. This mainly done by providing a wide range of users
with the beta model of the actual system which is to be developed. In addition to this, the
users would be provided with the forms and the rating sheets which would be filled out by the

6
PROTOTYPING
users and the ratings and the feedbacks would be used by them for the development of the
full system (Adiono et al. 2016). Additionally, the data is gathered from the online surveys
which are conducted are used for analysis. The data obtained for analysis is further used for
the development of the system and used for making improvements in the already existing
system.
Usability Testing: The usability testing is conducted by providing the end users with the
roadmap in which they are instructed to perform various type of functionalities in the system.
On successfully completing the tasks the users answers a set of questions and provides rating
the system. This tests are used generally for the testers and the higher authorities in the
organization (White, Lee and Burke 2019). This provides the developer with some excellent
insights in the work they are conducting and helps them in the further improvement of the
system. The process is also helpful in debugging the end product and errors reductions.
Contextual Interviews: The participants are to the live field of deployment during the
deployment of the system by the developers. They work on the system in the live
environment and provide the developers with an immediate feedback so that they can make
quick fixes to the system. This would make the task of maintenance of the quality of service
for the company more efficient and help them in providing their customers with excellent
services accordingly.
P2 Evaluate standard tools available for use in prototyping
Discuss and Compare at least 3 prototyping tools (e.g. Adobe XD, Sketch) based
on different criteria
There are a large number of tools used for the development of the prototypes and
these tools vary accordingly and have different type of functions which can be useful during
the development of different type of prototype models (Exner et al. 2016). The detailed
explanation of the different type of tools available for use in User Experience and Interface
Design:
Tool Description Pros Cons
Card Sorting It is a method in which
the developer who is
developing the
products usually
 This
technique is a
simple one
 This is a
 The technique is
variable and
hence, ignoring
various tasks

7
PROTOTYPING
interrogates the
scenarios and develops
some ideas about the
product. The
developers involves
some participants in
these procedure and
take immediate actions
during the
development. It could
be totally see doing a
sort the way the user is
describing and it could
yield some really
interesting results. In a
way, the users are still
doing a more
traditional card sort,
since the
functions/action would
presumably be on
predetermined screens.
If this is the case, it's
actually more of a
reverse card sort, since
the user has got the
screens established
and the user would
sort into them. The
other option is to have
the user just group
functions/actions and
then have them
determine the name of
cheap
technique
 This is a very
fast technique
 The technique
is generally
based on the
users
 This
technique is
very popular
during the
development
which are not
always useful
might hamper the
end product.
 The process takes
up a lot of time
and hence this
often avoided.
 This technique
often keeps
various problems
unresolved.

8
PROTOTYPING
the resulting screens.
Adobe XD The Adobe XD
products provides a
wide range of
development criteria
such as, mobile, tablet,
desktop and even
wearables. It gives the
users the core of what
they need, and also
provides the facilities
that the other tools
would be providing.
So technically XD and
web or mobile
development are
similar in a way.
Which eases up things.
But, Adobe XD is not
one tool for all needs.
While the user can
make some
illustrations with it,
there are better tools
for the job like
Illustrator or Affinity
Designer (or really,
any other if this type).
The designers can also
create icons and
illustrations there and
place them in XD.
 The interface
of the tool is
very clean
 The tools start
up takes up
very less
time.
 The tool
provides
various type
of inbuilt UI
kits which can
be used in the
likes of
windows and
IOS
Development.
 Filling up
content in the
UI is very
easy for the
tool.
 The
prototyping
feature is also
very easy as
the
application
shows the link
to each page
by easy
clicking and
 The repeating
object feature is
an
underperformanc
e and doesn’t
work as per the
needs of the user.
 Controlling the
Animated UI is
very difficult in
the case of Adobe
XD.
 Additionally,
there are no scope
to export the CSS
from the tool.
 Live preview
experience for the
application is not
up to the mark as
the property only
works when in
use in a Mac OS.

9
PROTOTYPING
selecting
processes
Sketch This tool is very useful
for designing the
vectors. This provides
efficient options for
the designing of the
prototype with the
CAD tools.
 It is very
cheap
 It is great for
web and
mobile
layouts
 It is vector
based
 It has a large
number of
pre-loaded
templates
which are
easy to add.
 It has very limited
illustrations
 Sharing the
solutions on
cloud is not easy.
 This built
exclusive for
Mac.
Balsamic
mock-ups 3
This wireframe
designing tool. The
tool provides limited
options however very
important options are
available in the tool.
 It provides
very easy
drag and drop
options
 It is easy to
use
 It is very
quick
 Multiple display
organizations are
not supported
 Android and IOS
specific
components are
unavailable.
P4 Explore a specific end user and an appropriate prototyping
methodology to test with this user type
Explain the design thinking methodology
Design Thinking is an ability that would help the organizations to understand the
needs of the customers and the answer their needs. It is a human centred idea rather than a
product centred idea. With design thinking, the focus is shifted to rapid iterations and active
participation of the customers thereby helping the developer address the root cause and help
you deliver what the end-user actually needs (de Lepe et al. 2015). Infusing the business with

10
PROTOTYPING
a design-oriented approach which keeps the customer in the driver seat may not only give
measurable and real-time results but will also give a striking competitive edge.
In addition to the above placed information it is to be noted that there are five steps in
design thinking that is used for the development of new innovative model:
Empathise
The first step in design thinking is empathise which is associated with the
understanding of the problem that the client is facing currently. The step is associated with
the consultation with the experts about the analysis of the current problems. The main steps in
emphasize phase are observing, engaging and empathizing with the clients to understand the
main problems faced by them currently.
Define
In this stage the information gathering is one of the main functionalities required to be
performed. The observations are analysed and synthesized to perform the definition of the
core problems. The problem statement is developed in a human –centred manner (Kolko
2015). This stage enables the designers in gathering as much information as possible so that
problems can be resolved with least effort applied.
Ideate
By focusing on the most promising ideas, the ideation phase will help you turn a
strictly theoretical concept into a first working prototype. In this stages, the designers actually
generate the ideas for the development to be made for any type of problem.
Prototype
One of the most important parts of Design Thinking is prototyping. Once your project
is finalized, it is important to take a step back and gather all the relevant feedback. Hence, the
developed prototype helps in gathering information about the further improvements to be
made and this acts as guide to the development of the solution to the problem.
Test
This is the last stage, which is performed continuously by the designers, using the best
product which was acquired during the prototype phase (Geissdoefer, Bocken and Hutlink
2016). Different groups within the development team conduct the stage concurrently and the

11
PROTOTYPING
information collected during this phase is used up throughout the project for bringing their
ideas to life.
Use design thinking methodology to explore a specific end user by:
Creating a questionnaire to gather requirements
The following questionnaire is used for the development of a persona. The list of
questions are provided below:
1. Please enter your name
2. What is your age?
3. Where are you residing currently?
4. What is your gender?
5. What is your current marital status?
6. What are your hobbies?
7. Describe Yourself.
8. What are your problems in the current system?
9. What features are you looking forward to in the new system?
10. Are you satisfied with the new system being developed?
Defining the requirements and understanding the features of the system
There two type of requirements for any system; Functional requirements, and Non-
functional requirements. These requirements are helpful in understanding the tasks that the
system is required to perform. The functional requirements are helpful for the developers as
the requirements are required to implement into the system. The non-functional requirements
are the ones which helps an application to be maintained efficiently.