Ayush Suraj Gupta UI Lab C24027

Index
Sr.No Description Date CO Sign
1. Study of UI life cycle 17/01/2025 CO1

2. Study of open source UX Tools 17/01/2025 CO1

3. Prepare Project Proposal and Requirement Gathering 20/01/2025 CO2

(Choose the project) 27/02/2025
The project should be a web, desktop, or mobile interface. If the
chosen project is a mobile application, note that it must at least be
possible to simulate the project, since one of the prototypes will be
such a simulation that can be evaluated.
4. Analysis Problem statement: 5/03/2025 CO1
Briefly state the problem(s) that the project will seek to solve.
Take the user's point of view. Consider what the user's goals are,
and what obstacles in the way. Output:
• Write up a user analysis, task analysis (identify three tasks
of the chosen problem), and domain analysis clearly,
concisely, and completely.
• A problem object model or entity-relationship diagram.

5. Create a Social model of the chosen Project. 11/03/2025 CO2

6. Identify the Users and Design a User persona. 11/03/2025 CO2
7. Design Creation of Scenario 18/03/2025 CO2
Write a scenario that involves all three of the tasks identified for
the chosen project. Output: Explain the Scenario
• Sketch the scenario (use any tool or hand sketches)
8. Draw a mental model for the above drawn scenario. 18/03/2025 CO2
9. Create High-Fidelity prototype (Wire Frame) using Figma tool. 8/04/2025 CO3

10. Create Prototype for Chosen Project. 15/04/2025 CO3

11. Design Customer Journey map. 19/04/2025 CO4

12. Perform UX Evaluation of Chosen Project. 19/04/2025 CO4
Testing of User Interface from Third Party (Test scripts).
Ayush Suraj Gupta UI Lab C24027

Practical 1: Study of UI life cycle

Introduction

A user interface also called a “UI” or simply an “interface,” is how a person controls a software
application or hardware device.

● A user interface is the point of human-computer interaction and communication on a device,

webpage, or app.

● This can include display screens, keyboards, a mouse, and the appearance of a desktop. User
interfaces enable users to effectively control the computer or device they are interacting with.

● User interface is important to meet user expectations and support effective functionality.

● A successful user interface should be intuitive, efficient, and user-friendly.

● Nearly all software programs have a graphical user interface or GUI. This means the program
includes graphical controls, which the user can select using a mouse or keyboard.

● A typical GUI of a software program includes a menu bar, toolbar, windows, buttons, and other
controls.

● User Interface Design is the craft and process of designing what a user interacts with when
communicating with software.

Types of UI

User Interface (UI) refers to the visual elements, controls, and interactions that users experience
when interacting with software or hardware. There are several types of UI, each serving different
purposes and contexts. Here are some common types of UI:

1. Graphical User Interface (GUI): GUI is the most prevalent type of UI. It uses graphical elements
such as icons, buttons, windows, and menus to allow users to interact with a system. Operating
systems like Windows, macOS, and Linux, as well as many software applications, use GUI.
2. Command Line Interface (CLI): CLI relies on text commands to communicate with a system.
Users enter commands through a terminal or command prompt to perform tasks. While it may
seem less user-friendly to some, it can be powerful and efficient for users familiar with specific
commands.

3. Voice User Interface (VUI): VUI allows users to interact with a system using spoken commands.
Popular examples include virtual assistants like Amazon Alexa, Google Assistant, and Apple’s
Siri. VUI is becoming increasingly common in smart homes, cars, and mobile devices.
4. Touch User Interface (TUI): TUI relies on touch gestures to control and interact with a system.
Common in smartphones, tablets, and touch-enabled devices, TUI enables users to tap, swipe,
pinch, and perform other gestures to navigate and manipulate content.
5. Augmented Reality (AR) and Virtual Reality (VR) Interfaces: AR and VR interfaces provide
immersive experiences. AR overlays digital information onto the real world, while VR creates a
Ayush Suraj Gupta UI Lab C24027

