lOMoARcPSD|46317740

User Experience and Interface Design 2023

HND in Computing (ESOFT Metro Campus)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Hiruna Kalhara ([email protected])
 lOMoARcPSD|46317740

Higher Nationals
Internal verification of assessment decisions – BTEC (RQF)
INTERNAL VERIFICATION – ASSESSMENT DECISIONS
Programme title BITEC Higher National Diploma in Computing

Miss I U Jayathilake
Assessor Internal Verifier
Unit 36- User Experience and Interface Design
Unit(s)

User experience design for E-video cloud

Assignment title
H M G A B B Dissanayaka
Student’s name
List which assessment criteria Pass Merit Distinction
the Assessor has awarded.

INTERNAL VERIFIER CHECKLIST

Do the assessment criteria awarded match

those shown in the assignment brief? Y/N
Is the Pass/Merit/Distinction grade awarded
justified by the assessor’s comments on the Y/N
student work?

Has the work been assessed

accurately? Y/N

Is the feedback to the student:

Give details:
• Constructive?
Y/N
• Linked to relevant assessment criteria?
Y/N
• Identifying opportunities for Y/N
improved performance?
• Agreeing actions?
Y/N
Does the assessment decision need
amending? Y/N

Assessor signature Date

Internal Verifier signature Date

Programme Leader signature (if required)
Date
Confirm action completed
Remedial action taken
Give details:
[email protected]
Assessor signature Date

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

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

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Assignment Feedback Form

Student Name/ID H M G A B B DISSANAYAKA / 00175321
Unit 36- User Experience and Interface Design
Unit Title
Assignment Number 1 Assessor Miss I U Jayathilake
2024/04/09 Date Received
Submission Date 1st submission
Date Received 2nd
Re-submission Date submission
Assessor Feedback:
LO1 Research User Experience and Interface Design in relation to end user requirements in a
User Interface concept
Pass, Merit & Distinction P1 P2 M1 M2 D1
Descripts
LO2 Plan a User Experience map and Interface Design for a User Interface concept for a
target end use
Pass, Merit & Distinction P3 P4 M3 M4 D2
Descripts

LO3 Build a User Interface concept and test it with end users for enhancement purposes

Pass, Merit & Distinction P5 P6 M5 M6

Descripts
LO4 Evaluate user feedback and test results from interaction with the User Interface
concept to determine improvements
Pass, Merit & Distinction P7 P8 M7 D3
Descripts

Grade: Assessor Signature: Date:

Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

* 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.

3
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Assignment Feedback
Formative Feedback: Assessor to Student

Action Plan

Summative feedback

Feedback: Student to Assessor

[email protected]
Assessor Date
signature
[email protected] 2024/04/09
Student Date
signature
4
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Pearson Higher Nationals in

Computing
Unit 36: User Experience and Interface Design
Assignment

5
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

General Guidelines

1. A Cover page or title page – You should always attach a title page to your assignment. Use
previous page as your cover sheet and make sure all the details are accurately filled.
2. Attach this brief as the first section of your assignment.
3. All the assignments should be prepared using a word processing software.
4. All the assignments should be printed on A4 sized papers. Use single side printing.
5. Allow 1” for top, bottom, right margins and 1.25” for the left margin of each page.

Word Processing Rules

1. The font size should be 12 point, and should be in the style of Time New Roman.
2. Use 1.5 line spacing. Left justify all paragraphs.
3. Ensure that all the headings are consistent in terms of the font size and font style.
4. Use footer function in the word processor to insert Your Name, Subject, Assignment No, and
Page Number on each page. This is useful if individual sheets become detached for any reason.
5. Use word processing application spell check and grammar check function to help editing your
assignment.

Important Points:

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

6
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

10. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be
reduced to A REFERRAL or at worst you could be expelled from the course

Student Declaration

I hereby, declare that I know what plagiarism entails, namely to use another’s work and to present it as
my own without attributing the sources in the correct form. I further understand what it means to
copy another’s work.

1. I know that plagiarism is a punishable offence because it constitutes theft.

2. I understand the plagiarism and copying policy of Pearson UK.
3. I know what the consequences will be if I plagiarise or copy another’s work in any of the
assignments for this program.
4. I declare therefore that all work presented by me for every aspect of my program, will be my
own, and where I have made use of another’s work, I will attribute the source in the correct
way.
5. I acknowledge that the attachment of this document signed or not, constitutes a binding
agreement between myself and Pearson UK.
6. I understand that my assignment will not be considered as submitted if this document is not
attached to the assignment.

[email protected] 2024/04/09

Student’s Signature: Date:

(Provide E-mail ID) (Provide Submission Date)

7
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

8
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Higher National Diploma in Business

Assignment Brief
Student Name /ID Number H M G A B B DISSANAYAKA / 00175321
Unit Number and Title Unit 36: User Experience and Interface Design

Academic Year 2022/23

Unit Tutor Miss Iduni Jayathilake
Assignment Title User Experience Design for e-video cloud

Issue Date 2024/02/05

Submission Date 2024/04/09
IV Name & Date

Submission format

The submission should be in the form of an individual report written in a concise, formal business
style using single spacing (refer to the assignment guidelines for more details). You are required to
make use of headings, paragraphs, and subsections as appropriate, and all work must be
supported with research and referenced using Harvard referencing system. Please provide in-text
citation and a list of references using Harvard referencing system.

The recommended word count is 4,500–5,000 words excluding annexures.

Minimum word count – 4,500
Maximum word count – 5,000

9
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Unit Learning Outcomes:

LO1. Research User Experience and Interface Design in relation to end user
requirements in a User Interface concept.

LO2. Plan a User Experience map and Interface Design for a User Interface concept
for a target end user.

LO3. Build a User Interface concept and test it with end users for enhancement
purposes.

LO4. Evaluate user feedback and test results from interaction with the User
Interface
concept to determine improvements.

10
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Assignment Brief and Guidance:

Scenario

e-video cloud (EVC) is an emerging, cloud based, online video platform developed in Sri Lanka by
a tech start-up founded by a group of young graduates. EVC team is hiring you as an Associate
User Experience Engineer, putÝng you in-charge with designing UI of the EVC system.

You need to thoroughly consider about following features when you are designing the UI,

 EPN: e-video producer network: A music producer can register, sign up, publish or un-
publish their work, monitor the distribution of their published videos, view their account
balance and to withdraw the balance through a cheque.
 eVideo Discovery: A registered user can look up artists, director, producer and find
videos they like. Once the eVideo Discovery is made, the user has options to
o Rent a video for 3 months: Videos will be available in My Library.
o Own a video: Video will be available in My Library until user cancels the
subscription.
 My Library: Include all films, videos & playlists available to the user at that time. User
has options to view and sort by IMDB Ratings, Genre, Year, Source (Rented, Own, Gifted)
and etc. User has options to select a video and
o Preview it
o Add it to a playlist
o Gift it to a friend (for a week, Permanently, just one watch) (* When gifted, it will
be greyed out from My Library for the ‘Gifted duration’. If it is a permanent gift,
clicking on it will bring user back to the eVideo Discovery and indicate” already
selected”)
o “Find Video Like This” will take the user to discovery section to find similar
videos, director and genre.
 eM Player: When user plays a video or a list, the user will be brought to the eM Player
which gives play controls and allow different playlist manipulations. It also contains
11
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

records of previous play-lists and gives user to rate the presently playing video. In
addition, player also contains the previously discussed “Video Like This” and “Gift”
options which can be applied to the selected video or selected play-list.
 SetÝngs: Will give user the options to manage visual appearance, language setÝngs,
payment options and options to manage devices connected to user’s EVC account.

Activities / Tasks:

Activity 01:
Write an elaborative report to the board of directors of EMC to convince them why they need to
increase their focus on the user interface and user experience in addition to the system’s feature set
to achieve the company’s corporate goal. This report should include following areas.

 Present an overview of UE and UI design and assess standard tools available in UE & UI
design. Analyze the Impact of UE & UI methodology in Software Development life Cycle
and evaluate specific forms of UE-UI.
 Recognize, review and evaluate different forms of UE-UI and their end-user testing
requirements by referring to advantages and disadvantages of them for different testing
outcomes. Justify their use in a User Interface concept method available for testing for
user requirements against the UE-UI design.

12
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Activity 02:

 Review different end users of EVC using user categorizations, classifications and behavior
modelling techniques and select a specific end user from the identified categories. Appraise
and develop user ‘Persona’ for the identified user. Present your empathy map, experience
map and customer journey map.
 Apply a relevant development methodology to develop interaction / interface for the
Persona developed in the above and devise a plan to test User Interface Design
methodology and tools selected against end user requirements. Justify your selection.

Activity 03:
Examine and employ appropriate tools that can be used to develop the interface/ interaction
designed in activity 2. Create a plan to test the interface / interaction you created using the
appropriate tools for testing.

Activity 04:

 Conduct a user experiment for the developed interface and examine feedback. Analyze
feedback received and make multiple iterations of the interface based on the outcome of
the analysis. Critically Evaluate the feedback and tests results received for multiple
iterations of the final interface developed in activity 3.
 You then must compare it against the original plan/ user requirements and discuss your

13
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

insight in using prototyping by critically evaluating the overall success of concept of the
interface you developed. Suggest ways in which any future versions of the UI you
developed can be improved.

14
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Grading Rubric

Grading Criteria Achieved Feedback

LO1 Research what aspects of User Experience and Interface Design are necessary and appropriate
to satisfy end-user emotions, desires and atÝtudes when using a user interface concept.
P1 Recognize specific forms of User
Experience and Interface Design and end-
user testing requirements.
P2 Assess standard tools available for use in
User Experience and Interface Design.
M1 Analyze the impact of common User

Experience and Interface Design

methodology in the software development
lifecycle.
M2 Review specific forms of User Experience
and Interface Design and advantages and
disadvantages of end-user testing
requirements for appropriateness to
different testing outcomes.
D1 Evaluate specific forms of User
Experience and Interface Design and justify
their use in a User Interface concept.
LO2 Plan a User Experience map and Interface Design for a User Interface concept for a target end
user.
P3 Review different end-user categorisations,
classifications and behaviour modelling
techniques.

P4 Appraise a specific end user and an

appropriate
User Experience and Interface Design
methodology to test with this user type.

M3 Apply end user classification and behaviour

modelling to select an appropriate Interface

15
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Design methodology.

M4 Devise a plan to use appropriate User

Interface Design methodology and tools to
conduct end-user testing.

D2 Develop multiple iterations of your User

Interface concept and modify each iteration with
enhancements gathered from user feedback and
experimentation.

LO3 Build a User Interface concept and test it with end users for enhancement purposes
P5 Examine appropriate tools to develop a user
interface.

P6 Conduct end-user experiments and

examine feedback see if it satisfies
emotions, desires and atÝtudes as planned.

M5 Employ an appropriate set of tools to

develop your plan into a user interface.

16
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

M6 Analyse end-user feedback and build a

new iteration of your User Interface
modified with the most important
feedback and enhancements.

LO4 Evaluate user feedback and test results from interaction with the User Interface concept to
determine improvements
P7 Review end-user feedback from multiple
iterations of the User Interface.

P8 Suggest steps to improve in future

versions of your UI.

M7 Undertake a critical review and

compare your final user interface and your
test results with the original plan.

D3 Critically evaluate the overall success of

your User Interface concept and discusses
your insight using prototyping.

17
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Content

18
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Contents
Task 1.......................................................................................................................................22
1.1. Acknowledge applications of interface design, user experience, and end-user testing
needs. (P1)...........................................................................................................................22
1.1.1. What is User Interface?......................................................................................22
1.1.2. What is UI design and, Different Forms of UI?....................................................23
1.1.3. Specific Forms of UI design..................................................................................25
1.1.4. Tips for excellent UI design...................................................................................26
1.1.5. What is UI Designer?.............................................................................................26
1.1.6. What is User Experience Design?.........................................................................27
1.1.7. What does a UX designer do?................................................................................27
1.1.9 Different types of User Experiences......................................................................29
1.1.10 Specific forms of User Experience (UX) Design..................................................30
1.1.11 UI and UX Design, Key Differences.....................................................................36
1.1.12 What is end- user testing?......................................................................................37
1.2 . Evaluating the common techniques used in interface design and user experience
(P2) 37
1.2.1 Wireframing.......................................................................................................37
1.2.2 Prototyping.........................................................................................................38
1.2.3 User interface and user experience Development Tools....................................40
1.3. Examining the effects of standard interface design and user experience methodologies
on the software development lifecycle. (M1)......................................................................43
1.3.1. Common User Experience and Interface Design methodologies..........................43
1.3.2. Impact of common User Experience and Interface Design methodology in the
software development lifecycle............................................................................................44
1.4. Reviewing specific forms of User Experience and Interface Design and advantages
and disadvantages of end-user testing requirements for appropriateness to different testing
outcomes. (M2)....................................................................................................................46
1.4.1. Specific Forms of User Experience and Interface Design Reviewing...............46
1.4.2. End-user testing requirements for appropriateness to different testing outcomes,
Advantages, and disadvantages........................................................................................48
1.5. Evaluating specific forms of User Experience and Interface Design and justify their
use in a User Interface concept. (D1)...................................................................................50
1.5.1. Evaluation and Justification- Material Design...................................................50
1.5.2. Evaluation and Justification- Flat Design..........................................................51
1.5.4. Evaluation and Justification- Neumorphism......................................................51
2.0. Task 2............................................................................................................................52
19
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

2.1. Reviewing different end-user categorisations, classifications, and behaviour

modelling techniques. (P3)...................................................................................................52
2.1.1. What is an end user?..........................................................................................52
2.1.2. End- User Categorisation...................................................................................53
2.1.3. User Classifications............................................................................................56
2.1.4. EVC end user classification...............................................................................56
2.1.5. Behaviour modelling techniques........................................................................58
2.1.6. Behaviour modelling techniques of EVC..........................................................59
2.2. Appraise and develop user ‘Persona’ for the identified user. Present your empathy
map, experience map and customer journey map. (P4).......................................................60
2.2.1. User Persona.......................................................................................................60
2.2.2. Empathy Map.....................................................................................................61
2.2.3. User Experience Map.........................................................................................62
2.2.4. Customer Journey Map......................................................................................64
2.2.5. User Interface Design Methodologies................................................................66
2.3. Applying a relevant development methodology to develop interaction / interface for
the Persona developed............................................................................................................. (M3)
..............................................................................................................................................68
2.3.1. What is User Centered Design?.........................................................................69
2.3.2. User-centered Design, Four Phases....................................................................69
2.3.3. UCD Considers the Whole User Experience.....................................................69
2.3.4. Using User-Centered Design (UCD) to Create a Smooth User Experience in the
EVC Platform Interface for Independent Music Producers: A Case Study.....................70
2.4. Devise a plan to use appropriate User Interface Design methodology and tools to
conduct end-user testing. (M4)............................................................................................71
2.5. Develop multiple iterations of your User Interface concept and modify each iteration
with enhancements gathered from user feedback and experimentation. (D2).....................74
3.0. Task 3............................................................................................................................75
3.1. Examine appropriate tools to develop a user interface. (P5).....................................75
3.1.2. Adobe XD..........................................................................................................75
3.1.3. UXPin.................................................................................................................75
3.1.1. Sketch.................................................................................................................76
3.1.4. Marvel................................................................................................................76
3.1.5. InVisionStudio...................................................................................................77
3.1.6. Figma (selected instrument for creating interfaces)...........................................78
3.2. Carrying out end-user experiments and analysing feedback to see whether it fulfils
intended emotions, desires, and attitudes. (P6)....................................................................79
20
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3.2.1. What is end- user experiments?.........................................................................79

