Ccs370-Ui and Ux Record

DEPARTMENT ARTIFICIAL INTELLIGENCE AND DATA SCIENCE
ENGINEERING
PRACTICAL RECORD WORK
CCS370 - UI AND UX DESIGN
SEMESTER-V
Name of the Student : ………………………………………………
Register Number : ………………………………………………

BONAFIDE CERTIFICATE
Certified that this is a record work done for CCS370 - UI AND UX DESIGN
Selvan/Selvi .………………………….……… with register No ………………………………..
Studying in the fifth semester B.Tech (Department Artificial Intelligence and Data Science
Engineering) in SARDAR RAJA COLLEGE OF ENGINEERING, during the academic year
2024-2025.
Staff Incharge Head of the Department
Submitted for the Anna University Practical examination held at SARDAR RAJA
COLLEGE OF ENGINEERING on………………………
INTERNAL EXAMINER EXTERNAL EXAMINER

INDEX
Ex.No DATE LIST OF EXPERIMENTS P.No SIGNATURE

Ex.No DATE LIST OF EXPERIMENTS P.No SIGNATURE
DESIGN A RESPONSIVE LAYOUT FOR AN SOCIETAL APPLICATION
RESUME BUILDING
EX.NO.1
DATE:
AIM:
ALGORITHM:
SOURCE CODE:
index.html:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Resume website using html css</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="img-area">
<img src="image.jpg" alt="candiateimage">
</div>
<h1>UI-UXLAB</h1>
<h3>Full-Stack Web Developer</h3>
</div>
<div class="main">
<div class="left">
<h2>Personal Information</h2>
<p><strong>Name:</strong> UI-UXLAB</p>
<p><strong>Age:</strong> 30</p>
<p><strong>Email:</strong> jholder@email.com</p>
<p><strong>Phone:</strong> 000 000 0000</p>
<h2>Skills</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
<li>SQL</li>
</ul>
<h2>Education</h2>
<h3>B.Sc in Computer Science</h3>
<p>University of XYZ, 2014-2018</p> <br>
<h3>M.Sc in Computer Science</h3>
<p>University of XYZ, 2019-2020</p>
</div>
<div class="right">
<h2>Work Experience</h2>
<h3>XYZ Company</h3>
<p><strong>Position:</strong> Software Developer</p>
<p><strong>Duration:</strong> 2018-2022</p>
<ul>
<li>Developed and maintained web applications using React, Node.js, and SQL</li>
<li>Implemented responsive design using CSS flexbox and media
queries</li>
<li>Collaborated with cross-functional teams to deliver high-quality software
products</li>
</ul> <br>
<h3>ABC Company</h3>
<p><strong>Position:</strong> Web Developer</p>
<p><strong>Duration:</strong> 2016-2018</p>
<ul>
<li>Created and maintained websites using HTML, CSS, and
JavaScript</li>
<li>Optimized website performance and user experience using best practices</li>
<li>Worked with clients to understand their needs and deliver custom solutions</li>
</ul>
</div>
</div>
</div>
</body>
</html>
styles.css
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
background: #00b6c4;
}
.container {
background: #f5f5f5;
max-width: 800px;
margin: 60px auto;
height: 1250px;
padding: 20px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.header {
text-align: center;
}
.header h1 {
margin-bottom: 10px;
}
.header h3 {
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
}
.img-area {
width: 200px; height:
200px; border-radius:
50%; overflow:
hidden; margin: 25px
auto;
border: 15px groove deepskyblue;
}
.img-area img {
width: 100%;
}
.main {
display: flex; flex-
wrap: wrap;
}
.left {
flex: 1; padding:
30px;
}
.left p {
line-height: 2;
}
.left ul li {
line-height: 2;
}
h2 {
background: #00b6c4; padding:
15px;
color: #fff;
margin: 30px 0;
font-size: 20px;
border-radius: 0 50px 50px 0;
}
.right {
flex: 1; padding:
30px;
}
.right h3 {
margin-bottom: 15px;
}
.right p {
line-height: 2.9;
}
.right ul li {
line-height: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.container {
width: 95%; height:
auto;
}
h2 {
font-size: 18px;
}
}
@media screen and (max-width: 600px) {

.main {
flex-direction: column;
}
.left, .right {
flex: none;
width: 100%;
}
.container {
width: 95%; height:
auto;
}
h2 {
font-size: 15px;
}
}
OUTPUT:
NOTE: USE GOOLGE CHROME RESUME
DISPLAY IN WEB LAYOUT

RESUME DISPLAY IN RESPONSIVE LAYOUT
RESULT:
EXPLORING VARIOUS UI INTERACTION PATTERNS-BREADCRUMBS
EX.NO.2a
DATE:
BREADCRUMBS
When users are moving through a multilevel website, occasions often arise where they would
benefit from being able to retrace their steps. Breadcrumbs form a design pattern that satisfies the
user’s needs by representing each visited level in the site hierarchy with a link, allowing users to
jump to a particular page of contents or options instantly.
AIM:
To Explore various UI Interaction patterns like Breadcrumbs using Figma.
TOOL USED FOR DESIGN: Figma
PROTOTYPE MODEL:
PROCEDURE:
1. Choose Text, click and Type Button. Set the font style, size.
2. Then make Button as component.
3. Create variant of Button using Add variant option and set the name of variant as
Hover by changing the property name.
4. Change the name of property as state with two values Default and Hover.
5. Change the visual behaviour of Default state by changing opacity.
6. Set the layout of Text in both the Buttons to auto layout by pressing Shift + A.
7. Select the Text inside the Button component of both variants, select all matching layers
options, then select content -> create text property ->text -> create property.
8. Set the interaction of both variants of button component by selecting prototype -> connect
both variants inside button component -> Interaction details–> while hovering select smart animate
-> ease out -> 100ms
9. Use pen tool and draw an arrow and use it as divider.
10. Select->arrow->add auto layout-> make as a component and name it as divider
11. Go to assets->select instance of button and divider, select both button and divider and
press auto layout using shift A.
12. Select button and divider inside the frame and duplicate it for four times(as needed).
Reorganize as button followed by divider.
13. Change appearance of divider by changing the opacity.
14. Select the frame and turn into a component and rename it as Breadcrumbs.
15. Use component properties to enable and disable various levels of

Breadcrumb components. Select divider and button at the end level (level 5)
under -> layer ->create Boolean value -> show L5. Do the same for other levels of Breadcrumb.
16. Change text of first button to Home, other buttons as level 2,…. etc
17. Select Breadcrumbs – Go to properties -> Press + icon -> Nested

instances -> check all buttons.
18. Create test frame of size 1000*600.
19. Go to assets, use instance of breadcrumbs component in the test frame.
20. Customize names of various levels like website.com > Electronics >
Smartphones > IPhones > IPhone 13 pro.
21. Duplicate the instances as needed and hide various levels as per your
requirement. Duplicate the frames as per your need.
22. Set up the prototype and set up the interactions between the frames as needed.
23. Inside each frame give navigation labels and set up necessary interaction. Run the
prototype to see the design.
24. To convert design to HTML and CSS, Go plugins and select Figma to HTML and
CSS.
25. Copy and save the code that is displayed.

OUTPUT:
RESULT:
EXPLORING VARIOUS UI INTERACTION PATTERNS -HOVER CONTROLS
EX.NO:2b
DATE:
HOVER CONTROLS – Hide nonessential information on detailed pages to let users find
relevant information more easily.
AIM:
To Explore various UI Interaction patterns like Hover controls using Figma
PROTOTYPE MODEL:
PROCEDURE:
1. Open figma design file after logging in to figma.
2. Create a frame.
3. Click Text tool and type Subscribe and set text size.
4. Add background color for button by using rectangle and set the curve radius and rename
the rectangle as Background. Arrange the Background layer below the Text in the Button.
5. Duplicate the frame.
6. Click the background layer and change the color.

7. Go to prototype, add interaction between the two frames and set navigate – while
hovering.
8. Add animation using smart animate -> ease in out 300ms.
9. Go to design, select background layer and change the fill to initial state.
10. Go to frame 2, add a circle in the center, blue color, Hover circle.
11. Go to frame 1, copy Hover circle from frame 2 to frame 1.
12. Add the properties W – 1, H – 1 of circle, center align H, W, change fill to 0% opacity.
13. Run the prototype to see the Hover effect.

OUTPUT:
RESULT:
DEVELOPING AN INTERFACE WITH PROPER UI STYLE GUIDES
(DEVELOPING AN INTERFACE FOR LOGIN FORM USING FIGMA)
EX.NO:3a
DATE:
AIM:
To develop an interface for Login form using Figma
PROTOTYPE MODEL:
PROCEDURE:
1. Login to Figma and open a new design file
2. Drag and drop a frame of needed size
3. Draw a Rectangle using shapes from the figma menu interface.
4. Run the plugin such as Unsplash from figma to and use any background for the rectangle
shape if necessary.
5. Using Text tool design the login form with necessary text such as title as
login,username,password, login button as shown in the prototype design .
6. Set the necessary properties such as font size ,font style,color as per your need.
7. Run the prototype to see your design

OUTPUT:
RESULT:
DEVELOPING AN INTERFACE WITH PROPER UI STYLE GUIDES (DESIGN OF
BUTTON USING UI STYLE GUIDE)
EX.NO:3b
DATE:
AIM:
To design an interface for creating a button in Figma using UI style guide
PROTOTYPE MODEL:
PROCEDURE:
1. Login to Figma account and open design file
2. Select frame of size A4 and design the style guide as per the requirements of the
design by including color palette, color shades, typography ,text size as shown in the
prototype model
3. Drag and drop a frame and include a rectangle shape and include the text using text
tool inside the rectangle
4. Select the color palette color and shades, text styles ,font ,text sizes in style guide and
add them to the libraries in the by clicking add to libraries and defining the user defined names
and add the style guide elements by using text ,fill ,stroke properties in the right side of the
Figma interface
5. Then in the designed button apply the style guide elements added to libraries to
see the application style guide
6. Run the Prototype to see the interface

OUTPUT:
RESULT:
DEVELOPING WIREFLOW DIAGRAM FOR MOBILE BANKING APPLICATION
EX.NO:4
DATE:
What is a Wireflow or screenflow?
A screen flow (or wireflow) brings together a multi-screen layout, connected like a flowchart to
map out a customer ‘s decision-making points and movements from start to end.
 Wireframes on their own lack context for what an interactive, page-by-page user flow
could look like.
 UX flows on their own are more abstract and can‘t show what your customer is actually
looking at.
Wireflows, or screen flows, combine the strengths of both methods and help to make a case for
how what the user sees makes a high impact on how they experience your product or service.
When to use Screen Flows
Wireframes help UX and product teams think of a customer journey as a full flow instead of a set
of screens. The wireflow or screen flow focuses on the screens themselves and the customer's
interaction with your service or product.
 Make sure there are no missing scenarios: with an end-to-end journey mapped out, you
can consider all the potential use cases that apply to the customer‘s needs.
 Improve user interactions: get to know your customer through every opportunity in the
flow, such as sign-ups, confirmations, or popups.
 Create better cross-functional communication: bring designers and developers together,
encouraging them to think about the whole experience rather than separate screens.
 Engage in stakeholder education: if clients or teams have never considered what the
customer sees when moving through your product or experience, following a flow helps
build empathy for customer pain points.
PROCEDURE:
Create your own Screen Flow
Making your own screen flow is easy. Miro‘s virtual collaboration platform provides the perfect
canvas to create and share them. Get started by selecting the Screen Flow Template, then take the
following steps to make one of your own.
1. Define your user story

Before you start mapping out a visual sequence, describe your user needs and pain points to be
solved. This is your foundation to set up a starting point for your screen flow.
2. Decide what your key screens will show

Think through your start and endpoints in the journey.
3. Connect the screens

Add and move arrows between each screen to move the user forward through the task, using
Miro‘s Connection Line tool. You can also include decision points and show what happens in
every available instance to the user.
4. Share your screen flow with your team or stakeholders for feedback
You can use Miro‘s Mention feature to tag your team or individual people for quick feedback
rounds, design critiques, or reviews before live workshop sessions with clients.
AIM:
To develop wireflow diagram for mobile banking application using miro
TOOL USED: Miro
TEMPLATE USED: Miro Screenflow Template
SCENARIO USED: Mobile Banking Application

OUTPUT:
RESULT:
EXPLORING VARIOUS OPEN SOURCE COLLABORATIVE INTERFACE PLATFORM
EX.NO.5
DATE:
AIM:
To explore various collaborative interface platforms
Overview of UX And UI Design Tools
UI/UX design tools are specialized software applications that help designers create, modify, and
explore user interfaces and user experiences. They encompass a broad range of functionalities,
from sketching and wireframing to prototyping and usability testing.
Top UI and UX Design Tools in 2023
1. Figma
Figma is a cloud-based design tool known for its collaborative features. It allows multiple
designers to work on a project simultaneously, which makes it a popular choice for design
teams.
Unique Features: Figma supports advanced drawing tools, components, and real-time
collaboration. You can create interactive wireframes within the application. Figma
promotes design asset management and provides design systems that promote consistency
across designs.
Pricing Model: Figma offers a free tier for individuals. For additional features, Figma
Professional is available for $12 per editor/month, and Figma Organization is available
for $45 per editor/month.
Pros: Figma's cloud-based nature makes it accessible from any system with a browser. It
also promotes seamless collaboration between team members.
Cons: Some users report that Figma can be slower than other design tools, particularly for
larger design files.
2. Adobe XD
Adobe XD is a powerful tool for creating user interfaces and interactive prototypes. It's part of
Adobe's Creative Cloud, making integration with other Adobe tools easy.
Unique Features: XD supports voice prototyping and auto-animate features. It also provides a
repeat grid tool for duplicating design elements and integrating them with other Adobe
applications like Photoshop and Illustrator.
Pricing Model: Adobe XD is free for one shared document and 2GB of cloud storage. Paid plans
start at $9.99/month and offer unlimited shared documents and 100GB of cloud storage.
Pros: XD's integration with other Adobe tools can be a significant advantage for designers
familiar with the ecosystem.
Cons: Adobe XD lacks some advanced features, like micro-interactions and responsive resizing,
available in other design tools.
3. Sketch
Sketch is a vector graphics editor tool for macOS known for its simplicity and efficiency.
It's widely used for creating interfaces, icons, and web development.
Unique Features: Sketch provides symbols and styles for reusable components, plugins
for extended functionality, and shared libraries for team collaboration.
Pricing Model: Sketch costs $99 annually, with a free trial available. The license includes
updates for one year, and you can continue to use the last version you downloaded even
after the license expires.
Pros: Sketch's extensive plugin ecosystem offers a highly customizable design experience.
Cons: Sketch app is only available for macOS, which limits its use to designers who work
on different operating systems.
4. InVision
InVision is a comprehensive tool for designing and prototyping user interfaces. It's part of
the InVision suite of tools, including InVision Cloud, for collaboration and feedback.
Unique Features: Studio offers responsive design, rapid prototyping, and advanced
animations. It also integrates with InVision Cloud for sharing and gathering feedback on
designs.
Pricing Model: InVision Studio is free to use. Other InVision tools, such as InVision
Cloud, offer both free and paid plans starting at $7.95 per month.
Pros: InVision Studio's prototyping features and seamless integration with InVision Cloud
make it a robust tool for both design and collaboration.
Cons: Some users find InVision Studio less intuitive than other design tools and may
require a steeper learning curve.
5. Axure RP
Axure RP is a comprehensive tool for wireframing, prototyping, and documenting design

projects. It's known for its detailed specifications, documentation capabilities, and
dynamic, conditional interactions.
Unique Features: Axure RP allows designers to create highly interactive and dynamic
prototypes with conditional logic, variables, and adaptive views. It also supports
collaborative editing and automated specification documentation.
Pricing Model: Axure RP offers a 30-day free trial. After that, the pricing starts at $25 per
user/month for the pro edition and $42 per user/month for the team edition.
Pros: Axure RP's advanced interaction features make it ideal for complex projects and
detailed prototyping.
Cons: With its many features, Axure RP can be overwhelming for beginners and might
require more time to master.
1. Miro
What is Miro?
Miro (previously known as RealtimeBoard) brands itself as a digital whiteboard that makes it
easy to collaborate with others. The software allows you to create notes and designs, move
things around, and communicate through embedded video calls or online chats. The tool also
comes with a series of pre-built templates that can inspire or serve as a starting place for your own
project work. Some common uses of Miro include:
 Creating a list of ideas or topics to focus on for an important project

 Developing a user story or customer journey map
 Wireframing a new product concept or idea
 Laying out a roadmap or strategy for an innovation workshop or program
 Running a more engaging or innovative meeting for your team in an agile culture
Miro Free Plan and Miro Pricing Options
Miro provides with the free plan to learn and get comfortable with Miro and then upgraded to a
more professional level plan.
RESULT:
HANDS ON DESIGN THINKING PROCESS
EX.NO.6
DATE:
AIM:
WHAT IS DESIGN THINKING?
The design thinking process is the foundation of a lot of innovation and ground breaking products
and designs. Design thinking is more than just a way of generating and executing ideas; it‘s a
productive force for growth.
1. Empathize
Underpinning the whole design thinking process is empathy. Without it, you‘ll have nowhere to
channel all your creative energy and ideas. Empathy is the link between you and your customers,
and it‘s essential for driving user-focused product development.
How to put design thinking into action with Miro
Miro‘s design thinking templates provide pre-made frameworks for various creative processes
Miro‘s design thinking templates provide the perfect framework for the creative process,
To replicate the results from templates, follow these steps:
Step 1: Gather all of the relevant resources that pertain to the project at hand. This could include
anything from market research for your new product to a description of your ideal buyer persona.
Step 2: Get started by selecting the template that aligns best with your goals. If you‘re creating
an ad, the storyboard template can help you develop your narrative. If you‘re looking for a visual
representation of all the tasks on your company‘s to-do list, try the ‗Jobs to be Done‘ template.
Step 3: Assemble your A-team and start working on your most pressing tasks. Use the template
as a canvas, guiding the creative process and allowing effective collaboration and feedback.
PROCEDURE:
1. Click try miro for free and sign up using google account.
2. After login the following screen appears
What is an empathy map?
Empathy maps are visualization tools that allow you to articulate what you know about specific
types of users.
The 4 elements of an empathy map
Empathy maps are divided up into four quadrants.
 Says
The Says quadrant records what a user says during an interview. Try to capture exact quotes, such
as, ―I use this product every day because it helps me streamline my workflow.
 Thinks
In contrast, the Thinks quadrant summarizes what the user is thinking throughout the experience.
Based on your qualitative research, ask yourself what occupies the user‘s thoughts, what matters
to them, and what challenges they‘re facing. The key here is to uncover the things they might be
too shy or reluctant to share. For example, this feature is really irritating.
 Does
Like the name implies, the Does quadrant captures the actions the user takes. For example, if you
‘re watching a user interact with a product, you could record the following: ―Keeps refreshing
the page.‖
 Feels
The Feels quadrant records user emotions. What worries them? What excites them? For example,
―The user is excited about the price point. The user is worried that this is too hard to use.
3. For empathize phase, use empathy map template
4. Create a empathy map for buying tv in the above template by using sticky note and fill the 4
quadrants of empathy map
TOOL USED: Miro
TEMPLATE USED: Empathy Map Template
SCENARIO USED: Buying a TV

OUTPUT:
2. Define
The next stage of the process is about clearly defining the problem you‘re trying to solve. This is
only possible once you‘ve gathered data about your customers. While it may be a creative process,
design thinking should be driven by data to ensure that you never deviate from an end-user focus.
TOOL USED: Miro
TEMPLATE USED: Customer Problem Statement Template
SCENARIO USED: Defining The Reason For Customer Frustration
Use customer problem statement template for define phase of design thinking
What is a customer problem statement?
A customer problem statement outlines problems that your customers face. It helps you figure
out how your product or service will solve this problem for them.
How do you create a customer problem statement?
A strong customer problem statement should provide a detailed description of your customer‘s
current situation. Consider how they feel, the financial and emotional impact of their current
situation, and any other important details about their thoughts or feelings.
There are five quadrants in the template with different propositions. Answer each of them to
create your problem statement:
1. I am...
Who is this person? Are they a young working professional? Are they retired? Are they a CEO?
Anything that identifies your customer and what problems they might face.
2. I’m trying to...
This is where you place your customer‘s action. Do they have a financial target they want to
reach? Are they trying to live a healthier lifestyle? You need to know what they want to achieve
so you can figure out how your product or service will help them reach this goal.
3. But...
Now you need to think about what‘s stopping your customers from achieving their goals. Do they
have a restricted budget? Are they struggling to prioritize their spending? Whatever it is, figure it
out so you can better understand their challenges.
4. Because...
This is the root cause of their problem. If they‘re struggling to prioritize their spending, what‘s
the reason behind it? Find out the cause of the impediment to better understand how they‘re
feeling.
5. Which makes me feel...
As a result of all the previous points, your customer feels a certain way. This is where you can
fully address how your product or service will solve this problem for them. Will you offer your
product at a discounted price? Or provide additional services? You‘ll be able to figure out the best
course of action with this statement.
6. Use the above template to define the problem statement

OUTPUT:
3. Ideate
The ideation stage of the design thinking process will be guided by a foundational empathy for
the customer‘s problems and a clear definition of the problem
TOOL USED: Miro
TEMPLATE USED: Brainwriting Template
SCENARIO USED: Improve mobile app for gym members delightful experience
What is brainwriting?
Brainwriting is an idea generation method. Instead of asking participants to yell out lots of ideas
during your brainstorming session, the brainwriting technique involves writing them down
Here‘s how it works:
The first person in the group writes their idea down on a sticky note. Then it‘s
someone else‘s turn.
They add their idea to another sticky note, but it can‘t be the same as the idea that‘s already been
written.
The group repeats the process for 10–15 minutes. The group
reviews all the ideas and discusses them.
What is a brainwriting template?

A brainwriting template is a structure that teams can use during the brainwriting process. The
format can be different depending on the template you use.
How to run a brainstorming session with the Brainwriting Template
Step 1: Add participants names.
Step 2: Introduce the problem.
Step 3: Start writing
Step 4: Move things along Step 5:
Wrap things up.
OUTPUT:
4. Prototype
A prototype is a live mockup of your product. Building a prototype helps define the structure,
user flow, and navigational details (such as buttons and menus) of a website or app without
committing to final details, like visual design.
Prototyping by using a click-through model allows you to test your user experience of your
product or service as close to the real thing as possible.
When to use the prototype template

Teams use prototypes to learn more about their users in the prototyping and testing stages of the
design process. These two stages involve experimenting and creating scaled-down versions of a
product or service and then testing them, to refine the best possible solutions.
Create your own prototype

Prototyping is a quick and easy way to gain valuable user insights. To stay on track, remember
what you‘re testing for, and build your prototype with user needs in mind. Making your own
prototype is simple with Miro's prototype template.
To get started:
1. Define your design concept

Pick an idea with your team to develop further. Consider storyboarding. Gain a big-picture
understanding of how it works, and even better, explain it to your team.
2. Plan out the user flow

You can now start to map out possible user interactions with your product or service, and the
connections the user would make between them. The planning phase for your prototype is also
the time to ask questions: what interactions are possible? Where does the product or service start
and end for the user? What questions is the user trying to answer? What assumptions are you
making, and wanting to test?
3. Create and connect all your screens

Wireframe all your main interaction screens. Add in navigational elements like menus, buttons,
symbols, and images. By following the mind map you made, start making elements interactive
by introducing links, hotspots, scrolling capabilities, and endpoints. You can test your prototype
by switching to presentation mode or exporting a PDF file.
4. Share with users and stakeholders
Run usability tests with users who have the problem you are trying to solve. As you learn and
iterate, create concise notes that can be shared with your business stakeholders for early feedback.
This documents your learning for internal purposes, and tracks your progress to help you meet
your business goals!
Use the prototype template from miro tool. Customize and edit the details as per your requirement
TOOL USED: Miro
TEMPLATE USED: Miro Prototype Template
SCENARIO USED: Prototype Of Ecommerce Website

OUTPUT
5. Test
Once you have a product that you‘re happy satisfies the problem you defined, carry out quality
management to diagnose any potential design flaws that could negatively impact its release.
TOOL USED: Miro
TEMPLATE USED: Usability Testing Template From Miroverse

SCENARIO USED: User Testing of online shopping website
OUTPUT:
RESULT:
BRAINSTORMING FOR PRODUCT SHIPMENT DELAY
EX.NO.7
DATE:
AIM:
Definition of brainstorming
Brainstorming is a creative thinking technique for coming up with new ideas and solving
problems. Teams use this ideation method to encourage new ways of thinking and collectively
generate solutions.
What is the main purpose of brainstorming?
The primary purpose of a brainstorming session is to generate and document many ideas, no
matter how ―out there‖ they might seem.
Brainstorming usually takes place in a group setting where people get together to creatively solve
problems and come up with ideas.
Benefits of brainstorming:
 Encourages creativity
 Fosters collaboration and team building
 Generates innovative, revolutionary ideas
 Establishes different perspectives
 Introduces many ideas quickly
Types of brainstorming techniques:
Reverse brainstorming
In a typical brainstorming session, the group is asked to consider solutions to a problem. This
means that they will spend time thinking about the outcome — the end goal — rather than the
root of the problem — the starting point.
Random word brainstorming
One of the main goals of a brainstorming session is to come up with new ideas. One of the best
ways to do this is to say the first words that come to mind when a specific topic or subject is
mentioned. Random word brainstorming allows for exactly that.
The 5 Whys Method
Like the reverse brainstorming method, the 5 Whys method aims to look at the root causes of a
problem to stop that same issue from arising again. This method attempts to curb the problem
before it can reoccur by asking the question ―why? over and over until it can no longer be
answered.
SCAMPER model:
Using this model, your team will view a problem through 7 filters: substitute, combine, adapt,
modify, put to another use, eliminate, and reverse.
Rapid ideation
Rapid ideation brainstorming is almost the exact same thinking model as random word
brainstorming. In this method, however, everyone writes down the solutions they are thinking of
instead of shouting them out.
Starbursting
Once again, brainstorming can change based on the team‘s perspective and each session‘s
expected outcome. Starburst brainstorming focuses on getting the team to ask questions instead
of coming up with answers.
TOOL USED:Miro
TEMPLATE USED: 5 Whys Template
SCENARIO USED: Product Shipment Delay
PROCEDURE:
1. Use the 5 Whys Template Example from miro

2. 5 Whys Template Example
Step 1:
Start with the broadest possible question, then try to answer it.
Example: Why was the app late? It was late because there was a production delay.
Step 2:
Based on this answer, you can narrow the question slightly.
Example: Why was there a production delay? There was a production delay because the
engineering team had to deploy a last-minute patch, which the product team did not know about
until launch day.
Step 3:
Narrow the question even further, and then answer it.
Example: Why didn't the product team know about the patch? The product team didn't know about
the patch because engineering didn't communicate it to them.
Step 4:Keep narrowing and answering the question.
Example: Why didn't the engineering team communicate to the product team? The engineering
team didn't communicate with the product team because they did not know how to communicate
that information.
Step 5:
Ask the question one last time to zero in on your solution.
Example: Why didn't the engineering team know how to communicate with the product team?
The engineering team didn't know how to communicate to the product team because the product
team has no clear point of contact or processes for communication.
OUTPUT:
RESULT:
DEMONSTRATION OF LOOK AND FEEL OF A WEBSITE
EX.NO.8
DATE:
AIM:
To demonstrate look and feel of a website using miro for online footwear store.
A website wireframe template is a simple, effective tool that helps you arrange the visual elements
and framework for each website page, allowing you to create the best version of your prototype.
Many UX and product teams use website wireframes to align on the visual design, user flow, and
website information architecture.
TOOL USED: Miro
TEMPLATE USED: Miro website wireframe template
SCENARIO USED: Online footwear store
PROCEDURE:
• Select the website wireframe template, then take the following steps to make one of your own.
• Add the website wireframe template to your board.
• View the components glossary on the template to get a feel for how to customize for different
UI states and styles. Afterward, open the Wireframe Library and choose the elements and icons
you want to use.
• Drag and drop the elements to your wireframe on the board.
• Double-click the wireframe elements to edit and customize them as you see fit.
• Request feedback directly on the board by tagging team members in comments.
OUTPUT:
RESULT:
CREATION OF MOOD BOARD FOR E COMMERCE WEBSITE
EX.NO.9
DATE:
AIM:
Mood board
A mood board is a visual representation of concepts and ideas created using an arrangement of
images, text, and other design materials. The intention behind creating a mood board is to evoke
or represent the particular style or tone of a project. Some people think of a mood board as a
collage of smaller ideas contributing to a larger concept.
Benefits of creating a mood board
 Provide direction to designers
 Visualize abstract ideas
 See the bigger picture
 Collect and Inspire new ideas
 Consolidate different ideas
 Help maintain brand and identity consistency
Things to include in your mood board
 Images
 Color palette
 Fonts and typography
 Descriptive words
 Your values
TOOL USED: Miro
TEMPLATE USED: Miro Mood board template
SCENARIO USED: E-commerce application

PROCEDURE:
How to use Miro’s Mood Board Template
With Miro, you can select our ready-made mood board template and edit where you see fit, or
you can create your mood board from scratch. Here is how to get started:
1. Select the Mood Board Template
In the left toolbar, browse through the Templates Library and select the Mood Board Template.
Add it to your workspace.
2. Easily add files
Add any file to your mood board by either uploading from your device or via a URL. You can
also add files from other cloud services such as Google Drive and Dropbox, and many more.
3. Make it dynamic
Get inspiration from all mediums, including videos, GIFs, and memes. Miro lets you embed video
and other media files by simply copying and pasting the video link.
4. Add clickable screenshots
Use Miro Web Clipper to easily capture web page screenshots and add them to your mood board.
5. Style it and more

Miro‘s Mood Board Template is highly customizable. On the side toolbar, use the Pen tool,
Shapes, IconFinder, and many other features to add style and edits to your mood board.
6. Collaborate
Invite others to collaborate and create your mood board with you. Or, share it as an image or PDF
to post on social media or other websites.
OUTPUT:
RESULT:
IDENTIFICATION OF CUSTOMER PROBLEM TO SOLVE
(UNIVERSITY STUDENT PROBLEM IDENTIFICATION)
EX.NO.10
DATE:
AIM:
To identify the problem of university student using miro
What's a Problem Tree Template?
A Problem Tree Template is a structured visual tool designed to break down a central problem
into its main effects and the underlying causes.
Envision a tree:
 The trunk represents the core problem.

 The branches depict its direct effects.
 The roots symbolize the deep-seated reasons behind it.
By mapping out the issue in such a detailed way, people and teams can gain a comprehensive
view of their challenges. One significant benefit of using this template is that it fosters a holistic
understanding of the problem, enabling more strategic and effective solutions. This method helps
pinpoint where interventions might be most effective and encourages a more collaborative and
inclusive approach to problem-solving.
TOOL USED: Miro
TEMPLATE USED: Problem Tree Template
SCENARIO USED: University student drinking too much coffee
PROCEDURE:
How to use a Problem Tree Template in Miro
Using the Problem Tree Template in Miro is an interactive experience that brings your problem-
solving sessions to life. With the help of sticky notes, emojis, and stickers, you can dynamically
populate your tree. Here's how you can do it in four steps:
Identify the central problem: Start by placing a sticky note in the center of your board detailing
the main problem you want to tackle. This serves as the trunk of your problem tree.
Map out the effects: Above the central problem, use sticky notes to detail the direct effects or
consequences of the problem. Think of these as the branches of your tree. Feel free to use emojis
or stickers to add emphasis or to categorize.
Unearth the root causes: Below the central problem, dive deep to uncover the underlying causes
of the problem. Use sticky notes for each identified cause, and think of them as the roots of your
tree. Emojis and stickers can once again be used to visualize the intensity or type of each cause.
Connect and organize: Finally, draw lines or connectors between related effects and causes,
helping to visualize the relationships and flow between different parts of your problem tree.
OUTPUT:
RESULT:
CONDUCT END-TO-END USER RESEARCH – USER RESEARCH,
CREATING PERSONAS, USER STORIES,SCENARIOS, FLOW DIAGRAMS,
FLOW MAPPING
EX.NO.11
DATE:
AIM:
TOOL USED: Miro
PROCEDURE:
WHAT IS UX RESEARCH?
User experience research is a systematic approach to helping companies understand a user‘s

perspective. It‘s about diving deep into how people interact with a product and observing how
easily they can complete their tasks and meet their goals. Through UX research, you can discover
behaviors, needs, and motivations via observation, task analysis, and other types of user feedback.
TEMPLATE USED: Miro UX Research Plan Template
SCENARIO USED: User Problem –UI is Complex What is a UX
research plan?
When conducting usability testing or user research with a goal in mind, researchers
need to plan.
UX researchers often present their findings to stakeholders like product managers, developers,
marketers, and executives, to act on those results.
 A user research plan typically has up to seven segments:
 Background information on the project: reasons for the study and internal stakeholders
involved.
 Research goals and objectives: what your teams want to learn, or their ideal research
outcome.
 Breakdown of research participants: who they are, and how they ‘ll be recruited.
Method of research, and any other information about how the research will be
conducted.
 An interview guide or cheat sheet of instructions and questions to follow during the
session.
 A rough timeline of how long the research will take and when the team can review the
report
 Additional resources for your team, such as previous studies, scripts, or results can
inform this new round of research
Miro‘s whiteboard tool is the perfect canvas to create and share them. Get started by selecting
the UX Research Plan Template,
 Give your team or stakeholders a quick project introduction. You can hop on a video chat
with up to 25 team members and remind everyone what you‘re trying to achieve.
Remember that research proves its value when it satisfies a single objective, rather than
many. If you seem to have lots of different goals or objectives, avoid overreaching and
start fresh: what‘s the one customer problem and business problem you‘re trying to solve?
 Define the user and business problems your research needs to solve. The default sticky
notes are simply for inspiration — feel free to edit each of these to fix your own context.
If you want your team to focus on this area instead of skipping ahead, you can select the
―problem‖ frame and click the
―hide frame‖ (closed eye) icon that appears in the frame‘s menu.
 Define your research goals. Ask your team to brainstorm their top three research goals or
priorities. Remember that the best research sessions are chasing a single objective, so out
of the two to three you note down, ask your team to vote for their preferences. Try Miro‘s
Voting Plugin to help your team reach a decision.
 Draft your research questions. Pick three to five questions with your team or stakeholders
that are most important to your research. Aim for no more than 10. The more focused your
questions, the more focused your research will be.
 Link to useful supporting information as needed. Keep this plan to the point in order to
get buy-in. For stakeholders who need more detail, there may be other useful data to link
to. If you have previous UX research results or relevant studies, link to them on your Miro
Board. You can also import survey data, embed tables and charts, or link sticky notes to
external sources.
OUTPUT:
USER PERSONA
A User Persona template is a tool for representing and summarizing a target audience for your
product or service that you have researched or observed.
TEMPLATE USED: Miro User Persona Template
SCENARIO USED: User buying a product
User Persona example
To illustrate, let‘s say you want to market a movie streaming app. Based on your market
research, you learn that your app appeals to three target audiences: men under 35 interested
in sports, women under 35 interested in the outdoors, and men over 45 interested in food.
How to create a User Persona template

You can easily create a User Persona template following these three steps:
1. Purpose This step requires some prep work. Add here any relevant research and data you have
regarding your audiences. Afterward, brainstorm with your team about the purpose of building a
User Persona template. What decisions do you want to make after you know your user persona?
How will it help you?
2. Personas Here is where you will write and describe your user persona. What are their actions,
motivations, and pain points? What are their values? In what context do they find themselves?
You can copy and paste this frame as many times as you like and add as many user personas as
you need.
3. What now Reflect on your findings from previous steps and get together with your team to
find out the next steps. What does your persona profile validate? What needs to be changed or not
changed? Ask yourself these questions and define what to do next based on this information.
OUTPUT:
USER STORY MAP
What is a user story map?
User-story mapping (also known as user-story maps, story maps, and story mapping) is a lean
UX-mapping method, often practiced by Agile teams, that uses sticky notes and sketches to
outline the interactions that the team expects users to go through to complete their goals in a
digital product.
TEMPLATE USED: Miro Stick notes
SCENARIO USED: Mobile app feature for depositing checks
How to create your user story map board in Miro
1. Identify your user persona, then describe step-by-step user tasks

Group user tasks by goals or activities of the user. Expand a card to write more text and quickly
format it. Then, add valuable details by filling in due dates, assignees, tags, and links.
2. Prioritize the stories for a sprint

To edit the structure of your map, drag and drop individual cards or groups of cards, and the
template will adjust automatically. Insert sections for upcoming releases and versions. Note that
user story mapping is different from feature planning.
3. Get ready for a sprint

If you work with Jira, paste an issue URL or convert cards to Jira issues right from the board.
4. Collaborate with your team

Invite your team to contribute and work together in real-time or asynchronously. Refer to the user
story map over time as you create new product iterations, update it based on new data or findings
as users try the product.
User-story maps contain 3 main levels of actions (activities, steps, and details) that users will take
in a digital product to complete their goals.
OUTPUT:
SCENARIO MAPPING
What is scenario mapping?

Scenario mapping is the process of outlining all the steps a user will take to complete a task. It
generally includes notes about what users are thinking and feeling at each step. It can also include
comments or information you feel is important for each step, questions or assumptions you have,
and good ideas or suggestions that come up as you go through this exercise.
TEMPLATE USED: Miro Scenario mapping Template
SCENARIO USED: User buying flowers from flower shop
When should you do scenario mapping?

Scenario mapping can be used both to outline the intended or ideal scenario (what should happen)
as well as what currently happens.
How do you use the scenario mapping template?
Scenario mapping can be simple when you have a user scenario template and easy-to-follow
steps. We have a pre-made template that you can use on Miro‘s virtual collaboration platform to
do this.
1. Start by explaining the purpose of the scenario mapping session. The goal of scenario mapping
is to identify what your users will do, not how they will do it. You can sketch out the details later.
Set these expectations up front.
2. Identify one of your primary user personas and a key task that they will accomplish. What do
you want your user to do? What is their goal?
3. Contextualize the scenario. Make a note of who the persona is, what they‘re doing, why they‘re
doing it, and how often. Remember, don‘t get too bogged down in the details. But it‘s a good idea
to keep these elements in mind as you move forward.
4. Walk through each step your user might take. As a group, visualize the user‘s pathway on your
site. At each step, you‘ll want to capture the following information: What does the user do? Are
there any assumptions or question you need to resolve at this step? How can you make this step
more user-friendly?
5. Map out your steps. Most people prefer to map each step from left to right and add comments,
ideas, and suggestions below each step.
6. Repeat until the user has completed their task.
7. Gather feedback from stakeholders and potential users. Ask them to walk through each step
and see if they make sense. Is something missing? Do they have any additional thoughts or
suggestions?
OUTPUT:
FLOW DIAGRAM
What is a flowchart?
A flowchart is a graphical or symbolic representation of a process, using symbols to depict each
step. Many flowcharts contain brief descriptions of each step, with arrows linking them together
and indicating the process flow direction.
TEMPLATE USED: Miro Flowchart Template Template
SCENARIO USED: Allowing pets at office
How to create your own flowchart

 Start by selecting Miro's fully customizable Flowchart Template. Here's how to get
started:
 Decide on the process your team wants to document or illustrate.
 List the steps to complete in order to execute the process.
 Designate symbols for the various steps in the process.
 Draw your symbols and label them according to the steps they represent.
 Draw arrows to link the steps.
 Review your flowchart with stakeholders and iterate as necessary.
 You can use sticky notes or icons to make your flowchart clearer and more visually
engaging
OUTPUT:
FLOW MAPPING:
Process Mapping:
 A process map is a versatile tool that helps you visualize your workflow to improve
efficiency. It provides clarity, helps teams brainstorm ideas for process improvement,
improves internal communication, and provides process documentation.
 Creating a process map allows project managers to visualize all the contingencies of a
project and to understand dependencies when working with cross-functional teams.
Process mapping example
Swimlane diagram
A swimlane diagram is a process flowchart that displays who‘s responsible for certain parts of a
process. The diagram is split into separate rows (or lanes), with each row representing a different
team or department. Shapes in each lane represent the actions, and arrows show how the process
progresses when each action is complete.
TEMPLATE USED: Miro Swimlane Diagram Template
SCENARIO USED: Online purchase processing
How do you make a swimlane diagram?
1. Be clear about your goals

Before you start diagramming, determine your desired outcome. Remember that swimlane
flowchart templates are best for visualizing how multiple contributors or teams work through the
stages of a process.
2. Name your swimlanes and start mapping out a process

Customize the swimlane flowchart to add the name of each team member, function, or
stakeholder. Don‘t forget to include outside stakeholders, like customers or contractors.
3. Interview stakeholders to get their input

Conduct quick interviews with every stakeholder on the draft diagram to find out how their
responsibilities fit into the broader process. Add objects for each step they perform.
4. Add arrows to finish your flow mapping
Arrows show the flow of responsibilities from one step to the next. They can stay within lanes or
cross lane boundaries. Add an arrow whenever one step triggers another or makes it possible.
OUTPUT:
RESULT:
PROTOTYPE AND USABILITY TESTING FOR ONLINE GROCERY SHOP
APPLICATION
EX.NO.12
DATE:
AIM:
To build a prototype and perform usability testing and identify improvements for a online
grocery shop application
TOOL USED FOR DESIGN : Figma

Usability Testing :Using Google Form
PROTOTYPE MODEL :
PROCEDURE:
1. Login to figma and open design file

2. Using figma plugin and resources add the necessary screens for grocery shop application such
as Home screen, sign up, sign in, search, description, add to cart, profile, order confirmation
,payment, order status
3. Run the Prototype to see the output

4. Create a survey form to conduct usability testing .
5. The survey form is shown below
6. Based on usability testing ,identify the improvements for the grocery app
7. Complete the prototype and test it
8.Stop
OUTPUT:
RESULT:

Ccs370-Ui and Ux Record

Uploaded by

Copyright:

Available Formats

Ccs370-Ui and Ux Record

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ccs370-Ui and Ux Record

Uploaded by

Copyright:

Available Formats

DEPARTMENT ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

PRACTICAL RECORD WORK

CCS370 - UI AND UX DESIGN

Name of the Student : ………………………………………………

Register Number : ………………………………………………

Selvan/Selvi .………………………….……… with register No ………………………………..

Engineering) in SARDAR RAJA COLLEGE OF ENGINEERING, during the academic year

Staff Incharge Head of the Department

COLLEGE OF ENGINEERING on………………………

INTERNAL EXAMINER EXTERNAL EXAMINER

Ex.No DATE LIST OF EXPERIMENTS P.No SIGNATURE

@media screen and (max-width: 600px) {

NOTE: USE GOOLGE CHROME RESUME

DISPLAY IN WEB LAYOUT

To Explore various UI Interaction patterns like Breadcrumbs using Figma.

TOOL USED FOR DESIGN: Figma

2. Then make Button as component.

5. Change the visual behaviour of Default state by changing opacity.

10. Select->arrow->add auto layout-> make as a component and name it as divider

13. Change appearance of divider by changing the opacity.

15. Use component properties to enable and disable various levels of

17. Select Breadcrumbs – Go to properties -> Press + icon -> Nested

19. Go to assets, use instance of breadcrumbs component in the test frame.

25. Copy and save the code that is displayed.

1. Open figma design file after logging in to figma.

5. Duplicate the frame.

6. Click the background layer and change the color.

11. Go to frame 1, copy Hover circle from frame 2 to frame 1.

13. Run the prototype to see the Hover effect.

To develop an interface for Login form using Figma

TOOL USED FOR DESIGN: Figma

1. Login to Figma and open a new design file

2. Drag and drop a frame of needed size

3. Draw a Rectangle using shapes from the figma menu interface.

7. Run the prototype to see your design

To design an interface for creating a button in Figma using UI style guide

TOOL USED FOR DESIGN: Figma

1. Login to Figma account and open design file

6. Run the Prototype to see the interface

When to use Screen Flows

Create your own Screen Flow

1. Define your user story

2. Decide what your key screens will show

3. Connect the screens

TOOL USED: Miro

TEMPLATE USED: Miro Screenflow Template

SCENARIO USED: Mobile Banking Application

Overview of UX And UI Design Tools

Axure RP is a comprehensive tool for wireframing, prototyping, and documenting design

 Creating a list of ideas or topics to focus on for an important project

WHAT IS DESIGN THINKING?

How to put design thinking into action with Miro

To replicate the results from templates, follow these steps:

2. After login the following screen appears

What is an empathy map?

Empathy maps are divided up into four quadrants.

3. For empathize phase, use empathy map template

TOOL USED: Miro

TEMPLATE USED: Empathy Map Template

SCENARIO USED: Buying a TV