Q1. Design a low-fidelity wireframe for a simple mobile app.

Concept Chosen: To-Do List App

Objective: Help users manage daily tasks efficiently with a clean, intuitive interface.

Wireframe Overview
A low-fidelity wireframe is a basic visual guide that represents the skeletal framework of an app.
It focuses on layout, structure, and user flow rather than colors or detailed graphics.

Key Screens:

1. Home Screen
o Header: “My Tasks”
o Button: “+ Add Task”
o Task List: Checkbox + Task Name + Due Date
o Filter Tabs: All / Today / Completed
2. Add Task Screen
o Input Fields: Task Name, Description, Due Date
o Priority Selector: Low / Medium / High
o Save Button
3. Task Detail Screen
o Task Info: Name, Description, Due Date, Priority
o Edit / Delete Buttons
o Mark as Completed
4. Settings Screen
o Options: Notifications, Theme (Light/Dark), Sync
o Logout Button

Design Choices Explained

1. Usability Principles

 Simplicity: Minimalist layout avoids clutter, making it easy for users to focus on tasks.
 Consistency: Uniform button styles and navigation patterns across screens.
 Feedback: Checkbox interaction gives instant feedback when a task is marked complete.
 Accessibility: Large touch targets and readable fonts ensure ease of use for all users.

2. User Goals Alignment

 Quick Task Entry: “+ Add Task” button is prominently placed for fast access.
 Task Prioritization: Priority selector helps users organize their day effectively.
 Progress Tracking: Filter tabs and checkboxes allow users to monitor task completion.
 Customization: Settings screen gives control over notifications and appearance.
Why Low-Fidelity?

Low-fidelity wireframes are ideal in early design stages because:

 They’re fast to create and easy to modify.

 They encourage feedback without focusing on aesthetics.
 They help stakeholders visualize user flow and functionality.

Q2. Explain the five stages of Design Thinking with a practical case study or
example.

Case Study: Designing a Mobile App for Booking Local Transport in a Busy City

Design Thinking is a human-centered, iterative approach to problem-solving. It consists of five

key stages: Empathize, Define, Ideate, Prototype, and Test. Let’s explore each stage using the
example of creating a mobile app that helps users book local transport (autos, taxis, and shared
rides) in a congested urban area like Chennai.

1. Empathize – Understand the User

This stage involves deep research to understand the users’ needs, behaviors, and pain points.

 Methods Used: Interviews with commuters, observation at bus stops and auto stands,
surveys on travel habits.
 Findings: Users face long wait times, lack of real-time availability, and difficulty
negotiating fares. Elderly users struggle with complex apps, while students want budget-
friendly options.

Empathy helps designers walk in the users’ shoes and uncover real problems beyond
assumptions.

2. Define – Frame the Problem

In this phase, insights from the empathy stage are synthesized into a clear problem statement.

 Problem Statement: “Urban commuters need a simple and reliable way to book local
transport because current options are unpredictable, time-consuming, and not user-
friendly.”
 User Personas: Created for different user types—students, working professionals,
elderly commuters.

This stage sets the foundation for ideation by focusing on specific user needs and goals.

3. Ideate – Generate Ideas

Now the team brainstorms a wide range of solutions without judgment.

 Ideas Explored:
o Real-time auto/taxi availability map
o Fare estimator based on distance and traffic
o Voice-based booking for elderly users
o Ride-sharing options for students
o Emergency contact integration

Techniques like “How Might We” questions and mind mapping help expand creative
possibilities.

4. Prototype – Build a Model

Designers create low-fidelity wireframes and clickable mockups to visualize the app.

 Prototype Features:
o Home screen with “Book Now” button
o Map showing nearby vehicles
o Fare estimate and payment options
o Profile section with preferences
o Voice assistant for accessibility

The goal is to quickly test ideas without investing in full development.

5. Test – Validate with Users

The prototype is tested with real users to gather feedback and refine the design.

 Testing Insights:
o Elderly users preferred larger buttons and voice commands.
o Students liked the fare split feature.
o Some users wanted offline booking options for low-network areas.

Based on feedback, designers improved navigation, added a help section, and simplified the
booking flow.

Conclusion

Design Thinking helped create a transport app that’s not just functional but deeply aligned with
user needs. By empathizing, defining, ideating, prototyping, and testing, the team built a solution
that solved real problems in a meaningful way.
Q3. Differentiate between UI and UX design with examples.

Course Outcome (CO1)

What is UI Design?

User Interface (UI) Design focuses on the visual and interactive elements of a product. It’s
about how the product looks and how users interact with it.

Key Elements of UI:

 Layout and structure of screens

 Typography and color schemes
 Buttons, icons, sliders, and input fields
 Visual feedback (e.g., animations, hover effects)

Example:

