KGiSL Institute of Technology

(Approved by AICTE, New Delhi; Affiliated to Anna

University, Chennai) Recognized by UGC,
Accredited by NBA (IT)

Department of Artificial Intelligence

and Data Science

Lab Manual

Subject Name : UI AND UX DESIGN

Subject Code : CCS370

Year : II

Semester : III

Regulation : R-2021
 KGiSL Institute of Technology
(Approved by AICTE, New Delhi; Affiliated to Anna
University, Chennai) Recognized by UGC,
Accredited by NBA (IT)

INSTITUTION VISION & MISSION STATEMENT

VISION

To be recognized as a Renowned Technical Institution for transforming Young Minds

into Competent Professionals to serve the Industry and Society.

MISSION

❖ To practice Outcome Based Teaching Learning Methodology.

❖ To up skill Faculty Members’ Expertise in diverse domains.

❖ To build State-of-the-Art Infrastructure that provides Quality Education and fosters

Research.

❖ To enrich Innovative Research Activities in collaboration with Industry and

Institute.

❖ To ensure the Students’ Participation in Co-curricular and Extra-curricular

Activities
 KGiSL Institute of Technology
(Approved by AICTE, New Delhi; Affiliated to Anna
University, Chennai) Recognized by UGC,
Accredited by NBA (IT)

DEPARTMENT VISION & MISSION STATEMENT

VISION

To develop technically competent and socially responsible computing

professionals powered with the required skills in the field of Artificial Intelligence to
contribute globally for the benefit of industry and society.

MISSION

❖ To engage the students in a smart learning ambiance for developing competent

AI professionals.

❖ To enrich faculty members with required skill sets through envisioned

academia and industry interaction.

❖ To develop state-of-the-art infrastructure that supports digital education

and skilling aligned with industry demands.

❖ To nurture students' research skills through project-based learning and

cultivate employability and entrepreneurial expertise.

❖ To foster ethical values and address societal challenges through

students' engagement in co-curricular and extra-curricular activities.
 KGiSL Institute of Technology
(Approved by AICTE, New Delhi; Affiliated to Anna
University, Chennai) Recognized by UGC,
Accredited by NBA (IT)

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

PO’s Program Outcomes PO’s

Engineering Knowledge: Apply the knowledge of mathematics, science, engineering
PO1: fundamentals and an engineering specialization to the solution of complex engineering
problems.
Problem Analysis: Identify, formulate, review research literature and analyze complex
PO2: engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.

Design / Development: Design solutions for complex engineering problems and design system
PO3: components or processes that meet the specified needs with appropriate consideration for the
public health and safety and the cultural, societal and environmental considerations.
Conduct investigations of Complex Problems: Use research-based knowledge and research
PO4: methods including design of experiments, analysis and interpretation of data and synthesis of
the information to provide valid conclusions.
Modern Tool Usage: Create, select and apply appropriate techniques, resources and modern
PO5: engineering and IT tools including prediction and modeling to complex engineering activities
with an understanding of the limitations.
The Engineer And Society: Apply reasoning informed by the contextual knowledge to assess
PO6: societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to
the professional engineering practice.
Environment & Sustainability: Understand the impact of the professional engineering
PO7: solutions in societal and environmental contexts and demonstrate the knowledge of and need
for sustainable development.
Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
PO8: norms of the engineering practice.
Individual and Team Work: Function effectively as an individual and as a member or
PO9: leader in diverse teams and in multidisciplinary settings.
Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and write
PO10:
effective reports and design documentation, make effective presentations, and give and
receive
clear instructions.
Project Management and Finance: Demonstrate knowledge and understanding of the
PO11: engineering and management principles and apply these to one‘s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.
Life Long learning: Recognize the need for and have the preparation and ability to engage in
PO12:
independent and life-long learning in the broadest context of technological change.
 KGiSL Institute of Technology
(Approved by AICTE, New Delhi; Affiliated to Anna
University, Chennai) Recognized by UGC,
Accredited by NBA (IT)

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

PEO: PROGRAMME EDUCATIONAL OBJECTIVE

PEO1 Excel as a software professional/Entrepreneur

PEO2 To inculcate lifelong learning skills to enable students in AI&DS and its allied domains

PEO3 Positively contribute to the society with ethical values.

PSO:PROGRAMME SPECIFIC OUTCOMES

Apply mathematical and statistical models to solve computational problems using

