27-11-2024 01:20:14 P

UI/UX DESIGN Course Code : 314005

: Artificial Intelligence/ Artificial Intelligence and Machine Learning/ Cloud
Computing and Big Data/ Computer Technology/
Programme Name/s
Computer Engineering/ Computer Science & Engineering/ Data Sciences/ Computer
Science/
Programme Code : AI/ AN/ BD/ CM/ CO/ CW/ DS/ SE
Semester : Fourth
Course Title : UI/UX DESIGN
Course Code : 314005

I. RATIONALE
In digital applications, the user communicates with the product via user interface. This course is designed to
elicit fundamental principles and practical skills from stakeholders which are essential to design user friendly
interfaces. The course will help students to apply design thinking concepts to create or re-create the prototype.

II. INDUSTRY / EMPLOYER EXPECTED OUTCOME

The aim of this course is to help the students to attain the following industry identified outcome through various
teaching learning experiences:
Design user-centered applications, websites, interfaces.

III. COURSE LEVEL LEARNING OUTCOMES (COS)

Students will be able to achieve & demonstrate the following COs on completion of course based learning

CO1 - Explain design thinking concept.

CO2 - Interpret user requirements.
CO3 - Select appropriate visual design for given problem.
CO4 - Create interactions using design tool.
CO5 - Create innovative design prototype for given applications.

IV. TEACHING-LEARNING & ASSESSMENT SCHEME

Learning Scheme Assessment Scheme
Actual
Contact Based on LL & TL Based
Theory
Course Course Hrs./Week on SL
Course Title Abbr Credits Paper Total
Code Category/s SLH NLH Practical
Duration Marks
FA- SA-
CL TL LL Total FA-PR SA-PR SLA
TH TH
Max Max Max Min Max Min Max Min Max Min
314005 UI/UX DESIGN UID SEC 1 - 4 1 6 3 - - - - - 25 10 25@ 10 25 10 75
Total IKS Hrs for Sem. : 0 Hrs
Abbreviations: CL- ClassRoom Learning , TL- Tutorial Learning, LL-Laboratory Learning, SLH-Self Learning
Hours, NLH-Notional Learning Hours, FA - Formative Assessment, SA -Summative assessment, IKS - Indian
Knowledge System, SLA - Self Learning Assessment
Legends: @ Internal Assessment, # External Assessment, *# On Line Examination , @$ Internal Online
Examination
Note :

1. FA-TH represents average of two class tests of 30 marks each conducted during the semester.
2. If candidate is not securing minimum passing marks in FA-PR of any course then the candidate shall be
declared as "Detained" in that semester.
3. If candidate is not securing minimum passing marks in SLA of any course then the candidate shall be
declared as fail and will have to repeat and resubmit SLA work.
4. Notional Learning hours for the semester are (CL+LL+TL+SL)hrs.* 15 Weeks
5. 1 credit is equivalent to 30 Notional hrs.
6. * Self learning hours shall not be reflected in the Time Table.
7. * Self learning includes micro project / assignment / other activities.

V. THEORY LEARNING OUTCOMES AND ALIGNED COURSE CONTENT

MSBTE Approval Dt. 21/11/2024 Semester - 4, K Scheme

Page 1/7
 27-11-2024 01:20:14 P

UI/UX DESIGN Course Code : 314005