completely virtual environment. Both use specialized hardware, such as headsets, to deliver
interactive experiences.
6. Gesture-Based Interface: This interface type allows users to interact with a system using
gestures, which can include movements like swiping, waving, or other physical actions. Devices
like Microsoft’s Kinect and some smart TVs use gesture-based interfaces.
7. Web User Interface (WUI): WUI refers to the user interface elements found on websites. It
includes navigation menus, buttons, forms, and other elements that users interact with while
browsing the web.
8. Natural Language Interface: This type allows users to interact with a system using natural
language, such as text or speech. Chatbots and virtual assistants often use natural language
interfaces to understand and respond to user queries.
9. Haptic User Interface (HUI): Haptic interfaces provide tactile feedback to users, allowing them
to feel sensations or vibrations. This is commonly used in gaming controllers, virtual reality
devices, and some touchscreen interfaces.
10. Biometric User Interface: This type involves the use of biometric data (such as fingerprints,
facial recognition, or iris scanning) for user authentication
and interaction. Biometric UI is commonly found in smartphones, access control systems, and
security applications.
11. Brain-Computer Interface (BCI): BCI allows users to control devices or software using brain
signals. Electroencephalography (EEG) is often used to detect brain activity, enabling users to
interact with computers or other devices through their thoughts.
12. Tangible User Interface (TUI): TUI involves physical objects or manipulatives to interact with a
digital system. For example, a tabletop interface where users can manipulate physical objects
that are tracked and interpreted by the system.
13. Multi-Modal User Interface: Combining multiple modes of interaction, such as voice, touch,
gesture, and more, into a single interface. This approach aims to provide a richer and more
flexible user experience.
14. Adaptive User Interface: An interface that dynamically adjusts its layout, content, or behavior
based on user preferences, behavior, or contextual information. This helps personalize the user
experience and cater to individual needs.
15. Contextual User Interface: This type of interface adapts based on the context of use. It takes
into account factors such as location, device capabilities, user preferences, and other
environmental conditions to optimize the user interface.
16. Kiosk User Interface: Commonly found in public places, kiosk interfaces are designed for self-
service transactions. Users interact with a fixed, standalone terminal to perform tasks such as
information retrieval, ticketing, or payment.
17. Wearable User Interface: Interfaces designed for wearable devices, such as smartwatches or
fitness trackers. They often have limited screen space and utilize gestures, touch, or voice for
interaction.
18. Responsive User Interface: An interface that adjusts its layout and design to accommodate
various screen sizes and resolutions. This is crucial for delivering a consistent user experience
across different devices, such as desktops, tablets, and smartphones.

UI Life Cycle:
Ayush Suraj Gupta UI Lab C24027

The User Interface (UI) life cycle refers to the different stages and processes involved in designing,
implementing, testing, and maintaining a user interface for a software application or system. The UI life
cycle typically includes the following phases:

1. User Research and Analysis:

• User Research: Understanding the target audience, their needs, preferences, and
expectations through methods like surveys, interviews, and observations.
• Competitor Analysis: Analyzing the user interfaces of similar products or systems to
identify trends and best practices.
2. Requirement Gathering:
• Define Objectives: Establishing the goals and objectives of the user interface based on
user needs and business requirements.
• Functional Requirements: Identifying the specific features and functionalities that the UI
must support.
3. UI Design:
• Information Architecture: Organizing and structuring information to create a logical and
intuitive navigation flow.
• Wireframing: Creating low-fidelity sketches or wireframes to outline the basic layout
and structure of the UI.
• Visual Design: Defining the aesthetics, including colors, typography, images, and overall
visual style.
• Prototyping: Developing interactive prototypes to simulate the user experience and
gather feedback.
4. Implementation/Development:
• Front-end Development: Translating the design into actual code using web technologies
(HTML, CSS, JavaScript) or other programming languages.
• Back-end Integration: Connecting the UI with the application’s backend services and
databases.
• Usability Testing during Development: Conducting iterative testing to identify and
address usability issues as the UI is developed.
5. Testing:

