PERI INSTITUTE OF TECHNOLOGY

Mannivakkam, Chennai-600 048

(Affiliated to ANNA UNIVERSITY, Chennai)

NAME ……………………………………………………

REGISTER NO …………………………………………………

YEAR / SEM …………………………………………………

DEPARTMENT …………………………………………………

SUBJECT : …………………………………………………
 PERI INSTITUTE OF TECHNOLOGY(AUTONOMOUS)

Mannivakkam, Chennai-600 048.

BONAFIDE CERTIFICATE

Certified that this is the bonafide record work done by

Mr./Ms.…….…………………………………Register No ………………. of

............................................................................................................ Department

....……. Year / ….… Semester during the academic year ......................... in the

Subject code/ Subject name……………………….…………………....………..

Staff In-Charge Head of the Department

Submitted for Practical Examination held on……………………......………………….

Internal Examiner External Examiner

 PERI Institute of Technology(Autonomous)
Department of Computer Science & Engineering

VISION AND MISSION OF THE INSTITUTION

Vision:

PERI Institute of Technology visualizes growing in future to an internationally recognized

seat of higher learning in engineering, technology & science. It also visualizes being a research
incubator for academicians, industrialists and researchers from across the world, enabling them to
work in an environment with the sophisticated and state of the art equipment and amenities provided
at the institute.

Mission:

In the process of realization of its Vision, PERIIT strives to provide quality technical education
at affordable cost in a challenging & stimulating environment with state-of-the-art facilities and a
global team of dedicated and talented academicians, without compromising in its core values of
honesty, transparency and excellence.

VISION AND MISSION OF THE DEPARTMENT

Vision:
The vision of the department is to prepare industry-ready competent professionals with moral
values by imparting scientific knowledge and skill-based education.

Mission:

 To provide exposure of latest tools and technologies in the broad area of computing.
 To promoter search-based projects/activities in the emerging area soft technology.
 ToenhanceIndustryInstituteInteractionprogramtogetacquaintedwithcorporateculture
and to develop entrepreneurship skills.
 To induce ethical values and spirit of social commitment.
 PROGRAM OUTCOMES (POs)
1 Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals,
and an engineering specialization to the solution of complex engineering problems.

2 Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural sciences,
and engineering sciences.

3 Design/development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmental considerations.

4 Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.

5 Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with an
understanding of the limitations.

6 The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional engineering practice.

7 Environment and sustainability: Understand the impact of the professional engineering solutions
in societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.

8 Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms
of the engineering practice.

9 Individual and team work: Function effectively as an individual, and as a member leader in
diverse teams, and in multidisciplinary settings.

10 Communication: Communicate effectively on complex engineering activities with the

engineering community and with society at large, such as, being able to comprehend and write
effective reports and design documentation, make effective presentations, and give and receive clear
instructions.

11 Project management and finance: Demonstrate knowledge and understanding of the 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.

12 Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.
 PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

PEO1: To enable graduates to pursue higher education and research, or a successful career in
industries associated with Artificial Intelligence & Data Science, or as entrepreneurs.
PEO2: To ensure that graduates will have the ability and attitude to adapt to emerging
technological changes.
PEO3: To exhibit professional attitude, teamwork and practice code of ethics in the area of
specialization.

PROGRAM OUTCOMES (POs)

1. Engineering knowledge: Apply the knowledge of Mathematics, Science, Engineering fundamentals,

and an engineering specialization to the solution of complex engineering problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of Mathematics, Natural Sciences,
and Engineering Sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern engineering
and IT tools including prediction and modeling to complex engineering activities with an
understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal and cultural issues and the consequent responsibilities relevant to the professional
engineering practice.

7. Environment and sustainability: Understand the impact of the professional engineering solutions in
societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of the
 engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or leader
in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
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.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
independent and life-long learning in the broadest context of technological change.

PROGRAMME SPECIFIC OUTCOMES (PSOs)

1. To analyze, design and develop computing solutions by applying foundational

concepts of Artificial Intelligence & Data Science.
2. To apply software engineering principles and practices for developing quality software
for scientific and business applications
3. To adapt to emerging Information and Communication Technologies (ICT) to innovate
ideas and solutions to existing/novel problems.
 INDEX

EX. DATE NAME OF THE EXERCISES PAGE. MARKS SIGN

NO NO
EX.NO: 01
DATE: Designing a Responsive Layout for an Societal Application

AIM:

ALGORITHM:

