Loyola Institute of Technology and Science

Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

COURSE FILE COMPONENT Ref. No

 Vision And Mission Of Institution 1

 Vision And Mission Of Department 2

 Programme Outcome 3

 Individual Timetable 4

 Course Outcome & Co-Po Mapping 5

 Syllabus 6

 Course Delivery Plan 7

 Assignments(5 Units Assignments ) 8

 Pedagogy initiatives proof 9

 Guest Lecture proof for Respective subject (If conducted) 10

 Question Bank (With Last 5 Years University Questions) 11

 IA-I, IA-II, IA-III - Test Question Papers & Answer Key 12

 IA-I, IA-II, IA-III Test Answer Script( 3 Sample) 13

 Fast Learner -1
 Medium Learner - 1
 Slow Learner -1
 Slow learners List (According to the course) 14

 Slow learners Remedial class Schedule (According to the course) 15

 Slow learners proof (According to the course) 16

 Slow learners questions (According to the course) 17

 Fast learners List & Activity for Supporting Fast Learners (According 18

to the course)
 CO Attainment Sheet(Theory, Lab, Project) 19

 Course End Survey 20

Vision And Mission
Of Institution
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

VISION AND MISSION OF THE INSTITUTION

VISION OF THE INSTITUTION:

 Empowering the rural and less privileged students with value based technical
knowledge,forming them as responsible citizens.
MISSION OF THE INSTITUTION:

 DM1: To enlighten the rural students.

 DM2: To provide quality technical education for societal development and
entrepreneurship.
 DM3: To instill interpersonal skills and shape the studentsto become good leadersto
serve the society

To Produce World Class Engineers & Leaders

Vision And Mission
Of Department
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

DEPARTMENT VISION & MISSION

VISION OF THE DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING:

 To be a reputed center producing socially committed Computer Engineers with leadership
qualities to serve the rural society
MISSION OF THE DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING:

 DM1: To build Computer Engineers with professional ethics and entrepreneurship skills.
 DM2: To inculcate problem solving and team building skills to promote lifelong learning
with the sense of social responsibilities.
 DM3: To produce effective Computer Engineers with exposure to current industrial
advancements through higher education and serve the common people through their
expertise

To Produce World Class Engineers & Leaders

Programme Outcome
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

PROGRAM OUTCOMES

PROGRAM OUTCOMES:
Engineering Graduates will be able to:
 PO1: Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals and an engineering specialization to the solution of complex engineering
problems.
 PO2: Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
 PO3: Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate consideration
for the public health and safety, and the cultural, societal, and environmental considerations.
 PO4: Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis of the
information to provide valid conclusions.
 PO5: Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modelling to complex engineering activities with an
understanding of the limitations.
 PO6: The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional engineering practice.
 PO7: Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and need for
sustainable development.
 PO8: Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
 PO9: Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings.
 PO10: Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and write

To Produce World Class Engineers & Leaders

 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

effective reports and design documentation, make effective presentations, and give and receive clear
instructions.
 PO11: Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one‘s own work, as a member and leader
in a team, to manage projects and in multidisciplinary environments.
 PO12: Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change through their
expertise
PROGRAM SPECIFIC OUTCOMES:
 PSO 1 : To analyze, design and develop computing solutions by applying foundational
concepts of Computer Science and Engineering.
 PSO 2 : To apply software engineering principles and practices for developing quality software
for scientific and business applications.
 PSO 3 : To adapt to emerging Information and Communication Technologies (ICT) to innovate
ideas and solutions to existing/novel problems

To Produce World Class Engineers & Leaders

Individual Timetable
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

TIMETABLE-2023-24(EVEN SEM)

Class: III CSE Semester : VI

09:30 10:15 11:00 11:10 11:55 12:40 01:20 02:05 02:50 03:00 03:45
Time to to to to to to to to to to to
10:15 11:00 11:10 11:55 12:40 01:20 02:05 02:50 03:00 03:45 04:30
Day 1st 2nd 3rd 4th 5th 6th 7th 8th
Order Hour Hour Hour Hour Hour Hour Hour Hour

LUNCH INTERVAL
D1 UIUX
BREAK

BREAK
D2 UIUX
D3 UIUX UIUX UIUX
D4 UIUX UIUX
D5 UIUX
D6

WEEKLY
Sl.No SUB.CODE SUBJECT NAME CLASS
HOURS

1 CCS370 UIUX UI and UX Design III CSE 7

To Produce World Class Engineers & Leaders

Course Outcome &
Co-Po Mapping
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

Course Outcome & Co-Po Mapping

COURSE NAME & CODE : CCS370 - UI AND UX DESIGN
YEAR & SEMESTER : III & VI
COURSE INCHARGE :
DEPARTMET : COMPUTER SCIENCE AND ENGINEERING
COURSE OUTCOME:
THEORY
COs COURSE OUTCOME C LEVEL
CO1 Summarize the foundations of Designs K2
CO2 Summarize the foundations of UI design of any product or application K2
CO3 Demonstrate UX Skills in product development K3
CO4 Implement Sketching principles ,Wireframe and Prototype K3
Identify problem statement,conduct end-to-end user research, Sketch,
CO5 K3
design with popular tool,build a prototype and perform usability testing

CO - PO /PSO MAPPING:
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO3

CO 1 3 1 1 3 1 - - - 3 3 2 1 3 3 1
CO 2 2 3 1 3 2 - - - 1 2 2 2 1 2 2
CO 3 1 3 3 2 2 - - - 2 3 1 2 1 3 3
CO 4 1 2 3 3 1 - - - 3 2 1 3 3 3 3
CO 5 1 2 3 2 1 - - - 2 1 1 1 3 2 2

To Produce World Class Engineers & Leaders

 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

LABORATORY
COURSE OUTCOME:

COs COURSE OUTCOME C LEVEL

CO1 Implement UI for user Applications. K3
CO2 Demonstrate UX design of any product or application. K3
CO3 Demonstrate UX Skills in product development. K3
CO4 Implement Sketching principles,Wireframe and Prototype. K3
Identify problem statement,conduct end-to-end user research,Sketch, design
CO5 K3
with popular tool,build a prototype and perform usability testing

CO - PO /PSO MAPPING:

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO3

CO 1 3 2 1 3 2 - - - 3 3 2 3 3 3 2
CO 2 2 3 1 3 2 - - - 1 2 2 2 3 2 2
CO 3 1 3 3 2 2 - - - 2 3 1 2 2 3 3
CO 4 2 2 3 3 1 - - - 3 2 1 3 3 3 3
CO 5 2 2 3 2 1 - - - 2 1 1 1 3 2 2

To Produce World Class Engineers & Leaders

