UI/UX DESIGN

INTERNSHIP REPORT

Submitted by

KAVIYA K (950621104042)

In partial fulfillment for the award of the degree

Of

BACHELOR OF ENGINEERING

IN

COMPUTER SCIENCE AND ENGINEERING

EINSTEIN COLLEGE OF ENGINEERING, TIRUNELVELI-12

ANNA UNIVERSITY:: CHENNAI 600 025

AUGUST 2024
 BONAFIDE CERTIFICATE

Certified that this internship report “UI/U DESIGNING” is the bonafide work
of “KAVIYA K (950621104042)” who carried out the internship work under
my supervision.

SIGNATURE SIGNATURE
Dr.M.SURESH THANGAKRISHNAN M.E.,Ph.D., Mrs. B. SATHIANARAYANI M.E.,
HEAD OF THE DEPARTMENT, SUPERVISOR,
Computer Science and Engineering, Computer Science and Engineering,
Einstein College of Engineering, Einstein College of Engineering,
Tirunelveli – 627012. Tirunelveli – 627012.

SIGNATURE
Dr. R. VELAYUTHAM M.E.,Ph.D.,FIE
PRINCIPAL,
Einstein College of Engineering,
Tirunelveli – 627012.
OFFER LETTER

I
CERTIFICATE

II
WORK ENVIRONMENT

III
 ABSTRACT

In today's digital landscape, user interface (UI) and user experience (UX) design
play a pivotal role in creating intuitive, engaging, and efficient digital products.
UI design focuses on the aesthetic and interactive elements of a product,
ensuring users have a visually appealing and easy-to-navigate interface. UX
design, on the other hand, prioritizes the overall experience of the user, from
their first interaction with a product to the completion of their tasks.This
abstract delves into the relationship between UI and UX design, discussing how
these disciplines work together to enhance user satisfaction and accessibility.
The importance of understanding user needs, behavior, and feedback is
emphasized as critical for designing products that are not only functional but
also emotionally engaging. Key principles such as usability, accessibility,
consistency, and user-centric design are explored, along with common
challenges, including balancing innovation with user familiarity.Finally, the
abstract highlights emerging trends in UI/UX, such as the rise of voice
interfaces, adaptive design, and the integration of artificial intelligence, which
are shaping the future of digital product design.

IV
 TABLE OF CONTENTS

CHAPTER NO NAME OF CONTENTS PAGE NO

ABSTRACT VI
LIST OF TABLES VII
LIST OF FIGURES VIII

1 INTRODUCTION 1
1.1 COMPANY DETAILS 1
1.2 INTRODUCTION OF UI/UX 1
1.3 SOFTWARE REQUIRED 1
1.5 TOOLS AND FRAMEWORK 3
1.5 OVERVIEW OF INTERNSHIP ACTIVITIES 2
2 WEEK 1 3
2.1 BASICS OF UI/UX 3
2.1.1 INTRODUCTION TO FIGMA 3
2.1.2 INSTALLATION PROCESS 4
2.2 DESIGN THINKING 5
2.3 UNDERSTANDING USER 6
2.4 USER EXPERIANCE DESIGN 7
2.5 PROTOTYPING 8
2.6 VISUAL DESIGN 10
2.6.1 COLOR THEORY 11
3 WEEK 2 12
3.1 DESIGN PATTERNS AND COMPONENTS 12
3.2 USABILITY AND INTERACTION DESIGN 13
3.3 RESPONSIVE DESIGN 14
3.4 DESIGNING FOR LOGIN & SIGNIN PAGE 14
3.5 DESIGN TOOLS INTRODUCTION 16
4 WEEK 3 17
4.1 ADVANCED FIGMA TECHNIQUE 17
4.2 USER TESTING AND FEEDBACK 18

V
4.3 PROTOTYPING TECHNIQUE 18
4.4 PROJECTS 19
5 WEEK 4 23
5.1 PLAN AND DESIGN 23
5.2 WIREFRAMING BASICS 23
5.3 CREATING USER FLOWS 24
5.4 BUILD ON FOOD APP 25
5.5 UX LAWS 34
6 CONCLUSION 35

VI
 LIST OF TABLES

