You are on page 1of 78

Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)


INTERNAL VERIFICATION – ASSESSMENT DECISIONS

Programme title BITEC Higher National Diploma in Computing

Mr Anjula Kelum
Assessor Internal Verifier
Unit 40- User Experience and Interface Design
Unit(s)

Assignment title User experience design for E-music cloud


Ravindu Chamodya
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 Ravindu Chamodya/E116818

Unit Title Unit 40- User Experience and Interface Design

Assignment Number 01 Assessor


Date Received
Submission Date
1st submission
Date Received 2nd
Re-submission Date
submission
Assessor Feedback:
LO1 Research what aspects of User Experience and Interface Design are necessary and
appropriate to satisfy end-user emotions, desires and attitudes when using a user
interface concept.
Pass, Merit & Distinction P1 P2 M1 M2 D1
Descripts
LO2 Plan an appropriate User Experience map and Interface Design for a User Interface
concept with a specific target end user in mind and outline the tests you mean to
conduct.
Pass, Merit & Distinction P3 P4 M3 M4 D2
Descripts

LO3 Build a User Interface concept and test it with users to see if it satisfies their
emotions, desires and attitudes as planned.
Pass, Merit & Distinction P5 P6 M5 M6
Descripts
LO4 Evaluate user feedback, test results and insights gained from end users interacting
with your User Interface concept to determine success or failure and steps to improve in
future versions.
Pass, Merit & Distinction P7 P8 M7 D3
Descripts

Grade: Assessor Signature: Date:

Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

Ravindu Chamodya E116818 | UIUX | Unit 40 2


* Please note that grade decisions are provisional. They are only confirmed once internal and external moderation has taken place and
grades decisions have been agreed at the assessment board.

Assignment Feedback
Formative Feedback: Assessor to Student

Action Plan

Summative feedback

Feedback: Student to Assessor

Assessor Date
signature
Ravindu 2023/01/12
Student Date
signature

Ravindu Chamodya E116818 | UIUX | Unit 40 3


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

Ravindu Chamodya E116818 | UIUX | Unit 40 4


General Guidelines

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

Word Processing Rules

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

Important Points:

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

Student Declaration

Ravindu Chamodya E116818 | UIUX | Unit 40 5


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.

Student’s Signature: Date:2023/01/12


(Provide E-mail ID) (Provide Submission Date)
E116818@esoft.academy

Ravindu Chamodya E116818 | UIUX | Unit 40 6


Higher National Diploma in Business
Assignment Brief
Student Name /ID Number Ravindu Chamodya/E116818

Unit Number and Title Unit 40: User Experience and Interface Design

Academic Year 2021/22

Unit Tutor

Assignment Title User Experience Design for e-music cloud

Issue Date

Submission Date

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

Ravindu Chamodya E116818 | UIUX | Unit 40 7


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.

Ravindu Chamodya E116818 | UIUX | Unit 40 8


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

Ravindu Chamodya E116818 | UIUX | Unit 40 9


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.

Ravindu Chamodya E116818 | UIUX | Unit 40 10


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.

Ravindu Chamodya E116818 | UIUX | Unit 40 11


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.

Ravindu Chamodya E116818 | UIUX | Unit 40 12


Acknowledgment

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.

Ravindu Chamodya E116818 | UIUX | Unit 40 13


Figure 1:command line interface .................................................................................................. 15
Figure 2:graphical user interface .................................................................................................. 16
Figure 3:menu driven interface .................................................................................................... 17
Figure 4:form based interface....................................................................................................... 18
Figure 5:natural language Interface .............................................................................................. 19
Figure 6:sketch .............................................................................................................................. 21
Figure 7:wireframes ...................................................................................................................... 22
Figure 8:prototypes ....................................................................................................................... 23
Figure 9:empathy map .................................................................................................................. 28
Figure 10:journey map .................................................................................................................. 29
Figure 11:experience map ............................................................................................................ 30
Figure 12:service map ................................................................................................................... 30
Figure 13:empathy map ................................................................................................................ 31
Figure 14:journey map .................................................................................................................. 32
Figure 15:feedback form ............................................................................................................... 35
Figure 16:adobexd ........................................................................................................................ 36
Figure 17:invision .......................................................................................................................... 37
Figure 18:figma ............................................................................................................................. 37
Figure 19:axurerp .......................................................................................................................... 38
Figure 20:Sketch ............................................................................................................................ 38
Figure 21:wire frames ................................................................................................................... 43
Figure 22:interfaces ...................................................................................................................... 51
Figure 23:user feedback ................................................................................................................ 55
Figure 24:user feedback ................................................................................................................ 61