Syllabus
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

SYLLABUS-2023-24

CCS370 UI AND UX DESIGN L T P C

2 0 2 3
COURSE OBJECTIVES:
 To provide a sound knowledge in UI & UX
 To understand the need for UI and UX
 To understand the various Research Methods used in Design
 To explore the various Tools used in UI & UX
 Creating a wireframe and prototype

UNIT I FOUNDATIONS OF DESIGN 6

UI vs. UX Design - Core Stages of Design Thinking - Divergent and Convergent Thinking -
Brainstorming and Game storming - Observational Empathy

UNIT II FOUNDATIONS OF UI DESIGN 6

Visual and UI Principles - UI Elements and Patterns - Interaction Behaviors and Principles
– Branding - Style Guides

UNIT III FOUNDATIONS OF UX DESIGN 6

Introduction to User Experience - Why You Should Care about User Experience -
Understanding User Experience - Defining the UX Design Process and its Methodology -
Research in User Experience Design - Tools and Method used for Research - User Needs and
its Goals - Know about Business Goals

UNIT IV WIREFRAMING, PROTOTYPING AND TESTING 6

Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing -
Creating Wireflows - Building a Prototype - Building High-Fidelity Mockups - Designing
Efficiently with Tools - Interaction Patterns - Conducting Usability Tests - Other Evaluative
User Research Methods - Synthesizing Test Findings - Prototype Iteration

UNIT V RESEARCH, DESIGNING, IDEATING, & INFORMATION ARCHITECTURE 6

Identifying and Writing Problem Statements - Identifying Appropriate Research Methods -
Creating Personas - Solution Ideation - Creating User Stories - Creating Scenarios - Flow
Diagrams - Flow Mapping - Information Architecture
30 PERIODS
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

LIST OF EXPERIMENTS 30 PERIODS

1. Designing a Responsive layout for an societal application
2. Exploring various UI Interaction Patterns
3. Developing an interface with proper UI Style Guides
4. Developing Wireflow diagram for application using open source software
5. Exploring various open source collaborative interface Platform
6. Hands on Design Thinking Process for a new product
7. Brainstorming feature for proposed product
8. Defining the Look and Feel of the new Project
9. Create a Sample Pattern Library for that product (Mood board, Fonts, Colors based on UI
principles)
10 Identify a customer problem to solve Conduct end-to-end user research - User research,
creating personas, Ideation process (User stories, Scenarios), Flow diagrams, Flow Mapping
11.Sketch, design with popular tool and build a prototype and perform usability testing and
identify improvements
TOTAL: 60 PERIODS
TEXT BOOKS
T1. Joel Marsh, “UX for Beginners”, O’Reilly , 2022
T2. Jon Yablonski, “Laws of UX using Psychology to Design Better Product & Services”
O’Reilly 2021
REFERENCES
R1. Jenifer Tidwell, Charles Brewer, Aynne Valencia, “Designing Interface” 3 rd
Edition , O’Reilly 2020
R2. Steve Schoger, Adam Wathan “Refactoring UI”, 2018
R3. Steve Krug, “Don't Make Me Think, Revisited: A Commonsense Approach to Web &
Mobile”, Third Edition, 2015
R4. https://www.nngroup.com/articles/
R5. https://www.interaction-design.org/literature.

To Produce World Class Engineers & Leaders

Course Delivery Plan
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

COURSE DELIVERY PLAN-2023-24

CCS370-UI AND UX DESIGN

SL. Mode of No. of Cumulative

Topic name CO References
NO Delivery Periods Hours

UNIT 1-FOUNDATIONS OF DESIGN

1 UI vs. UX Design CO1 MD1 T1,R1 1 1
Core Stages of Design T1,R1 1 2
2 CO1 MD1
Thinking
Core Stages of Design T1,R1 1 3
3 CO1 MD1
Thinking
4 Introduction about Figma CO1 MD1 T1,R1 1 4

5 Introduction about Figma CO1 MD1 T1,R1 1 5

Divergent and T1,R1 1 6
6 CO1 MD1
Convergent Thinking
Brainstorming and Game T1,R1 1 7
7 CO1 MD1
storming
8 Observational Empathy CO1 MD1 T1,R1 1 8
Ex.No.1:Designing a 9
1
9 Responsive layout for an CO1 MD3
T1,R1
societal application
Ex.No.1:Designing a 10
1
10 Responsive layout for an CO1 MD3
T1,R1
societal application
Ex.No.1:Designing a 11
T1 1
11 Responsive layout for an CO1 MD3
societal application
Ex.No.1:Designing a 12
12 CO1 MD3 T1 1
Responsive layout for an

To Produce World Class Engineers & Leaders

 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

societal application
UNIT – II FOUNDATIONS OF UI DESIGN
1 Visual and UI Principles CO2 MD1 T1,R1 1 13
2 UI Elements and Patterns CO2 MD1 T1,R1 1 14
Ex.No.2:Exploring 1 15
3 various UI Interaction CO2 MD3 T1
Patterns
Ex.No.2 :Exploring 1 16
4 various UI Interaction CO2 MD3 T1
Patterns
Interaction Behaviors T1,R1 1 17
5 CO2 MD3
and Principles

6 Interaction Behaviors CO2 MD1 T1,R2 1 18

and Principles
7 Branding CO2 MD1 T1,R2 1 19
Ex.No.9:Create a Sample 1 20
Pattern Library for that
8 product (Mood board, CO2 MD3 T1
Fonts, Colors based on
UI principles)
Ex.No.9:Create a Sample 1 21
Pattern Library for that
9 product (Mood board, CO2 MD3 T1
Fonts, Colors based on
UI principles)
10 Style Guides CO2 MD1 T1,R2 1 22
Ex.No.3:Developing an 1 23
11 interface with proper UI CO2 MD3 T1
Style Guides
Ex.No.3:Developing an 1 24
12 interface with proper UI CO2 MD3 T1
Style Guides
UNIT – III FOUNDATIONS OF UX DESIGN

1 Introduction to User CO3 MD1 T1,T2 1 25

Experience
2 Why You Should Care CO3 MD1 T1,T2 1 26

To Produce World Class Engineers & Leaders

 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

about User Experience