3.2.2. User Feedback Collection: Google form............................................................79
Google Form........................................................................................................................82
Feedback...............................................................................................................................83
3.3. Employ an appropriate set of tools to develop your plan into a user interface. (M5)
88
3.3.1. Wireframes for EVC..........................................................................................88
3.3.2. User Interfaces for EVC.....................................................................................89
3.4. Analyse end-user feedback and build a new iteration of User Interface modified with
the most important feedback and enhancements. (M6).......................................................93
3.4.1. Analysis of End-User Feedback.........................................................................93
3.4.2. Building a New Iteration of User Interface........................................................94
4.0. Task 4............................................................................................................................96
4.1. Examine end-user comments from the User Interface's many versions. (P7)...............96
4.1.1. Iteration 1 - Initial UI Concept: Review and Evaluation:..................................96
4.1.2. Iteration 2 - User Feedback Enhancements: Review and Evaluation................96
4.1.3. Iteration 3 - Experimentation with Advanced Features: Review and Evaluation
97
4.1.4. Iteration 4 - User-Driven Refinement: Review and Evaluation.........................97
4.1.5. Iteration 5 - Finalization and Polishing: Review and Evaluation:.....................98
4.2. Improve in future versions of UI, Suggest steps. (P8)..............................................99
4.2.1. How to Improve UI/UX Design a Web Application..........................................99
4.2.2. Improve in future versions of UI, Suggesting steps.........................................100
4.3. Examine your final user interface and test findings critically and compare them to the
original idea. (M7).............................................................................................................103
4.3.1. Critical Review and Comparison:....................................................................103
4.1. Critically evaluate the overall success of the User Interface concept and discusses
your insight using prototyping. (D3)..................................................................................105
References..............................................................................................................................106

21
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 1 User Interface.............................................................................................................23

Figure 2 end user......................................................................................................................53
Figure 3 user persona...............................................................................................................61
Figure 4 Empathy map.............................................................................................................62
Figure 5 User Experience map..................................................................................................64
Figure 6 Custom Journey map..................................................................................................66
Figure 7 Adobe XD....................................................................................................................76
Figure 8 InVisionStudio.............................................................................................................78
22
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 9 Google Forms.............................................................................................................83

Figure 10 Feedback Responses................................................................................................86
Figure 11 Wireframes for EVC..................................................................................................89
Figure 12 Login.........................................................................................................................90
Figure 13 Home........................................................................................................................90
Figure 14 About........................................................................................................................91
Figure 15 Payments..................................................................................................................93
Figure 16 Payment Receipt......................................................................................................93

Task 1

1.1. Acknowledge applications of interface design, user experience, and end-user

testing needs. (P1)

1.1.1. What is User Interface?

23
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 1 User Interface

The point of interaction between a computer, website, or program and human users is known
as the user interface. Making the user's experience simple and straightforward with the least
amount of work required on their part to achieve the maximum desired result is the aim of
successful user interface design.
To appeal to the human senses (sight, touch, aural, and more), user interfaces are designed
with levels of interaction. They comprise input devices such as a trackpad, keyboard, mouse,
microphone, touch screen, fingerprint reader, e-pen, and camera, as well as output devices
such as speakers, printers, and monitors. "Multimedia user interfaces" refer to devices that
engage with numerous senses. Common user interfaces, for instance, combine tactile input
(keyboard and mouse) with visual and aural output (display and speakers).
(indeed, 2024)

1.1.2. What is UI design and, Different Forms of UI?

The user interface (UI) is typically the first thing you see when you use an application or visit
a website. A product's user interface design affects its behavior, look, interactivity, usability,
and overall feel. Because user interface design (UI design) can affect how well a user
experiences a product, businesses and designers need to be aware of UI design best practices.
(coursera, 2022)

Key principles of UI design

The four c's are an easy way to recall the fundamental ideas of user interface design:

- Control. The interface should be controlled by the users.

- Consistency. Make your UI consistent and easy to use, especially for novice users, by using
common elements.

- Comfortability. A product should be easy to use and comfortable to interact with.

- Cognitive load. It's critical not to overburden users with information. Try to be as concise
as clear as you can.

24
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Different Forms of UI

- Voice user interface

Unlike previous instances, voice-controlled user interface is devoid of visual elements. Many
procedures are carried out by voice commands from humans. In this case, the system
architecture is entirely different.

It is plainly a dumb idea to choose a voice-controlled user interface (UI) for a website over a
graphical one. Still, that's the way technology revolutions happen. It would be a great idea,
for instance, for a website that caters to blind people.
This UI approach disregards look and visualization, yet there are still a few issues to work
with. One of them, for instance, is the ability to distinguish between commands and voice.
Additionally, there is a challenge in implementing language since many languages obviously
have different pronunciations, etc. There are a lot more possible difficulties that come with
language divergence.

Remember the natural user interface as well, which dictates that commands ought to be
straightforward. Including synonyms as alternatives is a great way to avoid
misunderstandings.
This user interface is currently realizing its potential. The most popular applications for it are
in virtual assistants, such as Amazon Alexa and iPhone Siri. This is how most IT giants create
new products or enhance their existing ones. An additional benefit is that a number of these
bots are used by outside companies as a platform for development. To enhance your
application, you may, for instance, make use of the custom voice technology assistant
included in the Alexa platform.

- Menu-driven interface

It is the most popular approach to GUI design. In fact, it seems that more explanation is not
needed. You can create a menu with numerous rooms containing data, actions, or multimedia
arranged by common features or subjects to make a website or app easier for people to
explore.

A menu-driven interface can also be defined in another way. It's an interface, for instance,
that lets you use limited skills while carrying out preset activities. The best example of this
kind of circumstance is an ATM. You will surely make use of the menu-driven interface
when using an ATM. This interface lets you check your card balance, make withdrawals, and
add money to your account.

- Graphical user interface (GUI)

These days, it is the most advanced and widely used type of user interface. Judging from the
name alone, we can assume that this kind mostly communicates visually. In fact, in this case,
visual elements operate as catalysts for the digital processes themselves; that is, when a

25
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

button or other user interface element is pressed, the action starts. Because all of the
operations are automated, the GUI is much more user-friendly than the CLI and enables you
to access all of the features without needing any additional knowledge.

To further aid in the interpretation of these symbols or widgets and to make their operation as
transparent as possible, the majority of the graphic components have been built using
psychological research as a basis. Because it feels natural to use, it is also known as the
"natural user interface". In actuality, the natural user interface is highly individualized and
changes according to the needs of a certain user or set of users. You will definitely require a
great deal of UX knowledge to investigate the specifics of user interactions when designing
such an interface.

We should also note that this example includes the widest variety of UI design approaches
when it comes to the GUI. For instance, you have at least three choices when it comes to
implementing the GUI while creating a website: you can create a menu-driven interface, a
landing page interface, or use scrolly telling. Even though each of these interfaces may exist
alone, it is better to use them in combination as system components as opposed to using them
as stand-alone methods.

1.1.3. Specific Forms of UI design

Material Design

Google developed Material Design, a design language that simulates paper-like experience
with responsive animations, grid-based layouts, and depth effects. To establish depth and
hierarchy, it combines the ideas of flat design with delicate shadows and transitions. A
consistent and easy-to-use user experience across a variety of platforms and devices is the
goal of Material Design. The design language establishes standards for elements such as
buttons, cards, and typography, culminating in a cohesive and aesthetically pleasing user
interface. Gmail is one of the Android apps from Google that best demonstrates how Material
Design principles are applied.

Skeuomorphic Design

Skeuomorphic design simulates textures and items from the actual world inside the digital
interface. By include visual components that mimic their real-world counterparts, such as
realistic shadows, reflections, and textures, this style seeks to arouse a feeling of familiarity.
In the early days of digital design, skeuomorphism was commonplace, with interfaces being
fashioned after real-world items like switches, buttons, and notepads. Skeuomorphic elements
are still used in many platforms and applications today, despite their evolution, to provide a
tangible experience. The calendar and notes apps for iOS were among the first to have
realistic textures and patterns that looked like they belonged on the real thing.

Flat Design

Flat design is a minimalist style that prioritizes clarity and simplicity in user interfaces. This
design strategy favors a crisp, two-dimensional appearance over three-dimensional
26
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

components like textures, gradients, and shadows. The layout is designed to be visually
simplistic so that users may easily navigate and understand the interface. With the advent of
contemporary OS systems and web design, flat design gained popularity since it facilitates a
visually pleasing and intuitive user experience. Two notable examples are Google's Material
Design idea and the Windows 8 interface.

1.1.4. Tips for excellent UI design

A crucial element of excellent user interface design is invisibility. When people easily
navigate a website or app and get what they're looking for without encountering difficulties
or becoming confused by the contents of the page, great user interface (UI) goes unnoticed.
Prioritizing familiarity, consistency, and simplicity is important for UI designers. Take into
consideration these UI design pointers from major players in the market, like Apple and
Google.

- Arrange your content so that it fits the target device's screen. It shouldn't be necessary for
users to scroll horizontally or zoom to view all of the content on a page.

- Make sure there is adequate contrast between the backdrop and other page elements,
including the text, to improve legibility.

Text isn't the only medium for alignment. Moreover, buttons and visuals need to be aligned
correctly for users to understand their significance.

- All picture materials must have a high picture resolution.

Verify that the user interface is responsive. Customers should be able to understand and use
the user interface (UI) with ease regardless of whether they are seeing it on a large or small
screen, in landscape or portrait mode.

1.1.5. What is UI Designer?

In the end, UI designers oversee making sure the product's interface is aesthetically pleasing,
user-friendly, and compliant with business goals. To guarantee consistency across the
company, UI designers are also in charge of creating style manuals or common languages.

Because UI design is such a broad field, working as a UI designer sometimes involves taking
on multiple hats. Many people are unaware that good UI design requires a psychological
component, even if it is predominantly a visual profession.
UI designers must first comprehend how people operate and how each interactive, visual
element affects their experience to create user-friendly interfaces. They conduct extensive
research to predict customer expectations and create an intuitive user interface for the app. It
goes without saying that UI designers make a lot of mistakes and grow from them.
27
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

UI designers also consider accessibility and inclusivity, carefully assessing what each design
decision means for the end user
(interaction, 2022)

1.1.6. What is User Experience Design?

The path a user follows when interacting with a product or service is referred to as the user
experience (UX). The process of creating products or services that offer consumers
meaningful experiences is known as user experience design (UX design). It includes many
different facets of product development, including branding, usability, function, and design.

Considering the entire process or journey a user takes while interacting with a product or
service is one method to approach UX design. Is it through blogs, advertisements, or some
other source that the user finds out about the product or service? What kinds of exchanges do
customers have with the brand? After the interaction, how does the user feel? In UX design,
each of these issues and more are crucial to consider.
Making sure that every user has a positive experience with a product or service is the main
goal of a UX designer. The user should be satisfied whether the interaction helps them
uncover important information, solves an issue, or is entertaining.
(trymata., 2023)

1.1.7. What does a UX designer do?

User Experience (UX) Designers are responsible for the look and feel of an application,
website, or product. They work together with groups of authors, developers, UI designers,
and product managers to create high-fidelity prototypes and screens that depict how the
product will seem and work when it is released to the public.

The following tasks or projects could be part of your daily work as a UX designer:

Use Research

Data drives UX designers' decisions. This data is gathered through the process of user
research, which entails gathering information from your target market and ideal product users
and analyzing it to help guide your design choices.
Using this data, a designer may create user personas-snapshots of different user kinds or
groups-that let you quickly map out user journeys and analyze the general needs of your
users.
Through these meetings, designers can pinpoint consumer demands and leverage them to
produce better designs.

Wireframes
28
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Similar to a blueprint, wireframes are scaled-down versions of apps or webpages that show
where design elements should be placed on the page.
For the analysis of structure, layout, flow, interactions, and other aspects, quick sketches are
in handy. Simply rearrange the parts to arrive at a reasonable conclusion before moving
forward.
Mapping out user flows and other components is the initial stage in any design process.

Information Architecture

The act of arranging, arranging, and classifying a product's content so that users can find
information quickly and easily is known as information architecture (IA for short). In terms
of product design, it means structuring the content logically and meaningfully so that people
may navigate the product effectively and intuitively.

Information architecture principles are used by UX designers early in the design process to
ensure that users can obtain the data they need when they need it.

High-fidelity designs.

A new stage of the design process called high-fidelity (or "hi-fi") begins when the original
wireframes are approved. Using color, typography, graphics, and interactivity, the grayscale
sketch is made more vibrant.
It's a prevalent misconception that a UX designer can create a high-fidelity design all by
themselves. Because of this, UX Academy students are taught how to take an idea from
preliminary user research to a finished product that is prepared for transfer to a development
team.
Specialized positions like UI Designer or Visual Designer may take over this part of the
process in organizations with larger design teams.

Prototypes

A prototype may be made by a UX designer in the design stage.

A prototype is an operational depiction of a design that performs in a manner akin to that of a
fully developed program. It's a great way to watch real-world user interactions and allows
you to do usability testing without knowing how to code.

Usability testing

Usability testing is the process of figuring out how easy and effective a product is to use. A
UX designer is crucial to this process. The UX designer is responsible for installing the
prototype, creating, and carrying out test plans, enlisting test subjects, supervising test
sessions, and analysing the outcomes to identify areas that require improvement.

29
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

1.1.9 Different types of User Experiences

1. Physical Experience

The term "physical experience" describes the user's bodily sensations during technological
interaction. The environment in which the user is situated and the thing they engage with
determine the Physical Experience.

For example, a standard keyboard gives the user the impression that they are touching and
hitting a key. A touch-based keyboard, however, does not offer the same functionality. As a
result, touch keyboards were not very accurate or functional.

Apple took the effort to solve this problem and included vibration feedback to the touch-
sensitive keyboard, which improved user satisfaction.

2. Mental Experience

The user's perception and understanding of their engagement with the system can be
characterized as their mental experience. Physical experience is thought to be simpler than
mental experience since mental experience include attributes like consciousness, intellect,
memory, will, and imagination. As a result, two people attending the same event could have
distinct mental experiences.

3. Emotional Experience

One could classify Emotional Experience as a subset of Mental Experience. The user's
feelings when engaging with the system are highlighted in the Emotional Experience section.
Among the most often expressed feelings by users are love, rage, fear, empathy, shyness,
excitement, and sorrow. The way a person views a system can influence and complicate their
emotional experiences.

4. Social Experience

When a single user shares their experience as a component of a more widespread social
phenomenon, it becomes a social experience. Users can communicate with their social
network about their experiences. This method is regarded as the cornerstone of contemporary
information systems.

Social media platforms such as Facebook and Instagram are prime examples of websites
where the primary focus is on the social interactions of their users.

5. Virtual/ Simulated Experience

Virtual or simulated experience is one of the most rapidly changing types of user experience.
The user experiences realism in Virtual Experience. However, it isn't true.

Virtual encounters are observed differently from real-life events. The user or other person
they connect with can still benefit from the experience, though. Two types of simulated
experiences exist: immersive and non-immersive. (devgenius., 2024)
30
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

1.1.10 Specific forms of User Experience (UX) Design

1. User Research

Definition

User research is a systematic process of studying the needs, habits, motivations, and
preferences of the target audience for a product or service. It entails obtaining qualitative and
quantitative data through various research methodologies to influence design decisions and
improve the overall user experience.

Advantages of User Research

- Informed Design Decisions

In order to make well-informed design decisions that meet user expectations, designers can
benefit greatly from user research, which offers insightful information about user preferences
and habits.

- Enhanced User Satisfaction

Designers may produce products that better satisfy the needs of users by understanding those
needs, which will boost consumer satisfaction.

- Reduced Risk of Failure

User research lowers the chance of creating goods that are not well-received by the intended
market by assisting in the early identification of possible problems during the design phase.

-Enhanced Practicality

User research insights help designers create interfaces that are easier to use, which improves
the user experience.

- Identification of Opportunities

When features are developed that users find beneficial, user research can point out areas for
innovation and improvement.

- User-Centered Design

It emphasizes a user-centered design approach, guaranteeing that the final product is built
with the end-user in mind, resulting in a more user-friendly and relevant product.

- Validation of Assumptions

By validating or challenging presumptions about user behavior, user research helps avoid
31
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

developing features based on antiquated or false assumptions.

- Increased User Engagement

By understanding consumer motivations and preferences, designers can develop experiences

that captivate and engage users effectively.

Disadvantages of User Research

- Resource Intensive

Conducting comprehensive user research can be time-consuming and demand large resources
in terms of personnel, time, and finance.

- Interpretation Challenges

Interpreting user research findings needs knowledge, and misinterpretation can lead to wrong
design decisions.

- Potential for Bias

Researchers may introduce bias unintentionally, altering the findings of the research and
leading to erroneous conclusions.

- Limited Generalization