S.NO TABLE NAME PAGE NO

1. INTERNSHIP SCHEDULE 1

VII
 LIST OF FIGURES
FIGURE NO FIGURE NAME PAGE NO
2 WEEK1
2.1 FIGMA LOGO 3
2.2 FIGMA INSTALL 4
2.3 FIGMA DOWNLOAD 4
2.4 INSTALL ON WINDOWS 5
2.5 PROCESS 6
2.6 PROTOTYPE 9
2.7 COLOR THEORY 11
3 WEEK 2
3.1 COMPONENT 13
3.2 LOGIN 14
3.3 SIGNIN 15
4 WEEK 3
4.1 SIMPLE PAGE 19
4.2 HOME PAGE 20
4.3 RESUME PAGE 21
4.4 PROJECT PAGE 22
4.5 CERTIFICATE PAGE 22
5 WEEK 4
5.1 WELCOME SCREEN 25
5.2 LOGIN SCREEN 26
5.3 SIGNUP SCREEN 27
5.4 HOME SCREEN 27
5.5 SEARCH ITEMS 28
5.6 CARD DESIGN 29
5.7 FILTER OPTION 29
5.8 CHECKOUT PAGE 30
5.9 PAYMENT OPTION 31
5.10 ORDER CONFORMED 32
5.11 OVER VIEW 32

VIII
1. INTRODUCTION
1.1 COMPANY DETAILS:
digisAilor,
64, Santhini Nagar, KTC Nagar, Tirunelveli - 627011.

1.2 INTRODUCTIONOF UI/UX

UI (User Interface) and UX (User Experience) design are two interconnected

disciplines focused on improving the interaction between users and digital
products, such as websites, mobile apps, and software platforms. While both are
essential for creating user-friendly products, they differ in their roles and scope.

I gained hands-on experience in conducting user research, creating wireframes,

developing prototypes, and testing designs, which are essential processes in
refining UI/UX. This report will outline the insights, challenges, and key
learnings I acquired during this period, and highlighting how design choices
directly impact user satisfaction and engagement.

1.3 SOFTWARE REQUIRED:

Fig 1.1 Figma

1.5 TOOLS AND FRAMEWORK

Figma: Figma is an online design tool that allows teams to create and share
designs in real time. It helps designers make layouts and prototypes, while
making collaboration easy and efficient
1
1.4 OVERVIEW OF INTERSHIP ACTIVITIES:
Total number of days: 30 days(4weeks)
Offline mode classes
INTERNSHIP SCHEDULE
WEEKS DATE DAY NAME OF THE TOPICS
20-07-2024 SATURDAY Basics of UI/UX
22-07-2024 MONDAY Design thinking
WEEK 1
23-07-2024 TUESDAY Understanding Users
24-07-2024 WEDNESDAY User Experience Design
25-07-2024 THURSDAY Prototyping
26-07-2024 FRIDAY Visual Design
29-07-2024 MONDAY Design Patterns Component
30-07-2024 TUESDAY Usability Interaction Design
WEEK 2 31-07-2024 WEDNESDAY Responsive Design
01-08-2024 THURSDAY Designing for simple Login
page
02-08-2024 FRIDAY Design tools Introduction
05-08-2024 MONDAY Figma techniques
WEEK 3 06-08-2024 TUESDAY User testing
07-08-2024 WEDNESDAY Prototyping Techniques
08-08-2024 THURSDAY Real Projects
09-08-2024 FRIDAY Case studies
12-08-2024 MONDAY Plan and Design
13-08-2024 TUESDAY Create User flows
WEEK 4 14-08-2024 WEDNESDAY Apply visual design
16-08-2024 THURSDAY Prototype
20-08-2024 TUESDAY Build on Food App

2
2. WEEK 1

2.1 DAY 1: BASICS OF UI/UX

2.1.1 INTRODUCTION TO FIGMA

Figma is a collaborative interface design tool that’s taking the design world by
storm. Unlike Sketch, which runs as a standalone MacOS app, Figma is entirely
browser-based, and therefore works not only on Macs, but also on PCs running
Windows or Linux, and even on Chromebooks. It also offers a web API, and
it’s free!

