E131272-1680961474013-263634-UXUI Assignment (Mandara)

Higher Nationals
Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS
Programme title BITEC Higher National Diploma in Computing
Mr. Gagana Wickramasinghe

Assessor Internal Verifier
Unit 40- User Experience and Interface Design
Unit(s)
Assignment title User experience design for E-music cloud

H.P.D.Mandara Prawarshana
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
Y/N
accurately?
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
Y/N
amending?
Assessor signature Date
Internal Verifier signature Date

Programme Leader signature (if required)
Date
Confirm action completed

Remedial action taken
Give details:
Assessor signature Date
Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)
User Experience and Interface Design 1 H.P.D.Mandara Prawarshana

Assignment Feedback Form
Student Name/ID H.P.D.Mandara Prawarshana E131272
Unit Title Unit 40- User Experience and Interface Design
Assignment Number Assessor

08/04/2023 Date Received 08/04/2023
Submission Date
1st submission
Date Received 2nd
Re-submission Date
submission
Assessor Feedback:
LO1 Research what aspects of User Experience and Interface Design are necessary and
appropriate to satisfy end-user emotions, desires and attitudes when using a user
interface concept.
Pass, Merit & Distinction P1 P2 M1 M2 D1
Descripts
LO2 Plan an appropriate User Experience map and Interface Design for a User Interface
concept with a specific target end user in mind and outline the tests you mean to
conduct.
Pass, Merit & Distinction P3 P4 M3 M4 D2
Descripts
LO3 Build a User Interface concept and test it with users to see if it satisfies their
emotions, desires and attitudes as planned.
Pass, Merit & Distinction P5 P6 M5 M6
Descripts
LO4 Evaluate user feedback, test results and insights gained from end users interacting
with your User Interface concept to determine success or failure and steps to improve in
future versions.
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.
Assignment Feedback
Formative Feedback: Assessor to Student
Action Plan
Summative feedback
Feedback: Student to Assessor
Assessor Date
signature
Student signature mandarasfh@gmail.com 08/04/2023
Date

Pearson Higher Nationals in
Computing
Unit 40: User Experience and Interface Design
Assignment

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.
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.
Mandarasfh@gmail.com 08/04/2023
Student’s Signature: Date:
(Provide E-mail ID) (Provide Submission Date)

Higher National Diploma in Business
Assignment Brief
Student Name /ID Number H.P.D.Mandara Prawarshana / E131272
Unit Number and Title Unit 40: User Experience and Interface Design
Academic Year 2021/22
Unit Tutor
Assignment Title User Experience Design for e-music cloud
Issue Date
Submission Date 08/04/2023
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

Unit Learning Outcomes:
LO1. Research what aspects of User Experience and Interface Design are necessary and
appropriate to satisfy end-user emotions, desires and attitudes when using a user interface
concept.
LO2. Plan an appropriate User Experience map and Interface Design for a User Interface
concept with a specific target end user in mind and also outline the tests you mean to
conduct.
LO3. Build a User Interface concept and test it with users to see if it satisfies their emotions,
desires and attitudes as planned.
LO4. Evaluate user feedback, test results and insights gained from end users interacting with
your User Interface concept to determine success or failure and steps to improve in future
versions.

Assignment Brief and Guidance:
Scenario
e-music cloud (EMC) is an emerging, cloud based, online music platform developed in Sri
Lanka by a tech start-up founded by a group of young graduates. EMC team is hiring you as
an Associate User Experience Engineer, putting you in-charge with designing UI of the EMC
system.
You need to thoroughly consider about following features when you are designing the UI,
 EPN: e-music producer network: A music producer can register, sign up, publish or un-
publish their work, monitor the distribution of their published songs, view their
account balance and to withdraw the balance through a cheque.
 eMusic Discovery: A registered users can look up artists, albums, and find music they
like. Once the eMusic Discovery is made, the user has options to
o Rent a song for 3 months: Song will be available in My Library.
o Own a song: Song will be available in My Library until user cancels the
subscription.
 My Library: Include all music videos & playlists available to the user at that time. User
has options to view and sort by Artist, Album, Genera, Year, Source (Rented, Own,
Gifted) and etc. User has options to select a song and
o Preview it
o Add it to a playlist
o Gift it to a friend (for a week, Permanently, just one listen) (* 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 eMusic Discovery and indicate” already
selected”)
o “Find Music Like This” will take the user to discovery section to find similar
music’s, artists and albums.
 eM Player: When user plays a song or a list, the user will be brought to the eM Player

which gives play controls and allow different playlist manipulations. It also contains
records of previous play-lists and gives user to rate the presently playing music. In
addition, player also contains the previously discussed “Music Like This” and “Gift”
options which can be applied to the selected song or selected play-list.
 Settings: Will give user the options to manage visual appearance, language settings,
payment options and options to manage devices connected to user’s EMC account.

Activities / Tasks:
Activity 01:
1.1 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 UX and UI design and assess standard tools available in UX & UI
design.
 Recognize and review different forms of UX-UI and their end-user testing requirements by
referring to advantages and disadvantages of them for different testing outcomes.
1.2 Analyze the Impact of UX & UI methodology in Software Development life Cycle and evaluate
specific forms of UX-UI. Justify their use in a User Interface concept method available for
testing for user requirements against the UX-UI design.
Activity 02:
2.1: Review different end users of EMC using user categorizations, classifications and behavior
modelling techniques and select a specific end user from those identified. Appraise and develop
user ‘Persona’ for the identified user. Present your empathy map, experience map and customer
journey map.
2.2: Apply a relevant development methodology to develop interaction / interface for the Persona
developed in 2.1 and devise a plan to test User Interface Design methodology and tools selected
against end user requirements. Justify your selection.

Activity 03:
3.1: Examine and employ appropriate tools that can be used to develop the interface/ interaction
designed in activity 2
3.2: Conduct a user experiment for the developed interface and examine feedback. Evaluate
feedback received and make multiple iterations of the interface based on the outcome of the
evaluation.
Activity 04:
4.1: Critically Evaluate the feedback and tests results received for the multiple iterations and the
final version of the interface developed in 3.2. and compare it against the original plan/ use
requirements.
4.2: Discuss your 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.

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 attitudes 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 an appropriate User Experience map and Interface Design for a User Interface concept with a specific target end user
in mind and outline the tests you mean to conduct.
User Experience and Interface Design 13

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 Design methodology.
M4 Devise a plan to use appropriate User Interface Design

methodology and tools to conduct end-user testing.
D2 Make 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 users to see if it satisfies their emotions, desires and attitudes as planned.

P5 Examine appropriate tools to develop a user interface.
P6 Run end user experiments and examine feedback.
M5 Employ an appropriate set of tools to develop your plan

into a user interface.
M6 Reconcile and evaluate end-user feedback and build a

new iteration of your user interface modified with the most
important feedback and enhancements.
LO4 Evaluate user feedback, test results and insights gained from end users interacting with your User Interface concept to
determine success or failure and steps to improve in future versions.

P7 Evaluate end-user feedback from multiple iterations of
your 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.

Table of Contents
Acknowledgement ................................................................................................................................................ 22
Learning Outcomes:01 ........................................................................................................................................ 23
1.1 Introduction ............................................................................................................................................ 23

1.2 Why UI and UX are important to EMC ................................................................................................. 23
1.3 Importance of UI/UX ............................................................................................................................. 24
1.4 User Interface ......................................................................................................................................... 25
1.4.1 Graphical User Interface (GUI) ...........................................................................................................26
1.4.2 Command-line interface (CLI) ............................................................................................................28
1.4.3 Menu-Driven Interface ........................................................................................................................ 30
1.4.4 Touch user interface ............................................................................................................................ 32
1.4.5 Voice-user interface (VUI) ..................................................................................................................33
1.5 User experience ...................................................................................................................................... 35
1.6Nature of Experience ...............................................................................................................................36
1.7 Different Forms of Experiences. ............................................................................................................ 37
1.8 Software Development life Cycle .......................................................................................................... 40
1.8.1 Impact of UX & UI development in Software Development life Cycle. ............................................ 42
1.9 Tools available in UX UI Development. ................................................................................................43
1.10 Methods of testing user requirements against UX-UI design. ............................................................. 48
1.11 Planning User Experience Test ............................................................................................................ 54
1.12 Importance of creating and using different types of experiences and interfaces in building EMC
services. ........................................................................................................................................................ 55
1.13 Characteristics of a good interface ....................................................................................................... 59
Learning Outcomes:02 ........................................................................................................................................ 60
2.1 End-user ..................................................................................................................................................60

2.2 Behavioral modeling techniques. ........................................................................................................... 62
2.3 Persona and Persona classification ........................................................................................................64
2.4 The classification of Persona ..................................................................................................................65
2.5 Creating a Persona ..................................................................................................................................66
2.6 Elements of a Persona ............................................................................................................................ 67
2.7 The music buyer persona ........................................................................................................................68
2.8 Empathy Map ......................................................................................................................................... 68
2.9 Empathy map EMC user ........................................................................................................................ 70
2.10 Experience Map ....................................................................................................................................70
2.11 Experience map EMC user ...................................................................................................................72
2.12 Customer journey Map .........................................................................................................................72
2.13 Customer Journey Map for EMC ......................................................................................................... 75
2.14 Service blueprint ...................................................................................................................................76

2.15 Service blueprint of EMC .....................................................................................................................78
2.16 User interfaces (Hand-drawn and Wireframes ) ..................................................................................82
2.17 Alpha version of the prototypes of EMC application ...........................................................................96
2.18 User Testing Plan ............................................................................................................................... 100
2.19 Moderate usage testing .......................................................................................................................100
2.20 Card sorting ........................................................................................................................................ 105
1.22 AB testing ...........................................................................................................................................106
Learning Outcomes:03 ...................................................................................................................................... 109
3.1 Interface Design Development Tools ...................................................................................................109

1. InVision Studio ...................................................................................................................................... 109
2. Framer .................................................................................................................................................... 109
3. Craft ........................................................................................................................................................110
4. Marvel .................................................................................................................................................... 111
5. MockFlow .............................................................................................................................................. 111
6. Adobe XD .............................................................................................................................................. 112
3.2 Tools used to develop user experience . ...............................................................................................113
3.3 Tools used to test ..................................................................................................................................114
3.4 Feedback evaluation of alpha version .................................................................................................. 115
3.4 Final Interface Prototypes .................................................................................................................... 120
Learning Outcomes:04 ...................................................................................................................................... 127
4.1 Feedback Form ..................................................................................................................................... 127

Feedback form 3 .........................................................................................................................................128
4.2 Summary of the feedback of beta version. ........................................................................................... 129
4.3 Quiz and related answers ......................................................................................................................131
4.4 Evaluation and conclusion of the analysis. .......................................................................................... 136
4.5 Final version of the interface vs. original interface/ interaction plan. ..................................................136
4.6 Consulation ..........................................................................................................................................137
4.7 Future improvements in UI development .............................................................................................138
1. Change the sound effects ........................................................................................................................138
2. Application background ......................................................................................................................... 139
3. Search by the image option .................................................................................................................... 139
4. Song details ............................................................................................................................................ 139
Conclusion ..................................................................................................................................................139
References ...........................................................................................................................................................140

Figure 1 -Graphical User Interface ( thetechhacker.com ,2023) ...................................26
Figure 2 -command line interface (CLI) ( thetechhacker.com ,2023) ...........................28
Figure 3 -Menu-driven user interface (researchgate.net ,2022) .................................... 30
Figure 4 - touch user interface ( willem.com ,2022) ...................................................... 32
Figure 5 -Voice User Interface (thisisglance.com ,2023) .............................................. 34
Figure 6 -Physical experience (bahaiteachings.org/ ,2022) .......................................... 38
Figure 7 -2.Mental experiences (bahaiteachings.org/ ,2022) ........................................ 38
Figure 8 -3.Emotional experiences (bahaiteachings.org/ ,2022) ...................................39
Figure 9 -4.Social experience (bahaiteachings.org/ ,2022) ........................................... 39
Figure 10 - Virtual/simulated experience (bahaiteachings.org/ ,2022) ......................... 40
Figure 11 -Other types of experience (bahaiteachings.org/ ,2022) ............................... 40
Figure 12 -SDLC (bigwater.consulting.com ,2022) ....................................................... 41
Figure 13 Sketch (commons.wikimedia.org ,2022) ........................................................ 44
Figure 14 -Wireframing (careerfoundry.com ,2022) ......................................................45
Figure 15 -Prototyping (xd.adobe.com ,2022) ............................................................... 47
Figure 16 -1.Moderated Usability Testing. (testingtime.com ,2022) ............................ 49
Figure 17 -2.Unmoderated Usability Testing. (playbookux.com ,2022) ....................... 50
Figure 18 -3.Card Sorting. (atendesigngroup.com ,2022) ............................................ 51
Figure 19 -4.Testing Logic & Navigation (uxplanet.org ,2022) ................................... 51
Figure 20 -5.Tree Testing. (optimalworkshop.com ,2022) ............................................. 52
Figure 21 -Keystroke Level Modelling (Zalman, 2016) ................................................. 53
Figure 22 7.A/B Testing. (splitmetrics.com ,2022) ........................................................53
Figure 23 -8.First-click Testing. (blog.optimalworkshop.com ,2022) ...........................53
Figure 24 Eye-tracking.(de.ed.ac.uk ,2022) ................................................................... 54
Figure 25 -The music buyer persona (the author ,2023) ................................................68
Figure 26 -Empathy map EMC user (the author ,2022) ................................................70
Figure 27 -8.1Customer Journey Map for EMC (the author ,2023) ............................. 75
Figure 28 -Service blueprint of EMC (the author ,2023) .............................................. 78
Figure 29 -login page (the author ,2023) ....................................................................... 83
Figure 30 -Wireframes (the author,2023) ...................................................................... 84
Figure 31 -signup page (the author ,2023) .....................................................................84
Figure 33 home page1 (the author ,2023) ......................................................................85
Figure 34 --Wireframes (the author,2023) ..................................................................... 86
Figure 35 Albuams Form (the author ,2023) ................................................................. 86
Figure 36 Albuams Form (the author ,2023) ................................................................. 87
Figure 37 Artists Form (the author ,2023) ..................................................................... 87
Figure 39 -Buy Song Page (the author ,2023) ................................................................88
Figure 41 Download song form (the author ,2023) ........................................................89
Figure 43 Home page form (the author ,2023) .............................................................. 90
Figure 44 -Wireframes (the author,2023) ..................................................................... 91

Figure 45 My song Page (the author ,2023) .................................................................. 91
Figure 47 Reports Pages(the author ,2023) ................................................................... 92
Figure 48 -Reports Pages (the author ,2023) .................................................................93
Figure 49 Wallet Page(the author ,2023) ........................................................................93
Figure 50 -Wallet Page(the author ,2023) ..................................................................... 94
Figure 51 My Account(the author ,2023) ....................................................................... 94
Figure 52 Upload Song Page(the author ,2023) ............................................................ 95
Figure 53 -Upload Song Page (the author ,2023) ..........................................................95
Figure 54 -login page (the author, 2023) ....................................................................... 96
Figure 55 -Sing up Page (the author ,2023) ...................................................................97
Figure 56 -Home Page (The author ,2023) .................................................................... 97
Figure 57 -Home Page (The author ,2023) .................................................................... 98
Figure 58 -Home Page (The author ,2023) ................................................................... 98
Figure 59 --Home Page (The author ,2023) ...................................................................99
Figure 60 --Home Page (The author ,2023) ...................................................................99
Figure 61 -User Testing Plan (the author ,2023) .........................................................100
Figure 62 -Evaluation of the summary of feedback (the author ,2023) ...................... 104
Figure 63 -Card sorting (.gluo.mx ,2023) .................................................................... 105
Figure 64 -Overview Page (the author ,2023) ............................................................ 106
Figure 65 -AB testing (the author ,2023) .................................................................... 106
Figure 66 -Album Page (USER) (the author ,2023) .....................................................107
Figure 67 AB testing (the author ,2023) ......................................................................107
Figure 68 -Artists Page (USER) (the author ,2023) .....................................................108
Figure 69 -AB testing (the author ,2023) .................................................................... 108
Figure 70 -1.InVision Studio ( medium.muz.li ,2022) .................................................. 109
Figure 71 -Framer (siecledigital.fr ,2023) ................................................................... 110
Figure 72 -3.Craft (siecledigital.fr ,2023) ...................................................................110
Figure 73 5.Marvel (Creativebloq, 2022) .................................................................. 111
Figure 74 -mockflow (Creativebloq, 2022) ................................................................. 111
Figure 75 -4.Adobe XD (Creativebloq, 2022) .............................................................. 112
Figure 76 -Chart (the author ,2023) .............................................................................115
Figure 77 -Chart (the author ,2023) ............................................................................116
Figure 83 -Login page (the author ,2023) ....................................................................120
Figure 84 -Sing Up Page (the author ,2023) ...............................................................121
Figure 85 -Home Page (USER) (the author ,2023) ......................................................121
Figure 86 -Album Page (USER) (the author ,2023) .....................................................122
Figure 87 -Artists Page (USER) (the author ,2023) .....................................................122
Figure 88 Buy Song Page (USER) (THE AURTHOR ,2023) ....................................... 123
Figure 89 -Download Song Page (USER) (THE AUTHOR ,2023) ..............................123
Figure 90 -Home (Publisher) (the author ,2023) ......................................................... 124

Figure 91 -My song (Publisher) (the author ,2023) ..................................................... 124
Figure 92 -Reoprts (Publisher) (the author ,2023) ...................................................... 125
Figure 93 -Wallet (Publisher) (the author ,2023) ........................................................ 125
Figure 94 My account (Publisher) (the author ,2023) ................................................. 126
Figure 95 -Upload song (Publisher) (the author ,2023) .............................................. 126
Figure 96 -Summary of the feedback of beta version.(the author ,2023) ..................... 130
Figure 97 -chart (the author ,2023) ..............................................................................131
Figure 98 -chart (the author ,2023) .............................................................................132
Figure 99 --chart (the author ,2023) ............................................................................ 133
Figure 100 -chart (the author ,2023) ............................................................................134
Figure 101 --chart (the author ,2023) ............................................................................135
Figure 102 ---chart (the author ,2023) .........................................................................135
Table 1 advantages and dis advantages (the author ,2023) ........................................... 24