STEP 1:
HTML and CSS Setup:
 Create an HTML5 document with character encoding and viewport settings.
 Use internal CSS to style the layout components

STEP 2:
 Reset margins, padding, and specify a font-family for better control.

STEP 3:
Style Header, Navigation, Content, and Footer:
 Apply background colors, text colors, and alignment to the header, navigation,
and footer.
 Style navigation links as inline elements with spacing.
 Center-align text in header, navigation, and footer.

STEP 4:
Implement Responsive Design:
 Use a media query for screens up to 768px wide.
 Adjust navigation for mobile display (block-level elements with margin).

STEP 5:
Add Content:
 Place your application's content within the .container div.

1
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Societal Application</title>
<style>
/* Reset some default styles */ body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

/* Header styles */
header {
background-color:
#ff0000; color: #fff;
padding: 10px; text-align: center;
}

/* Navigation styles */

nav {
background-color: #47fff0;
color: #fff;
text-align: center;
}
nav ul
{
list-style: none;
padding: 0;
}
nav li
{
display: inline;
margin: 0 15px;
}
/* Main content styles */
.container
{
2
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Responsive design */
@Media (max-width: 768px)
{
nav
{
display: block;
text-align: center;
}
nav li
{
display: block;
margin: 10px 0;
}
}

/* Footer styles */
Footer
{
background-color: #0e00d1;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Societal Application</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Posts</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Settings</a></li>
</ul>
3
</nav>
<div class="container">
<!-- Your content goes here -->
<h2>Welcome to our Societal Application! </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipescent elite. </p>
</div>
<footer>
&copy; 2023 Societal Application
</footer>
</body>
</html>

OUTPUT:

DESKTOP VIEW:

4
TABLET VIEW:

PHONE VIEW:

Program Output& Viva Total

(3) Result (4) (10)
(3)

RESULT:

5
 EX.NO: 02
DATE: Exploring various UI Interaction Patterns

AIM:

ALGORITHM:

STEP 1: Set objectives and understand user needs.

STEP 2: Research and gather design inspiration.

STEP 3: Create wireframes for layout and structure.

STEP 4: Utilize Figma components and styles.

STEP 5: Prototype interactions using Figma's features.

Figma Design:

6
 Program Output& Viva Total
(3) Result (4) (10)
(3)

RESULT:

7
EX.NO: 03
DATE: Developing an Interface with Proper UI Style Guides

AIM:

ALGORITHM:

STEP 1: Define Goals and Audience: Understand the project's purpose and target
users.

STEP 2: Research and Inspiration: Gather industry insights and design inspiration.

STEP 3: Create a Figma Project: Start a new Figma project.

STEP 4: Workspace Setup: Organize Figma files and create sections for style guides
and components.

STEP 5: Brand Guidelines: Set color, typography, and brand-related guidelines.

STEP 6: UI Components: Create component libraries for buttons, forms, icons, and
navigation.

STEP 7: Typography: Define font styles, sizes, and spacing.

STEP 8: Iconography: Design and organize icons as components.

STEP 9: Color System: Document primary, secondary, background, and text colors.

STEP 10: Grids and Layouts: Establish grid systems for different devices.

STEP 11: Accessibility Guidelines: Ensure WCAG-compliant contrast

and text sizing.

STEP 12: Elements: Document usage guidelines for various UI elements.

8
 Figma Design:

Program Output& Viva Total

(3) Result (4) (10)
(3)

RESULT:

9
EX.NO: 04 Developing Wireflow diagram for application using open
DATE: source software

AIM:

ALGORITHM:

STEP 1: Define Goals and Audience: Understand the project's purpose and target
users.

STEP 2: Research and Inspiration: Gather industry insights and design inspiration.

STEP 3: Create a Figma Project: Start a new Figma project.

STEP 4: Workspace Setup: Organize Figma files and create sections for style guides
and components.

STEP 5: Brand Guidelines: Set color, typography, and brand-related guidelines.

STEP 6: UI Components: Create component libraries for buttons, forms, icons, and
navigation.

STEP 7: Typography: Define font styles, sizes, and spacing.

STEP 8: Iconography: Design and organize icons as components.

STEP 9: Color System: Document primary, secondary, background, and text colors.

STEP 10: Grids and Layouts: Establish grid systems for different devices.

STEP 11: Accessibility Guidelines: Ensure WCAG-compliant contrast and text

sizing.

STEP 12: Elements: Document usage guidelines for various UI elements.

10
 DESIGN:

Program Output& Viva Total

(3) Result (4) (10)
RESULT: (3)

11
EX.NO: 05 EXPLORING VARIOUS OPEN SOURCE COLLABORATIVE
DATE: INTERFACE PLATFORM

AIM:

ALGORITHM:

STEP 1: Needs Assessment: Define your team's requirements and goals.

STEP 2: Research Platforms: Identify open-source collaborative tools.
STEP 3: Feature Comparison: Assess features and compatibility.
STEP 4: Community Support: Check for active communities.
STEP 5: Istallation: Set up the chosen platform.
STEP 6: User Training: Train and encourage team adoption.
STEP 7: Security: Ensure data security and privacy.
STEP 8: Integration: Check for compatibility with existing tools.
STEP 9: Testing and Feedback: Pilot testing and gather feedback.
STEP 10: Scalability: Ensure the platform can grow with your team.

Exploring different open-source collaborative interface Platform:

12
 Program Output& Viva Total
(3) Result (4) (10)
(3)

RESULT:
.

13
EX.NO: 06 HANDS ON DESIGN THINKING PROCESS FOR A NEW
DATE: PRODUCT

AIM:

PROCEDURE:
Empathize: Begin by conducting user research and interviews to gain insights into potential user
needs and pain points related to smartphone usage.
Define: Analyze the gathered information to define a clear and specific problem statement. For
example, "Users need a more efficient way to track their daily fitness activities."
Ideate: Organize brainstorming sessions with a diverse team to generate a wide range of creative
solutions. Encourage free thinking and open collaboration.
Prototype: Create a low-fidelity prototype of the smartphone app. This can be a paper sketch or a
digital wireframe that represents the app's basic functionality.
Test: Conduct user testing sessions with a small group of potential users. Observe how they interact
with the prototype and gather feedback.
Iterate: Based on user feedback, refine the prototype and make necessary improvements to address
user concerns or suggestions.
Prototype (Again):Create a more advanced prototype, closer to the final product. It should incorporate
the changes and improvements identified during the initial testing phase.
Test (Again):Conduct another round of user testing, this time with a larger group of users. Gather data
on usability, functionality, and overall user experience.
Refine: Analyze the results of the second testing phase and make further refinements to the app design
and functionality.
Implement: Develop the final version of the smartphone app, incorporating all the changes and
improvements identified during the design thinking process.
Test (Final Testing):Conduct thorough testing of the fully developed app to ensure it's bug-free and
ready for launch.
Launch: Release the app to the target market, accompanied by marketing and promotion efforts.

14
Example:
Let's say the team is designing a fitness tracking app. During the "Empathize" phase, they conduct
interviews and surveys with potential users, discovering that users find it challenging to keep track of
their daily physical activities. In the "Define" phase, they define the problem as "Users need a more
efficient way to track their daily fitness activities."

In the "Ideate" phase, the team generates multiple ideas, including features like GPS tracking, step
counting, and customizable fitness goals. They create a low-fidelity prototype that represents these
features. In the first round of user testing, they observe that users have difficulty navigating the app.

After gathering feedback and identifying navigation issues, the team iterates by redesigning the user
interface to improve user experience. They create an advanced prototype with a more intuitive interface
and test it with a larger group of users in the second round of testing.
Based on this testing, the team further refines the app, making sure it's user-friendly, bug-free, and
meets the needs of the target audience. Finally, they implement and launch the fitness tracking app to
help users easily track their daily activities.

Program Output& Viva Total

(3) Result (4) (10)
(3)

RESULT:

15
EX.NO: 07 BRAINSTORMING FEATURE FOR PROPOSED
DATE: PRODUCT

AIM:

PROCEDURE:
Understand the Product Concept:
Begin by thoroughly understanding the proposed product's concept, its target audience, and its unique
selling points.

Gather a Diverse Team:

Assemble a cross-functional team with members from various departments (e.g., product development,
marketing, design) to bring different perspectives to the brainstorming session.

Set Clear Objectives:

Define clear objectives for the brainstorming session. What problems should the new features solve?
What goals should they achieve?

Warm-Up and Icebreaker:

Start the session with a warm-up or icebreaker activity to encourage creative thinking and open
communication within the team.

Idea Generation:
Allow team members to freely brainstorm feature ideas. Encourage a "no idea is a bad idea" mindset.
Use techniques like mind mapping, brainstorming software, or post-it notes on a whiteboard to
record ideas.
Categorize and Prioritize:
Group similar ideas together, and prioritize them based on factors like feasibility, potential impact, and
alignment with the product concept.

SWOT Analysis:
Conduct a SWOT (Strengths, Weaknesses, Opportunities, Threats) analysis for each feature idea to
evaluate its potential in the market.

16
Feasibility Assessment:
Assess the technical, financial, and resource feasibility of implementing the proposed features.

Market Research:
Conduct market research to identify user preferences and gather insights that can inform feature
development.

Prototype and User Testing:

Create prototypes or mockups of the proposed features and conduct user testing to gather feedback and
refine the ideas.

Cost-Benefit Analysis:
Evaluate the expected cost of development against the projected benefits, such as increased user
engagement, retention, or revenue.

Risk Assessment:
Identify potential risks associated with each feature and develop
mitigation strategies.

Finalize Feature Set:

Based on the assessment, finalize the set of features to be included in theproduct. Ensure they align with
the product's vision and goals.

Example:
Suppose a software company is developing a new mobile messaging app. During the brainstorming
session, the team generates a wide range of feature ideas, including:
End-to-End Encryption: To ensure user privacy and data security.
Message Scheduling: Allowing users to schedule messages to be sent at a specific time.
Reaction Emojis: A feature that lets users react to messages with emojis for more expressive
communication.
Dark Mode: A night-friendly theme for the app.

Polls and Surveys: Integration of polls and surveys within the chat for easy decision-making.
Auto-Translate: Real-time language translation for international communication.

17
 Program Output& Viva Total
(3) Result (4) (10)
(3)

RESULT

18
EX.NO: 08 DEFINING THE LOOK AND FEEL OF THE NEW PROJECT
DATE:

AIM:

PROCEDURE:

Project Goal Assessment:

Understand the project's objectives, target audience, and scope. This sets the foundation for
design decisions.

Research and Inspiration:

Gather inspiration from existing designs and industry trends. Create mood boards or design
boards to collect visual references.

Define Design Principles:

Determine the core design principles that will guide the project's look and feel. These could
include simplicity, consistency, accessibility, and branding.

Wireframing and Prototyping:

Create wireframes or low-fidelity prototypes to plan the layout and structure of the user interface.
Use tools like Figma, Sketch, or Adobe XD for digital projects.

Visual Design:
Develop a color palette, typography choices, and graphic elements (icons, images, logos) that
reflect the project's identity. Create high-fidelity designs using design software.
User Interaction Design:
Define user interactions and behaviors, including animations, transitions, and micro-
interactions. Ensure a smooth and intuitive user experience.

Responsive Design:
Adapt the design to various screen sizes and devices, focusing on mobile responsiveness.

Accessibility and Usability Testing:

Evaluate the design for accessibility, ensuring it's usable by individuals with disabilities.
Conduct usability testing with potential users to gather feedback.

19
 Iteration and Feedback:
Refine the design based on feedback from users and stakeholders.

Documentation:
Create design documentation that includes guidelines for developers to implement the design.
Example:
Imagine you're tasked with defining the look and feel of a new e- commerce website. You go
through the following steps:

Assess the project's goal: To create a user-friendly, visually appealing online store. Research
e-commerce design trends and competitor websites.

Define design principles:

Simplicity, trustworthiness, and a focus on the product. Create wireframes for key pages like the
homepage, product listing, and product detail pages. Develop a color palette featuring subtle,
trust-inducing colors.

Program Output& Viva Total

(3) Result (4) (10)
(3)

RESULT:

20
EX.NO: 09 CREATE A SAMPLE PATTERN LIBRARY FOR THAT
DATE: PRODUCT

AIM:

PROCEDURE:
Define the Scope:
Identify the product for which you are creating the Pattern Library. Understand the product's target
audience, brand identity, and design goals.

Gather Inspiration:
Research existing UI designs, competitor products, and design trends to gather inspiration. This will
help you create a mood board that captures the desired aesthetics.

Create Mood Boards:

Using design software or tools like Adobe XD or Figma, create mood boards that reflect the desired
visual style, mood, and tone of the product. Include images, colors, typography samples, and other
visual elements that represent the brand and design principles.

Choose Fonts:
Select fonts that align with the product's brand and design goals. Consider readability, hierarchy, and
scalability. Choose a primary font for headings and body text, and possibly secondary fonts for
accents.

Define Color Palette:

Create a color palette that includes primary, secondary, and accent colors. Ensure the colors are
harmonious and comply with accessibility guidelines. Provide color codes (hex, RGB, or HSL) for
each color.

Document UI Principles:
Document the UI design principles that underpin the Pattern Library. This may include guidelines on
spacing, layout, typography, and interaction behaviors.

Organize and Label:

Organize the Pattern Library in a clear and accessible manner. Label each component, color, and
typography choice, and provide context or usage guidelines.

21
Mockup Example Screens:
Create example screens or wireframes using the fonts, colors, and components defined in the Pattern
Library. These screens should showcase the design principles in action.

Test and Refine:

Share the Pattern Library with designers, stakeholders, or users for feedback. Make refinements based
on the feedback to ensure it aligns with the project's goals.

Maintenance and Version Control:

As the product evolves, maintain and update the Pattern Library to reflect any design changes. Use
version control systems to keep track of changes and updates
Example:
Let's say you're creating a Pattern Library for a mobile app focused on wellness and meditation. The
aim is to create a soothing and user-friendly design that promotes relaxation. Here's a simplified
example:

Mood Board: Create a mood board with images of serene landscapes, calming color schemes (e.g.,
blues and greens), and sample UI elements that convey a sense of tranquility.

Fonts: Choose "Poppins" as the primary font for headings and "Roboto" for body text. These fonts
are clean, readable, and complement the app's aesthetic.

22
 Program Output& Viva Total
(3) Result (4) (10)
(3)

RESULT:

23
EX.NO: 10 IDENTIFY A CUSTOMER PROBLEM TO SOLVE
DATE:

AIM:

PROCEDURE:
Customer Segmentation:
Begin by segmenting your customer base into different groups based on demographics,
behavior, or other relevant criteria.

Data Collection:
Gather data from these customer segments through surveys, interviews, feedback forms, and
analytics tools. You can also utilize data from your customer support system, website, or
app analytics.

Problem Identification Metrics:

Define key metrics and indicators to identify customer problems. Examples include high
bounce rates on a specific webpage, low customer satisfaction scores, or a surge in support
tickets related to a specific issue.

Data Analysis:
Analyze the collected data to identify patterns, trends, and common issues reported by
customers. Data analysis tools and techniques, such as data mining or sentiment analysis,
can be useful.

Prioritization:
Prioritize the identified problems based on their impact on customers and your business.
You can use techniques like the Moscow method (Must- haves, Should-haves, Could-haves,
Won't-haves) to prioritize.

Root Cause Analysis:

Conduct a root cause analysis for each identified problem. Understand why these issues are
occurring by delving into the underlying causes.

Solution Ideation:
Brainstorm potential solutions for the identified problems. Encourage cross-functional
teams to contribute ideas and consider how these solutions align with your business goals.

Experiment Design:
Design controlled experiments or A/B tests to validate the proposed solutions. Ensure you
have a clear hypothesis and success criteria for each experiment.

24
Implementation:
Implement the proposed solutions on a small scale to observe their impact. This might
involve website changes, process adjustments, or feature additions.

Data Collection Post-Implementation:

Continue to collect data after implementing the solutions to assess their effectiveness.
Monitor key metrics to see if they improve.

Analysis and Validation:

Analyze the post-implementation data to validate whether the proposed solutions have
effectively addressed the customer problem. Make data- driven decisions.

Feedback and Iteration:

Collect feedback from customers regarding the changes and iterate on the solutions based
on their input. Continuous improvement is key.

Example:
Let's say you're running an e-commerce platform and want to identify a customer problem
related to checkout abandonment. Here's how you could apply the

algorithm/procedure:
Customer Segmentation:
Segment customers based on their demographics and purchase history.

Data Collection:
Gather data through customer surveys, web analytics, and feedback forms.

Problem Identification Metrics:

One of your key metrics is the high rate of customers abandoning their shopping carts
before completing the purchase.

Data Analysis:
Analyze the data and find that a significant number of customers abandon their carts at the
payment stage.

Prioritization:
Prioritize the payment abandonment issue because it directly affects revenue.

Root Cause Analysis:

Discover that complex payment options and a lack of guest checkout are causing the
problem.

Solution Ideation:
Brainstorm solutions, including simplifying payment options and adding a guest checkout
feature.

25
 Experiment Design:
Design A/B tests to measure the impact of these changes on cart abandonment rates.

Implementation:
Implement the proposed solutions on a small scale for testing.

Data Collection Post-Implementation:

Collect data on cart abandonment rates after the changes are
implemented.

Analysis and Validation:

Analyze the post-implementation data and find that cart abandonment rates have
significantly decreased.

Feedback and Iteration:

Collect feedback from customers who completed purchases and continue to iterate on the
checkout process to further enhance the customer experience and address any remaining
issues.

Program Output& Viva Total

(3) Result (4) (10)
(3)

RESULT:

26
EX.NO: 11 CONDUCT END-TO-END USER RESEARCH - USER RESEARCH,
CREATING PERSONAS, IDEATION PROCESS, FLOW DIAGRAMS,
DATE:
FLOW MAPPING

AIM :

PROCEDURE :
Define the Problem:
Clearly define the problem or challenge you want to address through this user-centered
design process.
User Research:
Conduct user interviews, surveys, or observations to gather insights and data about the target
users. Analyze the collected data to identify user needs, pain points, and behaviors.
Create Personas:
Based on the research findings, create user personas. Personas are fictional representations of
your typical users, including their goals, needs, and characteristics.
Ideation:
Brainstorm creative ideas to address the identified problems and fulfill user needs.Develop user
stories and scenarios to articulate how users will interact with the proposed solution.
User Stories:
Create user stories using the "As a [type of user], I want [an action] so that [benefit/value]"
format.User stories should capture specific user tasks and their motivations.
Scenarios:
Develop detailed narratives (scenarios) that illustrate how users will use the solution to achieve
their goals.Scenarios should provide context, user actions, and expected outcomes.
Flow Diagrams:
Create flow diagrams to visualize the user's journey through the solution.
Use symbols and arrows to represent user actions, system responses, and transitions between
different screens or stages.
Flow Mapping:

27
 Develop flow maps to provide a holistic view of the user experience.Connect user stories and
scenarios to specific steps in the flow, highlighting decision points and potential pain points.
Iterate and Test:
Review and refine your user stories, scenarios, flow diagrams, and flow maps based on
feedback from stakeholders or potential users.Conduct usability testing to validate the proposed
user experience.
Implementation:
Work with developers and designers to implement the user-centered solution based on the finalized
flow and design.
Evaluation:
After the solution is implemented, evaluate its effectiveness by gathering user feedback and
monitoring key performance metrics.
Iterate and Improve:
Continuously iterate on the design and user experience based on user feedback and changing needs.
Design:
Flow Diagram:

28
 User Personas:

Flow Mapping:

Program Output& Viva Total

(3) Result (4) (10)
(3)

RESULT:

29
EX.NO: 12 SKETCH, DESIGN WITH POPULAR TOOL AND BUILD A
PROTOTYPE AND PERFORM USABILITY TESTING AND
DATE:
IDENTIFY IMPROVEMENTS

AIM:

PROCEDURE:
Define Objectives and User Persona:
Define the objectives of the task management app.
Create a user persona to represent the target audience.

Sketch and Wireframe:

Start with sketching the basic layout and functionality of the app on paper or
digitally.Create low-fidelity wireframes to visualize the app's structure and layout.

Design with a Popular Tool:

Choose a popular design tool such as Adobe XD, Sketch, Figma, or InVision. Create
high-fidelity designs with attention to visual elements, typography, and color
schemes.Implement the user interface (UI) based on best practices and your user
persona's preferences.

Prototype Creation:
Use the design tool to create interactive prototypes with clickable elements and
transitions.Ensure that the prototype represents the app's core functionalities.

Recruit Participants for Usability Testing:

Identify potential users or participants who match the user persona. Prepare a usability testing
plan, including tasks to be performed within the prototype.

Usability Testing:
Conduct usability testing sessions with participants. The participants are asked to perform
specific tasks within the prototype. Observe and record their interactions and gather feedback
on their experience.

Analyze and Identify Improvements:

Analyze the usability testing data to identify pain points and areas of improvement.Look for
common patterns and issues encountered by users.

30
 Iterate on the Design:
Implement the necessary design improvements based on the feedback received.Make changes
to the prototype to address identified issues.

Second Round of Usability Testing:

Conduct a second round of usability testing with new or the same participants to evaluate the
impact of the design improvements.

Finalize the Prototype:

Make any final adjustments based on the results of the second usability testing round.

Document Findings and Recommendations:

Document the findings from both rounds of usability testing.
Provide clear recommendations for further improvements or development.

Conclusion:
Conclude the experiment by summarizing the improvements made to the prototype and how
they enhance the user experience.

DESIGN:

Program Output& Viva Total

(3) Result (4) (10)
(3)

RESULT:

31