Ravindu Chamodya E116818 | UIUX | Unit 40 14


Activity 01

What is user interface (UI)

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

1. Command Line Interface (CLI)

Figure 1:command line interface

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.

Ravindu Chamodya E116818 | UIUX | Unit 40 15


2. Graphical User Interface (GUI)

Figure 2:graphical user interface

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.

3. Menu Driven Interface

Ravindu Chamodya E116818 | UIUX | Unit 40 16


Figure 3:menu driven interface

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.

4. Form Based Interface

Ravindu Chamodya E116818 | UIUX | Unit 40 17


Figure 4:form based interface

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.

5. Natural Language Interface

Ravindu Chamodya E116818 | UIUX | Unit 40 18


Figure 5:natural language Interface

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)

What Is User Experience (UX)

Ravindu Chamodya E116818 | UIUX | Unit 40 19


The method design teams employ to produce products that provide customers meaningful and
pertinent experiences is known as user experience (UX) design. UX design includes components
of branding, design, usability, and function in the design of the full process of obtaining and
integrating the product. (interaction, 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

A social experience is a circumstance in which a single user shares an experience as a component


of a larger social phenomena. A user can discuss their experiences with others in their social
network. The foundation of contemporary information systems is said to be this procedure.

5. Virtual/ Simulated Experience

Ravindu Chamodya E116818 | UIUX | Unit 40 20


One of the user experience categories that is rapidly growing is the virtual or simulated experience.
The user has a realistic experience in a virtual environment, but it is not real. (Kavishka, 2022)

UX/UI Design Tools

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

Things to remember when sketching;

• Never attempt to refine your sketches. Rough drawings are acceptable as long as they aid
in conveying the primary concept.

• For speedier drawing, use a stencil.

Ravindu Chamodya E116818 | UIUX | Unit 40 21


• Use the Crazy Eights technique. A Google Ventures Design sprint approach called Crazy
Eights enables a product team to quickly visualize a lot of ideas. Each team member must
sketch eight concepts in five minutes as part of the process. Learn more about this approach
by reading Jake Knapp's article.

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

Things to remember when wireframing;

Ravindu Chamodya E116818 | UIUX | Unit 40 22


• Be careful not to over-detail wireframes. The foundation of the product is represented by
its wireframes. Wireframing is used to analyse the design, not to perfect the details. Add
only the components that are absolutely necessary for a page or screen.

• 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

Ravindu Chamodya E116818 | UIUX | Unit 40 23


Things to remember when prototyping;

• 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 illustrate complicated transitions, use high-fidelity prototypes. When you need to


demonstrate an animated state transition, hi-fi prototypes are fantastic.

• 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)

What Is an End User?

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.

End User vs. Customer

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)

When & why User Acceptance Testing is needed?

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.

Ravindu Chamodya E116818 | UIUX | Unit 40 24


Types of User Acceptance Testing

• Alpha & Beta Testing


• Contract Acceptance Testing
• Regulation Acceptance Testing
• Operational Acceptance Testing
• Black Box Testing (Peham, 2023)

Ravindu Chamodya E116818 | UIUX | Unit 40 25


Activity 02

What Is an End User?

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.

Tips for considering your end user;

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:

• Determine the needs of your end user

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.

• Conduct usability testing

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.

• Design a user persona

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

Ravindu Chamodya E116818 | UIUX | Unit 40 26


demographics. This may assist you determine who your end consumers are and can also direct you
in designing a product that they will love using and will be functional. (Team, 2021)

Types of end users

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

Behaviour Modelling Techniques

Companies utilize behavioural modelling as a strategy to comprehend and forecast customer


behaviour better. Consumer and company spending data are now available, and behavioural
modelling is used to predict future behaviour under particular conditions. Financial organizations
use behavioural modelling to determine the risk of lending money to a person or company, while
marketing companies use it to target advertisements. In order to forecast the actions of agents who
deviate from what would often be seen as fully fact based or rational conduct, behavioural
economics also uses behavioural modelling. (HAYES, 2021)