• Usability Testing: Evaluating the UI with actual users to identify any usability issues and
gather feedback for improvements.
• Cross-Browser and Cross-Platform Testing: Ensuring the UI functions correctly on
different browsers and platforms.
• Performance Testing: Assessing the speed and responsiveness of the UI under various
conditions.
6. Deployment:
• Release Planning: Planning the deployment of the UI, considering factors such as timing,
user communication, and potential impact on existing users.
Ayush Suraj Gupta UI Lab C24027

• Rollout: Deploying the UI to production, making it accessible to users. 7. Monitoring and

Maintenance:
• Monitoring Usage: Analyzing user interactions and feedback to identify areas for
improvement.
• Bug Fixing: Addressing any issues or bugs that arise after deployment.
• Updates and Enhancements: Implementing updates or enhancements based on user
feedback, changing requirements, or emerging trends.
Ayush Suraj Gupta UI Lab C24027

Practical 2: Study of open source UX Tools

UI TOOLS

1. Sketch:

Key Features:

• Vector-based design for creating scalable interfaces.

• Extensive library of plugins for additional functionalities.
• Artboards for organizing and presenting designs.
• Robust symbols system for reusability.
• Pixel-perfect design and export features
2. Figma:

Key Features:

• Web-based, allowing collaborative design in real-time.

• Cross-platform accessibility (works on Windows, macOS, Linux).
• Auto Layout and constraints for responsive design.
• Prototyping features for creating interactive user flows.
• Design systems and components for consistency.
3. Adobe XD:
Key Features:

• Part of the Adobe Creative Cloud, facilitating integration with other Adobe tools.
• Vector-based design with support for prototyping.
• Voice prototyping for designing voice-enabled experiences.
• Plugins and integrations with third-party tools.
• Collaboration features for design teams.
4. InVision:

Key Features:

• Prototyping and animation tools for creating interactive experiences.

• User testing and collaboration features.
• Inspect mode for developers to extract design specifications.
• Design System Manager for maintaining design consistency.
• Integrations with popular design tools.
5. Axure RP:
Ayush Suraj Gupta UI Lab C24027

Key Features:

• Advanced prototyping with dynamic content and logic.

• Conditional flows and interactions for complex user journeys.

Annotations and documentation features for detailed specifications.

• Team collaboration and version control.

• Integration with other design tools.

7. Zeplin:

Key Features:

• Bridges the gap between designers and developers.

• Export designs with style guides and assets.
• Version history for design iterations.
• Commenting and collaboration features.
• Integrations with various design tools.

8. Marvel:

Key Features:

• User-friendly interface for designing and prototyping.

• Collaboration features for remote teams.

• User testing and feedback collection.

• Integrations with popular design tools.

• Design versioning and history.

9. Proto.io:
Ayush Suraj Gupta UI Lab C24027

Key Features:

• Web-based prototyping tool for web and mobile applications.

• Rich library of UI components and interactions.

• Real-time collaboration and user testing.

• Animation and gesture support.

• Integrations with design and project management tools.

9. Balsamiq:

Key Features:

• Low-fidelity wireframing tool for quick ideation.

Focus on simplicity and ease of use.

• Sketch-style wireframes for early-stage design concepts.

• Collaboration features for team projects.

• Integration with Jira and other project management tools.

10. Autodesk SketchBook:

Key Features:
Ayush Suraj Gupta UI Lab C24027

• Drawing and sketching tool with a variety of brushes and tools.

• Cross-platform support (Windows, macOS, iOS, Android).

• Customizable brushes and drawing settings.

• Layers for organizing and editing sketches.

• Suitable for concept sketching and ideation.

Practical No. 3: Prepare Project Proposal and Requirement Gathering (Choose the project)
Problem Statement: There is a lack of educator apps designed with the students’ perspective in mind.
Current apps often fail to consider the unique needs and preferences of students, resulting in
interfaces and features that are not as engaging or intuitive, ultimately hindering the learning
experience.
Ayush Suraj Gupta UI Lab C24027

► Project Title : Pack&Go – Compare · Book · Go ; An mobile application that enables travellers to
compare and book the best travel packages from a wide range of verified travel agencies and groups,
all within a single platform

► Aim : to develop a unified mobile platform that enables travellers to easily compare, customize, and book travel
packages from various verified travel agencies and groups.