Ex.No.5:Exploring
3 various open source CO3 MD3 T1 1 27
collaborative interface
Platform
Ex.No.5:Exploring
4 various open source CO3 MD1 T1 1 28
collaborative interface
Platform
5 Understanding User CO3 MD1 T1 1 29
Experience
Defining the UX Design T1
6 Process and its CO3 MD1 1 30
Methodology
Ex.No.6:Hands on
7 Design Thinking Process CO3 MD3 T1 1 31
for a new product
Ex.No.6:Hands on
8 Design Thinking Process CO3 MD1 T1 1 32
for a new product
Research in User
9 Experience Design - CO3 MD1 T1 1 33
Tools and Method used
for Research
User Needs and its Goals
10 - Know about Business CO3 MD1 T1 1 34
Goals
Ex.No.6:Hands on
11 Design Thinking Process CO3 MD1 T1 1 35
for a new product
Ex.No.6:Hands on
12 Design Thinking Process CO3 MD1 T1 1 36
for a new product
UNIT – IV WIREFRAMING, PROTOTYPING AND TESTING

1 Sketching Principles - MD1 T1,R3 1 37

CO4
Sketching Red Routes
2 Responsive Design – MD1 T1,R3 1 38
CO4
Wireframing
Ex.No.4:Developing
3 Wireflow diagram for CO4 MD3 T1,R3 1 39
application using open

To Produce World Class Engineers & Leaders

 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

source software
Ex.No.4:Developing
4 Wireflow diagram for MD3 T1,R3 1 40
CO4
application using open
source software
Creating Wireflows -
5 Building a Prototype - MD1 T1,R3 1 41
CO4
Building High-Fidelity
Mockups
Designing Efficiently
6 with Tools - Interaction CO4 MD1 T1,R3 1 42
Patterns
Ex.No.7:Brainstorming
7 feature for proposed CO4 MD3 T1,R3 1 43
product
Ex.No.7:Brainstorming
8 feature for proposed CO4 MD3 T1,R3 1 44
product
Conducting Usability
9 Tests - Other Evaluative CO4 MD1 T1,R3 1 45
User Research Methods
Synthesizing Test
10 Findings - Prototype CO4 MD1 T1,R3 1 46
Iteration
Ex.No.8:Defining the
11 Look and Feel of the new CO4 MD3 T1,R3 1 47
Project
Ex.No.8:Defining the
12 Look and Feel of the new CO4 MD3 T1,R3 1 48
Project
UNIT – V RESEARCH, DESIGNING, IDEATING, & INFORMATION ARCHITECTURE

1 Identifying and Writing MD1 T1,R3 1 49

CO5
Problem Statements
Identifying Appropriate T1,R3
2 Research Methods - CO5 MD1 1 50
Creating Personas
Ex.No.10:Identify a
customer problem to
3 solve Conduct end-to- CO5 MD3 T1,R3 1 51
end user research - User
research, creating

To Produce World Class Engineers & Leaders

 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

personas, Ideation
process (User stories,
Scenarios), Flow
diagrams, Flow Mapping
Ex.No.10:Identify a
customer problem to
solve Conduct end-to-
end user research - User
4 research, creating CO5 MD1 T1,R3 1 52
personas, Ideation
process (User stories,
Scenarios), Flow
diagrams, Flow Mapping
5 Solution Ideation - MD1 T1,R3 1 53
CO5
Creating User Stories
6 Creating Scenarios - MD1 T1,R3 1 54
CO5
Flow Diagrams
Ex.No.11:Sketch, design
with popular tool and
7 build a prototype and MD3 T1,R3 1 55
CO5
perform usability testing
and identify
improvements
Ex.No.11:Sketch, design
with popular tool and
8 build a prototype and MD3 T1,R3 1 56
CO5
perform usability testing
and identify
improvements
9 Flow Mapping CO5 MD1 T1,R3 1 57
10 Information Architecture CO5 MD1 T1,R3 1 58
Ex.No.12: Create a
11 loading animation in CO5 MD3 T1,R3 1 59
Figma
Ex.No.12: Create a
12 loading animation in CO5 MD3 T1,R3 1 60
Figma

*MODE OF DELIVERY
To Produce World Class Engineers & Leaders
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

MD1 MD2 MD3 MD4 MD5

Oral Presentation Hands on Guest Lecture Collaborative

Videos
(ppt,chalk&Talk) Demonstration (GL),Workshop,Seminar Learning(CL)

CONTENT BEYOND THE SYLLABUS

Sr.No Topic COs Mode of Delivery

Animated Illustrations
1 CO3 MD3

Industry Trends in User Interface and

2 User Experience Design CO1,CO2,CO3,CO4,CO5 MD4

COURSE INCHARGE HOD

To Produce World Class Engineers & Leaders

 Assignments
(5 Units Assignments)
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

Assignments(5 Units Assignments )-2023-24

Course Code-
: CCS370 - UI AND UX DESIGN
Name
Degree-Branch : B.E.-Computer Science and Engineering
Year/Semester : III/VI

S.NO ASSIGNMENT QUESTIONS COs

UNIT-I
1 Design a Responsive Layout For Instagram CO1
UNIT-II
2 Explore Various Ui Interaction Patterns CO2
UNIT-III
3 Develop an User Interface with proper UI style guides. CO3
UNIT-IV
4 Create Wireframes for grocery apps using figma CO4
UNIT-V
1 Explore various Hands On Design Thinking process stages for CO5
a new product and write down the Brainstorming feature for
proposed product and Define the Look and Feel of the new
Project

To Produce World Class Engineers & Leaders

Pedagogy initiatives
proof
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

Pedagogy initiatives proof-2023-24

Course Code-
: CCS370 - UI AND UX DESIGN
Name
Degree-Branch : B.E.-Computer Science and Engineering
Year/Semester : III/VI

Topic Industry Trends in User Interface and User Experience

Design
Topic Description In digital design, user interface (UI) refers to the
interactivity, look, and feel of a product screen or web
page, while user experience (UX) covers a user's overall
experience with the product or website. This Guest Lecture
helps the students to know more about User Interface and
User Experience(UI and UX) .
Teaching Pedagogy Guest Lecture(MD4)
Feedback from the students Students got the knowledge about the design principles
about UI and UX design. Students got the idea about how
UI and UX concepts applied in real world applications
Outcome of the Pedagogy Students can able to know about the design principles of
User Interface and User Experience .

Proof for the Pedagogy

To Produce World Class Engineers & Leaders

 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

To Produce World Class Engineers & Leaders

Guest Lecture proof
for Respective
subject
(If conducted)
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

Guest Lecture proof for Respective subject-2023-24

Course Code-
: CCS370 - UI AND UX DESIGN
Name
Degree-Branch : B.E.-Computer Science and Engineering
Year/Semester : III/VI

Topic Industry Trends in User Interface and User Experience