Findings from user research may be particular to the sampled community, restricting the
generalization of results to a broader audience.

- Resistance to Change

If the results of user research contradict preexisting opinions or organizational preferences,

stakeholders may oppose the changes.

- Difficulty in Predicting Future Behavior

Although user research sheds light on how people behave now, it might be difficult to
forecast how they will act in the future.

- Ethical Concerns

Ethics must be taken into account, particularly when handling private data or user groups
who are susceptible.

- Timing Problems

If undertaken too late in the development process, user research may not be as useful in
influencing design decisions.

32
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

2. Information Architecture

The structural planning and arrangement of information within a digital product, like a
website, application, or software, is known as information architecture, or IA. It entails
structuring interactions, navigation, and content to provide effective and simple user
experiences.

Advantages of Information Architecture

- Improved User Navigation

By making it easier for consumers to browse through the content, information architecture
improves user satisfaction and lowers annoyance.

- Enhanced Findability

Information architecture that is well-organized makes content easier to access and ensures
that users can find the features or information they need fast.

- Clear Content Hierarchy

By creating a distinct content hierarchy, information architecture facilitates user

comprehension of the connections between various informational elements.

- Facilitates User Tasks

An effective information architecture helps users complete their activities quickly and
effectively, which enhances the user experience and makes it more fruitful.

- Consistent User Experience

By encouraging uniformity in the organization and display of data, information architecture

unifies the user experience throughout the whole digital product.

- Scalability

Scalable expansion of features and content is made possible by a strong information

architecture, which guarantees that the structure will continue to function well as the product
changes.

- Reduced Cognitive Load

Information architecture lessens consumers' cognitive burden by rationally arranging the

knowledge, making it simpler for them to digest and comprehend.

Disadvantages of Information Architecture

- Subjectivity in Organization

33
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

It can be subjective to decide how best to organize information, and users may have various
preferences, which could result in conflicts.

- Complexity Challenges

Creating a thorough and user-friendly information architecture in complicated projects can be

difficult and need careful consideration of many different aspects.

- Changes Require Effort

After the product is launched, making major adjustments to the information architecture can
be time-consuming and may not improve the user experience.

3. User persona

User personas are made-up characters that stand in for a group of potential customers
who might use your product similarly. Product teams use personas to provide pertinent
user archetypes when making design decisions.

Advantages of User Persona

- Enhanced Empathy

By personifying the target audience, user personas humanize the design process and
encourage empathy within the design team.

- Focused Design Decisions

By using user personas, designers may make more targeted and user-centric decisions,
guaranteeing that the final product satisfies the unique requirements and tastes of the
designated user groups.

- Effective Communication

User personas facilitate communication by giving all members of the project team—
designers, developers, and stakeholders—a common knowledge of the target audience.

Disadvantages of User Persona

- Stereotyping

Personas built on assumptions or preconceptions rather than information run the risk of
producing erroneous depictions of the intended audience.

34
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Overgeneralization

User personas could oversimplify the diversity that exists within a user group, hence
overlooking significant differences in needs, preferences, and behaviors.

- Static Representations

User personas can become outdated if not regularly updated with new research findings,
leading to potential misalignments with evolving user characteristics.

4. Wireframing

A website or application's basic, static, and structural depiction is called a wireframe. It is a

simple two-dimensional illustration of the design feature that communicates important details
about the product. Wireframes can improve our ability to communicate with users. It is
typically a hand-drawn diagram that explains the architecture, structure, and operation of the
program or website. As a first step in transforming invisible concepts into observable ones, it
is legitimate. Greyscale wireframes typically show functionality. This is a rough outline or
sketch of the layout of an interface.

Wireframing Types

- Low-fidelity Wireframes

The technique of producing a crude visual representation of a design using basic forms, lines,
and text is known as low fidelity wireframing. This is the most basic wireframe, primarily
created using a pen and paper.

- Mid-fidelity Wireframes

The technique of producing wireframes with a respectable amount of detail and design
elements is known as mid-fidelity wireframing. This kind of wireframe highlights the
structure of the product and includes certain fundamental typographic elements and design
elements.

- High-fidelity Wireframes

Superior quality the most thorough, precise, and aesthetically pleasing wireframes that give
an idea of the entire product are called wireframes.

Advantages of Wireframing

- Easy to prepare quickly.

- Simplifies and clarifies the functionality of apps and websites.
Talking about ideas with clients is simpler.
- Makes projects more precise.
- Save time and money.

35
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Choose to observe the webpage.

(geeksforgeeks, n.d.)

5.Prototype

A prototype is a copy or test version of a final product that is used by designers to gauge
feedback before beginning a project. In any sector of design, prototypes are an integral part of
the process of design. A notion, idea, good, or service is represented by a rough model or
mockup.
Design teams can save time, money, and stress by refining a product concept through the
creation of a prototype before it is manufactured and released. At every stage of the design
process, prototype offers three benefits to designers.

1. Validate early concepts

During a design sprint, a basic prototype could be helpful in making your idea a reality. This
makes it easier for stakeholders to agree on what is being built and provides a true picture of
the experience for all.

2. Facilitate communication

Designers and non-designers sometimes speak different languages, whether you're interacting
with clients or talking objectives and specifications with your CEO. Figma offers
commenting options so that viewpoints and criticisms can be expressed while maintaining
coherence and preventing misunderstandings.

3. Refine features and flows

Having developed something from the ground up makes it challenging to view it from a
different angle. No amount of research, no matter how thorough, can take the place of user
testing and a prototype. This will highlight UX issues that were not evident in the planning
phase, enabling quick and simple UI improvements.

Low fidelity vs. high-fidelity prototyping

There are many varieties of prototypes, but the most fall into two main categories: low-
fidelity and high-fidelity.

- Low-fidelity prototypes

Designers begin working on concepts with "lo-fi" prototypes. A low-fidelity digital prototype
can have a few small, unremarkable screen changes. Even though they are simple, low-
fidelity prototypes can provide valuable insights for design and development. A low-fidelity
prototype, for instance, might be used to evaluate (or reject) new feature requests from
stakeholders before devoting an excessive amount of product design and development time to
the idea.

36
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Low-fidelity prototypes are frequently made to be easily and quickly constructed and
revised.

- Basic, like an outline or flow diagram.

- The functionality is basic and provides just enough nuance to support a proof of concept.

- High-fidelity prototypes

"Hi-fi" prototypes are like, and could potentially become, the final product. Halfway through
the design process, a high-fidelity prototype may concentrate on assessing one high-priority
feature while other features are still being developed. Prototypes with improved design
refinement, interface accuracy, and logical procedures may be needed in later stages of a
project.

- High-fidelity prototypes take longer to construct and update, as they focus on improving
functionality and interactivity to address UX and UI issues.
- Provide features for user testing that are fully functional.
- Make use of sophisticated animations, conditional logic, micro-interactions, and hardware
features such as phone cameras or sensors. (figma, 2024)

1.1.11 UI and UX Design, Key Differences

Even though UX and UI designers represent different areas of the design of a product or
service, they are frequently confused because of how frequently they interact. Even if the two
professions have a lot in common, there are also a lot of important differences to note.

- Look vs. Feel

In the process of developing a product, UX and UI design have similar but different purposes.
The visual components and interactive elements of a product that enhance the user experience
are the focus of UI design. On the other hand, UX design is focused on the elements that will
provide users with a relevant and meaningful experience, as well as the overall aesthetic of
the product or service.

- High-Level vs. Details

The degree of detail in each designer's work is another distinction between UI and UX
designers. To increase a page's functionality, UI designers work on individual buttons,
interactions, and pages. UX designers consider a product or service from a broader
perspective, making sure that the user flow of a website, service, or application is completely
realized and coherent.

- Design vs. Prototyping

Despite working on the same product, UX and UI designers have distinct roles and
objectives. While UI designers develop finished products and designs that encourage user
37
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

interaction, UX designers frequently create wireframes and tested prototypes that form the
basis for the user flow of a website or service.
(columbia, n.d.)

1.1.12 What is end- user testing?

The purpose of end-user testing is to find any program bugs that might have escaped notice in
earlier testing stages. It's also a way to make sure that users can easily navigate and utilize the
program.

Although end-user testing can be carried out at any stage of the development cycle, it is
usually carried out towards the end, when the product is more polished and getting ready for
release. (trymata, 2023)

Many techniques can be used for end-user testing, such as:

- Lab testing involves watching people interact with software in a regulated environment.
- Field testing keeps an eye on users while they operate the product in their surroundings.
- Guerrilla testing is soliciting random people to test a program by approaching them.
- Usability surveys involve asking customers to respond to a questionnaire about their
interactions with the product.

End-user testing is required for several purposes.

- Identify Usability Issues: It helps to find usability issues that were possibly missed in earlier
testing stages.

- Guarantee User Satisfaction: This ensures that the program is easy to use and fits the needs
of the target user base.

1.2 . Evaluating the common techniques used in interface design and user experience
(P2)

1.2.1 Wireframing

A website or application's basic, static, and structural depiction is called a wireframe. It is a

simple two-dimensional illustration of the design feature that communicates important details
about the product. Wireframes can improve our ability to communicate with users. typically,
Cally a hand-drawn diagram that explains the architecture, structure, and operation of the
program or website. As a first step in transforming invisible concepts into observable ones, it

38
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

is legitimate. Greyscale wireframes typically show functionality. This is a rough outline or

sketch of the layout of an interface.

Types of Wireframing

- Low-fidelity Wireframes

The technique of producing a crude visual representation of a design using basic forms, lines,
and text is known as low fidelity wireframing. This is the most basic wireframe, primarily
created using a pen and paper.

- Mid-fidelity Wireframes

The technique of producing wireframes with a respectable amount of detail and design
elements is known as mid-fidelity wireframing. This kind of wireframe highlights the
structure of the product and includes certain fundamental typographic elements and design
elements.

- High-fidelity Wireframes

Superior quality the most thorough, precise, and aesthetically pleasing wireframes that give
an idea of the entire product are called wireframes.

Advantages of Wireframing

- Easy to prepare quickly.

- Simplifies and clarifies the functionality of apps and websites.
-Talking about ideas with clients is simpler.
- Makes projects more precise.
- Save time and money.
- Choose to observe the webpage. (geeksforgeeks, 2020)

1.2.2 Prototyping

A prototype is a copy or test version of a final product that is used by designers to gauge
feedback before beginning a project. In any sector of design, prototypes are an integral part of
the process of design. A notion, idea, good, or service is represented by a rough model or
mockup.
Design teams can save time, money, and stress by refining a product concept through the
creation of a prototype before it is manufactured and released. At every stage of the design
process, prototype offers three benefits to designers.

39
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

1. Validate early concepts

During a design sprint, a basic prototype could be helpful in making your idea a reality. This
makes it easier for stakeholders to agree on what is being built and provides a true picture of
the experience for all.

2. Facilitate communication

Designers and non-designers sometimes speak different languages, whether you're interacting
with clients or talking objectives and specifications with your CEO. Figma offers
commenting options so that viewpoints and criticisms can be expressed while maintaining
coherence and preventing misunderstandings.

3. Refine features and flows

Having developed something from the ground up makes it challenging to view it from a
different angle. No amount of research, no matter how thorough, can take the place of user
testing and a prototype. This will highlight UX issues that were not evident in the planning
phase, enabling quick and simple UI improvements.

Low fidelity vs. high-fidelity prototyping

There are many varieties of prototypes, but the most fall into two main categories: low-
fidelity and high-fidelity.

- Low-fidelity prototypes

Designers begin working on concepts with "lo-fi" prototypes. A low-fidelity digital prototype
can have a few small, unremarkable screen changes. Even though they are simple, low-
fidelity prototypes can provide valuable insights for design and development. A low-fidelity
prototype, for instance, might be used to evaluate (or reject) new feature requests from
stakeholders before devoting an excessive amount of product design and development time to
the idea.
- Low-fidelity prototypes are frequently made to be easily and quickly constructed and
revised.
- Basic, like an outline or flow diagram.
- The functionality is basic and provides just enough nuance to support a proof of concept.
- High-fidelity prototypes

"Hi-fi" prototypes are like, and could potentially become, the final product. Halfway through
the design process, a high-fidelity prototype may concentrate on assessing one high-priority
feature while other features are still being developed. Prototypes with improved design
refinement, interface accuracy, and logical procedures may be needed in later stages of a
project.

- High-fidelity prototypes take longer to construct and update, as they focus on improving
functionality and interactivity to address UX and UI issues.
- Provide features for user testing that are fully functional.
40
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Make use of sophisticated animations, conditional logic, micro-interactions, and hardware

features such as phone cameras or sensors. (figma, 2024)

Advantages of Prototyping

- User Feedback: By collecting insightful user feedback early in the design process,
prototypes let designers make incremental adjustments based on actual user interactions.

- Visualization of Design Ideas

Prototyping facilitates communication between development teams, designers, and
stakeholders by converting abstract design concepts into concrete, visual representations.

- Identification of Design Flaws

Before devoting a substantial amount of time and resources to complete development,
prototypes are a useful tool for spotting and fixing usability problems and design defects.

- Iterative Development
Iterative design methods are supported by prototyping, which enables designers to quickly
adapt their designs in response to changing needs and user feedback.

Disadvantages of Prototyping

- Time-Consuming
Prototyping and refinement can take a lot of time, depending on the level of fidelity, which
could affect project deadlines.

- Overemphasis on Aesthetics
High-fidelity prototypes run the risk of overemphasizing visual design elements, which takes
focus away from important usability and functionality factors.

- Potential Misinterpretation
A prototype may be mistaken for a final product by users or stakeholders, setting unrealistic
expectations or causing hasty decisions.

1.2.3 User interface and user experience Development Tools.

- Sketch

Sketch is a vector graphics editor that can be used for drawing, wireframing, prototyping, and
design handoff—essentially everything you need to make your ideas a reality.
Sketch is an advanced and versatile UX and UI design tool that promotes teamwork. It is
widely acknowledged as an industry standard tool that is appropriate for both novice and
seasoned designers. Remember that Sketch works exclusively with macOS.

Key features
41
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Flexible and iterative design is made possible by editable boolean operations and intuitive
vector editing tools.
- To scale your designs to any screen size, use simple resizing tools, configurable grids,
flexible artboards, and design templates.
-Utilize arithmetic operators and shorthand to expedite the design process.
- Variable and OpenType fonts provide you full control over the typography of your
interface.
- Offers resources for developer handoff, sharing, feedback, and cross-platform collaboration.

- Adobe XD

Another all-in-one vector-based UI solution that offers tools for prototype and collaborative
design is Adobe XD.
A lot of people use Adobe XD as their main design program of choice. It is powerful, quick,
and able to do nearly anything! You can follow the entire UX and UI design process using
Adobe XD, from early ideation and low-fidelity concepts to gorgeous animations and
working prototypes.
With its inclusion in the Adobe Creative Cloud package and compatibility for both Mac and
Windows operating systems, Adobe XD has a little advantage over Sketch.

Key Features

- User interface kits (pre-made parts) for Amazon Alexa, Google Material Design, Apple
Design, and other systems. A vector-based drag-and-drop editing tool that helps you align
different components and features of your designs with an infinite number of artboards and
intelligent guidelines.
- You may replicate object perspective and depth in your designs with the use of 3D
transforms.
- Creating scalable, iterative designs for states and components. Unlike manually duplicating
and applying changes, components operate naturally to push changes across entire designs or
documents, saving you time and effort.
- There are choices for scroll groups, anchor links, micro-animations and motion effects, and
Lottie and video playback.
- You may add speech playback, create voice commands, and include voice-enabled features
using voice prototyping.

- Marvel

Marvel asserts that it provides all of the fundamental skills required to design for handoff,
prototype, and develop digital products. For novices, it's the greatest UX/UI design tool
because of its easy-to-use and intuitive platform.

Marvel is a browser-based program that doesn't need to be installed or downloaded. With

tools for wireframing, UI design, and prototyping, it was made for quick and easy design.
Marvel also works with a variety of other well-known design tools, which might help you
simplify your process.

42
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Key Features

- Drag-and-drop wireframe templates for rapid, preliminary concepts