Ravindu Chamodya E116818 | UIUX | Unit 40 27


Empathy map

An empathy map is a straightforward, simple-to-understand picture that summarizes information


about a user's actions and views. It is a helpful tool that enables teams to comprehend their users
more fully. To create empathy for end users, stakeholders, marketing and sales, product
development, or creative teams might participate in a straightforward workshop exercise called
empathy mapping. An empathy mapping exercise is an excellent way for teams working on the
design and engineering of goods, services, or user experiences to "get inside the brains" of people.
(Brown, 2018)

Figure 9:empathy map

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)

Ravindu Chamodya E116818 | UIUX | Unit 40 28


Figure 10:journey map

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

Ravindu Chamodya E116818 | UIUX | Unit 40 29


Figure 11:experience map

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

Figure 12:service map

Ravindu Chamodya E116818 | UIUX | Unit 40 30


Registered users

• Login
• Listen high quality songs
• Listen to the offline
• Skip ads
• Downloads
• Create song list

Behaviour models for the scenario

I was selected registered user for develop user persona.

Empathy map

Figure 13:empathy map

Ravindu Chamodya E116818 | UIUX | Unit 40 31


Journey map

Figure 14:journey map

Ravindu Chamodya E116818 | UIUX | Unit 40 32


Survey sheet

Ravindu Chamodya E116818 | UIUX | Unit 40 33


Ravindu Chamodya E116818 | UIUX | Unit 40 34
Figure 15:feedback form

Ravindu Chamodya E116818 | UIUX | Unit 40 35


Activity 03

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.

Ravindu Chamodya E116818 | UIUX | Unit 40 36


Figure 17:invision

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

Ravindu Chamodya E116818 | UIUX | Unit 40 37


Axure RP

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

Ravindu Chamodya E116818 | UIUX | Unit 40 38


Survey sheet tools

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.

Why are Survey tools so important?

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)

How to create survey questions

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

Ravindu Chamodya E116818 | UIUX | Unit 40 39


may then be analyzed and presented in a variety of ways, such as in the shape of a word cloud,
which generates a graphic representation of the most prevalent terms and phrases in your
respondents' replies. The sorts of survey questions you employ will have the most impact on your
surveys' success.

Ravindu Chamodya E116818 | UIUX | Unit 40 40


Wire frames
Home page

Album page

Ravindu Chamodya E116818 | UIUX | Unit 40 41


Play list page

Ravindu Chamodya E116818 | UIUX | Unit 40 42


Artist dashboard page

Figure 21:wire frames

Ravindu Chamodya E116818 | UIUX | Unit 40 43


Interfaces

Home page

Ravindu Chamodya E116818 | UIUX | Unit 40 44


Album page

Ravindu Chamodya E116818 | UIUX | Unit 40 45


Ravindu Chamodya E116818 | UIUX | Unit 40 46
Trending page

Ravindu Chamodya E116818 | UIUX | Unit 40 47


Create play list page

Ravindu Chamodya E116818 | UIUX | Unit 40 48


Play list page

Ravindu Chamodya E116818 | UIUX | Unit 40 49


Library page

Ravindu Chamodya E116818 | UIUX | Unit 40 50


Artist dashboard

Figure 22:interfaces

Ravindu Chamodya E116818 | UIUX | Unit 40 51


Survey feedbacks

First feedback form

Ravindu Chamodya E116818 | UIUX | Unit 40 52


Ravindu Chamodya E116818 | UIUX | Unit 40 53
Ravindu Chamodya E116818 | UIUX | Unit 40 54
Figure 23:user feedback

First iteration

Ravindu Chamodya E116818 | UIUX | Unit 40 55


After

So, we agree to our client concerns, and we increase the font size our website according to
the client’s request.

Ravindu Chamodya E116818 | UIUX | Unit 40 56


Second iteration

Add the content page

Ravindu Chamodya E116818 | UIUX | Unit 40 57


Second feedback form

Ravindu Chamodya E116818 | UIUX | Unit 40 58


