THANTHAI PERIYAR

GOVERNMENT INSTITUTE OF TECHNOLOGY, VELLORE-02

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

MODEL LAB

Year / Sem : III/ VI Date : 12-05-2025

Subject Code : CCS370 Session : FN
Subject Name : UI and UX Design Time : 3 Hrs
Total Marks : 100

Usability
Program/Drawing
Aim/ Principle / Observation &
(Wireframes,
Apparatus Results(Research Viva-Voce Record Total
Wireflow, Sketches,
required/ Procedure Insights, Testing
etc.)
Observations)
20 30 30 10 10 100

1. a) Design a responsive web layout for an online blood donation platform using Figma (or
equivalent).
b) Develop a basic wireflow diagram showing user navigation from homepage to request form.

2. a) Explore and document at least five UI interaction patterns for a mobile banking application.
b) Create a clickable prototype showcasing two of these interaction patterns.

3. a) Develop an interface for an educational app by applying proper UI Style Guides (colors, fonts,
spacing).
b) Build a mood board and style sheet for the app.

4. a) Draw a complete wireflow for a Food Delivery app using an open-source tool like Draw.io,
Figma, or Whimsical.
b) Highlight the main user flow for "Place Order" and "Track Delivery."

5. a) Conduct design thinking stages to create a new mobile app for managing public transportation
information.
b) Present the ideation sketches and low-fidelity wireframes for the app.

6. a) Brainstorm and document features for an E-learning mobile application aimed at college students.
b) Prioritize the features using a feature prioritization matrix.
 THANTHAI PERIYAR
GOVERNMENT INSTITUTE OF TECHNOLOGY, VELLORE-02
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

7. a) Define the complete "Look and Feel" for a healthcare appointment booking app.
b) Create a sample landing page mockup demonstrating your defined theme.

8. a) Create a sample Pattern Library for a tourism website including typography, color palette, and UI
components.
b) Submit a mood board and UI Kit document.

9. a) Identify a real-world customer problem related to online grocery shopping.

b) Conduct basic user research (survey/interview) and present two personas.

10. a) Conduct end-to-end research for a local business e-commerce app: personas, user stories, and
scenarios.
b) Design a flow diagram from "Login" to "Checkout" screen.

11. a) Using Adobe XD (or Figma/Sketch), sketch and design a low-fidelity prototype for a music
streaming app.
b) Conduct usability testing with peers and identify at least three improvements.

12. a) Develop a wireframe and prototype for a small finance management app.
b) Perform usability testing and summarize feedback into actionable improvements.

13. a) Design a mobile-responsive dashboard layout for an NGO’s event management app using Figma
or Adobe XD.
b) Create wireframes for three different breakpoints (mobile, tablet, desktop).

14. a) Explore different navigation UI patterns (hamburger menu, bottom navigation, tab bar) for a
fitness app.
b) Build a clickable prototype using two navigation styles.

15. a) Design a personal finance tracking interface following Material Design or Human Interface Guidelines.
b) Create a UI style guide document for your app.
 THANTHAI PERIYAR
GOVERNMENT INSTITUTE OF TECHNOLOGY, VELLORE-02
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

16. a) Develop a full wireflow for an online book rental application showing paths like "Search Book" → "Rent
Book."
b) Highlight alternate user flows using a flowchart tool.

17. a) Apply Design Thinking to develop a community volunteering platform.

b) Prepare empathy maps and propose 3 innovative features.

18. a) Brainstorm new features for a virtual reality tourism app.

b) Categorize features into MVP (Minimum Viable Product) and Additional Features.

19. a) Define the complete Look and Feel for a meditation and wellness app.
b) Create sample screens showing mood, theme, typography, and icons.

20. a) Build a pattern library for an online education portal: Fonts, Colors, Button styles, Form Inputs.
b) Submit mood board and design system summary.

21. a) Identify a customer problem related to urban transportation (example: bus tracking apps).
b) Conduct a short survey, create two user personas, and propose one key feature to solve the problem.

22. a) Conduct user research for a smart home automation app: gather user needs, create user stories, and map
scenarios.
b) Draw a flow diagram for the device setup process.

23. a) Sketch and design a high-fidelity prototype for a local food delivery service using Sketch/Figma.
b) Perform usability testing with 5 users and document suggestions and improvements.

24. a) Build a prototype for an online learning platform for language learners.
b) Conduct usability testing and present 3 UI/UX refinements based on user feedback.

Prepared By: Verified By: Approved By:

Mr.K.Thirunavukkarasu, AP/CSE Prof.B.Jothi, ASP/CSE HOD/CSE