- An extensive library of pre-made images, icons, and graphics to aid in the visualization of
your concepts.
- Bring in static designs from other applications, such as Sketch.
- Hotspots, interactions, and layers are used in interactive prototyping. You will learn how to
use Marvel (as well as other prototyping tools) in this tutorial.
-You may validate your designs and get input on your ideas by using the user testing option.
-Software for design handoff converts designs into code, specifications, and resources that
developers can utilize.

- InVision

As the most potent screen design tool available, InVision Studio claims to have all the
features required to flawlessly construct, wireframe, prototype, and animate.
As a component of the InVision suite of collaborative design tools, Studio provides an
endless canvas, an intuitive vector-based drawing tool, a plethora of amazing fast prototype
options, and integrated animations.
Among the most widely used UX/UI tools for pros in design is this one. It works with
Windows and MacOS alike.

Key features

- Vector-drawing program for fast screen design - Adaptive layout for flexible design enables
you to easily modify and scale your designs to any screen size.
-Features of rapid prototyping include fast playback, mirroring to mobile devices, and fluid
interactions.

- Auto-layer linking, timeline manipulation, and smart-swipe transitions are some of the
animation capabilities.
- Shared component libraries with global synchronization and real-time updates are used to
guarantee design consistency.
- The Inspect tool generates pixel-perfect specifications for developers.

- Figma

It is rare to come across a list of UX/UI tools that does not include Figma, and with good
cause. Figma is a web-based tool for interface design that facilitates a streamlined,
collaborative process in addition to quick design and prototyping.
An editor for vector graphics, Figma is comparable to Sketch and Adobe XD. Figma is the
answer if you're searching for a one-stop shop that can handle everything from interactive
prototyping to brainstorming.
Check out FigJam, Figma's online whiteboard tool for group brainstorming, ideation, and
seminars.

43
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Key features

- A new pen tool called Vector Networks allows you to draw in any direction.
- Auto Layout makes it simple to create a responsive design.
- Styles that are flexible enough to be used on any of your UI projects
- You can use libraries that contain pre-made elements that you can just drag and drop into
your design files.
- Code fragments for iOS, Android, and CSS ensure a seamless developer handoff.
- Plugins that let you streamline and enhance your design work
- Animated GIFs, dynamic overlays, and sophisticated transitions are supported by the
interactive prototype.
-A feature that allows for comments has been added to promote a cooperative design process.

(Stevens, n.d.)

1.3. Examining the effects of standard interface design and user experience
methodologies on the software development lifecycle. (M1)

1.3.1. Common User Experience and Interface Design methodologies

Designers employ methodical processes and techniques known as UX and interface design
strategies to produce visually beautiful, intuitive, and user-friendly interfaces. The design
process is guided by these methods, which guarantee that the demands and preferences of the
user are central to the development of digital products. Some of the most popular methods for
designing user experiences and interfaces are as follows:

- User-Centered Design (UCD)

44
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Understanding users' needs, preferences, and behaviors is given top priority in User-Centered
Design throughout the whole design process. To guarantee that the product meets user
expectations, it is necessary to conduct iterative testing and modification. Common UCD
processes include user research, ideation, prototyping, testing, and implementation.

- Design-Thinking

Design Thinking is an approach to problem solving that prioritizes user empathy, ideation,
and iterative prototyping. It forces designers to think creatively, come up with fresh ideas,
prototype several ideas, and get feedback in order to keep getting better at what they do.

- Agile UX

Agile UX integrates user interface design principles with agile development processes.
Collaboration, flexibility, and iterative development are emphasized. Design tasks are divided
into more manageable, smaller chunks, which makes it possible for designers to interact
directly with development teams and modify designs in response to feedback from users and
shifting project requirements.

- Lean UX

Lean UX advocates for the creation of lightweight, easily testable prototypes in order to
validate design principles. It promotes rapid iteration, cross-functional cooperation, and
providing value to customers. User personas, hypothesis-driven design, and minimum viable
products are common strategies in lean UX.

- Jobs to Be Done

The concept of "Jobs to Be Done" provides a foundation for comprehending the “jobs” or
tasks that users attempt to accomplish with a product. It enables more focused and effective
design solutions by assisting designers in determining the underlying motivations behind user
actions.

- Information Architecture (IA)

The process of organizing and structuring content to improve its findability and usefulness is
known as information architecture. It builds user-friendly navigation systems inside digital
products using methods including card sorting, tree testing, and sitemap creation.

- Rapid Prototyping

The process of swiftly developing interactive prototypes to evaluate and confirm design
concepts is known as rapid prototyping. Early customer input gathering aids in the design
process by enabling speedy iterations and changes prior to the finished product.

45
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

1.3.2. Impact of common User Experience and Interface Design methodology in the
software development lifecycle

The methods of Interface Design and User Experience (UX) have a big impact on the
software development lifecycle. You may make sure that the finished product is intuitive,
user-friendly, and able to effectively meet user needs by implementing these techniques into
the development process. The following is a review of their impact at different phases of the
software development lifecycle:

- Requirement Gathering and Analysis

Impact: UX techniques place a strong emphasis on understanding user expectations and

behaviors. By conducting user research, creating user personas, and delineating user
journeys, developers can obtain comprehensive requirements.

Result: A thorough understanding of user needs that leads to more precise and user-centered
product specifications.

- Development

Impact: The collaboration of stakeholders, developers, and designers is facilitated by agile

UX methodologies. Teams are able to adapt to evolving requirements and user feedback by
progressively incorporating design aspects.
Result: To make sure that the generated features are user-centered and well-integrated into
the interface, the development team collaborates closely with the UX design team.

- Testing

Impact: User Acceptance Testing (UAT) and Usability Testing are components of UX
methods. We collect and analyze real-world user input to identify vulnerabilities that internal
testing might have overlooked.
Finding usability issues that can be resolved through design iterations to improve user
satisfaction and product usability is the outcome.

- Deployment

Impact: Using responsive design techniques ensures that the software functions correctly
across a variety of screens and devices. Consistent user experiences are upheld across all
platforms.
Result: Optimal software distribution across several platforms, guaranteeing users may access
a unified user interface on any device.

- Post-Deployment and Maintenance

Impact: User analytics, A/B testing, and continuous feedback loops are utilized to track user
reactions after implementation. Constant improvement is made possible by this data-driven
approach.
Result: Well-informed decisions on updates and improvements guarantee that the program
will always be in line with user needs and preferences.
46
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Enhanced Collaboration and Communication

Impact: UX methodologies promote cross-functional collaboration between stakeholders,

product managers, developers, and designers. A shared understanding of user demands, and
design goals is fostered by the implementation of feedback loops and constant
communication.
Result: A more cohesive team dynamic, fewer misunderstandings, and quicker problem
solving are all brought about by improved communication, and these factors all add up to a
more effective development process.

1.4. Reviewing specific forms of User Experience and Interface Design and
advantages and disadvantages of end-user testing requirements for appropriateness to
different testing outcomes. (M2)

1.4.1. Specific Forms of User Experience and Interface Design Reviewing

Flat Design- Review

A minimalist design method known as "flat design" places an emphasis on clarity, simplicity,
and a two-dimensional aesthetic. These are a few essential elements of flat design:

- Simplicity and Minimalism

Advantages: Flat design minimizes visual noise and distractions with its tidy, uncomplicated
appearance. A simpler user interface and quicker load times are benefits of this minimalism.

- Two-Dimensional Elements

Advantages: Unlike elements in other design styles, flat design elements don't include
gradients, shadows, or textures. This results in a visually simple and understandable
appearance that is flat and non-realistic.

- Iconography

Advantages: Flat design icons are frequently straightforward geometric shapes that express
their concept clearly and succinctly. This helps create a unified visual language and facilitates
simple recognition.

- Responsive Design

Advantages: Flat design adapts to many screen sizes and devices, complementing responsive
design concepts. The absence of intricate visual effects makes switching between resolutions
easier.

47
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Color

Advantages: The use of strong, vivid colors contributes to a visually arresting, contemporary
style in flat design. A restricted color scheme improves readability and consistency.

- Easy to Use

Pros: Flat design is user-friendly due to its simplicity. An interface that is easy for users to
understand makes for a more efficient and intuitive user experience.

Material Design- Review

Google developed Material Design, a design language that consists of an extensive set of
guidelines for creating visually appealing and platform-neutral user experiences. Since its
introduction in 2014, Material Design has grown significantly in popularity within the design
world. Major components of Material Design are as follows:

- Material

Principle: The physical characteristics of paper and ink served as inspiration for the design. It
uses the idea of "material" in a metaphorical sense to produce a tangible and user-friendly
interface.

- Grid-Based Layouts

Principle: To design layouts that fluidly adjust to various screen sizes, Material Design
recommends using a responsive grid system. This grid-based method aids in preserving order
and uniformity.

- Responsive Animations

Principle: Material Design is fundamentally based on animated transitions and feedback.

Animations make the user experience more dynamic and interesting by guiding users through
tasks and offering visual feedback.

- Bold Colors and Typography

Principle: Material Design is known for its vivid and striking color palettes. The combination
of a well-chosen color scheme and readable font amplifies readability and visual hierarchy.

Skeuomorphic Design- Review

A design approach known as "skeuomorphic design" imitates the physical qualities of real-
world objects in a digital interface. This design approach creates a sense of familiarity and
realism by using textures and visual elements that closely mimic their real-world

48
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

counterparts. These are some essential skeuomorphic design elements.

- Realistic Elements

Features: Skeuomorphic design mimics the look and feel of real-world things by utilizing
realistic textures, gradients, shadows, and three-dimensional effects. This approach aims to
replicate the appearance of digital interfaces with their physical counterparts.

- Familiarity and Intuitiveness

Advantages: By giving computer interfaces the appearance of tangible objects, skeuomorphic

design seeks to make users feel more comfortable and familiar with them. Given that
consumers may already be familiar with the purpose of products based on their real-world
counterparts, this can enhance the intuitiveness of interactions.

- Sensory Feedback

Benefits: By offering a feeling of tactile and sensory feedback, skeuomorphic components

can improve the user experience. A button that appears raised, for instance, can create the
idea that it can be pressed.

- Metaphoric Representations

Characteristics: The functionality of skeuomorphic design is represented via metaphors. For

example, a digital notepad could include pages that turn when you navigate, just like a real
notebook.

1.4.2. End-user testing requirements for appropriateness to different testing outcomes,

Advantages, and disadvantages

Advantages of applying end-user testing specifications for suitability to various test

results

- Real-World Scenarios

Real-world testing guarantees that the product works as intended in real-world

circumstances, enhancing usability overall.

49
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Validation of Design Decisions

measures consumer reactions to validate design decisions, resulting in a more aesthetically

pleasing and well-received product.

- Identification of Usability Issues

Users can identify usability problems that other testing techniques might miss, resulting in a
more intuitive and user-friendly design.

- Early Issue Detection

permits the early identification of problems, enabling prompt modifications during

development and lowering the possibility of expensive solutions later.

- Objective Performance Metrics

gathers measurable metrics—like job completion times and error rates—that give specific
information for assessing and improving the user interface.

- Increased User Satisfaction

Users are more likely to be satisfied with a product that meets or exceeds their expectations
when they are actively involved in the testing process.

- Iterative Improvement

An iterative development approach is supported by continuous user testing, which makes it

possible to continuously refine and enhance based on user feedback.

- Improved Accessibility

User testing ensures that the product complies with accessibility requirements and can be
used by people of various abilities by helping to discover accessibility concerns.

- Enhanced Product Adoption

Early and frequent response to user feedback increases the likelihood that consumers will
embrace the product, which raises adoption rates.

- Better Understanding of User Behavior

Direct observation of users interacting with the product provides a deeper understanding of
their behavior, preferences, and decision-making processes.

50
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Disadvantages of incorporating end-user testing requirements for appropriateness to

different testing outcomes

- Subjectivity

The subjective nature of user feedback and its influence by personal preferences might
provide a challenge to the objective interpretation of test results.

- Difficulty in Controlled Environments

It can be difficult to create fully controlled testing environments, which might lead to
variations in test conditions that could affect the consistency of findings.

- Limited Sample Size

A limited user base may not be well represented in testing, which could result in the neglect
of specific user requirements or behaviors.

- Resource Intensive

The recruitment of participants, testing facilities, analysis, and other resources are all time-
consuming and necessary for end-user testing, which can drive up project expenses.

- Late-Stage Identification of Issues

Project deadlines may be impacted if usability concerns discovered later in the development
process prove to be more difficult and expensive to fix.

- Difficulty in Quantitative Measurement

Even if qualitative insights are important, it might be difficult to quantify some aspects of
user experience, which makes it more difficult to define precise success criteria.

- Overemphasis on Feedback

If you only consider what users have to say, you might place too much value on their
subjective ideas and ignore professional viewpoints and accepted design principles.

1.5. Evaluating specific forms of User Experience and Interface Design and justify
their use in a User Interface concept. (D1)

1.5.1. Evaluation and Justification- Material Design

51
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Unified User Experience

Evaluation: A smooth and cohesive user experience is produced by Material Design, which
makes sure that design concepts and interaction patterns are consistent across platforms.
Rationale: Material Design prioritizes familiarity and ease of use, making it perfect for
applications or platforms that need to offer a similar user experience across multiple devices.
This is particularly helpful for projects that use a range of devices and are intended for a
diverse user base.

- Responsive Grid-Based Layouts

Evaluation: To guarantee that the design flows naturally across a range of screen sizes and
resolutions, Material Design makes use of responsive grid-based layouts.
Justification: In the multi-device world of today, responsive design is essential. Because of its
responsive grid architecture, Material Design is well-suited for applications that need to
provide a consistent user experience on a variety of platforms, including PCs and
smartphones.

- Depth and Realis

Evaluation: Material Design adds a sense of realism to the user interface by utilizing depth
through shadows and heights.
Justification: Material Design's deft use of depth enhances visual hierarchy and increases
interface usability. Applications that heavily rely on navigation and require clear visual cues
and a seamless interaction flow can benefit from this.

1.5.2. Evaluation and Justification- Flat Design

- Focus on Content

Evaluation: Content is prioritized above ornamentation in flat design. It emphasizes providing

facts without needless embellishment.
Rationale: Applications whose main goal is to provide information effectively can benefit
from this focus on content. News websites, dashboards, and content-heavy platforms
frequently use flat design to make sure users can quickly access and understand information.

- Quick Loading Time

Evaluation: Flat design facilitates faster loading times by removing complex visual elements
like gradients and shadows.
Justification: Websites with large user bases or mobile apps that need to function quickly and
efficiently are good candidates for flat design. Consumers can take advantage of a responsive
and speedy experience that loads instantly.

- Modern and Minimal Aesthetics

52
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Evaluation: Flat design has a straightforward appearance that is aesthetically pleasing and in
line with modern tastes, and it is congruent with current design trends.
Justification: For UI concepts that need to have a modern and stylish look, flat design is a
suitable substitute. With its visually pleasing interface and lack of extra visual complexity, it
appeals to those who appreciate a simple, contemporary design.

1.5.4. Evaluation and Justification- Neumorphism

- Modern and Futuristic Aesthetics

Evaluation: Neumorphism creates a futuristic and aesthetically pleasing interface by

combining modern aesthetics with subtly skeuomorphic elements.
Justification: When the goal is to convey a modern and elegant appearance, neomorphism is
appropriate. For projects like technology-focused apps or creative portfolios that aim to stand
out with a contemporary and distinctive visual identity, this design approach is especially
perfect.

- Soft and Interactive Elements

Evaluation: Soft shadows and highlights are used in neomorphic interfaces to create a sense
of depth and interaction that enhances the modern user experience.
Rationale: Neumorphism is perfect for applications that need a responsive and tactile user
interface because of its soft and dynamic elements. Overall user involvement can be raised by
using this design approach, especially in dynamic or interactive interfaces.

- Minimalistic and Elegant Design

Evaluation: Neumorphism creates a pleasing and contemporary look by embodying a

minimalist design with simple shapes and subdued color choices.
Justification: Maintaining a crisp, elegant appearance is a design aim that justifies the use of
neumorphism. It works well for projects like portfolio websites, high-end applications, or
luxury brand interfaces that need to strike a balance between visual appeal and simplicity.

2.0. Task 2

2.1. Reviewing different end-user categorisations, classifications, and behaviour

modelling techniques. (P3)

2.1.1. What is an end user?

53
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 2 end user.

The person for whom a product development team develops a product is known as the end
user. In the software engineering, IT, and other technology-related fields, the term "end user"
is used during the product development process. End users are a product's ultimate users after
its development stage is complete. To create the best product for the target market, it is
imperative for product developers to consider the end user at every stage of the development
process.
(team, 2023)

Demographic information

End user demographics may include basic information such as:

- gender

- age

- ethnicity

- geographic location

- occupation

- income

- education (mailchimper, n.d.)

2.1.2. End- User Categorisation

- Primary Users

The main people who actively and directly utilize the product in their daily lives are
known as primary consumers. They represent the main target market for whom the
product is designed and function, making them essential to its design.

54
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Characteristics

Impact on Achievement
The experience, satisfaction, and needs of the product's key customers have a
significant impact on its efficacy and success. Products formance and relevance of the
product are directly impacted by their engagement.

Active Participation
Primary users are the main contributors to the product's usage metrics since they
consistently perform activities and processes within the system.

Target Audience for Features and Improvements

The main target audience for the creation and improvement of new features is the
major user base. Their specific needs and preferences are the focus of the product's
functionality and design.

- Considerations for Design

User Study
To gain a thorough understanding of the processes, pain points, and preferences of the
primary users, extensive user research is necessary. Design choices are influenced by
this knowledge.

Usability and Efficiency

Design factors prioritize efficiency and usability to enhance the primary user's
experience. The goal is to increase their ability to complete things with ease.

Feedback Collection
User testing and surveys are two examples of continuous feedback strategies that are
used to gather insights from main users. This ongoing feedback loop ensures that the
product changes to satisfy their changing needs.

- Secondary Users

Secondary users only infrequently or indirectly interact with the product. Although
not the primary focus of the product's design, their use improves the user experience.
Secondary users' involvement is essential to the product's wider user ecology since
they might use it infrequently or get access to it through a middleman.

- Characteristics:

Contribution to the User Experience in General

Although not the focus, the experiences of secondary users contribute to the overall
effectiveness and usability of the product.

Infrequent or Indirect Interaction: Secondary users may interact with the product
indirectly through other users or procedures, but they do so less frequently than prime

55
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

users.

Reliance on Principal Users or Middlemen

Secondary users might use the product for activities facilitated by intermediaries, or
they might depend on primary users for certain functions.

- Considerations for Design

Both usability and accessibility

Since secondary users may engage with the system infrequently but with great power,
the design should make them as accessible and user-friendly as possible.

-Features of Collaboration
To enable scenarios where secondary users need to collaborate or work side by side
with primary users, collaboration capabilities are necessary. The layout should
provide simple communication across different user groups.

-Unambiguous Onboarding for Middlemen

For secondary customers who obtain the product through intermediaries, it is
necessary to provide clear onboarding procedures and user manuals in order to
facilitate optimal utilization.

Third-party users

Tertiary users are individuals or organizations who do not regularly come into direct
contact with the product but are nonetheless greatly impacted by it or have the power
to decide whether to buy or adopt it. Oftentimes, they play a strategic role that is
centered on financial concerns, regulatory compliance, or the bigger organizational
impact.

- Characteristic

Making Strategic Decisions

When it comes to making strategic decisions about the purchase, adoption, or
integration of a product into the business, tertiary users are usually involved.

Indirect Interaction: Although tertiary users may not interact directly with the product,
they are nevertheless impacted by its results, implications, or impacts.

Issues Not Just Relating to Daily Use

Rather than the product's daily use, their worries usually center on larger
organizational impact, regulatory compliance, or financial problems.

Making Strategic Decisions

When it comes to making strategic decisions about the purchase, adoption, or
integration of a product into the business, tertiary users are usually involved.

- Considerations for Design

56
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Thorough Record-keeping and Interaction

Clearly document and communicate the impact, advantages, and alignment of the
product with business objectives.

Features for Reporting and Compliance

Incorporate features that make it easier for tertiary users to comply with laws, industry
standards, and other duties, including reporting.

Recognizing the Information Needs of Decision-Makers

Consider the information demands of decision-makers and provide pertinent insights
to support them in making strategic decisions.

2.1.3. User Classifications

Physical Attributes

It is essential to comprehend and consider a broad range of physical attributes while

developing inclusive user interfaces. The ways in which individuals interact with a product
are influenced by age, gender, size, reach, and visual angles. For instance, to guarantee that
the interface is usable and comfortable for individuals of diverse shapes and sizes, ergonomic
design considerations become essential. It is important for the visual design to incorporate
different visual views and preferences so that information can be presented in a way that
satisfies the needs of a broad spectrum of people. Designers may create interfaces that are not
only aesthetically pleasing but also practical and usable by a variety of users by considering
these physical aspects. This approach acknowledges and values the variety of physical
characteristics among the user base, which fosters a more inclusive user experience.

Physical Workplaces

When creating user interfaces, physical workspaces must be considered. This goes beyond
the digital realm and incorporates elements of the users' physical surroundings. The total user
experience is significantly impacted by variables such software versions utilized in the
workplace, illumination, sound levels, table heights, and lighting conditions. For ergonomic
reasons, an interface designed for a shared working space might have to accommodate
various table heights. In open work environments, it's important to pay attention to ambient
sound levels to make sure users can interact with the product peacefully. Flexible designs that
accommodate varying physical working conditions increase users' utility and comfort in a
range of professional settings.

Perceptual Abilities

Perceptual talents are examined across a broad range of features that are significant for user
engagement. This includes elements like sensitivity to heat, hearing, and vision. Ensuring that
interfaces are accessible to individuals with diverse sensory experiences is a result of
designing with perceptual abilities in mind. Alternate text for photographs, for instance,
57
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

accomodates users with visual impairments, while loudness settings can be adjusted to
accommodate individuals with varying hearing abilities. Additionally, the adoption of color
schemes that are appropriate for those with sensitivities may be impacted by the identification
of heat sensitivity. A more inclusive and user-friendly experience is produced when these
perceptual skills are acknowledged and adapted in design, enabling a wider audience to
interact with and profit from the product.

2.1.4. EVC end user classification.

End user classification for EVC (e-video cloud) can be categorized based on their roles,
interactions, and influence on the platform. This is arranged into three main categories:

Content Creators (Primary Users):

Definition

The most active users on the network are those who create and upload content. They consist
of filmmakers, musicians, and artists who exhibit their work on EVC.

Features

- Use the platform actively to upload videos.

- Keep an eye on how their stuff is performed and distributed.
- Directly affect user interaction and content on the platform.

Considerations for Design

- Offer user-friendly facilities for publishing and uploading.

- Provide data and analysis on the effectiveness of videos.
- Encourage interaction and cooperation amongst content producers.

Secondary Users, Viewers and Subscribers:

Definition

The main users of EVC content are viewers and subscribers. On occasion, they might use the
website to engage with the community, create playlists, and rent or buy movies.

Features

- Take in the range of stuff that is offered on the platform.

- Purchase or rent videos for your own collections.
Engage in conversations with others in the community by using forums and events.

Considerations for Design

- Give top priority to a simple and clear method for finding videos.
58
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Provide easy options for ownership and rental.

- Encourage participation in the community through forums and activities.

Administrators and Decision-Makers (Tertiary Users):

Definition

Individuals or groups that make strategic decisions on the overall management, policies, and
expansion of EVC are known as administrators and decision-makers. Executives from the
company, platform administrators, and teams in charge of regulatory compliance may be
included.

Features

- Take actions that affect the strategic direction of the platform.

- Pay attention to organizational effect, financial considerations, and regulatory compliance.
- May have an impact on platform policies but not actively participate in the creation or
consumption of material.

Considerations for Design

- Offer thorough information and documentation regarding the impact of the platform.
- Talk about industry standards and compliance with regulations.
Make sure the features facilitate strategic decision-making and reporting.

2.1.5. Behaviour modelling techniques

To analyze, predict, and develop interactions with a system or product, behavior modeling
techniques involve building simulations or representations of user behavior. By attempting to
capture expected behaviors in particular settings, these methodologies help designers make
better informed judgments about the user interface (UI) and user experience (UX). These are
a few common methods for modeling behavior.

User Personas

User personas are fictional characters created to symbolize different user types within a
certain target audience. Every character is derived from data and study involving real
customers.

Application:

Personas are used by designers to help them relate to users, comprehend their goals, motives,
and pain spots, and then tailor the user experience to meet their needs.

User Journey Mapping

User journey mapping shows how a user interacts with a product or service through a variety
59
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

of touchpoints to illustrate the entire user experience.

Application: To help enhance the user interface (UI) for a great experience, journey maps are
used by designers to emphasize important stages, touchpoints, and emotions in a user's
interaction.

Task Analysis

Task analysis breaks down complex tasks into smaller, easier-to-manage stages in order to
comprehend the flow of steps a user takes in order to accomplish a particular objective.
Application: Task analysis is used by designers to streamline processes, increase output, and
spot potential problems or bottlenecks in the user experience.

Scenarios and Use Cases

Use cases and scenarios are specific situations or narratives in which a user engages with a
product, describing the background, objectives, and procedures involved.
Application: To guarantee that the user interface (UI) meets a range of user needs and use
cases, designers employ scenarios to forecast user behavior in various situations.

Prototyping and Wireframing Testing

Users evaluate low-fidelity prototypes and wireframes to get feedback on the basic layout and
functionality of the user interface concept.
Application: Designers employ testing to ensure that the user interface (UI) meets user
expectations, optimize interactions, and find design defects early on.

2.1.6. Behaviour modelling techniques of EVC

For assessing and projecting user behavior on the EVC (e-video cloud) platform, behavior
modeling approaches are essential. Considering the platform's attributes, the following
behavior modeling approaches could be applied:

- User Personas

Potential Use: EVC could create user profiles for administrators, viewers, and content
suppliers of all stripes, including filmmakers, musicians, and artists. These personas will help
tailor the platform to each user segment's unique requirements and preferences.

- User Journey Mapping

Possible Use: Mapping the EVC user journey could assist you in understanding how users
find, watch, and interact with videos. Touchpoints, potential hotspots for friction, and
chances to enhance the user experience overall are all identified.

- Task Analysis

60
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Potential Use: Workflow efficiency can be increased by analysing tasks like playlist creation,
video uploading, and content creator collaboration. Task analysis ensures that users may
easily achieve their objectives without undue complexity.

- Scenarios and Use Cases

Potential Use: By imagining scenarios for typical user interactions—like owning or renting
movies, taking part in community activities, or making tactical decisions as an administrator
—it becomes easier to predict user behaviour and adjust design appropriately.

- Prototyping and Wireframing Testing

Potential Use: Early in the design phase, low-fidelity prototypes and wireframes are
evaluated to help identify design faults and improve key interactions. It ensures that user
expectations are met by the UI's fundamental structure.

2.2. Appraise and develop user ‘Persona’ for the identified user. Present your empathy
map, experience map and customer journey map. (P4)

What is a user persona and the importance of user personas?

User personas are made-up characters that stand in for a group of potential customers who
might use your product similarly. Product teams employ personas to assess design decisions
by providing pertinent user archetypes.

User personas could significantly enhance your goods' user experience. They assist in
revealing the many ways in which people interact with objects, which designers can
subsequently employ to enhance the user experience for practical use cases. Product teams
may find that creating user personas helps:

- Foster empathy towards users

The basis of product design is empathy. A team cannot successfully complete a design
process if it does not comprehend and relate to its users. When a team produces for an
abstract user—someone who lacks distinguishing characteristics that emphasize their
uniqueness and is only represented by numbers in research findings—they frequently fail to
demonstrate empathy.

User research findings may gain a personal touch from well-crafted user personas. Product
teams start considering the individual they are designing for when they use user personas.
Consequently, the requirements of the persona inform every decision made on product
design. Team members may inquire, "Will this feature benefit our user persona?" even during
product talks.

- Stay away from self-referential design

The adage "You are not your user" is crucial for product designers. Designing a product for
oneself rather than for customers is one of the most often and expensive errors committed by
61
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

product designers. This cognitive bias, which leads people to see their decisions and opinions
as common and appropriate, is known as the false consensus effect in psychology.

The target market for a product usually varies greatly from designers because different people
have different needs and desires. Users might have different lifestyles or talents (e.g., less
tech understanding than product producers). By allowing designers to make judgments about
product design based on the needs of the persona rather than their own, personas allow
designers to step outside of themselves and avoid self-referential design.

2.2.1. User Persona

Viraj Rowni Group 7

Figure 3 user persona.

2.2.2. Empathy Map

What is an Empathy Map

Designers find that empathy maps are a useful tool for both analyzing user behavior and
visually communicating those findings to colleagues, which helps the team come to a shared
knowledge of the user. Dave Gray of Xplane developed the empathy map in an effort to
lessen misunderstandings and poor communication between target audiences, such as users
and customers.
You may discover a lot about your customers through user research by observing their
actions and words as well as more indiscernible indicators like their body language and facial
expressions. All these findings are shown by an empathy map, which provides the data you
collected about your target audience during the research process in an easy-to-understand
62
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

style.

To gain a thorough understanding of the user, a designer should be able to create an empathy
map on paper or a whiteboard in less than twenty minutes. Additionally, empathy mapping
might highlight areas in user research that need more investigation in order to have a deeper
understanding of the needs of the customer.

Figure 4 Empathy map

2.2.3. User Experience Map

What is user experience mapping?

Customer Journey Mapping (CJM), sometimes referred to as user experience mapping, is a

useful technique for figuring out what drives your customers, including their needs, concerns,
and hesitations. Even while most businesses do a respectable job of gathering consumer data,
statistics by themselves are unable to fully account for the grievances and experiences of their
clients. This might be accomplished with a story, and the user experience map is one of the
best tools for corporate storytelling.

An efficient method for figuring out what drives your customers, including their desires,
reluctances, and concerns, is user experience mapping. Even while most businesses do a
respectable job of gathering consumer data, statistics by themselves are unable to fully
account for the grievances and experiences of their clients. This might be accomplished with
63
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

a story, and the user experience map is one of the best tools for corporate storytelling.

User Experience Mapping uses pictures and narratives to show how a client interacts with a
business over time. The story is told from the viewpoint of the customer, giving insight into
their entire encounter. As customers use your product or service, it enables your team to
recognize and address their needs and problem points more effectively. Put another way, by
outlining the customer journey, your company can determine how a potential customer is first
contacted by your brand and then guided through all the touchpoints involved in the sales
process.

Why User Experience Mapping?

Through ensuring uniformity and a seamless experience across all touchpoints and media,
user experience mapping aims to enhance customer satisfaction by providing a deeper
understanding of the experiences that customers have. Asking your clients how the process is
going for them is the best way to find out how they are feeling about it. Now that you have a
better understanding of the client journeys your business takes, you may enhance the
customer experience:

- gives a bird's eye view of the complete customer journey.

- Assemble teams to address specific client obstacles to comprehending fundamental

customer journey patterns, where further development will yield the most benefits.

- Reduce negative customer experiences and uncover key decision points and processes to
increase customer conversion rates faster.

64
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 5 User Experience map.

2.2.4. Customer Journey Map

What is Customer Journey Map?

A customer journey map illustrates the various stages a customer takes while interacting with
a business, from making online purchases to contacting customer service and posting
concerns on social media.

Journey maps must be built on data-driven research and visually portray the many phases
customers travel through depending on a range of characteristics such as customer sentiment,
company goals, and touchpoints in order to effectively develop visual maps that reflect
customers' journeys through these channels.

Businesses usually need to create many customer journey maps based on a 360-degree view
of how customers engage with the company to be comprehensive. A journey map might, for
instance, start with a customer posting on Twitter about a business, item, or brand, then
moving on to a customer service call and, finally, a comment on the business website. In
another example, you might begin by browsing the internet, go on to making a phone call,
and so on.

65
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Components of a customer journey map

88% of customers value a company's experience over its goods or services, according to
Salesforce. Consequently, the focus of a customer journey map ought to be primarily on the
client's interactions and experience with the product.

Several elements make up a customer journey map, such as the following:

Customer stages.

Determining the stages of the customer journey is one of the first things to do when creating a
customer journey map. There are four basic steps in a client journey: inquiry, comparison,
purchase, and installation. These phases go under other names; for instance, awareness is
another term for inquiry. There is often a fifth step, which is known as advocacy or loyalty.

