CCS370 – UIUX Laboratory

Questions

1. Design a responsive website layout for a municipal waste management system where
users can schedule garbage pickup, view recycling tips, and track collection vehicles.
The layout must adapt to desktop, tablet, and mobile devices using proper grid and
alignment principles.
2. Design an interactive appointment scheduling app for patients and doctors. Include
screens for doctor search, appointment booking, and reminders. Focus on easy
navigation, icon consistency, and clarity in button hierarchy.
3. Design a 3-page educational web app (Home, Course List, Course Detail) maintaining
consistent color palette, typography, spacing, and button styles. Present your defined
style guide separately before implementation.
4. Create wireflow diagrams showing user navigation across major screens — Home,
Product Search, Cart, Checkout, and Payment. Connect actions with directional flow
arrows, and ensure the user journey is logical and minimal.
5. Design a web interface that supports team collaboration — task boards, user chat,
and project status updates. Focus on real-time interaction patterns and shared
workspace layout in Penpot.
6. Use the five stages of design thinking — Empathize, Define, Ideate, Prototype, and
Test — to design a campus navigation app for students and faculty. Include campus
maps, personas, problem statement, and final interactive prototypes.
7. Choose any existing app (e.g., Swiggy, Instagram, Zomato). Identify a missing feature
that improves user experience. Brainstorm multiple ideas, select one, and design
wireframes and prototype to illustrate the added functionality.
8. Create a visual design system for a fitness tracking app using mood boards, color
palettes, typography, and imagery. Apply your design theme consistently across 3–4
sample screens (dashboard, activity, progress).
9. Create a reusable UI component library in Penpot including buttons, cards,
dropdowns, form elements, and icons. Use these components to design two
interconnected travel booking screens.
10. Identify a common real-world problem (e.g., public transport delays, school
attendance tracking). Define the problem, create user personas, and develop an app
interface that solves the issue through improved interaction design.
11. Choose a product idea and conduct user research. Develop personas, user stories,
and scenarios. Then, create a detailed flow diagram and design an interactive
prototype addressing user needs.
12. Create a simple, intuitive interface for teachers to mark attendance and generate
reports. Include login, attendance marking, and report viewing pages. Use clean
alignment, recognizable icons, and readable fonts.
13. Design a dashboard that displays enrolled courses, progress bars, notifications, and
certificates. Focus on clarity, data visualization and responsive layout for both
desktop and tablet screens.
14. Analyze the user interface for an existing e-commerce app (like Flipkart or Amazon).
Identify UX pain points and redesign 3 major screens (Home, Cart, Checkout)
applying better layout, typography, and accessibility standards.
15. Design a web application that allows users to donate to social causes. Ensure
accessibility — color contrast, large text, and keyboard-friendly navigation. Include
screens for cause browsing, donation process, and thank-you confirmation.
16. Design a mobile-first layout that allows users to check balance, transfer funds, and
view transaction history. Then extend the same design to desktop view, ensuring
responsive alignment and consistent branding.
17. Develop a complete user flow for a food delivery system from menu browsing to
order confirmation. Create interactive screens in Penpot showing user transitions and
feedback messages (e.g., “Order Placed Successfully”).
18. Select any one of your prototypes and conduct a small usability test with 2–3 users.
Observe how users interact with your design, list three usability issues identified, and
modify your design accordingly.
19. Work collaboratively (with a peer) on a Penpot project for a shared application idea
(e.g., event management). Demonstrate teamwork through design consistency,
naming conventions, and unified component usage.
20. Choose a real-time application area (e.g., smart city, online healthcare, transport
system). Document all stages — problem identification, user research, ideation,
wireframing, prototype design, usability feedback, and final improvements — along
with final UI outputs from Penpot.

Answers

1. Responsive Waste Management System Layout

 Aim: To create a user-friendly, responsive website for scheduling pickups,

viewing recycling tips, and tracking collection vehicles across all devices.
 Procedure:

o Conduct user research (interviews with residents/municipal workers).

o Define user personas and problem statements.
o Ideate on features and layout using sketches.
o Create low-fidelity wireframes for mobile, tablet, and desktop.
o Develop high-fidelity mockups adhering to a grid system.
o Build an interactive prototype.
o Conduct usability testing across devices.
 Inference: A bottom navigation bar on mobile prioritizes core tasks for
