Higher Nationals - Summative Assignment Feedback Form

Student Name/ID Mursheed muzammil / E181516

Unit Title Unit 54: Prototyping

Assignment Number 1 Assessor

1/12/2025 Date Received 1st

Submission Date 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 D2

Descripts

LO4. Evaluate user feedback and test results from multiple iterations of the prototype and end user testing.
Pass, Merit & Distinction P7 M5

Descripts

* 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.
Assessor Feedback:

*Please note that constructive and useful feedback should allow students to understand:

a) Strengths of performance

b) Limitations of performance

c) Any improvements needed in future assessments.

Feedback should be against the learning outcomes and assessment criteria to help students
understand how these inform the process of judging the overall grade.

Feedback should give full guidance to the students on how they have met the learning
outcomes and assessment criteria.

Grade Assessor Date:

: Signature:
Resubmission Feedback:
*Please note resubmission feedback is
focussed only on the resubmitted
work
 Grade Assessor Date:
: Signature:
Internal Verifier’s Comments:

Signature & Date:

General Guidelines

1. A Cover page or title page – You should always attach a title page to your assignment. Use the
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 word processing software.
4. All the assignments should be printed on A4-sized papers. Use single-sided printing.
5. Allow 1” for the top, bottom, and right margins and 1.25” for the left margin of each page.

Word Processing Rules

1. The font size should be 12 points 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 font size and font style.
4. Use the 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 applications spell check and grammar check functions to help edit your
assignment.

Important Points:

1. It is strictly prohibited to use textboxes to add texts to assignments, except for compulsory
information. eg: Figures, tables of comparison, etc. Adding text boxes to the body except for the
before mentioned compulsory information will result in the rejection of your work.
2. Avoid using page borders in your assignment body.
3. Carefully check the hand-in date and the instructions given in the assignment. Late submissions
will not be accepted.
4. Ensure that you give yourself enough time to complete the assignment by the due date.
5. Excuses of any nature will not be accepted for failure to hand in the work on time.
6. You must take responsibility for managing your own time effectively.
7. 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.
8. Failure to achieve at least PASS criteria will result in a REFERRAL grade.
9. Non-submission of work without valid reasons will lead to an automatic RE FERRAL. You will
then be asked to complete an alternative assignment.
10. If you use other people’s work or ideas in your assignment, reference them properly using the
HARVARD referencing system to avoid plagiarism. You have to provide both in-text citations and
a reference list.
11. 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.

STUDENT ASSESSMENT SUBMISSION AND DECLARATION

When submitting evidence for assessment, each student must sign a declaration confirming
that the work is their own.
Student name: Assessor name:
mursheed Mr lasitha

Issue date: Submission date: 1/12/2025 Submitted on:

Programme:
 HND in computing

Unit: Unit 54: Prototyping

Assignment number and title:

Plagiarism
Plagiarism is a particular form of cheating. Plagiarism must be avoided at all costs and students
who break the rules, however innocently, may be penalised. It is your responsibility to ensure
that you understand correct referencing practices. As a university-level student, you are
expected to use appropriate references throughout and keep carefully detailed notes of all your
sources of materials for material you have used in your work, including any material
downloaded from the Internet. Please consult the relevant unit lecturer or your course tutor if
you need any further advice.

Guidelines for incorporating AI-generated content into assignments:

The use of AI-generated tools to enhance intellectual development is permitted; nevertheless,
submitted work must be original. It is not acceptable to pass off AI-generated work as your own.

Student Declaration
Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the
consequences of plagiarism. I understand that making a false declaration is a form of
malpractice.

Student signature: Date:

Higher National Diploma in Business

Assignment Brief

Student Name Mursheed muzammil / E181516

/ID Number
Unit 54: Prototyping
Unit Number
and Title
Academic Year 2023/24

Unit Tutor
Applying concepts and developing a prototype for Travel Buddies
Assignment
Title
Issue Date
Submission 1/12/12025

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.

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 plan 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
Travel Buddies (Pvt) Ltd is a Courier Management company and -they are planning to expand their
business by introducing an online courier management system named TravelBuddies.com. The proposed
online courier management system will be fully independent and totally self. The company aims to
develop an interactive web-based system that would almost completely automate the essential
processes of the courier management system. TravelBuddies (Pvt) Ltd has given the entire project to a
leading software development company ThinkLogics (Pvt) Ltd, and you have been assigned to this
project by ThinkLogics (Pvt) Ltd.

The various functionalities to be dealt with by the system are classified into different modules.
The proposed software shall have the following modules:
· Booking Module
· Login Module
· Complaint Management Module
· Report Module
· Pickup Module
· Delivery Module
· Maintenance Module
· Consignment tracking module.

The users of this system will include the users, staff, and administrator. The user roles for the proposed
system are as follows.

· Registered user
· Guest
· Admin
· Pickup staff
· Delivery staff
Below tableshows proposedfunctions under each user role for the TravelBuddies.com
.
Task 1

• Discuss 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 assess a review to the advantages and disadvantages of
identified prototyping formats and appropriateness of them to meet different testing outcome

• Review 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 TravelBuddies.com.

Task 2

• Review different end user categorization, classification, and behaviour modelling techniques
available in prototyping and by applying them select the most appropriate prototyping
methodology for the given scenario.

• Examine specific end user from the user population and suggest a suitable prototyping
methodology that can be used to test the requirements of the selected user. Provide justification
to the selection of the prototyping methodology and produce a plan to test the end user
requirement of the selected end user effectively.

Task 3

• Explore and employ appropriate prototyping tools and create a prototype according to a plan in
order to test the user requirements for the selected end user.

• Perform an experiment with the end user and based on the most important feedback, modify
the prototype. Build 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

Review the end-use feedback gathered from the multiple iterations of the prototype and justify the
updates given to the final prototype based on both end-user feedback and testing. critically evaluate the
overall success of the final prototype you developed when comparing it with the original plan developed
to test user requirements. Evaluate the impact of

prototyping methodology to effectively meet the objectives of the software development life cycle by
taking examples from the prototyping methodology you followed for TravelBuddies.com.

.
Learning outcomes and Assessment Criteria Table
Contents

General Guidelines 3

Word Processing Rules 3

STUDENT ASSESSMENT SUBMISSION AND DECLARATION

4
Plagiarism....................................................................................................................................................4
Student declaration.....................................................................................................................................4

Learning outcomes and Assessment Criteria Table 13

ACKNOWLEDGMENT 19

Task 01 20
Introduction to prototyping 20
Pros and Cons on Prototyping21
Pros on Prototyping 21
Cons on Prototyping 21

Specific Forms prototyping22

Rapid (Throwaway) Prototyping 22
Evolutionary prototyping 23
Incremental Prototyping 25
Extreme Prototyping 27
Horizontal Prototype 27
Vertical Prototype 27

What are Prototyping Tools? 28

High-Fidelity Prototyping 28
Low-Fidelity Prototyping 29
Proto Pie 29
Figma 30
Sketch 31
Adobe XD 32
Proto.io 33
 What Is Initial Prototype 37
Paperboard Prototypes 37
High fidelity Prototype 38
Contextual Prototyping 39
Digital Prototyping 40
Native Prototyping 41

Task 02 42
End User Categorization, Prototyping Methodology, and Testing Plan 42

2. Selecting the Most Appropriate Prototyping

Methodology 44
Four types of mapping 46

Empathy Mapping 46
Characteristics: 47
Why Use it: 47
When to use it 47

What are the requirements for your selected user

category48
Using behavioral models for scenario and selected user 49
Selected user50
Suggest a specific end-user from the user population. 51

Suggest a plan to effective test the end-user needs of the

selected end-user52
What are the methods of collecting user data? 52
Surveys 52
Interviews 52
Meetings 52
Brainstorming 53
Observation 53
Selected User Data Collection Method for the Kuoni Industrial System 53
Surveys 53
Survey data collection 53
Task 03 55

Tools selected to develop multiple prototypes 55