Another big advantage of Figma is that it allows real-time collaboration on the

same file. When using conventional “offline” apps like Sketch and Photoshop,
if designers want to share their work, they typically have to export it to an
image file, then send it via email or instant message.

In Figma, instead of exporting static images, we can simply share a link to the
Figma file for clients and colleagues to open in their browser. This in itself
saves significant time and inconvenience in a designer’s workflow.

Figma is a popular web-based design tool used primarily for user interface (UI)
and user experience (UX) design. It allows designers to create, prototype, and
collaborate on digital projects in real time.

Fig 2.1 Figma logo

3
2.1.2 INSTALLATION PROCESS

STEP 1: FIGMA WEBSITE

Open your browser

Fig 2.2 Figma install

STEP 2: DOWNLOAD DESKTOP APP

Fig 2.3 Download Figma

4
STEP 3: INSTALL ON WINDOWS

Fig 2.4 Install on windows

2.2 DAY 2: DESIGN THINKING

Design thinking is a valuable approach in UI/UX design, emphasizing user-

centered solutions. Here’s a breakdown of its key phases:

• Empathize: Understand your users’ needs, behaviors, and challenges.

This can involve user interviews, observations, and surveys to gather
insights.
• Define: Clearly articulate the problem you are trying to solve based on
the insights gathered. This helps in focusing your design efforts on a
specific user need.
• Ideate: Generate a wide range of ideas and solutions. Encourage
brainstorming sessions, where all ideas are welcome, to foster creativity.
• Prototype: Create low-fidelity prototypes (like sketches or wireframes)
to visualize your ideas. This stage allows for quick iterations and changes
based on feedback.

5
 • Test: Gather feedback on your prototypes by testing them with real users.
Observe how they interact with your design and identify any pain points.
• Iterate: Use the feedback to refine your designs. Design thinking is an
iterative process, so you may loop back to previous stages to improve the
solution.

Fig 2.5 Process

2.3 DAY 3: UNDERSTANDING USER

Understanding users is a critical step in UI/UX design, as it ensures the design

meets real needs and provides a seamless experience. Here's how you can
approach understanding users in depth:

User Research

• Interviews: Conduct one-on-one interviews to dive deep into users’

motivations, pain points, and goals. Open-ended questions help gather
qualitative data.
• Surveys: Use online surveys to gather quantitative data from a larger
audience. These can help validate assumptions and prioritize features.
• Field Studies/Observations: Watch how users interact with similar
products or environments in real time. This method reveals behavioral
patterns that might not be verbalized in interviews.

6
 • User Personas: Create detailed personas that represent your target users,
capturing their demographic info, needs, goals, behaviors, and pain point

2.4 DAY 4: USER EXPERIENCE DESIGN

User Experience (UX) Design is the process of creating products that provide
meaningful and relevant experiences to users. It focuses on the overall
interaction users have with a product, from start to finish, ensuring that the
experience is intuitive, enjoyable, and efficient.

Key Elements of UX Design:

• Usability: Ensures the product is easy to use and users can achieve their
goals efficiently.
• Information Architecture (IA): Organizes and structures content in a
way that makes it easy to find and navigate.
• Interaction Design (IxD): Defines how users interact with the product
through buttons, gestures, and other elements.
• User Research: Involves understanding users' needs, behaviors, and pain
points through interviews, surveys, and usability testing.
• Prototyping and Wireframing: Visualizing the product's layout and
functionality before full development, allowing for quick iterations.
• Prototyping: A prototype is a visual and interactive representation of a
product or system. It doesn’t need to be a fully functioning or coded
version but provides a basic framework to simulate user interaction and
functionality. and can be static or interactive, depending on the project
stage
• Accessibility: Make designs inclusive, following accessibility guidelines
(e.g., WCAG). Use appropriate color contrast, alternative text for images,
and keyboard navigation support.Test the design across devices and
assistive technologies to ensure broad usability.

7
2.5 DAY 5: PROTOTYPING

Prototyping is the process of creating an early model or version of a product,

system, or interface to visualize and test its functionality before the final
development. In the context of UI/UX design, prototyping involves designing
interactive representations of a digital product to simulate the user experience
and test the design's usability.