Design
Topic Description In digital design, user interface (UI) refers to the
interactivity, look, and feel of a product screen or web
page, while user experience (UX) covers a user's overall
experience with the product or website. This Guest Lecture
helps the students to know more about User Interface and
User Experience(UI and UX) .
Teaching Pedagogy Guest Lecture(MD4)
Feedback from the students Students got the knowledge about the design principles
about UI and UX design. Students got the idea about how
UI and UX concepts applied in real world applications
Outcome of the Pedagogy Students can able to know about the design principles of
User Interface and User Experience .

Proof for the Pedagogy

To Produce World Class Engineers & Leaders

 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

To Produce World Class Engineers & Leaders

Question Bank (With
Last 5 Years
University Questions)
IA-I, IA-II, IA-III - Test
Question Papers &
Answer Key
 Register Number
Loyola INSTITUTE OF TECHNOLOGY AND SCIENCE, THOVALAI
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

INTERNAL ASSESSMENT - 1

Course Code-Name :
CCS370 - UI AND UX DESIGN Date & Session :
Regulation :
Degree-Branch : B.E- CSE Duration : 180 Minutes
Semester-Section : VI Max. Marks : 100 Marks
CL-Cognitive Levels: K1-Remember, K2-Understand, K3-Apply, K4-Analyse, K5-Evaluate, K6-Create
CO1 Summarize the foundations of Designs
CO2 Summarize the foundations of UI design of any product or application
CO3 Demonstrate UX Skills in product development
Answer All Questions

Part –A(10x2=20Marks) Cognitive Mapping

Answer All Questions Levels COs
1 Differentiate UI and UX design K2 CO1 (2)

2 What is design thinking? Write down the phases of K1 CO1 (2)

design thinking.

3 What are the techniques used in ideation process? K1 CO1 (2)

4 Give an illustration to contrast between divergent and K2 CO1 (2)

convergent thinking.

5 List the principles of UI design. K1 CO2 (2)

6 What are the elements used for explaining the process? K2 CO2 (2)

7 What is branding? Write the four pillars of branding. K2 CO2 (2)

8 List any five elements of style guide. K2 CO2 (2)

9 Give the qualities of an UX designer. K2 CO3 (2)

10 Why should you care about UX? K2 CO3 (2)

Part –B(5x16=80Marks) Cognitive Mapping

Answer All Questions Levels COs
11a Describe in detail the different phases involved in the K2 CO1 (16)
design thinking process with a neat diagram.

(OR)
11b. Explain the following forms of thinking with suitable
examples
a) Divergent thinking (7) K2 CO1 (16)
b) Convergent thinking (6) K2 CO1
12.a Write short notes on
a) Brainstorming (7) K2 CO1 (8)
b) Gamestroming (6) K2 CO1 (8)

(OR)
12.b Describe the standards for conducting an effective empathy K2 CO1 (16)
interviewing process and Describe the standards for
conducting an effective empathy interviewing process

13.a Explain the UI design principles with examples K2 CO2 (16)

(OR)
13.b Explain about UI Design Elements K2 CO2 (16)

14.a Explain about UI Design Patterns K2 CO2 (16)

(OR)
14.b i)Explain the essentials of visual branding and UI/UX in K2 CO2 (16)
branding.
Ii)Explain style guide and its elements K2 CO2
15.a Describe the elements of UX design and explain the K3 CO3 (16)
UX design process and describe the methodologies of
UX design

(OR)
15.b Explain the types of UX researches and its benefits K3 CO3 (16)
 Loyola INSTITUTE OF TECHNOLOGY AND SCIENCE, THOVALAI
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

INTERNAL ASSESSMENT - 1-Answer key

Course Code-Name :
CCS370 - UI AND UX DESIGN Date & Session :
Regulation :
Degree-Branch : B.E- CSE Duration : 180 Minutes
Semester-Section : VI Max. Marks : 100 Marks

Part –A(10x2=20Marks)

1 Differentiate UI and UX design

2 What is design thinking? Write down the phases of design thinking.

Design thinking is a methodology which provides a solution-based approach to solving

problems.It’s extremely useful when used to tackle complex problems that are ill-
defined or unknown—because it serves to understand the human needs involved, reframe
the problem in human-centric ways, create numerous ideas in brainstorming sessions and
adopt a hands-on approach to prototyping and testing.

3 What are the techniques used in ideation process?

 There are hundreds of ideation techniques you can use—such as Brainstorm,

Brain write Worst Possible Idea and SCAMPER.

1
4 Give an illustration to contrast between divergent and convergent thinking.

5 List the principles of UI design.

•Visual Weight (Contrast and Size)

•Color
•Repetition and Pattern Breaking
• Line Tension and Edge Tension

•Alignment and Proximity

•Using Motion for UX
6 What are the elements used for explaining the process?

5 elements of user experience exist on 5 separate planes, each one stacked on top of the previous
one to create an outline of the process UX teams can follow for every new project they design.
From bottom to top those planes are strategy, scope, structure, skeleton and surface.

7 What is branding? Write the four pillars of branding.

Branding in general is the set of marketing and psychological techniques and

steps aiming at promotion of a product, service, persona etc. first of all via setting a
brand. Branding is a sort of image building for an organization via a set of
distinguishing features and promoting awareness and recognizability of the product or
service on the market.

8 List any five elements of style guide.

 Typography
 Colors
 Iconography
 Layouts and Grids
2
  Components
9 Give the qualities of an UX designer.

UX designers, by their very nature solve problems and seek solutions that creatively align user
needs and business goals.

10 Why should you care about UX?

What is user experience (UX) research? User experience (UX) research is about diving deep into how
customers interact with your brand on a practical, functional level, and observing how easily they can
complete their tasks and meet their goals.

Part –B(5x16=80Marks)
Answer All Questions
11a. Describe in detail the different phases involved in the design thinking process with a neat diagram.

What are the 5 Stages of the Design Thinking Process? Stage

1: Empathize—Research Your Users' Needs. ... Stage 2:
Define—State Your Users' Needs and Problems. ...

Stage 3: Ideate—Challenge Assumptions and Create Ideas. ...

Stage 4: Prototype—Start to Create Solutions. ...

Stage 5: Test—Try Your Solutions Out

Empathize: the first phase of design thinking, where you gain real insight into users
and their needs.

Define: the second phase of design thinking, where you define the problem statement in
a human-centered manner

Ideate: the third phase of design thinking, where you identify innovative solutions to
the problem statement you’ve created.

Prototype: the fourth phase of design thinking, where you identify the best possible
solution.

Test: the fifth and final phase of the design thinking process, where you test solutions to
derive a deep understanding of the product and its users.

3
 (OR)
11b. Explain the following forms of thinking with suitable examples
a) Divergent thinking (7)
Divergent thinking can also help you:

 Identify new opportunities

 Find creative ways to solve problems
 Assess ideas from multiple perspectives
 Understand and learn from others