Wireframes (Low-Fidelity Prototypes)56
Key Characteristics of Wireframes: 56
Types of Wireframes: 56
Here wireframes of Travel Buddies (Pvt) Ltd is a Courier Management company 56
Login Wireframes 57
Register wireframes 57
Home Wireframes 58
Delivery staff wireframe 58
Complain wireframe 59
Tracking wireframes 59
Tracking Form 59
High fidelity prototype first iteration 60
Characteristics of a High-Fidelity Prototype: 60
Here of High-fidelity prototype first iteration of Travel buddies (pvt) Ltd 60
Home form 60
Login form 61
Register form61
Booking form Tracking form 62
Report form 63
Admin dashboard 63
First iteration test results analysis.............................................................................................................64
After the customer review the author improved the design using the prototype tool 67
Home page 67
Register page68
Booking page69
Payment page 70
Complain page 70
Tracking page 71
Admin dashboard page 72
Delivery dashboard page 73
Activity 04 75
Comparison with Original Plan 75
76
justify Final Updates to the Prototype 81
Evaluate the Overall Success of the Prototype 82
Overall Success of Prototyping 85
References 86
Figure 1 throwaway prototype......................................................................................................................................................20

Figure 2 evolutionary prototyping..................................................................................................................................................22

Figure 3 incrementation prototyping.............................................................................................................................................24

Figure 4 ProtoPie Prototyping Tool................................................................................................................................................28

Figure 5 Figma tool....................................................................................................................................................................... 29

Figure 6 Sketch Tool...................................................................................................................................................................... 30

Figure 7 Adobe XD Tool..................................................................................................................................................................31

Figure 8 Proto.io Tool..................................................................................................................................................................... 32

Figure 9 mapping........................................................................................................................................................................... 44

ACKNOWLEDGMENT

The completion of this project would not have been possible without the invaluable support and
assistance of many individuals, both directly and indirectly involved. I am deeply grateful to each one of
them for their contributions.

I would like to express my sincere appreciation to the following individuals. I am especially thankful to
Mr. Lasith for his expert guidance, encouragement, and support throughout the development of this
prototype. His constructive feedback and mentorship have been crucial to the success of this project.

.
Task 01
Introduction to prototyping

A prototype is an early iteration of a system, product, or concept that is made to test, show off,
or clarify certain features of the final version. In essence, it's an early prototype that aids in
comprehending the functionality, design, and viability of the finished product

Prototypes can be as basic as drawings or mock-ups or as complex as highly detailed

models that closely mimic the finished product. They can be digital, like a software
prototype showing an application's user interface, or tangible, like a 3D-printed model of a
product.

Developing a prototype serves the following primary goals:

¥ Test Functionality: Determine how well the system or product functions in an actual
setting.
¥ Collect Feedback: To make the design better, get opinions from users, clients, and
stakeholders.
¥ Confirm Concepts: Verify whether the suggested solution successfully takes care of
the needs or issues that have been identified.
¥ Lower Risk: By spotting and fixing problems early on in the development process, you
may cut down on the risks and expenses of making changes later.

In the design and development process, prototyping is an essential step in many different
industries, such as technology, engineering, product design, and more. Before committing to
the finished product, it enables testing, iteration, and refining, which eventually produces a
more successful and user-centric outcome.
Pros and Cons on Prototyping
Pros on Prototyping
¥ The design of this model is adaptable.
¥ It is simple to identify mistakes.
¥ It is easy to identify lacking functionality.
¥ There is room for improvement, which implies that new needs can be met with ease.
¥ The developer can utilise it again in the future for more challenging projects.
¥ It guarantees higher levels of comfort and happiness for the client.
¥ It is perfect for an internet platform.
¥ It improves system understanding for both users and developers.
¥ Deployment channels are chosen early on, and integration requirements are well known.
¥ Users may be actively involved in the development process.

Cons on Prototyping
¥ It is an expensive model.
¥ The documentation is inadequate due to the constant modifications made by the
customer. ¥ The range of needs could be excessive.

¥ Customers who have seen an early prototype may occasionally demand that the finished
product be provided right away.
¥ A hasty decision to produce prototypes by developers may have resulted in less-than-ideal
solutions.
¥ Following their viewing of the first prototype, customers could not be pleased or interested
in the product.
¥ The number of iterations can be determined with accuracy.
¥ An insufficient or insufficient problem analysis may exist.
¥ The system's complexity might rise as a result. (geeksforgeeks, 2022)

Specific Forms prototyping

 Rapid (Throwaway) Prototyping

Throwaway prototypes are created based on the original specifications, however they are
not utilised for the finished product and are not a substitute for formal needs specifications.
It makes rapid prototyping possible and commits to discarding the prototype. Early in the
software development process, the users can be able to improve their requirements if they
receive prompt feedback on what they need. Then adjustments can be done early in the
development life cycle.

Throwaway prototypes are quicker and faster to design interfaces for, and have shorter
project timelines. Any member of the project's staff may employ this kind of prototyping
at any point. Discardable prototypes serve solely as a limited-purpose visual aid and do
nothing in reality. It will soon be beginning to fade into the past. Prototyping like this is
becoming less common. (Jayasinghe, 2020)

Figure 1 throwaway prototype

Advantage and Disadvantage in terms of testing outcomes

There are several justifications for using disposable prototyping in software development.
Its cost-effectiveness is a major factor. This approach makes use of a series of prototypes
 to foresee future problems and improvements in the finished product. Early error and
improvement detection speeds up the final product's development while closely adhering
to customer requirements. But this method's speed could cause one to miss important
details of the application, even forgetting important functionality. As a result, engineers
may not have enough time to fully examine emerging problems.

Because there was little time to thoroughly analyse the expectations of the end users, this
hurry may cause the final release to fall short of their expectations and possibly confuse
them. Furthermore, there may be situations in which people grow attached to features
found in a prototype that is intended to be discarded, leading to disparities between
expectations and the final product. Users may not have enough time to spot prototype
flaws and changes despite its quick execution, which would require rewriting the system
after coding.

In order to precisely identify, simulate, and test against end user requirements, it is crucial
to gradually resolve difficulties during the prototype process. Post-coding changes to a
system can be time- and resource-consuming. Hasty end user testing may make it more
difficult to collect useful feedback, which could result in miscommunication and
inaccurate input. Project failure is a possibility if development is attempted to be in line
with such feedback. As such, results from rapid prototype testing could be inaccurate or
don't capture the real spirit of what the consumer needs. (Martinez, 2023)

Evolutionary prototyping

This kind of prototyping, commonly referred to as breadboard prototyping, is thought to be

the most fundamental kind of evolutionary prototyping. Building a robust prototype and
continuously improving it is the fundamental idea behind this kind of prototype. Rather of
accepting all needs, these prototypes are constructed using only those that are clear. It lets
developers add features or alter existing ones that weren't possible to prepare for during
requirements analysis and design. This kind of prototyping gives the end user a functional
system while assisting the developers in building the system piece by piece while
considering its utility. (Jayasinghe, 2020)
 Figure 2 evolutionary prototyping

Advantage and disadvantage in terms of testing outcomes

Unlike Throwaway prototyping, Evolutionary prototyping entails several iterations

depending on user feedback, culminating in a sequence of end-user testing sessions. By
taking this technique, there are more possibilities to test the prototype with real users,
which helps to better understand their demands. Because of the obvious modifications
made in response to their suggestions, the development team expects good feedback from
the target audience. This approach also makes it possible to assess current systems by
iteratively enhancing and improving them while concentrating on certain system
components rather than the entire system at once.

Evolutionary prototyping only implements the well-understood specifications, which

partially evolves the system, in order to minimise user dispute. In an effort to reduce risks,
developers often avoid adding poorly understood features, yet consumers may wind up
preferring a broken system over incomplete developments in the hopes of obtaining a more
complete experience.

This prototyping method necessitates constant rebuilding and refining as various system
components are created at each stage. Users' arguments about unmet requirements, user
unhappiness, and disputes between developers and users may arise from testing these
 components on real users. This could ultimately lead to a product that does not satisfy user
demands.

Because user requirements are more complex than what developers can comprehend, it is
ineffective to implement only the understood specifications. Developers should try to test
both understood and unknown elements together as a complete version, allowing for
iterative testing and improvement, in order to maximise the effectiveness of evolutionary
prototyping. This method would make it possible to comprehend user needs more
thoroughly and incorporate them into the system's evolution.

Incremental Prototyping