Prototyping allows designers, developers, stakeholders, and users to explore,

evaluate, and provide feedback on how a product will function, without fully
building the final version.

Steps in the Prototyping Process:

1. Define Goals:

• Understand the purpose of the prototype, whether it’s for internal

feedback, usability testing, or presenting to stakeholders.

2. Create Wireframes or Sketches:

• Start by designing the layout and structure of the product. Focus on

essential components and the user journey without worrying about
the details.

3. Build the Prototype:

• Using prototyping tools, create a digital version of the product.

Decide on the fidelity level based on the goals, from basic
wireframes to fully interactive designs.

8
4. Test and Gather Feedback:

• Conduct usability testing sessions or share the prototype with

stakeholders and users to collect feedback on how intuitive and
functional the design.

5. Iterate and Refine:

• Based on feedback, make necessary revisions to the design. This

could involve improving the layout, navigation, or functionality of
the prototype.

6. Prepare for Development:

• Once the prototype has been refined and approved, it can serve as a
guide for the development team to build the final product.

Fig 2.6 Prototype

9
Common Prototyping Tools:

• Figma: A collaborative tool for both designing and prototyping that

allows for real-time collaboration among teams.
• Adobe XD: A design and prototyping tool for user experiences that
includes interactive elements and animations.
• InVision: A digital product design platform that enables teams to
prototype, collaborate, and refine designs with interactive elements.
• Sketch: Primarily a design tool but with plugins that allow for
prototyping.

2.6 DAY 6: VISUAL DESIGN

Visual Design is a key component of UI/UX design that focuses on the

aesthetics and the appearance of a product. It combines elements like color,
typography, imagery, and layout to create an interface that is not only visually
appealing but also functional.

Key Principles of Visual Design:

• Color: Colors are used to create mood, highlight important elements, and
evoke emotions. Consistent color schemes contribute to a cohesive brand
experience.
• Imagery: Photos, illustrations, icons, and other visual elements are used
to communicate meaning and guide the user's attention to key actions or
content.
• Layout: Organizing elements in a structured way ensures that users can
easily find information. Proper use of spacing and alignment enhances
readability and user flow.
• Visual Hierarchy: Arranging elements based on their importance guides
the user’s attention to the most critical parts of the interface, usually done
through size, contrast, and positioning.

10
 • Alignment:Properly positioning elements to create a sense of order and
organization.

2.6.1 COLOR THEORY

Color theory is a framework that informs the use of color in art and
design,guides the curation of color palettes, and facilitates the effective
communicationof a design message on both an aesthetic and a psychological
level Modern color theory is largely based on Isaac Newton’s color wheel,
which he created all the way back in 1666.

• Primary colorsare colors you can’t create by combining two or

moreothercolors. The primary colors are red, blue, and yellow.

• Secondary colorsare orange, purple, and green—in other words,colors that

can be created by combining any two of the three primarycolors

.• Tertiary colorsare created by mixing a primary color with a secondarycolor.

The tertiary colors are magenta, vermillion, violet, teal, amber, andchartreuse

Fig 2.7 Color theory

11
3. WEEK 2
3.1 DAY 1: DESIGN PATTERNS AND COMPONENTS

Design patterns are reusable solutions to common design problems, like

navigation bars or form validation, ensuring consistency and familiarity in user
interfaces.

Components are modular UI elements, such as buttons, input fields, and cards,
that can be reused and customized across different parts of a design.

A few components are,

1. Text Inputs

These allow users to type text, such as filling out forms, entering login
credentials, or providing search queries.

2. Buttons

Buttons trigger actions when clicked or tapped. They are one of the most
commonly used input types in UI/UX

3. Dropdown Menus

Dropdowns allow users to choose one option from a list, especially when space
is limited. They are useful for selecting items from a predefined set (e.g.,
countries, categories).

4. Checkboxes

Checkboxes allow users to select one or more options from a list of choices.
They are typically used for multiple selections (e.g., filters in an e-commerce
site).

5. Radio Buttons

Radio buttons allow users to select only one option from a list of mutually
exclusive choices. They are commonly used when users must make a single
selection, such as selecting a payment method.