► Objective:

 Aggregate travel packages from multiple verified agencies.

 Enable users to compare packages easily.
 Allow customization based on user preferences.
 Provide secure booking and payment options.
 Ensure verified and trustworthy listings.
 Deliver a simple, user-friendly interface.
 Offer a complete, all-in-one travel planning solution.

► Theory: Pack&Go follows an aggregator model, meaning it brings travel packages from different
agencies together on one easy-to-use platform. Instead of jumping between websites or social media
pages, travellers can now compare, customize, and book everything in one place. The goal is to make
trip planning simpler, safer, and more reliable by offering only verified packages, secure payments, and a
smooth, user-friendly experience. With everything in one spot, Pack&Go takes the stress out of planning
and helps travellers make confident choices.

► Overview of the Project: Pack&Go is a travel platform that lets users compare and book packages
from various travel agencies and groups in one place. Travelers can customize their trips based on
preferences like budget, duration, and activities. The platform offers an all-in-one solution with
verified packages, secure bookings, payment processing, and reliable support, ensuring a safe and
hassle-free travel experience.

► Purpose: To provide a single platform where travelers can easily compare, customize, and book verified travel
packages. It aims to simplify planning, ensure security, and improve trust in travel services.

► Proposed System: In India, there are well-known travel apps like MakeMyTrip, Yatra, and
TravelTriangle, but they mostly focus on offering their own packages or working with a limited number
of partners. They don’t really let travellers compare packages from multiple agencies or travel groups
side by side.

Many small travel groups also operate through Facebook pages, WhatsApp, or basic websites, but these setups often
lack transparency, reliability, and customization options. Users are left to figure things out on their own, which can be
confusing and time-consuming.
Ayush Suraj Gupta UI Lab C24027

Pack&Go is designed to solve this problem by bringing everything together in one place—a simple, trusted platform
where travellers can compare, customize, and book trips easily.

► Specifications/Modules:

1. Frontend
The frontend will be a mobile application (Android & iOS) with a clean, user-friendly interface. It allows users to
browse, compare, customize, and book travel packages.

 Technologies: React Native / Flutter

 Features: Responsive design, smooth navigation, real-time package updates, and secure login.

2. Backend
The backend handles business logic, data management, and communication between frontend and server.

 Technologies: Node.js / Django / Laravel

 APIs: RESTful APIs for user actions, package comparisons, customization, bookings, etc.
 Authentication: JWT-based secure login for users and agencies.

3. Database
Stores all user profiles, agency data, travel packages, booking history, and reviews.

 Database: MongoDB / MySQL / PostgreSQL

 Security: Role-based access control and encryption for sensitive data.

4. Payment Gateway
Handles all financial transactions securely within the platform.

 Integration: Razorpay / Stripe / Paytm / Google Pay

 Features: Multiple payment options, transaction history, refund processing.

5. Notifications
Keeps users updated with real-time alerts.

 Channels: Push notifications, SMS, Email

 Triggers: Booking confirmations, price drops, offers, reminders.

6. Maps & Tracking

Helps users locate destinations and track trip progress if enabled.

 Integration: Google Maps API

 Features: Location pins for destinations, agency meeting points, and real-time tracking (optional for group
trips).

► System Design:
Ayush Suraj Gupta UI Lab C24027

► Architecture:

► Architecture Diagram:

Sequence Diagram ( Traveller )

Sequence Diagram ( Agency )

Ayush Suraj Gupta UI Lab C24027

Usecase Diagram
Ayush Suraj Gupta UI Lab C24027

Class Diagram
Ayush Suraj Gupta UI Lab C24027

Activity Diagram :
Ayush Suraj Gupta UI Lab C24027
Ayush Suraj Gupta UI Lab C24027

Practical No. 4: Analysis Problem statement: Briefly state the problem(s) that the project will seek to
solve. Take the user's point of view. Consider what the user's goals are, and what obstacles in the way.

Background and Context