When it comes to intricate corporate software with multiple interconnected modules and
components, the improvement model works well. Incremental prototyping allows for the
simultaneous development of smaller prototypes. Before each prototype is combined into a
coherent whole, it is subjected to individual assessment and improvement. Next, the
uniformity of vocabulary, functionality, and appearance of this unified entity is evaluated.

Enhancement programming carries the risk of having prototypes that seem very different
from one another, giving the impression that the module is made of entirely distinct
software. To guarantee compliance, the design team should evaluate the designers and
provide specific requirements ahead of time. (Ganney, 2020)

Figure 3 incrementation prototyping

Advantage and disadvantage in terms of testing outcomes

By accelerating the development of functional software, incremental prototyping makes it

possible to create a working product earlier. It is well-known for being flexible, easily
accommodating demand changes at little cost. By carefully determining the end user's
demands in every iteration and cultivating a strong relationship between the developer and
the end user throughout the development cycle, this strategy actively manages the risk of
user disagreement. Its main disadvantage, though, is that changes to the system
architecture could lower the overall quality of the system, necessitating early system
architecture establishment.

One potential risk of incremental prototyping is the possibility of inconsistencies between

individual prototypes, which could result in different looks when compared. Specific
guidelines must be followed by the development team in order to preserve design
consistency. When different prototypes of the same software are produced, it is possible
that some customer needs will be missed, leading to confusion when users see different
versions of the same piece of software. As such, there are benefits and drawbacks to
incremental prototyping when it comes to end user testing. Incremental prototyping has
fewer downsides than other approaches and regularly tests the end user against changing
requirements.

Extreme Prototyping

There are three steps of extreme prototyping, which is typically used in web development. The
second stage is the most important. Permission, business logic, and communication—three of the
many layers that make up an extreme prototype model—are essential to these phases.

Advantage and disadvantage in terms of testing outcomes

 The goal of extreme prototyping is to produce the software product quickly, focusing the efforts of
the entire development team on this goal. This strategy puts more emphasis on product
development than in-depth client interaction, which may limit exposure to customer requirements.
On the other hand, it could unintentionally limit the addition of pointless features when conducting
end user testing. There is still a chance that some requirements will be missed when consumers are
actively participating in the testing process.

Other types of prototyping, like vertical and horizontal prototyping, are described by Wiegers
(1996).

Horizontal Prototype
The horizontal prototype is the most widely used UI prototype. This kind prioritises the
user experience over the creation of a system with limited capability and enables a
thorough comprehension of the complete system or a subsystem.

Vertical Prototype
Unlike horizontal prototyping, vertical prototyping concentrates on fully developing a
particular function or subsystem. When analysing the specific needs for a given feature,
user experience, and user interface, this method is helpful. Vertical prototyping dives
deeper into particular features rather than offering a general picture, facilitating thorough
investigation and comprehension of individual functionalities or modules.

What are Prototyping Tools?

Applications known as prototyping tools let users create interactive prototypes that simulate the
look and feel of the finished product before the development stage ever starts.

The importance of prototypes and prototyping tools is well known to individuals employed
in positions connected to product development, management, or design. These tools
 become essential components of your technology toolbox, helping you to communicate
your ideas clearly to developers and other interested parties.

Beyond just helping with visualisation, prototyping tools can serve as a safeguard against
releasing a product that might not succeed. They help you avoid potential issues by
allowing you to confirm your thoughts through user testing before developers start
developing.

The final objective? obtaining visualisation and validation without having to write a single
piece of code by hand. (Wilhaus, 2023)

High vs Low fidelity Prototyping

You should think about the meaning of "fidelity" and the distinctions between these two
categories while determining which tool you need:

High-Fidelity Prototyping
High fidelity prototypes are developed versions of a product concept that have the same
feel as the finished item. Stakeholders typically employ design validation and usability
testing. Highquality prototypes are used for early development, brought down to low
fidelity for the next stage, and concepts are pitched to non-technical audiences. (Wilhaus,
2023)

Low-Fidelity Prototyping
Low-fidelity prototyping is the process of rapidly exploring and testing concepts by
building crude, uncomplicated models of a system or product. These small prototypes are
 generally created using paper, pencil, or basic digital tools in order to get feedback and
confirm ideas prior to devoting a substantial amount of time and resources to development.
They are excellent for preliminary investigation since they enable quick iteration and
improvement in response to user input. (Wilhaus, 2023)

Prototyping Tools

Proto Pie
ProtPie is a high-fidelity prototyping tool used for creating interactive, realistic prototypes
for mobile, web, and other digital interfaces. It enables designers to build sophisticated
interaction without writing code. ProtoPie allows for the creation of complex, interactive
prototypes that closely resemble the final product’s behavior. (Wilhaus, 2023)

Figure 4 ProtoPie Prototyping Tool

The prototyping analogy of ProtoPie is like flying to the moon without years of training.
With just a few clicks and drags, quickly create high-fidelity prototypes for a variety of
devices, complete with intricate interactions and rich animations—all without using any
code.

The best part is that ProtoPie's free version has no time limit, in contrast to Axure.

Figma
For UX designers, developers, and everyone else using a browser-based cloud hosting
platform, Figma is an all-in-one application that promotes accessibility and collaboration.
Should you have previously dealt with Sketch, you'll discover that Figma shares a similar
vibe that facilitates initialization. In web design, compatibility is crucial, and Figma's
customizable designs let you manage a project's text, grid, and other aspects. Figma's
functionality is improved by numerous helpful plugins, such as Auto flow, which shows
user streams, and Figmotion, which makes animations. (Wilhaus, 2023)

Figure 5 Figma tool

The Kuoni Leisure prototype was created by the author using Figma, utilising various
important aspects during the design phase. Text tools, shapes, and frames (artboards) were
among the frequently utilised options in the Figma toolbar. Designers can preview the
design and choose which device to present it on with the Preview function. Prototypes can
be shared with clients by using the Share option, which gives them a selection of frames
from different devices. Rectangles, triangles, and ellipses are examples of basic shapes that
are particularly helpful since they can be reshaped to create a variety of forms. Berezhnoi
(2020), however, draws attention to a drawback in Figma: the lack of global colours outside
of the primary colour scheme. Additionally, the application needs a significant amount of
RAM—a minimum of 4GB—for it to run on a computer.

It is highly dependent on an active internet connection and frequently takes a long time to
open with little data. In the event of an unstable connection, changes may not be stored.

Sketch
Sketch is a well-liked Mac UI design tool that has a vast collection of styles and
components together with an easy-to-use interface.

You can share prototypes with stakeholders on the web app using any browser or
operating system, even though the product does not support Windows. or high-fidelity
prototyping, Sketch also offers a plugin for exporting designs to ProtoPie. (Wilhaus, 2023)
Figure 6 Sketch Tool

Due to its web-based nature and real-time editing, Figma excels in remote collaboration
and team-based work. For macOS users, Sketch's macOS-centric design may be more
appealing, but mixed teams benefit greatly from Figma's cross-platform capabilities. While
Sketch may provide a little more sophisticated design tools, Figma's frequent updates
make up for it.

Adobe XD
With its flexible design and prototype features, Adobe XD is a prototyping tool that assists
designers in creating user experiences.

It provides seamless workflow for UI creation and testing by integrating with other Adobe
Creative Cloud apps and third-party tools like ProtoPie. (Wilhaus, 2023)
 Figure 7 Adobe XD Tool

The repeat grid feature makes it simple to create cards and carousels, allowing designers to
keep their style consistent even when creating complex prototypes. With Adobe XD, you
can convert 2D to 3D and change the dimensions of your designs. The prototype's Anchor
Links feature makes it easier to navigate between screens and between different sections.
But Adobe XD's limitations affect consistency and teamwork. Kati (2020) claims that
some tools may not always work as they do in other Adobe products, such as text boxes,
the eye dropper, and pen options. Issues with collaboration features include the fact that
real-time changes take time for other designers working on the same file to see.

Proto.io
Proto.io is a prototyping tool that provides a vast library of UI elements and animations to
assist designers in creating prototypes.

Although it's user-friendly and excellent for novices, it doesn't have strong interaction
features for sophisticated and interactive prototyping. Additionally, there is no live
 preview, so any changes you make must always be saved before they appear in the
preview box. (Wilhaus, 2023)

Figure 8 Proto.io Tool

Proto.io distinguishes itself from competing tools with its unique characteristic of allowing
all screen elements to be interactive, not just screen transitions. But users frequently point
out a few drawbacks. Its complexity makes it difficult for many people to learn, thus those
with previous development experience would be better suited. Furthermore, the abundance
of features on it may cause slow performance or frequent crashes, especially when
working with complex prototypes. This may slow down interactions and overall speed.

PROTOTYPING THE ANDPLUS WAY

Every kind of prototype has benefits and drawbacks, and each is appropriate in a particular
setting. Rapid prototyping is also frequently used in projects since it complements our agile
framework, which we have created and improved over time to provide our clients with the
most value possible. Rapid prototyping involves discrete, manageable steps in the customer
decision-making process, which aligns with the constrained scope and chronological
structure of agile development.

End-user testing

There are several steps in the prototype development process, and the main input is user
requirements. The author must first understand the product's end user, business, and
technical objectives before beginning this. To find out their precise needs, this entails
interviewing important stakeholders inside companies, like Kuoni Leisure managers and
staff. In addition, the author can conduct a thorough site audit through virtual meetings or
in-person visits to learn more about the business requirements of the company.

The Kuoni Leisure web application seeks to satisfy end users' travel requirements while
providing CRUD (Create, Read, Update, Delete) capabilities for Kuoni administrators. The
author focused on the typical client or end user who will use the system to schedule their
tours in order to develop the prototype. UX design tools such as empathy maps, user
personas, and interviews are used in user research. By using these techniques, the author is
better able to comprehend the backgrounds, behavioural patterns, and particular needs that
end users have for the Kuoni web application.

Analysing the prototype entails assessing its usability, user experiences, interaction, and
interface design. Developers can learn more about user behaviour and how they interact
with the design from these tests. An end-user testing technique called card sorting is used by
the author to arrange the system menu prior to the creation of wireframes and prototypes.
After that, the product is completed as a fully functional system or after the prototype
design, depending on the type of testing: unmoderated, tree, and moderated. These end-user
testing techniques are described as follows:

Card Sorting - A method used in user experience research to better understand users' needs
and preferences when building an information structure that works better is card sorting.
Menu testing is possible with this method. The author will make use of Optimal sort, a
digital card sorting platform from Optimal Workshop. The analysis will concentrate on how
users classify cards to facilitate the creation of the menu.

Moderated usability Testing - The selected user group and the UX engineer serving as the
moderator are the two main participants in this testing. The testing procedure takes place
digitally as well as in person. Users are given specific tasks to accomplish using the system
during the test, and the moderator watches them work and logs their comments. Although it
can be costly, this technique is frequently employed for systems with a high degree of
interaction. The difficult part is choosing the correct audience, which usually involves five
or six people because fees are frequently needed. Ineffective user feedback collection can be
caused by improper audience selection, which can also result in sample bias because of the
small number of users that are involved.

However, since the moderator assists users at every step and permits participants to ask
questions when necessary, moderated usability testing has the benefit of a lower chance of
errors. By concentrating on testing particular questions, data analysis is less intimidating
because there isn't as much information to sort through. However, this approach might fail
to identify hidden problems that surface from asking specific questions alone.

Unmoderated Usability Testing - In contrast to moderated usability testing, unmoderated testing

doesn't involve a moderator, allowing an unlimited number of end users to participate. This
method is cost-effective and quicker due to the absence of moderation. However, testing low-
fidelity prototypes might be challenging as users might face confusion without moderator
assistance. It's not ideal for comprehensive product testing as it's time-consuming and lacks user
interaction. Typically, only parts of the product can be tested, but this approach might yield less
stable test outcomes since user expressions and behaviors cannot be observed.
What Is Initial Prototype
Here is where the first prototype is created, complete with user interfaces and the majority
of essentials on show. The internal functionality of these features might or might not
match that of genuine software.

Methods for building a preliminary prototype

¥ Paperboard Prototypes
¥ Contextual Prototyping
¥ Digital Prototyping
¥ Native Prototyping

Paperboard Prototypes
In the age of digital design, there are numerous tools accessible for quick prototyping.
Despite these possibilities, pen and paper are still indispensable for UX designers. Paper
prototyping is still quite useful, especially when a team wishes to test out numerous ideas
before reaching a final selection. Paper prototypes make it simple to visualise and test
various concepts.

Paper prototypes have the following advantages

¥ Reduce wasteful tinkering with prototype tools, saving time and reducing unneeded
complexity.
¥ Reduce the possibility of people mistaking the prototype for the finished product.
¥ Prototypes may be created and adjusted quickly and easily.
¥ Low-cost prototyping approach.
¥ The opportunity for users to construct their own prototypes.
¥ There is no necessity for users to be familiar with prototyping software.

Paper prototypes have the following disadvantages:

¥ They are incapable of portraying complicated interactions or functionalities.
¥ Difficulty reproducing digital-specific characteristics.
 ¥ Difficulties maintaining version control and tracking changes when compared to
digital technologies.
¥ The possibility of wear and tear, impacting the durability and longevity of
prototypes.
¥ Scalability is limited for large or complex applications.

High fidelity Prototype

A hi-fi prototype, also known as a high-fidelity prototype, is an interactive digital
depiction of a design that closely mimics the finished product. It's designed to mimic the
actual functionality and complex aspects of the finished product. The phrase 'high fidelity'
refers to the careful amount of information utilised to examine usability issues and
generate insights into user behaviour.

Advantage of High-fidelity Prototype:

¥ You can make immediate adjustments to the design prototype as needed.
¥ Collaborating with a high-fidelity prototype facilitates teamwork, preventing
redundant work and enabling sharing of design components.
¥ Using the prototype presents an excellent opportunity to explore and assess the
design in a new context.
¥ This fresh perspective aids in gaining insights into crucial features, leading to
wellconsidered design choices.
¥ A high-fidelity prototype closely imitates the final product's appearance.
¥ It allows testing of both functionality and design elements, prioritizing visual
aesthetics.
¥ Users will gain a more comprehensive understanding of the entire project due to this
approach.

Disadvantage of High-fidelity Prototype:

¥ Developing the prototype requires advanced skills, making it unsuitable for
beginners.
 ¥ Creating a high-fidelity prototype demands more time and financial resources.
¥ Flaws in a high-fidelity prototype can significantly disrupt user testing.
¥ Using a high-fidelity prototype might lead to unrealistic expectations.

Contextual Prototyping
It prioritises understanding how people engage within their context over focusing only on
the technical requirements for user interaction. However, turning this context's
specifications into user-interface code demands the technical aspect. In contrast to the
more sequential nature of traditional software engineering responsibilities, design is
considered as a non-linear process that involves altering labour activities. For users to
understand and effectively organise tasks, a conceptual framework comprised of context-
aware interactive system components is required. (Holtzblatt, 2023)

The following components are grouped into this framework:

Task Model
The work model consists of the division of user tasks into economic and social work
organizations.

User Model
The user model specifies how each individual understands activities, data structures, and
interface devices, as well as data access methods and permissions unique to their function
or job.

Problem domain data format

The data format (problem domain) specifies static and dynamic data-related capabilities.

Interactive domain format

The interaction model includes all the tools and designs that users can use during the
interaction.
Application format
An application form is the final specification. It has a synchronization framework as well
as behavioural definitions.

Digital Prototyping
Nowadays, designers of user interfaces and user experiences are increasingly drawn to
digital prototyping. Because digital technologies are being used in the development
process more and more, the idea of "digital prototyping" has emerged. More adaptable and
user-friendly alternatives to traditional prototype tools include Microsoft Visio, MS Office,
Photoshop, and related applications. Furthermore, users who want to conceptualise a
prototype might use simpler and more general tools.
¥ Microsoft visio.
¥ Ms Office
¥ Photoshop etc.

Some of them, like the ones that let you create your own prototypes, are more specialised
and customised tools.

A customer journey map shows the actions a customer takes in relation to a specific
business or product in order to accomplish a goal. It is employed to ascertain what clients
want and how best to satisfy their requirements.

The first step in trip mapping is creating a timeline skeleton using a set of user goals and
activities. The story is then constructed by appending the user's thoughts and emotions to
the skeleton. Ultimately, the story is condensed into a picture that may be utilised to
convey ideas about how design processes work.
Native Prototyping
The steps involved in native prototyping are writing code, building a prototype, and testing
it on real hardware. Understanding the functioning of the product in an actual environment
is the main objective. This is a very efficient way to validate designs with end users.
Remember that native prototypes are not the final product, even though they might look
like fully functional systems. Unlike digital prototyping, this approach requires competent
development skills because coding is necessary.

Compared to digital prototyping, native prototyping allows users to interact with the
system on actual devices, which facilitates the collection of more genuine feedback. As
such, user feedback is regarded as more trustworthy even though the prototype is not fully
functional. This technique works especially well with a rapid prototyping strategy that puts
the development of applications first. (Doolan, 2016)
Task 02

End User Categorization, Prototyping Methodology, and Testing Plan

1. End User Categorization and Behaviour Modelling Techniques

For the TravelBuddies.com online courier management system, users can be categorized based on their
roles and how they interact with the system. Each user role has unique needs and tasks that the system
should support. Below is a breakdown of the main user roles, their behaviours, and the testing focus
required for each role.

1.1 Registered User

 Behaviour:

o Frequent Users: Registered users interact with the system regularly for booking
consignments, tracking deliveries, managing complaints, and updating their personal
details.
o Key Actions:
 Logging in to access their account.
 Booking and tracking consignments.
 Filing and managing complaints.
 Viewing personal details and booking history.
 Testing Focus:

o User Registration and Login: Ensure that the registration process is smooth and users
can easily log in and manage their credentials.
o Booking Consignment: Test the ease and accuracy of the booking process.
o Tracking Consignment: Ensure that tracking details are accurate and real-time.
o Complaint Management: Ensure users can submit and track complaints effectively.
o Profile Management: Ensure users can update their personal details and view past
bookings.

1.2 Guest User

 Behaviour:

o Occasional Users: Guests use the system without creating an account. They primarily
book and track consignments and search for available services.
o Key Actions:
 Booking consignments.
 Tracking consignments.
 Searching for service availability.
 Testing Focus:
 o Guest Booking Functionality: Test whether guests can easily book consignments
without needing to register.
o Consignment Tracking: Ensure that guests can track consignments without an account.
o Service Availability Search: Test the system's ability to search and filter services based
on location or routes.

1.3 Administrator

 Behaviour:

o System Managers: Administrators oversee the entire system, generate reports, manage
complaints, and edit employee and branch details.
o Key Actions:
 Managing system settings and user data.
 Generating system reports.
 Handling customer complaints.
 Managing employees and branches.
 Testing Focus:

o Admin Login and Access Control: Ensure only authorized personnel can access the
admin section.
o Report Generation: Test whether admins can generate reports on system activity, user
transactions, and complaints.
o Employee and Branch Management: Verify that admins can edit employee and branch
details.
o Complaint Management: Ensure that complaints can be monitored and responded to
effectively.

1.4 Pickup and Delivery Staff

 Behaviour:

o Operational Users: Pickup and delivery staff interact with the system to update
consignment statuses and manage the logistics of delivery.
o Key Actions:
 Updating consignment status during pickup and delivery.
 Ensuring timely and accurate updates to the system.
 Testing Focus:

o Pickup and Delivery Updates: Ensure that pickup and delivery staff can update
consignment status in real-time.
o Consignment Status Visibility: Test whether the system displays real-time updates for
users and staff.
o Integration with Other Modules: Verify that updates from pickup and delivery staff
reflect in other system modules (e.g., tracking, complaint management).
2. Selecting the Most Appropriate Prototyping Methodology
Based on the complexity of TravelBuddies.com, an Incremental Prototyping methodology is the most
suitable approach. This methodology allows for the development and testing of individual modules
before they are integrated into the full system. Here's why:

2.1 Why Incremental Prototyping?

 Modular Development: The system has various distinct modules (e.g., booking, tracking,
complaint management, admin reports) that serve different user roles. Incremental Prototyping
allows each module to be developed and tested individually.

 Feedback-Driven Development: Each module is tested incrementally, and feedback from the
target end users is collected and incorporated to improve the module before proceeding to the
next.

 Complex User Roles: TravelBuddies.com has various user roles with distinct needs (e.g.,
registered users, admins, staff). Incremental Prototyping ensures that each role’s requirements
are fully understood and tested for each module.

 Real-Time Testing: Modules like booking, tracking, and complaint management can be tested
independently. This allows for quick identification and resolution of issues before integration.

3. Prototyping Methodology for Registered User

Focus Areas for Registered User:

1. Booking Consignments
2. Tracking Consignments
3. Complaint Management

3.1 Justification for Incremental Prototyping:

For the Registered User, the system's core functionalities (booking, tracking, complaints) are essential.
Incremental Prototyping is ideal here because:

 It allows the booking, tracking, and complaint modules to be developed and tested separately.
 User feedback on each module can be used to refine them before integration.
 By focusing on these key features early on, we can ensure that the final system meets the user's
expectations for these tasks.

4. Testing Plan for Registered User

The testing plan for the Registered User focuses on delivering iterative improvements to core features,
ensuring the final prototype meets user expectations. The steps are as follows:
Step 1: Initial Prototype Development

 Objective: Develop initial wireframes and an interactive prototype for the booking and tracking
functionalities.
 Focus: User interface (UI) for booking and tracking consignments, ensuring that the workflow is
intuitive.

Step 2: First Round of User Testing

 Objective: Test the prototype with a small group of Registered Users to gather feedback on the
booking and tracking processes.
 Focus: Ease of booking, accuracy of tracking, and user interface usability.

Step 3: Feedback Analysis and Refinement

 Objective: Analyze feedback and refine the booking and tracking functionality based on user
responses.
 Focus: Improving UI, fixing bugs, and optimizing the user journey.

Step 4: Development of Complaint Management Feature

 Objective: Develop a prototype for the complaint management system and integrate it with the
existing booking and tracking modules.
 Focus: Functionality for submitting complaints, viewing complaint status, and managing
complaints.

Step 5: Second Round of User Testing

 Objective: Conduct user testing for the complaint management feature with Registered Users.
 Focus: User satisfaction with the complaint submission process and real-time updates on
complaint status.

Step 6: Final Prototype Refinement

 Objective: Integrate feedback from the first and second rounds of testing and refine the
prototype.
 Focus: Improving the flow between booking, tracking, and complaint management, ensuring a
seamless user experience.

Step 7: Full System Integration and Testing

 Objective: Integrate all modules (Booking, Tracking, Complaints) and test the system as a whole.
 Focus: Ensuring that all parts of the system work together without issues.

Step 8: End User Validation and Final Adjustments

  Objective: Perform final testing with Registered Users to ensure their needs have been met.
 Focus: Final sign-off from the user, ensuring all features work as expe

Behavior Modeling Techniques

Four types of mapping

¥ Empathy Mapping
¥ Customer journey mapping
¥ Experience Mapping
¥ Service Blueprinting

Empathy Mapping

Figure 9 mapping

A method for communicating our understanding of a particular user type is an empathy map. In
order to 1) make decision-making easier and 2) create a common understanding, it externalises
user information.

Characteristics:
The map is broken down into Says Considers, Feels, Acts, and four quadrants.
 It displays the user's perspective on the tasks that the product accomplishes.
It is not presented in a chronological or logical manner.
Every persona or type of user has a unique empathy map.

Why Use it:

To foster empathy for your users
To enforce alignment and comprehension of a particular user category

When to use it:

Every design process begins at the outset.
When it comes to classifying research notes from a user interview,

Figure 10 customer journey mapping

A customer journey map is an illustration of the steps a customer takes in relation to a particular
business or product in order to achieve a goal. It is used to ascertain the needs of clients and how
best to address their issues.
 When trip mapping is used in its most basic form, a timeline skeleton is created using the goals
and activities of the user. The user's ideas and emotions are then inserted into the skeleton to
construct a narrative. Ultimately, the narrative is condensed into a representation that can be
utilised to convey learnings that can help guide design procedures.

Characteristics:
A specific good or service is linked to the map.
The four swim lanes are phases, acts, ideas, and mind-sets/emotions.
It conveys the user's perspective:

¥ Including her outlook, ideas, and feelings

¥ Most of the details regarding the process have been eliminated.

It is set out in the order of events.
Each persona or user type has its own map.

Why use it:

To pinpoint particular points of contact in the customer journey that are painful or enjoyable
Breaking down organisational silos to establish a common understanding about customer travel To
give the Interior Department ownership of the trip's major touch points.

When to use it:

As a point of reference for the team throughout the product design cycle, at any stage of the
design process

What are the requirements for your selected user category

Admin
Proven experience as an Office Manager, Office Assistant or related position.
Excellent interpersonal and communication skills.
Excellent organization and leadership skills.
Familiarity with office management procedures and basic accounting principles.

Data Entry Operator

High School Diploma or GED.
One year experience in a typewriter or similar.
Excellent typing skills.
Excellent time management and multitasking skills.
Proficiency in office administration and data capture software such as MS Office and Google
Suite.

Manager
Ability to solve problems
Decision making skills

Communication
Tuition classes
Ability to work under pressure

Using behavioral models for scenario and selected user

Empathy map
expanding one's comprehension of the intended audience Additional organisational data
presented in an understandable manner, Faster, less expensive, easily customizable, and
characterised by a shared mindset and general team understanding, the empathy map describes
the thoughts, feelings, and actions of users. As a result, it was decided to employ an empathy
map in the Kuoni travel sector.

Experience Map
Experience Map Kuoni Industry Aids in helping Kuoni Industry see the wider picture of his journey
in order to better comprehend the requirements and sufferings of his customers. It is efficient
and targeted, and it makes it easier for designers, developers, and managers to collaborate.
Determining and reducing unfavourable customer experiences helps to achieve the intended
result. An experience map pinpoints the origins of trauma, deals with them, and gives users a
chance to heal.

Businesses can use it to rank their actions according to production schedules and experience
strategies.
Selected user

Unregistered user
They intend to keep a user's account inactive until they have finished the registration process
after recruiting them into the Kuoni Industrial System. Benefits can only be added to user profiles
that are currently active. Therefore, the Benefit Administrator or Manager must manually activate
the account before adding Benefit Details for these unregistered users. Users who are not
registered can test it.

Administrator
Administrators carry out clerical duties and projects to keep offices operating efficiently. They can
plan project meetings in their capacity as an administrator. In addition to typing documents, they
will also be answering business questions, creating contracts, and offering customer support.
Administrators will require strong IT skills because they will likely process a large amount of data
on a computer. It's also critical to have excellent communication skills to guarantee smooth office
operations. As an administrator, you have a lot of opportunities to grow in a variety of settings.
They will therefore be crucial to the Kuoni Industrial System.

Manager
By putting the four fundamental management functions—planning, organising, leading, and
controlling—into practise, managers set and accomplish Kuoni Industrial objectives and oversee
the effective completion of tasks involving and involving others. Both sets of procedures make
use of material, monetary, and human resources. They are therefore equally vital to this system.

Local Customer
In one way or another, almost every customer is a local customer. It is crucial for a business to
comprehend what this customer group entails because of this. The only way for local businesses
to prosper is by comprehending their clientele. A customer who purchases a product within the
region or regions in which it is manufactured is referred to as a local consumer. Consider
consumers who value the comfort or convenience of a nearby company for their place of
employment or residence.
 Due to these, Kuoni Industrial considers the local customer to be one of its most significant users.

Suggest a specific end-user from the user population.

Local Customer
Almost all clients are important clients of a business. Local clients, however, somehow enhance a
business. It is crucial for a business to comprehend what this customer group entails because of
this. Only when local businesses comprehend their customers will they be successful.

Although managers, administrators, and unregistered users agree that the organisation is very
valuable, they are unable to comprehend the opinions of those who are not affiliated with it.
Therefore, it is worthwhile to get customer feedback before making any changes if the company
is making any.

Propose an appropriate prototyping methodology that can used to test requirements.

Empathy Map
It is simple to gain a better understanding of the organised information of the target audiences -
the general understanding of the map and the sole mentality and empathy is described. As a
result, it was decided to use a sensory map for the Kuoni Industrial System.

Justifying the selection of prototyping methodology.

The Empathy map is being used to help the target audience gain a better understanding of the
corporate information. The customer is frequently an organization's target audience. The local
consumer should have the highest level of awareness among consumers.

Suggest a plan to effective test the end-user needs of the selected end-user.
 What are the methods of collecting user data?
Today, data is the most valuable resource for businesses. Gathering customer information allows
businesses to better understand their customers' needs and desires. There are numerous
methods for gathering data, making it difficult to select the best one.

Surveys
One of the most common and effective data collection methods is to ask direct questions of the
company's customers. Respondents will appreciate how quick and easy web-based surveys are to
complete. They usually have a limited number of options and a few open questions to choose
from. Such a safe mode of inquiry may not allow a single consumer to express their true feelings
or opinions.

Interviews
It could be the most personalized way to select a single interview. When you need to delve
deeper into the organization's data analysis, the interview is ideal. It enables the organization to
ask specific questions, and if the answer is unclear, the organization can always ask another
question. Unfortunately, such interviews run the risk of being generalized based on conclusions,
which should be avoided.

Meetings
A meeting is a gathering of two or more people called together to achieve a common goal
through verbal interactions such as information exchange or agreement.

Meetings can be held in person or virtually, using communication technology such as a phone
conference call, a Skype conference call, or a video conference.

Brainstorming
Brainstorming is a problem-solving technique that combines lateral thinking with a laid-back,
informal demeanor. It encourages people to generate new ideas and thoughts, even if they
appear strange at first. Some of these concepts may be developed into unique, cutting-edge
 solutions to problems, while others may be used to generate new ones. This "jolts" people out of
their normal cognitive processes, allowing them to escape.

Observation
The process of actively acquiring information from a primary source is known as observation.

Any data obtained during a scientific project can also be referred to by this term. Observations
can be qualitative, in which the presence or absence of quality is simply noted, or quantitative, in
which the observed phenomenon is assigned a numerical value through counting or measuring.

Selected User Data Collection Method for the Kuoni Industrial System

Surveys
Data collection from the company's customers reveals that data collection is superior.
Those respondents appear to be quick and simple. In general, you can give limited answers to a
few open questions. In such a safe type of questionnaire, one customer may not allow another
customer to share their true thoughts or deep feelings.

Survey data collection

Survey data collection methods have evolved over time. Researchers have increasingly shifted
away from paper surveys and toward quick, online questionnaires for survey data collection. Each
method has advantages and disadvantages, and the researcher must use a variety of methods to
obtain the required data from a sample in most cases.

In this approach, we will look at the four most common survey data gathering methods and how
they were use in practice. They are as follows:

¥ Online
¥ Telephone
¥ Face-to-face
¥ Paper or print
 Advantages of an online survey
An online survey is a collection of structured questions that a respondent answers via the
internet, typically by filling out a form. It is a more natural way to contact responders because it
takes less time and costs less than the traditional method of gathering information through one-
on-one engagement. The data is collected and stored in a database, which is then examined by a
subject matter expert.

¥ Because respondents enter their responses using simple selection buttons, the margin of
error in an online research study is limited.
¥ Because all responses are recorded online, it is simple to analyze the data in real-time.
¥ Ease of participation: Respondents' ease of participation increases dramatically when they
can choose a convenient time and location to register their responses.
¥ Great branding exercise: Organizations or businesses can create their own questionnaire to
match their brand in an online design.
¥ Survey templates: Leading online research platforms offer expert-designed ready survey
templates, making it easier for researchers to select and carry out their research projects.

Task 03

Tools selected to develop multiple prototypes

The author utilized Figma for both low-fidelity and high-fidelity prototypes, finding it
unnecessary to employ multiple design tools due to Figma's comprehensive features within
one platform. Figma provides a detailed overview of its functionalities, serving as a
convenient and free design tool. Within Figma, the author utilized frames, shapes (such as
circles, rectangles, squares, and lines), vectors, text, a diverse color palette, and plugins.
Frames are designated areas for design work and come in various device dimensions, with
 the author specifically using the MacBook Pro 14" dimension. Shapes and fonts were