thumb-friendly access, inferring that on-the-go usage is primary. A dashboard-
style desktop layout infers that users at home can process more information at
once.
 Result: A validated, responsive prototype that reduces missed pickups and
recycling contamination, demonstrated by improved task completion times in
 testing.

2. Smart Healthcare Appointment System

 Aim: To streamline the appointment booking process for patients and doctors
through an intuitive app that simplifies search, booking, and management.
 Procedure:

o Empathize with patients and doctors via interviews.

o Define user journeys for booking and managing appointments.
o Ideate on search filters, booking flows, and reminder systems.
o Create wireflows for key tasks.
o Design high-fidelity screens (search, doctor profile, booking).
o Establish and apply a consistent icon and button hierarchy.
o Prototype the core interactive flow.
 Inference: A prominent "Book Now" button infers the primary user goal is
immediate action. A familiar calendar-style date picker infers it reduces
cognitive load compared to text input.
 Result: An intuitive prototype where users can find and book an appointment
in minimal steps, with clear reminder systems.
3. Educational Web App with Style Guide

 Aim: To design a cohesive 3-page educational platform that reinforces brand

identity through strict adherence to a pre-defined visual style guide.
 Procedure:

o First, define the visual style guide (colors, typography, spacing, buttons).
o Apply the guide to design the Homepage layout.
o Apply the guide to design the Course List page.
o Apply the guide to design the Course Detail page.
o Ensure consistency in component usage across all three pages.
 Inference: Using a consistent primary color for all interactive elements infers it
creates a predictable interface. A defined typographic hierarchy infers
improved scannability and readability.
 Result: A visually harmonious and professionally consistent set of web pages
that provide a trustworthy learning environment.
4. Wireflow for Online Grocery App

 Aim: To map the optimal user journey from landing to payment, ensuring a
logical, efficient, and minimal-path-to-purchase.
 Procedure:

o Identify all major screens (Home, Search, Product, Cart, Checkout, Payment).
o Map the primary user flow from entry to order confirmation.
o Use directional arrows to connect screens.
o Annotate arrows with user actions (e.g., "clicks 'Add to Cart'").
o Ensure the flow is logical with minimal steps.
 Inference: Placing a "Search" bar prominently infers users often have specific
items in mind. Allowing users to go directly from Cart to Homepage infers a
need to continue shopping.
 Result: A clear, actionable diagram that serves as a blueprint for development,
ensuring a streamlined navigation structure.
5. Collaborative Remote Work Platform

 Aim: To design a shared web workspace that integrates task management,

team chat, and project updates to facilitate seamless remote collaboration.
 Procedure:

o Research remote team workflows and pain points.

o Ideate on a layout that integrates task boards, chat, and updates.
o Design core components (task cards, message bubbles, status indicators).
o Create a high-fidelity layout of the shared workspace in Penpot.
o Prototype real-time interactions (e.g., live updates, typing indicators).
 Inference: Placing project chat adjacent to the task board infers discussions
are often task-specific. Using subtle visual cues infers the need to simulate
physical presence.
 Result: A functional prototype of a collaborative interface that reduces
context-switching and makes remote interaction feel more connected.
6. "Smart Campus" App using Design Thinking

 Aim: To apply the full design thinking process to create a campus navigation
app that solves wayfinding and event discovery problems.
 Procedure:

o Empathize: Interview students and faculty about campus navigation.

o Define: Synthesize findings into personas and a problem statement.
o Ideate: Brainstorm features (maps, event finders, AR wayfinding).
o Prototype: Create wireframes and an interactive prototype.
o Test: Conduct usability tests with the target audience.
 Inference: An "I'm Lost!" button that shares location infers emotional stress is
a significant part of the problem. Using building silhouettes on the map infers
faster visual recognition.
 Result: A user-validated app concept that directly addresses core user
anxieties, proven to improve navigation confidence.
7. New Feature for a Popular App

 Aim: To identify a gap in an existing app's functionality and design a seamless

integration that enhances the user experience.
 Procedure:

o Select an existing app (e.g., Swiggy, Instagram).

o Analyze its current feature set for gaps.
o Brainstorm multiple new feature ideas.
o Select the most viable and user-beneficial idea.
o Design wireframes integrating the new feature.
o Create a high-fidelity prototype of the enhanced app flow.
 Inference: Adding a "Collaborative Cart" infers that social ordering is a