The travel industry has seen exponential digital growth in the past decade, yet many gaps remain in delivering a
holistic travel planning experience to end users. Large travel aggregators like MakeMyTrip and Yatra provide curated
packages but are often limited to select vendors or promote in-house listings. Meanwhile, small- to mid-sized travel
agencies operate in digital silos, primarily through social media platforms or informal messaging apps, making it
difficult for users to explore, compare, and trust offerings.

Despite having numerous travel apps and websites, users still find themselves juggling between platforms, unsure of
the best deal, the authenticity of the seller, or whether the package truly fits their personal travel expectations.

User Perspective: What Are the Real Problems?

To build a truly impactful system, we need to start with the user’s journey and pain points. Here’s what users are
facing today:

1. Fragmented Ecosystem

 Problem: There is no single platform that aggregates packages from both large and small travel agencies.
 Impact: Users spend hours browsing different websites, groups, and forums without a guarantee of finding
the best deal or a trustworthy agency.

2. Lack of Trust and Verification

 Problem: Users encounter unverified listings on social platforms and websites that may disappear without
notice.
 Impact: There is a high risk of fraud, misleading advertisements, or non-refundable bookings.

3. Inflexible Customization Options

 Problem: Users who want to tailor their trip (change dates, hotels, activities) often have to reach out
manually to agencies.
 Impact: The process is time-consuming and prone to miscommunication, leading to a frustrating experience.

4. Security Concerns

 Problem: Payments are often made directly to bank accounts or UPI IDs, especially when booking through
lesser-known agencies.
 Impact: There’s limited recourse if something goes wrong. Refunds are difficult, and financial data may be at
risk.

5. Poor User Interface & Communication

 Problem: Non-standardized communication, lack of real-time updates, and inconsistent UI across platforms.
 Impact: Users feel disoriented and unassisted in their booking journey, which reduces confidence and
satisfaction.
Ayush Suraj Gupta UI Lab C24027

User Goals: What Do Travelers Truly Want?

A well-designed solution should cater to what users actually want, not just what businesses want to sell. Based on
user behavior and expectations:

User Goal Explanation

Simplicity A one-stop platform to avoid toggling between multiple sources.

Transparency Clearly displayed prices, inclusions, and agency details.

Personalization Ability to filter and customize packages based on individual preferences.

Trust Assurance that all listings are genuine and agencies are vetted.

Security A reliable payment and refund mechanism to protect user interests.

Continuous Support & Updates Real-time booking confirmations, alerts, and customer service.

How Pack&Go Solves These Problems

Challenge Solution Provided by Pack&Go

Scattered listings Aggregates packages from both large and small agencies on one platform.

Lack of verification Only verified agencies are allowed to list; user reviews and ratings add additional trust.

Customization issues Real-time customization options within the app; filters for preferences like duration, price.

Payment security Integration with secure gateways like Razorpay, Stripe, and Google Pay.

Communication delays Instant confirmations, reminders, and support through push notifications and email/SMS.

Poor user experience Built using Flutter/React Native for a sleek, consistent UI across Android and iOS.

Example Use Case: The Traveler's Experience

Imagine a user, Ananya, who wants to go on a weekend trip to Himachal Pradesh. She opens the Pack&Go app,
selects “Himachal Pradesh,” filters the packages by budget and group size, and instantly sees 10+ packages from
verified agencies.

She compares ratings, reads reviews, and customizes one of the packages to change the departure date and hotel.
With a few taps, she books the trip, receives a confirmation via email and SMS, and tracks her itinerary right from the
app. No phone calls, no uncertainties, no scams—just smooth, intelligent travel booking.

Practical 5
Ayush Suraj Gupta UI Lab C24027

Create a social model of the chosen project

Social Model for MentorsforLearners

In MentorsforLearners, the social model focuses on enhancing learning, mentoring for the goal exam and
establish a communication with fellow learners preparing for same exam.
Objectives of Social Model:

✓ Connect learners preparing for same exam on the same platform.

✓ Encourage online learning and daily practice.
✓ Promote peer-to-peer support and healthy competition among learners through discussion
forums, leaderboards, and shared goals.
✓ Enable mentors to engage with multiple students at once by addressing common doubts,
sharing insights, and providing motivation in a community setting.

Interaction for MentorsforLearners