PSO1
Artificial Intelligence and Data Science techniques for real world applications.
Provide the various solutions for societal problems in effective and efficient way by
PSO2
using suitable AI and DS methodology.
Carry out the domain’s specific activity through cutting edge technology in ethical
PSO3
way for the society and environment.
 KGiSL Institute of Technology
(Approved by AICTE, New Delhi; Affiliated to Anna
University, Chennai) Recognized by UGC,
Accredited by NBA (IT)

COURSE OUTCOMES:

On completion of the course, the students will be able to:

CO1: Build UI for user Applications
CO2: Evaluate UX design of any product or application
CO3: Demonstrate UX Skills in product development
CO4: Implement Sketching principles
CO5: Create Wireframe and Prototype
LIST OF EXPERIMENTS
1. Designing a Responsive layout for an societal application
2. Exploring various UI Interaction Patterns
3. Developing an interface with proper UI Style Guides
4. Developing Wireflow diagram for application using open source software
5. Exploring various open source collaborative interface Platform
6. Hands on Design Thinking Process for a new product
7. Brainstorming feature for proposed product
8. Defining the Look and Feel of the new Project
9. Create a Sample Pattern Library for that product
(Mood board, Fonts, Colors based on UI principles)
10. Identify a customer problem to solve
11. Conduct end-to-end user research - User research, creating personas, Ideation process (User
stories, Scenarios), Flow diagrams, Flow Mapping
12. Sketch, design with popular tool and build a prototype and perform usability testing
and identify improvements
 Ex No: DESIGNING A RESPONSIVE
LAYOUT FOR AN SOCIETAL
Date:

AIM

To design a responsive layout for a societal application in Figma.

PROCEDURE
1. Add iPhone 13 Mini frame.
2. Insert a food-themed background image.
3. Place a semi-transparent rectangle over the background.
4. Add the status bar at the top of the frame.
5. Add app name text box and center it.
6. Insert a swipe-up gesture icon at the bottom.
7. Set swipe-up interaction to go to the login screen.
8. Duplicate the frame for the login screen.
9. Add input boxes for "Email" and "Password" and a "Login" button.
10. Set swipe-down interaction to return to the first screen.
 OUTPUT

RESULT

The above design for a societal application is completed and it is responsive.

 Ex No: EXPLORING VARIOUS
UI INTERACTION
Date:

AIM

To explore various UI interaction patterns using Figma.

PROCEDURE
1. Frame 1 (Home Page): Use an iPhone 14 Pro frame, add a background rectangle, and place a food-
themed image over it.
2. Add icons and status bar at the top, and a welcoming text like "Explore Delicious Food."
3. Bottom Navigation: Add icons for "Home," "Discover," "Blog," and "Favorites."
4. Frame 2 (Discover Page): Duplicate the first frame, replace the background with images of various
dishes, and add "Discover New Dishes" text.
5. Add search and filter icons at the top for exploring categories.
6. Frame 3 (Blog Page): Create a new frame, add a blog-themed background and title text.
7. Add image and text boxes for blog content about a specific dish.
8. Frame 4 (Favorites Page): Create another frame, add images of liked dishes, and a title “Liked
Posts.”
9. Add icons for navigating between pages at the bottom of each frame.
10. Interactions: Link each frame with swipe and tap interactions for smooth navigation.
 OUTPUT

RESULT

The above design for a exploring various UI interaction patterns is completed.

 Ex No: DEVELOPING AN INTERFACE WITH PROPER
STYLE
Date:

AIM

To develop an interface with proper UI style guides.

PROCEDURE

1. Create a frame sized for the iPhone 13-mini and set a background color.
2. Add the menu title, icons, and buttons like "Home" and "Logout."
3. Include a status bar at the top with basic indicators.
4. Design a grid layout with images, names, descriptions, and prices for menu items.
5. Create a second frame for a detailed view of a selected item.
6. Add interactive features like quantity adjusters and buttons such as "Continue Exploring" and
"View Cart."
7. Include a mic icon and position it in the interface.
8. Ensure the status bar is present and aligned in all frames.
9. Check the alignment and spacing of all elements in each frame.
10. Add navigation interactions between frames for smooth transitions.
 OUTPUT

RESULT

The above design for developing an interface with proper UI style guides is completed.
Ex No: DEVELOPING WIREFLOW DIAGRAM FOR AN
APPLICATION
Date:

AIM

To develop a wireflow diagram for a headphone store using Figma.

