Professional Documents
Culture Documents
Mr Anjula Kelum
Assessor Internal Verifier
Unit 40- User Experience and Interface Design
Unit(s)
Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)
Assignment Feedback Form
Student Name/ID Ravindu Chamodya/E116818
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
Resubmission Feedback:
Assignment Feedback
Formative Feedback: Assessor to Student
Action Plan
Summative feedback
Assessor Date
signature
Ravindu 2023/01/12
Student Date
signature
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.
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
Unit Number and Title Unit 40: User Experience and Interface Design
Unit Tutor
Issue Date
Submission 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.
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.
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
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.
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.
I would like to take this opportunity to express my special thanks to my lecturer Mr. Anjula Kelum
for his friendly support, valuable information, and guidance which helped me in completing this
module. I also want to thank my batchmates for their assistance during this time.
Thank you,
Ravindu.
The point of human-computer contacts and communication in a device is the user interface (UI).
This can include desktop displays, keyboards, mice, and other pointing devices. It also refers to
the manner in which a user engages with a website or application.
Many firms now give UI a higher emphasis in an effort to improve the user experience as a result
of the rising reliance of many businesses on online and mobile apps. (Churchville, n.d.)
Types of UI
The earliest type of user interface still in use is the command line interface (CLI). A simple concept
underlies command line interfaces. The user can activate the different commands or functions in
command line interfaces by entering the corresponding command on the keyboard. Examples of
command line interfaces include the MS-DOS operating system and the Linux Bash.
The WIMP Interface, which employs Windows, Icons, Menus, and Pointers, is another name for
the Graphical User Interface (GUI). Currently, one of the interfaces that is most frequently used is
this one. It is simpler to include more information in a single application when a GUI is used.
A menu-driven interface enables the user to communicate with the computer by selecting options
from a sequence of menus. The user is guided by the screen's many options until the desired tasks
are accomplished. In these kinds of interfaces, the user may click or use the arrow keys to move
to the next menu.
In form-based interfaces, the user may type and enter the necessary data into a structure that
resembles a form. These interfaces are employed in the data collecting process. The system can
proceed based on the information gathered.
The user may communicate with the computer directly thanks to natural language interfaces.
Natural Language Interfaces enable users to converse with the computer in pure human language,
exactly like they would with a friend or family member, in place of conventional purpose-built
systems. (Kavishka, 2022)
Types of UX
1. Physical Experience
What the user physically experiences when interacting with the system is referred to as their
physical experience. The user's environment or the thing they are interacting with might affect
their physical experience.
2. Mental Experience
The user's perception and comprehension of their interactions with the system may be
characterized as their mental experience. When opposed to physical experience, mental experience
might be seen as being more complicated since it incorporates elements like consciousness,
cognition, memory, volition, and imagination. As a result, two people taking part in the same
activity might have diverse mental experiences.
3. Emotional Experience
A division of mental experience is referred to as emotional experience. The term "Emotional Have"
refers to the feelings that a user will experience when engaging with the system. Some of the
typical feelings produced by users include love, wrath, fear, empathy, shyness, enthusiasm, and
melancholy. Complex emotional experiences can be determined by how the user interprets the
system.
4. Social Experience
1. Sketch
Sketches are rough drawings made by hand on paper or in a computer program that serve as a
fundamental illustration of your idea.
Figure 6:sketch
• Never attempt to refine your sketches. Rough drawings are acceptable as long as they aid
in conveying the primary concept.
2. Wireframes
Wireframes are low-fidelity design artifacts that only depict the most important UI components
(the term originates from the way they appear to have been created with wires). Wireframes serve
as the framework for your design; they show the essential user interface and serve as a guide for
your final product.
Figure 7:wireframes
• Make your point with colour. Wireframes are often made in black and white, but it is
possible to add visual highlights by using a small number of colours, such one or two
contrasting hues.
• Publish succinct, "to the point," notes. Always add annotations when presenting a
wireframe to the team. Annotations aid in setting the scene and effectively communicating
crucial points.
3. Prototypes
A functioning model of an app or website is called a prototype. Designers may replicate user
engagement using prototypes. Prototypes are always interactive, in contrast to all the other artifacts
I've listed above. A prototype's objective is to mimic how a user would interact with an interface.
Figure 8:prototypes
• Make your prototypes with the appropriate quality. Prototypes are viewed as high-fidelity
artifacts by certain designers. That is untrue. Your prototype might be low-, mid-, or high-
fidelity, and it should be consistent with the quality of your thoughts.
• To test ideas with consumers, create high-fidelity prototypes. Your test subjects will
provide you with more in-depth input the more closely your design matches an actual
product. (Babich, 2020)
The consumer of a commodity or service is referred to as the "end user" and frequently possesses
certain knowledge that is exclusive to customers.
The phrase "end user" literally refers to the person who pays for and utilizes the product or service
as opposed to those who are engaged in the phases of its creation, design, and production.
In the context of technology, the phrase "end user" is frequently used; however, the more formal
term "revenue-generating unit," or RGU, may also be used.
In contrast, a customer is the individual making the technology purchase, who may or may not
also be the technology's final end user. At a workplace, the manager, for instance, may be the one
who buys the computer, making him or her the client. However, the real end user would be a
junior-level employee. (HAYES, 2021)
An approach to determine if a previously established "contract" between the developer and the
client is still in effect is to conduct an acceptance test. By running those acceptance tests, you can
make sure that the customer is satisfied and that no requirements have changed since they were
last run.
When designing a product, a product development team has the end user in mind. Knowing your
end consumers is crucial if you work in product development. In this article, we define an end
user, describe how they vary from consumers, and offer suggestions and examples of situations
where they should be taken into account.
A product development team builds their product with the end user in mind. In the process of
creating a product, "end users" are referred to as "end users" in the disciplines of software
engineering, information technology, and other tech-related fields. At the conclusion of the product
development process, end customers are the final consumers of a product. To create the greatest
product for the intended consumers, it's critical for product developers to keep the end user in mind
throughout the whole development process.
It's crucial to keep your target consumer in mind when you build your product. You can utilize the
following advice to recognize and comprehend your end users:
Knowing your end user's wants is one way to keep them in mind. You must be aware of the wants
your product may satisfy in order to create the greatest product for your target audience. By asking
what issue your product can help with, you may ascertain the wants of your end consumers.
You may also carry out usability testing to gather important data from your customers that will
enable you to enhance your product. Testing a product's usability involves seeing how actual
people interact with and utilize it. You may utilize this to better understand your customers and
develop your product. We can test for usability using methods like questionnaires, interviews, and
more. It can assist you in determining whether your product's end customers can utilize it to carry
out its planned functions.
Making a user persona is another important strategy for identifying and taking into account your
target user. A user persona is a fictitious figure that you may use as a guide when creating your
product to reflect your target market. Your imaginary character's name, demographics, needs, job,
aspirations, and frustrations may all be included in your user persona along with their
• Unregistered users
An unregistered users can look up home page, listen to a low-quality song at the one time.
• Registered users
A registered users can look up artists, albums, and find music they like. Once the eMusic
Discovery is made, the user has options to Rent a song for 3 months, own a song: Song will be
available in My Library until user cancels the subscription.
• Artists (producer)
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.
• Admin
Any action in the system may be taken by the administrator. The administrator has several
options, including the ability to examine account balances, suspend artist and regular accounts,
and remove music.
Journey map
A customer journey map shows the customer journey visually (also called the buyer journey or
user journey). It assists you in narrating the tale of your clients' interactions with your brand at
every touchpoint. Whether your customers contact you through live chat, email, social media, or
other methods, visualizing the customer journey may help you make sure no one falls between the
cracks. (UK, 2022)
Experience map
The full path customers travel while interacting with a product or service is displayed on an
experience map.
Experience mapping illustrates the user's route from the product discovery stage through
assessment and purchase, similar to the customer journey map (until a person becomes a
customer). The experience map, however, is more comprehensive; it also depicts what your rivals
and company are doing in the context of this trip, taking into consideration testimonials,
recommendations, assistance, and other factors. (Mayka, n.d.)
Service map
A service map is a live visual depiction of the instrumented services in the architecture of your
application. Along with high-level information like average transaction length, requests per
minute, and errors per minute, it demonstrates how different services are interconnected. Service
maps can combine with machine learning, if that feature is enabled, to produce real-time health
indicators based on anomaly detection scores. You may rapidly and visually evaluate the status
and health of your services with the aid of all of these capabilities. (elastic, n.d.)
• Login
• Listen high quality songs
• Listen to the offline
• Skip ads
• Downloads
• Create song list
Empathy map
Prototyping tools
Adobe XD
A vector-based method for building prototypes is available from Adobe XD, along with tools for
adding interactions, transitions, and other dynamic features. Scaling and resizing elements are
simple because it is vector-based.
Figure 16:adobexd
In Vision Studio
In Vision, which was introduced in 2011, has a solid reputation and is a favorite among many
designers because to their commitment to adding new features and improving their design
platform.
In Vision allows designers the ability to swiftly build together working prototypes and share them
with others with a variety of well-designed tools. It has a ton of great features, like a practical
vector drawing tool, repeating elements that can be updated throughout the entire website, and
tools for making animations and other dynamic visual effects.
Figma
With the help of Figma, collaboration and accessibility are made simple for teams of UX designers,
developers, and anybody else who uses a browser-based, cloud-hosted platform. If you've ever
used Sketch, you'll notice that Figma has a similar feel, which makes it simple to start using.
Figure 18:figma
Axure RP streamlines the wireframing and prototyping processes, assisting businesses in creating
better digital products. It enables designers to make interactive prototypes of websites and apps in
resolutions ranging from low to high without writing any code.
Figure 19:axurerp
Sketch
Sketch is a common tool used by UX designers, and with good reason. Sketch doesn't require much
of a learning curve before you can start designing, unlike many other prototyping programs.
(Cardello, 2022)
Figure 20:Sketch
To better understand your customers, workers, or employees' employees, survey tools provide you
access to the inner workings of your company.
The "customer journey" procedure is something that many businesses go through. You may receive
feedback from your respondents using this set of survey questions in order to improve.
In order for operational teams to thrive at what they do; they play a crucial role in comprehending
the demands of the "user." It's vital to keep in mind that they are merely the initial step in the
feedback process; the data analysis and interpretation come later.
Let's examine the use and best practices of survey technologies to gain a deeper understanding of
the significance of surveys. (feedier, 2022)
• Google Forms
• SurveyMonkey
• Type form
• JotForm
• SoGoSurvey
• SurveyPlanet
• Zoho Survey
• Crowdsignal
Google forms
Online software called Google Forms is free and lets you make quizzes, surveys, and other forms
of content. It's a component of the Google suite of web-based applications, which also includes
Google Docs, Google Sheets, Google Slides, and other tools. It's a flexible tool that can be used
for a variety of tasks, like making a pop quiz and collecting RSVPs for an event. (Demarest, 2022)
Writing quality survey questions will put you well on your way to acquiring the trustworthy replies
you require to accomplish your objectives. Writing effective survey questions is not challenging.
This book was written so that you may learn the best practices and simple tricks for writing
effective survey and poll questions—ones that provide insightful information and data.
Your survey production process may be sped up by using templates that incorporate survey
questions, which also ensures that you are asking insightful questions that elicit insightful
responses from the audiences and demographics you are targeting. The findings of your survey
Album page
Home page
Figure 22:interfaces
First iteration
So, we agree to our client concerns, and we increase the font size our website according to
the client’s request.
First iteration
After
First iteration
Before
Before
We would want to have a side menu and search bar on the home page. it's helps users to quickly
search albums and songs.
And we would want to add the lyrics page to play list page. This simple integration can turn
average listeners into loyal fans. Often users want not only to listen to the song but to read lyrics
and learn more information about the recording.
Add a new pricing and package page. Users can listen premium quality songs.
Add target audience bord, Stearns display bar, listeners now bar, and top releases bar artist page.
As a future version of the UI we decide to change the theme of the website to a light theme.