b) Convergent thinking (6)

The main difference between convergent and divergent thinking is that convergent
thinking produces a single effective solution while divergent thinking produces
multiple creative solutions. In brief, these are two opposite ways of thinking

 The two terms convergent thinking and divergent thinking were coined by the
4
 psychologist Joy Paul Guilford in 1956.
 Convergent thinking involves finding the most effective answer to a problem
 while Divergent involves generating creative ideas to explore many possible
solutions
12.a Write short notes on
a) Brainstorming (7)
Brainstorming is a method design teams use to generate ideas to solve clearly
defined design problems. In controlled conditions and a free-thinking environment,
teams approach a problem by such means as “How Might We” questions.

1. Set a time limit – Depending on the problem’s complexity, 15–60 minutes is normal.

2. Begin with a target problem/brief – Members should approach this sharply

defined question, plan or goal and stay on topic.
3. Refrain from judgment/criticism – No-one should be negative (including via body
language) about any idea.
4. Encourage weird and wacky ideas – Further to the ban on killer phrases like “too
expensive”, keep the floodgates open so everyone feels free to blurt out ideas
(provided they’re on topic).
5. Aim for quantity – Remember, “quantity breeds quality”. The shifting-and-sorting
process comes later.
6. Build on others’ ideas – It’s a process of association where members expand on
others’ notions and reach new insights, allowing these ideas to trigger their own. Say
“and”—rather than discourage with but”—to get ideas closer to the problem.
7. Stay visual – Diagrams and Post-Its help bring ideas to life and help others see
things in different ways.
8. Allow one conversation at a time – To arrive at concrete results, it’s essential to

keep on track this way and show respect for everyone’s ideas
b) Gamestroming (6)
Game storming is exploration of business challenges through the application of
gaming (games). Game storming will help organizations to:

5
 ● Overcome conflict and increase engagement with team-oriented games
● Improve collaboration and communication with visual-thinking techniques
● Generate better ideas, insights, strategies and more of them – faster than
ever before
● Produce better products and services for your end users
Stages of a Game

Every game is a world which evolves in stages

1. Imagine the world,

2. create the world,
3. open the world,
4. explore the world, and
5. close the world

(OR)
12.b Describe the standards for conducting an effective empathy interviewing
process and Describe the standards for conducting an effective empathy interviewing process
How do you observe empathy?

Tips for Practicing Empathy

 Work on listening to people without interrupting.

 Pay attention to body language and other types of nonverbal communication.
 Try to understand people, even when you don't agree with them.
 Ask people questions to learn more about them and their lives.
 Imagine yourself in another person's shoes.

How to Gain an Empathic Understanding of People

The What-How-Why method is a tool that you can use while observing people to
help you dive into your observations and derive deeper levels of understanding.

With the What-How-Why method, you start with concrete observations — the What

— and from there move to higher levels of abstraction — asking How — and then
finally you arrive at the Why—i.e., the emotional drivers behind people’s behaviours.

6
 Methods of Empathy in Design Thinking

 Observation and Immersion

 Interviewing
 Co-creation
Benefits of Empathy in Design Thinking

 Improved User Experience

 Increased Customer Loyalty
 Higher Quality Products and Services
 Increased Market Share

13.a Explain the UI design principles with examples

Visual Design Principles

•Visual Weight (Contrast and Size)

•Color
•Repetition and Pattern Breaking
• Line Tension and Edge Tension

•Alignment and Proximity

•Using Motion for UX
(OR)
13.b Explain about UI Design Elements

UI Elements

 Input Controls: checkboxes, radio buttons, dropdown lists, list boxes,

buttons, toggles, text fields, date field.

 Navigational Components: breadcrumb, slider, search field, pagination,
slider, tags, icons.
 Informational Components: tooltips, icons, progress bar, notifications,
message boxes, modal windows.
 Containers: accordion.
14.a
Explain about UI Design Patterns

7
 What Is a Design Pattern?

When many designers have the same challenge and someone solves it in an
elegant way, and many designers use that solution, it is called a design pattern. A
design is not necessarily good just because it’s common.

Hamburger Button: In real life, many users don’t notice the hidden “hamburger” menu
button at all, and they leave the site or get lost. That’s bad. And lazy. Now, there are
hundreds of design patterns, and they are changing all the time as devices and
technologies evolve.

Z-Pattern, F-Pattern, Visual Hierarchy:

It is easy to imagine every user excitedly reading every letter you write and every pixel
you make. Get over it, because real users won’t. They scan. “Scanning” means the user
only stops to read when something catches their eye.

The F-Pattern works like this:

1. Start in the upper-left corner, like the Z-Pattern.

2. Read/scan the first (head)line of the text.
3. Scan down the left side of the column until you find something interesting.
4. Read the interesting thing more carefully.
5. Continue scanning down.
6. By repeating that method over and over, the scanning pattern starts to look
like an “E” or an “F,” hence the name
Create a Visual Hierarchy

When you consistently use typography to indicate the importance of text, and certain
colors to highlight buttons, and when you give more visual weight to things that matter, it
creates a visual hierarchy (i.e., a design that people can scan easily).

(OR)
14.b i)Explain the essentials of visual branding and UI/UX in branding.
Branding
Branding in general is the set of marketing and psychological techniques and
steps aiming at promotion of a product, service, persona etc. first of all via setting a
brand. Branding is a sort of image building for an organization via a set of
distinguishing features and promoting awareness and recognizability of the product or
service on the market.

Branding can be realized via the set of visual elements, the most widely used of
which are:Logo

8
  Brand Colors
 Typography: lettering as a part of the logo or full representation of the logo

(wordmark); types and fonts used via digital as well as physical products
representing the brand; Graphic elements such as, for example, illustrations,
design of letterheads, business cards and other print assets;
 Templates for corporate presentations etc.
Ii)Explain style guide and its elements
What should be included in a Style Guide?

 Typography
 Colors
 Iconography
 Layouts and Grids
 Components

15.a Describe the elements of UX design and explain the UX design process.

and Describe the methodologies of UX design

User experience (UX) refers to the user's journey when interacting with a

product or service. UX design is the process of creating products or services that

provide meaningful experiences for users, involving many different areas of product
development including branding, usability, function, and design.

 Useful: Your content should be original and fulfil a need

 Usable: Site must be easy to use
 Desirable: Image, identity, brand, and other design elements are used to
evoke emotion and appreciation
 Findable: Content needs to be navigable and locatable onsite and offsite
 Accessible: Content needs to be accessible to people with disabilities
 Credible: Users must trust and believe what you tell them

9
 (OR)
