Scribd
Upload
319 views56 pages

CCS370 UI and UX Design

Uploaded by

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

CCS370 UI and UX Design

Uploaded by

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

ANNA UNIVERSITY REGIONAL CAMPUS, COIMBATORE

LABORATORY RECORD
2023 – 2024

NAME : ______________________________
REGISTER NUMBER : ______________________________
BRANCH : B.E. - COMPUTER SCIENCE AND ENGINEERING
SUBJECT CODE : CCS370
SUBJECT TITLE : UI AND UX DESIGN

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING


ANNA UNIVERSITY-REGIONAL CAMPUS
COIMBATORE - 641 046

1|Page
ANNA UNIVERSITY
REGIONAL CAMPUS, COIMBATORE
DEPARTMENT OF COMPUTER SCIENCEAND ENGINEERING

BONAFIDE CERTIFICATE

Certified that this is the bonafide record of Practical done in CCS370 – UI AND UX
DESIGN LABORATORY by ________________________________
Register No.______________________ in Third Year - Sixth Semester during 2023 - 2024.

STAFF IN-CHARGE HEAD OF THE DEPARTMENT

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


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

INTERNAL EXAMINER EXTERNAL EXAMINER

2|Page
INDEX
EX DATE TITLE PAGE MARKS SIGN
NO. NO.

3|Page
EXPT NO.: DESIGN A RESPONSIVE LAYOUT FOR AN
DATE: SOCIETAL APPLICATION-RESUME BUILDING

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">
<!-- divinectorweb.com -->
<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">

4|Page
<img src="img1.jpg" alt="candiateimage">
</div>
<h1> Paranjothi Karthik Manikandan </h1>
<h3>Full-Stack Web Developer</h3>
</div>
<div class="main">
<div class="left">
<h2>Personal Information</h2>
<p><strong>DOB:</strong> 10/12/2003 </p>
<p><strong>Age:</strong> 20</p>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> 9629921185</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.E in Computer Science</h3>
<p>University College of Engineering- Dindigul, 2021-2023</p> <br>
<h3>B.E in Computer Science</h3>
<p>Anna University Regional Campus Coimbatore, 2023-2025</p>
</div>
<div class="right">
<h2>Work Experience</h2>
<h3>Infoaid Tech</h3>
<p><strong>Position:</strong> Software Developer</p>
<p><strong>Duration:</strong> 2024-2025</p>
<ul>

5|Page
<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>Lets Grow More Company</h3>
<p><strong>Position:</strong> Data Analyst</p>
<p><strong>Duration:</strong> 2024</p>
<ul>
<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>
</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;
6|Page
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%;
}

7|Page
.main {
display: flex;
flex-wrap: wrap;
}

.left {
flex: 1;
padding: 30px;
}

.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;
}

8|Page
.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;

9|Page
}
h2 {
font-size: 15px;
}
}

OUTPUT:
RESUME DISPLAY IN WEB LAYOUT:

10 | P a g e
RESUME DISPLAY IN RESPONSIVE LAYOUT

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

11 | P a g e
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:
o Save Time and Effort: Instead of designing everything from scratch, designers can leverage
existing patterns to create usable interfaces quickly.
o 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.
o Improve Usability: Well-designed patterns prioritize user needs and provide intuitive ways
to accomplish tasks.
• Types of UI Interaction Patterns:
o Navigation Patterns: These patterns help users find their way around the interface, including
menus, tabs, and breadcrumbs.
o Input Patterns: These patterns allow users to provide information, such as text fields, select
boxes, and drag-and-drop functionality.
o Data Patterns: These patterns help users view and interact with data, including tables, cards,
and galleries.
o Social Patterns: These patterns facilitate communication and interaction between users, like
chat functionalities, forums, and social media features.
o 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, sans-serif;
margin: 0;

12 | P a g e
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;
}
.swipe-content {
white-space: nowrap;
transition: transform 0.3s ease;
13 | P a g e
}
.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;
position: absolute;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1;
14 | P a g e
}
.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;
height: 20px;
15 | P a g e
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>

16 | P a g e
OUTPUT:

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

17 | P a g e
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.

18 | P a g e
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;