12
6. Sliders

Sliders allow users to select a value from a continuous or discrete range. They
are often used in settings where a value needs to be adjusted (e.g., volume
control, price range filters).

Fig 3.1 Component

3.2 DAY 2: USABILITY AND INTERACTION DESIGN

Usability refers to how easy and intuitive a product is for users to achieve their
goals. It focuses on:

• Effectiveness: Can users accomplish tasks efficiently?

• Efficiency: How quickly can users perform tasks?
• Satisfaction: Is the user experience pleasant and free from frustration?

Good usability ensures a product is accessible, understandable, and functional,

reducing user errors and frustration.

13
Interaction Design (IxD) is the design of interactive elements in a product. It
focuses on:

• User Actions: How users interact with the product (e.g., clicking,
swiping, typing).
• Feedback: How the system responds to user actions (e.g., animations,
sounds, visual cues).

3.3 DAY 3: RESPONSIVE DESIGN

Responsive Design ensures a website or app adapts to different screen sizes and
devices (desktop, tablet, mobile). It uses flexible grids, scalable images, and
media queries to provide an optimal user experience across all devices.

3.4 DAY 4: DESIGNING FOR LOGIN PAGE

A login page serves as the gateway for users to access a web application or
platform. It’s essential for providing a secure entry point while also delivering a
positive user experience. When designing a login page in Figma, the focus
should be on clarity, accessibility, and aesthetic appeal.

Fig 3.2 Login

A well-designed login page is crucial for providing a smooth and secure user
experience. By focusing on simplicity, usability, and visual appeal, you can

14
create a login page that not only meets user expectations but also enhances their
overall interaction with your application or website. Design with real users to
gather feedback and make necessary adjustments for optimal performance.

DESIGNING FOR SIGNUP PAGE

Designing a sign-up page in Figma is a creative process that allows you to

combine functionality with aesthetics to enhance user experience. The design
should provide a seamless and intuitive experience, minimizing friction during
the sign-up process.

Fig3.3 Sign in

A well-designed signup page is crucial for creating a positive first impression

and encouraging users to complete the registration process. By focusing on
usability, clarity, and visual appeal, you can create a signup page that enhances
user experience and fosters trust in your application or website. Testing the
design with real users can provide valuable insights and help refine the signup
process for optimal results.

15
3.5 DAY 5: DESIGN TOOLS INTRODUCTION

Frames and Layouts

• Frames: Serve as containers for your design elements. You can create
frames for various screen sizes (desktop, mobile, tablet) and organize
your design structure.
• Auto Layout: A feature that allows you to create responsive designs by
automatically adjusting the size and spacing of elements based on their
content and layout settings.

Text Tool

The Text tool lets you add and format text. You can adjust font type, size,
weight, line height, and letter spacing, ensuring your typography aligns
with your design goals.

Styles

• Color Styles: Save color palettes for easy access and consistent
application across your design.
• Text Styles: Define typography settings that can be reused, helping
maintain consistency.

Prototyping Tools

• Prototype Mode: Create interactive prototypes by linking frames and

adding transitions. This allows you to simulate user flows and test the
experience before implementation.
• Smart Animate: This feature adds smooth transitions between frames
based on layer positioning, enhancing the overall interactivity of your
prototypes.

16
4 WEEK 3:

4.1 DAY 1: FIGMA TECHNIQUE

Components:Create reusable components for UI elements (e.g., buttons, input

fields) to ensure consistency across your design. Use instances to modify
properties without affecting the master component.

Auto Layout: Design responsive layouts that adapt to content changes. Use
Auto Layout to manage spacing, alignment, and padding easily.

Styles: Establish shared color and text styles for visual consistency. Changes to
styles automatically update all instances.

Prototyping: Create interactive prototypes by linking frames. Use Smart

Animate for smooth transitions and enhanced user experience.

Vector Editing: Use the Pen tool for custom shapes and Boolean operations to
combine multiple shapes into complex designs.

Grids and Constraints: Implement layout grids for structured designs and set
constraints to control how elements resize within frames.

Collaboration: Use comments for feedback directly on designs and access

version history to track changes and revert if necessary.