15.b Explain the types of UX researches and its benefits

10
 Register Number

Loyola INSTITUTE OF TECHNOLOGY AND SCIENCE, THOVALAI

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

INTERNAL ASSESSMENT - 2

Course Code-Name :
CCS370 - UI AND UX DESIGN Date & Session :
Regulation :
Degree-Branch : B.E. - CSE Duration : 180 Minutes
Semester-Section : VI Max. Marks : 100 Marks
CL-Cognitive Levels: K1-Remember, K2-Understand, K3-Apply, K4-Analyse, K5-Evaluate, K6-Create
CO3:Demonstrate UX Skills in product development.
CO4:Implement Sketching principles,Wireframe and Prototype.
CO5:Identify problem statement,conduct end-to-end user research,Sketch, design with popular tool,build a
prototype and perform usability testing
Answer All Questions

Part –A(10x2=20 Marks) Cognitive Mapping

Answer All Questions Levels COs
1 Differentiate UX Research methods K2 CO3 (2)

2 What are the importance of business goals? K1 CO3 (2)

3 What are the features of sketch? K1 CO4 (2)

4 What are red routes? K1 CO4 (2)

5 Define wireframing K1 CO4 (2)

6 List the Types of Wireframing tools K1 CO4 (2)
7 What is a user persona? UX persona basics? K1 CO5 (2)
8 Why ideation is so important? K1 CO5 (2)

9 What are Flow Diagrams? K1 CO5 (2)

10 What is flow mapping? K1 CO5 (2)

Part –B(5x16=80Marks) Cognitive Mapping
Answer All Questions Levels COs
Explain the process of conducting UX research in
11a. understanding user needs. K3 CO3 (16)

(OR)
K3 (16)
Explain Tools and Method used for Research CO3
11b.

K3 CO4 (16)
12.a Explain about Sketching Red Routes
(OR)
K3 CO4 (16)
12.b What is a responsive layout? Explain its characteristics.
 CO4
K3
Illustrate Wireframing in detail. (16)
13.a

(OR)
Demonstrate the types and process of prototyping in K3 (16)
13.b detail. CO4

How to identify and write Problem Statements? Explain

14.a the Appropriate Research Methods K3 CO5 (16)

(OR)
14.b Demonstrate the steps for creating user persona. K3 CO5 (16)

What is solution ideation? Write the characteristics of

the ideation session.Write the techniques in ideation K3 CO5 (16)
15.a
process
(OR)
Demonstrate the creation of user stories in detail and
Discuss in detail about creating K3 CO5 (16)
15.b
scenarios
 Loyola INSTITUTE OF TECHNOLOGY AND SCIENCE, THOVALAI
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

INTERNAL ASSESSMENT - 2 -Answer Key

Course Code-Name :
CCS370 - UI AND UX DESIGN Date & Session :
Regulation :
Degree-Branch : B.E. - CSE Duration : 180 Minutes
Semester-Section : VI Max. Marks : 100 Marks
Answer All Questions

Part –A(10x2=20 Marks)

Answer All Questions
Differentiate UX Research methods
Qualitative Research: Exploratory form of the research where the researcher collects verbal, behavioural
or observational data which is interpreted to get insights.

1 Quantitative Research: Structured way of collecting and analyzing data in numeric form.
Analysis, interpretation and presentation of numerical data are done by using Statistical
techniques.

What are the importance of business goals?

Business goals are the objectives that a company aims to achieve through its product or
2 service. Some examples include increasing revenue, expanding market share, or
improving brand reputation.

What are the features of sketch?

Idea generation
Visualizing design concepts
3
Speed and flexibility
Collaboration
Cost-effective

What are red routes?

4 Red routes are a matrix which helps priorities your content and functionality based on
usefulness to the most users.

Define wireframing
Wireframing in UI/UX Design is one of the most crucial steps which involves visualizing
the skeleton of digital applications. A wireframe is a layout of a product that
5
demonstrates what interface elements will exist on key pages. It is a critical part of the
interaction design process.
 List the Types of Wireframing tools
Wireframes can be simply hand-drawn but are often put together using software
likeAdobeXD, Figma, Sketch, Balsamiq to provide an on-screen layout. Using such
6 tools you can create wireframes that are interactive in nature as well where you can
showcase the interactions between screens and also quick usability testing or heuristic
evaluation.

What is a user persona? UX persona basics?

In user experience and user interface (UX/UI) design, a persona is a fictional
character that represents a typical user of an app, website, or other product.
A user persona helps clarify your target audience:
7
 It helps with design iteration. During alpha and beta testing, the feedback
you get will help you improve your user persona.
 It helps you identify the user. A persona helps you understand their needs.
 It gives you an understanding of user behavior.
Why ideation is so important?
The more time and resources dedicated to the ideation phase, the easier the
prototyping and testing phases will be. This is because you will have already
8 considered a wide range of potential problems and solutions before the product and
service even makes it to users. Without ideation, a problem would merely remain a
problem and a solution would never advance into production.

What are Flow Diagrams?

A flow diagram, also known as a flowchart, is a visual representation of a process,
system, or user journey. In the context of user experience design, flow diagrams are
9
used to illustrate the sequential steps that a user follows to accomplish a task or achieve
a goal within a digital interface.

What is flow mapping?

Flow mapping in user experience design refers to the process of visually mapping out
user interactions and experiences within a digital product or service. It provides a
10
detailed view of how users navigate through screens, features, and tasks, highlighting
their interactions and decision points.

Part –B(5x16=80Marks)
Answer All Questions
Explain the process of conducting UX research in understanding user needs.
If you’re new to UX research, here’s a step-by-step list of what to consider before you begin your

11a.
 UX testing program:
Objectives
What do you need to find out about your users and their needs?
Hypothesis
What do you think you already know about your users?
Methods
Based on your deadline, project type, and the size of your research team, what UX research
methods should you use?
Process
Using your selected UX research method(s), begin collecting data about your users, their
preferences, and their needs.
Synthesis
Analyse the data you collected to fill in your knowledge gaps, address your hypothesis and create
a plan to improve your product based on user feedback.
(OR)
Explain Tools and Method used for Research
Most common methods are

1.Focus Groups

Focus Group brings together 6-9 Participant users. The Goal of the Test is to discover what users want
from the Product. Furthermore, conducting Focus Groups allows you to learn about their attitude, opinion
and reactions to concepts that you are testing with Users.

2.Contextual Interview

A contextual interview involves one-on-one interaction between user and researcher. And the interaction
11b. involves the researcher to watch and observe the user work in their environment; and then discuss those
activities with them.

3.User Interview