In a food delivery app like Swiggy:

 The UI includes the search bar, restaurant cards, “Add to Cart” button, and the checkout
screen.
 A well-designed UI ensures that users can easily navigate and enjoy the visual
experience.

What is UX Design?

User Experience (UX) Design is about the overall journey a user has while interacting with a
product. It focuses on usability, accessibility, and emotional satisfaction.

Key Elements of UX:

 User research and personas

 Information architecture
 Task flows and wireframes
 Usability testing and feedback loops

Example:

In the same food delivery app:

 The UX ensures that users can find restaurants quickly, customize orders easily, and track
deliveries without confusion.
 A good UX makes the app intuitive and enjoyable, even if the UI is simple.

UI vs UX: Real-World Comparison

 Feature UI Design UX Design
Focus Visual appearance and interaction Overall user journey and satisfaction
Tools
Figma, Adobe XD, Sketch User interviews, empathy maps, journey maps
Used
Ease of completing a task (e.g., placing an
Example Button color and placement
order)
Aesthetic and interactive
Outcome Seamless and meaningful experience
interface

How UI and UX Work Together

Imagine a beautifully designed login screen (UI) that doesn’t show error messages when the
password is wrong. The UI looks great, but the UX fails because users feel confused.

Conversely, a plain-looking login screen that guides users clearly and helps them recover
passwords easily has strong UX—even if the UI is basic.

Together, UI and UX ensure that a product is both visually appealing and functionally effective.

Q4. Conduct an Observational Empathy Exercise

Case Study: Observing a user interacting with a public transport ticket machine Course
Outcome (CO1)

What is Observational Empathy?

Observational empathy involves watching how users interact with a product or system in real-
world conditions. The goal is to understand their emotions, frustrations, and behaviors without
interfering. It’s a key part of user-centered design, helping designers uncover hidden pain points
and unmet needs.

Observation Setup

 Location: Chennai Metro Station

 User Observed: Middle-aged commuter trying to buy a ticket
 Duration: 10 minutes
 Method: Silent observation followed by empathy mapping

Empathy Map

Category Observations
Says “Why is this taking so long?” “I don’t know which zone to select.”
Thinks “I might miss my train.” “This should be easier.”
Category Observations
Feels Frustrated, anxious, confused
Does Taps screen repeatedly, looks around for help, skips instructions

Key Findings

 Complex Interface: The ticket machine had too many options and unclear labels.
 Lack of Guidance: No visual or audio cues to guide first-time users.
 Stressful Environment: The user felt rushed due to a long queue and time pressure.
 Accessibility Issues: Small font and touch targets made interaction difficult.

Suggested Improvements

1. Simplify UI: Use clear icons and fewer steps to complete a transaction.
2. Add Help Mode: Include a “Help” button with voice or animation-based guidance.
3. Improve Feedback: Show progress indicators and confirmation messages.
4. Design for Accessibility: Use larger fonts, high-contrast colors, and responsive touch
zones.

Conclusion

This observational empathy exercise revealed that even a functional system like a ticket machine
can cause stress if not designed with the user in mind. By mapping the user’s experience,
designers can make informed decisions that improve usability and emotional satisfaction.

� Q5. Create a Persona and User Journey Map for a Target User

Case Study: College Student Using an Online Learning Platform Course Outcome (CO1)

Step 1: Create a Persona

A persona is a fictional character that represents a segment of your target users. It helps
designers empathize with real needs and behaviors.

Persona: Priya Sharma

 Age: 20
 Background: Undergraduate student in Computer Science
 Tech Comfort: Moderate; uses mobile and laptop daily
 Goals:
o Complete assignments on time
o Access recorded lectures and notes
o Track progress and grades
 Frustrations:
o Slow-loading pages
 o Confusing navigation
o Lack of notifications for deadlines
 Behaviors:
o Studies late at night
o Uses mobile more than desktop
o Prefers visual content (videos, diagrams)

Step 2: User Journey Map

Task: Submitting an assignment on the college’s online learning platform

Thoughts &
Stage Actions Taken Pain Points Opportunities
Feelings
Opens app, enters “Hope this works Slow login, Add biometric login or
Login
credentials quickly.” occasional errors auto-login
Searches for the “Where is the Confusing layout, Simplify dashboard,
Navigate
assignment section upload button?” too many clicks add quick links
Upload Selects file from “Did it upload No confirmation Add progress bar and
File device correctly?” message success message
No email or
Clicks submit and “I hope it’s Send confirmation via
Submit notification
waits for response submitted.” app and email
confirmation
Checks submission “Did I miss Hard to find Add submission
Review
status anything?” submission history timeline and status tab

Conclusion

By creating a persona and mapping Priya’s journey, we uncover specific usability issues and
emotional responses. This helps designers improve the platform’s experience—making it faster,
clearer, and more supportive for students like her.