Practical 6
Ayush Suraj Gupta UI Lab C24027

Practical No. 6: Identify the Users and design a User Persona User

Persona:

User Persona: The Curious Explorer

Name: Ananya Sharma

Age: 24

Gender: Female

Occupation: Software Engineer

Location: Pune, India

Income Level: ₹6,00,000 per annum

Education: B.Tech in Computer Science

Tech Comfort Level: High

Goals & Motivations

 To travel frequently on long weekends and holidays without spending too much time planning.
 To discover budget-friendly and customizable travel experiences.
 To avoid frauds/scams by booking only with verified and secure platforms.
 To make quick, informed decisions without relying on random Facebook groups or unknown agents

Pain Points

 Feels overwhelmed with too many scattered options online.

 Finds it difficult to trust small travel agencies found on social media.
 Is worried about payment security when sending money via direct UPI or bank transfers.
 Doesn’t want to make calls to negotiate or customize packages.
 Rarely finds a comparison of similar packages from different agencies..

What She Wants from Pack&Go

 A central hub where she can browse, compare, and book from multiple verified agencies.
 Filters like budget, group size, duration, type of trip (trek, leisure, spiritual, etc.).
 A trustworthy payment system with refunds and support built-in.
 A customization option that doesn’t involve messaging/calling every time.
 Instant notifications about deals, confirmations, and trip updates..
Ayush Suraj Gupta UI Lab C24027
Ayush Suraj Gupta UI Lab C24027

Practical No. 7: Design

Scenario Involving All Three Tasks Identified for Pack&Go

Joseph Verma – The Explorer

Joseph Verma, a 26-year-old IT professional from Pune, had long dreamed of escaping the corporate grind with a
rejuvenating holiday. But the hunt for the perfect travel package always ended in frustration.

“I open five websites, three WhatsApp groups, and even Instagram to search for packages—but everything is either
overpriced, unclear, or outdated.”

With no centralized platform to compare and book trips, Joseph struggled. Some sites didn’t allow customizations,
others didn’t feel trustworthy, and payment links on social media felt like scams. He wanted:

 A side-by-side comparison tool for packages across multiple travel agencies.

 An easy way to customize the trip with add-ons like adventure sports or temple visits.
 Secure payment and refund assurance.
 Real reviews and ratings, not just marketing hype.

Things changed when Joseph discovered Pack&Go—a sleek new app that brought together verified packages from
dozens of agencies in one place. For the first time, he could:

 Compare packages based on price, duration, and features—all in one screen.

 Customize his trip and instantly see price updates.
 Book with secure payment gateways and receive real-time confirmation.
 Track his travel progress with map integration and alerts.

Joseph booked a spiritual trekking tour to Himachal, all within 10 minutes on Pack&Go. For once, trip planning felt
more like dreaming, less like a headache.

Sakshi Iyer – The Boutique Travel Agent

Sakshi Iyer, a 38-year-old founder of “Himalayan Bloom Travels,” runs curated travel experiences for women

and solo travelers. But scaling her business was difficult—she spent hours juggling inquiries on WhatsApp, updating
prices manually, and sending links that clients often lost.

“I love planning trips, not fighting with Excel sheets and broken payment links.”

What Sakshi wanted was:

 A platform to list and update all her packages easily.

 Direct booking requests and chat features inside the app.
 Analytics to see which packages are popular, and alerts when prices need revision.
Ayush Suraj Gupta UI Lab C24027

 Automatic notifications for bookings and client messages.

Pack&Go became her business lifeline. With it, Sakshi could:

 Upload and update her packages via a clean dashboard.

 Engage with clients directly through the in-app messenger.
 Track all bookings, reviews, and payments in one spot.
 Broadcast real-time alerts about itinerary changes or group trip availability.

Now, Sakshi spends more time planning magical escapes and less time managing technology. Her business grew by
40% in just 3 months on Pack&Go.
Ayush Suraj Gupta UI Lab C24027

Practical 8: Draw a mental model for the above drawn scenario.

Mental Model for Student-Centric Travel App (Pack&Go)