User interview is one of the most common User research methods. In fact, it provides you the rich
information and insights of what your target users think about your new product, site or service. A User
Interview is typically conducted by 2 UX researchers, one to conduct the interview and other to record the
interview and take notes.

4.Ethnography Study Ethnography is a kind of social research. It is type of qualitative research which
provides a detailed and in-depth description of everyday life and practice taking a wider picture of culture.

Explain about Sketching Red Routes.

how does Red route help in Designs?

“When applied to design, these red routes are the critical and frequent paths that users take to complete
their tasks”
12.a
Red Route principle

Define red routes for your product and you’ll be able to identify, prioritise and eliminate any usability
obstacles on key user journeys.
 Identifying Red Routes
Critical
End-to-end tasks with multiple steps or actions
Frequently utilised
Built for scale
Key value drivers
Objectively successful
Tied to critical product metrics
By identifying what the top tasks of your users are it allows you to:
Anticipate user needs
Guide usability testing
Target essential website pages
Design website with user needs in mind
Identify your website’s mission
(OR)
What is a responsive layout? Explain its characteristics.
Responsive web design (RWD) is crucial in UX/UI design, allowing users to access content on any device.
It considers factors like usability, accessibility, and scalability to ensure website enhancement. The
ultimate goal is for users to have the best possible experience with any product.

In today’s digital landscape, responsive UI/UX design is essential. With the wide variety of devices that
users use to access websites and applications, it is critical that your design adapts seamlessly to different
screen sizes and resolutions. In this article, we will provide a comprehensive guide to responsive UI/UX
design, helping you create visually stunning and user-friendly designs that work on any device.
12.b
There are a number of benefits to using responsive design.

First, it ensures that your website or application is accessible to users on all devices. This is important
because more and more people are using their smartphones and tablets to access the web.
Second, responsive design can improve the user experience by making it easier for users to interact with
your website or application on different devices.
Third, responsive design can save you time and money by eliminating the need to create separate
websites for different devices.

Illustrate Wireframing in detail.

Why do UI/UX designers use Wireframes?

As part of the User-Centered Design process, wireframes are used at the beginning of the design
phase. Similar to how an architect first thinks of the blueprint of a building and decides the
relative positioning of different rooms with respect to each other before thinking of interior
design, during Designing Mobile and Web App wireframes designers visualize the whole skeleton
for the digital application.
Some more reasons why wireframes are important:
a.Saves Time
13.a This is mainly because wireframes can be quickly made through rough sketches.
Hence, it becomes easier to remove major errors and make quick changes.
b.Helps Gathering Feedback
For a User Interface and User Experience Designer, gathering feedback from the end- user is very
important. Wireframes help in achieving this. As they are devoid of color, which makes it easier
for the end-user to appreciate the UX design functions.
c.Creating Accurate Designs
Different types of wireframes help a UI/UX designer create accurate blueprints of his designs. As
the designer can review where each content will be placed.
 2.What are the different types of wireframes?
The three common types of wireframes are:-
1)Low Fidelity Wireframe
2)Medium Fidelity Wireframe
3)High Fidelity Wireframe
a. Low Fidelity wireframes (Lo-Fi)
They are also known as paper wireframes, which are created roughly. They do not contain
detailed grids, scales, or pixels. But, functions, contents, headings, topics are present in a raw
form without an accurate structure.
b)Mid Fidelity Wireframes (Mi-Fi)
These types of wireframes can be commonly used for communication with the stakeholders and
end-users. Mid-fidelity wireframes contain grid, scale, and pixel hence, they are more accurate
than low-fidelity wireframes. This makes it one of the most used types of wireframes among the
UI/UX designers.
c)High Fidelity wireframes (Hi-Fi)
Low Fidelity and Mid Fidelity wireframes are devoid of feature images and written content. They
make an appearance in high fidelity wireframes. With more concrete shape to UI Components,
this type of wireframe contains the complete blueprint of the design and is the most accurate and
almost similar to visual design screens without much of colors.
(OR)
Demonstrate the types and process of prototyping in detail.
Prototyping plays a very crucial role in UI/UX design. It is a process of interface design that helps
to determine the functionality and usability of the product before the final launch. Prototypes can
vary in fidelity, and in reality, and can begin at any stage.
Prototyping in UI/UX Design
Qualities of A Good Prototype
Representation: A prototype is a basic representation of the actual product. It represents how
the product will look or work.
Precision: the prototype’s fidelity or the degree of detail: low-fidelity or high-fidelity.

13.b Functional: A good prototype executes the fundamental operations of the final product. A good
prototype is one that can be easily improved upon.
Benefits of Prototyping
We can overview the working system early in the process.
It can be used to test each component of the finished product before it is constructed.
Results in higher user satisfaction
Problems are detected before launch of the product.
Reduces development time and cost.
Missing functionality can be identified prior to the launch of the product.
 Scope of considering new requirements.
Types of Prototyping
Low-Fidelity Prototyping: A low-fidelity prototyping generally consists of a bare- bones
version of the final product. It is an efficient, straightforward method of turning a design concept
into a bit more real-world illustration of a software application. They are ideal for quick
brainstorming and collaboration. In this the sketches are made and the connection to every part of
the product is made on paper or board. It saves time and money, but may not have every function
that a website should have.
Medium-Fidelity Prototyping: Medium fidelity prototyping has limited functionality but
clickable areas which present the interactions and navigation possibilities of an application. It is a
more detailed and realistic prototype than Low- fidelity prototyping.
High-Fidelity Prototyping: High-fidelity prototypes have a lot of detail and are interactive.
They have better visual appeal and perform functions that are more similar to those of the finished
product. It displays every detail in the design with its functionalities. This is the final step to
ensure that the design is of good quality before it is implemented in the final product.
How to identify and write Problem Statements? Explain the Appropriate Research Methods

1.Identifying the Problem:

Observation: Start by observing your surroundings, workplace, or community Look for patterns,
inefficiencies, or areas where improvements are needed.

Listening: Pay attention to the concerns of people around you, colleagues, students, or community
members. Their challenges can often be a source of meaningful problems.

Research: Stay updated with current literature, research, and news in your field. Identify gaps or
unresolved issues that can be explored further.

2.Defining the Problem Clearly:

Clarity: Ensure the problem statement is clear, concise, and easy to understand for a broad audience.
Avoid technical jargon or overly complex language.

Specificity: Be specific about the problem. Avoid vague statements and provide details about the who,
what, when, where, and why of the problem.

14.a Scope: Define the boundaries of the problem. What is included in the problem, and what is not?
Clearly outline the scope to avoid ambiguity.

3.Explaining the Impact:

Significance: Explain why the problem is significant. Describe the potential impact on individuals,
organizations, or the community if the problem is not addressed.