Table 2 -Advantages and Disadvantages (the author,2022) .......................................... 27
Table 3 -advantage and disadvantages (the author ,2023) ............................................ 29
Table 4 -advantages and disadvantages (the author ,2023) ...........................................31
Table 5 -advantages and disadvantages (the author ,2023) ..........................................33
Table 6 -advantages and disadvantages (the author ,2023) ...........................................35
Table 7 -advantages and disadvantages (the author , 2023) ..........................................45
Table 8 --advantages and disadvantages (the author , 2023) ........................................ 46
Table 9 --advantages and disadvantages (the author , 2023) ........................................ 48
Table 10 -advantages and disadvantages (javapoint.com ,2022) .................................. 49
Table 11 advantages and disadvantages (javapoint.com ,2022) ....................................50
Table 12 -system requirements (the author ,2023) ......................................................... 62
Table 13 - Experience map EMC user (the author ,2022) ..............................................72
Table 14 -advantages and disadvantages (the author ,2023) .........................................76
Table 15 - feedback forms (the author ,2023) .............................................................. 101
Table 16 -- feedback forms (the author ,2023) ............................................................. 102
Table 17 - feedback forms (the author ,2023) .............................................................. 102
Table 18 - - feedback forms (the author ,2023) ............................................................ 103
Table 19 -Summary of the feedback (the author ,2023) ............................................... 104
Table 20 -advantages and disadvantages (the author ,2023) .......................................113
Table 21 -Feedback form 1 (the author ,2023) .............................................................127
Table 24 -Summary of the feedback of beta version.(the author ,2023) .......................130

Acknowledgement
This homework assignment is for the HND in Computing's Web Design and Development
curriculum. To the maximum degree possible, I owe all those who helped with this
assignment their blessings and unwavering support. I would want to use this occasion to
express my gratitude to everyone who was involved. First of all, I would want to express my
gratitude to this subject's instructor, Mr. Gagana Wickramasinghe, for his direction, continual
monitoring, and provision of the material I needed to complete the project. Finally, I want to
thank my parents and friends for their great encouragement and assistance in getting this
project done.

Learning Outcomes:01
LO1. Research what aspects of User Experience and Interface Design are necessary and
appropriate to satisfy end-user emotions, desires and attitudes when using a user
interface concept.
1.1 Introduction
UX/UI creates and designs a customer's interactions with a company. A user interface (UI) is
how users interact with equipment. In this field, synergy and simplicity are key. User
experience (UX) includes goods, customer service, and interactions with any department.
While they're not identical, they're often grouped together because they're both crucial to a
company's success. Both teams perform user research with prototype tools, but they use
different data. UI includes a website's design and an app's interface. UI designers supervise
many of the visual elements users interact with on a web page or app, including text, form
fields, buttons and click able, and graphic positioning, to ensure they suit new products and
the company's ongoing aesthetics. UX designers work on product development teams to
create user-friendly products and ensure frictionless user interactions. UX designers design
user interfaces because they care about the entire user experience. These two teams often
work together. UI and UX design teams work to improve user experience. UI designers use
interactive design, well-organized information architecture, and a visual design and flow that
clients expect. UX designers use back-end design to improve the interface, reducing error
messages and friction to increase site time.
1.2 Why UI and UX are important to EMC

User interface (UI) design focuses on creating attractive user interfaces for software or
electronic devices. UI allows users to interact with and communicate application results. User
experience is how design engineers create products that give consumers meaningful
experiences. This includes branding, design, usability, and functionality, plus product
procurement and implementation.The creation of visually appealing user interfaces for
software or electronic devices is the emphasis of user interface (UI) design. Users may
engage with and share application findings thanks to UI. Design engineers produce products
that provide customers with memorable experiences via the use of user experience. This
covers product selection and deployment, along with branding, design, usability, and
functionality.

1.3 Importance of UI/UX
Each company's main goal should be to accelerate both sales and overall growth. The
achievement of this objective depends on how the user interface and user experience are
designed. There has probably been an increase in system usage since the software's UX and
UI design promotes a good user experience and raises customer satisfaction. By giving users
the information they need in the ways they are seeking for it, user interface and user
experience design work together to win over customers' trust and persuade them to utilise
your application or website. The number of people who use your website or app is one factor
that can be considered when evaluating the effectiveness of your user interface and user
experience.
Accordingly, following are some UI/UX advantages and disadvantages.
Advantages Disadvantages
Improved user satisfaction: A well-designed High cost: Creating good UI/UX can be
user interface and user experience can lead to expensive, especially for small companies
increased user satisfaction and engagement, or startups.
which in turn can lead to increased user
retention and loyalty.
Increased Usability: A good UI/UX makes it Time-consuming: Creating good UI/UX
easier for users to navigate and interact with an can be a time-consuming process that
app or website, which increases usability and requires significant planning, testing, and
reduces frustration. iteration.
Competitive Advantage: A good UI/UX can Subjective nature: The quality of a UI/UX
give a company a competitive advantage by is often subjective, and what works for one
setting it apart from competitors with a less user may not work for another.
user-friendly interface.
Lower support costs: A well-designed UI/UX Incompatibility: A UI/UX design that
can lower the requirement for assistance and works well on one platform or device may
training since users will be able to utilise the not translate well to other platforms or
application or website in an intuitive manner. devices, leading to compatibility issues.
Table 1 advantages and dis advantages (the author ,2023)

1.4 User Interface
The point of human-computer contact and communication in a device is the user interface
(UI). These can include desktop visuals, keyboards, mice, and display screens. It also refers
to the manner in which a user engages with a website or application. Several firms now give
UI a higher emphasis in an effort to improve the user experience as a result of the rising
reliance of many businesses on online and mobile apps. (techtarget.com ,2023)
The point of human-computer contact and communication in a device is the user interface
(UI). The area where interactions between humans and machines take place is hence referred
to as a user interface (UI). The purpose of this interaction is to enable efficient machine
operation and control from the human end, while the machine also gives back data to support
the operators' decision-making.
The interactive features of computer operating systems, hand tools, heavy machinery operator
controls, and process controls are a few examples of this wide idea of user interfaces. In order
for users to rapidly attain the intended results, it is important to create the UI self-explanatory
and user-friendly.
Here a good UI design takes into account various factors like user behavior, workflow,
accessibility, and usability. UI designers typically use tools like wireframes, mockups, and
prototypes to create and test their designs before implementation. UI plan includes elements
such as buttons, forms, menus, icons, typography, color schemes, and other visible and
synergistic components that compose the exploiter experience. The goal of UI design is to
produce an intuitive and seamless undergo that allows users to nail tasks quickly and with
minimal frustration.
UI design is closely related to the exploiter experience (UX) plan and focuses on the overall
experience of the user interacting with a digital product. A goodness UI plan is an essential
part of great UX design, as it plays a vital role in how users perceive and interact with a
digital product. Several types of user interfaces can be identified here. That is, they are
mentioned separately below. (techtarget.com ,2023)

Types of user interfaces
Here, there are several types of user interfaces used in software, websites and other digital
products. Some of the more common types of user interfaces include:
• Graphical User Interface (GUI)
• Command Line Interface (CLI)
• Menu driven user interface
• Touch the user interface
• Voice User Interface (VUI)
1.4.1 Graphical User Interface (GUI)

A Graphical User Interface, or GUI for short, is a type write of user interface that allows
users to interact with a computing device or other natural philosophy undefined using
graphical elements such as icons, buttons, menus, and windows. In contrast to a text-based
interface, where users interact with the computer by typewriting commands or text, a GUI
allows users to interact with the data processor by clicking on visual elements that represent
commands or actions.
GUIs are studied to be intuitive and user-friendly, which makes them popular for a
wide variety show of applications, including operating systems, web browsers, and software
applications. They take into account users to perform tasks without needing to memorize
complex commands or programming syntax. Examples of popular GUIs admit Microsoft
Windows, Apple macOS, and versatile mobile operating systems such as humanoid and iOS.
GUIs have become so ubiquitous that they are now the standard interface for most electronic
devices, making them an important part of Bodoni computing. (techopedia.com ,2023)
Figure 1 -Graphical User Interface ( thetechhacker.com ,2023)

The advantages and disadvantages of graphical user interface are given below.
Easy to use: GUI provides a user-friendly Limited control: GUI interfaces often
interface that makes it easy for users to provide express control over the system
interact with software applications or compared to a command-line interface. Users
operating systems. The apply of icons and may not be able to access all of the system's
menus makes it easy for users to understand features or execute complex tasks.
and sail the system.
Faster learning: Users can teach how to use a Resource intensive: GUI requires more
GUI user interface faster than a command- processing power, memory, and storage than
line interface because of a command-line interface. This can slow
the ocular representation of information and down the system and make it less responsive.
actions.
Multitasking: GUI allows users to perform Complex programming: Developing
multiple tasks at once. For example, users can a GUI requires more complex programming
copy and paste text while they continue compared to a command-line interface. This
working on other task. can make software development more time-
consuming and costly.
Reduced typing: GUI eliminates the need for Reduced speed: GUI interfaces can be slower
users to memorize commands to utilise than a command-line interface for
or typewriter hanker strings of textual performing sure tasks. For example,
matter to perform actions. Instead, users can it English hawthorn undergo longer to
perform actions by clicking on icons navigate through a fare system than to type
or victimization menus. write a command.
Consistency: GUI provides a consistent Cluttered interface: GUI interfaces can
interface across different applications, become untidy and difficult to navigate when
making it easier for users to learn and use too many icons or menus are added. This
new software applications. can work it harder for users to see the
information they need.
It's easy to explore and find your way around The GUI takes up more hard disk space than
the system using a GUI interface. other interfaces.
Table 2 -Advantages and Disadvantages (the author,2022)

1.4.2 Command-line interface (CLI)
A command line interface (CLI) is a text-based interface that allows users to interact with a
software application or in operation system by typing commands into a terminal or console.
Commands are interpreted by the system, and appropriate process is taken based on
the stimulant of the command. In a CLI, users record commands as text strings consisting of
a compel keyword and optional arguments, separated by spaces. The user presses the "Enter"
or "Return" key to undefined the command, and the output is displayed in
the terminus window.
The CLI is typically used by developers, system administrators, and great power users who
want more verify over the system and require to automate tasks or perform complex
operations quickly. The CLI is a great deal second-hand for tasks so much as file
management, system configuration, software installation, and web administration. While
CLI put up be less user-friendly and require more technical foul knowledge than a
graphical exploiter interface (GUI), it is often faster, more powerful, and provides more
control o'er the system. It is also useful for remote access and automation where GUI
interfaces may not be usable or practical. Accordingly under is a picture of the GUI interface.
(techopedia.com ,2023)
Figure 2 -command line interface (CLI) ( thetechhacker.com ,2023)

Following are the advantages and disadvantages of command line interface.
Efficiency: One of the biggest advantages of Steep Learning Curve: CLI can be
CLI is that it can be much quicker and more challenging for new users to learn, and it may
efficient than victimisation a GUI. Command take about time to turn wide with the compel
line tools put up often execute tasks with structure and syntax.
fewer keystrokes, and you can quickly
automate repetitive tasks exploitation scripts.
Flexibility: CLI allows you to access galore Lack of visual feedback: With CLI, you don't
powerful tools and features that white thorn have the same visual feedback that you would
not be available through a GUI. For example, with a GUI, which tin make it more difficult
you can use require line tools to manage to sympathise what's happening when you
system settings, network configurations, and unravel a command.
user accounts, among other things.
Portability: CLI is platform-independent, Error-prone: CLI commands are not always
substance that the commands and scripts you forgiving, and it's soft to make mistakes when
write wish work on any computer or typing in commands, which tin lead to errors
operating system that supports them. or unintended consequences.
Minimal system requirements: CLI tools are Limited accessibility: CLI may not be
typically lightweight and require minimal accessible to users with certain disabilities,
system of rules resources, making them such as visual impairments, or those who
apotheosis for use on older or less mighty bank on assertive technologies.
machines.
Scripting: command line interface is ideal for Limited interaction: With a CLI, you English
scripting, allowing you to automate hawthorn not have the same level of
undefined tasks and create usage workflow interactivity as you would with a GUI. For
that can be run with a single conman example, you may not be able to drag and
drop files, resize windows, or do strange
common tasks that are more intuitive with a
written interface
Table 3 -advantage and disadvantages (the author ,2023)

1.4.3 Menu-Driven Interface
A menu-driven user interface is a type of graphical user interface (GUI) that presents users
with a list of options or commands to choose from. It is a user interface substitution class that
allows users to interact with a computer program by selecting commands or options from a
series of menus presented on the screen. In a menu-driven interface, the user interacts with
the system by selecting options from a number of choices displayed on the screen. The menus
typically seem at the top of the screen, and the exploiter navigates through and through them
using a mouse, touch pad, or keyboard.
Menu-driven interfaces are often used in software applications such as formulate processors,
spreadsheets, and database direction systems, where users require to access a range of
functions and commands. They are also used in many operating systems, where users can
access system settings, preferences, and utilities. The advantages of a menu-driven interface
include ease up of use, as users can speedily turn up and select the options they need without
having to remember complex commands or memorize keyboard short cuts. It tin too reduce
errors, as the interface provides a clear and uniform set of options and commands. However,
menu-driven interfaces put up as wel be limiting, as they may not take into account users
to execute complex or customized operations that require a greater degree of flexibility or
precision. Additionally, they Crataegus laevigata require more clock and effort to sail through
multiple layers of menus to find the craved option. (usabilityfirst.com , 2022)
Figure 3 -Menu-driven user interface (researchgate.net ,2022)

Following are the advantages and disadvantages of a menu-driven user interface.
Easy to Use: Menu-driven interfaces are easy Limited Flexibility: Menu-driven interfaces
to apply and require little to no training. are limited in their flexibility and may not
Users can easily navigate through the system take into account users to perform complex or
by selecting options from a list of choices, customized trading operations that require a
qualification it ideal for beginners. greater degree of precision or control.
Consistency: Menu-driven interfaces provide Limited Functionality: The system's
a consistent set of options and commands, functionality may be expressed by the
making it easier for users to learn and available menu options, which may not cover
remember the system's functionality. all the user's needs or requirements.
Reduced Errors: The interface provides a Slower Navigation: Users may want to sail
express typeset of options, reducing the through and through multiple layers of menus
chances of exploiter error. This can be to find the desired option, qualification the
especially important in critical applications, system slower to utilise than unusual
such as health care or financial systems. interfaces.
Accessibility: Menu-driven interfaces tin be Design Limitations: Menu-driven interfaces

designed to be accessible to a wide straddle Crataegus intoxicant be limited in their
of users, including those with disabilities, by design, as the space available for menu
providing features much as keyboard short options is often modified by the screen size
cuts or text-to-speech functionality. or unusual design constraints.
Efficient Navigation: Users can sail quickly Lack of Intuitiveness: The interface may not
through the system of rules by selecting be intuitive for users who are used to other
options from the menu rather than typing in user interface paradigms or who have specific
commands or searching through a large expectations about how the system of rules
amount of options. should work.
Table 4 -advantages and disadvantages (the author ,2023)
Overall, menu-driven interfaces can be an effective way to provide a simpleton and consistent
user experience, especially for applications that have a limited typeset of features or require
little user input. However, they may not be appropriate for applications that require more
flexibility, customization, or precision.

1.4.4 Touch user interface
The touch user interface is a typewriter of user interface that allows users to interact with a
computer or device by touching the screen with their fingers or a stylus. It is a graphic user
interface (GUI) that enables users to execute varied operations by tapping, swiping, or
pinching the screen, among other gestures.
Touch user interfaces are commonly used in smartphones, tablets, and other mobile devices,
where users in access a wide range of functions and applications victimization their fingertips.
They are also old in kiosks, synergistic displays, and unusual applications where users need
to interact with a computer or undefined directly. The touch user interface provides a simple
and intuitive way to interact with an electronic computer or device, as users can utilize
natural gestures that mimic real-world interactions. It eliminates the require for a keyboard,
mouse, or other input devices, qualification it more accessible and favourable for users.
(techtarget.com ,2022)
Figure 4 - touch user interface ( willem.com ,2022)

Following are the advantages and disadvantages of a touch user interface.
Ease of use: The touch user interface is Limited precision: The touch exploiter
intuitive and easy to use, requiring little to no interface may not provide the same rate of
training. preciseness as other input devices, such as a
mouse or keyboard.

Natural interaction: The interface provides a Screen size limitations: The size of the screen
cancel and intuitive way to interact with the put up be a restriction for some applications,
computer or device, allowing users to apply especially those that need a lot of information
gestures that mimic real-world interactions. to be displayed at once.
Accessibility: The touch user interface is Fatigue: Using a touch user interface for
available to a wide range of users, including spread periods put up be tiring, especially for
those with disabilities, as it does not require applications that need a lot of tapping and
fine motor skills or specialized equipment. swiping.
Portability: Touch exploiter interfaces are Sensitivity to the state of affairs conditions:
commonly used in mobile devices, Touch user interfaces can be sensitive to
qualification them highly outboard and environmental conditions such as dust,
convenient for users who need to use the humidity, and temperature, which in affect
system on the go. their performance.
Multi touch capability: Many touch down
exploiter interfaces subscribe multi touch
gestures, allowing users to perform multiple
trading operations simultaneously, such as
zooming in and out of a map or rotating an
image.
1.4.5 Voice-user interface (VUI)

The Voice User Interface (VUI) is a technology that enables users to interact with a computer
or other electronic device through voice commands and spoken responses. VUIs are often
used in conjunction with practical assistants, such as Amazon Alexa, Google Assistant, and
Apple's Siri. These interfaces are premeditated to recognize and interpret natural language
input from users and provide capture responses in spoken or written form. The applied
science behind VUIs involves an undefined of language recognition, cancel language
processing, and text-to-speech synthesis. spoken communication recognition algorithms are
old to convert the user's spoken commands into text, which is and so refined and taken using
natural language processing techniques. in one case the command has been interpreted, the
VUI generates an appropriate response, which can be delivered in either spoken or scripted
form using text-to-speech synthesis.

VUIs are flattering increasingly popular in a widely range of applications, including home
automation, client service, and moving systems. They volunteer users a convenient and
spontaneous way to interact with technology, without the need for a keyboard or strange
input device. (speechly.com, 2022)
Figure 5 -Voice User Interface (thisisglance.com ,2023)
Following are the advantages and disadvantages of a Voice User Interface

Convenience: VUIs allow users to interact Accuracy: VUIs rely heavily on voice
with technology using natural language, realization technology, which is not always
making it easier and more convenient for perfect. Misinterpretations or errors can
users to perform tasks hands-free, without occur, which can frustrate users and cause
having to bank on a keyboard, mouse, or them to abandon the VUI.
touch-screen.
Accessibility: VUIs tin be especially helpful Limited feedback: unequal traditional
for people with disabilities, so much as those interfaces, VUIs can't provide seeable or
who are visually impaired or have limited tactile feedback to users, which put up make
mobility, as they can interact with devices it defiant for users to undefined that the
without having to use physical stimulation device has correctly understood their
devices. commands.
Multitasking: Because VUIs are hands-free, Noise sensitivity: VUIs can be sensitive to
they allow users to multi task more easily, background resound or accents, which can
such as hearing to music piece cooking or cause misinterpretations or errors.
driving.

Efficiency: VUIs put up be faster than Limited feedback: unequal traditional
traditional interfaces because users put up interfaces, VUIs can't provide seeable or
speak much more quickly than they can type tactile feedback to users, which put up make
or click. Additionally, VUIs can help users to it defiant for users to undefined that the
quickly navigate through complex menus and device has correctly understood their
options. commands.
Personalization: VUIs can be designed to Restricted functionality: While growing in
recognise individual users and conform to sophistication, VUIs are still unable to do all
their specific preferences and habits o'er time. the functions that conventional interfaces can,
including complicated data entry and graphic
creation.
It should be easy for users to use a good user interface. Various options should be provided. It
should look pleasing, use the right colors for key areas, and contain supporting
documentation. Because the tool interface between the system and the user, and the interface
is often the first experience the user gets, the user will continue to have an accurate and
attractive interface on the system. Because of this, the operating systems or software systems
that have the largest number of users in the world have attractive and effective interfaces.
1.5 User experience

The first requirement for an exemplary user experience is to meet the exact needs of the
customer, without fuss or bother. Next comes simplicity and elegance that produce products
that are a joy to own, a joy to use. True user experience goes far beyond giving customers
what they say they want or providing check-list features. To achieve a high-quality user
experience in a company's offerings, there must be a seamless merging of the services of
multiple disciplines, including engineering, marketing, graphical and industrial design, and
interface design. Designing a good user see requires an understanding of the users' needs,
behavior, and expectations, as well as an iterative design process that involves testing and
refining the production based on feedback from users. (bluehost.com ,2022)
Here, it refers to a person's thoughts and behaviours around how to utilise a system, product,
or service. Efficiency and simplicity of usage are also included. The history of user
experience may be traced to the usage of technology in the 19th and 20th centuries.

1.6Nature of Experience
Although every experience is unlimited, the experience is unlimited, but not reality never
changes in the changing experience. The following is the way we recognize frequency in
experiences.
 Experience is associated with the person
The identical thing would be perceived differently by each user. When asked to describe a
certain item or a system, many people will have varying "feelings" or thoughts. While one
person may find great value in a system, another may find it intolerable. This type of
experience should not be mistaken for a system or interface flaw. The sheer notion that
experience is person-related and not system-related is something that a competent experience
designer must comprehend.
 Experience is physiological and psychological

The way a person experiences something and values it relies on their psychological and
physiological state. While short- or long-term individual-related physiological impairments
like color blindness or fatigue considerably affect an individual's experience with an interface
or a system, the individual's mood has a significant impact on how she perceives the
encounter.
 Experience planning
Maybe the most significant aspect of the experience is that it increases sales. The scenario of
Windows Mobile and the iPhone outlined above serves as the greatest illustration of this truth.
Consider a time when you were describing your smartphones to a friend with pride, and urge
her to get one as well. Most likely, when you described your experience, you were trying to
inspire interest and loyalty. If the user has a great experience using the system, your software
or system is more likely to sell.
 Experience sells your product

Every experience connects you with something or someone. A positive experience will most
likely build loyalty that lasts longer than the one or the object which creates it. This loyalty
reinforces every positive experience while helping to normalize the effect of an occasional
bad experience.

 Experience is age/gender / socio-economic and culture
How an individual experiences an interface depends on the age, gender, and cultural
background of the individual. While a child’s experience of riding a merry-go-round may be
summarised as ‘amazing’, an adult would refuse it complaining it’s too `childish’. This
difference in experience is readily visible between the two genders.
 Experience is a moment of life

Each designer must be aware that an experience may best be characterized as a moment of
life for a certain person. Do you recall when you first purchased a smartphones? Your
experience with us will determine how you view and evaluate subsequent events and goods.
 Experience is a memory
For a user, her experience with a system or an interface always leads to the creation of new
memory. If you look back into your memories, you would realize that many of your
memories are experiences you had with different objects or individuals.
 Experience is a turning point in life

Every encounter leaves a fresh impression on the relevant person, influencing how she will
interpret and value future experiences. Mango may be used to quickly convey this. Consider
that you have three mangoes. One is rotten, one is unripe, and one is in between. You will
refer to the raw mango as "a good mango" if you eat the ruined one first and then the raw one.
But, if you eat the ripe mango first and then the unripe one, you would probably think the
unripe mango is bad. Most significantly, no matter how delicious mangoes are, if your first
mango in life is ruined, you probably won't enjoy them for the rest of your life.
1.7 Different Forms of Experiences.

1. Physical experience
A user's physical experience is what they feel when participating in an encounter. For
instance, different keyboard designs offer various tactile experiences. A classic keyboard
offers a distinct experience that cannot be replicated by a touch-based keyboard, including the
sensation of the key being pushed and the related sensory feedback. The lack of this tactile
feeling makes touch keyboards fundamentally less accurate and usable. By adding vibration

feedback to the keyboard, Apple attempted to fill this experience gap, which increased user
pleasure and the usefulness of the iPhone's touch keyboard to a larger extent.
Figure 6 -Physical experience (bahaiteachings.org/ ,2022)
2. Mental experiences
The user's perception of and understanding of the user interaction is based on their mental
experience. The user's mental state, emotions, and prior experiences all have a significant role
in the mental experience, which varies greatly from one viewer to the next. Two people who
see the identical incident will always have two distinct mental impressions of it.
Figure 7 -2.Mental experiences (bahaiteachings.org/ ,2022)
3. Emotional experiences
The feelings that a given experience causes in the user are referred to as emotional experience,
which is a subset of mental experience. Users frequently express love, rage, anxiety,
enthusiasm, shyness, and empathy. The experience's final feeling can be determined by the
interaction in terms of when and how the user feels it. Roller coasters are a wonderful
illustration of how an experience may cause a person to feel a variety of emotions. Users on a
roller coaster experience varied emotions depending on where they are in the ride:
exhilaration, terror, and even rage.

Figure 8 -3.Emotional experiences (bahaiteachings.org/ ,2022)
4. Social experience
An individual has a social experience when they share an experience as a result of a social
phenomena. The foundation of many modern information systems is social experience, which
enables an individual to communicate her feelings and experiences with those in her social
circle. The most successful example of a social experience may be found in the widely used
social networking site Facebook, whose whole business model is founded on the social
experiences it provides its members.
Figure 9 -4.Social experience (bahaiteachings.org/ ,2022)
5. Virtual/simulated experience
One of the fastest evolving types of experiences in the information society where the user is
subject to a realistic experience, which is not real. Based on the foundation of the experience,
the simulated experience can be either virtual or augmented. Simulated experience is often
relying on ‘fooling’ the sensory organs of humans using stereoscopic sounds and visuals. The
experience may be delivered as an immersive or non-immersive experience. The popular
mobile game Pokémon Go is the best example of a non-immersive simulated experience

while the Microsoft HoloLens platform provides a fully immersive simulated experience to
its user.
Figure 10 - Virtual/simulated experience (bahaiteachings.org/ ,2022)
6. Other types of experience

Other scenario-sensitive experiences, such as religious and spiritual experiences, which have
very little connection to computer science and software engineering, can exist in addition to
the primary sorts of experiences discussed here.
Figure 11 -Other types of experience (bahaiteachings.org/ ,2022)
1.8 Software Development life Cycle

The Software undefined living Cycle (SDLC) is a structured approach to software
development that outlines the stages involved in developing software, from conception to
delivery and maintenance. The SDLC provides a model for developing software that ensures
quality, efficiency, and is undefined in the process. The SDLC typically includes several
stages, including planning, analysis, design, implementation, testing, deployment, and

maintenance. Each stage involves specific activities and deliverables that ensure the software
meets the requirements of stakeholders and is delivered on the clock and inside budget.
The planning stage involves characteristic the project's objectives, resources, and constraints,
gathering requirements from stakeholders, estimating costs, and creating a project plan. The
depth psychology represent involves analysing the requirements and development a
functional stipulation document that outlines the software's features, functions, and behavior.
The design stage involves creating a detailed design of the software, including exploiter
interface design, database design, and system architecture. The implementation stage
involves writing code, performing unit testing, and integrating the components of the
software. Accordingly, the following is a picture related to Software Development Life Cycle.
(javatpoint.com ,2022)
Figure 12 -SDLC (bigwater.consulting.com ,2022)

Following are the various SDLC phases. Accordingly they are explained in detail below.
Planning: In this initial stage, the project's objectives, scope, feasibility, and resources are
defined. The preparation stage involves the creation of a project roadmap, including
a fancy plan, timeliness, milestones, and undefined estimates.
Requirements Gathering: This present involves identifying and shaping the inevitably and
requirements of the software. The requirements gathering work on includes analyzing
the stage business needs, user needs, and technical requirements.

Design: In this stage, the software architecture, software design, and database design are
created. The design stage outlines the technical details of the software, including the software
structure, ironware requirements, and user interface design.
Development: This is the stage where the actual coding and development of the software
system happens. The development stage follows the design phase, where the developers write
the software code according to the plan specifications.
Testing: In this stage, the software system is tested for its functionality, performance, and
usability. This stage includes unit testing, integration testing, system testing, and acceptance
testing.
Deployment: In this stage, the software is installed on the production environment, and the
end-users are skilled to use the software.
Maintenance: This represent involves the current support and maintenance of the software.
It includes bug fixes, updates, enhancements, and improvements to the software.
The SDLC is a continuous process, and each stage builds upon the previous one. The
software undefined team up should follow a disciplined approach to check that the software
package meets the requirements, is of high quality, and is delivered on time and within
budget.
1.8.1 Impact of UX & UI development in Software Development life Cycle.
User Experience (UX) and User Interface (UI) design have a substantial bear on on the
Software undefined Life undefined (SDLC). They play an requisite role in creating software
that is intuitive, user-friendly, and meets the needs of the end-users. Here are some ways UX
and UI development affect the software undefined life cycle. (softwaredominos.com ,2022)
Requirements Gathering: UX and UI designers work closely with stakeholders to gather

and understand the requirements for the software. This collaboration helps see to it that the
software is designed with the end-users in mind and meets their needs.

Design: uxor and UI designers produce wireframes, mockups, and prototypes that help
developers understand the software's structure and functionality. This helps reduce
misunderstandings and errors during the development process.
Development: UX and UI designers provide developers with design specifications, style

guides, and visual assets that steer the development process. This helps ensure that the
software is studied and developed with a consistent look and feel.
Testing: UX and UI designers work with testers to ensure that the software is proven for
usability, accessibility, and user experience. This helps place and resolve any issues before
the software is deployed.
Deployment: UX and UI designers work with the undefined team up to ensure that the
software is deployed with a user-friendly interface and intuitive design. This helps ensure that
end-users can well use and navigate the software.
Maintenance: UX and UI designers provide ongoing support to the computer

software development team to check that any updates, enhancements, or improvements are
consistent with the software's design and user experience.
UX and UI undefined play a indispensable role in ensuring that software is designed

and improved with a focus on the end-user's needs and preferences.
This collaborationist between UX and UI designers, stakeholders, developers, testers, and
support teams helps create computer software that is intuitive, user-friendly, and meets the
needs of end-users.
1.9 Tools available in UX UI Development.

This program's design enhances customer happiness and the user experience, which
eventually aids in boosting the usage of the particular application. By giving customers what
they want, your application or website's UI and UX design may help you gain their trust and
get them to utilize it. As a result, creating an effective user interface involves extensive study
and development. By applying the appropriate instrument at the appropriate stage, such an
effort may be significantly minimized. The selection of a tool for UX and UI development

depends on the particular requirements of the project as well as the preferences of the UX and
UI designers. Below are some frequently used UX and UI development tools.
Sketch
Sketch is a popular vector art editor used for UI design. It has a range of features, including
Artboards, symbols, and plugins that serve designers to make high-fidelity designs. In other
words, a sketch offers a simple picture of a concept that will be put into practise. Although a
pencil and some paper are typically used for sketches, the designer also has tools that were
specifically designed to speed up and facilitate the process.
Figure 13 Sketch (commons.wikimedia.org ,2022)
As such, Sketch is a popular vector graphics editor primarily used for designing user
interfaces and web graphics. Here are some pros and cons of Sketch software.
User-friendly interface: Sketch has a user- Limited to Mac OS: Sketch is only available
friendly interface that makes it easy for for Mac OS, and is not accessible to
designers to produce designs quickly. Windows and Linux users.
Vector-based design: adumbrate is vector- Limited support for raster graphics: While
based software, which means designs can be Sketch excels at rendering graphics, it has
scaled up or down without losing quality. limited receivers for raster graphics, which
may limit its use in certain design
applications.
Plugins and Integrations: Sketch has a large Lack of Complex Functionality: Adumbrate
library of plugins and integrations that extend is primarily designed for user interface and
its functionality and enable designers to web graphics, so it does not have the same
automate workflow. level of complex functionality as unusual
design software for Crataegus laevigata.
Collaboration: Sketch allows multiple Limited export options: Sketch has high-

designers to join the same project, making it speed export options compared to other
easy to share designs and get feedback. design software, which can make it difficult
to export designs in specific register formats.
Customizable Templates: Sketch offers a A learning curve is required: Although
variety of customizable templates that can Sketch has a user-friendly interface, it
save time for designers, especially those requires some closure for beginners to master
working on similar projects. its features and functionality.
Table 7 -advantages and disadvantages (the author , 2023)
Wireframing
Wireframing is the work of creating a basic visual representation of a web site or

application's structure, layout, and functionality. Wireframes are typically created in the early
stages of the design process and ply a theoretical account for the design team to discuss
and rectify their ideas before animated on to more detailed design work. Wireframes are
usually created using simpleton shapes, lines, and boxes to represent the various undefined of
the design, so much as headers, footers, navigation menus, and content blocks. They do not
contain any colors, images, or detailed graphics, and they often use lorem ipsum text or place
holders for content.
The resolve of wireframing is to focus on the user experience and the run of the
design, quite than on visible plan elements. By creating wireframes, designers
can screen and rectify the structure and layout of the design, identify potential usability issues,
and control that the content is organized in a logical and user-friendly manner. Wireframing
can be done using pen and paper, or with specialized software program tools that take into
account designers to create whole number wireframes quickly and easily.
Some nonclassical wireframing tools include Sketch, Adobe XD, Figma, and Balsamiq.
(interaction-design.org ,2022)
Figure 14 -Wireframing (careerfoundry.com ,2022)

Wireframing is an important part of the design process, but like any tool or technique, it has
its pros and cons. Below are some of the advantages and disadvantages of wire framing.
Helps to visualize the design: Wireframing May limit creativity: Wireframes can be to a
helps designers to visualize the layout and fault normative and may limit the creativity
structure of the design in a simpleton and of the designer by focusing too much on
easy-to-understand way. structure and layout.
Saves time and resources: By creating May not accurately represent the final design:
wireframes, designers can quickly test and Wireframes are simplified representations of
rectify their ideas before investing clock and the final design and Crataegus laevigata does
resources in more detailed plan work. not accurately reflect the ocular design or the
final exploiter experience.
Facilitates communication: Wireframes May not be proper for all types of design:
provide a common nomenclature for Wireframing is trump proper for website and
designers, developers, and other stakeholders application design, and Crataegus oxycantha
to hash out and refine the design. not be as useful for other types of plan
projects.
Focuses on usability: Wireframes prioritize May require additional resources: Creating
serviceableness o'er visual design, ensuring wireframes may require additional resources,
that the plan is user-friendly and intuitive. such as specialised software or the time and
expertise of a devoted designer.
Allows for iterative aspect design: May be misinterpreted: Wireframes may be
Wireframes can be quickly and easily revised misinterpreted by stakeholders who are not
and refined, allowing designers to iterate on familiar with the plan process, leading to
the design until it meets the needs of the user mix-up or misunderstandings.
and the business.
Table 8 --advantages and disadvantages (the author , 2023)
Prototyping
Prototyping is the process of creating a preliminary model or try out a design to test and
evaluate its functionality and exploiter experience. Prototyping is a required part of the design
process, as it allows designers to test and rectify their ideas before investing time and
resources in more detailed plan work. Prototypes can take many other forms, from simple

wallpaper sketches to interactive integer models. The pull-down of fidelity, or how nearly the
prototype resembles the final product, wishes to vary depending on the stage of the planning
process and the goals of the prototype.
The resolution of prototyping is to test and refine the functionality, usability, and user
experience of the design. By creating prototypes, designers put up pucker feedback from
users, identify potential problems or issues, and work on iterative improvements to the design.
Prototyping is often old in conjunction with user testing, where designers follow and gather
feedback from users as they interact with the prototype. This feedback can then be used to
rectify the design and improve the user experience. (interaction-design.org ,2022)
Figure 15 -Prototyping (xd.adobe.com ,2022)

Prototyping is a critical part of the design process, but like any tool or technology, it has its
pros and cons. Some advantages and disadvantages of prototyping are compared below.
Can save time and resources: By creating May not be suitable for all types of design:
prototypes, designers can rapidly screen and Prototyping is best suited for website and
refine their ideas earlier investment time and application design, and may not be as useful
resources in more careful design work. for other types of design projects.
Increases user satisfaction: Prototyping helps May be misinterpreted: Prototypes may be
designers to create a user-friendly and self- misinterpreted by stakeholders who are not
generated design that meets the needs of the familiar with the plan process, leadership to

user. confusion or misunderstandings.
Enables user testing: Prototyping enables May want additional resources: Creating
designers to tuck feedback from users and prototypes may require extra resources, such
make iterative improvements to the design. as specialised computer software or the time
and expertise of a devoted designer.
Facilitates communication: Prototyping May not accurately represent the final
provides a common terminology for product: Prototypes are preliminary models
designers, developers, and other stakeholders or samples of the design and may not
to discuss and refine the design. accurately reflect the final examination
production or the final exploiter experience.
Table 9 --advantages and disadvantages (the author , 2023)
1.10 Methods of testing user requirements against UX-UI design.

A system's user interface and user interaction are crucial for a variety of reasons. It serves as
the interface between the person and the machine in front of him, as was previously
mentioned. Those that engage with a system may perceive it differently and draw various
conclusions since every human has a distinct way of reading and comprehending the world.
This ambiguity in software engineering may cause user confusion, degrade usability, and
lengthen a system's learning curve. Thus, it is necessary to conduct interface and interaction
tests to ensure that system users are understanding the system in the same way that
developers intended.
Methods of User Experience Testing

Testing a user's viewpoint on a product or service is known as user experience (UX) testing.
It aids in finding any usability problems, comprehending user requirements and preferences,
and enhancing general user happiness. The following list of UX testing techniques includes a
variety of approaches.
1. Moderated Usability Testing.

This involves examination the product or service with real number users to place any
usability issues. useableness testing tin be conducted in-person or remotely, and it typically
involves asking users to do specific tasks while perceptive their interactions with the product
or service. (esoft , 2023)

Figure 16 -1.Moderated Usability Testing. (testingtime.com ,2022)
Deep Insights: An admin front-end allows for Cost: Moderate usability testing requires a
deep insights into the user experience. The trained moderator, which increases the
moderator asks follow-up questions, probes undefined testing process.
for details, and gathers additional
information.
Flexibility: The moderator can adapt the Time-consuming: Moderate usability testing
screen to the needs of the participant and can be time-consuming, as it requires
respond to unexpected problems. They can scheduling and coordination with
adjust the test to accommodate changes in participants.
design or objectives.
Instant Feedback: The moderator can provide Observer Bias: The presence of the
instant feedback to the participant, which moderator can influence the participant's
enables them to sense the tax and improve behavior and responses, leading to observer
their performance. bias.
Collaboration: The moderator can work with Limited scalability: Moderate usability
the development team to prioritize issues and testing cannot scale to large-scale testing or
make design decisions based on feedback remote testing.
from testing.
Table 10 -advantages and disadvantages (javapoint.com ,2022)

2. Unmoderated Usability Testing.
This technique is used to get a lot of data from a lot of people without a clear set of guidelines
and with modest usability testing. The "Give Feedback" option, which is readily available in
many software programmes and allows any system user to provide input to the development
team, is the most widely used application of this technique.(esoft , 2023)
Figure 17 -2.Unmoderated Usability Testing. (playbookux.com ,2022)
Cost-Effective: Neutral usability testing is Limited insight: Unbiased use test Crataegus
generally less expensive than neutral testing, oxycantha supply expressed insight into user
as it does not require the presence of a experience as participants were not guided or
moderator. induced.
Time-Efficient: Neutral usability testing can Lack of real-time feedback: The unrestricted
be completed more quickly than neutral usability test does not provide participants
testing because there is no need to schedule with real-time feedback, which Crataegus
and coordinate. oxycantha makes it difficult for them to
understand and correct errors.
Large sample size: Unbiased usability testing Limited control: Unbiased usability testing
can be conducted with a large sample size, provides expressive control in the
which can provide more representative data examination environment, as the participant's
about the target user population. whitethorn performs undefined tasks in a
different linguistic context or unusually than
expected.
Table 11 advantages and disadvantages (javapoint.com ,2022)

3. Card Sorting.
Card sorting is mostly used in menu-based interface testing, where each menu item that will
be in the interface is represented by a card, and the user is asked to arrange the cards in the
order that is most important to them. This enables the system's developer to comprehend user
behaviour and improve user experience by modifying the system in light of the
findings.(esoft , 2023)
Figure 18 -3.Card Sorting. (atendesigngroup.com ,2022)
4. Testing Logic & Navigation

Testing Navigation & Logic Testing for Logic and Navigation examines the layout of various
interface components and the order in which a user is intended to interact with them. The test
focuses on whether the relevant interface components are positioned in an apparent location
or need the user to make an effort to discover them. (esoft , 2023)
Figure 19 -4.Testing Logic & Navigation (uxplanet.org ,2022)
5. Tree Testing.

Finding a particular menu item inside the system's menu hierarchy is a difficulty for the user
when using tree testing. The user is requested to find a certain card from the layout using this
technique, which is also known as reverse card sorting. Before making the interface available
to the public, it is thought that it needs additional work if the user has trouble finding a
certain card or is unable to find it. (esoft , 2023)
Figure 20 -5.Tree Testing. (optimalworkshop.com ,2022)
6. Keystroke Level Modelling.

Keystroke modelling measures how quickly users engage with various interface variations of
the same system based on the time it takes to press each key, point at various items, scroll to
a certain spot in a list, etc. To determine how to improve the interface, the time required for
each change is compared.(esoft , 2023)

Figure 21 -Keystroke Level Modelling (Zalman, 2016)
7. A/B Testing.
Users can choose between two (slight) variants of the same interface created through A/B
testing. All user types can use this strategy, and the input is used to enhance the interface's
design on both a visual and functional level.(esoft , 2023)
Figure 22 7.A/B Testing. (splitmetrics.com ,2022)
8. First-click Testing.
The "Cancel" button is typically made red, whereas the "OK" button is typically green.
Interface designers may also decide to position certain things in a certain area of the screen,
such as the bottom right or bottom left corner. First-click testing determines if the designer's
chosen technology genuinely benefits the intended user and whether the intended interface
element is successful in grabbing the user's attention. The sole need here is to provide the
location of the user's initial click before carrying out a particular action. (esoft , 2023)
Figure 23 -8.First-click Testing. (blog.optimalworkshop.com ,2022)
9. Eye-tracking.
The "Cancel" button is often red, whereas the "OK" button is typically green. Interface
designers may also decide to position certain things in a certain area of the screen, such as the
bottom right or bottom left corner. First-click testing determines whether the designer's

chosen technology genuinely affects the intended user and whether the intended interface
element successfully grabs the user's attention. The sole need here is to provide the location
of the user's initial click before carrying out a particular action. (esoft , 2023)
Figure 24 Eye-tracking.(de.ed.ac.uk ,2022)
1.11 Planning User Experience Test

Define your objectives
Determine the goal of the test. What undefined you want to achieve with this test? What are
the research questions you are fire-walking to answer?
Identify your target users

Identify the users who will be involved in the test. This includes their demographics,
experience with similar products, and any unusual relevant information that Crataegus
oxycantha affect their experience.
Choose a methodology
Decide on the type of screen you require to conduct. Common methodologies include
usability testing, A/B testing, and surveys.
Develop screen scenarios

Create scenarios that represent real-world situations that users might encounter while using
your product. These scenarios should help you to evaluate the useableness of your product
and uncover some issues or pain points.
Recruit participants

levy participants who suit your target exploiter profile. You can use online recruiting tools or
social media to find participants.
Conduct the test

Administer the screen to participants, making sure to record their feedback and behavior
during the test.
Analyse the results

Analyze the information collected during the test to identify patterns, trends, and issues. Look
for whatsoever common themes that emerged during the testing.
Report findings
Present your findings to stakeholders, including any recommendations for changes or
improvements to the product.
Remember that designing a user experience test is an iterative process. Objectives, scenarios,
and methods may need to be refined. Be open to feedback from participants and adjust the
test as needed.
1.12 Importance of creating and using different types of experiences and

interfaces in building EMC services.
A good user interface makes it simple for people to instruct computers on what to do, for
computers to request data from users, and for computers to deliver data that the computers
can comprehend. The foundation of effective UI design is clear communication between the
user and the computer. There is a plethora of knowledge available on different interface
design patterns and methodologies, fixes for typical issues, and suggestions for general usage.
As a result, building a decent user interface benefits from adhering to the recommendations
of subject-matter experts. In light of this, the qualities of a good interface are listed below.
1. Clear
The most crucial component of user interface design is clarity. User interface design's
primary goal is to make it possible for users to engage with your system by conveying its
meaning and functionality. People will become confused and upset if they can't figure out
how to use your application or where to go on your website.

2. Concise
Although the user interface is really clear, you should be careful not to over-explain anything.
It's simple to add definitions and explanations, but every time you do so, you add bulk. The
interface will expand. If you provide too many explanations, your users will have to read
them more slowly. Be succinct without sacrificing clarity. When a feature can be explained in
one sentence as opposed to three, do it. If you can label a single object with one word rather
than two, do so. By keeping things brief, you may save your users significant time. It is
difficult and requires time and work to attain clarity and concision at the same time.
3. Familiar
Many designers strive to create "intuitive" interfaces. What does intuitive imply, though? It
refers to something that is instinctively and naturally perceivable. So how do you carry out
anything logical? By 'becoming accustomed to' it, you achieve that. What is familiar is
anything that resembles another thing you have seen previously. When you are familiar with
something, you are aware of its characteristics and expectations. Find out what your users are
used to and incorporate it into your user interface.
4. Responsive
The term "responsive" has numerous meanings. Quick is the first to react. If not the
programme, at least the interface ought to operate more quickly. It can be annoying to wait
for items to load and to use sluggish, slow interfaces. The user experience is enhanced when
content loads rapidly or, at the very least, when the interface does (even if the content still
lags).
The UI is responsive if it offers some sort of commentary. To let the user know what's going
on, the interface should talk back. Has that button been successfully pressed? how do you
determine This feedback should be given via the button displaying a "pressed" state. The
button's wording may occasionally change to "Loading..." and become disabled. Is the
software loading material or is it stuck? To inform the user, play a spinning wheel or display
a progress bar.
5. Stable

I've already discussed the significance of context and how it should influence your design
choices. While I believe that an interface should be flexible enough to adjust to every
situation, there should still be some consistency. Users may create usage habits with
consistent interfaces because they will become familiar with the varied buttons, tabs, icons,
and other interface components, be able to identify them, and understand what they do in
various situations. Also, by extrapolating from their prior experiences, they will be able to
understand how certain things function and figure out how to use new features more quickly.
6. Attractive
This one can be a little debatable, but I think an appealing UI is essential. In the sense that it
makes using that interface joyful, it is attractive. Indeed, if you make your user interface (UI)
straightforward, user-friendly, effective, and responsive, it will work well; however, if you
take the further step of making it appealing, utilising that interface will be a genuinely
gratifying experience. If your programme is easy to use, your clients or employees won't just
utilise it; they'll eagerly anticipate utilising it.
Of course, there are many distinct kinds of software and websites, all created for various
consumers and markets. What is "excellent" for one audience may not be for another. This
implies that you should design your interface's appearance and feel with your audience in
mind. Aesthetics should also be employed sparingly and to support function. The difference
between polishing the interface and overstuffing it with visual candy.
7. Efficient
A user interface is a vehicle that takes you places. Those places are the different functions of
the software application or website. A good interface should allow you to perform those
functions faster and with less effort. Now, ‘efficient’ sounds like a fairly vague attribute – if
you combine all of the other things on this list, surely the interface will end up being efficient?
Almost, but not quite. What you need to do to make an interface efficient is to figure out what
exactly the user is trying to achieve, and then let them do exactly that without any fuss. You
have to identify how your application should ‘work’ – what functions does it need to have,
and what are the goals you’re trying to achieve? Implement an interface that lets people
easily accomplish what they want instead of simply implementing access to a list of features.
8. Forgiveness

No one is perfect so people will certainly make mistakes when using your program or website.
Your ability to manage such errors will be a major determinant of your program's calibration.
Build an interface that is forgiving instead of punishing the user to solve any problems that
may arise. A patient user interface helps prevent users from making costly mistakes. For
example, can someone quickly recover or delete a critical piece of information? What does a
user see when they visit a damaged or non-existent page on your website? Do they get a
confusing error message or a list of useful redirects instead? should be examined.
Accordingly, the EMC service is expected to be available anywhere in the world and on any
device. To do so, they need to provide the user with a good physical experience. For this the
work done by the keyboard, mouse and other input devices should be attractive and easy. For
example, when activating the app on the touch screen, if the button cannot be touched
correctly, it is a bad user experience. It is very important to be careful about it.
No matter the user's level of literacy, the app should be able to provide a pleasing mental
experience. A user should be able to grasp every icon, button, or other form of function in the
program from the very first time they use it. Otherwise, not all users will come into contact
with EMC.
While examining the user experience offered by EMC, care must be made to deliver a
wonderful emotional experience. The EMC user interface should be slick and modern.
Otherwise, they will leave the music app they are now using and disappear from EMC's view.
The social interaction the user has with the EMC should be enjoyable. One person's gift to
another user can be arranged to be visible to other users, for instance. created comments
interface for music albums and songs as well. Allow users to recommend music to one
another.While building interfaces, graphic user interfaces should be employed often. Every
individual may easily grasp and use graphical interfaces. The number of users will rise as she
is used more frequently. Build a menu-driven user interface that makes it simple to choose
song genres and modify the software. It is also possible to access user data, login, and process
payments using form-based interfaces. By developing a natural language interface that
enables music search by typing and vocalizing a section of a song, the program will become
more appealing.

1.13 Characteristics of a good interface
User-centered
A good interface is designed with the user in mind. It should be intuitive and easy to navigate,
with features and functions that are logically organized and tagged in a way that makes sense
to the user.
Consistency
A good interface is consistent in its design and behavior. This substance that buttons, menus,
and other elements should search and behave the same room throughout the interface,
providing a predictable and seamless experience for the user.
Clarity
A good user interface should be clear and unambiguous. Users should
be capable to well understand what each element does and how to use it.
Responsiveness
A good user interface responds quickly to exploiter actions, providing immediate feedback
and minimizing the amount of clock that the user has to wait.
Flexibility
A good interface should be flexible, allowing users to customize the interface to their needs
and preferences. This could include things like font size, color scheme, or the power to
rearrange elements.
Accessibility
A good user interface should be accessible to all users, including those with disabilities. This
means that it should be premeditated with accessibility in mind, with features wish senior
high undefined modes, test subscriber compatibility, and keyboard shortcuts.
Aesthetically pleasing
A good interface should be esthetically pleasing, with a clean and attractive design that is
consistent with the brand personal identity and overall tone of the product.

2.1 Review different end users of EMC using user categorizations, classifications and
behavior modelling techniques and select a specific end user from those identified.
Appraise and develop user ‘Persona’ for the identified user. Present your empathy map,
experience map and customer journey map.
2.1 End-user
The end user is the person who ultimately uses a product or service. They are the intended
audience and target of the product or service. terminate users can be individuals or
organizations, depending on the nature of the production or service. In software development,
the end exploiter is the soul who interacts with the software application, such as a website or
mobile app. The terminate user can straddle from a unplanned user who only of
necessity basic functionality to a power exploiter who requires more advanced features and
customization.
It is large for product designers and developers to sympathize the needs, preferences, and
behavior of end users in order to create a production that meets their needs and provides a
positive user experience. This can be achieved through exploiter research and testing, which
involves gathering feedback from end users throughout the undefined process to ensure that
the product is merging their needs and expectations. (investopedia.com ,2022)
Casual End Users

These are the users that infrequently use the database, but each time they do, they need a
distinct set of data. They essentially define their request using a sophisticated database query
language, and they are often middle or level managers or other infrequent browsers. Among
the numerous capabilities offered by DBMS to access it, these users only learn a small
number of facilities that they may use regularly.
Naive or parametric end users

In essence, a sizable fraction of the database end consumers are made up of these people. The
primary job function simply is continuously searching and updating the database. To do this,
we basically employ a pre-programmed and verified common form of query known as a
canned transaction. These users mostly need to comprehend the user interfaces of the

standard transaction created and implemented for their usage rather than the features offered
by the DBMS. Naive end users primarily carry out the following tasks:
 The employee of the bank will essentially inform us of the account balance, post-
withdrawals, and deposits.
 In order to make a reservation, reservation agents for airlines, trains, hotels, and car
rental agencies essentially verify the availability for a specific request.
 To update a central database of received and in-transit items, clerks who operate at the
receiving end for shipping businesses enter the package identified by barcodes and
descriptive information through buttons.
Sophisticated end users

These users mostly consist of engineers, scientists, business analysts, and other professionals
who extensively educate themselves with the DBMS's features before implementing their
application to satisfy their intricate needs. To fulfil their sophisticated requirements, these
users attempt to become proficient in the majority of DBMS features.
Standalone users
A user of a tax package, which essentially keeps a range of personal financial data for tax
purposes, is an example of a user whose job it is to maintain personal databases using a
ready-made software package that offers simple to use menu-based or graphics-based
interfaces. These users excel in using a particular piece of software.
User Requirement
Music producer Any time can register
Search music tracks, albums, and others
Should be filtered music tracks, albums and others
Music Purchaser Log in to the system
Search music tracks, albums and others
Save music tracks, albums and others
Need to add, remove or update user details.
Pay online
System administrator Login the system.

Add/delete/update their items
Add/delete/update users
Modify or adjust home page elements such as text, images.
Table 12 -system requirements (the author ,2023)
Two types of end users can be identified in EMC. Accordingly, the following are the types of
users. Apart from this, a system administrator has also been added to this system.
1. Music Buyer
With the program, people make purchases here. As a result, there can be users with various
musical preferences. For instance, some people could enjoy rap music, new songs, old songs,
traditional music, or western music. The vocalists who get along with one another, the music
producers, the music productions, and the purchasing power are all different as a result.
While one group like music, another group dislikes it. While one group like music, another
group dislikes it. As a result, every person may have distinct tastes. Also, they should always
be aware of new tunes they like to keep themselves entertained. They are always looking for
other similar software in the market and will leave EMC if they fail to provide a good
experience. Of these, computer literacy can be varied and minimal.
2. Music producer
They offer the software's sales tool. Music producers come in a variety of forms. Their
audience may be distinct. Their level of musical talent and sales potential influence their level
of popularity. They consistently demand a decent return on their labour. They always provide
their services to the software, which is used by a lot of people. Computer literacy is one of
these and can be low or variable.
3. System administrator
They carry out system administration and try to solve the problems and needs of other end
users. They work to achieve the goals of the company. They also have high computer literacy.
Apart from this, problems arising from the use of the system are also solved.
2.2 Behavioral modeling techniques.

Model-driven architecture (MDA) and other model-driven techniques support paradigm shifts
in software development and the importance of modelling. Moreover, these supporters
support the application of model-driven techniques. Last but not least, the goal is to fully

automate the software development process by making use of these models. The usage of
completely automated code generation from models is limited to a few specific application
domains since it is still seen as ludicrous in current times. The lack of appropriate models and
techniques for combining models to describe the behaviour of the system is one of the biggest
obstacles.
The increased emphasis given to behavioural modelling is a result of the research
community's recognition that its concepts differ from those of programming. It is frequently
important to simulate a range of behaviours when modelling a complex system, including
activity inside the system itself, contact with the environment, and cooperation between
system components. In order to nurture them in a number of various ways, many model
forms are often required. (1000sourcecodes, 2022). The behavior modeling technique
contains the following aspects.
1. Sequence diagrams
A sequence diagram is a UML diagram used to model the interactions between objects in a
system. They typically represent left-to-right message flow and calls that act 'tween objects
o'er time'.
2. Activity diagrams
Activity diagrams are UML diagrams used to model the flow of activities or actions within a
system or process. They graphically represent the various steps, decisions, and outcomes of a
process, with shapes representing the actions, decisions, and transitions between them.
3. State diagrams
State diagrams are UML diagrams used to model the behavior of objects over time, depicting
the various states an object can exist in and the transitions between those states. They provide
a visual representation of an object's states and transitions, making it easier to understand and
communicate the object's behavior.
4. Collaborative diagrams
Collaboration diagrams, also known as communication diagrams, are UML diagrams used to
model interactions between objects in a system or process. They provide a visual
representation of the objects involved in a particular interaction as well as the messages
exchanged between them.
Protocol analysis

Communication protocol analysis is a method of analyzing and understanding undefined
protocols used in computer networks and heterogeneous systems. It involves examining the
social organization and content of messages exchanged between different entities in the
system, as well as the rules and procedures that govern their interactions.
Protocol depth psychology can be used for a variety of purposes, including debugging
network problems, designing new protocols or systems, and finding security vulnerabilities. It
is particularly useful for diagnosing problems related to timing, synchronization, and flow
control, as well as for understanding the behavior of complex systems with quadratic
interacting components. (sciencedirect.com ,2022)
Cognitive modeling
It is a branch of computer science that focuses on creating computerised representations of
human thought processes and problem-solving techniques. In order to improve human-
computer interaction, this type of model can be used to mimic or predict human behaviour or
performance on tasks that are similar to the tasks that are being modelled.
(sciencedirect.com ,2022)
Communicability evaluation method

Users are taught the basic ideas behind the software's design and how to interact with it
through the software's communication skills, an efficient and effective feature. The purpose
of the communication skills evaluation method is to educate designers on how users receive
intended messages through the interface and how to identify communication problems that
may arise during the interaction. This strategy can be divided into three distinct phases, and
each of these phases can be carried out by a different set of people. or groups (users,
designers, HCI experts, and quasi-scientific engineering experts). It provides a wide range of
interaction representations, each of which, in addition to facilitating communication between
designers and users (intentionally or unintentionally), is able to communicate information
about interaction patterns between users and systems. (sciencedirect.com ,2022)
2.3 Persona and Persona classification

Persona are made-up characters that you develop based on research to reflect the many user
types who could utilise your service, product, website, or brand in a similar way. Persona

development aids the designer in comprehending the requirements, experiences, behaviours,
and objectives of users.
A user persona is a fictional representation of your ideal customer. As a UX designer, you

will start the design process by conducting user research—building empathy with your target
users and identifying exactly what they need from the product you are designing. A persona
is generally based on user research and incorporates the needs, goals, and observed behavior
patterns of your target audience.
Accordingly, persona in User experience design represents a group of users who would have
a similar engagement with the system. In other terms, a persona can be somewhat named as a
“specific user role” who would interact with the system in the real world. Persona answers
the question “Who do we design for?” It is a powerful tool based on research findings in
helping product function creation by optimizing the UX research and it not only represents a
specific user but all of them, it can be understood as a typical character of the behavior,
attitude, skills, and contexts of all potential users. (Interaction-design.org/, 2021)
Advantages of persona
• Stakeholders and decision-makers assess new site feature concepts.
• Wireframes, interface behaviours, and labelling are all developed by information architects.
• Designers are in charge of the website overall design and feel.
• Based on user behavior, system engineers/developers select which techniques to undertake.
• Copywriters make ensuring that the information on the site is written for the right people.
2.4 The classification of Persona
 Marketing Persona
Typical characteristics of the customers of a product or a company, have similarities in
buying preference, social relations, mode of consumption, and ages. Personas help the
company determine how its customers will behave and what they will be interested in.
 Proto-Persona
They are based on secondary research (data previously gathered by someone else for another
reason) and the team's educated estimate as to who they should be built for and are used when
there is not enough money or time to construct actual research-based personas. Proto
personas are only used as a "last resort" since they lack the design personas' precision.

 Design Persona
Refer to the representatives of customers who have similar use patterns, product
specifications, tastes, and objectives. They can outline the requirements of possible customers,
assist developers in refocusing on consumers during the function design process, and help
designers produce products that adhere to user requirements. It takes a lot of work to create a
user persona, as previously said. Design flaws and deficiencies frequently result in less
usability, more confusion, and decreased productivity.
2.5 Creating a Persona

Know the Users
Interface design should be more about the user. That is, to understand the user, data related to
each user must be collected. That is
• who are they?
• Why do they want to use the system?
• What do they want to gain from using it?
Accordingly, the main areas considered in data collection (with respect to each user) include:
This makes it easy to identify who the user is. By correctly identifying the user, the user can
be matched accordingly.
Identify common factors

This phase involves identifying similarities between different users and putting them into
groups based on the identified similarities. That is, from a group of users, the similarities and
dissimilarities of those users should be identified. It can lead to a final conclusion.
Choose significant people
Out of the groupings mentioned above, determine the most important user groups. Head
Cashier, Cashier, and Assistant cashier, for instance, may be recognized as positions with
various interaction needs when categorizing user groups. The system will become difficult
and more expensive to design and maintain if there are too many personas. As a result, all
cashiers may be combined into the persona of the cashier, which includes all of the cashier's
responsibilities.
Establish a Persona as a real person

Establish the selected user persona and give the persona a name. Produce descriptions of the
defined persona describing the character, likes, wants needs, and behaviors, just as of a real
individual.
Build interfaces/interactions to suit the individual
Build the interface or interaction to meet the needs of the personas based on their individual
identities. Test the interface that is related to the persona and improve its aesthetic appeal and
functionality.
2.6 Elements of a Persona

In user experience design, a persona is a fictional character that represents a particular group
of users or customers. A well-developed persona can serve companies and help designers
understand the needs, behaviors and motivations of their target audience. Individuals
typically include the following key information.
Demographics:
This includes basic information about the individual such as age, gender, location,
education dismantle and occupation.
Personality:
This describes the characteristics, values and attitudes of the individual. For example, a
person may be outgoing, sporting and environmentally friendly.
Goals and Motivations:

Describes what this soul is disagreeable to reach and why. Understanding a person's goals
and motivations helps designers create products and services that meet their needs.
Pain Points and Challenges:

This describes the problems or obstacles the person faces when stressful to achieve their
goals. Understanding an individual's pain points and challenges helps designers create
solutions that address their needs.
Behavior Patterns:

This describes the superior general behavior of the individual when interacting with products
or services. For example, a person may favour to sponsor online rather than in-store, or be
more likely to use a mobile device than a desktop computer.
User Journey:
This describes the steps a person takes to achieve their goals, from discovering
a production or service to buying or using it. sympathy the user travel helps designers create a
seamless user experience.
By considering these elements, designers can create personas that accurately reflect
their poin audience and design products or services that meet their needs. Personas help
designers make hip plan decisions and create products that are user-friendly, intuitive, and
effective.
2.7 The music buyer persona
Figure 25 -The music buyer persona (the author ,2023)
2.8 Empathy Map

Empathic representation is a tool used in design thinking to understand and empathize with
the end user or customer. It is a visual framework that helps capture insights and develop a
deeper understanding of people's experiences, behaviors and emotions. The undefined
representation is typically a four-part double lane. (interaction-design.org , 2022)

"Says": This section captures what the person is saying, including quotes and expressions.
Take note of the user's particular statements as well as any unique words or phrases that
immediately strike you as having a deeper significance. As a result, the material in this part is
about what the user has to say about the product. The ideal content for this area would be
actual user quotes. recorded during user testing or interview sessions.
"Thinks": This section captures what someone thinks, including their beliefs and attitudes.
Thoughts & Beliefs: The user-stated statements that begin with "I think" or "I believe" should
be found in this quadrant. You could additionally record other ideas and convictions that the
user may not have expressed clearly but that can be deduced from what they said. As a result,
the material in this part is about - What troubles the user. What causes the user to get
enthusiastic? What impressions does the user have of the encounter?
“Feelings”: This section captures what the person feels, including their feelings and moods.
Capture the emotions and feelings the user displayed or spoke. Capturing specific
experienced feelings and emotions will also be helpful here. You can capture other emotions
and feelings that you infer from the actions and behaviors you observe. Accordingly, this
section contains the information – What actions does the user take? What actions and
behaviors did you notice?
“Does”: This section captures what the individual does, including actions and behaviors.
Capture the things you observed the user (or group of users) doing. Writing specific details or
even drawing diagrams can be helpful here. Accordingly, this section contains the
information – what does the user think when interacting with the product? What captures the
user's thoughts? What is important to the user?
By filling out each of these sections, the Empathy represent can help designers and
researchers develop a meliorate understanding of the user or customer, their needs, and
their hurt points. This understanding can then be used to design products and services that
meet their necessarily and improve their experiences. (interaction-design.org , 2022)

2.9 Empathy map EMC user
Figure 26 -Empathy map EMC user (the author ,2022)
2.10 Experience Map
A user experience map is a method of visualizing the complete end-to-end user experience
that a typical user goes through to achieve a goal. It is product- and service-agnostic, so it is
used to understand general human behavior in a larger context. It helps an organization
visualize a basic understanding of an experience before considering a product or service. A
visual representation of a customer's journey with a product or service, with particular focus
on user interface and user experience. It captures the various touchpoints and emotions a
customer encounters while interacting with the product or service, paying particular attention
to the visual design and usability of the interface. (questionpro.com ,2022)
A experience map typically includes the following elements
User Persona:
A fictional theatrical of the ideal customer based on undefined and behavioural data.
Journey Stages:

The different stages of the customer's journey, from awareness to loyalty, and the checkpoints
they encounter along the way.
Emotions:
The emotions and attitudes the customer experiences at each touchpoint, so such as
frustration, joy, confusion or satisfaction.
Pain Points:
Challenges or obstacles the client faces in their journey, such as difficulty finding a specific
feature or slow load times.
Opportunities:
Potency areas for improvements or improvements, such as adding new features or
simplifying the exploiter interface.
Design Elements:
Ocular plan and user user interface elements that influence the customer's experience, such as
color scheme, typography, icons, buttons, and layout.
Business Goals:
Business objectives and metrics tied to the customer journey, so much as user engagement,
retention, or revenue.
By creating a UIUX see map, production designers and developers can gain a deeper
understanding of their customers' needs and pain points, and use that information to improve
exploiter go through and business growth.

2.11 Experience map EMC user
Awareness Log Search Re-view Purchase Listening Share
Go the Log in Search View Purchase Listening Comment

Doing Know about the EMC the new Description new song song and Rate
new song song and Comments, Share ,
artists feedback other
and other
I like to Faster I can I want to Rent or Cool , I want to

Thinking Listening log and find details about Purchase nice, share this
This song help me song I the song song Song my
to find want to social
song search media
faster platform
Curios Exited Restless Curios , Hesitatio Relax , Connecte
Feeling Unsaturatede n boot and d
Love involved
Experience
Table 13 - Experience map EMC user (the author ,2022)
2.12 Customer journey Map
A customer journey map is a visual representation of the customer journey (also known as the
buyer journey or user journey). It helps you tell the story of your customer's experience with
your brand across all touch points. Whether your customers interact with you through social
Whether it's media, email, live chat, or other channels, visually mapping the customer
journey can help ensure the customer doesn't slip through the cracks. This process helps B2B
business leaders gain insight into common customer pain points, allowing them to better
optimize and personalize the customer experience. (visual-paradigm.com ,2022)

The work of creating a client journey map for UI/UX design typically involves the following
steps:
Define exploiter personas: Start by characteristic your normal users and create a
detailed visibility for from each one of them. This includes their demographics, interests, and
pain points.
Identify the user journey stages: Break pop the user journey into unusual stages, such as
awareness, consideration, on boarding, usage, and support.
Map come out of the closet the user touch points: place all the touch points where users
interact with your product or service, including website, mobile app, social media, email,
customer support, and sales channels.
Gather user feedback: Conduct exploiter testing or surveys to pucker feedback on their
experiences at each touch point.
Analyse the data: Use the information collected to identify pain points and areas for
improvement.
Create the journey map: Visualize the user travel in a way that highlights pain points and
opportunities for improvement. This could be in the take form of a flowchart, time line, or
other ocular representation.
Implement changes: utilize the insights gained from the customer journey map to make
improvements to the exploiter experience. This could involve redesigning certain touch
points, adding new features, or simplifying the overall user flow.
Customer travel maps are an necessary tool for UI/UX designers as they help to create a
User-centered design that meets exploiter inevitably and expectations. By following these
steps, designers can create a travel map that provides a comprehensive understanding of
the exploiter experience and identifies opportunities for improvement.

Mapping the customer journey has a host of benefits such as
Improving customer experience:
Mapping the customer journey can serve organizations to improve the customer experience
by identifying opportunities to create more personalized and engaging interactions with
customers.
Increasing customer loyalty:

A formal customer journey can lead to increased loyalty, repeat business, and word-of-mouth
referrals.
Enhancing marketing effectiveness:

By understanding the customer journey, businesses can create targeted marketing campaigns
that address specific needs at each present of the journey.
Increasing sales:
By up the customer experience, businesses can step-up the likeliness of customers making a
purchase and improve changeover rates.
Streamlining operations:
By identifying areas of inefficiency or customer frustration, businesses put up streamline
operations and tighten costs.
Informing product development:

By sympathy customer needs and preferences, businesses can educate products that better
meet client expectations.
Internal Team Alignment:

Customer journey mapping helps align internal teams such as marketing, sales and customer
support around a common understanding of the customer experience. This can improve
collaboration and communication between teams, leading to more effective customer
engagement.
Overall, customer journey mapping is a valuable tool for empathy and optimizing the
customer experience, which can lead to inflated customer satisfaction, loyalty and retention.

2.13 Customer Journey Map for EMC
Figure 27 -8.1Customer Journey Map for EMC (the author ,2023)
Advantages and Disadvantages of Customer Journey Mapping
Better understanding of customers: Customer Time-consuming: Creating a customer
journey maps provide a visual representation journey can be a time-consuming process,
of the customer experience that can help especially if the organization has an
organizations better understand their undefined customer experience.
customers' needs, preferences, and behaviors.
Improved customer experience: Customer Cost: Depending on the resources and
journey maps identify pain points and areas expertise required, creating a customer
to improve customer experience, which can journey map is expensive.
lead to changes that improve customer
satisfaction and loyalty.
Increase customer retention: By identifying Subjectivity: Customer journey maps are
areas where customers may become subjective as they rely on the assumptions
confused, organizations can come up with and insights of the people creating the map.
measures to prevent confusion and retain
more customers.
Improved customer acquisition: Customer Incomplete picture: Customer journey maps
journey maps can identify the most effective may not define the full complexity of the

channels for acquiring new customers and the customer experience because they are limited
types of messaging that resonate with by available data and insights.
potential customers.
Cross-functional team alignment: Customer Lack of action: Customer journey mapping
journey maps help align internal teams like can become a passive exercise if
marketing, sales, and customer support organizations fail to use the insights
around a greener understanding of the generated to make changes to the customer
customer experience. experience.
2.14 Service blueprint

A service blueprint is a diagram that visualizes the relationships between various service
components—people, props (physical or digital evidence), and processes—that are directly
tied to the touch points of a specific customer journey. Think of the service plan as the second
part of customer journey maps. Similar to customer journey maps, blueprints help with
complex scenarios that span many service-related offerings. Blueprinting is an ideal approach
for multichannel experiences, involving multiple touch points, or requiring a cross-functional
effort. (Nngroup.com, 2021) A service plan is always built from the client's perspective. A
typical service plan includes the following information:
1. Customer Behavior: The ways in which consumers behave while taking part in the
provision of services.
2. Actions made by contact workers during a face-to-face service interaction are known as
front-stage (face-to-face) actions.
3. Following (Invisible Connection Worker) Actions: Your company's data may be at
danger as a result of your remote employees. Working from home can result in identity
theft, data breaches, and many other undesirable outcomes.
4. Support processes: Personnel who conduct tasks necessary to provide the service but do
not interface with other personnel.
5. Physical Proof: Objects connected to each stage that may have an impact on how
customers perceive the service, such as uniforms and delivery vehicles Inventories (if
necessary): How much inventory has to be built up for each step.
6. Line of Visibility: Forward stage and back stage actions are separated by this line

Benefits or Uses of Service Blueprint
A blueprint makes it easier to comprehend the entire service as a process. It offers a visual
representation of the services. By showing how an existing system functions, the service
system blueprint reduces the complexity of providing services. Here are some explanations of
how service blueprinting has advantages. A blueprint makes it easier to comprehend the
entire service as a process. It offers a visual representation of the services. By showing how
an existing system functions, the service system blueprint reduces the complexity of
providing services. Here are some explanations of how service blueprinting has advantages.
You may manage service in a number of ways with the use of a blueprint. A blueprint can be
used to change or develop the design of an existing service. When the current operation is
explicit, managers are aware of how they will conduct themselves in the future. The service
system's blueprint is task-oriented. It clarifies the organization's objective and makes the
business competitive. It completes the task in a way that attracts customers to the business.
(Accountlearning.com, 2022)
Managers of service units frequently use blueprints to aid in their decision-making processes.
Decisions are made on the selection of the best strategy, the distribution of resources, the
fusion of service functions, and the assessment of performance with the use of service
blueprints.
The extensive service plan might be useful to those in marketing and communications.
Marketing managers frequently utilise a template to assist them identify the elements that are
most crucial to customer satisfaction while doing consumer research. They are used by
communication managers when creating consumer goods to communicate behaviours that are
hidden.
Human resource managers utilise service blueprints for creating job descriptions, job
requirements, job evaluations, performance standards, training and appraisal plans, and pay
structures.
Blueprinting encourages employees to maintain a focus on providing excellent service to
customers.
It makes it easier to identify any weak links in the chain of service activities and assists in the
ongoing improvement of quality.

Key action areas in the plan are delineated by horizontal lines. The direct interaction that
takes place between the company and the client is represented by one of these lines, which is
termed the line of interaction. It clarifies the part that the client performs and highlights the
circumstances in which they have positive experiences.
The line of visibility firmly separates the processing that takes place in the back office from
the front office operations, where clients may see concrete proof of the service. Line of
visibility therefore determines what the consumer should see as well as which staff will deal
with the customer directly.
The service blueprint's through-line of internal interaction makes it easy to clarify interfaces
across departmental boundaries. As a result, continual quality improvement is strengthened.
The service's components and relationships are clarified by the blueprint, which facilitates
more successful strategic discussions between the staff who deliver the service and its
customers.
2.15 Service blueprint of EMC
Figure 28 -Service blueprint of EMC (the author ,2023)

2.2 Apply a relevant development methodology to develop interaction / interface for the
Persona developed in 2.1 and devise a plan to test User Interface Design methodology
and tools selected against end user requirements. Justify your selection.
The interaction between people and the technology they employ is the primary focus of
interaction design, which is a subfield of user experience design. (geekforgeek, 2022)
Although it is founded on the theory, practice, and methodology of traditional user interface
design, interaction design's primary focus is on defining the complex dialogues that take
place between people and interactive devices of various types. These devices can be anything
from computers to mobile communications devices to appliances. Interaction design
describes not only the structures and behaviors of interactive products and services but also
the interactions that users have with those products and services. In addition, a good interface
design effectively communicates a system's interactivity and functionality, entails behaviors
that express a system's responses to user inputs, elucidates both simple and complex work
flows, alerts users to changes in the system state, and mitigates the possibility of user error.
Understanding the goals, tasks, experiences, needs, and desires of real-world users is the
foundation of interaction design. This design discipline also seeks to strike a balance between
these requirements and the commercial goals and technological capabilities of the
organization.
Creating an effective user interface on time and within budget is one of the most common
challenges faced by software development projects. This is mainly due to, but
While there are generic software development methodologies designed to assist developers in
meeting budgets and schedules, there are no components to guide interaction developers to
achieve such benefits. This is the main reason for this. Rational user-centered design
methodology, measuring system usability in context, and participatory design are three
current approaches to UI/UX development. They do, and they,
Measuring System Usability in Context (MUSIC)

The examination of a system's adaptability to its surroundings. In addition to emphasising
User-centered design, the MUSIC framework also offers a strong analytic foundation for
software development activities. The name of this framework is MUSIC. The MUSIC
framework offers a procedure for programmers to adhere to in order to ensure that a project's

usability objectives are met. In addition, rather than being used as a comprehensive technique
of development, music is typically used as a diagnostic tool. (Europe, 2022)
Participatory Design (PD)

The participatory design acknowledges common people as valid stakeholders with the
potential to influence a project. These participants can range from consumers who are directly
impacted by the design to proprietors of nearby businesses who may be in the design's
periphery of effect. Their degree of participation might range from just keeping tabs on a
project's progress to actively participating in decision-making by taking on a variety of tasks
and duties. It's true that there are circumstances where knowledge is necessary, but in my
opinion, genuine impact is more frequently attained when we try to consciously raise a
person's potential for engagement at higher levels.(Science Direct, 2021)
Logical User-centered design methodology (LUCID)

To describe Genetics Corporation's approach to interface design, the term LUCID (Logical
User Centered Interaction Design) was born. When it comes to designing a user interface, it
has evolved into a framework that can at least encourage software usability. Its goals are,
1. To provide UI designers a framework to use best practises inside.
2. To make it possible for design and usability activities to be seamlessly integrated into
software
3. Development techniques
4. To promote an interface design strategy that puts users first
5. To make the resulting programme more usable
Several approaches have been created during the past thirty years for organising and
describing software development projects. These approaches do not directly address usability
difficulties, despite the fact that they have been effective in assisting significant software
development projects accomplish their goals for time, money, and quality. The technique of
software development has to be broadened to incorporate user interface design since the vast
majority of systems being produced today are interactive. The LUCID framework was
conceived and developed in answer to this need. It is a process for creating a software
product's interactive elements, commonly referred to as the "front-end." The LUCID
framework has the potential to be integrated with other software engineering methodologies,

or it can be used as a stand-alone methodology for less extensive product development
projects. Accordingly, the LUCID methodology has six stages. Below are the six methods.
1. Imagine
This is the common understanding when the Develop product concept is mentioned. Envision
is making significant efforts to create a simple and comprehensible user interface for the
system, which is due to be live very shortly. This will serve as a blueprint for the system's
architecture as well as instructions for how to use it.
2. Analyze
Research and requirement analysis will be done in this area. A variety of evaluations of users
and their job requirements are looked into to discover what the user needs. These assessments
entail keeping an eye on the user's preferences, objectives, and methods. The gathering of the
relevant user data and the creation of a persona are the initial steps in the development
process. The building of a customer journey map and an experience map comes next.
3. Design
The key interfaces of the system are demonstrated by the prototypes, which are created. The
next prototype could go through several iterations, exactly like a pencil prototype would,
which is what most people mean when they refer to sketching. The wireframe is used to
continue this, and the visual design completes the process.
4. Refine
Following the creation of the prototype, the completed design may be implemented in order
to satisfy the client's requirements. More research can be based on the results of this study.
5. Turn on
At this point the software will end.
6. Support
The buyer receives the finished product. Customers are provided with help and training
throughout this period so they can completely comprehend the system. You can take part in
the installation procedure and feedback sessions at this phase.
More commonly than any of the aforementioned user interface and interaction design
approaches, LUCID is the user interface and interaction design method used to create user
interfaces and interactions. Because the LUCID approach streamlines the whole software
development life cycle process and makes it easier for designers to better manage their
budget and schedule for creating user interfaces and interactions, user experience designers

like it. Since it helps them to more effectively manage their budget and schedule for creating
user interfaces and interactions, user experience designers prefer the LUCID approach.
The LUCID approach can be helpful in the process of establishing a project's goals, business
overview, structure of the system that will be constructed, users of the system and their
objectives, among other things. The LUCID approach greatly simplifies the Software
Development Life Cycle's data collecting and analysis phases.
Leveraging the LUCID methodology will enable the EMC Music Platform to successfully
achieve its goals and objectives. According to the LUCID methodology, EMC has done its
steps as follows.
Imagine
Together with its mission, this statement contains EMC's vision, which is described below:
The company's long-term objective is to become the leading provider of internet music in Sri
Lanka. Provide a seamless user experience for finding and enjoying music that "beats with
you and your heart, regardless of who you are, where you are, or what device you use,"
according to the mission statement. Making it feasible for people to interact with and locate
music that speaks to them is the aim of this project. Apart from this, it includes details of
various identities discussed earlier in the study.
Analyze
A number of maps, including an empathy map, customer journey map, experience map, and
service blueprint, were created for the EMC music platform after several sorts of personas
were researched.
Design
For EMC, wireframes and drawings were made in order to understand the viewpoint of the
consumer.
2.16 User interfaces (Hand-drawn and Wireframes )

In contrast to utilising digital tools, hand-drawn user interfaces (UI) are a style of user
interface design where the design components are sketched or drawn by hand. The terms
"sketchy" or "scribble" design are also occasionally used to describe this method.

Early in the design process, hand-drawn UI designs are frequently utilised to swiftly explore
several concepts and present them to stakeholders. They can be produced quickly and simply
without the need for specialist software or technological know-how, making them suitable for
brainstorming and ideation as well.
Wireframes are a visual representation of the layout and structure of a website or application.
They are usually created early in the design process, before any visual design or branding is
applied.
Wireframes can be created using a variety of tools, from pen and paper to specialized
software. They usually consist of simple black and white outlines and boxes that represent
different content elements and features of the website or app. They may also include place
holder text and images to give an idea of the content to be included. Accordingly, the
following are the interfaces created by the author for EMC software.
Login From
The EMC application is described in this case as a multi-user application. Consequently, the
login page design for the system must verify the user role in addition to providing access to
the system by verifying the user's email address and password. Apart from this, the entry type
(User and Publisher) should also be entered. With this user authentication system, ensure the
system is secure.
Figure 29 -login page (the author ,2023)

Thus following are the wireframes created by the author. Accordingly, the login page will
appear first. Here the user name, login type and password are entered and the system is
prepared.
LOGIN TYPE
1 USER
2 PUBLISHER
Figure 30 -Wireframes (the author,2023)
Sing up form
If a user wants to create a new account on the EMC application, that user must fill out this
form and create a new application. Users can register for an account on this platform using
their The system also has the facility to log in with existing Google, Facebook, or Twitter
credentials.
Figure 31 -signup page (the author ,2023)

Here below are the wireframes prepared by the author for a new user to enter the system.
Here the system can be entered by entering the user's personal information and his bank
account information.
Presonal
Bank
Details
Details

Home page form (user)
This is the home page, the user navigates to this system when the user (listener) logs into the
system using the correct password. It shows every aspect of the app like newly released songs,
playlists, recently played songs, your music, and search bar, mobile app link. You can access
this page even after registering for a period of 3 months. After that time the session expires
and the message returns to pay. Then you can pay by card through it. If you don't pay, you
won't be able to log in again. Apart from this, the user can download songs by paying money.
Figure 33 home page1 (the author ,2023)

After the user enters the system correctly, the next page that appears is the Home page. Here,
the author has created wireframes in a way that is convenient for the user, and accordingly,
the wireframes are shown below.
Figure 34 --Wireframes (the author,2023)
Albuams Form (user)

Here the user can see a list of songs Albums. Here the songs are categorized differently. This
allows the user to easily select the desired song list.
Figure 35 Albuams Form (the author ,2023)

User can visit this page to select song album. Here the user can see various songs album.
Accordingly, the following are the related Wireframes.
Figure 36 Albuams Form (the author ,2023)
Artists Form (user)

Here the user can open the I page to find the author of the song. There, by clicking on the
author of the song, all the songs related to him will appear.
Figure 37 Artists Form (the author ,2023)

This page has been created for the user to find a song through an author. Here, by removing
the author, the songs related to the author will appear.
Buy Song Page (user)

Here the user can download the songs he wants. That is, the author can easily find the song
by providing the name of the song and the name of the author. Then the user can download
the song by making the payment.
Figure 39 -Buy Song Page (the author ,2023)

Here the user can use this page to buy a song. That is, without the corresponding song, the
song can be purchased by borrowing the corresponding money. Accordingly, the following
are the wireframes created by the author.
Download song form (user)

Here the songs downloaded by the user will appear here. By that, the user can get the songs
easily.
Figure 41 Download song form (the author ,2023)

Here the songs purchased by the user are displayed on this page. Here the author has
designed it in such a way that the user can handle it easily. Accordingly, the following are the
wireframes created by the author.
Home page form (Publisher)

Accordingly, the following is the interface that will appear after the publisher has entered the
system correctly. Here the publisher has the ability to publish his songs and earn money from
the published songs.
Figure 43 Home page form (the author ,2023)

Here also the author has created several interfaces for the song publisher. Accordingly, the
following is a publisher interface designed by the author.
My song Page (Publisher)

Here the songs published by the song publisher are stored here. Here, how many songs have
been published and changes are made through this interface.
Figure 45 My song Page (the author ,2023)

Here, the publisher can see his songs after publishing them on this page. There, the author
can also make changes to these songs. Accordingly, the following are the wireframes created
by the author.
Reports Pages (Publisher)

Here the daily and monthly reports of the publisher by the author are shown on this page.
That is, the publisher's income and responses are here. Accordingly, the following is the
interface.
Figure 47 Reports Pages(the author ,2023)

This page can be used by the publisher to monitor the publisher's daily and monthly income.
Accordingly, the following is the interface created by the author.
Figure 48 -Reports Pages (the author ,2023)
Wallet Page (Publisher)

Here the author has created a page for the publisher's income. This interface has been
designed by the author to receive the income of the underwriter and the bank.
Figure 49 Wallet Page(the author ,2023)

The author has designed this interface in such a way that the viewer can easily handle it. Thus,
the insurer can easily get the money to the bank. Below are the wireframes created by the
author.
Figure 50 -Wallet Page(the author ,2023)
My Account (Publisher)
This page displays the details of the insurer's account. That is, the author's personal details
and bank details are for this. In addition to this, the author's information can also be changed
through this page.
Figure 51 My Account(the author ,2023)

Upload Song Page (Publisher)
The publisher can use this page to publish a new song. Accordingly, the author has prepared
this page in such a way that the publisher can easily navigate. Accordingly, the publisher can
also create a new album.
Figure 52 Upload Song Page(the author ,2023)
These interfaces are designed by the author using wireframes. Accordingly, the following is
the interface created by the author.
Figure 53 -Upload Song Page (the author ,2023)

2.17 Alpha version of the prototypes of EMC application
The early stages of software development, when the product is neither feature-complete nor
reliable enough for public usage, are often referred to as the "Alpha version" stage. The
software is often made available to a select set of developers or testers for internal testing and
bug fixes during the Alpha phase. This stage is essential for finding and resolving significant
problems and making sure the programme is progressing in the proper direction.
A broader set of users outside the development team test the programme during the Beta
phase, which follows the Alpha phase. The programme is normally deemed suitable for
public release once it has successfully completed the Beta phase. All the interfaces created by
the author are for testing. Some of those referenced interfaces are listed below. Accordingly,
the following are some interfaces created by the author for EMC. (guru99.com , 2023)
Login Page
The author has created a login page to enter the system. Here you can enter the system by
providing username, login type and password. Thus the following is the interface designed by
the author.
Figure 54 -login page (the author, 2023)

Sing up Page
Here the author has prepared this page to create a new account. That is, by providing personal
information and bank account details, you can successfully create an account. Accordingly,
the following is the interface created by the author.
Figure 55 -Sing up Page (the author ,2023)
Home Page (User)

Below is the user interface created by the author.
Figure 56 -Home Page (The author ,2023)

Album Page (User)
Below is the user interface created by the author. This is designed to prepare song albums.
Artists Page (User)

Below is the user interface created by the author. This page is designed to find music
publishers.

Buy Song Page (User)
Below is the user interface created by the author. The user can use this page to easily
download a song.
Figure 59 --Home Page (The author ,2023)
Download Song Page (User)

Below is the user interface created by the author. This allows the user to easily download a
song and listen to the downloaded songs on this page.
Figure 60 --Home Page (The author ,2023)

2.18 User Testing Plan
A user testing plan is a document that outlines the methodology, goals, and objectives of a
user testing process. Having a well-designed test plan is important to ensure that the testing
process is effective and the results are meaningful. Accordingly, the following is EMC's user
testing plan.
End User Testing Plan
Application: E-music cloud (EMC)
Plan Documentation: H.P.D.Mandara

Method Date Person partners Person partners
responsible responsible
Moderated 10/04/2023 Chalaka Sampath 10
Usability
Testing
Card Sorting 12/04/2023 Ruwan Kumara 12
First-click Testing 15/04/2023 Chamara Lakshan 8
Eye-tracking 16/04/2023 Upul wijesekara 7
A/B Testing 18/04/2023 Kavinda 15
Figure 61 -User Testing Plan (the author ,2023)
2.19 Moderate usage testing

Moderated usability testing is a research method used to evaluate the usability of a product by
observing users as they complete tasks. In moderated tests, a moderator guides participants
through tasks, observes their behavior and responses, and collects feedback. Accordingly the
following is EMC's neutral utility test.
User feedback forms for alpha version
User feedback form (EMC Cyber)
Alpha version.
Name :
Factors Totally Agree Moderate Disagree Totally
Agree Disagree
You will be satisfied with clear
and user-friendly interfaces.
You are satisfied with the color

match used for prototyping.
You will be satisfied with the
eye-friendly interface
You are satisfied with the
icons used for prototyping.
The Playlists interface
manages to attract you.
Home interface manages to
attract you.
My music interface is able to
attract you.
COMMENT
Table 15 - feedback forms (the author ,2023)
Accordingly, the following are some Feedback Forms received from several users.
Feedback Form 1

Alpha version.
Name : Chamara Lakshan
Agree Disagree
-

attract you.
attract you.
COMMENT Design needs to improve
Table 16 -- feedback forms (the author ,2023)
Feedback Form 02

Alpha version.
Name : Nuwan Randika
Agree Disagree
attract you.
attract you.
COMMENT Design needs to improve
Table 17 - feedback forms (the author ,2023)
Feedback Form 03

Alpha version.

Name : Pasindu Munasingha
Agree Disagree
attract you.
attract you.
COMMENT Pasindu Munasingha
Table 18 - - feedback forms (the author ,2023)
Summary of the feedback of alpha version

Ten different people gave feedback to the author, but only three models were randomly
selected to be displayed here. At this point, the author often presents a summary of the
feedback received as a whole. Accordingly, the following is a summary of the feedback
provided by the author.
Alpha version.
Agree Disagree
You will be satisfied with 0 0 6 3 1
clear and user-friendly
interfaces.
You are satisfied with the 0 1 1 0 8

color match used for
prototyping.
You will be satisfied with the 1 1 1 1 6
The Playlists interface 0 0 3 7 0
Home interface manages to 0 3 5 2 0
attract you.
My music interface is able to 0 0 3 6 1
attract you.
Table 19 -Summary of the feedback (the author ,2023)
Evaluation of the summary of feedback
Figure 62 -Evaluation of the summary of feedback (the author ,2023)
A significant portion of the comments and bar chart summary expressed disapproval of the
GUI interface. About its hues and eye comfort, most people differ. The majority of users
largely concur that the navigation bar's buttons are easily discernible. Moreover, there are
others who concur with questions 5, 6, and 7. This evaluation may lead the author to the
conclusion that the system's graphical user interface (GUI) needs improvement, at which
point the author may delegate responsibility for the system to the developer.

The inventor of this system has to focus on enhancing the design and the other user
attractiveness choices while taking the summary into account. As a consequence, the user
decided that it would be advantageous to utilise Figma to create a beta version of the same
system. The author decided to enhance the colour quality and a number of additional GUI
features during the beta version.
2.20 Card sorting

Card sorting is a technique used in user experience (UX) design to help identify the best way
to organize information for a website, application, or other digital product. It involves asking
users or participants to sort a set of cards, each containing a piece of information or content,
into groups that make sense to them.
The goal of card sorting is to gain insight into how users perceive and organize information,
as well as to identify patterns and groupings that can inform the design of the product. The
results of card sorting can help designers make informed decisions about information
architecture, navigation, and labeling.
Figure 63 -Card sorting (.gluo.mx ,2023)
The author carried out the card sorting testing described above in order to put the features of
the EMC application through their paces. In this section, the author makes some adjustments
to the functions based on the testing.

1.22 AB testing
With AB testing, you may determine which of two options your website or app users prefer.
Compare two words, images, or designs. The designer will contrast the two interfaces in this
part to determine which will function best with the system. So, the designer is in charge of
coming up with the two distinct looks for the pluralist page and the new releases page. The
material that follows gives a description of the interfaces. Here the author has re-interfaced
and re-examined. Accordingly, all the interfaces have been tested, and below are some of
those interfaces.
Overview Page (USER)
The author has modified the interface by observing the above feedback forms. Accordingly,
the following are the previous interfaces and the later modified interfaces.
Before
changing
Figure 64 -Overview Page (the author ,2023)
Accordingly, the following is a re-creation of the interface.
After
changing
Figure 65 -AB testing (the author ,2023)

Album Page (USER)
The author has also changed the song album page and the interface color has been changed as
the user has had problems with the color.
Figure 66 -Album Page (USER) (the author ,2023)
The song album page has also been modified by the author so below are the interfaces
modified by the author. Here the author has observed the above forms and accordingly the
author has reached a conclusion. Accordingly, the color of the interface is far from much
concern.
Figure 67 AB testing (the author ,2023)

Artists Page (USER)
The author has made a color change in the publisher's note. Accordingly, the author has
changed the previous interface. Accordingly, the following is the interface before the change
by the author and the interface after the change.
Figure 68 -Artists Page (USER) (the author ,2023)
Accordingly, the following is a re-creation of the interface.
Figure 69 -AB testing (the author ,2023)
The interface created by the author has been sent for a first test and the author was able to
identify many shortcomings. Accordingly, since there were no good answers about matching
the color of the interface, the author took care of the color first. Accordingly, the author has
changed the color of all interfaces accordingly. Accordingly, those interfaces were given
above. Only a few of all interfaces are mentioned here.

3.1 Examine and employ appropriate tools that can be used to develop the interface/
interaction designed in activity 2 .
3.1 Interface Design Development Tools

User interfaces may be defined at a high degree of abstraction with the help of interface
builder tools, which can be used with either a text editor or a graphical editor. They enable
the design and positioning of user interface components as well as the definition of the way in
which those elements should respond to certain events. Only interface builders with a
graphical editor are worthy of consideration when it comes to prototyping.+
1. InVision Studio
The dream of many UI designers is about to come true with the launch of InVision Studio.
You may use this tool, which is currently in its early stages of development, to build
appealing interactive interfaces that make advantage of bucket characteristics. Individualized
animations and transitions may be created using a wide range of movements and interactions.
You won't need to worry about making separate art boards for each of the many devices your
website will be viewed on since responsive design can be applied to a single artboard. Time
is saved significantly as a result of this. (Creativebloq, 2022)
Figure 70 -1.InVision Studio ( medium.muz.li ,2022)
2. Framer
A framer is one of the most used tools for prototyping. It is based on the notion that
everything can be prototyped using code, leading to imaginative and visually beautiful design

work. It provides a fluid workflow that is enhanced by other features like device previews,
version control, and straightforward file sharing. The documentation that comes with Framer
is quite well structured in case you don't understand. Also, a sizable number of tutorial videos
and courses on O'Reilly and Udemy are devoted to the UX prototyping tool. It offers a first-
person viewpoint that illustrates how flexible and effective coding can be. (Creativebloq,
2022)
Figure 71 -Framer (siecledigital.fr ,2023)

3. Craft
If you use Photoshop or Sketch to design the user interface, you must utilise Craft. This
plugin performs everything for you, including creating jokes from actual data and stock
images while smoothly synchronising your files with your Invision prototypes. (Creativebloq,
2022)
Figure 72 -3.Craft (siecledigital.fr ,2023)

4. Marvel
Marvel is an excellent prototype tool that you should think about utilising if you need to
come up with rapid concepts and refine an interface. Marvel offers an extremely creative
approach for building pages and allows you to model your design using a prototype, much
like many other programmes in this area. You may include your ideas into the workflow of
whatever project you're working on thanks to Marvel's many fantastic integrations.
(Creativebloq, 2022)
Figure 73 5.Marvel (Creativebloq, 2022)

5. MockFlow
A group of tools called Mock Flow may be quite useful for many activities that are included
in the general process of putting up a project. The software WireframePro is a wonderful
prototyping tool to utilise in especially if you are testing out a few fresh concepts because it is
very adaptable. It's excellent to work on startup ideas, be able to create simple layouts rapidly,
and perhaps even come up with concepts that can be presented to everyone. Instead than
looking at wireframes, consider mock flows. (Creativebloq, 2022)
Figure 74 -mockflow (Creativebloq, 2022)

6. Adobe XD
For creating and prototyping user experiences for the web, mobile devices, and even speech,
utilise Adobe XD! You will feel right at home with Adobe XD if you are already familiar
with the Adobe Creative Cloud suite. Adobe XD is a very flexible tool that offers a wealth of
tools for designing, prototyping, sharing, collaborating, and developing a whole design
system. In addition to having native support for Windows 10 and macOS, XD has mobile
apps for both iOS and Android. (Creativebloq, 2022)
Figure 75 -4.Adobe XD (Creativebloq, 2022)
As a direct result of this, the author decided to create interfaces using Adobe XD. The author
decided to use the software because it is easy to operate.
The prototype software called Adobe XD was created by Adobe particularly for interface and
user experience designers. Wireframes, prototypes, and screen designs are just a few of the
digital goods that may be created with Adobe XD's capabilities. Mobile applications and
webpages are two examples of digital products. responsible for both its development and
dissemination is Adobe Corp. Versions for Windows and Mac OS are both accessible. With
the implementation of XD, several benefits for consumers as well as internal advantages were
discovered. Accordingly, following are the pros and cons of the software.
User-friendly interface: Adobe XD has an Limited Customization: While Adobe XD
intuitive interface that makes it easy for users offers a wide range of design elements and
to create designs and prototypes quickly and assets, designers may find that customization
efficiently. is limited.

Prototyping: Adobe XD offers a set of Limited features: Adobe XD is a relatively
prototyping tools, allowing designers to new software and may not have all the
quickly create and test interactive prototypes. features that designers need, especially those
who have been using other design tools for a
long time.
Collaboration: Adobe XD lets designers Compatibility: Adobe XD is not compatible
collaborate on designs and prototypes in real- with all operating systems, especially older
time, making it easy to share ideas and versions of Windows.
feedback with team members.
Integration: Adobe XD integrates with other Price: Adobe XD is part of the Adobe
Adobe Creative Cloud products, such as Creative Cloud suite, which may be
Photoshop and Illustrator, making it easy to expensive for some users.
incorporate designs from those programs.
Responsive design: Adobe XD supports Learning curve: While Adobe XD is
responsive design, allowing designers to relatively easy to use, designers new to the
create designs that adapt to different screen software may have to spend some time
sizes and resolutions. learning how to use its features effectively.
3.2 Tools used to develop user experience .

Persona
Personas are utilised to create accurate and as realistic representations of your target customer
groups for usage as a reference. These presentations should always be supported by web
analytics as well as qualitative and quantitative consumer research. Remember that the level
of study that went into developing the characters is strongly correlated with their quality.
According to the EMC music platform, in order to effectively reach the target audience and
achieve the purpose, the persona is the most crucial component. With the persona, the
designer may ascertain the needs and preferences of the user as well as their behaviour in
connection to the programme.
Customer journey map

A customer journey map shows the relationship that a consumer develops with a company
over time and via all of the channels through which they engage with the firm. Customer
journey maps are used by engineering firms to assess how well customer experiences fit
consumer expectations and to pinpoint areas where designs might be improved.
By working on this portion, the designers may learn what the user thinks about the
programme. as well as coming under the heading of choosing the user experience. As a
consequence, it is possible to determine what users' opinions are of the EMC music platform.
Empathy map
A visual approach known as an emotion map may be used to communicate what the product
team understands about a consumer. With the use of this technology, product teams may
better grasp the "why" underlying client needs and preferences. This instrument encourages
product teams to employ logical, fluid design. concentrating on the goods and the customers.
Sensitive design shifts the emphasis from the product to the users. A team has a more full
understanding of the user's surroundings and the issues they confront, also known as the
opportunity space, when they describe what they know about the user and plot it on a chart.
3.3 Tools used to test
Card sorting
Several of the functionalities that are included in the design's alpha iteration have been
designed using the author's original concept. The author tests the user interface design in this
part by using the card-sorting technique. The author performed the card sorting test described
above to put EMC application features through their paces. In this section, the author makes
some adjustments to the tasks based on the test. It can cover up a mistake.
3.2 Conduct a user experiment for the developed interface and examine feedback.
Evaluate feedback received and make multiple iterations of the interface based on the
outcome of the evaluation.

3.4 Feedback evaluation of alpha version
The author receives feedback for his interfaces through the user. Accordingly, information is
obtained by submitting a questionnaire. Accordingly, the following are the answers obtained
from the presented questionnaire.
1. You are satisfied with clear and user friendly interfaces
Totally Agree 0
Agree 0
Moderate 6
Disagree 3
Totally Disagree 2
According to the pie chart, 60% of respondents were in the middle on this issue. Also, 30% of
respondents disagree with this question, while 20% of respondents completely reject it. And
no one chooses "I completely agree" in response to this question.
Figure 76 -Chart (the author ,2023)
2. You are satisfied with the colors matching used for prototyping
Totally Agree 0
Agree 1
Moderate 1
Disagree 0
Totally Disagree 8

According to the graph, Totally Disagree increases. That is, 80% have given this answer.
Apart from this, users have given the answer as total 10% and agree 10%. Below is the
corresponding chart.
3. You are satisfied with eye comfort interface.

Totally Agree 1
Agree 1
Moderate 1
Disagree 1
Totally Disagree 6
Totally Disagree is the most answered in this question. This is 60%. In addition, 10% is
divided into other answers. Accordingly the following is a graph prepared from the answers
provided.

4. You are satisfied with the Icons used for prototyping.
Totally Agree 0
Agree 5
Moderate 4
Disagree 0
Totally Disagree 1
The author has sent a questionnaire to the users, and in the fourth question, agreement can be
seen as the answer given by the largest number of users. It is 50%. Apart from this 40% have
given neutral answer. 10% Total Disagreement is given. Below is the corresponding chart.
5. The Playlists interface is capable of attracting you.

Totally Agree 0
Agree 0
Moderate 3
Disagree 7
Totally Disagree 0
In the fifth question, the author received 70% of the answers as disagree. Apart from this 30%
answers have been given moderately. Apart from this other answers have not been given by
any user. These answers allow the author to draw a conclusion and below are the graphs
created from those answers.

6. The Home interface is capable of attracting you.

Totally Agree 0
Agree 3
Moderate 5
Disagree 2
Totally Disagree 0
In the sixth question, 50% answered moderately to the author. Apart from this, 30% have
given the answer of agreement and 20% have given the answer of disagreement. These
answers can lead to a conclusion regarding the interface created by the author. Accordingly,
below is the chart created related to the answers given.

7. My music interface is capable of attracting you.
Totally Agree 0
Agree 0
Moderate 3
Disagree 6
Totally Disagree 1
In the seventh question, 30% answered moderately to the author. In addition, 60% have given
the answer related to not agreeing and 10% have given the answer Totally Disagree. From
these answers, a conclusion can be drawn regarding the interface created by the author.
Accordingly, below is the chart created related to the answers given.
The author has created interfaces for EMC software and those interfaces are shown above.
Here, an interface has been created for both the user and the auditor. The author was keen to
test those interfaces first. Feedback was collected from ten users. Here seven questions have
been addressed to the users and those questions and the answers given to them have been
mentioned by the above reviewer. In addition to that, the above author has also recorded a
graph related to those answers.
From these answers, the author has come to a conclusion. That is about the color of the
interfaces. Here, the color of the interface and the color of the buttons are quite similar, so it
is difficult for users to identify it. So the author decided to change those colors.

3.4 Final Interface Prototypes
Based on the feedback evaluation, the author created improved designs for the system.
Accordingly, the author has changed the interface taking into account the color and other
shortcomings. Accordingly, the following are interfaces modified by the author.
Login Page
Accordingly, the author has indicated the login page first. Both the user and publisher can
enter the system from this login page. Here you can enter the system by entering the
username, login type and password. Accordingly, the following are the interfaces modified
by the author.
Figure 83 -Login page (the author ,2023)
Sing Up Page
A new member can access this Sing-UP page while joining the system. Here the system can
be entered by providing the user's personal information and bank account information. Here
the author has created the same interface for both the user and publisher. The interface
created above was modified and the following interface was created. Accordingly, below is
the modified Sing-UP page.

Figure 84 -Sing Up Page (the author ,2023)
Home Page (USER)
The author has created different interfaces for both the user and the publisher. Accordingly,
the following is the interface designed for the user. The author has modified the interface
shown above and created the following interface.
Figure 85 -Home Page (USER) (the author ,2023)

Album Page (USER)
Below is the interface designed for the user. The author has modified the interface shown
above and created the following interface. Accordingly, songs are sorted by the Album page.
Figure 86 -Album Page (USER) (the author ,2023)
Artists Page (USER)

above and created the following interface. Accordingly, through the Artists page, songs
related to the publisher can be sorted.
Figure 87 -Artists Page (USER) (the author ,2023)

Buy Song Page (USER)
above and created the following interface. Accordingly, this page is used to buy songs.
Figure 88 Buy Song Page (USER) (THE AURTHOR ,2023)
Download Song Page (USER)

above and created the following interface. Accordingly, the purchased songs can be listened
through this page.
Figure 89 -Download Song Page (USER) (THE AUTHOR ,2023)

Home (Publisher)
Below is the interface designed for the publisher. The author has modified the interface
shown above and created the following interface. Accordingly, the publisher can first access
this page.
Figure 90 -Home (Publisher) (the author ,2023)
My song (Publisher)
shown above and created the following interface. Accordingly, the publisher can access the
songs uploaded by him through this page.
Figure 91 -My song (Publisher) (the author ,2023)

Reoprts (Publisher)
shown above and created the following interface. Accordingly, the publisher can see the
details of the songs he has uploaded and the details of his monthly income.
Figure 92 -Reoprts (Publisher) (the author ,2023)
Wallet (Publisher)
shown above and created the following interface. Accordingly, this page displays the details
of the amount related to the songs uploaded by him to the publisher.
Figure 93 -Wallet (Publisher) (the author ,2023)

My account (Publisher)
shown above and created the following interface. Accordingly, the advertiser can check his
personal details and bank account details.
Figure 94 My account (Publisher) (the author ,2023)
Upload song (Publisher)

shown above and created the following interface. Accordingly, the publisher can take one of
his songs and create a new album.
Figure 95 -Upload song (Publisher) (the author ,2023)

4.1 Critically Evaluate the feedback and tests results received for the multiple iterations
and the final version of the interface developed in 3.2 and compare it against the
original plan/ use requirements.
4.1 Feedback Form

Here again the author has referred to an interface test. Accordingly, the following are the
answers given in that regard.
Feedback form 1

Beta version.
Name : Chamara Lakshan
Agree Disagree
attract you.
attract you.
COMMENT All the designs are built in nicely
Table 21 -Feedback form 1 (the author ,2023)
Feedback form 2

Beta version.
Name : Kavinda madushanak
Agree Disagree
A
and user-friendly interfaces. ll
A
match used for prototyping. l
A
l
A
l
A
manages to attract you. l
A
attract you. l
A
attract you. l
Feedback form 3

Beta version.
Name : Pasindu Hsarindya
Agree Disagree
A
A
A
match used for prototyping. A
A
A

A
icons used for prototyping. A
A
manages to attract you. A
A
attract you. A
A
attract you. A
The author has forwarded 10 feedback forms and received responses from all ten. Among
those ten forms, only three forms have been given above.
4.2 Summary of the feedback of beta version.

The author took feedback from ten people, but three randomly selected feedback formats are
shown above. Now the author would like to present a summary of the overall feedback.
Accordingly the following is the overall feedback.
Beta version.
Agree Disagree
You will be satisfied with 5 5 0 0 0
clear and user-friendly
interfaces.
color match used for
prototyping.
You will be satisfied with the 7 3 0 0 0
The Playlists interface 4 3 3 0 0

Home interface manages to 8 2 0 0 0
attract you.
My music interface is able to 3 5 2 0 0
attract you.
Table 24 -Summary of the feedback of beta version.(the author ,2023)
Figure 96 -Summary of the feedback of beta version.(the author ,2023)
According to the feedback summary, users generally give positive feedback. When
considering the question, one top group strongly agrees with it and there is no one to choose
the criteria of disagreeing or strongly disagreeing with it. The other is question number 1,
where people choose the criteria they strongly agree with and agree with equally. Here again
no one chooses criteria they do not agree with and do not fully agree with. In question 2, most
people choose criteria with which they strongly agree, while others choose criteria with
which they agree. Here again no one chooses the criteria of disagree, moderately, strongly
disagree. In question 3, most people choose criteria with which they strongly agree, while
others choose criteria with which they agree. Here again no one chooses the criteria of
disagree, neutral and strongly disagree. Coming to question 4, here again individuals select
the criteria with which they fully agree, while other choices are agreeable and neutral. In
question 5, agree and neutral are chosen after the criterion of strongly agree and strongly
agree. A similar number of feedbacks were recorded for question number 5. In question 6,
most people choose criteria with which they strongly agree, while others choose criteria with
which they agree. Here again no one chooses the criteria of disagree, neutral and strongly
disagree. In the last question, most people choose the agree criteria, while others choose the

strongly agree and neutral criteria. Accordingly, the author comes to a consensus. That is, it is
decided as the final interface because it provides users with ease of use and a good idea of
color.
4.3 Quiz and related answers

Below are the questions and answers given by the author to 10 users. Apart from this, the
graphs are also given below.
1. You are satisfied with clear and user friendly interfaces.

Totally Agree 5
Agree 5
Moderate 0
Disagree 0
Totally Disagree 0
The pie chart shows that equally as many respondents choose the fully agree and agreed
criterion. The disagree criterion, moderate criteria, and definitely disagree criteria were not
chosen in this question. As a result, the author may generally state that users are happy with
question one.
Figure 97 -chart (the author ,2023)

2. You are satisfied with the colors matching used for prototyping.
Totally Agree 6
Agree 4
Moderate 0

Disagree 0
Totally Disagree 0
According to the pie chart the highest number of people totally agree with this question and
their percentage is 60%. Next higher number of people select the agreed criteria and their
percentage is 40%. In this question, no one selects the disagree criteria, moderate criteria, and
totally disagree criteria. So, the author can say commonly that question one is satisfied the
users.
3. You are satisfied with eye comfort interface.

Totally Agree 7
Agree 3
Moderate 0
Disagree 0
Totally Disagree 0
According to the graph, the highest number of people agree with this question completely and
their percentage is 70%. Next most people choose agreed criteria and their percentage is 30%.
In this question, no one chooses Disagree Criteria, Neutral Criteria and Strongly Disagree
Criteria. So the author can say in general that one is the question of user satisfaction.

4. You are satisfied with the Icons used for prototyping.
Totally Agree 5
Agree 4
Moderate 1
Disagree 0
Totally Disagree 0
According to the pie chart, the highest number of people totally agree with this question and
their percentage is 50%. Next higher number of people select the agree criteria and their
percentage is 40%. The number of people select the moderate criteria and their percentage is
10%. In this question also no one selects the disagree and totally disagree criteria.
Figure 99 --chart (the author ,2023)
5. The Playlists interface is capable of attracting you.

Totally Agree 4
Agree 3
Moderate 3
Disagree 0
Totally Disagree 0

According to the pie chart, the highest number of people strongly agree with this question and
their percentage is 40%. According to the pie chart, 30 percent of people choose neutral
criteria and agreed criteria. In this question, no one chooses Disagree Criteria, Neutral
Criteria and Strongly Disagree Criteria. So the author can say in general that one is the
question of user satisfaction.
6. The Home interface is capable of attracting you

Totally Agree 8
Agree 2
Moderate 0
Disagree 0
Totally Disagree 0
According to the pie chart the highest number of people totally agree with this question and
their percentage is 80%. Next higher number of people select the agree criteria and their
percentage is 20%. In this question, no one selects the disagree criteria, moderate criteria, and
totally disagree criteria. So, the author can say commonly that question one is satisfied the
users.

Figure 101 --chart (the author ,2023)
7. My music interface is capable of attracting you

Totally Agree 3
Agree 5
Moderate 2
Disagree 0
Totally Disagree 0
According to the pie chart, the highest number of people agree with this question and their
percentage is 50%. Next higher number of people select the totally agree criteria and their
percentage is 30%. The number of people select the moderate criteria and their percentage is
20%. In this question also no one selects the disagree and totally disagree criteria.
Figure 102 ---chart (the author ,2023)

4.4 Evaluation and conclusion of the analysis.
The majority of respondents selected responses that fit into the categories of strongly
disapproving and entirely disagreeing, according to research done on the prototype's alpha
version. Because the prototypes look really stupid in the alpha version and the colour
schemes don't match the system. The reports of the feedback are therefore rather
unfavourable. But, the author changes the colour schemes of the design in the beta version of
the prototype and adds extras like icons and attractive photographs, among other things. As a
consequence, the feedback report was quite encouraging and satisfying. By utilising the beta
version, the user may see how the website is actually designed. The author may conclude by
saying that the beta version has been totally finished and thoroughly modified in response to
user feedback and comments.
4.5 Final version of the interface vs. original interface/ interaction plan.
The EMC Music application prototype went through its first iteration, known as the alpha
version. It was conceived with the aim of gathering user feedback on the basic organization
of the site. Because both user and system requirements were quickly identified, the alpha
version was developed with the goal of satisfying the majority of the above requirements. For
registered users the login screen requires users to enter their Username Login Type and
Passwords before granting access to the system. Because of this, users' needs were satisfied
with the alpha version, which included login and registration functionality. On the welcome
page, the user finds the interface simple and easy to get familiar with. Customers who have
not yet registered can start the process of creating an account by clicking on the button
labeled "Create Account". By providing suitable GUI interfaces, we were able to meet the
needs of our users in areas like Artists, Playlist and My Music.
The beta version is the second iteration of the EMC music application website's prototype. To
allow people to engage with the prototype, the interfaces were created on a digital platform.
The beta version incorporates some assumptions based on the alpha version's user input
analysis. The beta version meets user and system needs such as user login and signup, my
music, artist, playlist, and search history. You can also access this page after signing up for a
period of 3 months. After that time the session expires and a message comes back to pay.
Then you can pay by card through it. If you do not pay, you will not be able to log in again.

This adds convenience to the user. Since having to pay frequently is a hassle, they get a huge
advantage by paying the three-month fee all at once.
The general calibre of the user experience has been improved by adding further presumptions
to the beta version's design. To make the application's navigational needs more user-friendly
and comprehensible for the end user, buttons with standardised iconography were included to
the design. The ability to view larger song cover art previews is available to customers. The
beta version's music visuals, accurate song names, and details interface have all been
modified to match the main website's colour scheme.
As a consequence, the designer is able to guarantee that the majority of individuals of all ages
who like listening to music will find these designs appealing. So, putting this concept into
practise would be great for developing a system. And the creator may be confident that this
idea will have the strongest possible backing and grow into EMC's leading music platform in
Sri Lanka.
4.2 Discuss your 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.
4.6 Consulation
In my role as Chief User Experience Officer, I was able to successfully address a critical
obstacle and advance the company's objective by finishing the report for the EMC Music
Platform. The report, which addressed numerous facets of the EMC music platform project,
was created in line with the requirements. The author is expected to provide user maps,
wireframes, prototypes of interfaces, diagrams, and other work of a similar nature.
The opening of the report served to highlight the importance of the user interface and user
experience for a business's stakeholders throughout the development of an application. This
was followed by a discussion of the relationships within the firm. It contained details on all
potential experiences, tools, testing procedures, and interfaces. As a concluding point, it came
to the conclusion that more funding must be allocated to the software development process.

In addition to developing persona for the users, we also created an empathy map, an
experience map, a customer journey map, and a service blueprint. This provided us with an
understanding of the users and their behaviors, including how they like to behave, what they
like to do, what they think and feel while disclosing their feelings, and so on. The LUCID
methodology was followed throughout the entirety of the process. In order to carry out the
test plan, I made use of the moderated usability testing and the AB testing that are available
among the various testing methodologies. Because the feedbacks were generally unfavorable,
I decided to do some additional research on the user. Because of this, I ended up designing an
entirely new prototype in the hopes that it would satisfy the needs of the users. The feedback
will be provided to me by the author, who chose 10 participants at random. The test plan was
carried out in accordance with its specifications, but only eight out of ten of the critters were
completely filled out, as stated in the report. Furthermore, the author holds the position of
chief experience officer, and in that capacity, they have conducted research and come across
the relationship between customer satisfaction and the degree to which the interfaces satisfy
the users.
The report details indicate that wireframing and prototyping are the most frequently utilized
concepts related to the UIUX subject. Because of these two ideas, the application was
developed in a way that was very efficient and had a short period. In this highly competitive
market, where it has the potential to be regarded as the most important thing, Wireframing,
prototyping, and sketching are also used in the development of the EMC music app. This
app's procedure seems to be very effective, at least according to that process. Because the
designer can very easily design the app based on the wireframes and sketches provided by the
developer. If the designer has a good understanding of the UIs that will be used in the app,
then the designer will be able to create those UIs in a very short amount of time and at a very
low cost. As a result, the author considers both this report and this project to be a complete
and resounding success.
4.7 Future improvements in UI development

1. Change the sound effects
The equipment only offers the standard sound quality at the moment. But, the program will
soon have a window that can be adjusted for both the sound quality and the effects. As a
consequence, modifying the sound and bass can be done extremely easily, and the user may
also customize the system's sound system.

2. Application background
This specific user interface will now show the standard backdrop while music is playing. But,
the creator ultimately decided to change that system in the future. When the user is listening
to music, the application's backdrop will always show the song's cover art. The users'
attention could be aroused by that. mostly as a result of its striking look.
3. Search by the image option

The user will soon be able to search for songs, artists, and albums using photographs related
to the relevant category. As a result, the user may search using the photographs in the case
that they forget the band or song's name.
4. Song details
In the future, all of the data associated with a song will be made available to the user when
they click on it. This contains the artist's name, the album's price, the year, and other details.
Because of this, it is rather straightforward to identify the song and the other details.
5. The songs may be found using the alphabet.

Users can now only perform searches using the relevant keyword. In the future, the system
will provide suggestions for songs, albums, and artists as you enter in the search area. As a
consequence, users may easily search for music and other types of information.
Conclusion
A "UI/UX," which is a phrase used to describe the notion, is an idea for exhibiting a product
or system with minimal functionality at an early stage in the development process.
Prototyping techniques come in a wide variety; some of the most popular ones are fast,
evolutionary, incremental, and extreme prototyping. The focus of this paper is on the
attributes of a user interface (UI) and user experience (UX), as well as the differences
between a UI and a system as a whole. Electronic Music Cloud needed a web-based
application in order to provide its clients with high-quality music. A user interface was
created for the proposed system as a direct result of this. Effective techniques and
technologies are now being used to build the suggested solutions.

References
(No date) Www. Available at: https://www./searchapparchitecture/definition/user-interface-
UI (Accessed: April 1, 2023).
Rouse, M. (2011) Graphical User Interface, Techopedia. Available at:

https://www.techopedia.com/definition/5435/graphical-user-interface-gui (Accessed: April 1,
2023).
Usability First - Usability Glossary - menu-driven interface (no date) Usabilityfirst.com.

Available at: https://www.usabilityfirst.com/glossary/menu-driven-interface/index.html
(Accessed: April 8, 2023).
Middelkoop, W. L. (no date) Some thoughts on touch screen user interface design - Creating
intuitive natural interfaces, Willem’s Blog. Available at: https://willem.com/blog/2020-06-
24_some-thoughts-on-touch-screen-user-interface-design/ (Accessed: April 8, 2023).
What are Voice User Interfaces? (no date) Speechly.com. Available at:
https://www.speechly.com/blog/what-is-voice-user-interface (Accessed: April 8, 2023).
SDLC - Software Development Life Cycle - javatpoint (no date) www.javatpoint.com.

Available at: https://www.javatpoint.com/software-engineering-software-development-life-
cycle (Accessed: April 8, 2023).
What is wireframing? (no date) The Interaction Design Foundation. Available at:
https://www.interaction-design.org/literature/topics/wireframing (Accessed: April 8, 2023).
Budde, R. et al. (1992) “What is prototyping?,” in Prototyping. Berlin, Heidelberg: Springer

Berlin Heidelberg, pp. 6–9.
Hayes, A. (2011) End user: Definition, examples, vs. Customer, Investopedia. Available at:
https://www.investopedia.com/terms/e/end-user.asp (Accessed: April 8, 2023).

Dam, R. F. and Siang, T. Y. (2016) “Empathy Map – why and how to use it,” The Interaction
Design Foundation. Interaction Design Foundation, 17 November. Available at:
https://www.interaction-design.org/literature/article/empathy-map-why-and-how-to-use-it
(Accessed: April 8, 2023).
What is Customer Journey Map? (no date) Visual-paradigm.com. Available at:

https://www.visual-paradigm.com/guide/customer-experience/what-is-customer-journey-
mapping/ (Accessed: April 8, 2023).

E131272-1680961474013-263634-UXUI Assignment (Mandara)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E131272-1680961474013-263634-UXUI Assignment (Mandara)

Uploaded by

Copyright:

Available Formats

Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)

Programme title BITEC Higher National Diploma in Computing

Mr. Gagana Wickramasinghe

Assignment title User experience design for E-music cloud

INTERNAL VERIFIER CHECKLIST

Do the assessment criteria awarded match

Is the Pass/Merit/Distinction grade awarded

Assessor signature Date

Internal Verifier signature Date

Confirm action completed

Assessor signature Date

User Experience and Interface Design 1 H.P.D.Mandara Prawarshana

Unit Title Unit 40- User Experience and Interface Design

Assignment Number Assessor

Grade: Assessor Signature: Date:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

User Experience and Interface Design 2 H.P.D.Mandara Prawarshana

Feedback: Student to Assessor

User Experience and Interface Design 3 H.P.D.Mandara Prawarshana

User Experience and Interface Design 4 H.P.D.Mandara Prawarshana

Word Processing Rules

User Experience and Interface Design 5 H.P.D.Mandara Prawarshana

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

User Experience and Interface Design 6 H.P.D.Mandara Prawarshana

Academic Year 2021/22

Assignment Title User Experience Design for e-music cloud

Submission Date 08/04/2023

IV Name & Date

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

User Experience and Interface Design 7 H.P.D.Mandara Prawarshana

User Experience and Interface Design 8 H.P.D.Mandara Prawarshana

User Experience and Interface Design 9 H.P.D.Mandara Prawarshana

User Experience and Interface Design 10 H.P.D.Mandara Prawarshana

User Experience and Interface Design 11 H.P.D.Mandara Prawarshana

User Experience and Interface Design 12 H.P.D.Mandara Prawarshana

Grading Criteria Achieved Feedback

User Experience and Interface Design 13

P4 Appraise a specific end user and an appropriate

M3 Apply end user classification and behaviour modelling to

M4 Devise a plan to use appropriate User Interface Design

D2 Make multiple iterations of your User Interface concept

User Experience and Interface Design 14

P6 Run end user experiments and examine feedback.

M5 Employ an appropriate set of tools to develop your plan

M6 Reconcile and evaluate end-user feedback and build a

User Experience and Interface Design 15

P8 Suggest steps to improve in future versions of your

M7 Undertake a critical review and compare your final

D3 Critically evaluate the overall success of your User

User Experience and Interface Design 16

1.1 Introduction ............................................................................................................................................ 23

Learning Outcomes:02 ........................................................................................................................................ 60

2.1 End-user ..................................................................................................................................................60

User Experience and Interface Design 17 H.P.D.Mandara Prawarshana

Learning Outcomes:03 ...................................................................................................................................... 109

3.1 Interface Design Development Tools ...................................................................................................109

Learning Outcomes:04 ...................................................................................................................................... 127

4.1 Feedback Form ..................................................................................................................................... 127

User Experience and Interface Design 18 H.P.D.Mandara Prawarshana

User Experience and Interface Design 19 H.P.D.Mandara Prawarshana

User Experience and Interface Design 20 H.P.D.Mandara Prawarshana