1. Emotion-First Interface (Emotional Need)

 User Thought: "I want to feel excited about my trip right from the app homepage!"
 Pain Point: Most travel apps feel corporate or too commercial for students.
 Solution:
o Splash screen with student-friendly visuals and quotes like “Backpacks, Budgets, and Besties – Let’s
Go!”
o Use fun animations and emojis to make the app feel more lively and youthful..

Trip Planning with Friends (Social Planning)

 User Thought: "I wish my friends and I could plan together without juggling chats and spreadsheets."
 Pain Point: Coordinating with multiple friends through WhatsApp becomes chaotic and disorganized.
 Solution:
o Group trip boards where friends can vote on destinations, budgets, dates.
o Shared wishlists and editable itineraries inside the app.
o Collaborative chat feature linked to each package.

Budget-Friendly Filters (Affordability + Clarity)

 User Thought: "I don’t want to see luxury stuff — just the best I can afford!"
 Pain Point: No specific filters for budget-constrained users.
 Solution:
o “Student Budget” toggle to auto-filter affordable packages.
o Smart suggestions based on user's input (budget range, group size, interests).
o EMI-friendly or low-deposit travel options visibly tagged.

Verified & Safe (Trust & Security)

 User Thought: "I’m afraid of being scammed or booking something fake."

 Pain Point: Lack of verified reviews, insecure payment methods.
 Solution:
o Verified badge for trusted vendors.
o User reviews from students with college ID verification.
o Integration with secure payment gateways + refund policies highlighted.

Visual & Fun Itineraries (Clarity + Interest)

 User Thought: "What’s actually included in this trip? I want to see it, not read it all."
Ayush Suraj Gupta UI Lab C24027

 Pain Point: Most itineraries are text-heavy, hard to understand quickly.

 Solution:
o Use icons, timelines, and infographics to show daily schedules.
o Video previews or “virtual walkthroughs” of popular trips.
o Highlight unique experiences with labels like “Instagram Spot” or “Local Street Food”.

Personal Countdown & Milestones (Excitement + Accountability)

 User Thought: "I want to feel the thrill as my trip comes closer!"
 Pain Point: No sense of urgency or visual anticipation.
 Solution:
o Personalized countdown widget on home screen (Days to Go, Packing Reminder, etc.)
o Milestone tracker (e.g., “Itinerary Finalized,” “Bags Packed,” “Ready to Fly!”).
o Push notifications like “Only 5 days left! Have you packed your charger?”
Ayush Suraj Gupta UI Lab C24027

Practical No. 11: Design Customer Journey map.

Customer Journey Map – User: Ananya Sharma

Profile Summary:

 Age: 24
 Occupation: Software Engineer
 Location: Pune, India
 Tech Comfort: High
 Motivation: Quick, safe, budget-friendly trip planning

Stage Actions Thoughts Emotions Opportunities

1. Awareness - Sees a meme ad on "Looks fun. Might solve my trip 😐 Curious, Intrigued - Use meme-style
Instagram chaos." creatives.
- Friend shares the - Showcase verified
Ayush Suraj Gupta UI Lab C24027

Stage Actions Thoughts Emotions Opportunities

app link agency tags in ads.

- Fun onboarding
- Installs app
quotes.
- Registers via Google "Haha, that’s relatable. This 😄 Delighted,
2. Onboarding - Highlight secure
- Sees slang/meme app speaks my language." Hopeful
payments & “No
greeting
phone calls” USP.

- Browses Goa and - Auto-compare similar

Himachal trips "So many packages... finally in trips
3. Exploration 😍 Relieved, Engaged
- Applies budget + one place!" - “Trusted by 10K+
group filters users” badge

- Adds adventure - Show real-time price

4. sports & vegetarian "Nice! I can control pricing 🤩 Empowered, In updates
Customization food myself." Control - Add emoji labels for
- Updates hotel type trip vibes (e.g., 🧘‍♀️, 🎉)

- Pays via Razorpay

- Highlight “Secure
with refund policy
"Safe and smooth. No shady gateway” badge
5. Booking visible 😌 Secure, Confident
UPI transfers." - One-click receipt &
- Gets SMS + email
share option
receipt