Consequences: Detail the negative consequences of the problem. This can include financial losses,
decreased efficiency, environmental impact, or any other relevant factors.

4.Providing Relevant Data:

Statistics: If applicable, include relevant statistics or data that highlight the extent of the problem.
Statistical information adds credibility to the statement.

Research Findings: Refer to existing research findings or studies that

support the existence and importance of the problem you are addressing.

5.Proposing a Solution (Optional):

 Tentative Solution: While not necessary, you can briefly mention a potential solution. However,
emphasize that further research or investigation is needed to validate and implement the solution.

Innovation: If your problem statement is for a research project, consider how your approach could be
innovative and contribute to the existing body of knowledge.

6.Keeping it Concise and Focused:

Brevity: Problem statements should be concise, usually a few sentences to a short paragraph. Avoid
unnecessary details or background information that does not directly contribute to understanding the
problem.

Focus: Stay focused on the main issue. Do not try to address multiple problems within a single
statement. Each problem should have its own clearly defined statement.

(OR)
Demonstrate the steps for creating user persona.
Definition: Personas are detailed, fictional characters representing different user types within a
target audience. They help designers and developers understand user’s needs, behaviours, and
expectations, guiding UI/UX decisions to create user-centered designs.
What is a user persona? UX persona basics
In user experience and user interface (UX/UI) design, a persona is a fictional character that
represents a typical user of an app, website, or other product.
A user persona helps clarify your target audience:
It helps with design iteration. During alpha and beta testing, the feedback you get will help you
14.b improve your user persona.

It helps you identify the user. A persona helps you understand their needs.
It gives you an understanding of user behavior.
Step 1: Give the persona a name
Step 2: Add demographics and interests
Step 3: Identify frustrations
Step 4: Identify wants and aspirations
Step 5: Review and update frequently

What is solution ideation? Write the characteristics of the ideation session.Write the
techniques in ideation process
Definition: Solution ideation is a structured brainstorming process aimed at generating innovative
and practical ideas to address specific problems or challenges. It involves collaborative and
creative thinking to explore diverse solutions that can lead to breakthrough innovations.

15.a UX Design Ideation Process

There are many different approaches to ideation, and the methods and techniques adopted by a
UX designer will often depend on the goals and needs of the individual or group involved.

Some of the most popular ideation processes in UX design are:

 Brainstorming
Brainwriting
Problem-solving
Provocation
User interviews and user research
Sketching and prototyping
Storyboarding
The importance of ideation in UX design
Closing thoughts
(OR)
Demonstrate the creation of user stories in detail and Discuss in detail about creating
Scenarios
Definition: User stories are concise, informal descriptions used in Agile software development to
capture the functionality and requirements from an end-user perspective. They focus on the who,
what, and why of a feature, providing a clear understanding of user needs and expectations.
What are user stories?
A user story is a short description of a feature written from the perspective of the end user. It's
considered the smallest unit of work in Agile development and it generally follows the same
format:
The anatomy of a user story. Our user story template
To make the template as easy to use as possible, we avoided any kind of jargon. Fields have
intuitive names and follow the general outline: As a [user type], I [want to], [so that].
15.b
1.)User types are listed as tabs in the Excel template, so you can easily navigate from one user
type to another.
2.)The “want to” part is listed as a Goal (also referred to as an Epic in Agile, which is basically a
higher-level story or a grouping of smaller stories serving a common goal). The Goal can take one
or more steps to complete, which can be further broken down into user stories.
3.)The “User Story Description” field allows you to add important information to that user story.
This can range from descriptions of the app's behavior and the layout of the page to details such as
date format.
4.)The “Design” field allows you to add links pointing to the actual screen designs and flows. Pro
tip: In addition to the design links, add a text description of the page layout.
5.)The template also includes fields for frontend and backend estimates, as well as additional
comments. After writing the user stories, we have a planning meeting with the development team,
where we estimate the work for each user story.
IA-I, IA-II, IA-III Test
Answer Script
( 3 Sample)
Fast Learner -1
Medium Learner - 1
Slow Learner -1
 Slow learners List
(According to the course)
 Slow learners
Remedial class
Schedule (According
to the course)
Slow learners proof
(According to the
course)
 Slow learners
questions (According
to the course)
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

Learning Questions for Slow Learners-2023-24

Course Code-
: CCS370 - UI AND UX DESIGN
Name
Degree-Branch : B.E.-Computer Science and Engineering
Year/Semester : III/VI

Part –B(13 mark questions)

UNIT 1
1 Describe in detail the different phases involved in the design thinking process with a
neat diagram.
2 Explain the following forms of thinking with suitable examples
a) Divergent thinking (7)
b) Convergent thinking (6)
3 Write short notes on
a) Brainstorming (7)
b) Gamestroming (6)
4 Describe the standards for conducting an effective empathy interviewing
process and Describe the standards for conducting an effective empathy interviewing
process
UNIT 2
1 Explain the UI design principles with examples
2 Explain about UI Design Elements
3 Explain about UI Design Patterns
4 i)Explain the essentials of visual branding and UI/UX in branding.
Ii)Explain style guide and its elements
UNIT 3
1 Describe the elements of UX design and explain the UX design process and describe
the methodologies of UX design
2 Explain the types of UX researches and its benefits
3 Explain the process of conducting UX research in understanding user needs.
4 Explain Tools and Method used for Research
UNIT 4
1 Explain about Sketching Red Routes
2 What is a responsive layout? Explain its characteristics.
3 Illustrate Wireframing in detail.
4 Demonstrate the types and process of prototyping in detail.
UNIT 5
1 How to identify and write Problem Statements? Explain the Appropriate Research
Methods
2 Demonstrate the steps for creating user persona.
3 What is solution ideation? Write the characteristics of the ideation session.Write the
To Produce World Class Engineers & Leaders
 Loyola Institute of Technology and Science
Loyola Nagar, Thovalai – Rajavoor Road, Thovalai Post – 629 302, Kanyakumari District, Tamil Nadu.
Mob : 9244775545 / 55 / 44 / 11, 94431 24568 Website : www.lites.edu.in
e-mail – lites2008@hotmail.com , chairman@lites.edu.in, principal@lites.edu.in, placement@lites.edu.in

Approved by AICTE Affiliated to Anna University Chennai

techniques in ideation process

4 Demonstrate the creation of user stories in detail and Discuss in detail about creating
scenarios

To Produce World Class Engineers & Leaders

 Fast learners List &
Activity for
Supporting Fast
Learners
(According to the course)
 CO Attainment
Sheet(Theory, Lab,
Project)
Course End Survey