PROCEDURE

1. Determine the key screens or views needed for the application.

2. Sketch out a rough layout for each screen, including major UI elements.
3. Identify the primary user flows and interactions between screens.
4. Add annotations to the sketches to describe the functionality and behavior.
5. Review the overall information architecture and hierarchy of screens.
6. Refine the layouts, ensuring consistent styling and usability patterns.
7. Connect the screens using arrows or lines to visualize the user flow.
8. Consider responsive design and how the layouts may adapt to different devices.
9. Add annotations for notes, open questions, or areas requiring further exploration.
10. Review the full wireframing diagram and iterate as needed based on feedback.
 OUTPUT

RESULT

The above wireflow diagram for a food ordering website using Figma is completed.
 Ex No: EXPLORING VARIOUS OPEN SOURCE
COLLABORATIVE INTERFACE PLATFORM
Date:

AIM

To explore various open source collaborative interface platforms for UI & UX design.

1. FIGMA
Figma is a free, online tool used for UI, UX, graphic design and wire
framing. It’s a web-based application, so it can work on any computer.
It is even offering some limited collaborative tools in their free tier.

2. SKETCH
Sketch is a vector-based platform with features, tailored specifically for designing UI and creating
digital assets.
It provides real-time
collaboration. It is only
available for macOS.

3. PROTO.IO
Proto.io is an online prototyping tool that allows you to create interactive prototypes for web and
mobile applications.
While it's primarily focused on prototyping, it offers collaboration features to work with a team.
However, Proto.io is not open source, and it has both free and paid plans.

4. PENCIL PROJECT
Pencil Project is an open-source GUI prototyping tool that is available as a Firefox add-on and a
standalone desktop application.
It's more basic compared to some of the other tools mentioned and primarily used for creating
diagrams and basic UI mock ups.
Collaboration features are limited compared to dedicated design tools.

5. FLUID UI
Fluid UI is another online prototyping tool that's specifically designed for creating mobile app
prototypes. It offers collaboration features to work with a team, and it supports real-time collaboration.
However, it's not open source, and it has free and paid plans.
6. GRAVIT DESIGNER
Gravit Designer is a vector graphic design software available as both a web-based application and a
desktop application for Windows, macOS, Linux, and Chrome OS.
It offers a range of features for graphic design and vector-based illustration. Gravit Designer provides
limited collaboration features, mainly through cloud storage and sharing options.
It is not open source and has both free and paid plans.

7. INKSCAPE
Inkscape is an open-source vector graphics editor that's available for Windows, macOS, and
Linux. It's primarily designed for creating and editing vector graphics, making it suitable for
tasks like logo design and illustration.
Inkscape's collaboration features are limited, and real-time collaboration is not a native feature of the
software.

8. VECTR
Vectr is another vector graphic design tool that's available as both a web-based application and a
desktop application for Windows, macOS, Linux, and Chrome OS.
While it's not open source, Vectr is free to use and offers some basic collaboration features.
Users can share their designs with others for feedback and editing, but it may not offer advanced
real- time collaboration like some dedicated design tools.

RESULT

The above exploration of various open source collaborative interface platforms is completed.
 Ex No: HANDS ON DESIGN THIBKING
PROCESS FOR A NEW
Date:

AIM

To do a hands on design thinking for a food app.

Design Thinking Process

Design thinking is a methodology which provides a solution based approach to solving process. The
stages are:
1. Empathy
2. Define
3. Ideate
4. Prototype
5. Test

1. EMPATHY

Goal: Understand user needs, pain points, and preferences.

● User Research: Conduct surveys and interviews to gather insights on food preferences, habits, and
challenges with existing apps.
● Personas: Create user personas (e.g., busy professionals, health-conscious individuals) to guide
design decisions.
● Journey Mapping: Identify pain points in the user journey (e.g., frustration with app navigation,
slow loading).

2. DEFINE
Goal: Clarify the core problem to solve based on insights from the Empathy stage.

● Problem Statement: Define the primary user problem (e.g., difficulty finding healthy meal
options).
● User Needs: List the key needs and desires of users (e.g., fast, easy, personalized meal choices).
● Project Goals: Set clear goals for the app (e.g., simplify the ordering process, improve meal
discovery).
 3. IDEATE

Goal: Generate creative solutions to address the user problems.