Suggested
Theory Learning Outcomes Learning content mapped with Theory Learning
Sr.No Learning
(TLO's)aligned to CO's. Outcomes (TLO's) and CO's.
Pedagogies.
Unit - I Design Thinking Fundamentals
1.1 Introduction to Design thinking – Concept,
TLO 1.1 Explain design Chalk-Board
Purpose, 5 stages of design thinking – Empathize,
thinking concepts. Demonstration
Define, Ideate, Prototype, Test
1 TLO 1.2 Define User Interface. Presentations
1.2 Introduction to User Interface / User Experience
TLO 1.3 Describe User Flipped
(UI/UX) – Definition of Design with respect to digital
experience. Classroom
media, User Interface, User experience, Difference
between UI and UX. History of UX. Need of UI and UX
Unit - II User Requirements and its Analysis
2.1 Introduction to research and analysis tool
(freeware) such as FigJam
TLO 2.1 Explain research
2.2 User requirements – Definition, Types of user Chalk-Board
methods for user
research - Qualitative research, Quantitative Case Study
requirements.
2 research. Tools to collect user requirements – Demonstration
TLO 2.2 Describe requirement
personal observation, interviews, questionnaire, Hands-on
analysis techniques.
User/ Expert reviews Presentations
TLO 2.3 Identify user persona.
2.3 User requirement analysis - Understanding target
audience and client requirements, Competitive
analysis, Affinity mapping, Defining User Persona
TLO 3.1 Demonstrate
Unit - III User Interface Design
storyboarding for given
3.1 Storyboarding, User journey mapping
problem.
3.2 Gestalt principles of design - Aesthetics in UI
TLO 3.2 Demonstrate User Chalk-Board
design - Using Light, Color and Contrast Effectively in
journey mapping for given Demonstration
3 UI Design
problem. Hands-on
3.3 Introduction to any freeware design tool such as
TLO 3.3 Describe graphic Presentations
Figma
design principles.
3.4 Visual Communication Design - effective visual
TLO 3.4 Explain visual
communication for graphical user interface
communication.
TLO 4.1 Explain User
Experience design.
Unit - IV User Experience Design Tool
TLO 4.2 Describe steps to
4.1 Introduction to User Experience design
create gamification
4.2 UX design open source tool such as - Figma Chalk-Board
techniques.
features – Navigations, interactions, Buttons Demonstration
4 TLO 4.3 Describe steps to
Creating library Hands-on
create micro-animation.
4.3 Gamification, micro-animation Presentations
TLO 4.4 Write steps to create
4.4 Creating visual identity of the project – design
interactions using buttons,
system, design theme
navigations etc. in any design
tool.
Unit - V Prototyping and Testing
TLO 5.1 Create low fidelity 5.1 Introduction to Wireframing - Purpose of
prototyping of design on wireframing, Types – low fidelity, medium fidelity,
paper. high fidelity
TLO 5.2 Create medium 5.2 Basics of sketching, Creating low fidelity Chalk-Board
fidelity prototype on paper. wireframes, medium fidelity and high fidelity in Demonstration
5
TLO 5.3 Write steps to create Figma Hands-on
high fidelity prototype using 5.3 Basic considerations in wireframing – device, Presentations
design tool. size, behavior, interaction
TLO 5.4 Test the design 5.4 Elements used in wireframing – visual design,
prototype. high fidelity elements
5.5 Prototyping and Testing

VI. LABORATORY LEARNING OUTCOME AND ALIGNED PRACTICAL / TUTORIAL EXPERIENCES.

Practical / Tutorial / Laboratory Sr Laboratory Experiment / Practical Titles / Number Relevant
Learning Outcome (LLO) No Tutorial Titles of hrs. COs

MSBTE Approval Dt. 21/11/2024 Semester - 4, K Scheme

Page 2/7
 27-11-2024 01:20:14 P

UI/UX DESIGN Course Code : 314005

Practical / Tutorial / Laboratory Sr Laboratory Experiment / Practical Titles / Number Relevant
Learning Outcome (LLO) No Tutorial Titles of hrs. COs
LLO 1.1 Identify categories of
website/ App such as government / *Use Design tool for user requirement
e-commerce / tourism related etc. collection and analysis
LLO 1.2 Compare different
Visit minimum 5 websites/ Apps of the
websites/ Apps under one category CO1
1 particular category. Identify problems in 4
for design aesthetics. CO2
overall navigation, look and feel of websites,
LLO 1.3 Use design tool to collect
relevance of the information. Record all
user requirements.
findings using Design tool
LLO 1.4 Record observations using
any design tool.
Use Design tool for user requirement
collection and analysis of various interfaces
LLO 2.1 Observe various interfaces such as kiosks
used in kiosk based applications.
CO1
LLO 2.2 Prepare affinity mapping 2 Visit minimum 5 interfaces. Identify 4
CO2
of User Requirements using design problems in overall navigation, look and feel
tools. of the interface, relevance of the information.
Record all findings using Design tool

LLO 3.1 Use any Design tool to *Recreate a given user interface using any
create a ‘blank project’. open source design tool CO1
LLO 3.2 Use frame, shape, text of 3 4 CO2
design tool to create screen layout (For example, to recreate the first screen of CO3
of given user interface. personal mobile phone etc.)
LLO 4.1 Use frames, images, and
* Create grid system for the given screen using
colors to design given screen.
any design tool CO3
LLO 4.2 Explore various plug-ins/
4 4 CO4
extensions in the design tool. (For example dashboard of particular application/ CO5
LLO 4.3 Use different plug-
welcome screen of any blog portal etc.)
ins/extensions in design tool.
LLO 5.1 Use frames, components,
*Design given user interface using various
auto-layouts to design given screen
components such as auto-layouts in the design CO2
using Design tool.
tool CO3
LLO 5.2 Create asset using design 5 4
CO4
tool.
(For example, design sample login page/ design CO5
LLO 5.3 Create library/repository registration form etc.)
of created assets in the design tool.
*Use horizontal scrolling to create pages for
LLO 6.1 Use horizontal scrolling given website/ App
component in the design tool to 6 4 CO4
create given page(s). (For example, page(s) in social media Apps/
tourism related webpage(s) )
LLO 7.1 Use vertical scrolling *Use vertical scrolling for a given website/ App
component in the design tool to 7 (For example, Retail website/App or food ordering 4 CO4
create given page(s). Apps etc.)
LLO 8.1 Use frame, shape, text
tools, components of the design
CO3
tool to replicate the design of given Recreate given website for UI design, color,
8 4 CO4
web page(s). images, interactions, menu
CO5
LLO 8.2 Use interactions, menus to
replicate web page design.
LLO 9.1 Use various menus - *Create navigations for the given website/ App
bottom menu, slide menu to
9 (For example, create navigation in App using 4 CO4
demonstrate navigations in the
screen. bottom menu etc.)

MSBTE Approval Dt. 21/11/2024 Semester - 4, K Scheme

Page 3/7
 27-11-2024 01:20:14 P

UI/UX DESIGN Course Code : 314005

Practical / Tutorial / Laboratory Sr Laboratory Experiment / Practical Titles / Number Relevant
Learning Outcome (LLO) No Tutorial Titles of hrs. COs
LLO 10.1 Use components and Design a quiz for given user interface
navigations to design quiz like 10 (For example, quiz for LMS / government web site 4 CO5
page in design tool. / retail web sites etc.)
LLO 11.1 Observe gamification
techniques used in existing user Create any two gamification effects for given
interfaces. CO3
11 user interface in given scenario 4
LLO 11.2 Use files, templates to CO4
create gamification effect in given (For example, racing effect etc.)
scenario using design tool.
Create gamification for task completion in
LLO 12.1 Use files, templates to website such as LMS/ retail website/ banking CO3
website
create gamification effect in given 12 4 CO4
scenario using design tool. CO5
(For example, popping up effect/ releasing
balloons in the air etc. once a task is completed)
LLO 13.1 Observe micro- Create any five micro animations for the given
animations used in existing user interface in given scenario
websites, Apps, interfaces. CO3
13 4
LLO 13.2 Use templates to create (For example, progress bar effect/ waitin for reply CO4
micro-animation for given user or responce effect/ status bar/ welcome page or
scenario. opening page animatio etc.)
*Create prototyping with different
LLO 14.1 Use Interactions/ events CO4
14 interactions – tab, click, hover, delay. for the 4
to create Prototype in design tool. CO5
given user interface
LLO 15.1 Use plug-in/ extension to
convert the created prototype into
html page(s). 15 Convert created prototype in HTML page(s) 4 CO5
LLO 15.2 Use browser to run the
generated HTML page(s).
Note : Out of above suggestive LLOs -
'*' Marked Practicals (LLOs) Are mandatory.
Minimum 80% of above list of lab experiment are to be performed.
Judicial mix of LLOs are to be performed to achieve desired outcomes.

VII. SUGGESTED MICRO PROJECT / ASSIGNMENT/ ACTIVITIES FOR SPECIFIC LEARNING / SKILLS
DEVELOPMENT (SELF LEARNING)

Micro project

The micro project has to be Industry Application Based, Internet-based, Workshop-based, Laboratory-based or
Field-based as suggested by Teacher:
1. Prepare a prototype for online blog:
a. Prepare a competitive analysis of similar website
b. Define user persona and prepare user journey mapping using any design tool
c. Construct prototype using - navigation, interaction, frames in design tool
d. Validate the prototype by checking navigation and conditions given
e. Convert the design prototype into HTML code
2. Reconstruct given user interface such as kiosk system:
a. Observe the given user interface
b. Identify improvement in the user interface in terms of - look and feel, navigation, interactions
c. Prepare affinity mapping using design tool
d. Reconstruct the given interface using various components in design tool
3. Prepare a prototype for food ordering App:
a. Prepare a competitive analysis of similar Apps
b. Define user persona and prepare user journey mapping using any design tool
c. Construct prototype using - navigation, interaction, frames in design tool
d. Validate the prototype by checking navigation and conditions given
4. Rebuild smart TV user interface layout
MSBTE Approval Dt. 21/11/2024 Semester - 4, K Scheme
Page 4/7
 27-11-2024 01:20:14 P

UI/UX DESIGN Course Code : 314005

a. Visit existing interfaces of smart television
b. Record findings related to color scheme, theme, look and feel, location on display of existing interfaces
c. Record minimum 10 different user reviews regarding the smart television user interface (chose user from
different backgrounds)
d. Record improvements in look, navigation, and interactions
e. Redefine user persona for existing interface
f. Rebuild the interface prototype using design tool

Assignment

1. Prepare a case-study report -

a. Identify any dedicated interface such as Automated deposit cum Withdrawal machine.
b. Perform a user requirement analysis through any research method (e.g. Interview/ Questionnaire etc.).
c. Define user persona for the same.
d. Prepare a low fidelity prototype for it.
2. Prepare user storyboard and user journey mapping for given user interface -
a. Identify user requirements .
b. Perform a user requirement through research methods (e.g. Interview/ Questionnaire etc.).
c. Define user persona for the same.
d. Prepare a user journey mapping for the same.
e. Prepare a storyboard for the user interface.
3. Prepare low, medium, and high fidelity prototype for given user interface -
a. Identify user interface.
b. Collect user requirements by any two methods (e.g. Personal observation/ expert review etc.)
c. Define user persona for the same.
d. Prepare a low fidelity prototype on paper for the same.

Other

Following are some suggestive self-learning topics or any relevant topics suggested by the Teacher:
1. Prepare a feature-based detailed report of similar types of website/portal(such as Flight/ bus Reservation
websites/ MIS / e-commerce web sites / educational institutions websites etc).
2. Prepare affinity mapping in any design tool (e.g. FigJam) for user requirements in given domain of the project.
3. Define user persona and perform requirements mapping using design tools in any of the following category –
Ticket booking kiosk/ Online examination system / Quiz App.
4. Prepare user journey mapping for given scenario in the given project
5. Prepare low, medium, and high-fidelity prototypes for a given scenario using any design tool.
6. Prepare a library/repository of design components using any design tool like Figma.
7. Reconstruct any ticket booking website to address improvements in look and feel, ease of use within it.

Note :

Above is just a suggestive list of microprojects and assignments; faculty must prepare their own bank of
microprojects, assignments, and activities in a similar way.
The faculty must allocate judicial mix of tasks, considering the weaknesses and / strengths of the student in
acquiring the desired skills.
If a microproject is assigned, it is expected to be completed as a group activity.
SLA marks shall be awarded as per the continuous assessment record.
For courses with no SLA component the list of suggestive microprojects / assignments/ activities are
optional, faculty may encourage students to perform these tasks for enhanced learning experiences.
If the course does not have associated SLA component, above suggestive listings is applicable to Tutorials
and maybe considered for FA-PR evaluations.

VIII. LABORATORY EQUIPMENT / INSTRUMENTS / TOOLS / SOFTWARE REQUIRED

Sr.No Equipment Name with Broad Specifications Relevant LLO Number
1 Design tool - preferably open-source based tool such as Figma All

MSBTE Approval Dt. 21/11/2024 Semester - 4, K Scheme

Page 5/7
 27-11-2024 01:20:14 P

UI/UX DESIGN Course Code : 314005

Sr.No Equipment Name with Broad Specifications Relevant LLO Number
Computer system with minimum specifications as -
Processor - 2.9 GHz or equivalents or higher with 10th generation or onwards
2 Operating System - 64 bit All
RAM - 8GB DDR3 or higher
Internet Connectivity

IX. SUGGESTED WEIGHTAGE TO LEARNING EFFORTS & ASSESSMENT PURPOSE (Specification Table)
Aligned Learning R- U- A- Total
Sr.No Unit Unit Title
COs Hours Level Level Level Marks
1 I Design Thinking Fundamentals CO1 2 0 0 0 0
User Requirements and its
2 II CO2 3 0 0 0 0
Analysis
3 III User Interface Design CO3 4 0 0 0 0
4 IV User Experience Design Tool CO4 3 0 0 0 0
5 V Prototyping and Testing CO5 3 0 0 0 0
Grand Total 15 0 0 0 0

X. ASSESSMENT METHODOLOGIES/TOOLS

Formative assessment (Assessment for Learning)

1. Continuous assessment based on process and product related performance indicators.

Each practical will be assessed considering:
60% weightage to process
40% weightage to product
2. A continuous assessment based term work

Summative Assessment (Assessment of Learning)

End semester examination, Lab performance, Viva voce

XI. SUGGESTED COS - POS MATRIX FORM

Programm
Specific
Programme Outcomes (POs)
Outcomes*
(PSOs)
Course PO-5
Outcomes PO-1 Basic Engineering
(COs) and PO-2 PO-3 Design/ PO-4 Practices for PO-7 Life
PO-6 Project PSO- PSO- PS
Discipline Problem Development Engineering Society, Long
Management 1 2 3
Specific Analysis of Solutions Tools Sustainability Learning
Knowledge and
Environment
CO1 2 1 2 1 - 1 1
CO2 3 2 2 2 - - 2
CO3 3 3 3 3 1 - 1
CO4 2 3 3 3 2 1 1
CO5 2 3 3 3 2 2 1
Legends :- High:03, Medium:02,Low:01, No Mapping: -
*PSOs are to be formulated at institute level

XII. SUGGESTED LEARNING MATERIALS / BOOKS

Sr.No Author Title Publisher with ISBN Number
New Riders Publishing, 201 West 103
The Elements of User
Street, Indianapolis, IN 46290 800-545-
1 Jesse James Garrett Experience: User-Centered
5914
Design for the Web and Beyond
ISBN:978-0-321-68368-7

MSBTE Approval Dt. 21/11/2024 Semester - 4, K Scheme

Page 6/7
 27-11-2024 01:20:14 P

UI/UX DESIGN Course Code : 314005

Sr.No Author Title Publisher with ISBN Number
World Scientific Publishing Co Pte Ltd,
Falk Uebernickel, Li Jiang, No.16, South West Boag Road T. Nagar,
2 Walter Brenner, Britta Pukall, Design Thinking: The Handbook Chennai 600017, INDIA
Therese Naef ISBN-10: 9811203504
ISBN-13: 978-9811203503
Packt Publishing Ltd, Grosvenor House,
11 St Paul's Square, Birmingham, B3
Designing and Prototyping
3 Fabio Staiano 1RB
Interfaces with Figma
ISBN-10: 180056418X
ISBN-13: 978-1800564183
Personal Growth Hackers
4 Kilian Langenfeld Design Thinking for Beginners ISBN-10: 3967160629
ISBN-13: 978-3967160628

XIII . LEARNING WEBSITES & PORTALS

Sr.No Link / Portal Description
Design thinking phases and
1 https://aim.gov.in/pdf/Design_Thinking.pdf
learning resources
2 https://www.ideou.com/pages/design-thinking-resources Design thinking resources
https://www.figma.com/resource-library/what-is-design-thinki
3 Design thinking and its stages
ng/
4 https://www.figma.com/resource-library/what-is-ui-design/ Key elements of UI design
User Experience and research
5 https://youtu.be/-wzNTPXVIyM?si=zET5z3GpIPl-cAry
methods
User Experience and research
6 https://youtu.be/XT152i5asdQ?si=jPdLFFExnaZO8NRs
methods
https://usabilitypost.com/2008/08/14/using-light-color-and-c Using Light, Color and Contrast
7
ontrast-effectively-in-ui-design/ Effectively in UI Design
http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_ Effective Visual Communication
8
design.html for Graphical User Interfaces
9 https://youtu.be/Y9ixRTTx5iU?si=vSCsbCr6gXD5eG-n Visual Communication Design
10 https://youtu.be/K-DRTBMnzm8?si=DaUPM4iLW2CU3oSU Low fidelity design
11 https://youtu.be/KCYLE78w074?si=xZsvSnO9qx7iVE2S High fidelity design
Figma - Design Tools - Figma and
12 www.figma.com
FigJam (Freeware)
Design basics using Figma
13 https://www.figma.com/resource-library/design-basics/
(Freeware)
Single-page, public wireframe
14 https://wireframe.cc/ without user account available in
free version.
Design Thinking and user
https://drive.google.com/file/d/1Od0G1mtlRHz5LkxgT3GPr7wDEIw
15 experience research (Notes by
7GV05/view
NPTEL)
16 https://www.mindmeister.com/ Collaborative mind mapping tool
17 https://miro.com/ UX tool
18 https://www.hotjar.com/ UIUX tool
Note :

Teachers are requested to check the creative common license status/financial implications of the suggested
online educational resources before use by the students

MSBTE Approval Dt. 21/11/2024 Semester - 4, K Scheme

Page 7/7