instrumental in creating various UI components like textboxes and buttons, while the color
palette offered customization options. Plugins, as external resources within Figma, assisted
in inserting high-quality images, icons, or other components into the design. The prototype
feature in Figma facilitated linking screens and mapping user journeys on the website.
Design previews could be shared among clients and exported in PDF, JPG, or PNG
formats.

While Figma provided a variety of controls and functionalities, the author acknowledged
limitations such as insufficient design space, especially when working with multiple
screens. The lack of navigation to quickly view a screen posed challenges, necessitating
scrolling through multiple screens, which was time-consuming. Despite these flaws, Figma
remained a powerful design tool.

The author also used Optimal Workshop, a web-based tool, for digital card sorting and tree
testing. Unlike physical card sorting, Optimal Workshop supported remote user
connections via shared test links, allowing for remote tree testing. The platform saved and
analyzed test results, providing various chart options for analysis. As a result, Figma and
Optimal Workshop were selected as the tools for developing and testing the prototype.

Wireframes (Low-Fidelity Prototypes)

Wireframes are visual representations of a web page, app, or software interface that outline the structure,
layout, and basic elements without focusing on design details like colors, images, or typography. They
serve as a blueprint for developers, designers, and stakeholders to understand the functionality and
arrangement of content on a screen.

Key Characteristics of Wireframes:

1. Simplified Design: Wireframes use basic shapes (boxes, lines, placeholders) to represent
components like text, buttons, images, and navigation.
2. Focus on Layout: They emphasize placement and structure rather than aesthetics.
3. Interactive Elements: Clickable wireframes can showcase user flows and interactions, though
they remain basic.
 4. Annotations: Wireframes often include notes explaining functionality or specific behaviors of
elements.

Types of Wireframes:

1. Low-Fidelity Wireframes: Simple sketches or grayscale representations, often used for early
brainstorming.
2. High-Fidelity Wireframes: More detailed versions with precise spacing and content alignment,
providing a closer approximation of the final product.

Wireframes are essential for collaboration, helping teams visualize and agree on the structure before
moving on to detailed design or development.

Here wireframes of Travel Buddies (Pvt) Ltd is a Courier Management

company

Login Wireframes

.
Description:
This wireframe shows the user login functionality, including fields for email/username and
password. It also includes a "Forgot Password?" link for account recovery and a "Login" button
for user authentication.

Register wireframes

Description:
This wireframe displays the registration process for new users. It includes fields for entering
personal details such as name, email, phone number, password, and address.
Home Wireframes
Description:
The home page wireframe serves as the primary landing page for TravelBuddies.com. It provides
users with quick access to key features and information
Delivery staff wireframe

Description:
The delivery update form wireframe is for delivery staff to update the status of consignments.

Complain wireframe
Description:
The complaint form wireframe enables users to file complaints. It includes fields for selecting the
complaint type, entering a description,

Tracking wireframes

Tracking Form
Description:
This wireframe is for consignment tracking. Users enter their consignment ID in a search field and click
the "Track" button to view the real-time status and delivery updates.

High fidelity prototype first iteration

A high-fidelity prototype first iteration is an initial, detailed version of a digital product (like a
website or app) that closely mimics the final design in terms of visual aesthetics, content, and
functionality, but is still subject to refinement based on feedback.
Characteristics of a High-Fidelity Prototype:
1. Realistic Design:
Includes finalized or near-final visuals, such as colors, typography, images, and
o
branding elements.
o Closely resembles the intended look and feel of the final product.
2. Functional Interactivity:
o Includes clickable elements, navigation, and transitions to simulate user
interactions.
 o Mimics user experience flow as intended in the finished product.
3. Content Integration:
o Uses actual or realistic placeholder content (text, images, etc.) to demonstrate
layout and design coherence.
4. Tools Used:
o Created using tools like Figma, Adobe XD, Sketch, or InVision, which allow for
detailed design and interactive features.

Here of High-fidelity prototype first iteration of Travel buddies (pvt)

Ltd

Home form

Login form
Register form
Booking form
Tracking form
Report form

Admin dashboard
According to the test results analysis, the first prototype version has numerous interface issues.
The author has summarized the issues discovered in the preceding table under each task.
Although users were able to complete tasks, their attitude toward the prototype was
unsatisfactory. It is clear that their requirements were not well defined. Most users completed the
tasks indirectly by backtracking. This demonstrates that users are unable to understand how to
complete a given task with the current prototype version

First iteration test results analysis

Page/Form Direct Success% End User Comments Summary

Login Page 95% Task success is high, but users request

additional login options (e.g., Google,
Facebook). Some found the login
button color dull.
Registration Page 90% Users suggest clearer error messages
for invalid input and improvement in
the alignment of fields.

Booking Page 85% Although functionality works, users

85% find the interface cluttered.
Typography and button placement
need refinement.
Tracking Page 80% Users face difficulty identifying the
"Track" button. Suggested adding a
search history feature for convenience.
Complaint Page 75% Users report confusing field labels.
75% Suggestions include improving the
color contrast and making the form
shorter.

Task success is excellent, but users

Admin
request better categorization of reports
Dashboard
and more detailed filtering options for
complaints.

Pickup 100%
Update
Users suggest adding a confirmation
Form popup before submitting updates. Also,
icons could be made more intuitive.

Delivery 95%
Update Users report that delivery status
Form options need clearer labels. Suggested
adding a dropdown menu for faster
updates.
Search
Availability
While functional, users found the
85% search results display poorly formatted.
Suggested improving layout and
adding filters.

100%
After the customer review the author improved the design using the
prototype tool

Home page
Login page

Register page
Booking page
Payment page

Complain page

Tracking page
Admin dashboard page
Delivery dashboard page
Task Expected Path Actual Path Direct Indirect Fail
Success Success
Task TravelBuddies website → TravelBuddies website → 100% - -
1 top navigation bar → Sign top navigation bar → Sign
Up Up
Task TravelBuddies website → TravelBuddies website → 100% - -
2 top navigation bar → top navigation bar →
Login Login
Task TravelBuddies website → TravelBuddies website → 100% - -
3 top navigation bar → top navigation bar →
Book Consignment Book Consignment
Task TravelBuddies website → TravelBuddies website → 100% - -
4 top navigation bar → top navigation bar →
Track Consignment Track Consignment
Task TravelBuddies website → TravelBuddies website → 100% - -
5 Complaints → File a Complaints → File a
Complaint Complaint
Task TravelBuddies website → TravelBuddies website → 90% 5% 5%
6 top navigation bar → top navigation bar →
Search Availability Search Availability
Task TravelBuddies website → TravelBuddies website → 100% - -
7 Admin Panel → Generate Admin Panel → Generate
Reports Reports
Task TravelBuddies website → TravelBuddies website → 95% 5% -
8 Forgot Password → Reset Forgot Password → Reset
Password Password
Task TravelBuddies website → TravelBuddies website → 85% 10% 5%
9 Pickup Status → Update Pickup Status → Update
Status Status
Task TravelBuddies website → TravelBuddies website → 90% 5% 5%
10 Delivery Status → Update Delivery Status → Update
Status Status
Activity 04

Comparison with Original Plan

The low-fidelity prototype serves as the foundational structure for the TravelBuddies.com courier
management system. Initially, the author created the first prototype iteration based on this foundation.
However, due to unforeseen circumstances, some design elements deviated from the original low-fidelity
wireframe, resulting in changes in the first iteration. Below is a comparison between the low-fidelity
prototype, the previous iteration, and the updated prototype.
This is the home page for TravelBuddies.com. The low-fidelity prototype outlines how the author initially
intended to design the homepage, but some modifications were made in the first iteration. For instance:
 Typography: While the typeface was initially consistent with the low-fidelity prototype, the first
iteration featured a different font that required further refinement. The new iteration adopts a
more modern and professional typeface, improving readability and alignment with current design
trends.
 Interface Color Scheme: The low-fidelity prototype had a simple, minimalistic approach. In