Brainstorming: Create feature ideas such as dietary filters, real-time tracking, or custom meal
options.
Competitive Analysis: Evaluate existing apps to identify opportunities for differentiation.
Feature Prioritization: Choose features that balance user value and feasibility (e.g., quick search,
easy checkout).

4. PROTOTYPE

Goal: Clarify the core problem to solve based on insights from the Empathy stage.

● Problem Statement: Define the primary user problem (e.g., difficulty finding healthy meal
options).
● User Needs: List the key needs and desires of users (e.g., fast, easy, personalized meal choices).
● Project Goals: Set clear goals for the app (e.g., simplify the ordering process, improve meal
discovery).

5. TEST

Goal: Validate and refine the app’s design with real users.

Usability Testing: Observe users to identify pain points in the app flow.
A/B Testing: Compare different design or feature variations to see which performs best.
Bug Testing: Ensure the app works smoothly across devices.

RESULT

The above hands on for design thinking a food app is completed.

Ex No: BRAINSTORMING FEATURE FOR THE PRODUCT

Date:

AIM

To brainstorm features for the food app.

BRAINSTORMED FEATURES

There are some features for the food app:

Personalized Food Discovery:

● Smart Recipe Recommendations: Advanced algorithms that suggest recipes based on user
preferences, past meals, dietary restrictions, and taste profiles.
● Meal Planning: Weekly or daily meal plans tailored to the user’s eating habits, health goals, or
cuisine preferences.
● Nutrition Insights: Personalized nutritional recommendations based on the user's dietary needs,
such as high-protein, low-carb, or vegan meal suggestions.
● Discover New Ingredients: Suggesting new ingredients or foods based on regional cuisine
preferences or trending superfoods.

Intuitive Recipe Management:

● Organize Recipes: Easily categorize and sort recipes by ingredients, cuisine, meal type (breakfast,
lunch, dinner, snacks), difficulty, or preparation time.
● Smart Shopping List: Automatically generate a shopping list from chosen recipes, allowing users
to check off ingredients already in their pantry or favorite store.

Customizable Meal Preparation:

● Meal Prep Timers: Set timers for different stages of cooking, with clear notifications for each step.
● Recipe Scaling: Automatically scale recipes based on the number of servings needed, whether
cooking for one or a family.
● Cooking Mode: Step-by-step cooking instructions with images or videos, and hands-free voice
navigation (e.g., “Next step”).

Visual Experience:

● High-Quality Photos & Videos: Display stunning recipe photos or cooking videos to inspire users
and give them a visual understanding of the dish.
● Ingredient Spotlight: Highlight key ingredients or techniques used in recipes with visuals to help
users better understand the recipe components.
● Cooking Mode with Timer: A hands-free cooking mode where each step is clearly shown with
accompanying visual instructions and a built-in timer for each stage.

Clear and Intuitive Meal Prep Controls:

● Step-by-Step Instructions: Easy-to-read, step-by-step instructions with clear progress indicators.

Allow users to save their progress for long recipes.
 ● Multi-Recipe Cooking: Option to manage multiple recipes at once (ideal for preparing meals for a
week) with synchronized timers.

Comprehensive Food & Ingredient Information:

● Ingredient Encyclopedia: A detailed database of ingredients with nutritional facts, common uses,
and alternative ingredients (for dietary restrictions).
● Dietary Filters: Filter recipes and meal suggestions based on dietary preferences (e.g., vegetarian,
gluten-free, keto, or dairy-free).
● Food Pairing Suggestions: Intelligent pairing suggestions for ingredients (e.g., what to cook with
chicken, spices that complement tomatoes).

Social Features:

● Social Sharing: Allow users to share their favorite recipes or meals with friends via social media or
in-app.
● Collaborative Meal Planning: Collaborate with friends or family to plan meals, create shopping
lists, and assign cooking tasks.
● Follow Chefs and Foodies: Follow other home chefs or food influencers, get notified when they
share new recipes, or engage in recipe challenges.

Order-In Integration:

● Food Delivery Integration: Seamless integration with food delivery platforms (e.g., UberEats,
DoorDash, GrubHub) for ordering ingredients or ready-made meals.
● Local Restaurant Recommendations: Personalized restaurant suggestions based on user
preferences, location, and cuisine.

Offline Usage:

● Save Recipes for Offline Use: Users can save their favorite recipes or shopping lists for offline
access.
● Offline Shopping List: Have the shopping list available offline, so users can check ingredients
without needing an internet connection.