Feelings.

Anticipating the feelings and experiences of the client is a major goal of creating a customer
journey map. This enables a brand to pinpoint potential customer problems and successes.

Buyer personas.

A composite representation of a market sector is called a buyer persona. Personas help CX

teams better predict the behaviors and moods of their customers, which makes them an
essential tool for creating journey maps.

66
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 6 Custom Journey map.

67
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

2.2.5. User Interface Design Methodologies

Designers employ methods or techniques known as user interface (UI) design methodologies
to produce interfaces that are both efficient and intuitive for users. These methods aid in the
comprehension of user requirements, information organization, and the creation of
aesthetically pleasing and useful user interfaces. The following are some typical UI design
approaches:

- User Interface Design Methodology Selection for User-Centered Design (UCD)

The design methodology known as User-Centered Design (UCD) centers the needs and
preferences of end users throughout the whole design process. Designing products, systems,
or interfaces with user-friendliness and enjoyment in mind, in addition to functionality and
efficiency, is the goal of UCD. This strategy includes understanding the users, their tasks, and
the context of use; design decisions are then based on this knowledge.

The following are the main ideas and procedures of the User-Centered Design approach,
especially as they relate to interface design:

- Understand the Users

To find out more about the traits, objectives, and preferences of the target audience, conduct
user research.
Create scenarios and user personas that represent the different kinds of users and how they
typically engage with the interface.

- Define the Requirements

Based on user research, define the functional and non-functional needs for the interface.
Determine the key activities and procedures that users will follow when utilizing the
interface.

- Design

Develop design concepts and ideas in response to the specified user requirements.
Make low-fidelity prototypes so you can experiment and refine different design solutions.
Use usability testing to get customer feedback on the design in order to make it better.

- Evaluate

To assess the usability of the interface and pinpoint any issues, test higher-fidelity prototypes
with users.
Utilize comments and observations to improve the design in iterative fashion.

- Implement

Using user-centered concepts, turn the completed design into a functional interface.
Work together with developers to make sure the design is applied correctly and effectively.

68
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Test

Conduct final usability testing on the developed interface to identify potential areas for
improvement or unforeseen challenges.

- Launch and iterate

Give users access to the interface and ask for comments in practical settings.
Utilize ongoing user feedback to update and enhance the interface.

The process, communication and collaboration with users are critical.

- Iterative Design

With this methodology, the design process is repeated in cycles, and the interface is improved
and refined at each iteration based on feedback from users and testing. It is a crucial
component of numerous different design approaches.

Key Steps:

- Create a prototype
-Test with users
- Collect feedback
- Refine and repeat

- Agile UI Design:

Description: Agile UI design is based on the ideas of agile software development and
prioritizes adaptability, teamwork, and responsiveness to change. It entails quick iterative
cycles of work in response to changing requirements.

Key Principles:

- Collaboration between designers and developers

- Iterative development cycles
- Responding to changes quickly

Responsive Design

Description: Responsive design makes sure that the user interface adjusts and performs
properly across diverse platforms and screen sizes because a variety of devices and screen
sizes are common.

Key Considerations:

- Flexible grids and layouts

- Media queries for CSS

69
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Slick visuals and media

- Material Design

Material Design is a design language created by Google that offers standards for making
visually appealing and consistent user interfaces (UI) across many platforms and devices.

Key Principles:

- Material metaphor (realistic lighting, shadows)

- Bold use of color
- Responsive animations

2.3. Applying a relevant development methodology to develop interaction / interface

for the Persona developed.(M3)

The choice to utilize User-Centered Design (UCD) as the design methodology stems from a
deliberate focus on prioritizing the needs, preferences, and experiences of end users. The
author intends to use UCD to make sure that the e-video cloud (EVC) platform's design and
development closely align with the preferences, objectives, and challenges of both content
providers and users.

The UCD approach is in line with the user-centric ideas required for a platform such as EVC,
where user involvement in content creation, distribution, and consumption is essential to the
platform's success. The platform's dynamic and evolving user interactions are complemented
by UCD's iterative nature, which involves continuous user input and improvement.

The decision to employ UCD was made with the understanding that, via active user
participation throughout the design process, iterative testing and refinement cycles, and
constant awareness of user needs, the final interface will not only meet but also exceed user
expectations. This process ensures that the final product is both technically solid and
emotionally and viscerally engaging to the end users, increasing user satisfaction,
engagement, and long-term use.

70
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

2.3.1. What is User Centered Design?

An excellent product is produced through the iterative process of user-centered design, which
involves involving the user at every stage of the process. User-centered design involves
ongoing collaboration between the client and designer, as well as research and testing to
obtain user feedback and identify potential challenges.

2.3.2. User-centered Design, Four Phases

For every iteration, the UCD technique is frequently broken down into four parts. As
collaborative designers, our first goal is to comprehend the various contexts in which users
might interact with a technology. We then determine and describe the needs of the users.
After that, the design team comes up with solutions throughout the design process. The group
then moves on to the assessment phase. Compare the evaluation results to the context and
user requirements to determine how well a design works. More precisely, you can observe
how near it is to a level that fits the context of the clients and meets all their pertinent needs.
After that, your team repeats these four processes until the assessment results meet your
expectations.

-Understand context of use

-Specify user requirement.
-Design Solution
-Evaluate against requirements

2.3.3. UCD Considers the Whole User Experience

In UCD, a strong understanding of the tasks, surroundings, and users serves as the foundation
for your projects. The goal of the process is to record and oversee the entire user experience.
Therefore, your design team should include specialists from other areas in addition to domain
experts, stakeholders, and customers. Design guidelines and standards can be used by experts
to evaluate the designs they produce. However, there are two considerations. Engaging
people is the first step in evaluating the entire user experience. Secondly, you need to make
sure that usage is continuously monitored.

71
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

2.3.4. Using User-Centered Design (UCD) to Create a Smooth User Experience in the
EVC Platform Interface for Independent Music Producers: A Case Study

1. User Research

Thorough user research is a prerequisite for creating Rowling's interaction/interface. We can

learn more about preferences for UI design, his music creation process, and any difficulties
she faces by conducting interviews and surveys with him. May customize the interface to
improve his overall EVC platform experience by getting to know his specific demands.

2. Persona Development

The next step focuses on developing a thorough user persona using the information gleaned
from the user research. As an independent music producer, his aspirations, drives, and
difficulties are all embodied in his persona. Throughout the design phase, the persona acts as
a point of reference to make sure that the interface meets unique needs and improves his
productivity on the platform.

3. Task Analysis

After conducting user research and developing personas, task analysis becomes the primary
focus. This entails dissecting his platform interactions into discrete steps. Knowing the
precise duties carries out—such as collaborating, uploading, and monitoring music content—
allows us to pinpoint crucial workflow requirements and critical interactions that will
influence the interface's design.

4. Prototyping and Wireframing

The design process moves forward to produce low-fidelity prototypes and wireframes using
insights from problem analysis. Develop preliminary interface design concepts thanks to
these visual aids. Working together with during collaborative sessions guarantees that the
wireframes and prototypes reflect his preferences, focusing on an easy-to-use and effective
design for the EVC platform.

5. Usability Testing

Usability testing is the next stage after creating the first wireframes and prototypes. During
sessions, actively participates in interacting with the prototype. Can obtain insightful input on
usability, clarity, and efficiency through this procedure. The information gathered from
usability testing helps to improve the interface so that is satisfied and has the best possible
user experience.

6. Iteration and Refinement

The results of usability testing inform an iterative design process. provides feedback, and
changes are made to the interface throughout several design cycles. This ongoing process of
improvement makes sure that the interface changes based on user feedback, improving

72
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

usability in the process, fixing any problems found, and closely matching tastes as an
independent music producer on the EVC platform.

2.4. Devise a plan to use appropriate User Interface Design methodology and tools to
conduct end-user testing. (M4)

End-User Testing Plan for EVC Platform

Introduction

Any online platform's ability to give users a smooth and fulfilling experience through its user
interface is critical to its success. The e-video cloud (EVC) platform is preparing for a
comprehensive end-user testing phase in this regard. The goal is very clear: to confirm that
the platform's interface works well, to spot possible usability issues, and to take user
comments into account for improvement. By using a user-centered approach, this end-user
testing plan aims to make sure that the interface not only fulfills the various needs of EVC
users, but also goes above and beyond their expectations. The approach employs a range of
methodologies and tools to obtain complete insights that will inform iterative design changes
and ultimately lead to the development of an interface that improves and resonates with every
user on the EVC platform.

Objective

To provide the best user experience possible, the main goal of the e-video cloud (EVC)
platform's end-user testing strategy is to methodically analyze and alter the platform's user
interface. Goals consist of:

- Compile Detailed Comments:

Utilize surveys to get both qualitative and quantitative input from end users.

- Determine Usability Problems:

Identify the parts of the user interface that could be confusing or difficult for users to
navigate, making it more difficult for them to interact with the platform smoothly.

-Verify the Effectiveness of the Design:

Examine actual user interactions to confirm that the interface design is effective in meeting
user needs and improving overall usability.

- Iterated Improvement:

Apply iterative design modifications in response to customer feedback, fixing found

problems and fine-tuning the interface to increase user happiness.

73
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Strengthen User-Centered Design:

Make sure that the interface of the EVC platform is user-centric, meeting the various
requirements and inclinations of various user types, such as administrators, viewers, and
content providers.

- Promote Ongoing Improvement:

Create a feedback loop to allow for continual UI improvements based on changing user needs
and technology developments. This will help you build a framework for continuous
improvement.

Methodology

A user-centered and iterative approach will be used in the end-user testing for the e-video
cloud (EVC) platform to ensure a thorough understanding of user interactions and
preferences. The following crucial steps are part of the methodology:

- UCD, or user-centered design

To determine user behaviors, preferences, and pain points, conduct preliminary user research.

Create thorough user personas that reflect administrators, viewers, and content creators based
on a variety of user profiles.
Make use of task analysis findings to develop testing scenarios that are realistic and
consistent with typical user interactions on the EVC platform.

- Prototyping and Wireframing

Make realistic wireframes and high-fidelity prototypes that accurately depict the main
functions and user interfaces of the EVC platform.
Prototypes should be interactive to replicate the actual user experience.
Work together with users, especially those who create content, to improve prototypes and get
early feedback.

- Usability Testing Sessions

Seek a varied group of volunteers for one-on-one usability testing sessions, such as
administrators, viewers, and content providers.
Utilize Figma to conduct remote usability testing and record participant screen interactions,
verbal feedback, and face expressions.
Create specialized tasks that reflect typical user behaviors, like sharing, collaborating, and
consuming content.

- User Feedback Collection

To gather feedback, use a mix of qualitative and quantitative techniques.

Utilizing SurveyMonkey, conduct post-testing surveys to obtain quantitative insights.
To get qualitative input on usability, clarity, and general satisfaction, conduct interviews and

74
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

open-ended discussions.

- Iteration and Refinement

Examine the comments that were made in surveys and usability testing sessions.
Apply iterative design modifications in response to user preferences and challenges that have
been identified.
Prototypes and wireframes should be updated to reflect improvements and revisions.

- Final Evaluation

Do one rounder of usability testing to confirm that the design improvements are working as
intended.
Write a thorough report that includes a summary of the results, suggestions for improvement,
and improvements.

Tools

- Figma

The purpose of Figma is to be used for wireframing, remote usability testing, and
prototyping.

Capabilities

- Collaborative Design: Workshops and feedback sessions for collaborative design can be
facilitated by multiple users working together in real-time.
- Prototyping: Figma makes it possible to create high-fidelity interactive prototypes that
provide users a realistic interface experience.
- Remote Usability Testing: Participants' screen interactions can be recorded, and real-time
feedback can be given through the Figma online platform.

- Google Form

Goal: Post-testing questionnaires will be used to gather user feedback and insights using
Google Form.

Capabilities

- Survey Creation: You can create personalized surveys using Google Form to collect
qualitative and quantitative input.
- Distribution Ease: Participants can readily receive surveys, which facilitates their ability to
offer comments.
- Data Analysis: Google Form offers instruments for examining survey answers, assisting in
the discovery of patterns and user attitudes.

Conclusion

75
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

In summary, the e-video cloud (EVC) platform's extensive end-user testing approach, which
makes use of Figma and Google Form, is set to be important in creating an interface that
meets and surpasses user expectations. The process of developing interfaces is dynamic and
responsive thanks to the user-centered design methodology, which is fueled by ongoing
feedback and iterative refinement.

use the potential of collaborative design with Figma, which allows for interactive prototyping
and real-time collaboration. Testing usability remotely becomes a smooth process that
records real-world user interactions and yields insightful data. By enabling the gathering of
thorough feedback via post-testing surveys, the integration of Google Form improves the
feedback loop.

A comprehensive understanding of user interactions is facilitated by the participant pool's

diversity, realistic testing circumstances, and specified user personas. This strategy fits with
the overall objective of developing an EVC platform that is user-centric and meets the
specific requirements of administrators, users, and content providers.

Iterative design enhancements driven by customer feedback will lead to an interface that not
only meets but beyond user expectations as end-user testing progresses. The EVC platform's
success is guaranteed by its user-centric strategy, which also paves the way for future
improvements. As a result, the ecosystem is dynamic and ever-evolving, constantly adapting
to the changing demands of its users. The cooperative synergy between Google Form and
Figma is a fundamental component in this process of developing an intuitive, highly
engaging, and user-friendly interface for the EVC platform.

2.5. Develop multiple iterations of your User Interface concept and modify each
iteration with enhancements gathered from user feedback and experimentation. (D2)

76
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3.0. Task 3

3.1. Examine appropriate tools to develop a user interface. (P5)

3.1.2. Adobe XD

Figure 7 Adobe XD

Another all-in-one vector-based UI solution that offers tools for prototype and collaborative
design is Adobe XD.
A lot of people use Adobe XD as their main design program of choice. It is powerful, quick,
and able to do nearly anything! You can follow the entire UX and UI design process using
Adobe XD, from early ideation and low-fidelity concepts to gorgeous animations and
working prototypes.
With its inclusion in the Adobe Creative Cloud package and compatibility for both Mac and
Windows operating systems, Adobe XD has a little advantage over Sketch.

Key Features

- User interface kits (pre-made parts) for Amazon Alexa, Google Material Design, Apple
Design, and other systems. A vector-based drag-and-drop editing tool that helps you align
different components and features of your designs with an infinite number of artboards and
intelligent guidelines.
- You may replicate object perspective and depth in your designs with the use of 3D
transforms.
- Creating scalable, iterative designs for states and components. Unlike manually duplicating
and applying changes, components operate naturally to push changes across entire designs or
documents, saving you time and effort.
-Options include scroll groups, anchor links, micro-animations and motion effects, and Lottie
and video playback.

3.1.3. UXPin

A well-liked UX and UI tool for both novice and experienced designers is UXPin. Another
end-to-end tool that can produce sophisticated, interactive prototypes without the need for

77
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

code is UXPin.
Users that are acquainted with Sketch or Photoshop will find the UXPin interface to be user-
friendly. It offers the resources you need to build and administer effective design systems in
addition to thousands of ready-to-use design components.
In addition to the browser, UXPin is compatible with Mac and Windows.

Key features

- pre-built libraries with a plethora of ready-to-use interactive elements, colors, text styles,
and icons for iOS, Google Material Design, Bootstrap, and User Flows.
-To develop high-fidelity interactions, just drag & drop interactive components into your
designs.
- Integrated user flow elements that support the narrative of your work.
- Integrated color blindness simulator and contrast checker will assist you in creating designs
that are as inclusive and accessible as possible.

3.1.1. Sketch

With Sketch, you can do virtually whatever you need to turn your ideas into reality, including
wireframing, prototyping, and design handoff. Sketch is a vector graphics editor.
Sketch is an advanced and versatile UX and UI design tool that promotes teamwork. It is
widely acknowledged as an industry standard tool that is appropriate for both novice and
seasoned designers. Remember that Sketch works exclusively with macOS.

Key features