Plugins: Leverage Figma plugins for added functionality (e.g., accessibility

checks, stock images) and explore community resources for templates and UI
kits.

Keyboard Shortcuts: Familiarize yourself with shortcuts to speed up your

workflow (e.g., V for move tool, R for rectangle).

17
4.2 DAY 2: USER TESTING

Identify Usability Issues: User testing helps uncover problems in the design
that may not be apparent to designers or stakeholders. It reveals how actual
users interact with the product.

Gather User Feedback: Testing allows designers to collect qualitative and

quantitative feedback from users, providing insights into their needs,
preferences, and behaviors.

Improve User Experience: By understanding how users navigate and use the
product, designers can make informed decisions to enhance usability,
accessibility, and satisfaction.

Validate Design Decisions: User testing helps validate design assumptions and
hypotheses, ensuring that the final product aligns with user expectations.

4.3 DAY 3: PROTOTYPING TECHNIQUES

Prototyping: A prototype is a visual and interactive representation of a product

or system. It doesn’t need to be a fully functioning or coded version but
provides a basic framework to simulate user interaction and functionality.
Prototypes vary in their level of fidelity (how closely they resemble the final
product) and can be static or interactive, depending on the project stage

Linking Frames: You can link different frames (screens) by selecting an

element (like a button) and dragging the prototype arrow to another frame. This
establishes navigation paths within your prototype.

Smooth Transitions: Use Smart Animate to create smooth transitions between

frames. When two frames have layers with the same name and properties,Figma
can automatically animate the movement and transformation of those layers.

18
Creating Overlays: Use overlays to display modal dialogs, dropdowns, or
tooltips without leaving the current frame. You can set an overlay to appear
when a user clicks on a specific element.

4.4 DAY 4: PROJECTS

Designing a food app in Figma requires a thoughtful approach that prioritizes

user experience and visual appeal. By understanding user needs, defining clear
features, and iterating based on feedback, you can create an effective and
engaging food app that enhances the dining experience.

4.4.1 CREATE SIMPLE RESUME

A resume is a formal document that summarizes an individual's professional

qualifications, skills, experience, and education. It serves as a marketing tool for
job seekers to present themselves to potential employers and is typically
required during the job application process.

Fig 4.1 Simple page

19
STEP 1: HOME PAGE

To provide a comprehensive overview of an employee’s qualifications

through their resume, projects, certificates, and contact information.

Fig 4.2 Home page

STEP 2: RESUME PAGE

Explain that the resume summarizes the employee's professional

background, including education, work experience, and relevant skills.

A resume is a formal document that summarizes an individual's professional

qualifications, skills, experience, and education. It serves as a marketing tool for
job seekers to present themselves to potential employers and is typically
required during the job application process.

It serves as a digital representation of one's qualifications, skills, and career

history, allowing potential employers, recruiters, or clients to review a
candidate's credentials.

20
 Fig 4.3 Resume page

A Resume page refers to a web page or section within a website specifically

designed to display an individual's professional resume or curriculum vitae
(CV). It serves as a digital representation of one's qualifications, skills, and
career history, allowing potential employers, recruiters, or clients to review a
candidate's credentials. This page is often part of a personal website or portfolio
and provides easy access to an individual's professional details in an organized
and visually appealing way.

STEP 3: PROJECTS PAGE

Describe the importance of showcasing projects in a resume, especially for

fields like UI/UX design, where practical experience is crucial.
The Projects section in a resume showcases specific, hands-on experiences that
demonstrate your skills and accomplishments.
Highlight projects that showcase key skills, problem-solving abilities, or
technical expertise that the job requires.

21
 Fig 4.4 Project Page

STEP 4: CERTIFICATE PAGE

This section is particularly valuable in fields where verified skills or knowledge

are important, such as UI/UX design, Including certifications in a resume helps
to demonstrate a candidate’s commitment to professional development.

Fig 4.5 Certificate page

22
5 WEEK 4

5.1 DAY 1: PLAN AND DESIGN

User registration and profiles

• Restaurant search and filtering
• Menu browsing with item details
• Cart and checkout processes
• Order tracking and history
• User reviews and ratings
• Promotions and offers

5.2 DAY 2: WIREFRAMING BASICS

Wireframing is a crucial step in the design process that involves creating a

simplified visual representation of an application orwebsite's layout and
structure. It serves as a blueprint for the user interface, focusing on the
placement of elements without detailing visual design aspects.

Key aspects of wireframing include:

• Purpose: To outline the basic framework of a design, helping to visualize

user flows and functionality before developing high-fidelity mockups.
• Elements: Typically consists of basic shapes (rectangles for buttons, lines
for navigation), placeholder text, and annotations indicating interactions
and user actions.
• Types: Can range from low-fidelity wireframes (simple sketches) to
high-fidelity wireframes that are more detailed and closer to the final
design.

23
 • Tools: Figma is a popular tool for wireframing, allowing designers to
create frames, use layout grids, and collaborate with team members
easily.
• Collaboration: Wireframes facilitate communication among stakeholders
and provide a platform for gathering feedback, which is essential for
refining the design before moving to the next stages.

5.3 DAY 4: CREATING USER FLOW

Identify the Task: Determine the specific task or goal you want to map out,
such as signing up for an account, placing an order, or searching for a
restaurant.

Target Audience: Consider the needs and behaviors of your target users to
ensure the flow aligns with their expectations.

Creating a user flow in Figma is an essential part of UX design, helping you

visualize how users navigate through a product.

Steps in Creating User Flow

• Define the Goal: Identify the primary objective users should achieve.
• Research User Needs: Gather insights from user research to understand
motivations and pain points.
• Outline Steps: Break the process down into clear, actionable steps.
• Map the User Journey: Create a visual representation using flowcharts
or diagrams, including entry, actions, decisions, and exit points.
• Consider Edge Cases: Identify alternative paths and error scenarios to
ensure a smooth user experience.
• Add Annotations: Include notes to explain interactions, features, and
transitions.

24
 • Iterate and Refine: Gather feedback from stakeholders and users to
improve the flow.
• Test the Flow: Conduct usability testing with real users to identify pain
points.
• Document the Flow: Save the final user flow for easy reference by your
team.
• Integrate with Wireframes: Use the user flow as a foundation for
creating wireframes and prototypes.

5.4 DAY 5: BUILD ON FOOD APP

Creating a food app using Figma involves designing an intuitive and user-
friendly interface that allows users to browse menus, order food, and track their
deliveries seamlessly.

WELCOME SCREEN

Fig 5.1 Welcome screen

25
The logo can feature elements like utensils plates, food items (like fruits, pizza,
or coffee), or abstract symbols that evoke feelings of freshness and
convenience. It’s important to choose colors that resonate with food, such as
warm tones like red, orange, or green, which are associated with appetite and
health.

The screen begins with the app logo and a brief welcome message to establish
brand recognition and create a friendly first impression

LOGIN SCREEN

The login page of a food delivery app is a crucial component of the user
experience (UX) because it allows users to access their personalized account,
order history, saved restaurants, and other features.

Fig 5.2 Login screen

A well-designed login page should be simple, intuitive, and secure to

encourage users to engage with the app without frustration.

The login screen is designed to be simple and easy for users to access their
accounts. It includes everything they need to log in quickly, without any
distractions.

26
SIGNUP SCREEN

Fig 5.3 Signup screen

The signup screen in new users create an account. The signup screen enables
new users to create an account, details such as their name and password.

HOME SCREEN

Fig 5.4 Home screen

27
SEARCH ITEM

The search bar should be clearly visible and easy to access. It can be fixed at the
top so that users can start a search from any screen. The search screen is a
central feature in a food app, guiding users toward the items they want quickly
and easily

Fig 5.5 Search item

The Search Item Menu is designed to refine and streamline the user’s search
experience by offering categorized options and filters. It allows users to narrow
down their search results and find specific food items more efficient

A section for recent searches or popular suggestions can assist users in returning
to past searches or exploring trending items, enhancing user convenience.

The search option menu in the food app is designed to provide users with an
intuitive way to locate specific dishes, restaurants, or cuisines, improving
navigation and reducing the time spent browsing. Positioned prominently at the
top of the app’s homepage, it allows users to easily access the search bar and
enter queries directly.