Dietary & Meal-Tracking Tools:

● Meal Tracker: A feature to track meals throughout the day, helping users log meals and track
calories, macros, or allergens.
● Recipe Nutritional Breakdown: Detailed nutritional information for each recipe to help users
make informed decisions based on their health goals.

Dark Mode & Customization:

● Dark Mode: The app will feature a dark mode for comfortable use in low-light settings.
● Color & Font Customization: Allow users to choose from multiple themes or fonts to personalize
the app's visual style to their liking.

RESULT

The above brainstorming for the food app is completed.

 Ex No: DEFINING THE LOOK AND FEEL OF A NEW
P
Date:
AIM
To define the look and feel of a new projet

VISUAL DESIGN

Color Scheme:

● Warm and Inviting Colors: Use a color palette that evokes warmth, freshness, and appetite. A
combination of earth tones (greens, oranges, yellows) can create an organic and comforting
feeling. For a more modern feel, accent colors like bright reds or soft pastels can be used to
highlight key actions or features.

Typography:

● Readable and Fresh Fonts: The typography will use friendly, clean fonts that are easy to read on
both mobile and desktop. Headers will use bold and clear fonts, while recipe instructions and
nutritional info use lighter, more readable fonts for a clean design.

Iconography:

● Simple and Intuitive Icons: Icons for common actions such as ‘add to grocery list,’ ‘favorite
recipe,’ ‘share,’ and ‘play recipe video’ will be intuitive and easy to identify. The icons for food
ingredients, cooking techniques, and filters will be designed with clear visual cues related to food
or cooking.

USER INTERFACE (UI) ELEMENTS

Homepage:

● The homepage will greet users with personalized food recommendations based on their past
behavior, seasonal ingredients, or dietary preferences. It will feature large, engaging images of
recipes and ingredients, and a smooth-scrolling carousel for featured meals or trending recipes.

Recipe Library:

● The recipe library will have an easy-to-navigate grid or list view, showcasing thumbnails of dishes.
Filters for sorting by type (breakfast, dinner), dietary preference, or ingredients will be clearly
visible. Hovering over a recipe will reveal a brief overview, including preparation time, difficulty
level, and a snapshot of ingredients.

Meal Planner:

● The meal planner interface will be sleek and user-friendly, with a calendar view to drag and drop
recipes into specific days. It will feature large recipe cards that display the title, time, and main
ingredients at a glance.

Recipe Detail Page:

 ● Each recipe will have a detailed page with a large, high-quality image of the finished dish,
preparation instructions, a list of ingredients, and an easy-to-follow, step-by-step process. There
will also be nutritional information displayed in a clear, easy-to-read chart.

Shopping List:

● The shopping list interface will be simple, with items clearly organized by category (e.g., produce,
dairy, pantry). Items can be checked off as they’re added to the cart or marked as already in the
user’s pantry.

Cooking Mode:

● Cooking mode will present each recipe step with a clear progress bar. Steps will include interactive
images or video tutorials, and timers will be built into each phase (e.g., prep time, cooking time) to
guide the user.

Food & Ingredient Encyclopedia:

● The ingredient pages will feature detailed images, nutritional facts, preparation tips, and alternative
ingredient suggestions. Users can browse through categories like fruits, vegetables, proteins, and
spices.

Playback Controls:

● Recipe videos and cooking tutorials will feature clear play, pause, and skip buttons, allowing users
to control the video as they cook. Playback buttons will be easy to access and follow the same
design principles as other parts of the app.

RESULT

The above defining of the look and feel of the music app is completed.
 Ex No: CREATE A SAMPLE PATTERN
LIBRARY FOR THAT
Date:

AIM

To create a sample pattern library for the music app like mood board, fonts and colors.