common, unsupported scenario. Pre-selecting "Split Bill Equally" infers it's the
most common default.
 Result: A well-rationalized feature design that feels native to the original app,
solving a clear user pain point.
8. Fitness Tracker Visual Design System

 Aim: To establish a strong, motivating visual identity and apply it consistently

across key screens to create an engaging user experience.
 Procedure:

o Create a mood board to define the visual theme.

o Define the color palette and typography scale.
o Define imagery style and iconography.
o Apply the design system to the Dashboard screen.
o Apply the system to the Activity Tracking screen.
o Apply the system to the Progress screen.
 Inference: Using bold, high-contrast colors for key metrics infers the need for
quick, motivational feedback. Rounded shapes infer a friendly, approachable
brand.
 Result: A visually striking and consistent fitness app interface that motivates
users through its aesthetic and clear data presentation.
9. Travel Booking UI Kit (Pattern Library)

 Aim: To develop a reusable library of UI components to ensure design

efficiency and consistency across a travel booking website.
 Procedure:

o Audit and list required components (buttons, cards, inputs, icons).

o Design each component with variants (states, sizes) in Penpot.
o Assemble components into a structured library.
o Use the UI Kit to build a Search Results screen.
o Use the UI Kit to build a Booking Details screen.
 Inference: A standardized "Hotel Card" component infers users scan and
compare options quickly. A disabled "Book Now" button until dates are
selected infers preventing user error is a priority.
 Result: A scalable design system that speeds up future design work and
ensures a uniform, professional user experience.
10. Problem-Solving App Design

 Aim: To identify a real-world problem and design a dedicated app interface

that effectively solves it through thoughtful interaction design.
 Procedure:

o Identify and clearly define a real-world problem.

o Create a user persona affected by the problem.
o Ideate on app-based solutions.
o Design wireframes for the core solution screens.
o Develop a high-fidelity prototype of the key user flow.
 Inference: For a transport app, showing "Live Crowding" data infers comfort is
as important as arrival time. A "Leave Now" notification infers users need
proactive prompts.
 Result: A targeted app design that validates its core concept by demonstrably
reducing user stress around the identified problem.
11. End-to-End User Research & Prototype

 Aim: To conduct thorough user research for a new product idea and translate
findings into a detailed user flow and an interactive prototype.
 Procedure:

o Choose a product idea.

o Conduct user research (surveys, interviews).
o Synthesize data into personas and user stories.
o Create a detailed user flow diagram.
o Design wireframes based on the flow.
o Build a high-fidelity, interactive prototype.
o Gather initial feedback on the prototype.
 Inference: Research finding "users feel anxious about X" leads to the inference
that a visual checklist is necessary. User stories infer the need for a profile
section with saved data.
 Result: An evidence-based prototype that is fundamentally aligned with the
behaviors and pain points of its intended users.
12. Student Attendance Management System

 Aim: To create a simple, efficient, and error-free digital system for teachers to
mark daily attendance and generate reports.
 Procedure:

o Design a secure Login screen.

o Design the main Attendance Marking screen (student list with checkboxes).
o Design the Report Generation screen with filters.
o Use clean alignment and recognizable icons.
o Ensure typography is highly readable.
 Inference: Using variable, recognizable icons infers faster processing than text
labels. Color-coding absent students in red infers the need for quick pattern
identification.
 Result: A clean, intuitive interface that significantly reduces the time and effort
required for teachers to manage attendance.
13. Responsive E-Learning Dashboard

 Aim: To design a dashboard that clearly presents a learner's progress, courses,

and achievements in a layout that is informative on desktop and manageable
on tablet.
 Procedure:

o Identify key dashboard metrics and components.

o Design a multi-column desktop dashboard layout.
o Adapt the layout to a single-column, scrollable tablet view.
o Prioritize information hierarchy (e.g., progress, next lesson).
o Use clear data visualizations (progress bars, graphs).
 Inference: Using progress bars for course completion infers visual data is
more motivating than percentages. A "Continue Learning" card at the top
infers reducing friction to resume studying is key.
 Result: A responsive dashboard that effectively communicates student
progress and upcoming tasks, enhancing learner engagement.
14. E-Commerce App Redesign

 Aim: To analyze and improve the UX of a major e-commerce app by

redesigning key screens with better layout, typography, and accessibility.
 Procedure:

o Perform a UX audit on an existing app (e.g., Amazon).