28
CARD DESIGN

Fig 5.6 Card design

Display the results in a clear, organized list. Card designs include an image, a
short description, and a call-to-action button.

FILTER OPTION

Allow users to filter based on current deals, discounts, or promotions available.

Structured the filter option menu to be easily accessible, typically as a button or

tab located prominently on the menu or search results page. Once users tap the
filter icon, an overlay or slide-in menu displays various filter categories

The filter option menu in the food app serves to simplify the user’s journey by
helping them narrow down food choices based on specific preferences, such as
dietary needs, cuisine type, price range, or delivery time.

29
 Fig 5.7Filter option

This feature ensures users can quickly find items that meet their criteria,
enhancing convenience and usability.

CHECKOUT PAGE

Fig 5.8 Checkout page

30
The checkout page is where users finalize their order, including reviewing
selected items, specifying delivery or pickup details, selecting a payment
method, and confirming the order.

PAYMENT OPTION

Offering multiple payment options, such as Cash on Delivery (COD) and

Unified Payments Interface (UPI).

Cash on Delivery (COD) is a traditional payment method where users pay for
their order in cash when the food is delivered. It is popular among users who
prefer to pay with cash or don’t have access to digital payment methods.

UPI (Unified Payments Interface) is a real-time payment system developed in

India that allows users to transfer money between bank accounts instantly via
their mobile devices. It is widely used for online payments in apps, including
food delivery apps, due to its simplicity, security, and speed.

Fig 5.9 Payment option

31
ORDER CONFIRMED

Fig 5.10 Order confirmed

OVER VIEW

Fig 5.11 Over view

32
• Sign Up/Log In: Users create an account or sign in, often using social
media or email.
• User Reviews and Ratings: Reviews help other users make informed
decisions, and rating systems allow restaurants and dishes to be
evaluated.
• Search and Browse: Users can search for restaurants, dishes, or cuisines
and filter options based on distance, price, ratings, dietary preferences,
etc.
• Menu Selection: After selecting a restaurant, users can view the menu,
pick dishes, and customize their order.
• Cart and Checkout: The selected items go into a cart. Users confirm
their order, add delivery instructions, and choose a payment method.
• Payment Integration: Secure payment options, including credit/debit
cards, digital wallets (like Apple Pay, Google Pay), and sometimes cash
on delivery. Integration with secure payment gateways to ensure safe and
efficient transactions.
• Order Placement: Users can select items, customize their order (e.g.,
add extra toppings), and place orders directly through the app.Once the
order is placed, users can track its progress until it's delivered or ready for
pickup.
• Order Tracking: Allows users to track the status of their order, from
preparation to delivery or pickup.
• Feedback and Reviews: After receiving the order, users can leave
reviews and ratings for the food and delivery service.

33
UXLAWS
The laws of UX are a guiding set of principles and best practices for UX/UI,
and product designers. Steeped in psychology, they help us to understand how
people perceive and interact with our products allowing us to make better
design. The laws of UX can be divided into four main categories:

• Heuristics
• Gestalt principles
• Cognitive bias
• Principles

Law of Similarity:
Law of similarity states that elements that share similar visual characteristics
such as shape, color, size or orientation are perceived as related or grouped
together.

Zeigarnik Effect:

Zeigarnik Effect can contribute to creating more engaging and memorable

user experiences, also is a psychological phenomenon that suggests people
remember uncompleted or interrupted tasks better than completed ones.
Hick’s Law:

The goal is to simplify the user experience and reduce cognitive load, is a
psychological principle that states the time it takes for a person to make a
decision increases with the number of choices available

Tesler’s Law:

Every system has an inherent complexity that cannot be reduced, but it can be
managed.

34
 CONCLUSION

My internship experience in the field of UI/UX Design has been both

enriching and transformative. Over the course of the internship, I have gained
hands-on experience with technologies.

During this period, I had the opportunity to work on specific tasks, which
allowed me to apply theoretical knowledge in a real-world setting. Now I able
to create and develop app designing, create products that are not only visually
appealing but also functional, efficient, and easy to use. Due to this internship I
have got some clear idea about the UI/UX design to creating products.

35