19 | P a g e
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 {

20 | P a g e
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;

21 | P a g e
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>

22 | P a g e
<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 we have developed an User Interface with proper UI Style Guides Successfully.

23 | P a g e
EXPT NO.: DEVELOPING WIREFLOW DIAGRAM FOR
APPLICATION USING OPEN-SOURCE SOFTWARE
DATE:

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

24 | P a g e
6. Payment Gateway
• Payment options (credit/debit card, PayPal, etc.)
• Billing information
• Security verification
7. Order Confirmation
• Confirmation message
• Order details
• Order number
• Link to track order
8. User Account
• Profile information
• Order history
• Settings
9. 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:

25 | P a g e
RESULT:
Thus the development of wireflow diagram for online shopping website was designed successfully
and output is verified.

26 | P a g e
EXPT NO.: EXPLORING VARIOUS OPEN SOURCE
DATE:
COLLABRATIVE INTERFACE 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.

27 | P a g e
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.

28 | P a g e
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.
Designers can create simple interactions and transitions to demonstrate the flow of their designs.
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.
29 | P a g e
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 we have explored the various open source collaborative interface.

30 | P a g e
EXPT NO.: HANDS ON DESIGN THINKING PROCESS FOR
AMAZKART
DATE:

AIM:
To develop our project further we will perform design thinking process to solve problem and to give
a innovative solution.

EXPLANATION:

1. EMPATHIZE:
The empathize stage is the foundation for any successful e-commerce app. Here's how you can approach it:
Understanding your users:
Research: Conduct user interviews, surveys, and usability testing to gather insights into your target
audience. Look for demographics, online shopping habits, frustrations with current apps, and what features
they value.
Personas: Develop user personas - fictional characters that represent your ideal customers. Give them
names, backgrounds, goals, and challenges related to online shopping.
Techniques to gather user empathy:
Empathy Mapping: Create a visual map that captures user needs, thoughts, feelings, and experiences
related to online shopping.
Customer Journey Mapping: Map out the different touchpoints a customer has with your brand, focusing
on their emotional state at each stage. This will help you identify areas for improvement.
What to focus on during the empathize stage:
Pain Points: Identify the common challenges users face while shopping online. Are they frustrated with
product discovery, checkout processes, or lack of trust in online transactions?
Needs & Goals: Understand what users are trying to achieve when they shop online. Are they looking for
convenience, specific products, competitive prices, or a curated shopping experience?
Mental Model: How do users typically find and purchase products online? What are their expectations for
e-commerce apps?

31 | P a g e
2. DEFINE:
The definition stage for your e-commerce app follows the empathize stage and is where you solidify the
concept based on the user insights you gathered. Here's what this stage entails:
Refining your concept:
Value Proposition: Clearly define the unique value proposition (UVP) of your app. What makes it different
from existing options? How will it specifically benefit your target audience?
App Functionality: Based on user needs, determine the core functionalities of your app. This could include
product browsing, search filters, detailed product information, secure payment gateways, and a seamless
checkout process.
User Interface (UI) and User Experience (UX) Design: Here you start sketching out the app's layout,
navigation, and overall look and feel. User experience (UX) focuses on making the app intuitive and easy to
use, while User Interface (UI) is concerned with the visual design aesthetics.
Key activities in the definition stage:
Feature Prioritization: Not all features are created equal. Prioritize the functionalities that address the most
critical user needs and will be included in the initial version of the app (Minimum Viable Product or MVP).
User Flows & Sitemaps: Develop user flow diagrams to map out the different user journeys within the app.
Create sitemaps to visualize the information architecture and how users will navigate between different
sections.
32 | P a g e
Wireframing & Prototyping: Build low-fidelity wireframes to represent the basic layout of the app's
screens. You can then create interactive prototypes to test user interactions and get early feedback on the
design.
Deliverables from the definition stage:
App Functionality Document: A detailed document outlining the core features and functionalities of the
app.
User Interface (UI) Mock-ups: Visual representations of the app's screens and how users will interact with
them.
User Flow Diagrams & Sitemaps: Visualizations of user journeys and the app's information architecture.

3. IDEATE:
The ideate stage of your e-commerce app is all about unleashing creativity and brainstorming solutions to
the user problems identified in the empathize stage. Here's how to get the most out of this exciting phase:
Embrace Brainstorming:
Quantity over Quality: This is the time to go wild with ideas! Don't be afraid of "bad" ideas - sometimes
they spark something brilliant.
Collaborative Environment: Encourage participation from a diverse team with different skillsets. This can
lead to a wider range of creative solutions.
Techniques to Spark Ideas: Consider using brainstorming techniques like brainwriting, mind mapping, or
SCAMPER (Substitute, Combine, Adapt, Modify, Put to other uses, Eliminate, Reverse).
Think Beyond the Obvious:
Challenge Assumptions: Don't just copy existing e-commerce apps. Think about how you can innovate and
solve user problems differently.
Future of Shopping: Consider emerging technologies like AR/VR, voice assistants, or social commerce
features that could enhance the shopping experience.
Focus on User Delight: While core functionalities are important, ideate features that go beyond the basic
needs and create a delightful user experience.
Ideation Techniques for E-commerce Apps:
Feature Enhancement: Take a common e-commerce app feature and brainstorm ways to improve it. For
example, how can product search be more personalized or visual?
User Scenario Brainstorming: Focus on specific user scenarios. For example, how can the app help
indecisive shoppers make purchase decisions or streamline the checkout process for busy users?
Reverse Brainstorming: Flip the script and brainstorm ways to make the shopping experience worse. Then
reverse engineer solutions to avoid those pitfalls.

33 | P a g e
4. PROTOTYPE:
The prototype stage is where your e-commerce app ideas take shape in a tangible, but not yet final, form.
Here's what you'll focus on:
Building Low-Fidelity Prototypes:
Focus on Functionality: Don't worry too much about aesthetics at this point. The goal is to create low-
fidelity prototypes that effectively represent the core functionalities and user flows of your app.
Rapid Prototyping Tools: Utilize low-fidelity prototyping tools like wireframing software, online
prototyping tools, or even paper and pen sketches. These allow for quick iteration and testing without getting
bogged down in design details.
User Testing and Feedback:
Recruit Testers: Gather a group of potential users from your target audience to test your prototypes.
Usability Testing: Conduct usability testing sessions where users interact with the prototypes and provide
feedback on their experience.
Iterate and Refine: Based on user feedback, iterate on your prototypes to address identified usability issues
or improve the user experience.
Benefits of Prototyping:
Early Feedback: Get valuable insights from users early in the development process, saving time and
resources in the long run.
Validate Ideas: Test the feasibility and user reception of your app concepts before investing in full-fledged
development.
Refine Design: Identify and fix usability problems before they become costly to address later in
development.
Types of Prototypes for E-commerce Apps:
Low-Fidelity Wireframes: Basic sketches or digital wireframes that represent the layout and functionality
of the app's screens.
Clickable Prototypes: Interactive prototypes that allow users to click through different screens and simulate
user flows within the app.
High-Fidelity Mock-ups: More advanced prototypes with visual design elements like colors, fonts, and
imagery to provide a closer representation of the final app's look and feel.

34 | P a g e
5. TEST:
The test stage of your e-commerce app is critical for ensuring a smooth launch and a positive user
experience. Here's what you can expect during this phase:
Types of Testing:
Functional Testing: This verifies if all the app's features work as intended. Common functionalities tested
include user login, product search, shopping cart, checkout process, and payment gateways.
Usability Testing: This assesses how easy and intuitive the app is to use for your target audience. Usability
testing typically involves observing users interacting with the app and identifying any pain points or areas
for improvement.
Performance Testing: This evaluates how the app performs under different loads and conditions.
Performance testing ensures the app can handle real-world usage scenarios without crashing or slowing
down.
Security Testing: This identifies and addresses any vulnerabilities in the app's code that could compromise
user data or financial information. Security testing is crucial for building trust with your users.
Testing Methods:
Internal Testing: The development team performs initial testing to identify and fix bugs before user testing
begins.

35 | P a g e
User Acceptance Testing (UAT): A group of target users test the app and provide feedback on its usability
and functionality.
A/B Testing: This allows you to compare different versions of app features or interfaces to see which one
performs better with users.

RESULT:
Thus we have a outline of our project of building E commerce app.

36 | P a g e
EXPT NO.: BRAINSTORMING FEATURE FOR PROPOSED
DATE:
PROJECT

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 they're
interested in drops or when there's a special promotion or discount available.

37 | P a g e
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 we have got innovative ideas to develop the project by this Brainstorming session.

38 | P a g e
EXPT NO.: DEFINING THE LOOK AND FEEL OF THE
DATE:
AMAZKART APP

AIM:
To define the look and feel of our project of building e commerce Amazkart 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.

39 | P a g e
• 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:

40 | P a g e
Logo:

Navigation:

RESULT:

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

41 | P a g e
EXPT NO.: CREATE A SAMPLE PATTERN LIBRARY FOR
AMAZKART (MOOD BOARD, FONTS, COLORS BASED
DATE: ON THE UI PRINCIPLES)

AIM:
To Create a sample pattern library for our product Amazkart 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:

• Choose two fonts:


o 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.
o 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.
• Ensure there's enough contrast between text and background for readability.

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.
42 | P a g e
• 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.
• 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
cultured

43 | P a g e
white
black

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

RESULT:
Thus we have created Sample Pattern Library for our product Amazkart.

44 | P a g e
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 in our app.

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.

45 | P a g e
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:

46 | P a g e
Search & Navigation:

Payments And Delivery And Return:

RESULT:
Thus we have identified user problem and the solutions for the problem.

47 | P a g e
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 Amazkart 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:

48 | P a g e
Empathy Map:

User Persona:

49 | P a g e
USER JOURNEY MAP:

Flow Chart:

50 | P a g e
COMPETITORS:
• Amazon
• Flipkart
• Meesho
• Myntra
• Ajio

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

RESULT:
Thus we have finished all our research work successfully.

51 | P a g e
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.

52 | P a g e
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:

53 | P a g e
54 | P a g e
55 | P a g e
RESULT:
Thus we have designed the prototypes for our Amazkart app successfully.

56 | P a g e

You might also like