Department of Artificial Intelligence

and Data Science

Lab Manual

Name : OLIVE MIRACLIN P

Register Number : 711722243078
Regulation : R-2021
Branch : B.Tech – Artificial Intelligence and Data Science
Subject Code/ Title : CCS370 / UI&UX DESIGN
Semester/ Year : V/ III
 KGiSL Institute of Technology
(An Autonomous Institution)
Affiliated to Anna University, Approved by AICTE, Recognized by UGC, Accredited
by NAAC & NBA (B.E-CSE,B.E-ECE, B.Tech-IT), 365, KGiSL Campus, Thudiyalur
Road, Saravanampatti, Coimbatore – 641035.

NAME : OLIVE MIRACLIN P

CLASS : III YEAR-AI&DS - ‘B’
UNIVERSITY REG NO : 711722243078

This is to certify that, this is a bonafide record of practical work done by

OLIVE MIRACLIN P of Artificial Intelligence and Data Science branch in CCS370

UI&UX DESIGN during Fifth Semester of academic year 2024 - 2025.

FACULTY IN CHARGE HEAD OF THE DEPARTMENT

Submitted during Anna University Practical Examination held on ……………….. at

KGISL Institute of Technology, Coimbatore – 641 035.

INTERNAL EXAMINER EXTERNAL EXAMINER

 INDEX

SIGN OF
EX.NO DATE NAME OF THE EXPERIMENT PAGE MARK FACULTY
NO

1 DESIGNING A RESPONSIVE
LAYOUT FOR ANSOCIETAL
APPLICATION

2 EXPLORING VARIOUS UI
INTERACTIONPATTERN

3 DEVELOPING AN INTERFACE
WITH PROPER STYLE GUIDES

4 DEVELOPING WIREFLOW
DIAGRAM FOR AN
APPLICATION

EXPLORING VARIOUS OPEN

SOURCE COLLABORATIVE
5 INTERFACE PLATFORM

6 HANDS ON DESIGN THINKING

PROCESS FOR A NEWPRODUCT

BRAINSTORMING FEATURE
7 FOR THE PRODUCT

DEFINING THE LOOK AND FEEL

8 OF A NEW PROJECT

CREATE A SAMPLE PATTERN

LIBRARY FOR THATPRODUCT
9
 PAG SIGN OF
EX.NO DATE NAME OF THE E MARK FACULTY
EXPERIMENT NO

10 IDENTIFY A CUSTOMER
PROBLEM TO SOLVE

11 CONDUCT END-TO-END
RESEARCH

12 SKETCH, DESIGN WITH

POPULAR TOOL AND
BUILD A PROTOTYPE
Ex No:
DESIGNING A RESPONSIVE
Date: LAYOUT FOR AN SOCIETAL
AIM APPLICATION

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.

 EXPLORING VARIOUS
Ex No: UI INTERACTION
PATTERN
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: GUIDES

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
PRODUCT
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 PROJECT

Date:

AIM
To define the look and feel of a new project

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
Date: PATTERN LIBRARY FOR
THAT PRODUCT

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
Date: A PROTOTYPE

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.