1. Create a Rectangle:
○ Start by creating a basic layout rectangle in a design tool (e.g., Figma, Sketch, Adobe XD).
2. Decide on Colors:
○ Choose primary, secondary, and accent colors based on the app's tone (e.g., warm,
appetizing tones like oranges, greens, reds).
○ Select highlight colors for buttons, notifications, and icons.
3. Decide on Fonts:
○ Select a bold, friendly font for headings (e.g., Poppins, Montserrat).
○ Choose a clean, readable font for body text (e.g., Roboto, Open Sans).
○ Pick a condensed font for call-to-action buttons (e.g., Nunito Sans, Inter).
4. Start Creating a Mood Board in Figma:
○ Create a new project in Figma and start gathering visual references for food photography,
design inspiration, and overall aesthetic.
○ Include colors, fonts, and general mood of the app.
5. Add the Colors:
○ Define the color palette in Figma, including primary, secondary, and accent colors.
○ Create swatches for use in UI elements like buttons, backgrounds, and text.
6. Add the Fonts:
○ Display selected fonts in the mood board, showing examples of heading text, body text, and
button text.
○ Establish a hierarchy for font usage (e.g., bold for headings, regular for body).
7. Add the Icons:
○ Choose and include icons for common actions (e.g., Add to Cart, Save Recipe, Meal Plan).
○ Ensure icons are simple, intuitive, and consistent in style (e.g., flat, outlined, filled).

RESULT

The above sample pattern library for the music is completed.

 Ex No: IDENTIFY A CUSTOMER PROBLEM TO SOLVE

Date:

AIM

To identity a customer problem of the music app to solve.

PROBLEM

Music enthusiasts struggle to navigate and make the most of their extensive digital music collections,
including discovering new music and keeping their playlists organized.

PAIN POINTS

Music Discovery: Users often find it challenging to discover new music that aligns with their
preferences and moods, leading to stagnation in their music consumption.

Playlist Chaos: Managing and organizing playlists can be time-consuming and confusing, especially as
users accumulate more songs and tracks.

Artist Information: Accessing comprehensive information about artists, including biographies,

discographies, and tour dates, often requires switching between multiple apps or platforms.

Effortless Navigation: Users desire a seamless and visually engaging experience for navigating
their music libraries, with intuitive controls for uninterrupted music enjoyment.

Personalization: Users seek the ability to create, customize, and manage personalized playlists that
reflect their moods and favorite tracks.

SOLUTION

Personalized Music Discovery:

Implement advanced recommendation algorithms that analyze users' listening history and preferences to
offer personalized music suggestions.

Curate playlists and featured songs based on users' moods, activities, and favorite genres.

Provide a "Discover" section with a continuous feed of new and trending music tailored to each user.

Streamlined Playlist Management:

Introduce a user-friendly playlist management system that simplifies creating, editing, and organizing
playlists.

Allow users to effortlessly add or remove songs, reorder tracks, and apply smart tags to categorize
playlists by mood or occasion.

Implement a search function that helps users quickly find songs in their vast music collections.

Comprehensive Artist Information:

Create dedicated artist pages that offer detailed information about musicians, including biographies,
discographies, upcoming tour dates, and related artists.

Provide multimedia content like videos, interviews, and behind-the-scenes footage for an immersive
artist experience.

Ensure a seamless transition from music exploration to artist exploration without leaving the app.

Effortless Navigation and Visually Engaging Interface:

Redesign the app's user interface to be visually engaging and intuitive, making music navigation a
delightful experience.

Use vibrant and dynamic colors, album artwork, and interactive animations to create an aesthetically
pleasing interface.

Incorporate features like swipe gestures, simple and recognizable icons, and drag-and-drop
functionality for effortless interactions.

Personalization and Customization:

Allow users to personalize their experience by creating custom playlists and

stations. Implement a "For You" section that adapts to users' preferences and

listening habits.

Integrate intuitive playback controls with options for repeat, shuffle, and cross fade to make the
listening experience more enjoyable.

RESULT
The above identification of a customer problem to solve for a music app is completed.
 Ex No: CONDUCT END-TO-END RESEARCH

Date:

AIM

To conduct end-to-end research like user research, creating personas, flow chart for the food
delivery app .

USER RESEARCH

Objective:

To gather insights into the motivations, challenges, and behaviors of food delivery app users to ensure that
the app design meets their needs effectively.

Methods Used:

1. Surveys: Distributed to 100 users who actively use food delivery apps (e.g., UberEats, Grubhub,
DoorDash) to understand their general preferences.
2. Interviews: Conducted with 15 participants to understand their specific needs and pain points.
3. Competitive Analysis: Reviewed popular food delivery apps to identify common features and
gaps.
4. Usability Testing: Observed how users interacted with existing apps to pinpoint issues in
navigation, interface design, and ordering flow.

Key Findings:

1. Common pain points: Long delivery times, high service fees, complicated checkout process,
unclear restaurant ratings.
2. User preferences: Simple navigation, ability to customize orders, fast checkout, transparent
pricing, and reliable delivery time.
3. Frequent behaviors: Users typically order food during lunch hours (12 pm - 2 pm) and dinner (7
pm - 9 pm). They prefer to reorder from their favorite restaurants and often look for discounts or
promotions.
CREATING PERSONAS

Persona 1:

Name: Sarah Miller

Age: 28
Occupation: Marketing Professional
Location: Urban area (New York City)
Tech Savviness: High
App Usage Frequency: 3-4 times a week

Demographics:
● College-educated, lives alone in a one-bedroom apartment.
● Works long hours in a fast-paced office environment, often skipping lunch or working late.
● Enjoys convenience and quick solutions for daily tasks.
● Typically orders lunch during work hours and dinner when unwinding at home.
Goals:
● Save time by ordering food while at work or home.
● Easily access a variety of food options from local restaurants.
● Order food quickly and efficiently, with minimal effort.
Pain Points:
● Overwhelmed by too many choices; takes a long time to decide on what to order.
● Dislikes complicated checkout processes, especially when needing to enter addresses or payment
details repeatedly.
● Experiences occasional long delivery times or issues with food quality.
Technology Usage:
● Uses an iPhone, prefers apps with smooth interfaces and fast performance.
● Frequently uses UberEats, Grubhub, and Postmates.
Motivations:
● Convenience and speed.
● Affordable prices and occasional promotions.
● Quality food from reputable local restaurants.

Persona 2:

Name: Carlos Rodriguez

Age: 35
Occupation: Freelance Graphic Designer
Location: Suburban Area (Los Angeles)
Tech Savviness: Medium
App Usage Frequency: 1-2 times a week

Demographics:
● Married, with two young children.
● Works from home most days but often travels to client meetings.
● Frequently cooks but occasionally orders food when working late or during weekends.
Goals:

● Get reliable food delivery for himself and his family without spending too much time navigating
the app.
● Find family-friendly options (meals that are affordable and large enough for multiple people).
● Receive orders quickly, especially when hungry after a long day.

Pain Points:

● Frustrated by high service fees and delivery charges.

● Dislikes apps that don't allow family-sized meals or don’t clearly highlight discounts and special
offers.
● Sometimes unsure about the reliability of delivery times or the quality of food during peak hours.

Technology Usage:

● Uses an Android phone.

● Regularly uses UberEats and DoorDash for family orders, occasionally checks restaurant reviews
on Yelp before placing an order.

Motivations:

● Convenience and family-friendly meal options.

● Transparent pricing and special deals.
● Quick delivery times.

IDEATION PROCESS:

Objective:
To generate and explore different ideas based on user pain points, goals, and the overall user journey,
ensuring that we build solutions that address their needs effectively.

Scenario 1: Sarah Miller - Ordering Lunch at Work

Context: Sarah has a busy workday ahead, and she wants to order lunch quickly during a break.

Goals:

● Fast ordering experience.

● Easily navigate between food categories.
● Minimal checkout steps.

Pain Points:

● Too many options can overwhelm her.

● Dislike for repetitive entry of personal information.

Solution:

● Quick Reorder: Sarah can reorder from previous restaurants or dishes directly from the home
screen with one tap.
● Smart Suggestions: The app uses AI to suggest lunch options based on her past orders,
preferences, and current time of day.
● One-Tap Checkout: Saves payment details and address to make the checkout process faster.
Scenario 2: Carlos Rodriguez - Family Dinner on the Weekend
Context: Carlos is at home with his family, and they want to order a dinner to share. He’s looking for a
meal large enough to serve the whole family, with a clear price breakdown.

Goals:

● Find family-sized meal deals.

● Clear visibility on total price, delivery fees, and discounts.

Pain Points:

● Doesn’t want to be surprised by extra charges.

● Wants food options that cater to kids as well.

Solution:

● Family Meal Packages: The app will highlight family-sized meals or deals that serve multiple
people.
● Price Breakdown: Transparent pricing with a detailed breakdown of delivery fees, taxes, and any
applicable discounts.
● Kids’ Menu: A dedicated section for kid-friendly meals, which Carlos can browse quickly.

USER FLOW:

User Flow for Sarah Miller (Persona 1)

1. Launch App
○ Sarah opens the app after lunch break.
○ Home screen appears with quick access to previous orders and food suggestions.
2. Browse Categories
○ Sarah taps on a category (e.g., "Lunch") or checks the "Suggested for You" section.
3. Quick Reorder or New Order
○ Sarah quickly taps on a previous restaurant or dish for fast ordering.
○ Alternatively, she browses for new options if the previous orders don’t appeal.
4. Add to Cart
○ She selects the food and adds it to her cart.
5. Checkout
○ Sarah taps the Checkout button, which auto-fills her delivery address and payment
details.
○ The Review Order page shows itemized costs (food, taxes, delivery).
6. Confirm Order
○ Sarah confirms her order and taps Place Order.
○ A confirmation screen shows expected delivery time.
7. Track Order
○ Sarah can track the order in real-time from preparation to delivery.
User Flow for Carlos Rodriguez (Persona 2)

1. Launch App
○ Carlos opens the app on a Saturday evening after the family decides to order dinner.
2. Browse Categories
○ Carlos selects "Family Meals" or taps "Deals" to look for affordable options for the
family.
3. Select Meal
○ He chooses a family meal deal or combo that suits their needs.
4. Add to Cart
○ Carlos adds the selected items to the cart.
5. Review & Apply Promo Code
○ The app shows a price breakdown, and Carlos applies any available promo code for
a discount.
6. Checkout
○ The app pre-fills the family’s address and payment details.
○ Carlos reviews the total price and confirms it.
7. Confirm Order
○ Carlos taps Place Order, receiving a confirmation and delivery time.
8. Track Order
○ Carlos tracks the order’s progress and receives notifications on the delivery status.

RESULT

The above end-to-end is completed by creating personas, ideation process and user flows .
 Ex No: SKETCH, DESIGN WITH POPULAR TOOL AND BUILD
A PROTOTYPE
Date:

AIM

To sketch, design with Figma and build a prototype and perform usability testing and identify
improvements for the food delivery app .

PROCEDURE

1) Sketching the Basic Design:

a) Begin by drawing rough sketches on paper or using a digital tool like Figma, Adobe XD, or
Sketch.
b) Focus on the core features and layout:
i) Splash Screen for loading.
ii) Home Screen with search, categories, and featured restaurants.
iii) Restaurant Detail Page to display menu items.
iv) Cart and Checkout Pages to place orders.
v) Order Tracking Screen to display real-time status of the order.
2) Creating Wireframes:
a) Translate sketches into wireframes using Figma, Adobe XD, or Sketch.
b) Set up basic page structures for each of the app’s key screens (Home, Restaurant Detail,
Cart, Checkout, etc.).
c) Use placeholders for images, text, and buttons to map out user flow.
3) Building a Mockup:
a) Once wireframes are ready, transform them into high-fidelity mockups.
b) Add colors, typography, icons, and images to reflect the visual style of the app.
c) Ensure branding is consistent across all screens (e.g., using vibrant colors for a food
delivery app).
4) Prototyping:
a) Use prototyping tools like Figma, Adobe XD, or InVision to create interactive elements.
b) Link screens together for a functional flow (e.g., tap on a menu item to go to the restaurant
details).
c) Add transitions and micro-interactions to make the prototype feel realistic.
5) Testing the Prototype:
a) Conduct usability testing with users or stakeholders.
b) Use tools like Figma Mirror (for mobile) or Adobe XD Preview to test navigation and
interaction.
c) Gather feedback on usability, clarity, and overall experience.
6) Iteration:
a) Based on testing feedback, refine the design.
b) Make necessary adjustments to improve user experience, such as fixing confusing
navigation or enhancing visual elements.

IMPROVEMENT
IMPROVEMENT:

● Enhanced Visual Design:

○ By adding high-fidelity elements like images, icons, and branded colors, the mockup
became more realistic and appealing.
○ The visual appeal was improved to ensure a pleasant, engaging experience for the users.
● Interactive Prototyping:
○ The interactive prototype allowed stakeholders to experience the app’s flow in a more
tangible way, improving understanding of how the app would function in real life.
○ By adding transitions and micro-interactions, the prototype mimicked a real-world user
interface, making it easier to test and refine.
● User Feedback:
○ Conducting usability testing provided valuable insights into user behavior and navigation
challenges. These insights led to several design tweaks, such as clearer button placements,
more intuitive categories, and simplified checkout flows.
● Collaborative Iteration:
○ Tools like Figma facilitated easy collaboration between designers and stakeholders,
allowing for rapid iteration and alignment on key design decisions.
OUTPUT

RESULT
The above sketching, designing, prototyping, testing and identifying improvements for food delivery
app is completed.