contrast, the new iteration introduces a contemporary light and dark mode interface, aligning with
the latest UI/UX trends. This change enhances the aesthetic appeal and usability.
 Homepage Layout: The new iteration addresses the emptiness present in the first iteration by
optimizing content placement and visual balance. Additional elements like icons and banners
have been incorporated to create a more engaging layout.
 Website Footer: A website footer has been added in the new iteration to provide essential links,
such as social media connections, contact information, and legal disclaimers. This addition
ensures improved navigation and user assistance, making it a critical component of modern web
design.
Overall, the new iteration demonstrates significant improvements over the previous designs, ensuring a
better user experience and alignment with the project’s objectives.
Users are directed to search for tour packages. A low-fidelity prototype demonstrates how it was
initially planned. However, the author did not continue with the first iteration, which lacks
essential features such as a search bar, sorting options, and is not visually appealing. In the first
iteration, tour packages are not well displayed. Users may be confused about which option to
select because there are descriptions, prices, ratings, and so on. User feedback was negative
because essential features were missing. These issues have been addressed in the new iteration
The above screens demonstrate how the

Log In form has been improved through iterating process. The first iteration looks so basic
with minimal details that it was unable to add features low-fidelity prototype also. This page
was also improved with user feedback because all users requested additional Log In options.
The Tracking Form has been improved through the iterative process. The first iteration was very basic,
with minimal functionality and details, and it was unable to include features envisioned in the low-
fidelity prototype. This form was significantly improved based on user feedback, as users requested a
more visual and interactive way to track consignments. The new iteration now includes additional
features such as a progress bar, clear status updates with timestamps, and an improved design for
better usability.
The Report Form has been improved through the iterative process. The first iteration was too basic, with minimal
options and lacked functionality such as filtering and exporting. It also didn’t align with the low-fidelity
prototype. Based on user feedback, the form was enhanced to include advanced filters, export options, and
visual data representation with charts and graphs. These changes were crucial to meeting the needs of
administrative users.
The Admin Dashboard has been improved through the iterative process. The first iteration
lacked essential features and provided limited access to key system controls. It was also not
consistent with the low-fidelity prototype. After user feedback, the dashboard was enhanced to
include a clear navigation menu, quick links to critical modules (e.g., user management,
reports), and visual analytics for an overview of system performance. These updates make the
dashboard more functional and user-friendly for administrative users.
justify Final Updates to the Prototype
User-Focused Improvements:

 Each iteration focused on addressing specific user feedback, such as improving color contrast
and enhancing layout clarity to align with user preferences.
 Accessibility features were incorporated, such as larger buttons and font adjustments for better
readability.

Enhanced Usability:

 Added intuitive design elements like progress bars for consignment tracking, tooltips for
guidance, and improved navigation menus.
 Interactive components, such as dropdown menus for complaints and filters for reports,
streamlined user interactions.

Increased Functionality:

 Third-party login options (e.g., Google and Facebook) were added to simplify access for users.
 Dropdown categories in the complaint form allowed users to categorize issues, improving
efficiency for administrative staff.

Example
Evaluate the Overall Success of the Prototype
User Satisfaction:

 The prototype addressed most user feedback, improving satisfaction across all roles (Registered
Users, Guests, Admins, Pickup/Delivery Staff).
 The design provided clear workflows, resulting in fewer errors and increased user confidence in
system navigation.

Examples
Testing Objectives:

 The final prototype achieved a high success rate in testing outcomes. Each module (Login,
Booking, Tracking, Complaint Management, etc.) performed effectively under direct testing
scenarios.
 Issues like typography and color schemes identified in earlier iterations were successfully
resolved.

User logs in User is User

No issues
Login with valid successfully successfully ✅ Pass
detected
credentials logged in logged in

User registers User account

User account is No issues
Registration with valid created ✅ Pass
created detected
details successfully

User books a
Consignment is Consignment
Consignment consignment No issues
successfully successfully ✅ Pass
Booking with required detected
booked booked
details

User tracks a Tracking

Tracking
valid information No issues
Tracking information is ✅ Pass
consignment displayed detected
displayed
ID accurately

Complaint is Complaint
User submits No issues
Complaint Filing successfully successfully ✅ Pass
a complaint detected
recorded recorded
 Admin Report is Report
Admin No issues
generates a successfully generated ✅ Pass
Dashboard detected
report generated correctly

Staff updates
Pickup status is Status
the No issues
Pickup Updates updated in the updated ✅ Pass
consignment detected
system successfully
pickup status

Staff updates
the Delivery status Status
Delivery No issues
consignment is updated in updated ✅ Pass
Updates detected
delivery the system successfully
status

Service
User searches Information
Service availability No issues
for service displayed ✅ Pass
Availability information is detected
availability accurately
displayed

User is User logged

No issues
Logout User logs out successfully out ✅ Pass
detected
logged out successfully
Iterative Design Success:

 Multiple iterations allowed progressive improvements to the system. Feedback loops ensured
no major functionality gaps persisted.
 The final prototype is robust, user-friendly, and aligned with TravelBuddies.com’s goals of
automating courier management.

Overall Success of Prototyping

The TravelBuddies.com prototype served as a pivotal model for the online courier management
system, enabling early testing of hypotheses and functionality. While it was not a final product,
it provided a cost-effective approach for gathering user feedback and refining design elements.
According to John S. Geri (1990), the primary objective of prototyping is to mitigate software
failure by identifying risks, constructing prototypes, engaging users, and iterating on feedback.
The iterative process, incorporating both alpha and beta versions, highlighted the critical role of
user feedback. Refinements made during beta testing resulted in significant improvements,
with a remarkable success rate of 96%. This demonstrates the importance of continuous user
engagement in high-fidelity prototype iterations.
Focusing on the needs of diverse user groups, including registered users, admins, and staff,
ensured the prototype addressed a wide array of functional requirements. While the system
successfully met key objectives, ongoing updates will be essential to maintaining user
satisfaction. In the dynamic courier and logistics industry, frequent updates and refinements
are crucial for long-term success.
Despite being resource-intensive, prototyping was invaluable in identifying risks and building a
robust system for TravelBuddies.com. It reinforced the author's understanding of how
prototyping can help bridge the gap between technical development and user needs. This
iterative approach allowed for enhanced user satisfaction and ensured alignment with the
rapidly evolving demands of the industry.
References
doolan, J., 2016. Pros and Cons of Rapid Prototyping with HTML 5 & Bootstrap. [Online]
Available at: https://www.mudbath.com.au/insight/pros-and-cons-of-rapid-prototyping-
withhtml-5-bootstrap/ [Accessed 15 11 2023].
Ganney, P. S., 2020. Incremental Model. [Online]
Available at:

https://www.sciencedirect.com/topics/computer-science/incrementalmodel#:~:text=Incremental
%20model%2Fprototyping%20model&text=There%20are%20multi ple%20iterations%20of,build
%20on%20the%20previous%20prototype.
[Accessed 18 11 2023].
geeksforgeeks, 2022. Advantages and Disadvantages of Prototype model. [Online] Available at:
https://www.geeksforgeeks.org/advantages-and-disadvantages-of-prototypemodel/
[Accessed 15 11 2023].
Holtzblatt, K., 2023. Contextual Design. [Online]
Available at: https://www.interaction-design.org/literature/book/the-encyclopedia-of-
humancomputer-interaction-2nd-ed/contextual-design [Accessed 16 11 2023].
Jayasinghe, P., 2020. Throwaway Prototyping vs Evolutionary Prototyping. [Online] Available at:
https://medium.com/@pavithrajayasinghe9529/throwaway-prototyping-vsevolutionary-
prototyping-8302be3baf33 [Accessed 15 11 2023].
Martinez, P., 2023. Complete Guide of Throwaway Prototyping.
[Online] Available at:
https://mockitt.wondershare.com/prototyping/throwaway-prototyping.html [Accessed 15
11 2023].
Vennapoosa, C., 2013. Throwaway Prototyping Model. [Online]
Available at: https://www.exforsys.com/career-center/project-management-lifecycle/
throwaway-prototyping-model.html [Accessed 15 11 2023].
Wilhaus, D., 2023. Best Prototyping Tools in 2023. [Online] Available at:
https://www.protopie.io/blog/best-prototyping-tools
[Accessed 18 11 2023].