Ravindu Chamodya E116818 | UIUX | Unit 40 59
Ravindu Chamodya E116818 | UIUX | Unit 40 60
Figure 24:user feedback

First iteration

Ravindu Chamodya E116818 | UIUX | Unit 40 61


Ravindu Chamodya E116818 | UIUX | Unit 40 62
Second iteration

After

Ravindu Chamodya E116818 | UIUX | Unit 40 63


We agree to our client concerns, and we change the website colour according to the client’s
request.

Ravindu Chamodya E116818 | UIUX | Unit 40 64


Activity 04

First iteration

Before

Ravindu Chamodya E116818 | UIUX | Unit 40 65


After

Ravindu Chamodya E116818 | UIUX | Unit 40 66


Ravindu Chamodya E116818 | UIUX | Unit 40 67
Second iteration

Before

Ravindu Chamodya E116818 | UIUX | Unit 40 68


After

Ravindu Chamodya E116818 | UIUX | Unit 40 69


Before

Ravindu Chamodya E116818 | UIUX | Unit 40 70


After

Ravindu Chamodya E116818 | UIUX | Unit 40 71


Future version of the UI

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.

Ravindu Chamodya E116818 | UIUX | Unit 40 72


References
Babich, N., 2020. Sketch, Wireframe, Mockup, and Prototype: Why, When and How. [Online]
Available at: https://uxplanet.org/sketch-wireframe-mockup-and-prototype-why-when-and-
how-29a25b3157c4
[Accessed 8 january 2023].
Churchville, F., n.d. user interface (UI). [Online]
Available at: https://www.techtarget.com/searchapparchitecture/definition/user-interface-UI
[Accessed 6 january 2023].
HAYES, A., 2021. End User. [Online]
Available at: https://www.investopedia.com/terms/e/end-user.asp
[Accessed 8 january 2023].
interaction, 2022. User Experience (UX) Design. [Online]
Available at: https://www.interaction-design.org/literature/topics/ux-design
[Accessed 8 january 2023].
Kavishka, C., 2022. Different Forms of User Experiences. [Online]
Available at: https://blog.devgenius.io/different-forms-of-user-experiences-8c10f34200c6
[Accessed 8 january 2023].
Kavishka, C., 2022. Different Forms of User Interfaces and Features. [Online]
Available at: https://blog.devgenius.io/different-forms-of-user-interfaces-and-features-
d1c8152ab69
[Accessed 8 january 2023].
Peham, T., 2023. 5 Types Of User Acceptance Testing. [Online]
Available at: https://usersnap.com/blog/types-user-acceptance-tests-frameworks/
[Accessed 8 january 2023].
Team, I. E., 2021. What Is an End User?. [Online]
Available at: https://www.indeed.com/career-advice/career-development/end-user
[Accessed 8 january 2023].
Demarest, A. A., 2022. What are Google Forms? [Online]
Available at: https://www.businessinsider.com/guides/tech/what-is-google-forms
[Accessed 28 december 2022].

Ravindu Chamodya E116818 | UIUX | Unit 40 73


Ravindu Chamodya E116818 | UIUX | Unit 40 74
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.

Ravindu Chamodya E116818 | UIUX | Unit 40 75


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

Ravindu Chamodya E116818 | UIUX | Unit 40 76


LO3 Build a User Interface concept and test it with users to see if it satisfies their emotions, desires and attitudes as planned.
P5 Examine appropriate tools to develop a user interface.

P6 Run end user experiments and examine feedback.

M5 Employ an appropriate set of tools to develop your plan


into a user interface.

M6 Reconcile and evaluate end-user feedback and build a


new iteration of your user interface modified with the most
important feedback and enhancements.

Ravindu Chamodya E116818 | UIUX | Unit 40 77


LO4 Evaluate user feedback, test results and insights gained from end users interacting with your User Interface concept to
determine success or failure and steps to improve in future versions.
P7 Evaluate end-user feedback from multiple iterations of
your user interface.

P8 Suggest steps to improve in future versions of your


UI.

M7 Undertake a critical review and compare your final


user interface and your test results with the original
plan.

D3 Critically evaluate the overall success of your User


Interface concept and discusses your insight using
prototyping.

Ravindu Chamodya E116818 | UIUX | Unit 40 78

You might also like