Scribd
Upload
97 views52 pages

CCS370 - UI & UX Record Final

RECORD

Uploaded by

sugar.dhaadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
97 views52 pages

CCS370 - UI & UX Record Final

RECORD

Uploaded by

sugar.dhaadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 52

ANNA UNIVERSITY

REGIONAL CAMPUS, COIMBATORE- 641046

LABORATORY RECORD
2024-2025

NAME : ………………………………………………

REG.NO : ………………………………………………

BRANCH :…………………………...…………………

SUBJECT CODE : ………………...……………………………

SUBJECT TITLE : …………………………………...………….

DEPARTMENT OF COMPUTER SCIENCE AND


ENGINEERING
ANNA UNIVERSITY REGIONAL
CAMPUS COIMBATORE- 641 046.
ANNA UNIVERSITY,

REGIONAL CAMPUS COIMBATORE - 641046

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BONAFIDE CERTIFICATE

Certified that this is the bonafide record of Practical done in CCS370 – UI AND

UX DESIGN LABORATORY by …………………………………………..

Register Number........................................................in the Third Year / Fifth

Semester during 2024-2025.

Staff in Charge Head of the Department

University Register No: …………………………………………………………

Submitted for the University Practical Examination held on ……………………

Internal Examiner External Examiner


INDEX
EX DATE TITLE PAGE MARKS SIGN
NO. NO.
EXPT NO : DESIGNING A RESPONSIVE LAYOUT
DATE : FOR A SOCIETAL APPLICATION

AIM :
To design responsive layout for a societal application for resume building using HTML and CSS.

ALGORITHM :
1. Open a notepad and type index.html code to get the resume home page.
2. Open a notepad and type styles.css to set the properties for the resume page.
3. Using the viewport metatag the webpage is made responsive to fit the screen size.
4. Save the necessary image along with index, styles in a single folder.
5. Display the output by opening in a web browser using desktop view and mobile view by selecting
• More tools->developer tools ->toggle device to see the responsive output in google chrome.
• By selecting More tools->responsive design mode in Mozilla Firefox.
• By selecting Settings->F12 Developer Tools->Document mode ,change mode and see
the responsiveness of the webpage.

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 and CSS</title>
<link rel="stylesheet" href="Ex1.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="img-area">
<img src="Ex1_img1.jpg" alt="candidate image">
</div>
<h1>Sidharthan S S</h1>
<h3>DL Engineer</h3>
</div>

1
<div class="main">
<div class="left">
<h2>Personal Information</h2>
<p><strong>DOB:</strong> 29/03/2005</p>
<p><strong>Age:</strong>1 9 </p>
<p><strong>Email:</strong> abc1743106@gmail.com</p>
<p><strong>Phone:</strong> 896352481 </p>
<h2>Skills</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>React, Node.js</li>
<li>SQL</li>
</ul>
<h2>Education</h2>
<h3>B.Tech Artificial Intelligence and Data Science</h3>
<p>Anna University Regional Campus Coimbatore (2022-2026)</p>
</div>
<div class="right">
<h3>Cloudzoo india softwares</h3>
<p><strong>Position:</strong>Data Analyst </p>
<p><strong>Duration:</strong> 2025-2026</p>
<ul>
<li> Analyzed large sets of data, resulting in a 20% increase in efficiency and productivity.</li>
</ul>
<h3>Lets Grow More Company</h3>
<p><strong>Position:</strong> Data Analyst</p>
<p><strong>Duration:</strong> 2026</p>
<li>Analyzed large sets of data, resulting in a 20% increase in efficiency and productivity.</li>
<li>Led the implementation of a new data analysis system, resulting in a 15% reduction in
errors and a 20% increase in data accuracy.</li>
</div>
</div>
</div>
</body>
</html>

2
styles.css :
*{
box-sizing: border-
box; margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}

body {
background: #125b60;
}
.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;
3
margin: 25px auto;
border: 15px groove deepskyblue;
}
.img-area img
{ width:
100%;
}
.main {
display:
flex;
flex-wrap: wrap;
}
.left p {
line-height: 2;
}
.left ul li {
line-height: 1;
}
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 p {
line-height: 2.9;
}.right ul li { line-height: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px)
4
{ h2 {
font-size: 18px;
}
}