o Identify specific pain points in Home, Cart, and Checkout screens.
o Redesign the Homepage with improved layout and hierarchy.
o Redesign the Cart screen for clarity and editing.
o Redesign the Checkout flow for simplicity and accessibility.
 Inference: Reducing visual clutter on the homepage infers less user
overwhelm. Adding a progress indicator to checkout infers users need
reassurance about remaining steps.
 Result: A set of redesigned screens that offer a cleaner, less stressful, and
more accessible shopping experience.
15. Accessible Donation Platform

 Aim: To design a web application for donating to social causes that is

universally accessible, prioritizing users with visual or motor impairments.
 Procedure:

o Design the Cause Browsing screen.

o Design the Donation Process screen (amount selection, details).
o Design the Thank-you / Confirmation screen.
o Enforce high color contrast ratios for all elements.
o Ensure all interactions are keyboard-navigable.
o Use large, legible typography.
 Inference: A "Skip to Main Content" link infers a commitment to saving time
for keyboard users. Using icons alongside color infers support for users with
color vision deficiency.
 Result: An inclusive and compassionate design that empowers all users to
participate in charitable giving without barriers.
16. Mobile-First Banking App

 Aim: To design a secure and trustworthy banking interface starting with the
mobile experience, then elegantly scaling it up to desktop.
 Procedure:

o Design the mobile view for the Account Dashboard.

o Design the mobile Funds Transfer flow.
o Design the mobile Transaction History screen.
o Scale the design to desktop, utilizing a multi-column layout.
o Maintain consistent branding and interaction patterns.
 Inference: Placing the account balance prominently on mobile infers it is the
most important information. Hiding full account numbers behind a "tap to
reveal" infers a priority on security.
  Result: A cohesive and responsive banking application that provides a
seamless and secure user experience on both phone and computer.

17. Food Delivery User Flow & Prototype

 Aim: To map and prototype the complete user journey for a food delivery
system, from browsing to confirmation, ensuring smooth transitions.
 Procedure:

o Chart the complete user flow from Home to Order Confirmation.

o Design screens for Restaurant List, Menu, Cart, Checkout, and Payment.
o Create an interactive prototype in Penpot linking all screens.
o Incorporate micro-interactions and feedback messages (e.g., "Added to Cart").
 Inference: Showing "Estimated Delivery Time" on the restaurant listing infers
it's a key decision factor. A post-order tracker infers the need to manage user
anxiety while waiting.
  Result: A fully realized and testable prototype that accurately simulates the
entire food ordering experience.

18. Usability Testing & Iteration

 Aim: To identify usability issues in a prototype through direct user observation

and iteratively improve the design.
 Procedure:

o Select a previously built prototype.

o Plan tasks for users to complete.
o Conduct usability tests with 2-3 users.
o Observe and note points of confusion or error.
o List the top 3 identified usability issues.
o Modify the prototype to address these issues.
  Inference: If multiple users fail to find a menu, the inference is its icon was
unrecognizable, leading to a redesign with a label.
 Result: A quantitatively improved design that has been validated and refined
through real user feedback.

19. Collaborative Penpot Project

 Aim: To demonstrate effective teamwork by collaboratively creating a

consistent and unified interface for a shared application idea.
 Procedure:

o Define a shared application idea with a peer.

o Establish shared naming conventions and style guidelines.
o Co-create a component library in a shared Penpot file.
o Divide and design assigned screens using the shared library.
 o Review and refine designs for consistency.
 Inference: Creating a universal "Main Button" component infers that visual
consistency is key. Using a shared color library infers preventing style drift
between designers.
 Result: A successfully delivered design project that showcases cohesive
collaboration in a modern design tool.

20. Complete UI/UX Case Study

 Aim: To document the end-to-end UI/UX design process for a real-time

application, providing a comprehensive case study.
 Procedure:

o Problem Identification: Define the project scope and problem.

o User Research: Document research methods and findings.
o Ideation: Showcase brainstorming and feature selection.
o Wireframing: Present low-fidelity structural designs.
o Prototype Design: Display high-fidelity interactive prototypes.
o Usability Feedback: Summarize test results and findings.
o Final Improvements: Show the iterated final designs.
o Final UI Outputs: Present polished screens from Penpot.
 Inference: The entire case study is a chain of logical inferences from research
findings to design decisions and their validation.
 Result: A professional-grade case study that demonstrates a deep
understanding of how to solve complex user problems through design.