- Uses countdown
- Milestone checklist:
widget
6. Travel Prep "Let’s gooo. It’s real now!" 🥳 Excited, Ready Bags packed, cab
- Shares itinerary
booked, payment done
with friends

- Gamified referral
- Posts trip review
"This app actually worked. system
7. Reflection - Earns badge 😊 Satisfied, Grateful
Deserves a shoutout." - “Your Travel Stats”
- Refers to friend
dashboard

✅ Top UX Design Opportunities for Ananya

 Onboarding: Meme-powered welcome + “no-calls needed” reassurance.

 Search & Compare: Smart filters, group pricing view, and auto-sort by popularity.
 Customization: Modular add-ons with live pricing & emoji-style icons for experiences.
 Booking: Razorpay or GPay with refund guarantee badge.
 Post-Booking: Countdown widget, checklist, and shareable itinerary.
 Loyalty & Feedback: Trip badges, reward points, referral rewards.
Ayush Suraj Gupta UI Lab C24027

Practical No.12: Perform UX Evaluation of Chosen Project.Testing of User Interface from Third Party
(Test scripts).

UX Evaluation Report – Pack&Go Mobile App

🧪 User Testing Overview

Test Type Formative Evaluation (Third-party user testing)

Platform Tested Android mobile app & Web (Chrome)

Method Used Direct task-based observation and user interviews

No. of Testers 2 (Raj Jaiswal, Saurav Gupta)

User 1: Raj Jaiswal

 Age: 20
 Profile: Full-time CAT Aspirant (Quantitative Focus)
 Device Used: Android Phone
 Tech Familiarity: High
 Core Needs: Quick lecture access, test countdowns, schedule planner

Experience & Observations

Category Feedback

Onboarding Easy signup. Suggested: Auto-play next lecture after signup.

Navigation Tabs were helpful. Suggested fixed bottom navigation bar for convenience.

Lecture Access Fast loading; progress tracker was appreciated.

Test Features Loved countdown and summary. Suggested 24hr push notifications.

Pain Points Icons in doubt-solving area were unclear; lacked tooltips.

Suggestions Add a home widget showing: (i) Pending Module (ii) Next Test (iii) Group Chat.

User 2: Saurav Gupta

 Age: 22
 Profile: Working professional studying on weekends
 Device Used: Laptop (Chrome browser)
 Tech Familiarity: Moderate
 Core Needs: Concept notes, doubt clearing, mentor sessions
Ayush Suraj Gupta UI Lab C24027

Experience & Observations

Category Feedback

Onboarding Loved quote-based greeting and app intro.

Notes Access Clear notes, but requested highlighting and save-for-later features.

Meet Scheduling Simple interface. Suggested Google Calendar integration.

Design Liked language toggle and overall clean layout.

Pain Points Test results lacked post-submission explanations.

Suggestions Add “Beginner’s Corner” with simplified notes and videos.

Overall UX Ratings

User Score (/10)

Raj Jaiswal 8.6

Saurav Gupta 8.4

Top Recommendations (Based on Feedback)

1. Home Widget – Show 3 key items:

o Pending Module
o Next Scheduled Test
o Latest Group Chat Message
2. Gamify User Engagement
o Introduce streaks, badges, and XP for module/test completion.
3. Tooltips & Icons
o Add hoverable info or tooltips for all technical icons and terms (e.g., TIR, IRR).
4. Beginner’s Mode
o Enable simplified weekly concepts, tips, and hand-holding content for part-time learners.
5. Responsive Design Enhancements
o Improve vertical stacking for mobile and introduce a preview sidebar for desktops.
6. Push Notifications
o Add custom reminder options (e.g., 24 hours before a test).
7. Interactive Notes
o Allow users to highlight, bookmark, and download notes.
8. Calendar Integration
o Integrate mentor meetups with Google Calendar or in-app calendar sync.

Conclusion
Ayush Suraj Gupta UI Lab C24027

The app scored high in accessibility and usability. Users appreciated the clean design, quote-driven motivation, and
functional lecture/test modules. With a few improvements to personalization, interactivity, and beginner support, the
user experience can be elevated significantly.