5
@media screen and (max-width: 600px) {
.main {
flex-direction: column;
}
OUTPUT :

Resume display in responsive layout

RESULT :
Thus the responsive layout for a societal application for resume building using HTML and
CSS has been completed successfully.

6
EXPT NO : EXPLORING VARIOUS UI INTERACTION
DATE : PATTERNS

AIM:
To explore various Ul interactions patterns.

EXPLANATION:
User interface (UI) interaction patterns are essentially pre-designed solutions for common
problems that arise when users interact with interfaces. They're like building blocks that designers can
use to create interfaces that are familiar, easy to use, and efficient.
Here's a breakdown of what UI interaction patterns are and why they're important:
Benefits:
 Save Time and Effort: Instead of designing everything from scratch, designers can leverage
existing patterns to create usable interfaces quickly.
 Ensure Consistency: By following established patterns, interfaces become more predictable
for users, who already know how to interact with them based on past experiences with other
applications.
 Improve Usability: Well-designed patterns prioritize user needs and provide intuitive ways
to accomplish tasks.
Types of UI Interaction Patterns:
 Navigation Patterns: These patterns help users find their way around the interface,
including menus, tabs, and breadcrumbs.
 Input Patterns: These patterns allow users to provide information, such as text fields,
select boxes, and drag-and-drop functionality.
 Data Patterns: These patterns help users view and interact with data, including tables,
cards, and galleries.
 Social Patterns: These patterns facilitate communication and interaction between users,
like chat functionalities, forums, and social media features.
 Onboarding Patterns: These patterns guide new users through the interface and
its functionalities, making it easier for them to learn the ropes.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Interaction Patterns</title>
<style>
/* Add your styles here
*/ body {
font-family: Arial,

7
sans- serif; margin: 0;

8
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
.box {
width: 100px;
height:
100px;
background-color: #3498db;
color: #fff;
display: inline-
block; margin:
10px; padding:
20px; cursor:
pointer;
transition: background-color 0.3s ease;
}
.box:hover {
background-color: #2980b9;
}
.draggable-box {
width: 100px;
height: 100px;
background-color:
#e74c3c; color: #fff;
display: inline-
block; margin:
10px; padding:
20px; cursor: move;
user-select: none;
}
.droppable-area
{ width: 250px;
height: 250px;
background-color:
#2ecc71; margin: 10px;
padding: 20px;
display: inline-
block;
}
.swipe-container
{ width: 300px;
height: 150px;
overflow:
hidden; position:
relative; margin:
10px;
9
}
.swipe-content {
white-space:
nowrap;
transition: transform 0.3s ease;

10
}
.swipe-item {
display: inline-
block; width: 100px;
height: 100px;
background-color:
#f39c12; color: #fff;
margin: 10px;
padding: 20px;
cursor:
pointer;
}
.modal
{ display:
none; position:
fixed; top: 0;
display: inline-block;
}
.swipe-container
{ width: 300px;
height: 150px;
overflow:
hidden; position:
relative; margin:
10px;
}
.swipe-content {
white-space:
nowrap;
transition: transform 0.3s ease;
}
.swipe-item {
display: inline-
block; width: 100px;
height: 100px;
background-color:
#f39c12; color: #fff;
margin: 10px;
padding: 20px;
cursor:
pointer;
}
.modal
{ display:
none; position:
fixed; top: 0;
position: relative;
display: inline-
block; margin:
10px;
}
.dropdown-content
{ display: none;
11
position: absolute;
background-color: #fff;
box-shadow: 0 8px 16px
rgba(0,0,0,0.2); z-index: 1;

12
}
.dropdown:hover .dropdown-content
{ display: block;
}
.toggle-switch
{ position: relative;
display: inline-
block; width: 60px;
height: 34px;
}
.toggle-switch input
{ opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor:
pointer; top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:
#ccc; transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color:
#fff; transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color:
#2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.stepper { margin: 10px;
}
.stepper input
{ width: 50px;
text-align: center;
margin: 0 5px;
}
.progress-bar {
width: 300px;
13
height: 20px;

14
background-color:
#ccc; margin: 10px;
position: relative;
}
.progress-bar-fill {
height: 100%;
background-color:
#3498db; width: 0;
transition: width 0.3s
ease; position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="box" onclick="alert('Click/Tap Interaction')">Click/Tap</div>
<div class="draggable-box" draggable="true" ondragstart="drag(event)">Drag
Me</div>
<div class="droppable-area"
ondrop="drop(event)"
ondragover="allowDrop(event)">
Drop Here
</div>
<div class="swipe-container"
ontouchstart="handleTouchStart(event)"
ontouchmove="handleTouchMove(event)">
<div class="swipe-content">
<div class="swipe-item" onclick="alert('Swipe Interaction 1')">Swipe
1</div>
<div class="swipe-item" onclick="alert('Swipe Interaction 2')">Swipe
2</div>
<div class="swipe-item" onclick="alert('Swipe Interaction 3')">Swipe
3</div>
</div>
</div>
<div class="modal" onclick="closeModal()">
<div class="modal-content" onclick="event.stopPropagation()">
<p onclick="alert('Modal/Popup Interaction')">Modal Content</p>
</div>
</div>
<div class="tabs">
<div class="tab" onclick="showTab('tab1')">Tab 1</div>
<div class="tab" onclick="showTab('tab2')">Tab 2</div>
<div class="tab" onclick="showTab('tab3')">Tab 3</div>
</div>
<div class="tab-content" id="tab1"> <p>Tab 1 Content</p> </div>

15
OUTPUT:

RESULT:
Thus the various Ul interactions patterns are explored and studied successfully.

16
EXPT NO : DEVELOPING AN INTERFACE WITH PROPER UI
DATE : STYLE GUIDES

AIM:
To develop an User Interface with proper UI style guides.

ALGORITHM:
1. Define the Project and Goals:
 Identify the purpose of the interface: What will users be accomplishing with it?
 Target audience: Who are you designing for? Understanding their expectations is crucial.
 Platforms and devices: Will the interface be used on web, mobile, or both? Responsiveness is key
for multiple platforms.
2. Research and Inspiration:
 Competitor analysis: Look at similar interfaces and see what works well (and what doesn't).
 Style guide inspiration: Find UI style guides from established companies or design resources
for reference.
3. Establish the UI Style Guide:
 Color palette: Define a set of primary, secondary, and accent colors that work well together.
 Typography: Choose fonts for headings, body text, and buttons, considering readability
and hierarchy.
 Layout and spacing: Establish a grid system and consistent spacing between elements.
 Buttons and icons: Design standard styles for buttons, icons, and other interactive elements.
 Microinteractions: Define how elements behave on hover, click, and other user interactions.
 Accessibility: Ensure your interface adheres to WCAG accessibility guidelines for users
with disabilities.
4. Design the Interface:
 Wireframing and prototyping: Create low-fidelity wireframes to establish the basic layout and
user flow. Then, build prototypes for user testing and feedback.
 Apply the style guide: Use the established UI style guide consistently throughout the design process.
5. Iteration and Refinement:
 User testing: Get feedback from real users to identify usability issues and areas for improvement.
 Refine the design: Based on user testing, iterate on the design and make necessary adjustments.
6. Documentation and Maintenance:
 Maintain the style guide: As the project evolves, update the style guide to reflect any changes.
 Version control: Use a version control system to track changes to the style guide.

17
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Style Guide Example</title>
<style>
body {
font-family: 'Arial', sans-
serif; line-height: 1.6;
background-color:#f5f5f5;
color: #333;
margin: 0;
padding: 0;
}
/* Header Styles
*/ header {
background-color:#3498db;
color: #fff;
padding: 10px;
text-align: center;
}
/* Navigation Styles */
nav {
background-color:
#2c3e50; padding: 10px;
text-align: center;
}
nav a
{ color
: #fff;

18
text-decoration: none;
padding: 10px;
margin: 0 10px;
display: inline-block;
}
/* Main Content Styles */
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3
{ color:
#333;
}
p{
margin-bottom: 20px;
}
/* Button Styles */
.btn {
background-color:
#e74c3c; color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 3px;
display: inline-
block;
transition: background-color 0.3s ease;
}
.btn:hover {

19
background-color: #c0392b;
}
/* Form Styles
*/ form {
margin-bottom: 20px;
}
label {
display:
block;
margin-bottom: 8px;
}
input[type="text"], input[type="email"], input[type="password"]
{ width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid
#ccc; border-radius:
3px;
}
input[type="submit"] {
background-color:
#2ecc71; color: #fff;
padding: 10px
20px; border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #27ae60;
}
/* Footer Styles
*/ footer {
background-color: #34495e;

20
color: #fff;
padding: 10px;
text-align:
center; position:
fixed; bottom:
0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>UI Style Guide Example</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<h2>Main Content Heading</h2>
<p>This is a simple example of a UI style guide. Feel free to customize and
expand it based on your project requirements.</p>
<a href="#" class="btn">Call to Action</a>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

21
<input type="submit" value="Submit">
</form>
</div>
<footer>
<p>&copy; 2024 UI Style Guide Example. All rights reserved.</p>
</footer>
</body>
</html>

OUTPUT:

RESULT:
Thus an user interface with Proper UI Style Guides has been developed successfully.

22
EXPT NO : DEVELOPING WIREFLOW DIAGRAM FOR
APPLICATION USING OPEN-SOURCE
DATE : SOFTWARE

AIM:
To develop a wireflow diagram for online shopping with payment application using wireflow
software.

ALGORITHM:
Procedure:
Creating a wireflow diagram for an online shopping application with online payment involves mapping out
the user journey from start to finish, including various screens and interactions. Here's a basic wireflow
diagram outlining the typical steps a user might take:

1. Homepage
 Welcome message
 Navigation menu
 Search bar
 Featured products
2. Product Listing Page
 Grid of products
 Filter options
 Sort options
3. Product Details Page
 Product image
 Description
 Price
 Add to cart button
4. Shopping Cart
 List of added items
 Quantity adjustment
 Remove items
 Proceed to checkout button
5. Checkout Process
 Shipping information form
 Payment information form
 Order summary
 Place order button
6. Payment Gateway
 Payment options (credit/debit card, PayPal, etc.)
 Billing information
23
7. Payment Gateway
 Payment options (credit/debit card, PayPal, etc.)
 Billing information
 Security verification
8. Order Confirmation
 Confirmation message
 Order details
 Order number
 Link to track order
9. User Account
 Profile information
 Order history
 Settings
10. Logout
This wireflow diagram provides a visual representation of the user flow through various screens and
interactions within the online shopping application. Each step is interconnected, guiding the user seamlessly
from browsing products to completing a purchase and managing their account.

OUTPUT:

RESULT:
Thus the wireflow diagram for application using open-source software has been developed
successfully.

24
EXPT NO : EXPLORING VARIOUS OPEN-SOURCE
COLLABORATIVE INTERFACE
DATE :
PLATFORM

AIM:
To explore the various open-source collaborative interface platform.

EXPLANATION:
OPEN-SOURCE INTERFACE PLATFORMS:
There are various open-source platforms to design an interface. We are going to explore the few of it.
1. CANVA:
While Canva isn't the industry standard for professional UI/UX design like Figma, it can be a useful tool for
specific aspects of the design process, especially for beginners. Here's how Canva can be used in UI/UX
workflows:
Rapid Prototyping: Canva offers pre-made mobile and web app UI component templates that can be
quickly assembled into basic prototypes. This is a great way to test initial ideas and get user feedback
early on in the design process.
Design Inspiration and Mood Boards: Canva's vast library of templates and design elements can be a
source of inspiration for UI/UX designers. You can use these elements to create mood boards that
capture the overall look and feel you want for your project.
User Research and Brainstorming: Canva's collaborative whiteboard features allow designers to work
together on brainstorming sessions and user research. You can use these whiteboards to mind map ideas,
sketch out user flows, and organize research findings.
Simple UI Mock-ups: For presentations or basic mock-ups that don't require complex interactions,
Canva's drag-and-drop interface allows for quick UI creation. This can be useful for early-stage
presentations or getting buy-in from stakeholders.
Limited Functionality: Canva is not a full-fledged UI/UX design tool. It lacks features like advanced
prototyping capabilities, developer handoff tools, and design system integration.
Focus on Aesthetics: Canva excels at creating visually appealing designs. However, UI/UX design goes
beyond aesthetics and requires a focus on usability and user experience.

25
2. FIGMA:
Figma is a cloud-based design and prototyping tool that enables collaboration among teams in real-time. It is
widely used in the fields of user interface (UI) and user experience (UX) design, as well as for creating
interactive prototypes. Here are some key features and aspects of Figma:
Cloud-Based Collaboration:
Figma operates entirely in the cloud, allowing multiple users to collaborate on a design project
simultaneously. This real-time collaboration feature is particularly useful for remote teams or distributed
work environments.
Platform Independence:
Figma runs in a web browser, making it platform-independent. Users can access and work on their designs
from various operating systems, including Windows, macOS, and Linux.
Vector Editing:
Figma is equipped with robust vector editing tools, making it easy to create and edit scalable vector
graphics (SVG). This is essential for designing UI elements that need to look sharp at various screen
sizes.
Prototyping:
Figma allows designers to create interactive prototypes, enabling them to simulate user interactions and
flows. This helps in testing and validating the user experience before actual development.
Plugins:
Figma supports a wide range of plugins that extend its functionality. These plugins can help with tasks
such as design automation, data visualization, and collaboration with other tools in the design workflow.
Team Libraries:
Teams can create and maintain design systems and component libraries within Figma. This ensures
consistency across projects and allows teams to work more efficiently.

26
3. SKETCH:
Sketch is a vector graphics editor and design tool specifically created for digital design, particularly in the
realm of user interface (UI) and user experience (UX) design. It has gained widespread popularity among
designers and design teams for its focus on simplicity, efficiency,
and a streamlined workflow. Here are some key features and aspects of Sketch:
Vector Editing:
Sketch is primarily a vector-based design tool, making it well-suited for creating scalable graphics and
UI elements. Vector graphics ensure that designs remain crisp and clear at various resolutions.
Artboards:
The use of artboards in Sketch allows designers to work on multiple screens or design variations within a
single document. This is particularly useful for designing responsive interfaces for different devices.
Symbols and Shared Styles:
Sketch introduced the concept of symbols, which are reusable UI elements that can be easily replicated
and updated across multiple artboards. Shared styles enable consistent application of colors, text styles,
and other design elements.
Plugins:
Sketch supports a robust plugin ecosystem that extends its functionality. Designers can use plugins to automate
tasks, integrate with other tools, and enhance their workflow.
Export Options:
Sketch provides a variety of export options, allowing designers to export assets in different formats and
resolutions. This is essential for collaborating with developers and ensuring seamless integration with
the development process.
Responsive Design:
Designing for different screen sizes and resolutions is made easier with Sketch's responsive design
features. Designers can preview how their designs will appear on various devices and adjust accordingly.
Prototyping:
While not as extensive as some dedicated prototyping tools, Sketch has basic prototyping capabilities.
Integrations:
Sketch can be integrated with various third-party tools and services, including prototyping tools,
collaboration platforms, and design systems. This flexibility enhances the overall design workflow.

27
Collaboration:
Sketch is primarily a desktop application, and while it lacks real-time collaboration features found in cloud-
based tools like Figma, designers can still collaborate by sharing Sketch files and using version control
systems.
Ease of Use:
One of Sketch's strengths is its user-friendly interface and intuitive design. Many designers appreciate its
simplicity and the fact that it focuses on essential design features without unnecessary complexity.

RESULT:
Thus the various open-source collaborative interface platform has been explored successfully.

28
EXPT NO : HANDS ON DESIGN THINKING PROCESS FOR A
DATE : NEW PRODUCT

AIM :
To apply design thinking process for a new product.

EXPLANATION:

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.

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.

29
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.

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.

DESIGN THINKING :

RESULT :

Thus the design thinking process for the new product has been studied.
30
EXPT NO : BRAINSTORMING FEATURE FOR PROPOSED
DATE :
PRODUCT

AIM:
To develop our project by adding innovative features which enhance user experience.

EXPLANATION:
These are just a few ideas to get started. Depending on your target audience and the nature of your e-
commerce app, you can tailor these features or combine them to create a unique and compelling shopping
experience.

1. Personalized Product Recommendations: Implement an AI-powered recommendation engine that suggests


products based on the user's previous purchases, browsing history, and demographic information.

2. Virtual Stylist: Introduce a virtual stylist feature where users can upload a photo of themselves and
receive personalized outfit recommendations based on their body type, style preferences, and the
occasion.

3. Interactive Wishlist: Allow users to create and share Wishlist with friends and family, and enable
real- time updates on product availability, price changes, and special offers.

4. Augmented Reality Try-On: Integrate augmented reality (AR) technology to allow users to virtually
try on clothing, accessories, and cosmetics before making a purchase, enhancing the online shopping
experience.

5. Customizable Product Options: Offer customizable product options, such as choosing different
colors, sizes, materials, and personalization features, allowing users to tailor products to their
preferences.

6. One-Click Reordering: Enable users to quickly reorder their favourite products with just one
click, streamlining the purchasing process for frequently purchased items.

7. Social Shopping: Incorporate social features that allow users to discover products recommended
by influencers, see what their friends are buying, and share their own purchases on social media
platforms.

8. Interactive Product Demos: Provide interactive product demonstrations or tutorials to showcase how
to use or style certain products, helping users make informed purchasing decisions.

9. Dynamic Pricing Alerts: Implement a feature that notifies users when the price of a product
31
they're interested in drops or when there's a special promotion or discount available.

32
10. Gamified Shopping Experience: Introduce gamification elements such as loyalty points, badges,
challenges, and rewards to incentivize user engagement and foster a sense of fun and excitement
while shopping.

OUTPUT:

RESULT:
Thus brainstorming feature for proposed product has been applied and executed successfully.

33
EXPT NO : DEFINING THE LOOK AND FEEL OF THE
DATE :
NEW PROJECT

AIM:
To define the look and feel of our project of building e -commerce Flipkartz app.

EXPLANATION:
E-commerce Website: Key Components
A successful e-commerce website relies on several key elements working together to create a smooth and
positive customer experience. Here's a breakdown of those elements:
Look (Visual Design):
This is the first impression your website makes. It encompasses the visual elements that grab attention
and set the tone for your brand. Key aspects include:

 Color scheme: Colors that reflect your brand identity and evoke emotions to your products
(e.g., calming blues for wellness products, bold reds for sports equipment).
 Imagery: High-quality product photos, lifestyle images, and graphics that showcase your
offerings and brand personality.
 Layout: A clear and organized structure that makes browsing easy. Imagine it as a well-
organized store with distinct sections and intuitive signage.
 Typography: Easy-to-read fonts that are consistent with your overall design and brand identity.
Feel (User Experience):
This refers to how users interact with your website. It's about making the shopping journey intuitive and
enjoyable. Here's what contributes to a good user experience:
 Usability: An intuitive and easy-to-navigate website. Users should be able to find products
quickly, add them to their cart, and checkout seamlessly.
 Responsiveness: The website adjusts to different devices (desktop, mobile, tablet) and provides
a good experience on all screen sizes.
 Performance: Fast loading times are crucial for a positive user experience. No one likes waiting
for a slow website.
 Security: Customers need to feel confident that their information is secure. Secure
payment gateways and clear privacy policies are essential.
 Trustworthiness: Include elements that build trust, such as customer reviews, secure
payment badges, and clear contact information.
Navigation:
This is the roadmap that guides users to what they're looking for. It helps them find specific products and
navigate different sections of your website. Key components include:
 Menu: A clear and concise menu that displays the main categories of your products.
 Search bar: A search function that allows users to find specific products easily.

34
 Filters: Filters that allow users to refine their search based on criteria like size, color, price,
brand, etc.
 Breadcrumbs: A trail of breadcrumbs that shows users their current location within the
website's hierarchy. This helps them navigate back to previous sections easily.

Cart:
This is the virtual shopping basket where users store the items they intend to purchase. Here are some
important aspects of a good shopping cart:
 Clear view of contents: Users should see a clear list of items they've added, including
product images, names, quantities, and prices.
 Easy modification: Users should be able to easily edit quantities, remove items, or add
promo codes.
 Checkout progress: A clear indication of the checkout process steps helps users stay informed
about their purchase journey.
Feedback:
This refers to the mechanisms that allow users to provide feedback on their experience. It helps you
understand customer needs and improve your website. Here are two main ways to gather feedback:
 Product reviews: Allowing customers to leave reviews on products helps potential buyers
make informed decisions and provides valuable insights for product improvement.
 Website feedback forms: Provide a way for users to share their overall website
experience, highlighting areas for improvement.
Notifications:

These are alerts that inform users about important events related to their shopping experience. Examples
include:
 Order confirmation: A notification confirming the successful placement of an order.
 Shipping updates: Notifications that inform customers about the status of their order shipment.
 Promotional offers: Targeted notifications about special offers, discounts, or new product launches.

OUTPUT:

Icons:

35
Logo:

Navigation:

RESULT:

Thus we have defined the look and feel of our Flipkartz app.

36
EXPT NO : CREATE A SAMPLE PATTERN LIBRARY FOR THE
PRODUCT (MOOD BOARD, FONTS, COLORS
DATE : BASED ON UI PRINCIPLES)

AIM:
To create a sample pattern library for our product Flipkartz i.e., mood board, fonts, colors based
on the UI principles.

EXPLANATION:
Sample Pattern Library for E-commerce Website
This is a basic sample pattern library to get you started. You can customize it further based on your specific
brand identity and target audience.

Mood board:

 Use a tool like Pinterest or Mila note to create a mood board that captures the overall feeling
you want for your website.
 Look for images that represent your brand's personality (e.g., playful, sophisticated, minimalist)
and the type of products you sell.
 Consider incorporating colors, textures, patterns, and photography styles that reflect your brand.

Fonts:
• Primary Font: This will be your main font for body text and should be easy to read on screens.
Popular choices include Arial, Helvetica, Open Sans, and Roboto.
• Secondary Font: This can be used for headings, logos, or call-to-action buttons. Choose a font
that complements your primary font but has a bit more personality. Consider fonts like
Montserrat, Raleway, or PT Sans.

Colors:

 Select a primary color palette of 3-5 colors that will be used throughout your website.
 You can use design tools like Adobe Color or Coolors.co to create a harmonious palette.
 Consider using these colors for:
o Background color
o Text color
o Accent colors for buttons, banners, etc.
UI Patterns:

Here are some essential UI patterns for your e-commerce website:


 Hero Banner: Large banner on the homepage showcasing featured products, promotions, or
new arrivals.
 Product Card: A standardized layout for displaying product information (image, title, price, etc.)
on category and product listing pages.
 Product Details Page: A dedicated page for each product with detailed information, high-
quality images, and options for adding to cart, selecting variations (size, color), etc.

37
 Navigation Bar: Horizontal or vertical navigation menu that allows users to browse
through different product categories, about us page, contact information, etc.
 Search Bar: Enables users to search for specific products using keywords.
 Shopping Cart: Shows a list of products a user has added to purchase, with options for
modifying quantities or removing items.
 Checkout Process: A streamlined process for users to complete their purchase, including
entering shipping information, selecting payment method, and confirming order.

OUTPUT:

Mood Board:

Colors:
middle-blue-green , sonic-silver , eerie-black , ocean-green , candy-pink , white , black

Fonts:
ff-jost: "Jost", sans-serif;

RESULT :
Thus the sample pattern library for our product Flipkartz app was created successfully.

38
EXPT NO :
IDENTIFY A CUSTOMER PROBLEM TO SOLVE
DATE :

AIM:
To identify a customer problem in a E-commerce app and to solve those problems .

EXPLANATION:
Common Customer Problems in Online Shopping Apps:
Here are some frequent issues customers face in online shopping apps:

 Product Information:
o Unclear or missing descriptions: Customers can't be sure of what they're buying
without proper details like size, material, or functionality.
o Lack of high-quality images: It's difficult to assess the product's quality without clear
and multiple photos from different angles.
o Absence of customer reviews: Reviews are crucial for gauging product quality and
real- world experience.
 Search & Navigation:
o Ineffective search function: Search results that don't match queries or a search engine
that doesn't handle typos can be frustrating.
o Unclear or complex categorization: Customers shouldn't waste time navigating a
poorly organized app to find what they need.
o Cluttered interface: A busy layout can make it difficult to find features and products.
 Checkout Process:
o Multiple steps and forms: A long and tedious checkout process can lead to
cart abandonment.
o Limited payment options: Not offering popular payment methods can restrict
customers who prefer specific options.
o Hidden fees: Unexpected charges at checkout can feel deceptive and damage trust.
 Delivery & Returns:
o Unclear or slow delivery timelines: Customers want transparent information about when
to expect their purchases.
o Limited or expensive delivery options: A lack of affordable or convenient delivery
choices can be a turn-off.
o Complex or lengthy return process: A return policy that's difficult to understand or
execute discourages purchases.

39
Solutions for Your App:

 Product Information:
o Provide detailed descriptions with specifications, materials, and care instructions.
o Include high-resolution photos from various angles, and consider 360-degree views for
a better look.
o Incentivize customers to leave reviews by offering loyalty points or discounts.
 Search & Navigation:
o Implement a robust search function with auto-correction and synonyms handling.
o Organize products into clear and well-defined categories with easy-to-understand labels.
o Maintain a clean and user-friendly interface with intuitive navigation.
 Checkout Process:
o Streamline the checkout process with as few steps and forms as possible.
o Offer a variety of secure payment options, including popular wallets and cash on
delivery (COD) if applicable in your region.
o Be upfront about all costs and fees associated with the purchase before checkout.
 Delivery & Returns:
o Provide clear and real-time delivery timelines based on location and shipping method.
o Offer a variety of affordable and convenient delivery options, including express delivery
or pick-up points.
o Make the return process easy and hassle-free with clear instructions and a dedicated
return portal within the app.

By addressing these common pain points, you can create a more user-friendly and satisfying shopping
experience for your customers, leading to increased sales and customer loyalty.

OUTPUT:

Product Information:

40
Search & Navigation:

Payments , Delivery and Return:

RESULT:
Thus the customer problem was identified and understood successfully.

41
EXPT NO :
CONDUCT END-TO-END USER RESEARCH
DATE :

AIM:
To conduct end-to-end user research - user research, creating personas, ideation process (user
stories, scenarios),flow diagrams, flow mapping for our Flipkartz App.

EXPLANATION:
END TO END USER RESEARCH:
USER RESEARCH:
User Research is a crucial component of the design and development process for product, services
and systems.
SURVEY ABOUT THE USERS:

USER JOURNEY MAP :

42
EMPATHY MAP:

USER PERSONA:

43
FLOW CHART:

COMPETITORS:
 Amazon
 Flipkart
 Meesho
 Myntra
 Ajio

By this analysis and ideas we will start to build our app further.

RESULT:
Thus all our research work has been finished successfully.

44
EXPT NO :
DESIGN A PROTOTYPE WITH POPULAR TOOL
DATE :

AIM:
To sketch and design a prototype with popular tool i.e., Canva.

EXPLANATION:
Step 1: Designing the Prototype in Figma
Home Screen:
• Header: Logo, Search Bar, Cart Icon
• Categories Section: Display popular categories.
• Promotions: Highlight ongoing promotions.
Product Listing:
• Grid View: Display products with images and prices.
• Filter Options: Sort by category, price, etc.
• Add to Cart: Quick add button on each product.
Cart:
• List of Items: Display added items with quantities.
• Total Price: Show the total cost.
• Checkout Button: Move to the checkout process.
Checkout Process:
• Delivery Information: Input fields for address and contact details.
• Payment Options: Choose payment method.
• Order Summary: Confirm the selected items and total cost.
• Place Order Button: Confirm the order.
Confirmation:
• Order Confirmation Message: Display a confirmation message.
• Estimated Delivery Time: Provide an estimated delivery time.
• Track Order Button: Option to track the delivery.

Step 2: Usability Testing


Testing Scenarios:
Scenario 1: Adding Items to Cart
Task: Add three different items to the cart. Observe the user's interaction and check if it's intuitive.

45
Scenario 2: Completing a Purchase
Task: Go through the checkout process and complete a purchase. Monitor the user's flow, ensuring it's
straightforward.
Scenario 3: Checking Order Status
Task: Check the status of the order after placing it. Evaluate how easily the user can find and understand the
order status.
Collecting Feedback:
Ask users to think aloud while performing tasks to understand their thought process.
Use a combination of quantitative and qualitative data (time taken, success rate, user feedback).
Observe pain points, confusion, or areas where users hesitate.

Step 4: Identify Improvements


Improvement Suggestions:
Enhance Navigation:
Users found it challenging to navigate back to the home screen from the cart. Consider adding a clear back
button or improving navigation.
Clarify Checkout Process:
Some users were uncertain about the steps in the checkout process. Consider adding progress indicators and
clearer labels.
Payment Method Explanation:
Users desired more information about each payment method. Include a tooltip or information icon to explain
payment options.
Visual Feedback on Product Addition:
Users wanted more visual confirmation when adding items to the cart. Consider adding an animation or
confirmation message
Delivery Time Notification:
Users expressed a desire for more detailed delivery time information. Consider providing a real-time
countdown or more precise estimates.
Step 5: Iterate and Refine
Implement the identified improvements in the Figma prototype.
Iterate the design based on usability testing feedback.

IMPLEMENTATION:
Prototypes for our E commerce apps:

46
OUTPUT :

47
48
RESULT:
Thus the prototypes for our Flipkartz app has been designed successfully.
49

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy