USER INTERFACE DESIGN Course Code : 314014

: Artificial Intelligence/ Artificial Intelligence and Machine Learning/ Cloud Computing

Programme Name/s and Big Data/ Computer Technology/
Computer Engineering/ Computer Science & Engineering/ Data Sciences
Programme Code : AI/ AN/ BD/ CM/ CO/ CW/ DS
Semester : Fourth
Course Title : USER INTERFACE DESIGN
Course Code : 314014

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
Based on LL &
Contact Based on
Theory TL
Course Course Hrs./Week 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
USER
314014 INTERFACE UID DSC 1 - 4 1 6 3 - - - - - 25 10 25@ 10 25 10 75
DESIGN

MSBTE Approval Dt. Semester - 4, K Scheme

USER INTERFACE DESIGN Course Code : 314014
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

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
Purpose, 5 stages of design thinking – Empathize, Chalk-Board
thinking concepts.
Define, Ideate, Prototype, Test Demonstration
TLO 1.2 Define User
1 1.2 Introduction to User Interface / User Experience Presentations
Interface.
(UI/UX) – Definition of Design with respect to digital Flipped
TLO 1.3 Describe User
media, User Interface, User experience, Difference Classroom
experience.
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 requirements. research - Qualitative research, Quantitative research. Case Study
2 TLO 2.2 Describe requirement Tools to collect user requirements – personal Demonstration
analysis techniques. observation, interviews, questionnaire, User/ Expert Hands-on
TLO 2.3 Identify user persona. reviews Presentations
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.
MSBTE Approval Dt. Semester - 4, K Scheme
USER INTERFACE DESIGN Course Code : 314014
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.
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 techniques. 4.2 UX design open source tool such as - Figma Chalk-Board
TLO 4.3 Describe steps to features – Navigations, interactions, Buttons Demonstration
4
create micro-animation. Creating library Hands-on
TLO 4.4 Write steps to create 4.3 Gamification, micro-animation Presentations
interactions using buttons, 4.4 Creating visual identity of the project – design
navigations etc. in any design system, design theme
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 Chalk-Board
5.2 Basics of sketching, Creating low fidelity
fidelity prototype on paper. Demonstration
5 wireframes, medium fidelity and high fidelity in Figma
TLO 5.3 Write steps to create Hands-on
5.3 Basic considerations in wireframing – device, size,
high fidelity prototype using Presentations
behavior, interaction
design tool.
5.4 Elements used in wireframing – visual design, high
TLO 5.4 Test the design
fidelity elements
prototype.
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
LLO 1.1 Identify categories of
website/ App such as government / *Use Design tool for user requirement collection
e-commerce / tourism related etc. 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
LLO 2.1 Observe various and analysis of various interfaces such as kiosks
interfaces used in kiosk based
applications. Visit minimum 5 interfaces. Identify problems CO1
2 4
LLO 2.2 Prepare affinity mapping in overall navigation, look and feel of the CO2
of User Requirements using design interface, relevance of the information. Record
tools. all findings using Design tool

LLO 3.1 Use any Design tool to *Recreate a given user interface using any open
create a ‘blank project’. 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.)

MSBTE Approval Dt. Semester - 4, K Scheme

USER INTERFACE DESIGN Course Code : 314014
Practical / Tutorial / Laboratory Sr Laboratory Experiment / Practical Titles / Number Relevant
Learning Outcome (LLO) No Tutorial Titles of hrs. COs
LLO 4.1 Use frames, images, and
colors to design given screen. * Create grid system for the given screen using
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,
auto-layouts to design given screen *Design given user interface using various
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) )
*Use vertical scrolling for a given website/ App
LLO 7.1 Use vertical scrolling
component in the design tool to 7 4 CO4
(For example, Retail website/App or food ordering
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.)
Design a quiz for given user interface
LLO 10.1 Use components and
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)

MSBTE Approval Dt. Semester - 4, K Scheme

USER INTERFACE DESIGN Course Code : 314014
Practical / Tutorial / Laboratory Sr Laboratory Experiment / Practical Titles / Number Relevant
Learning Outcome (LLO) No Tutorial Titles of hrs. COs
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 (For example, progress bar effect/ waitin for reply 4
LLO 13.2 Use templates to create CO4
micro-animation for given user or responce effect/ status bar/ welcome page or
scenario. opening page animatio etc.)
*Create prototyping with different interactions –
LLO 14.1 Use Interactions/ events CO4
14 tab, click, hover, delay. for the given user 4
to create Prototype in design tool. CO5
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
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

MSBTE Approval Dt. Semester - 4, K Scheme

USER INTERFACE DESIGN Course Code : 314014
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.
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
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

MSBTE Approval Dt. Semester - 4, K Scheme

USER INTERFACE DESIGN Course Code : 314014

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

Programme
Specific
Programme Outcomes (POs)
Outcomes*
(PSOs)
Course PO-5
Outcomes PO-1 Basic Engineering
PO-3 PO-7
(COs) and PO-2 PO-4 Practices for
Design/ PO-6 Project Life PSO- PSO- PSO-
Discipline Problem Engineering Society,
Development Management Long 1 2 3
Specific Analysis Tools Sustainability
of Solutions 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

MSBTE Approval Dt. Semester - 4, K Scheme

USER INTERFACE DESIGN Course Code : 314014
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
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
MSBTE Approval Dt. Semester - 4, K Scheme
USER INTERFACE DESIGN Course Code : 314014
Sr.No Link / Portal Description
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. Semester - 4, K Scheme