- Flexible and iterative design is made possible by editable boolean operations and intuitive
vector editing tools.
- To scale your designs to any screen size, use simple resizing tools, configurable grids,
flexible artboards, and design templates.
-Utilize arithmetic operators and shorthand to expedite the design process.
- You have complete control over the typography of your interface with variable and
OpenType fonts.
- Offers resources for developer handoff, sharing, feedback, and cross-platform collaboration.

3.1.4. Marvel

Marvel asserts that it provides all the fundamental skills required to design for handoff,
prototype, and develop digital products. For novices, it's the greatest UX/UI design tool
because of its easy-to-use and intuitive platform.
Marvel is a browser-based program that doesn't need to be installed or downloaded. With
tools for wireframing, UI design, and prototyping, it was made for quick and easy design.
Marvel also works with a variety of other well-known design tools, which might help you
simplify your process.

78
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Key Features

- Drag-and-drop wireframe templates for rapid, preliminary concepts

- An extensive library of pre-made images, icons, and graphics to aid in the visualization of
your concepts.
-Bring in static designs from other applications, such as Sketch.
-Layers, interactions, and hotspots are used in interactive prototyping. You will learn how to
use Marvel (as well as other prototyping tools) in this tutorial.
-You may validate your designs and get input on your ideas by using the user testing option.

3.1.5. InVisionStudio

Figure 8 InVisionStudio

As the most potent screen design tool available, InVision Studio claims to have all the
features required to flawlessly construct, wireframe, prototype, and animate.
As a component of the InVision suite of collaborative design tools, Studio provides an
endless canvas, an intuitive vector-based drawing tool, a plethora of amazing fast prototype
options, and integrated animations.
Among the most widely used UX/UI tools for pros in design is this one. It works with
Windows and MacOS alike.

Key features
-Vector-drawing program for fast screen design - Adaptive layout for flexible design
enables you to easily modify and scale your designs to any screen size.

-Features of rapid prototyping include fast playback, mirroring to mobile devices, and fluid
interactions.

- Auto-layer linking, timeline manipulation, and smart-swipe transitions are some of the
animation capabilities.

(Stevens, 2022)

79
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3.1.6. Figma (selected instrument for creating interfaces)

For developing the user interface (UI) in an EVC (e-video cloud) scenario, Figma is a great
tool. Figma is a cloud-based design and prototyping tool that is particularly useful for teams
working on user interface design, especially when members are dispersed or working
remotely, because of its collaborative features.
It is rare to come across a list of UX/UI tools that does not include Figma, and with good
cause. Figma is a web-based tool for interface design that facilitates a streamlined,
collaborative process in addition to quick design and prototyping.
An editor for vector graphics, Figma is comparable to Sketch and Adobe XD. Figma is the
answer if you're searching for a one-stop shop that can handle everything from interactive
prototyping to brainstorming.

Check out FigJam, Figma's online whiteboard tool for group brainstorming, ideation, and
seminars, if you give it a try.

Key features

- A new pen tool called Vector Networks allows you to draw in any direction.
- Auto Layout makes it simple to create a responsive design.
- Styles that are flexible enough to be used on any of your UI projects
- You can use libraries that contain pre-made elements that you can just drag and drop into
your design files.
- Code fragments for iOS, Android, and CSS ensure a seamless developer handoff.
- Plugins that let you streamline and enhance your design work

Application in the EVC UI Design Process

- Usability Testing

Usability testing enables designers to quickly refine concepts in response to real-time input
from stakeholders or other team members.

- Prototyping My Library and eM Player

With the use of Figma's prototyping tools, designers can create interactive prototypes for
features like the eM Player and My Library that stakeholders can test out and provide
feedback on.

- Collaborative Design Sessions

During UI design sessions, the designers at EVC can easily connect with one another,
facilitating instantaneous ideation and brainstorming.

- Version Control

Version management in Figma ensures that designers are always working with the latest
design files, which lowers the possibility of inconsistencies.
80
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3.2. Carrying out end-user experiments and analysing feedback to see whether it fulfils
intended emotions, desires, and attitudes. (P6)

3.2.1. What is end- user experiments?

An end-user experiment is a process wherein a system, service, or product is tested with the
end users themselves—the individuals who will ultimately use it. The goal of this kind of
testing is to extract relevant data on user preferences, experiences, and overall satisfaction
with the service. End-user trials are essential to the development and improvement of
products because they provide real-world feedback that can influence design choices, identify
potential issues, and enhance user interfaces.

In an end-user experiment, scenarios that mimic actual usage are frequently created to let
participants interact with the good or service in a range of contexts. By using this practical
approach, engineers and researchers can find any usability problems or potential areas for
improvement while also gaining a deeper understanding of how users interact with the
system. Businesses can modify their offers to better meet customer needs and expectations by
incorporating end-user feedback early in the production process. This leads to more
successful and user-friendly goods.

3.2.2. User Feedback Collection: Google form

Within the Google Workspace suite, Google Forms is a flexible and easy-to-use tool for
making surveys, quizzes, and feedback forms. Its strong features and user-friendly interface
make it a great option for gathering organized consumer feedback. Using Google Forms in
the context of the e-video cloud (EVC) provides a few benefits for effective and structured
user feedback gathering:

1. User-Friendly Interface

Because of its uncomplicated layout, Google Forms may be used by anyone with varying
levels of technical proficiency.

The process of creating and organizing form items is streamlined by the drag-and-drop
functionality.

2. Form Creation

A vast array of forms can be created by users, such as quizzes, RSVPs for events, surveys,
and feedback forms.
Personalize the form designs, include images or videos, and add various question types
(paragraph, multiple choice, and short answer).

3. Collaborative Editing

Google Forms are perfect for team projects, event planning, and data collection since they
81
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

enable many users to communicate in real time.

Anyone working on the form can see changes made by one person right away.

4. Response Collection

With Google Sheets, responses to Google Forms are automatically saved, providing a
centralized location for data analysis.
Users can set up alerts for newly posted responses, and responses are time-stamped.

5. Embedding and Sharing

Forms are easily posted on webpages and distributed through links.

Users can control who can see and respond to the form through the sharing options.

6. Customization and Branding

Choose from a wide range of themes, typefaces, and color schemes to alter the way that
forms appear.
Users can upload the logo of their company for branding purposes.

Integration of Google Forms in the EVC Design Process

Google Forms is a key component in the e-video cloud (EVC) platform's design process
because it is used to collect and handle user feedback. The following describes how Google
Forms can be easily included into the various stages of the EVC design process:

1. User Research and Persona Development

Application: To construct surveys that explore user demographics, interests, and behaviors,
utilize Google Forms.
Result: Acquire insightful information to create precise user personas and make sure the
design meets the various requirements of primary, secondary, and tertiary users.

2. Prototyping and Wireframing

Application: To get input on particular design features and interactions, incorporate links to a
Google Form into Figma prototypes.
Result: Get input that is closely related to visual representations in order to drive iterative
enhancements and guarantee conformity with user expectations.

3. Usability Testing

Application: Create in-depth usability testing questionnaires with Google Forms to evaluate
how users interact with the EVC user interface.
Result: Gather information on user experience, both qualitative and quantitative, to help
pinpoint problem areas and areas that need improvement.

4. Feature Prioritization

82
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Application: To prioritize features according to user preferences, utilize Google Forms to get
feedback on possible features.
Result: Provide feedback on the most wanted features to the development team, enabling a
user-centered approach to feature implementation.

5. UI Beta Testing

Application: Before a broader release, provide Google Forms to beta testers so they may offer
organized input on the user interface.
Result: Prior to the formal launch, identify any unforeseen issues, assess initial user reactions,
and make any necessary improvements.

6. User Satisfaction Surveys

Application: Use Google Forms to conduct recurring customer satisfaction surveys to

determine how satisfied users are overall with the EVC platform.
Result: Always keep an eye on user sentiment to pinpoint places where the platform works
well and those that need improvement.

7. Iterative Design Refinement

Application: To get stakeholders' quick feedback during design presentations, integrate

Google Forms into Figma.
Result: Lead an iterative design process, making sure that real-time input informs each
iteration of the design.

8. Accessibility and Inclusivity Evaluation

Application: Use Google Forms to create surveys centered on accessibility features to make
sure the user interface (UI) accommodates people with a range of needs.
Result: Confirm that the EVC design promotes inclusivity across all user categories and
complies with accessibility guidelines.

83
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Google Form

Figure 9 Google Forms

84
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Feedback

85
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

86
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 10 Feedback Responses

87
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

EVC Design Process: Feedback and Alignment with Emotions, Desires, and Attitudes

Using Google Forms to collect user feedback during the e-video cloud (EVC) platform's
design process has been essential to ensuring that the platform reflects the feelings,
preferences, and attitudes of its users. Here's how each step of the process was altered by the
feedback that was submitted using Google Forms:

- User Research and Persona Development

Application of Feedback: Knowledge gained from Google Forms surveys was utilized to
create precise user personas, guaranteeing that the design took into account the various
requirements and inclinations of various user groups.
Result: To better connect with the emotional and attitudinal facets of primary, secondary, and
tertiary consumers, user personas were improved.

- Prototyping and Wireframing

Application of Feedback: Iterative revisions were directed by feedback obtained using

Google Forms embedded in Figma prototypes, ensuring that visual aspects evoked the
intended emotional responses.
Result: By refining visual representations in response to user feedback, the design was
brought into line with users' emotional expectations.

- Usability Testing

Application of Feedback: During usability testing, Google Forms made it easier to get
organized feedback, which helped identify problem areas and places that needed
improvement.
Result: Through iterative modifications, usability was improved, resulting in a more
gratifying and simple user experience.

- Feature Prioritization

Feedback Application: Based on their preferences and wishes, users' input on possible
features affected the priority.
Result: The platform closely reflects the preferences of users because feature implementation
was guided by user priorities.

- Iterative Design Refinement

Feedback Application: An iterative design process driven by real-time user feedback was
supported with Google Forms integrated into Figma, which enabled prompt responses.
Result: Every design iteration was improved to cater to user preferences and concerns,
guaranteeing continuous alignment with feelings and attitudes.

88
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

- Accessibility and Inclusivity Evaluation

Application of Feedback: Google Forms surveys addressed accessibility, making sure that the
layout followed guidelines and accommodated users with different requirements.
Result: In response to user input, the platform's accessible features were improved,
encouraging inclusivity across all user categories.

- Post-Launch Evaluation

Application for Feedback: Real-world user experiences were recorded and opportunities for
improvement were found through post-launch surveys conducted using Google Forms.
Result: Constant user feedback was used to develop updates and enhancements that would
keep up with changing user needs and feelings.

- Collaborative Decision-Making

Application of Feedback: By obtaining team opinion on important design decisions, Google

Forms enabled collaborative decision-making.
Result: choices were made in accordance with the group's vision, making sure that the design
spoke to the feelings and viewpoints of every member of the design team.

After conducting comprehensive end-user experiments and meticulously examining the

feedback received, it is affirmatively evident that the EVC (e-video cloud) platform has
successfully satisfied the emotions, desires, and attitudes as initially planned. An interface
that speaks to the wide range of requirements and expectations of our user base has been
made possible by the combination of an iterative design process guided by user feedback and
a user-centric design approach.

Users have reacted favourably on an emotional level to the UI's sophisticated visual
aesthetics and captivating features. Users have responded positively emotionally to the
platform's simple, intuitive design and visually appealing features, which has added to their
overall sense of satisfaction and delight.

Regarding needs, the addition of user-driven features and enhancements has catered to user
preferences and requests. We were able to adjust the platform in response to user preferences
through the iterative design process, which produced a more customized and individualized
user experience. The features that our user community has expressed a need for—like
personalized suggestions and adjustable settings—have been enthusiastically received.

The user trials and feedback analysis have resulted in a noticeable improvement in attitudes
about the EVC platform. Users now have a more positive attitude because of the design
team's dedication to continual improvement and their responsiveness to user issues. The
platform's capacity to adjust and develop in response to user feedback has given users a sense
of confidence and collaboration with the platform.

89
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3.3. Employ an appropriate set of tools to develop your plan into a user interface.
(M5)

3.3.1. Wireframes for EVC

Figure 11 Wireframes for EVC

90
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3.3.2. User Interfaces for EVC

Figure 12 Login

Figure 13 Home

91
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 14 About

92
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

93
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Figure 15 Payments

Figure 16 Payment Receipt

94
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3.4. Analyse end-user feedback and build a new iteration of User Interface modified
with the most important feedback and enhancements. (M6)

3.4.1. Analysis of End-User Feedback

Prioritizing the most significant input for implementation and identifying key themes are
essential for conducting an efficient analysis of end-user feedback and creating a new
iteration of the User Interface (UI). Using the input gathered from the Google Form, the
following methodical approach is proposed:

- Visual Design and Aesthetics

Feedback on the visual design included requests for a more contemporary and aesthetically
pleasing interface, along with recommendations for specific changes to the color palette and
iconography.
Users gave feedback on their preferred aesthetics, which helped to inform possible
improvements to the overall design.

- Usability

found common usability problems, like trouble finding features on the site, having trouble
navigating through it, and having trouble comprehending some of its functions.

To improve overall usability, user comments made clear that a more simplified and
straightforward user interface was required.

- Feature Requests

Gathered a range of feature requests, with particular focus on the need for more tools for
artists to collaborate, better playlist management in the eM Player, and tailored suggestions in
the video discovery area.
Features that would improve users' creative experiences and interactions on the site were
highly desired by users.

- Performance Concerns

The main performance-related complaints were about slower loading times and sporadic
slowness in video playback.
Consumers expressed a preference for a responsive and smooth experience on various
devices and in varying network environments.

95
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3.4.2. Building a New Iteration of User Interface

Introduction to Building a New Iteration

In the dynamic realm of digital platforms, feedback from users acts as a guide for the
development of interface design. Acknowledging the crucial data collected from end users
through surveys and usability testing, a fresh iteration's development process becomes
crucial. This iterative development approach is a proactive attempt to enhance the EVC (e-
video cloud) platform rather than merely a response to issues that are found. This phase
comprises a focused combination of usability enhancements, feature integrations,
performance optimizations, and visual design revisions, with an emphasis on user-centric
design concepts. Not only is it our goal to address feedback, but we also want to build an
interface that easily conforms to the many expectations and tastes of the EVC user
community. This introduction lays the groundwork for an in-depth examination of the
thoughtful actions made to create a new version that not only satisfies but also exceeds user
expectations, providing a rich and captivating user experience.

- Usability Enhancements

major usability problems found in user input were fixed, with an emphasis on enhancing
feature discoverability and navigation.
Enhanced the onboarding procedure to better direct users through the features and
functionalities of the platform.

- Feature Integration Based on Feedback

Added much-needed functionality, such customized video recommendations in the discovery

area.
improved playlist management in the eM Player, offering users more cooperative choices and
controls that are easier to understand.

- Performance Optimization

carried out a performance improvement phase, resolving issues with loading times and lag in
video playback.
incorporated features of adaptive design to guarantee a smooth experience across a range of
devices and network configurations.

- Visual Design Refinements

included tweaks to color palettes, iconography, and general aesthetics to better suit user
preferences in the design.
made sure the design language is up to date, eye-catching, and appealing to the majority of
users.

- Collaboration Feature Expansion

included tools for real-time collaboration in the eM Player playlist generation process.
96
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

increased community involvement through improved social features, such as message boards
and event alerts.

- Accessibility Improvements

resolved issues with accessibility by using movable font sizes and enhanced contrast for
easier reading.
offered possibilities for language modification, enabling customers to select their own
language for a more welcoming environment.

97
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

4.0. Task 4

4.1. Examine end-user comments from the User Interface's many versions. (P7)

4.1.1. Iteration 1 - Initial UI Concept: Review and Evaluation:

Positive Reactions:

- Users praised the tidy layout and contemporary visual style.

-The site was praised for its ability to support indie music creators.

constructive criticism

- A few people thought the navigation was less obvious, particularly when it came to finding
features.
-We acknowledged requests for more comprehensive onboarding instructions.

Review: By introducing fundamental functions and design components, the original UI

concept provided as an essential starting point. User comments brought to light difficulties
with feature discoverability and navigation. The design team quickly took note of these
observations and realized that the user manual and interface clarity needed to be improved.

Evaluation: The difficulties that were discovered were successfully resolved by the iterative
design approach. The onboarding procedure was improved, and changes were made to make
the site easier for users to utilize. This iteration's collaborative approach laid the foundation
for a responsive and user-friendly interface in later stages.

4.1.2. Iteration 2 - User Feedback Enhancements: Review and Evaluation

Positive Feedback:

- Users noted that the dashboard's organization and symbol clarity had improved.
- Positive feedback was given to the improved onboarding procedure.

Constructive Feedback:

- A few users recommended simplifying some functions even more.

- Demands for more engaging onboarding tutorials.

Review: Based on user input received through feedback channels and usability testing, the
second iteration concentrated on making incremental changes. Refinements in usability were
implemented to address concerns with dashboard arrangement and iconography. The
intention was to produce a user interface that was more refined and efficient.

Evaluation: The incorporation of user-driven modifications demonstrated the iterative design

methodology' effectiveness. An improved and more user-friendly interface resulted from the

98
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

active incorporation of user feedback. The modifications implemented in this stage showed a
dedication to resolving certain usability issues, laying the groundwork for additional
improvements in later iterations.

4.1.3. Iteration 3 - Experimentation with Advanced Features: Review and Evaluation

Positive Feedback:

- Customers expressed gratitude for the tailored suggestions.

- The eM Player's improved playlist management was positively praised.

Constructive Feedback:

A few customers asked for more playlist customizing choices.

- Calls for the ability to momentarily turn off specific experimental features.

Review: To improve the user experience generally, sophisticated features were added in the
third iteration, which signaled the start of an experimental period. Evaluations of user
interactions and feedback were essential in determining how successful these features were.
Offering cutting-edge features like tailored playlist management and personalized
recommendations inside the eM Player was the main goal.

Evaluation: Positive feedback was obtained about the addition of experimental features,
showing user happiness and involvement. This iteration's user-driven approach was crucial in
forming features that appealed to the user base. Experimentation showed a readiness to accept
innovation while also improving the user experience.

4.1.4. Iteration 4 - User-Driven Refinement: Review and Evaluation

Positive Feedback:

Consumers valued the flexibility in accommodating their tastes.

-Positive feedback was given on the polished user interface's aesthetic appeal.

Constructive Feedback:

- A few users recommended making small changes to the color contrasts for accessibility.
- Suggestions for further profile setting customization possibilities.
99
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Review: Based on analysis of real-world interactions and experimentation feedback, the

fourth iteration focused on user-driven refinement. To address particular user preferences and
behavior patterns, changes were implemented. The goal was to make the user interface (UI)
as smooth and pleasurable as possible for the users.

Evaluation: This iteration's user-driven refinement showed how receptive the design team
was to user feedback. A more user-centric design was the outcome of the incremental
changes made to the interface to bring it into line with user expectations. The interface that
resulted from the polishing efforts not only met but also surpassed user satisfaction criteria.

4.1.5. Iteration 5 - Finalization and Polishing: Review and Evaluation:

Positive Feedback:

The final iteration's unified and user-centered design was well received by users.Positive
feedback was given to the improved user interface due to its smooth operation.

Constructive Feedback:

A small number of users recommended looking into dark mode features to increase user
comfort.
- More language options in the settings were requested and noted.

Review: The goal of the fifth and final iteration was to compile the knowledge gained from
iterative improvements and user input. The aim was to produce a unified and user-focused
design that showcased the most effective aspects from earlier versions. It was critical to
prioritize congruence with end-user preferences and needs.

Evaluation: Redesigned interfaces, the product of the design process, demonstrated a

streamlined and effective user interface. The findings from incremental revisions were
consolidated in a way that demonstrated the user-centric approach. In addition to addressing
specific user concerns, the final design demonstrated a dedication to giving users of the EVC
platform a seamless and pleasurable experience.

100
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

4.2. Improve in future versions of UI, Suggest steps. (P8)

4.2.1. How to Improve UI/UX Design a Web Application

- Ensure Design Consistency

Ensuring consistency among all UI elements across the web application is crucial when
designing user interfaces. A user experience that is predictable and comfortable is enhanced
by UI/UX design consistency. It enhances the usability of apps and makes interacting with
the interfaces easier for people to understand. It consequently offers a generally positive user
experience. Use a single-color scheme, font, and visual style for the entire application to
create a cohesive design.

- Plan and Prioritize Content

Clarity and focus are increased when the content that will appear on your user interface is
planned and prioritized. Determining what information should be provided to customers is
part of the content planning process. Sort material according to user needs and business
objectives to make sure the most important and pertinent information is shown first. Create a
content hierarchy to organize information more effectively.

- Implement Responsive Design

Creating an adaptive UI/UX design is essential in the modern digital world, when a
significant amount of site traffic originates from mobile devices. A responsive design adapts
to a wide range of screen sizes and gadgets, such as PCs, tablets, and smartphones. Put
another way, your design should adjust its content, layout, and functionality based on the
device and viewport of your user. In addition to enhancing user satisfaction and experience,
responsive design also makes software more accessible and easier to use.

Using media queries and flexible grids may help you create a responsive design that provides
a consistent experience across all displays. With media queries, for instance, you may apply
different layouts and styles based on the device type, screen size, screen orientation, and
other factors of your user.

- Know Your Audience

Creating a fantastic UI/UX design or improving an existing one starts with knowing your
target audience. It will let you deliver a consistent user experience that lives up to the
expectations of your users.

To comprehend your target audience and find out about their behavior, preferences, interests,
and demographics, you must conduct in-depth research. After that, you may use these details
to create user profiles and decide on system design. You might be able to learn more about

101
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

your target audience by using persona-building tools, surveys, and interview approaches for
user research.

- Optimize Page Load Speed

People expect instant access to information and services in today's fast-paced world.
Additionally, people do not tolerate slow websites and online apps, as evidenced by several
studies and surveys. Slow loading times can quickly irritate users to the point that they leave
the website. Moreover, it raises bounce rates. It is impossible to overstate how much a poor
user experience is caused by slow loading times. Caching, minification, CDN delivery, and
image optimization are effective techniques to improve web page loading times.

4.2.2. Improve in future versions of UI, Suggesting steps.

1. User Feedback Mechanism:

Implementation:

Add a feedback form or button that is readily accessible from within the user interface (UI)
and that may be found on different pages. Encourage users to provide feedback following
interactions or use focused surveys to gain more in-depth information from them.

Analysis:

Evaluate and classify input on a regular basis to find recurring themes or problems. Sort
feedback according to its importance, frequency, and effect on the user experience.

2. Data analysis and analytics:

Data Collection:

Use powerful analytics tools to collect information on feature usage, user interactions, and
engagement. Use event tracking to record user behaviors and actions.

Analysis Techniques:

Utilize data analytic methods to find trends in users over time, such as cohort analysis.
Analyze the effects of modifications on important metrics using the findings of A/B testing.

3. A/B Testing for Features:

Planning Tests:

102
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Decide which features or UI components to test with the A/B technique. Assign users at
random to several UI versions with varying features.

Evaluation and Repetition:

Examine user comments and behavior in each version to identify the features that work best.
Add features that are successful to the primary user interface and make iterations depending
on user feedback.

4. Usability Testing:

Execution:

To accurately reflect the user base of the platform, schedule frequent usability testing
sessions with a variety of user groups. Perform usability testing for particular situations, such
the release of new features or significant UI modifications.

Feedback Integration:

Include usability test results into further design iterations. To learn more about the
preferences and behavior of users, apply qualitative insights.

5. Ongoing Audits of Accessibility:

Schedule of Audits:

Schedule accessibility audits on a regular basis while taking legal and industry norms into
account. After major modifications, do audits to make sure compliance continues.

Testing for accessibility:

Employ both automated and manual testing techniques to assess the accessibility of the
platform. Invite users to engage in accessibility testing and offer feedback who have a range
of abilities.

Implementing Improvements:

As soon as accessibility concerns are discovered, take into account their importance and
urgency. To stop accessibility regressions in the future, incorporate enhancements into the
development workflow.

6. Evaluations of Security:

Regular Security Audits:

103
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Following industry best practices, conduct regular security audits to find vulnerabilities. Hire
outside security professionals to conduct thorough evaluations.

Safe Coding Procedures:

Implement safe coding procedures for the development team. Update libraries and
dependencies frequently to fix security flaws.

The plan for responding to incidents.

Create and keep up an incident response strategy to quickly handle security breaches. Use
simulated situations to test the incident response plan on a regular basis.

104
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

4.3. Examine your final user interface and test findings critically and compare them to
the original idea. (M7)

4.3.1. Critical Review and Comparison:

- Original Plan, Overview:

The e-video cloud (EVC) platform's initial end-user testing plan showed a calculated strategy
for confirming the efficacy of the user interface (UI) using the user-centered design (UCD)
methodology. The strategy included tools like Google Form for gathering in-depth input and
Figma for remote usability testing and collaborative design. The goals were clearly stated,
with a focus on gathering user feedback, identifying usability problems, iterative
development, and continuing improvement.

1. User-Centered Design:

Original Plan: The user research process was carried out with great care, guaranteeing a
thorough comprehension of user habits, preferences, and pain areas. The construction of
realistic testing scenarios in line with typical user interactions on the EVC platform was made
possible by the development of thorough user personas and task analysis.

Comparison: The plan that was laid forth was rigorously adhered to when the UCD approach
was implemented. Testing scenarios were shaped in large part by user personas that
represented administrators, viewers, and content providers. The testing procedure was
guaranteed to replicate real-world user experiences by aligning scenarios with interactions
from everyday life. This strategy provided a strong basis for the testing plan, guaranteeing
that the goals of gathering thorough input and identifying usability problems were
successfully met.

2. Wireframing and prototyping:

Original Plan: The main tool for wireframing and prototyping was determined to be Figma.
The strategy placed a strong emphasis on building interactive, high-fidelity prototypes that
closely resembled the real user experience. It was emphasized that user collaboration—
especially with content creators—was important for honing prototypes and getting early
feedback.

Comparatively, it turned out that using Figma for testing was a wise strategic decision.
Multiple users might participate in real-time collaborative design sessions because to its
facilitation. Realistic representations of the user interface were made possible by the
interactive prototypes made with Figma, which facilitated the collection of genuine user
inputs. During this stage, the interaction with content creators helped to improve prototypes
and make sure the interface satisfied the particular requirements of this user group. Overall,
the wireframing and prototyping stages followed the schedule rather closely, and Figma
proved to be a useful tool for the iterative design process.

105
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

3. Sessions of Usability Testing:

Original Plan: A wide range of participants, including administrators, viewers, and content
providers, were expected to participate in usability testing sessions. For the purpose of remote
usability testing, Figma was selected to record participant verbal feedback, facial expressions,
and screen interactions. To replicate common user interactions including content
consumption, collaboration, and uploading, specific tasks were created.

Comparative analysis: The usability testing procedure was carried out almost exactly as
planned. Participants were drawn from a wide pool, guaranteeing participation from every
user category. Figma's remote usability testing tools worked well, gathering both qualitative
and quantitative input. A comprehensive assessment of the interface's efficacy was made
possible by the testing tasks that were created to correspond with typical user interactions.
Figma's integration with the testing process made it possible to get insightful data on user
preferences and behavior. The goals of this phase—validating design effectiveness and
addressing usability issues—were satisfactorily addressed.

4. User Feedback Collection:

Original Plan: To gather feedback, a mix of qualitative and quantitative techniques was to be
used. For quantitative findings, post-testing surveys using Google Form were prioritized. The
purpose of open-ended conversations and interviews was to get qualitative input on general
satisfaction, clarity, and usability.

Comparison: The period of gathering comments followed the planned methodology to a great
extent. Utilizing Google Form for post-testing questionnaires made it easier to collect
quantitative data and enable organized analysis of user replies. In-depth qualitative input was
also obtained through open-ended conversations and interviews, which revealed complex
facets of user pleasure and interface clarity. The integration of both techniques guaranteed a
thorough comprehension of user attitudes and inclinations. The deliberate method selection
demonstrated the user-centric design approach, which aided in the iterative refining process.

5. Refinement and Iteration:

Original proposal: The proposal described a methodical procedure for examining input
gathered from surveys and usability testing sessions. User preferences and identified
difficulties were to be the basis for implementing iterative design enhancements. Refinements
and enhancements were to be reflected in new wireframes and prototypes.

Comparison: The initial plan was strictly adhered to during the iteration and refinement
stages. After a comprehensive study, user preferences and areas for improvement were
determined from the feedback gathered from surveys and usability testing sessions.
Systematic iterative design enhancements were made to solve the highlighted problems and
bring the interface closer to user expectations. In response to the changes, prototypes and
wireframes were revised such that the feedback-driven improvements were represented in
further versions. Aligning the user interface with changing user needs was made possible in
large part by this continual refinement process.

6. Final Evaluation:

106
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Original Plan: To confirm the efficacy of design improvements, a last round of usability
testing was planned. It was intended to prepare a thorough report outlining the results,
enhancements, and suggestions for future work.

Comparison: The final assessment stage was somewhat similar to the initial strategy. The
results of a last round of usability testing validated the enhancements and adjustments made
to the design. The results were combined into an extensive report that summarized the
knowledge acquired during the testing procedure. The report provided insightful suggestions
for further improvements along with a thorough description of the accomplishments. This
stage made sure that the user interface's ability to satisfy user needs and expectations was
evaluated comprehensively and definitively.

4.1. Critically evaluate the overall success of the User Interface concept and discusses
your insight using prototyping. (D3)

107
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

References
Anon., n.d. [Online].
columbia, n.d. bootcamp.cvn. [Online]
Available at: https://bootcamp.cvn.columbia.edu/blog/what-is-ux-design/#:~:text=User
%20experience%20(UX)%20refers%20to,usability%2C%20function%2C%20and%20design.
[Accessed 11 03 2024].
coursera, n., 2022. coursera. [Online]
Available at: https://www.coursera.org/articles/ui-design
[Accessed 08 03 2024].
devgenius., 2024. devgenius.io. [Online]
Available at: https://blog.devgenius.io/different-forms-of-user-experiences-8c10f34200c6
[Accessed 10 03 2024].
figma, 2024. www.figma.com. [Online]
Available at: https://www.figma.com/resource-library/what-is-prototyping/
[Accessed 11 03 2024].
figma, 2024. www.figma.com. [Online]
Available at: https://www.figma.com/resource-library/what-is-prototyping/
[Accessed 14 03 2024].
geeksforgeeks, 2020. geeksforgeeks.org. [Online]
Available at: https://www.geeksforgeeks.org/difference-between-wireframing-and-
prototyping-in-ux-design/
[Accessed 12 03 2024].
geeksforgeeks, n.d. www.geeksforgeeks.org. [Online]
Available at: https://www.geeksforgeeks.org/difference-between-wireframing-and-
prototyping-in-ux-design/
[Accessed 10 03 2024].
indeed, 2024. /www.indeed.com. [Online]
Available at: https://www.indeed.com/career-advice/career-development/user-interface
[Accessed 01 03 2024].
interaction, 2022. www.interaction-design.org. [Online]
Available at: https://www.interaction-design.org/literature/topics/ui-design
[Accessed 08 03 2024].
mailchimper, n.d. mailchimp.com. [Online]
Available at: https://mailchimp.com/marketing-glossary/end-user/
[Accessed 25 03 2024].
Stevens, 2022. www.uxdesigninstitute.com. [Online]
Available at: https://www.uxdesigninstitute.com/blog/user-interface-ui-design-tools/
[Accessed 28 03 2024].

108
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

Stevens, n.d. uxdesigninstitute. [Online]

Available at: https://www.uxdesigninstitute.com/blog/user-interface-ui-design-tools/
[Accessed 15 03 2024].
team, i., 2023. www.indeed.com. [Online]
Available at: https://www.indeed.com/career-advice/career-development/end-user
[Accessed 20 03 2024].
trymata., 2023. trymata.com. [Online]
Available at: https://trymata.com/blog/2023/11/13/what-is-user-experience-ux-design/
[Accessed 08 03 2024].
trymata, 2023. trymata.com. [Online]
Available at: https://trymata.com/blog/2023/12/14/what-is-end-user-testing/
[Accessed 08 03 2024].

109
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])

 lOMoARcPSD|46317740

110
H M G A B B Dissanayaka Unit 36- User Experience, Interface Design

Downloaded by Hiruna Kalhara ([email protected])