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
Wickramage Thishani Sewwandi 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) Assignment Feedback Form Student Name/ID Wickramage Thishani Sewwandi E131397
Unit Title Unit 40- User Experience and Interface Design
Assignment Number 01 Assessor Mr. Gagana
Wickramasinghe 08/04/2023 Date Received 17/05/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:
2|Page Wickramage Thishani Sewwandi User Experience and Interface Design 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
Mr. Gagana Wickramasinghe gave me guidance and support in every task till the completion of this assignment.
Assessor Date signature [email protected] 17/05/2023 Student Date signature
3|Page Wickramage Thishani Sewwandi User Experience and Interface Design Pearson Higher Nationals in Computing Unit 40: User Experience and Interface Design Assignment
General Guidelines
4|Page Wickramage Thishani Sewwandi User Experience and Interface Design 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
5|Page Wickramage Thishani Sewwandi User Experience and Interface Design 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.
6|Page Wickramage Thishani Sewwandi User Experience and Interface Design Higher National Diploma in Business Assignment Brief Student Name /ID Number Wickramage Thishani Sewwandi E131397
Unit Number and Title Unit 40: User Experience and Interface Design
Academic Year 2021/22
Unit Tutor Mr. Gagana Wickramasinghe
Assignment Title User Experience Design for e-music cloud
Issue Date 27/02/2023
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
7|Page Wickramage Thishani Sewwandi User Experience and Interface Design 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.
8|Page Wickramage Thishani Sewwandi User Experience and Interface Design 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
9|Page Wickramage Thishani Sewwandi User Experience and Interface Design 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.
10 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 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.
11 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 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.
12 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 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.
13 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 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.
14 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 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.
15 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 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.
16 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Acknowledgement This is an assignment for the subject User Experience and Interface Design which is part of the HND in Computing. I completed the assignment successfully. First and foremost, I would like to thank my User Experience and Interface Design lecturer Mr. Gagana Wickramasinghe for his guidance and continuous supervision as well as providing relevant information regarding the project and assisting in completing the work. Secondly, I would like to thank all my family members and my friends for their support in making this assignment successful.
17 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Table of content
Contents Activity 01.......................................................................................................................... 22 1 User interface ............................................................................................................. 22 1.1 Graphic User Interface (GUI) ............................................................................. 23 1.2 Command line interface (CLI) ............................................................................ 24 1.3 Menu-driven User Interface ................................................................................ 26 1.4 Form-based User Interface (UI) .......................................................................... 27 1.5 Voice User Interface............................................................................................ 29 1.6 Touchscreen graphic User Interface .................................................................... 31 1.7 User experience ................................................................................................... 33 1.8 Different types of experience .............................................................................. 33 1.9 User experience (UX) and User Interface (UI) ................................................... 35 1.10 Tools available in User experience (UX) and User Interface (UI) ..................... 35 1.10.1 Wireframing ................................................................................................. 36 1.10.2 Prototyping................................................................................................... 37 1.10.3 Sketching...................................................................................................... 39 1.11 Impact of UX & UI development in Software Development life Cycle ............. 40 1.11.1 Software Development Life Cycle. (SDLC) ................................................ 40 1.11.2 The stages of Software Development Life Cycle (SLDC) .......................... 41 1.12 End-user test requirements for suitability for specific models and different test results of user experience and interface design.............................................................. 43 Activity 02.......................................................................................................................... 46 2 Importance of using multiple different forms of experience and interface design in building EMC services ....................................................................................................... 46 2.1 End- user requirement ......................................................................................... 49 2.2 Persona ................................................................................................................ 51 2.2.1 The classification of persona ....................................................................... 52 2.2.2 Creating a persona........................................................................................ 52 2.2.3 The elements of a persona............................................................................ 54 2.2.4 Music purchaser persona.............................................................................. 54 2.3 Empathy Map ...................................................................................................... 55 2.3.1 Empathy map of E-Music Cloud user .......................................................... 56 2.4 Experience map ................................................................................................... 56 2.4.1 Experience map of E-Music Cloud user ...................................................... 57 2.5 Customer journey map ........................................................................................ 57
18 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 2.5.1 Customer journey map for E-Music Cloud .................................................. 59 2.6 Service blueprint ................................................................................................. 59 2.6.1 Uses and benefits of service blueprint ...................................................... 59 2.6.2 Service blueprint of E-Music Cloud ............................................................ 61 Activity 03.......................................................................................................................... 62 3 Development Methodologies of Interaction/Interface ............................................... 62 3.1 EMC user interfaces ............................................................................................ 64 3.2 User testing plan .................................................................................................. 73 3.3 Card sorting of E-Music Cloud ........................................................................... 74 3.4 Interface design development tools ..................................................................... 75 3.5 EMC user interface (Alpha version) ................................................................... 81 3.6 User experiment .................................................................................................. 87 3.7 Summary of the feedback of the alpha version ................................................... 91 3.8 Feedback evaluation of alpha version ................................................................. 92 3.9 EMC user interface final prototypes (Beta version)............................................ 94 Activity 04.......................................................................................................................... 99 4.1 User experiment 02 .................................................................................................. 99 4.2 Summary of the feedback of the beta version ........................................................ 103 4.3 Feedback evaluation of beta version ...................................................................... 103 4.4 Steps to improve in future versions of the UI ........................................................ 105 4.5 Final user interface and test results with the original plan ..................................... 106 Conclusion ....................................................................................................................... 106 References ........................................................................................................................ 107
Figure 1: graphic user interface(conceptdraw.com) .......................................................... 23
20 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 64: Home final interface (Author 2023) ................................................................. 96 Figure 65: Playlist final interface (Author 2023) ............................................................... 96 Figure 66: Artist final interface (Author 2023) .................................................................. 97 Figure 67: Publisher login (Author 2023) .......................................................................... 97 Figure 68: Song upload (Author 2023) .............................................................................. 98 Figure 69: Withdrawal (Author 2023) ............................................................................... 98 Figure 70: Publisher dashboard (Author 2023).................................................................. 99 Figure 71: user experiment 02(feedback 01) ................................................................... 100 Figure 72: user experiment 02(feedback 02) ................................................................... 101 Figure 73: User experiment 02 (feedback 03) ................................................................. 102 Figure 74: Summary of the feedback- beta version (Author 2023) ................................. 103
Table 1: End user testing plan (Author 2023) .................................................................... 74
21 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Activity 01
1 User interface
User Interface (UI) design refers to the creative design of all visual elements of a digital product's user interface; It presents the presentation and interactivity of the product. A user interface is where human users interact with a computer, website, or application. The goal of an effective UI is to make the user's experience easy and intuitive, requiring minimal effort on the part of the user to achieve the maximum desired result. UI is designed with layers of interactions that respond to human senses. They include both types of input devices such as keyboard, mouse, trackpad, microphone, touch screen, fingerprint scanner, e-pen and camera and output devices such as monitors, speakers, and printers. Devices that interact with multiple senses are called multimedia user interfaces. For example, everyday UI uses a combination of keyboard and mouse as tactile input and monitor and speakers as visual and auditory output. The user interface is important to meet user expectations and support the effective functioning of the individual user website. A well-implemented user interface facilitates effective interaction between the user and the program, application, or machine through contrasting visuals, clean design, and responsiveness. When designing a user interface (UI) for a website, it is important to consider accessibility, visual aesthetics, and the user's expectations and ease of use of the website. Creative visuals and quick, accurate responses will improve website conversion rates, where the user's expectations are met by using the website. Fulfils those needs and then satisfies those needs. (indeed.com-2022) Types of User Interface, • Graphic User Interface • Command Line interface • Menu- driven user interface • Form- based user interface • Voice user interface • Touchscreen graphical user interface
22 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 1.1 Graphic User Interface (GUI)
A graphical user interface (GUI) is a type of user interface that allows users to interact with electronic devices or software through graphical elements such as icons, buttons, and windows. GUIs make it easier for users to interact with complex applications by breaking down tasks and tasks into simpler, more intuitive steps. GUIs are used in a wide range of applications, including desktop and mobile operating systems, web browsers, and productivity software. GUIs were created because text command-line interfaces were complex and difficult to learn. A GUI process allows you to click or point to a small picture called an icon or widget and open a command or action on your devices, such as tabs, buttons, scroll bars, menus, icons, pointers, and windows. It is now the standard for user-cantered design in software application programming. (indeed.com-2021)
Figure 1: graphic user interface(conceptdraw.com)
Advantages of Graphic User interface,
• GUIs are designed to be easy to use and intuitive, even for users who may not have much experience with computers. The visual icons and menus make it easy to navigate and perform tasks. • GUIs provide users with the ability to perform tasks more quickly and efficiently than with command-line interfaces. This can save time and increase productivity. • GUIs provide a more visually appealing and engaging experience for users. This can help to increase user satisfaction and improve overall user experience. 23 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • GUIs can be designed to be more accessible for users with disabilities or limitations, such as those with visual impairments. For example, screen readers can be used to read out text to visually impaired users. • GUIs allow users to multitask and switch between different tasks or applications easily. This can help to increase productivity and efficiency. Disadvantages of Graphic User interface, • GUIs can be more difficult to maintain and update than command-line interfaces. • GUIs tend to consume more system resources such as CPU and memory than command line interfaces. This can be problematic for users with older or less powerful hardware, as the GUI may slow down or freeze their system. • GUIs are not accessible to all users, especially those with disabilities. • GUI can be limited in terms of customization and personalization. This can also limit the ability of developers to create custom interfaces for specific applications. • GUIs are not compatible with all hardware or operating systems. This may limit the range of devices or platforms that can be used to run the software or application, which may be a significant disadvantage to developers and users.
1.2 Command line interface (CLI)
A command line interface (CLI) is a text-based user interface for interacting with a computer at a low level of abstraction. In general, this type of menu is not intended for ordinary users. It is often used when working with cloud services or performing the responsibilities of system administrators. Many programs and services often have a CLI in addition to a GUI to make it easier to automate tasks. When using bots or communicating through programs, pressing buttons on a graphical interface can be difficult. It is much easier to instruct the computer to execute a specific console command.
24 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design (alan.app-2020)
Figure 2: command line interface
Advantages of command line interface,
• If the user knows how to use the CLI and is familiar with the various commands, it is possible to complete the required task quickly by entering the commands in the CLI. • Command Line Interface requires much less memory (RAM) to use compared to other types of user interfaces. • Most commands are automatically completed by clicking the TAB key on the keyboard when typing commands in the Command Line Interface. • CLI also helps to communicate devices. User can also execute various commands on remote computers. Using the CLI, various services can be connected to the computer. • User does not need to install windows to execute commands in CLI. All operating systems support the CLI. Mac has its own CLI, UNIX and Linux have their own CLI. Disadvantages of Command Line Interface, • Commands must be typed correctly. If there is a typo, the command will fail and the user will not be able to perform the required task. • There are so many commands used in CLI that it is difficult to remember all those commands. UNIX has more than 100 commands for CLI.
25 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • If the user writes wrong commands with any spelling, it may delete any file or move the file to wrong location. If the user accidentally deletes any file, it creates problem for the user and sometimes the file contains important information. • The user must be very careful when using commands because most commands in the command line interface cannot be reversed or undone. • The command line interface does not have images and graphics on the screen. (itrelease.com-2021)
1.3 Menu-driven User Interface
A menu-based user interface is a type of graphical user interface (GUI) in which the user interacts with the software or application by selecting options from a series of menus or lists. In a menu-based interface, the user is presented with a series of choices or options, usually displayed as a list or hierarchy, and can navigate through the menu system by selecting the desired option. Menu-based interfaces are typically used in applications with a limited number of features or options, such as a calculator or word processor, because they provide a simple and intuitive way to access these features. However, menu-based interfaces can be limited in terms of flexibility and control, as users cannot access certain features or change certain settings without going through various menus or dialogs. Also, menu-based interfaces can be time-consuming to navigate, especially if the menu system is complex or poorly designed. (reference.com-2022)
Figure 3: Menu-driven user interface
26 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Advantages of Menu-Driven User Interface, • Menu-driven user interfaces are generally intuitive and easy to understand and can be used easily even by users who are not very familiar with computers or the application in question. • Menus help organize features and functions in a logical and easy-to-navigate structure, making it easier for users to find what they need. • The use of menus helps present available options and features in a clear and concise manner, reducing the potential for confusion or error. • Designed to be efficient with quick access to commonly used features and functions. • It is quite easy for the software programmer to create the same menus in different languages. Disadvantages of Menu-Driven User Interface, • Users are limited in their ability to perform complex tasks when working with menu-driven interfaces, as they do not provide interactivity compared to other forms of interfaces. • Menu-driven interfaces can suffer from inconsistent design, which can make it difficult for users to navigate between different menus or sections of the application. • Menu-driven interfaces can be challenging to navigate if menus are poorly organized or have too many levels of submenus. • Although menus are customizable to some extent, they may not offer the same level of customization as other types of interfaces, which may limit users' ability to tailor the interface to their specific needs. • Menu-driven interfaces may not provide the same level of functionality as other types of interfaces, such as command-line interfaces or graphical user interfaces.
1.4 Form-based User Interface (UI)
A forms-based user interface (UI) is a type of graphical user interface (GUI) that uses forms to collect and display information from users. It is a structured approach to data entry and presentation commonly used in business applications and data management systems. In a form-based UI, users are presented with a series of fields or input boxes, each labelled with a description of the type of information to be entered. Users can enter information
27 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design such as text, numbers, or dates into these fields. Forms can also include drop-down menus, check boxes, radio buttons, and other controls to facilitate data entry. Form-based UI offers several advantages. They are easy to use and understand as users can quickly identify the information they need and the format in which it should be entered. Forms also provide a structured approach to data entry, which helps improve data accuracy and completeness. (aloa.co-2023/ techtarget.com-2021)
Figure 4: Form- based interface
Advantages of Form-based User Interface,
• Form-based user interfaces are simple and straightforward, making it easy for users to understand how to interact with the interface and enter information. • Because form-based user interfaces provide a clear and structured approach to data entry, they can help reduce errors caused by users entering incorrect or incomplete information. • Form-based user interfaces provide a consistent experience for users, making it easy to complete similar tasks or enter similar types of information across different forms.
28 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • By providing clear directions and validation rules, form-based user interfaces can help ensure that data entered is accurate and complete. • Form-based user interfaces help speed up data entry by providing pre-populated fields, drop-down lists, and other features that make it easy for users to enter information quickly. Disadvantages of Form-based User Interface, • Form-based user interfaces are often rigid in their design, which can limit the flexibility to customize the interface according to the user's needs or preferences. • Form-based user interfaces may not be the best option for complex tasks or data entry that require a lot of context or explanation. • Form-based user interfaces are not well suited for use on mobile devices, as screen real estate is limited, and typing can be more difficult. • Forms-based user interfaces can be difficult to update, especially if changes are required to the underlying data structure or validation rules. • Form filling can be a repetitive and mundane task, which can lead to boredom or frustration for the user.
1.5 Voice User Interface
Voice user interfaces (VUIs) enable users to interact with a system using voice commands, providing a hands-free and eyes-free way to engage with a product. Virtual assistants, such as Siri, Google Assistant, and Alexa, are examples of VUIs. However, VUIs lack visual cues, making it critical for designers to clearly communicate interaction options and functionality to users. Users also need to be trained to understand what type of voice commands they can use and what type of interactions they can perform. Designers must pay close attention to how easily users may overstep with expectations, which is why simple design is essential. A user's patience in building a rapport with the VUI will lead to greater satisfaction and more accurate responses. Designing VUI actions is different from graphical user interface design because VUIs lack visual affordances. It is crucial for VUIs to state possible interaction options and limit the amount of information given. Users need to be trained on what commands to use and how to interact. Designers should focus on simplicity to remind users that they are not engaging in a two-way human conversation. Users' patience in building rapport with the
29 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design VUI will improve satisfaction as the VUI becomes more familiar with the speaker's voice and provides more accurate responses. (interaction-design.org-2022)
Figure 5: Voice user interface
Advantages of Voice User Interface,
• Users can interact with a voice user interface without using their hands or eyes, allowing for greater convenience and accessibility. • Voice user interfaces can be an excellent alternative for users with visual or physical impairments who find it difficult to use graphical interfaces. • Voice user interfaces can easily scale to different devices and platforms, making them a versatile option for companies looking to expand their product offerings. • Voice user interfaces can overcome language barriers by allowing users to interact with the interface using their preferred language. • Voice user interfaces are generally easy to use and require minimal training, as users are already familiar with speaking and communicating. Disadvantages of Voice User Interface, • Voice user interfaces can misunderstand user commands, especially if the user has an accent or speaks too quickly or softly.
30 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • Voice user interfaces may require a stable Internet connection to function, which can be a challenge in areas with poor connectivity. • Voice user interfaces lack visual cues and feedback, and users may rely on graphical interfaces, making it challenging to provide clear and concise feedback. • Voice user interfaces can struggle to distinguish between different users, which can lead to confusion and inaccurate responses. • Users may need some training to understand how to effectively use a Voice User Interface, which takes time and effort.
1.6 Touchscreen graphic User Interface
A touchscreen graphical user interface (GUI) is a type of user interface that allows users to interact with a device or software by using their fingers to touch and manipulate on-screen graphics and controls. Touchscreen GUIs are commonly used in smartphones, tablets, and other portable devices, as well as in kiosks, point-of-sale systems, and other interactive displays. Touchscreen technology has been a game-changer in the world of computing, powering the success of smartphones and tablets by making operation intuitive and easy. However, the first-generation touchscreen controls, such as stylus-based systems, are outdated and don't meet the expectations of today's users. To meet this demand, hardware and software must be developed to provide the same level of touchscreen control as personal devices. This requires the development of a rugged touchscreen that meets safety regulations and software that creates a simple and intuitive interface that makes the most of the technology for usability and data representation. (iconscientific.com-2021)
31 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 6: Touchscreen graphic user interface
Advantages of Touchscreen Graphic User Interface,
• Touchscreen GUIs allow users to navigate through menus or perform tasks faster as they can touch or swipe on the screen rather than using a mouse. • Touchscreen GUIs are often intuitive and easy to use, as users can touch and manipulate the graphics and controls on the screen. • Touchscreen GUIs can be aesthetically pleasing as they enable designers to create visually appealing graphics and animations that enhance the user experience. • Touchscreen GUIs can be accessed by users with physical disabilities or impairments that make it difficult to use traditional input devices such as a mouse or keyboard. • Touchscreen GUIs can be easily customized and adapted to different contexts, as designers can create new interfaces or modify existing ones without changing the physical hardware. Disadvantages of Touchscreen Graphic User Interface, • Touchscreens can consume more power than other input devices, which affects battery life and requires frequent charging. • Touchscreens are susceptible to scratches, cracks and other forms of damage, which can affect their performance and lifespan. • Touchscreens can be sensitive to environmental factors such as temperature, humidity, and electromagnetic interference, which can affect their performance and accuracy.
32 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • Touchscreen technology can be expensive, especially for larger screens or advanced devices. • Touchscreen GUIs are not compatible with all software or applications and may limit their functionality in certain contexts.
1.7 User experience
The user experience (UX) of a product or service refers to all the interactions a user has with its interface. It is a personal and internal experience that a customer goes through when using a product, and it can greatly influence their purchasing decisions. For example, a customer who finds the purchasing process long and complicated will have a bad UX, while an easy and hassle-free experience will result in a good UX. The better the UX a product offers, the more likely customers are to choose it over its competitors, making it a significant differentiator in a crowded marketplace. Achieving an exemplary user experience requires meeting the exact needs of the customer in a simple and elegant way. This means that simply providing a checklist of features is not enough. A high-quality UX involves a seamless merging of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design. By working together, these teams can create products that are a joy to own and use. Overall, UX has become increasingly relevant as it has the power to impact customer satisfaction and loyalty. Therefore, businesses should prioritize providing a positive UX to their customers to stay competitive and succeed in today's market. (userreport.com-2019)
User experience can be classified under different conditions. Some of those categories are,
33 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 7: User experience types (devgenius.io)
physical experience Physical Experience refers to the tactile sensation felt during interaction with a system and can be influenced by the object being used or the environment. Touch keyboards lack the tactile feedback of traditional keyboards, leading to reduced usability and accuracy. To address this, Apple introduced vibration feedback to their touch keyboard, resulting in improved user satisfaction. Mental experience The mental experience of a user refers to how they perceive and comprehend their interaction with a system. It is a complex process that involves various factors such as awareness, cognition, memory, will, and imagination. Unlike physical experience, mental experience can vary between individuals, as it is influenced by their unique perspective and personal history. Emotional experience Emotional experience is a crucial aspect of user experience and can be considered as a subgroup of the broader category of mental experience. It refers to the range of emotions that a user may experience while interacting with a system. These emotions can include love, anger, fear, empathy, shyness, excitement, and sadness, among others. Social experience
34 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design A social experience is a situation where an individual user shares their experience as part of a social phenomenon. This includes sharing experiences within one's social circle, whether with friends, family, or the wider community. The process of sharing experiences with others is considered the foundation of modern information systems. Virtual experience Virtual or simulated experience is the fastest growing type of user experience. It is not real but involves creating a realistic and immersive experience for the user. Virtual experiences are perceived differently compared to real-life experiences, but they are still relevant to the user. These experiences can be immersive or non-immersive depending on the level of interaction and engagement. (devgenius.io-2022)
1.9 User experience (UX) and User Interface (UI)
UX (User Experience) and UI (User Interface) are two important concepts in the design of digital products and services. UX focuses on the overall experience of the user, while UI focuses on the visual and interactive elements that enable that experience. Both UX and UI are crucial components in the design of digital products and services, and a good balance of both can result in a product/service that is both user-friendly and aesthetically pleasing. In the world of product design, UX (User Experience) and UI (User Interface) are two essential elements. While they are sometimes considered separate fields, with UX focusing on research and ideation and UI focusing on aesthetics and branding, they are closely intertwined. In fact, many job postings now combine the roles of UX/UI designers into one position. This is because a designer who understands both UX and UI can bring more value to the design process, resulting in better ideas, more efficient use of time, and ultimately, a more marketable hire. By having one person shepherd the product through the entire creation process, companies can ensure that the user remains the primary focus and that the design is both beautiful and functional. (flatironschool.com-2022)
1.10 Tools available in User experience (UX) and User Interface (UI)
User Experience (UX) and User Interface (UI) designers use a variety of standard tools to aid in the design and development process. These tools help designers visualize their ideas, create prototypes, and test the usability of their designs. These tools allow designers to create low-fidelity and high-fidelity mock-ups of their designs, which can be shared and tested with stakeholders and users.
35 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design User Experience (UX) and User Interface (UI) development tools • Wireframing • Prototyping • Sketching
1.10.1 Wireframing
Wireframing is an essential part of the design process, providing a visual representation of
the structure, layout, and functionality of a webpage or app. Much like an architectural blueprint, wireframes allow designers to plan the information architecture and user flow, ensuring a seamless user experience. The wireframe can be created by hand or digitally and usually features minimal styling, colour, and graphics to focus on the layout and functionality. By creating a wireframe, all stakeholders can agree on the design before development begins, saving time and resources. Wireframing is a crucial practice for UX designers seeking to create effective interfaces. (careerfoundry.com-2022)
Figure 8: Wireframe (vecteezy.com)
Advantages and disadvantages of wireframing
Advantages,
36 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • Wireframes can save time and money in the design process, allowing designers to catch potential problems and make changes before they become too expensive to fix. • Wireframes provide a clear and concise visual representation of page structure, layout, and information design. • Wireframes help to quickly iterate and experiment with different layouts and functionalities, without investing too much time or resources into the design process. • Wireframes are an excellent communication tool, helping to ensure that all stakeholders are on the same page before moving onto the more detailed design stages. • Wireframes force designers to focus on functionality and user experience, rather than getting bogged down in aesthetics and visual details. Disadvantages, • Wireframes are a useful tool but cannot replace the importance of user testing and feedback to ensure a successful product. • Some design projects may not require wireframes, such as when the design is simple and straightforward, or when stakeholders have a clear understanding of what they want the final product to look like. • Because wireframes are typically devoid of colour and graphics, stakeholders may struggle to visualize the final product and may require additional explanation. • Wireframes often lack advanced functionality that users expect in a finished product, such as interactive elements and animations. • Creating detailed wireframes can be a time-consuming process, especially for more complex designs.
1.10.2 Prototyping
Prototyping is an essential step in the design process for creating digital products, as it allows you to test and refine ideas before investing in the development of a final product. A prototype is a simulation of the product you want to create, which can be experienced as a fully functioning product, without the need for a developer to create the final code. This allows you to test out all the features of your product, validate your ideas, and verify the
37 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design overall user experience strategy. There are various types of tools available for creating prototypes, each with their own unique features and benefits. (infragistics.com-2022)
Figure 9: Prototyping (forbes.com)
Advantages and Disadvantages of prototyping
Advantages, • Prototyping allows for early user feedback, which can help in identifying and addressing usability issues before launching the final product. • A prototype is less expensive to build than a full-scale product. This can save development costs and reduce the risk of failure. • Prototyping is quicker than building a full-scale product, and it enables developers to test multiple concepts in a shorter amount of time. • Prototypes can help improve communication between designers, developers, and stakeholders by providing a visual representation of the product and enabling feedback. • Prototyping can help reduce the risk of failure by identifying issues early in the development process. Disadvantages, • Prototypes may not have all the features or functionality of the final product, which can make it difficult to test some aspects of the user experience. • While prototyping can save time in the long run, building a prototype can be time- consuming, especially if multiple iterations are required.
38 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • Stakeholders may misinterpret the purpose of a prototype and assume that it is a final product, which can lead to confusion and false expectations. • While prototypes are less expensive than a full-scale product, they still require resources and time to build, which can be a cost consideration for smaller businesses or start-ups. • Depending on the tool used to create a prototype, there may be technical limitations that prevent certain interactions or animations from being tested.
1.10.3 Sketching
Sketching is an essential skill for user experience designers to communicate their ideas and generate concepts effectively. With the challenge of meeting client objectives without wasting resources, sketching provides an efficient and cost-effective way of communicating design ideas. By mapping user flows, creating wireframes, and generating basic design concepts, sketching can quickly turn abstract ideas into tangible representations. Sketching allows for easier collaboration between team members and clients, enabling the development of a shared vision for the project. (invisionapp.com- 2022)
Figure 10: Sketching (invisionapp.com)
Advantages and disadvantages of sketching
Advantages, • Sketching allows designers to quickly explore and iterate ideas without investing too much time or resources.
39 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • Sketching allows for free form thinking and encourages designers to think beyond conventional solutions. • Sketching can be done individually or in a group, making it a great way to collaborate and share ideas with team members. • Sketching requires only basic tools such as pen and paper, making it a cost-effective way to explore design concepts. • Sketches can be easily understood by non-designers, making it an effective way to communicate design concepts to stakeholders. Disadvantages, • Sketching may not provide enough detail for some stakeholders, making it difficult to fully understand the design concept. • Sketches may lack the polish and refinement of more detailed designs, which may make it difficult for stakeholders to envision the final product. • Sketches may not accurately reflect the final design, leading to misunderstandings and miscommunications. • Sketches may not be suitable for testing usability or functionality, as they do not provide a working prototype. • Sketching may not be suitable for more complex designs, where a more detailed and structured approach is needed.
1.11 Impact of UX & UI development in Software Development life Cycle
User Experience (UX) and User Interface (UI) development are critical components of the software development lifecycle. They ensure that the software is easy to use, visually appealing and meets the needs of the users. By engaging UX and UI designers early in the process, software development teams can create software that is more likely to succeed in the marketplace.
1.11.1 Software Development Life Cycle. (SDLC)
The software development life cycle (SDLC) is a process used to design, develop, and maintain software. It is a framework that defines the steps involved in creating software from the initial concept to its final implementation and maintenance. The SDLC provides a systematic and organized approach to software development that helps to ensure that the software is of high quality, meets user requirements, and is delivered on time and within
40 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design budget. The SDLC consists of several stages or phases, each of which has its own set of activities and deliverables. (javatpoint.com-2022)
1.11.2 The stages of Software Development Life Cycle (SLDC)
Figure 11: Software Development Life Cycle (uxdesign.cc)
Software Development Life Cycle (SDLC) consists of the following stages,
• Requirement gathering and analysis • Defining requirement • Design • Building • Testing the product • Deployment and maintenance Requirement gathering and analysis Requirement gathering and analysis is a crucial phase of the Software Development Life Cycle (SDLC). It involves identifying, analyzing, and documenting the requirements for a software system or application. The main goal of this phase is to understand the needs and expectations of the stakeholders, including customers, end-users, and business owners. This phase involves various techniques such as interviews, surveys, and workshops to gather the requirements. Once the requirements are collected, they are analyzed, and a feasibility study is conducted to determine whether the project is technically and economically
41 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design feasible. The outcome of this phase is a detailed requirements document that serves as a blueprint for the design and development phase of the SDLC. Proper requirement gathering and analysis ensure that the software development team delivers a product that meets the needs of the stakeholders and delivers value to the business. Defining requirement After planning and defining the scope of the project, the product team defines and documents the requirements to be approved by the stakeholders. This definition of requirements includes the uses of the application or software, its features, and potential roadblocks. Also, identifying resources and building them into the project is critical. Design Design is a critical aspect of software development that involves creating a plan or blueprint for the software system. System architecture includes conceptualization, design, and specification of components and interfaces. The design phase helps to ensure that the software system is built according to the user's requirements and specifications. Building The development phase of the software development life cycle (SDLC) is a critical step that includes the actual design of the software system. In this phase, the development team writes the code, tests it and debugs any problems that arise. The team also follows the design specifications created in the previous phase to build the software system where the software development work is divided into several parts and each team member works on a specific part. Testing the product After the software is developed, it needs to be tested to check that it works as intended. It is an especially important phase in the SDLC, when software is developed, it is done in parts. Testing allows integration of all these parts of the software and checks how the software works as a whole and whether all its parts are well integrated. Any bugs, errors or problems are identified and resolved to ensure the software runs smoothly. This phase allows developers to ensure a high usage rate and improved satisfaction in users. Deployment and maintenance Once the software goes through the testing phase and fixes all the bugs, it is ready to be rolled out and delivered to users. The software can be deployed in manual or automated mode depending on its requirements and its complexity.
42 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design All software requires ongoing maintenance and support so that bugs that emerge or are not discovered during the testing phase are fixed. This is an important step as it allows developers to constantly work on the quality of the software, which directly affects the user experience. Proper deployment and maintenance are essential for ensuring the software's functionality, reliability, and longevity. It is critical to follow the proper SDLC steps for deployment and maintenance to ensure the software is of the highest quality possible. (tutorialspoint.com-2022/ simplilearn.com-2022)
1.12 End-user test requirements for suitability for specific models and different test results of user experience and interface design
When designing a user interface, it is crucial to consider the user's requirements and needs. The user interface should be intuitive and easy to navigate to ensure that users can accomplish their tasks quickly and efficiently. A user interface that fails to meet user requirements is likely to result in a negative user experience, leading to lower user adoption rates and reduced customer satisfaction. To ensure that a user interface meets the user's requirements, designers use various user experience (UX) and user interface (UI) design methodologies. These methodologies focus on designing interfaces that are easy to use, aesthetically pleasing, and functionally efficient. In addition, end-user testing is used to evaluate the design's effectiveness and identify areas for improvement. User experience testing methods can help evaluate anything from websites and apps to physical products. (geniusee.com-2022/ uxmatters.com-2022) User interface testing UI testing, also known as User Interface testing, is a software testing technique that focuses on the graphical user interface (GUI) of an application. The main goal of UI testing is to ensure that the user interface of an application is intuitive, user-friendly, and visually appealing. UI testing involves verifying that all the buttons, menus, icons, and other elements of the user interface work as intended, and that they are displayed correctly on different devices and platforms. UI Testing covers the gamut of visual indicators and graphic-based icons- toolbars, fonts, menus, text boxes, radio buttons, checkboxes, colors, and more. (uxmatters.com-2022) User Experience testing methods • Card sorting • Moderated user testing
43 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • Unmoderated user testing • Eye tracking • A/B testing Card sorting,
Figure 12: card sorting (usability.de)
Card sorting is a user experience research technique that helps you determine how users categorize and prioritize content on a website. In this method, users are asked to group cards containing information into categories, allowing designers to create an effective site hierarchy and navigation that meets users' specific needs. Whether it's done in person or online, this feedback from real users can help designers create a more user-friendly and efficient website. (crazyegg.com-2021) Moderated user testing,
Figure 13: moderated user testing (trymata.com)
44 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Moderated user testing is a user experience research method in which a moderator guides the testing experience, either in person or in a discussion group setting. The moderator can answer participants' questions, provide insights into the website's goals, and observe any confusion or issues with the user experience. This type of testing is useful for identifying usability issues and obtaining feedback on how a product or interface works. (crazyegg.com-2021) Unmoderated user testing, Unmoderated user testing is a type of user testing where participants are left to their own devices to complete tasks without any moderator present. While it allows for a larger sample size and more diverse feedback, it can also be subject to user bias and less focused feedback. Combining both moderated and unmoderated user testing can provide a more comprehensive understanding of user behaviour and needs. (crazyegg.com-2021) Eye tracking,
Figure 14: eye tracking(adobe.com)
Eye tracking is a powerful tool that can provide valuable insights into how users interact with a user interface or website. It measures where users look on a screen, how long they look at different areas, and the order in which they view content. By analyzing this data, designers can improve the user experience and optimize the design for better engagement and conversions. Eye tracking can also identify potential usability issues and help to mitigate risks early in the development process. Overall, incorporating eye tracking into the design and optimization process can provide a significant competitive advantage. (cxl.com-2022) A/B testing,
45 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 15: A/B testing (usabilitygeek.com)
A/B testing is a method of comparing two versions of a webpage or app to determine which one performs better. It involves randomly dividing users into two groups and showing each group a different version of the page or app. The performance of each version is then measured, and the data is analysed to determine which version performed better in terms of the desired metric, such as conversion rate or click-through rate. A/B testing is a valuable tool for optimizing user experience and ensuring that design changes are effective in achieving the intended goals. (cxl.com-2022)
Activity 02
2 Importance of using multiple different forms of experience and interface design
in building EMC services
Using multiple different forms of experience and interface design in building EMC services is essential because it helps to create a user-friendly and intuitive platform that meets the diverse needs of different end-users. By incorporating various design techniques such as user-cantered design, responsive design, and accessibility, the EMC service can be optimized to offer an engaging, consistent, and seamless experience across all devices and platforms. Additionally, the use of multiple interface design techniques helps to ensure that the design is not only aesthetically pleasing but also functional and intuitive to use. Ultimately, this enhances user satisfaction and improves the overall user experience, leading to increased user adoption and loyalty to the EMC service.
46 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Following are the characteristics of a well-designed user interface that reflects these guidelines, • Clear • User- centred design • Responsive • Efficient • Accessibility • Consistent branding Clear, Clear guidelines are essential for ensuring that user interface design is accessible and inclusive. Guidelines provide a framework for designers to create interfaces that meet the needs of a diverse range of users. For instance, guidelines may include recommendations for text size and contrast, keyboard navigation, and alternative text for images. Clear guidelines help designers to make informed decisions about how to design interfaces that are easy to use and understand for all users, regardless of their abilities or preferences. In addition, guidelines can help ensure consistency in design, which can enhance the user experience and make it easier for users to navigate and understand the interface. User-centred design, User-cantered design (UCD) is an approach to product design that puts the needs and expectations of the user at the forefront of the design process. It involves extensive research and testing to better understand the user's goals, needs, and behaviour, and uses this information to inform the design choices. The goal of UCD is to create a product that is not only functional and efficient but also enjoyable and satisfying for the user. The iterative nature of UCD ensures that feedback is constantly gathered and incorporated into the design, resulting in a product that is tailored to the user's needs and preferences. UCD can be applied to various products, from software applications to physical products, and is essential in ensuring that the final product meets the needs of its users. (careerfoundry.com- 2021) Responsive, Responsive design is a crucial aspect of modern web design as it enables interfaces to be viewed seamlessly on any device or screen size. With the rise of mobile devices, responsive design has become increasingly important for ensuring that users can access content without difficulty. By utilizing media queries, designers can optimize the layout of a
47 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design website, adjust its appearance, and adapt its functionality to meet the needs of the user's device. This approach to web design is particularly useful in the current era of device diversity and helps ensure that the user experience remains consistent across all devices. Overall, responsive design is a critical technique for creating effective and engaging user interfaces that adapt to the needs of the user, regardless of the device they are using. (interaction-design.org-2022) Efficient, Efficiency is the ability to accomplish tasks with the least amount of effort and time possible. In the context of design, efficiency refers to designing interfaces that allow users to complete tasks quickly and effectively, without unnecessary steps or distractions. An efficient design should provide a clear and logical path for users to follow, minimizing the number of clicks or taps required to achieve their goals. It should also consider the user's context, such as their goals, habits, and preferences, to provide a personalized and streamlined experience. An efficient design can increase user productivity, satisfaction, and loyalty, as users are more likely to return to an interface that makes their tasks easier and faster to complete. Accessibility, Ensuring accessibility and inclusivity in the design is crucial for providing a seamless user experience for all users. This means designing the interface in a way that accommodates people with disabilities, such as visual or hearing impairments, and ensuring that it is compatible with assistive technologies like screen readers or voice recognition software. It also involves creating clear and concise language and visual cues that are easy to understand for users with different levels of literacy or cultural backgrounds. By incorporating accessibility and inclusivity into the design process, can attract and retain a wider range of users and ensure that everyone has equal access to the benefits and features of the service. (linkedin.com-2022) Consistent branding, Consistency is a fundamental principle of UI design that refers to using the same design elements and patterns throughout the user interface to create a harmonious and seamless visual experience for the user. Inconsistent UI design can lead to confusion, frustration, and even mistrust among users. In responsive web design, consistency becomes even more critical as the UI needs to adapt to different screen sizes while maintaining the same look and feel. Consistency in UI design can be achieved by using a consistent layout,
48 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design typography, colour palette, and visual hierarchy across all devices and platforms. This not only enhances the user experience but also helps to establish brand recognition and trust among users. Considering the above, E-music cloud (EMC) is a music application designed for global accessibility on any device. To provide a good physical experience for users, the application ensures that all input devices such as keyboards and touchscreens are easy to use and visually appealing. EMC also prioritizes a simple and intuitive design to ensure that users of all literacy levels can navigate the application easily. The application aims to provide a smooth and fresh emotional experience for users to keep them engaged and prevent them from switching to other music apps. EMC places emphasis on social experiences, allowing users to give and receive music recommendations, comment on songs, and share gifts with other users. The application also integrates surrounding sound features to provide a virtual experience for users. Graphical user interfaces are widely used in the application, making it easy for users to understand and use. The menu-driven interface allows for easy song classification and software settings, while form-based interfaces allow users to provide personal information and make payments. Additionally, a natural language interface allows users to search for songs by typing or pronouncing parts of the song. Overall, EMC is designed with the user in mind, offering an inclusive and engaging music experience for all.
2.1 End- user requirement
End user requirements are the specific needs and expectations that users have for a particular product or service. These requirements play a critical role in the development process as they provide a clear understanding of the user's goals and objectives. To determine end user requirements, it is essential to engage with users and ask them about the tasks they wish to perform. By gaining a clear understanding of these tasks, developers can design a product or service that meets the needs of its users and provides a positive user experience. (bbc.co.uk-2022) End-user requirement of EMC An end user requirement for an e-music cloud service might be the ability to store and access their music library from any device with an internet connection easily and securely.
49 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design They may also require a user-friendly interface that allows for easy searching, sorting, and creating playlists, as well as the ability to seamlessly integrate with their existing music library and music player software. Another important requirement could be reliable and fast streaming or downloading of high-quality audio files, as well as options for sharing and collaborating on playlists with friends and family. Additionally, users may prioritize the security and privacy of their personal information and music library, including secure login and password protection and the ability to control who has access to their music and data. End-users in EMC, • Music purchaser/ Listeners • Music creators/ producers • Administrators Music purchaser/ listeners, Music purchasers and listeners have various end-user requirements when it comes to E- Music Cloud. Some of their requirements may include the ability to easily search for and discover new music, create, and manage playlists, access music on multiple devices, stream music seamlessly without interruptions or buffering, download music for offline listening, and have access to a large and diverse music library. Additionally, they may require a user- friendly and visually appealing interface, personalized music recommendations, easy payment options, and reliable customer support. They are always looking for other similar software in the market and will leave EMC if they fail to provide a good experience. Therefore, it is important to have an app that is updated to suit music buyers and users with diverse musical tastes. Music creators/ producers, Music creators/producers using E-Music Cloud would have different end user requirements compared to music purchasers/listeners. They might require features such as an easy-to-use music uploading system, options to customize and manage their music portfolio, access to data analytics and insights on their tracks, collaboration tools for working with other artists, and easy royalty distribution. They might also require features that allow them to monetize their music through the platform, such as setting prices for their tracks, receiving payment for streams or downloads, and having access to copyright protection services. They will always provide their services to the software, which has many users. The E-Music Cloud platform should also have a user-friendly interface that caters to the unique needs of music
50 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design creators and producers, making it easy for them to manage their music and connect with potential collaborators or customers. Administrators, As an administrator for an e-music cloud platform, the system administrator would be responsible for maintaining the servers and network infrastructure of the platform. They would also need to ensure that the cloud infrastructure is scalable, secure, and reliable. In addition, the administrator would need to work closely with the development team to ensure that new features and updates are properly deployed and integrated into the system. It is also important for the administrator to have a deep understanding of the end user requirements and ensure that the platform is designed and configured to meet those needs. Ultimately, the system administrator plays a crucial role in ensuring that the e-music cloud platform is running smoothly and efficiently for all users. (simplilearn.com-2023) Importance of using multiple different forms of experience and interface design in building EMC services.
2.2 Persona
Personas are an essential tool for human-cantered design as they allow designers to understand their target audience and design products that meet their needs. When creating a persona, it is important to consider not only demographic information but also behavioural patterns, motivations, goals, and pain points. This information can be gathered through user research methods, such as interviews, surveys, and user testing. By synthesizing this data, designers can create personas that are realistic and representative of their target audience. (usability.gov-2020)
Once a persona has been created, designers can use it to guide their decision-making throughout the design process. Personas can be used to help designers understand the user's perspective, identify design problems, and test design solutions. By keeping the persona in mind, designers can ensure that their design decisions are tailored to the user's needs and goals. This, in turn, can lead to a better user experience and a higher likelihood of product success. Overall, personas are a valuable tool for designers and developers as they enable them to create user-cantered products that are more likely to meet the needs of their target audience.
51 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 2.2.1 The classification of persona
• Design personas • Marketing personas • Proto personas Design personas Design Personas (for example User Personas and UX Personas) are representatives of users of a product or service who have similar points of usage habits, product needs, preferences, and goals. They can describe the needs of potential users and help developers focus their attention on users in functional design and conforming products to user needs. Marketing personas Marketing personas are typical characters of a product or company's customers, who have similarities in purchasing preferences, social relationships, consumption patterns, and ages. Personas help the company determine what their customers are like. (muz.li-2018) Proto personas These are preliminary personas that are created based on assumptions, generalizations, and secondary research without involving actual user data. Proto personas do not have the accuracy of design personas and only use as the “last option”.
2.2.2 Creating a persona
Personas can be created in many ways – it all depends on the budget, the nature of the project, and the type of data designers can collect. Below are the steps to create a persona, • Collect the information about users • Identifying common factors in research data • Create personas and prioritize them • Create personas and prioritize them • Creating user persona UX documents by discovering how to fit the persona Collect the information factors about users The first step is to conduct user research to understand the mindset, motivations, and behaviours of the target audience/clients. It is important to consider what the server wants. It is important to gather more information and knowledge about users by interviewing and/or observing enough people who represent a selected group of users. Identifying common factors in research data
52 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design In this step, the aim is to identify the data country of users with similar usages and interests. These grouping tendencies form the basis of everyone. Create personas and prioritize them It is important to group people around behaviour patterns. The researcher's goal here is to describe each user in a way that conveys enough insight and empathy to understand the user. During this step, it is best to avoid the temptation to collect a lot of personal information. Often, researchers create more than one persona for each product. Most interactive products have multiple audience user segments, so building multiple personas seems logical. However, with many people, the process can be neglected. Individuals can blur together. That is why it is also important to minimize the number of user persons in this step so that the focus can be on the design, and this can ensure better success. Create personas and prioritize them Scenarios help designers understand key user flows – By combining user personas with scenarios, the designer identifies the need, and from those needs the designer creates design solutions. The more successful the solution deployment is from the user's perspective, the more likely use cases must be articulated. The following information must be entered when creating a user persona template: personal name Photo demographics Goals and needs behaviour Here the details of the real people participating in the research are not removed and only replaced. Creating user persona UX documents by discovering how to fit the persona Socializing people among stakeholders is critical in driving the design team to action. All team members and stakeholders must have positive associations with individuals and see value in them. As people become familiar with individuals, they begin to talk about them as if they were real people. A well-built personality becomes another member of the team (adobe.com-2019)
53 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 2.2.3 The elements of a persona
The best way to start formulating how you will target and advertise to your customers is, naturally, to identify who those customers are. A solution to this can be provided through the elements that make up a user persona. (forumone.com-2022) • Personal information- It contains basic background information about users. If they are name, gender, age, occupation, photo, etc. • Description- A brief explanation of who the users are, what they want, and what their focus and interests are. • Motivation- A brief explanation of what drives users' actions and interests. • Main quote- A compelling quote that summarizes what this audience's immediate needs or perspective is. • Goals- Goals that the user is trying to accomplish by using the website. • Concerns- By including this, it is possible to know what the potential blocking factors of the audience are • Feelings- The designer can deliver what the audience expects by making them empathize with the emotions they want to feel or the work to be done with the organization.
2.2.4 Music purchaser persona
This will help the designer to target the ideal customer,
Figure 16: Music purchaser persona (Author-2023)
54 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 2.3 Empathy Map
A sentiment map is a simple, easy-to-understand visualization designed to gain insight into
a user's knowledge of behaviour and attitudes. It is a useful tool for design teams to better understand their users. Empathy mapping is a simple workshop activity that can be done with creative teams to build empathy for stakeholders, marketing and sales, product development, or end users. (uxbooth.com-2022) In the form of an empathy map, it is a square divided into four quadrants with the user or client in the middle. Each of the four quadrants consists of a category that helps to delve deeper into the user's mind. The four quadrants of the empathy map represent what the user says, thinks, feels, and does. Says, The "says" part of the sentiment map focuses on what your core user is saying about the product and its use. This information and data can usually be easily gathered by conducting a usability test or survey to better capture users' opinions. This section contains direct quotes from the user from the research phase or previous data collected. Does, This section contains the tasks that the user performs when using the service, and it is very important that the designers capture each of those actions. This is where understanding a customer journey comes in very handy as you can map every step the user takes and understand each specific task they complete. By mapping user tasks, you can better understand both the actions the user takes and the specific areas they may struggle with. Able to. Thinks, This section may have similar content to the "Says" section, but it focuses more on what a user think. Use qualitative research to ask what is most important to the user and what is on their mind. Seeing why the user hesitates to share their thoughts out loud can reveal further insight into the user and how they relate to the product or experience at hand. Combined with the "saying" section, this is a good way to consider what the user is thinking and what users are saying to each other. Feels, The sentiment square considers the user's feelings when they use your service. This section can have many different emotions and it is important to think about not only how the user feels about the whole process, but also how the user feels about each step. This can include
55 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design different things and how the user feels about the service. Contains both types of negative comments. Creating something creative using both these ideas is more effective. (careerfoundry.com-2022)
2.3.1 Empathy map of E-Music Cloud user
Figure 17: Empathy map of EMC user (Author-2023)
2.4 Experience map
An experience map is the creation of a complete end-to-end experience mapping experience
performed by a "typical" person to accomplish a goal. This experience is not specific to a specific business or product. It is used to understand human behaviour in general. It helps an organization visualize a basic understanding of an experience before considering a particular product or service. (questionpro.com-2023)
56 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 2.4.1 Experience map of E-Music Cloud user
Figure 18: Experience map of EMC user (Author-2023)
2.5 Customer journey map
Customer journey mapping is a very successful technique for understanding what motivates customers - what their needs are, what their hesitations and interests are. Although most organizations are reasonably good at collecting data about their customers, data alone fails to communicate the frustrations and experiences the customer is experiencing. Therefore, the most successful solution for it is to prepare a customer journey map. The customer journey map shows one or more diagrams that represent the stages that customers go through until entering the customer interaction service with a company. To create effective visual maps that reflect customer journeys through these channels, journey maps must be rooted in data-driven research and visually represent the various stages customers experience based on multiple dimensions, including customer sentiment, goals, and touchpoints. (visual-paradigm.com-2022) Benefits of customer journey mapping, • Empathize with customers- Compare the actual buyer's journey with your expectations to better understand customers' pain points.
57 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • Gaining a unified view of the customer journey – This means providing the same customer journey data and intelligence to all relevant groups using the service. • Plug delivery or customer experience gaps – benchmarking the customer experience customers expect against what they are getting using insights from customer journey maps • Predict Customer Behavior- Predict the likely behavior of the buyer at various touch points. • Improve the customer journey – Use insights to improve the customer journey by creating logical ordering to simplify the customer journey and make it easier for buyers to engage with the brand. (capterra.com-2022) Six steps of create a customer journey map 1. Identify buyer goals 2. Identify and map all customer touch points 3. Match customer touch points 4. Identify customer pain points and challengers 5. Prioritize and resolve pressing issues 6. Update your map regularly
58 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 2.5.1 Customer journey map for E-Music Cloud
Figure 19: Customer journey map (Author 2023)
2.6 Service blueprint
A service blueprint is a diagram that visualizes the relationships between various physical or digital evidence and processes—those directly tied to the touchpoints of a specific customer journey. The service plan can be considered as the second part for customer journey maps. Like customer-journey maps, blueprints help with complex and problematic scenarios in many service-related offerings. Blueprinting is a successful approach for experiences that are omnichannel, involve multiple touchpoints, or require a cross- functional effort. A service plan corresponds to a specific customer journey and specific user goals associated with it. This itinerary may vary in scope. (nngroup.com-2022)
2.6.1 Uses and benefits of service blueprint
Service blueprint can better understand an organization's services, resources, and processes. Using a service blueprint offers many advantages. Service blueprint is a useful visual medium for understanding and improving customer experience in service-oriented businesses. It helps visualize the customer journey, align internal processes, prioritize improvements, develop new services, and train employees. It can also identify disruptions, opportunities for automation, and ways to differentiate from competitors. The service blueprints give an organization a comprehensive understanding of the resources and
59 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design processes that exist within its service, both external and internal, visible, and invisible to the user - to the extent that it is possible. Focusing on these big insights provides strategic benefits for the business. (nngroup.com-2022) • Service blueprinting helps understand the entire customer journey, which helps businesses identify pain points and opportunities to improve the customer experience. • Service Blueprinting helps businesses ensure that everyone is working equally to deliver a seamless customer experience internally. • Prioritize improvements by identifying areas for improvement in dealing with customers. • Human resource managers use the service plan in formulating job descriptions, job specifications, job evaluations, performance standards, training and appraisal schemes, and compensation schemes. • The service plan through internal interaction channels reinforces continuous quality improvement by clarifying interfaces across departmental lines. • Service blueprinting can help businesses measure and track customer satisfaction, experience, and other key performance indicators. • Service planning can help businesses identify and prepare for changes in customer needs or market trends. Elements of service blueprint Service blueprints take many different visual forms, some more graphic than others. Regardless of the visual form and scope, each service blueprinting consists of several key elements, • Customer actions- Understanding the steps, choices, activities, and interactions a customer makes while working with a service to reach a goal. Customer actions are derived from research or a customer-journey map. Understanding customer actions is essential for businesses to design a service that meets customer needs and expectations. • Front-stage action- Actions that take place directly in front of the customer. These actions can be between people or between people and computers. Interpersonal actions are the steps and activities performed by the employee interacting with the customer. Human-computer operations are performed when the customer interacts with a mobile application or ATM using self-service technology. Actions that are
60 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design visible to the customer, such as greeting the customer, providing information, or providing the service. • Back-stage action- Actions and activities that take place behind the scenes in support of events on stage. These actions can be performed by a backstage employee or a front-end employee who does something invisible to the customer, such as coordinating with other departments. • Process- This involves all operations, interactions, and internal services performed by non-contact employees to support and help contact employees who deliver the service. They are invisible from the customer's perspective and are processes that support service delivery, such as billing, scheduling, or customer service.
2.6.2 Service blueprint of E-Music Cloud
Figure 20: Service blueprint of EMC (Author-2023)
61 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Activity 03
3 Development Methodologies of Interaction/Interface
Many software development projects fail to deliver effective user interaction with the available time and financial resources by not adopting a structured user interaction development methodology. Therefore, effective user interaction can be achieved by using user interaction development techniques. Following are some user interaction development techniques, • Measuring Usability of Systems in Contexts (MUSiC), User-cantered design and application development is supported by a robust analytical paradigm known as the Measuring Usability of Systems in Context (MUSiC) methodology. MUSiC outlines the steps to be taken to achieve the product's usability goals. MUSiC is often used as an analytical tool. This technology is structured along several principles. The first principle states that the context of use determines the utility of the product. It shows that the usability of a system depends not only on its fundamentals but also on the goals and characteristics of the user. According to the second principle, a product should be designed for specific situations, utilizing the intended users. According to the third principle, usability measurement should always be done in an appropriate context. The final principle refers to a detailed description of the evaluation context. should always be included in utility measurements. • Participatory Design (PD) A collaborative design method that involves different people in the design process is called participatory design. During the system design process, decisions regarding inputs are often made by the high-level designers of the system design. Since the actual user is not involved in the decision-making process, problems with the usability of the system may still exist when it is designed. Participatory design methodology solves these problems because everyone is included in the design decision-making process. • Logical User-Cantered Design Methodology (LUCID), Logical User Centered Design (LUCID) methodology is a framework used to effectively manage the interface design process with usability in mind. The goals of LUCID are to support a user-centric approach and improve the usability of an application.
62 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design In the LUCID methodology, the design process is built on a strong conceptual model plan. The design is also based on the activities performed by the user. The LUCID methodology consists of six different phases as described below, 1. Envision- The Envision step places emphasis on developing a clear, shared vision of the system to be built. This vision is accompanied by a UI roadmap, which is a document used to communicate the vision with expectations and serves as a basis for evaluating the project's progress and growth. Therefore, it guides the future decision-making of the project. Some of the main objectives of the Envision stage are to create a simple and concise description of the product and to identify design objectives, constraints, target users and key functionalities. 2. Analyse- In the analysis phase, a thorough analysis of the users and their needs is done in terms of the user's system usage needs, expectations, work process and tasks. This analysis is used to conclude comments on the implications of the interface. 3. Design- In the design phase, the basic design of the system is finalized with navigation, visual design, and workflow organization. The design can be created in several steps, starting with sketches, wireframes, and prototypes to finish. This prototype can be considered as the main communication tool between the developer and the user because it can be used to create a more effective and successful user interface with user feedback. 4. Refine- At this stage, the prototype is transformed into a complete specification. The design is then subjected to various usability tests such as A/B testing and moderated usability testing to evaluate the design. A style guide is then created based on the results of the tests. The completed style guide is used to develop and improve the system under the specifications outlined in the test results. 5. Implement- In the implementation phase, the fully developed design is given to the technical development team. Designers play a further important role in this phase as well. Unforeseen technical issues may arise that cause a change in plans. For that reason, the design team continuously monitors development for possible usability issues. Furthermore, designers provide fully detailed screen designs and create further user support materials. 6. Release and follow up- At this point, the product is delivered to the user. Introductory sessions and training sessions can also be offered to help users quickly become familiar with the product. In addition, it is also important to collect 63 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design comments and feedback from users to determine the requirements for updating the next version. (devgenius.io-2022) Considering all the development methods mentioned above, the author recommends the LUCID method as the most appropriate development method for EMC system interface development. By adopting a logical and structured approach, the LUCID methodology ensures that the design process aligns with the user's needs as well as those needs. This leads to the development of user-friendly interfaces that require minimal human memory to operate, making the system easier to use for EMC users. Using a roadmap in the initial stages of the methodology helps to create a more effective and attractive interface to EMC by understanding the project's objectives and concepts. Additionally, the design process of the LUCID methodology consists of several phases, allowing the interface and user experience to evolve and improve through repeated testing of prototypes. Therefore, the LUCID methodology is a highly recommended development methodology for designing interfaces that can effectively meet user needs and preferences.
3.1 EMC user interfaces
Login Interface
Figure 21: Login interface sketch (Author 2023)
64 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 22: Login interface wireframe (Author 2023)
First click Testing 05/04/2023 Jalan Tharupathi 08
73 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Eye- tracking 07/04/2023 Tharushan 10 Madhawa A/B testing 10/04/2023 Mahinsa 20 Jayawickrama Table 1: End user testing plan (Author 2023)
3.3 Card sorting of E-Music Cloud
Card sorting is a technique that helps to design or evaluate the information architecture of a website. In a card sorting session, participants organize and label topics into categories that make sense to them. To perform a card sort, one can use real cards, pieces of paper, or one of several online card sorting software tools. (usability.gov-2022) Below is the sorting of cards done by the author for e-music cloud.
Figure 39: Card sorting in EMC UI design (Author 2023)
74 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 3.4 Interface design development tools
Interface design development tools are design software tools used by designers and developers to create and develop user interfaces for various software systems, applications, and websites. These tools are designed to simplify and streamline the interface design process and create user-friendly and functional interfaces that are easy for users to use. Some of such interface design development tools are given below, Sketch Sketch is a must-have digital design app for every UI pro. This is a vector-based tool, so the designer can easily resize anything drawn without losing the sharpness of the design. This app is more of an advanced digital design app than a drawing tool. Sketch is also great for wireframes and prototyping. (careerfoundry.com-2022)
Figure 40: Sketch (sketch.com)
Invision Studio In Vision is a popular web-based prototyping tool among UX and UI designers. Designers can upload static design files and quickly turn them into high-fidelity, interactive prototypes with this prototyping tool. It is also a great app for collaboration, as client users and other team members can directly comment on the designer's designs, and the designer can share ideas across the team using boards. (careerfoundry.com-2022)
75 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 41: Invision Studio (tutsplus.com)
Axure Axure is an advanced prototyping and wireframing tool that allows designers to create complex, interactive designs for websites and applications. It offers a wide range of features such as dynamic panels, conditional logic, and animations, which enable designers to create highly interactive prototypes without requiring any coding skills. It allows for functionality testing and puts everything together for easy developer handover. With Axure, designers can collaborate with team members and other stakeholders by sharing designs and gathering feedback. In summary, Axure is a versatile and powerful prototyping and wireframing tool that can help designers create attractive and user-centric designs that meet the needs of their clients and users. (webflow.com-2022)
76 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 42: Axure (axure.com)
Craft Craft is a plugin for design tools like Sketch and Adobe XD that works in sync with what the designer is doing in Photoshop or Sketch, with a sync function that updates what the designer is working on in craft. It allows designers to easily create and manage design systems, generate real data for realistic content, and collaborate with team members. Craft is a great tool for designers looking to streamline their design workflow and create visually stunning and interactive designs. (webflow.com-2022)
Figure 43: Craft (invisionapp.com)
77 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figma With powerful editing tools and many convenient features, Figma is a powerful design prototyping tool capable of performing a wide range of tasks, ranging from planning, prototyping, and gathering feedback. Interface designers can especially benefit from the constraints feature, which adapts designs as the screen size changes. figma is browser- based, making it instantly accessible to everyone at any time. As a bonus, it is free for individual use so a designer can test it out and get familiar with how it works. (careerfoundry.com-2022)
Figure 44: Figma (theme-junkie)
Adobe XD Adobe XD is a vector-based tool for designing and prototyping user experiences for web, mobile and voice! While many designers use the Adobe Creative Cloud suite, Adobe XD offers a wide variety of features to create an extremely versatile tool for designing, prototyping, sharing, collaborating, and creating a complete design system. XD natively supports Windows 10 and macOS and is also available as a mobile app for both Android and iOS. (careerfoundry.com-2022)
78 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 45: Adobe XD (cnet.com)
Marvel Marvel is a complete design environment that meets the needs of UI designers with varying levels of expertise. Marvel offers UI designers a comprehensive toolset for their design projects, thanks to its comprehensive feature set, which includes the ability to build low- and high-fidelity wireframes, interactive prototypes, and user tests. Thanks to the user- friendly, intuitive interface, designers can easily bring their imaginative ideas to life. Marvel has several notable features, including the Handoff feature, which makes the transition from design to development easier and more effective by giving developers the HTML code and CSS styles they need to start applying the style. (webflow.com-2022)
79 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 46: Marvel (marvelapp.com)
Considering all the interface design development tools mentioned above, the author used Figma for interface design. Figma is one of the most popular graphic editing applications among designers today. Even a single person can use it for free. Figma can be used to design wireframing website interfaces, mobile app interface design, prototyping, crafting social media posts and all kinds of graphic design work. While there are many advantages to using Figma, there are also disadvantages. Advantages of Figma, • The presentation feature- Creators can view their creations in an online viewer without scrolling so they can see the images they have created in full. Designers can create links to frames, so it will look like a web page, one page leading to another. • Support multiple platforms- Figma is compatible with multiple platforms including Windows, Mac OS, iOS, Android, and Linux. Therefore, designers can successfully create their designs without any compatibility issues. • Fast and frictionless- Once designers have finished working on the files, they can easily upload, drag, zoom, edit, and download the finished work. • An incredible community of designers- Over the years, Figma has grown a large community of developers from all over, who share their design systems, illustrations, templates, plugins, files, icons and more with Figma users.
80 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design • Integrations- Figma can work with some great software and tools. This allows designers and teams to work efficiently and effectively. • Fast loading speed- One of the main reasons why Figma is such a popular tool among designers is that it loads quickly. Opening a new file takes less than two seconds. Due to that reason, the designs of the designers can be created efficiently. • Highly recommendable- When choosing between Adobe Creative Cloud and Figma, most designers recommend Figma. That is because Figma not only comes with many useful features, but it is also easy to use. Disadvantages of Figma, • No offline features- Designers will essentially have to go online to work on Figma and moving anywhere off the network is bad, and designers will not be able to work on the software. • View option- For a casual user, the visualization options of Figma should be improved so that the user who is browsing the application can understand it easily and can use it to the advantage of the users. • Usability issues- Some usability issues may be seen in some cases. Some of Figma's tools are somewhat difficult to find at first. • Default settings- Since Figma is primarily designed as a prototyping tool, it comes with default settings that may not be suitable for every user. • No version control- Version control is very low, so it is hard and difficult to keep track of all the changes that have been made. (fita.in-2022)
3.5 EMC user interface (Alpha version)
Login interface
81 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 47: Login (Author 2023)
Registration interface
Figure 48: Registration (Author 2023)
Payment interface
82 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 49: Payment (Author 2023)
Home interface
Figure 50: Home (Author 2023)
83 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Playlist interface
Figure 51: Playlist (Author 2023)
Artist interface
Figure 52: Artist (Author 2023)
84 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design EMC Publisher Interface (Alpha version) Publisher login interface
Figure 53: Publisher login (Author 2023)
Song upload interface
Figure 54: Song upload (Author 2023)
85 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Withdrawal interface
Figure 55: Withdrawal (Author 2023)
Publisher dashboard
Figure 56: Publisher dashboard (Author 2023)
86 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 3.6 User experiment
People now use music apps daily, therefore it is critical to comprehend their wants and preferences to give them a great user experience. To do this, it is essential to get dependable and frank client feedback. With a core vision in mind, creators of music apps may easily overlook the importance of matching their product to what users want. This can lead to an offering with a poor market fit that does not address the user's issue. To guarantee that their app meets their expectations, delivers a seamless user experience, and offers the needed features and functionalities, music app developers must get feedback from their customers. Music app developers may enhance their app and remain ahead of the competition by gathering and evaluating user input, giving their consumers a better and more individualized experience. Accordingly, to suit the needs of the customer, the author conducted surveys to get feedback on the app prototypes. Using the results, necessary adjustments and modifications were made. Here, the author received about twenty feedbacks and since all those feedbacks cannot be included here, three feedbacks are given below. Feedback 01 User- Ishani Tharaka
87 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 57: Feedback 01
88 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Feedback 02 User- Jalan Tharupathi
Figure 58: Feedback 02
89 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Feedback 03 User- Tharushan Madhawa
Figure 59: Feedback 03
90 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 3.7 Summary of the feedback of the alpha version Twenty people provided feedback to the author. Only three models are given above. In addition, the author writes a summary of the entire feedback in the alpha version feedback summary at this stage. Summary of the EMC user feedback (Alpha version)
Figure 60: Summary of the EMC user feedback- alpha version (Author 2023) The designed prototypes received favourable response after careful evaluation of user feedback, indicating a positive user experience. However, it was noted that there was need for improvement in some areas. Particularly, it was discovered that the prototypes' colour schemes needed improvement. The author proactively modified the initial designs in response to this feedback to make sure they better met the needs and preferences of the users. The objective is to improve the user experience overall and give customers a more aesthetically appealing and engaging interface by fixing these flaws.
91 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 3.8 Feedback evaluation of alpha version Q1: You are satisfied with the colour match used for prototyping The data gathered suggests that the colour matching technique used for prototyping receives a mixed response. The colour match received approval from two people, suggesting that it was appropriate and satisfactory. A bigger group of twelve, on the other hand, voiced a neutral attitude, indicating that they might have misgivings or worries regarding the colour matching technique employed in the prototyping phase. Six people also voiced their disagreement with the colour matching, making it plain that they did not think it was suitable. Q2: You are satisfied with clear and user-friendly interfaces According to the data gathered, there is a mediocre amount of satisfaction with clear and user-friendly interfaces in the context of prototyping. A bigger group of sixteen people shared a neutral attitude, indicating that there was widespread pleasure but some space for improvement, while only two people voiced their strong agreement with the straightforward and user-friendly interfaces. Two people, however, disagreed with the assertion, expressing concern or unhappiness with the simplicity and usability of the interfaces. Q3: You are satisfied with the icons used for prototyping According to the collected data, there is a satisfactory range of icons used for prototyping. A large group of 10 respondents held a neutral opinion, indicating that they may have doubts or problems with the selection of icons, while five individuals expressed their satisfaction and agreement with the icons. Five individuals also expressed disagreement with the icons, clearly indicating that their use in the prototyping process was problematic. Q4: You are satisfied with the eye-friendly interface According to the collected data, there is a mixed reaction about the eye-friendly interface. A large group of 16 respondents held a neutral opinion, indicating that they may have doubts or problems with the selection of icons, while two individuals expressed their satisfaction and agreement with the icons. Two individuals also expressed disagreement with the icons, clearly indicating that their use in the prototyping process was problematic. Q5: You are satisfied with the graphics used for prototyping The data gathered indicates a mixed level of satisfaction with the graphics used for prototyping. A bigger group of nine people held a neutral attitude, indicating that they might have qualms or issues regarding the visuals utilized, while three people indicated
92 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design their agreement with the graphics, indicating their satisfaction. Eight others also voiced their disagreement with the graphics, making it apparent that they were unhappy with how they were used during the prototyping process. Q6: playlists interfaces manage to attract you According to the collected data, there is a mixed response regarding the attraction of playlist interfaces. A large group of seventeen respondents held a neutral opinion, indicating that they may have doubts or problems regarding the choice of icons, while only one person expressed their satisfaction and agreement with the icons. Two individuals also expressed disagreement with the icons, clearly indicating that their use in the prototyping process was problematic. Q7: Home interface is able to attract you According to the collected data, the home interface shows a mixed response regarding user attraction. A large group of sixteen respondents held a neutral opinion, indicating that they may have doubts or problems regarding the choice of icons, while only two individuals expressed their satisfaction and agreement with the icons. Two other people also expressed disagreement with the icons, clearly indicating that their use in the prototyping process was problematic. Q8: The artists interface able to attract you According to the collected data, the artist interface shows a mixed response regarding user attraction. A large group of nine respondents held a neutral opinion, indicating that they may have doubts or problems regarding the selection of icons, while only three individuals expressed their satisfaction and agreement with the icons. Two other eight people also expressed disagreement with the icons, clearly indicating that their use in the prototyping process was problematic. Q9: The interface of the withdrawal is able to attract you According to the collected data, the withdrawal interface shows a mixed response in terms of attracting the user. A large group of seventeen respondents held a neutral opinion, indicating that they may have doubts or problems regarding the choice of icons, while only two individuals expressed their satisfaction and agreement with the icons. One person expressed disagreement with the icons, clearly indicating that their use in the prototyping process is problematic. Q10: The buttons in the navigation are clearly visible
93 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design According to the data gathered, major participants appear to be concerned about the visibility of navigation buttons for prototyping. Only two people agreed with the statement that the buttons were visible, indicating that they were clearly visible, while a larger group of sixteen people disagreed, indicating that they thought there were issues with the buttons' visibility. Two people also expressed a neutral assessment, perhaps out of reluctance or concern about visibility. These findings show that it is imperative to address the issues brought up by most participants who dissented.
3.9 EMC user interface final prototypes (Beta version)
Login interface
Figure 61: Login final interface (Author 2023)
94 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Registration interface
Figure 62: Registration final interface (Author 2023)
Payment interface
Figure 63: Payment final interface (Author 2023)
Home interface
95 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 64: Home final interface (Author 2023)
Playlist interface
Figure 65: Playlist final interface (Author 2023)
Artist interface
96 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 66: Artist final interface (Author 2023)
EMC publisher final prototypes
Publisher login interface
Figure 67: Publisher login (Author 2023)
Song upload interface
97 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 68: Song upload (Author 2023)
Withdrawal interface
Figure 69: Withdrawal (Author 2023)
Publisher dashboard
98 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 70: Publisher dashboard (Author 2023)
Activity 04
4.1 User experiment 02
Feedback 01 User- Mahinsa Jayawickrama
99 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Figure 71: user experiment 02(feedback 01)
100 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Feedback 02 User- Nipuna Randuna
Figure 72: user experiment 02(feedback 02)
101 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Feedback 03 User- Paridya Sathsarani
Figure 73: User experiment 02 (feedback 03)
102 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 4.2 Summary of the feedback of the beta version Summary of the EMC user feedback (Alpha version)
Figure 74: Summary of the feedback- beta version (Author 2023)
Users' responses to all the questions were overwhelmingly positive, thus it is safe to say that the E-Music Cloud app's user interface offers a very pleasant user experience. The user feedback suggests that the design fulfils their expectations and needs, which enables the app's aim to be successfully attained. The EMC system may continue to provide an amazing user experience going forward by recreating interfaces comparable to the well-received prototypes, assuring user pleasure and engagement.
4.3 Feedback evaluation of beta version
Q1: You are satisfied with the colour match used for prototyping It can be inferred that there is a high level of satisfaction with the colour matching utilized for prototyping based on the unanimity of all 20 participants. Unanimous agreement that
103 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design the colour match is excellent and satisfies participants' expectations is indicated by the absence of indifferent or disagreeable replies. Q2: You are satisfied with clear and user-friendly interfaces It is evident that there is a high level of satisfaction with straightforward and user-friendly interfaces in the context of prototyping based on the unanimity of all twenty participants. There were no replies that were neutral or disagreed, indicating that all participants found the interfaces to be understandable and up to line with their expectations. Q3: You are satisfied with the icons used for prototyping It is evident that there is a high level of satisfaction with the icons used for prototyping based on the unanimity of all twenty participants. There were no replies that were neutral or disagreed, indicating that everyone thought the icons were appropriate and lived up to expectations. Q4: You are satisfied with the eye-friendly interface Based on the unanimity of all twenty participants, there is a high level of satisfaction with the eye-friendly interface. There were no neutral or disagreed responses, indicating that everyone thought the icons were appropriate and lived up to expectations. Q5: You are satisfied with the graphics used for prototyping Based on the unanimous agreement of all twenty participants, there is a high level of satisfaction with the graphics used for prototyping. The absence of any neutral or disagreeing responses indicates unanimous agreement that the icons are appropriate and meet participants' expectations. Q6: playlists interfaces manage to attract you Twenty participants came to the consensus conclusion that playlist interfaces are successful at attracting users. There is no room for disagreement or neutral comments, indicating that everyone agrees that playlist interfaces are attractive and engaging. Q7: Home interface is able to attract you According to the consensus opinion of the 20 participants, the friendly interface appears to be successful in luring users. The lack of any neutral or opposing comments suggests that everyone agrees that the home interface is pleasant and visually appealing. Q8: The artists interface able to attract you The twenty participants were all in agreement that the artist interface appears to be drawing users. The lack of neutral or opposing comments suggests that everyone agrees that the artists' interface is pleasant and visually pleasing.
104 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design Q9: The interface of the withdrawal is able to attract you The consensus of all twenty participants, which shows that the withdrawal interface is effectively luring consumers, supports this claim. There were no indifferent or opposing comments, indicating that everyone agreed that the withdrawal interface is engaging and visually appealing. Q10: The buttons in the navigation are clearly visible All twenty participants agreed that the navigation buttons are easily accessible, therefore this may be concluded. There were no indifferent or opposing comments, which suggests that everyone agrees that the navigation buttons stand out and are clearly identifiable.
4.4 Steps to improve in future versions of the UI
To continuously improve the user interface (UI) of the EMC system in future versions, various steps can be taken. As such, gathering and analyzing user feedback should be a priority so conducting surveys, usability testing and getting direct input from users will provide valuable insight into areas for improvement. Likewise, conducting a thorough competitor analysis and identifying emerging trends in UI design in the music app industry can guide the implementation of innovative features and functionality. • By presenting the song's cover art as the lock screen background, you may improve the feature's visual appeal and keep consumers interested. This could enhance the app user's overall aesthetic experience. • When downloading a song, additional information about the song will be recorded when clicking on the song, making it easier for users to identify and explore the music they like. • The user experience will be enhanced by staying current with technology developments and implementing them into the UI, such as by incorporating voice commands or optimizing for multiple devices. • The addition of the ability to modify audio settings and adjust sound quality will significantly improve the user's listening experience. • Convenience is substantially increased by allowing consumers to download music instantly after purchasing them. Future iterations of the EMC UI will be able to offer better functionality, a better user experience, and a more customized and immersive music listening experience for users by implementing these improvements.
105 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 4.5 Final user interface and test results with the original plan
It became evident, after getting comments on the EMC system's final interface prototype, that it had gotten more favourable replies than the initial interface and earlier revisions. Dissatisfaction with the colours utilized, notably the excessive use of white in the first design, which many people despised, was a significant area of user input that was highlighted. In response, the author created a user-friendly interface with eye-catching graphics. The user experience has become much more appealing and effective because of this addition. With the addition of vibrantly coloured buttons in the navigation bar, the final interface also stood out from the original in that it made it simpler for consumers to find and use the functionality they required. Users gave it favourable feedback, and this improvement directly improved the user reviews. The user experience across all interfaces was further enhanced with the addition of updated icons in each segment depending on user demands. favourable comments and a favourable user experience for the EMC system have been greatly influenced by these changes and additions to the final interface design.
Conclusion Through this assignment a thorough knowledge of what elements of user experience and interface design are gained. Also, the author designed a suitable user experience map and interface design for a user interface concept and has studied many other things including user feedback for the development of user interfaces. Also, the author designed user interfaces for E cloud music.
106 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design References
What is User Interface (UI)? | indeed.com - indeed career guide (2022). Available at: https://www.indeed.com/career-advice/career-development/user-interface(Accessed: March 20, 2023). Types of user interfaces (2020) Alan Blog. Available at:https://alan.app/blog/types-of-user- interface/#commandlineinterface(Accessed: March 21, 2023). Rehman, J. (2021) Advantages and disadvantages of Command Line Interface (CLI), IT Release. Available at:https://www.itrelease.com/2021/04/advantages-and-disadvantages- of-command-line-interface-cli/(Accessed: March 27, 2023). What is a GUI (graphical user interface)? definition, elements and ... (2021). Available at: https://www.indeed.com/career-advice/career-development/gui-meaning(Accessed: March 26, 2023). What is a menu-driven interface? (2022) Reference. IAC Publishing. Available at: https://www.reference.com/world-view/menu-driven-interface-c09e075662eaa84 (Accessed: March 27, 2023). Baroque, C. (2023) 7+ best types of user interface to use for your project, RSS. Aloe. Available at: https://aloa.co/blog/types-of-user-interface(Accessed: March 27, 2023). Churchville, F. (2021) What is User Interface (UI)? definition from searchapparchitecture, App Architecture. TechTarget. Available at: https://www.techtarget.com/searchapparchitecture/definition/user-interface-UI(Accessed: March 27, 2023). What are voice user interfaces? (2022) The Interaction Design Foundation. Available at: https://www.interaction-design.org/literature/topics/voice-user-interfaces(Accessed: March 28, 2023). iconscientific.com, I.S.- (2021) Icon tech blog #3: Graphical user interface touchscreen, Icon Scientific. Available at: https://www.iconscientific.com/hub/icon-tech-blog-3- graphical-user-interface-touchscreen(Accessed: March 28, 2023). User experience: What is the difference between UX and UI: Examples (2019) User Report.Available at: https://www.userreport.com/blog/user-experience/ (Accessed: March 28, 2023). Different forms of user experiences (2022) Medium. Dev Genius. Available at:https://blog.devgenius.io/different-forms-of-user-experiences-8c10f34200c6 (Accessed: March 29, 2023). Oppliger, T. (2022) What is UX/Ui Design? your complete explainer, Flatiron School.Availableat:https://flatironschool.com/blog/what-is-ux-ui-design/ (Accessed:March 29, 2023). Hannah, J. et al. (2022) What is a wireframe? your best guide, CareerFoundry. Availableat: https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#what-is-a- wireframe(Accessed: March 29, 2023). Jason Beres [Infragistics] Senior VP of Developer Tools et al. (2022) What is prototypingand why is it important? Infragistics Blog, Infragistics Community. Available
107 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design at:https://www.infragistics.com/community/blogs/b/jason_beres/posts/what-is- prototyping-and-why-is-it-important#What-is-a-Prototype(Accessed: March 29, 2023). 7 reasons for sketching in UX design (2022) Collaborate better. Available at:https://www.invisionapp.com/inside-design/ux-design-sketching/(Accessed: March 29, 2023). SDLC - software development life cycle - javatpoint www.javatpoint.com.Available at: https://www.javatpoint.com/software-engineering-software-development-life-cycle (Accessed: March 29, 2023). SDLCOverview(2022)TutorialsPoint.Availableat:https://www.tutorialspoint.com/sdlc/sdl c_overview.htm(Accessed: March 29, 2023). Simplilearn (2022) What is SDLC? Phases of Software Development & Models: Simplilearn, Simplilearn.com. Simplilearn. Available at: https://www.simplilearn.com/tutorials/programming-tutorial/what-is-sdlc (Accessed: March 29, 2023). Ui Testing: A detailed guide (2022) BrowserStack. Available at: https://www.browserstack.com/guide/ui-testing-guide (Accessed: March 30, 2023). M., D. (2022) User experience (UX) testing methods: Best ways to test users, Geniusee. geniusee. Available at: https://geniusee.com/single-blog/ux-testing-methods (Accessed: March 30, 2023). Eggspert, T., Zheng, D. and Hogan, S. (2021) User experience testing: UX methods and Tools, The Daily Egg. Available at: https://www.crazyegg.com/blog/user-experience- testing/ (Accessed: March 30, 2023). Birkett, B.A. et al. (2022) User experience testing: A conversion-focused guide, CXL. Available at: https://cxl.com/blog/user-experience-testing/(Accessed: March 30, 2023). End user requirements - analysis - national 5 computing science revision - BBC bitesize (2022) BBC News. BBC. Available at: https://www.bbc.co.uk/bitesize/guides/zg8gpbk/revision/1(Accessed: March 30, 2023). Simplilearn (2023) Systems administrator: Job description, skills, salary trends in 2023, Simplilearn.com. Simplilearn. Available at: https://www.simplilearn.com/systems- administrator-article(Accessed: March 30, 2023). Design, U.I. (2022) How do you ensure UI design accessibility and inclusivity for diverse local audiences?, UI Design Accessibility and Inclusivity Tips. Available at: https://www.linkedin.com/advice/0/how-do-you-ensure-ui-design-accessibility (Accessed: March 31, 2023). Browne, C. et al. (2021) Our guide to the top 7 user-centered design principles, CareerFoundry. Available at: https://careerfoundry.com/en/blog/ux-design/user-centered- design-principles/(Accessed: March 31, 2023). Affairs, A.S.for P. (2020) Personas, Usability.gov. Department of Health and Human Services. Available at: https://www.usability.gov/how-to-and- tools/methods/personas.html(Accessed: April 1, 2023). Xia, V. (2018) What are & how to create personas: Step-by-step guidelines of everything, Medium. Muzli - Design Inspiration. Available at: https://medium.muz.li/what-are-how-
108 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design to-create-personas-step-by-step-guidelines-of-everything-49357da2cb59 (Accessed: April 2, 2023). 17, P.F.D. et al. (2019) What are user personas and why are they important?: Adobe XD ideas, Ideas. Available at: https://xd.adobe.com/ideas/process/user-research/putting- personas-to-work-in-ux-design/(Accessed: April 2, 2023). Olu (2022) The elements of a persona, Forum One. Available at: https://www.forumone.com/insights/blog/elements-persona/(Accessed: April 2, 2023). Written by Jennifer Leigh Brown Columnist et al. (no date) Empathy mapping: A guide to getting inside a user's head: UX booth, Empathy Mapping: A Guide to Getting Inside a User's Head | UX Booth. Available at: https://www.uxbooth.com/articles/empathy- mapping-a-guide-to-getting-inside-a-users-head/(Accessed: April 2, 2023). Rodriguez, P. (2023) Experience map: Importance, elements and benefits, QuestionPro. Available at: https://www.questionpro.com/blog/experience-map/(Accessed: April 3, 2023). (2022) What is customer journey map? Available at: https://www.visual- paradigm.com/guide/customer-experience/what-is-customer-journey-mapping/ (Accessed: April 3, 2023). World Leaders in Research-Based User Experience (2022) Service blueprints: Definition, Nielsen Norman Group. Available at: https://www.nngroup.com/articles/service- blueprints-definition/(Accessed: April 4, 2023). Kavishka, C. (2022) Methodologies for user interaction development, Medium. Dev Genius. Available at: https://blog.devgenius.io/methodologies-for-user-interaction- development-88f13a497189(Accessed: April 4, 2023). Advantages and disadvantages of Figma: Software Developer India (2022) Software Developer India | Your software developer works in our premises in India. Available at: https://www.software-developer-india.com/advantages-and-disadvantages-of- figma/(Accessed: April 6, 2023). Affairs, A.S. for P. (2022) Card sorting, Usability.gov. Available at: https://www.usability.gov/how-to-and-tools/methods/card-sorting.html (Accessed: 09 May 2023).
109 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design 110 | P a g e Wickramage Thishani Sewwandi User Experience and Interface Design
