Kiruba 23MC2425

Download as pdf or txt
Download as pdf or txt
You are on page 1of 23

FLIPKART ONLINE APPLICATION

INTERNSHIP INDUSTRIAL ACTIVITY REPORT

Submitted by

N.KIRUBANANTHAN
(Reg. No: 23MC2425)

Under the Guidance of


Dr. G.VIJAIPRABHU
Assistant Professor in Computer Science

PG AND RESEARCH DEPARTMENT OF COMPUTER SCIENCE

ERODE ARTS & SCIENCE COLLEGE (Autonomous)

(Affiliated to Bharathiar University, Coimbatore)

Accredited by NACC with A+ Level

ERODE -638 009

OCTOBER– 2024
CERTIFICATE

Certified that this is a Bonafide Record of the Internship Industrial Activity done by
KIRUBANANTHAN N Reg.No:23MC2425 of semester III, MCA in the Department of
Computer Science, Erode Arts and Science College (Autonomous), Erode – 638009 during
the Academic year 2024 – 2025

Signature of the Guide Head of the Department

Signature of the Principal

Viva-Voce Examination held on

Internal examiner
TABLE OF CONTENTS

TITLE PAGE
S. No.
NO.

1 COMPANY PROFILE 1

2 ABSTRACT 2

2.1 ABOUT THE PROJECT


2

2.2 SYSTEM SPECIFICATION 3

2.3 PROJECT OVERVIEW


4

2.4 FIGMA OVERVIEW


6

2.5 DESCRIPTION OF UI / UX 10

3 MODULE DESCRIPTION WITH SCREENSHOTS 14

4 CONCLUSION 19
CHAPTER - 1
COMPANY PROFILE

1
CHAPTER - 2
ABSTRACT

2.1 ABOUT THE PROJECT

The Flipkart project is designed to create a user-friendly and visually appealing e-


commerce platform that mirrors the functionality and aesthetics of Flipkart, one of
India’s leading online shopping websites. This project focuses on crafting an intuitive
user experience that enables users to browse, search, and purchase products
effortlessly.

Design Process

 Research: Conducting analysis of existing e-commerce platforms to identify


best practices and user expectations.
 Wireframing: Developing low-fidelity wireframes to outline the layout and
functionality of key pages.
 Prototyping: Creating high-fidelity prototypes in Figma to visualize the final
design and gather user feedback.

DESIGNING TOOL

 Figma

2
2.2SYSTEM SPECIFICATION

HARDWARE SPECIFICATION:

System : Core i5

Hard Disk : 1 TB

Monitor : 17’’LED

Mouse : Logitech

RAM : 8 GB

SOFTWARE SPECIFICATION

Operating system : windows 10

Tool : Figma

ABOUT THE TOOL

Figma is a powerful web-based design tool that enables users to


create user interfaces, prototypes, and collaborative design projects. It
allows designers to work in real-time with team members, making it easy to
share feedback and iterate on designs. With features like vector editing,
components, and design systems, Figma streamlines the design process for
web and mobile applications.

3
Its cloud-based platform means you can access your projects from
anywhere, and its extensive library of plugins enhances functionality,
supporting tasks like user testing and design handoff. Whether you're a solo
designer or part of a large team, Figma simplifies collaboration and boosts
creativity in the design workflow.

2.3 PROJECT OVERVIEW

The Flipkart project aims to design a comprehensive e-commerce platform that


replicates the essential features and user experience of Flipkart, enabling users to shop
for a variety of products efficiently. The goal is to create a visually appealing and
functional interface that enhances the online shopping experience.

OBJECTIVES

 User-Centric Design: To develop an interface that caters to user needs and


preferences, enhancing the overall shopping experience.
 Responsive Layout: To ensure the design is fully responsive, providing a
seamless experience across desktop, tablet, and mobile devices.
 Enhanced Navigation: To create clear pathways for users to explore products,
manage their carts, and complete transactions efficiently.

KEY FEATURES

1.Homepage Design:

 Featured banners and promotional sections.


 Navigation menu with product categories.

2.Product Listing Pages:

4
 Filter options for searching by brand, price, and ratings.
 Grid layout displaying products with images and details.

3.Product Detail Pages:

 Comprehensive product information, including descriptions, images, and


user reviews.
 Call-to-action buttons for purchasing and adding items to the cart.

4.Cart and Checkout:

 User-friendly cart interface allowing quantity adjustments.


 Streamlined checkout process with clear steps for shipping and payment.

5.User Account Management:

 Profiles for users to track orders, manage addresses, and view saved items.

UI/UX DESIGN CONSIDERATIONS

1. Color Scheme : Choose a palette that reflects the brand and is visually
appealing, ensuring sufficient contrast for readability.

2. Typography : Use clear, legible fonts for menus and instructions.

3. Icons and Imagery : Utilize intuitive icons and high-quality images


to enhance navigation and engagement.

4. Accessibility : Ensure the app meets accessibility standards, allowing


all users, including those with disabilities, to navigate easily.

5
TOOLS AND TECHNOLOGIES

Design Tools : Figma or Adobe XD for wireframing and prototyping.

Development Framework : React Native or Flutter for cross-platform app


development.

Backend Services : Node.js with Express for server-side development,


and MongoDB for database management.

IMPLEMENTATION STEPS

1. Research and Planning : Conduct user research to understand pain


points and preferences.

2. Prototyping : Develop interactive prototypes for testing with potential users.

3. Development : Code the application using chosen technologies, focusing


on a clean, modular structure.

4. Testing : Conduct usability testing to gather feedback and identify


areas for improvement.

2.4 FIGMA OVERVIEW

Figma is a cloud-based design tool widely used for user interface


(UI) and user experience (UX) design. It allows designers to create
prototypes, collaborate in real-time, and streamline the design process
across teams. Here's an in-depth look at its features, benefits, and use cases:
6
KEY FEATURES

1. Collaborative Design

Real-Time Collaboration : Multiple users can work on a design


simultaneously, making it easier for teams to collaborate and provide instant
feedback.
Commenting and Feedback : Team members can leave comments directly
on the design, facilitating discussions and revisions.

2. Design Tools

Vector Editing : Figma provides powerful vector editing tools that allow for
precise design adjustments.

Components and Assets : Users can create reusable components that


can be modified globally, ensuring consistency throughout projects.

Design Systems : Figma supports the creation of design systems, enabling teams to
maintain consistent branding and design patterns across multiple projects.

3. Prototyping

Interactive Prototypes : Designers can create interactive prototypes to


simulate user flows, making it easier to visualize how an application will
function.
Transitions and Animations : Figma allows the addition of transitions
7
and animations to enhance the prototype's realism.

4. Plugins and Integrations

Figma has a robust ecosystem of plugins that extend its functionality.


These plugins can assist with tasks like accessibility checks, design audits,
and integrating with other tools .

5. Cross-Platform Accessibility

As a web-based tool, Figma can be accessed from any device with


internet connectivity. This cross-platform accessibility eliminates
compatibility issues and ensures that all team members can contribute
regardless of their operating system.

6. Version Control

Figma automatically saves design changes and maintains a version history,


allowing users to revert to previous versions if needed. This feature helps in managing
design iterations effectively.

BENIFITS

1. Enhanced Collaboration

Figma’s real-time collaboration features break down silos, allowing


designers, developers, and stakeholders to work together seamlessly.

8
2. Increased Efficiency

With reusable components and design systems, teams can work more
efficiently, reducing redundancy and speeding up the design process.
3. Improved Communication

The ability to comment directly on designs enhances communication among


team members and with clients, streamlining feedback and approval processes.

4. Accessible Learning Curve

Figma's user-friendly interface and comprehensive resources make it


accessible for beginners while still offering advanced features for experienced
designers.

USE CASES

1. UI/UX Design : Figma is primarily used for designing user interfaces


for web and mobile applications, enabling designers to create visually
appealing and user-friendly experiences.

2. Prototyping and User Testing : Teams use Figma to build prototypes


that can be tested with users, allowing for early identification of usability
issues.

3. Design Systems : Organizations use Figma to develop and maintain

9
design systems that ensure consistency across various digital products.

4.Marketing and Branding : Figma can be utilized to create marketing materials,


landing pages, and branding assets, maintaining a cohesive visual identity.

2.5 DESCRIPTION OF UI / UX

UI (User Interface) and UX (User Experience) design are two distinct but
closely related disciplines that play a critical role in the success of digital products like
websites, mobile apps, and software. Here's an overview of both:

1. UI Design (User Interface Design)

UI design focuses on the look and feel of a digital product. It's about
creating visually appealing, functional, and interactive interfaces that are easy for users
to engage with.

KEY ELEMENTS OF UI DESIGN

Visual Design : This involves selecting colors, typography, and images to


create a visually attractive interface.

Layout : Organizing the elements on the screen in a way that is intuitive


for the user, following principles like proximity, balance, and alignment.

Consistency : Ensuring uniformity in design elements like buttons, icons,


and fonts across different pages or screens.
10
Interactive Elements : Designing buttons, dropdowns, sliders, and other interactive
elements that guide users through the interface.

TOOLS FOR UI DESIGN

Figma : A cloud-based design tool for interface design and prototyping.

Sketch : A vector-based design tool used for creating interfaces.

Adobe XD : Adobe’s solution for UI and UX design, offering both


design and prototyping capabilities.

2. UX Design (User Experience Design)


UX design is about creating meaningful and valuable experiences
for the user when they interact with a product. It’s focused on the user’s
journey and involves understanding user behavior, needs, and pain points to
create an efficient and enjoyable experience.

KEY ELEMENTS OF UX DESIGN

User Research : Understanding the needs, goals, and behaviors of the


target audience through methods like surveys, interviews, and usability
testing.

User Personas : Creating fictional characters representing the key traits


of different user segments to guide design decisions.

11
Wireframing & Prototyping : Developing basic, low-fidelity designs
(wireframes) and then creating interactive prototypes to test the user journey
before the final product is developed.

Information Architecture : Organizing content and functionality in a


way that helps users easily navigate through the product.

Usability Testing : Testing the product with real users to identify any
issues in navigation, understanding, or performance.

TOOLS FOR UX DESIGN

InVision : A prototyping tool that allows designers to create clickable


prototypes and gather feedback.

Balsamiq : A wireframing tool for sketching low-fidelity user interfaces.

Miro : A collaborative tool that can be used for mapping out user
journeys, mind mapping, and brainstorming.

RELATIONSHIP BETWEEN UI AND UX

1. UI is about how things look while UX is about how things work .

2. A product can have a beautiful UI but poor UX, making it difficult for
users to navigate or accomplish tasks. Conversely, great UX with poor UI
12
may still function well but will lack visual appeal.

3. Both disciplines need to work in tandem to create a product that is not


only visually engaging but also easy and intuitive to use.

KEY PRINCIPLES OF UI/UX DESIGN

1. User-Centric Approach : Design should always prioritize the user’s


needs and preferences.

2. Simplicity and Clarity : Avoid clutter and provide a clear, intuitive


path for users to achieve their goals.

3. Consistency : Consistent visual elements and actions make it easier for


users to understand how to use the product.

4. Feedback : Users should receive immediate feedback for their actions,


whether it's a click, form submission, or error handling and design for all
users, including those with disabilities, by following accessibility guidelines
(like WCAG)

13
CHAPTER - 3
MODULE DESCRIPTION

OVERVIEW

This mini project focuses on the design and development of a user


interface for an online food ordering application. Participants will apply UI
design principles to create an intuitive and visually appealing interface that
enhances user experience.

OBJECTIVES

1. To develop a comprehensive understanding of UI design specific to


f l i p k a r t ordering applications.

2. To create wireframes and high-fidelity prototypes that effectively


illustrate the user journey.

3. To apply design tools such as Figma to bring the interface to life.

4. To gather user feedback through testing and make iterative improvements.

KEY COMPONENTS

1. Research and Planning : Analyze existing food delivery apps to


identify best practices and user needs.

2. User Personals : Create profiles representing different target users to


guide design decisions.

3. Wireframing : Design low-fidelity wireframes for core app features,


including the home screen, menu browsing, order customization, and
checkout.

4.Visual Design : Develop high-fidelity mockups, focusing on aesthetics, color


14
schemes, typography, and branding.

5.Prototyping : Build an interactive prototype to simulate user interactions


and app flow.

6.Usability Testing : Conduct user testing sessions to collect feedback


on the interface and identify areas for improvement.

7.Iteration : Refine designs based on user feedback to enhance usability


and overall experience.

DELIVERABLES

1. User personas and research findings

2. Wireframes for key screens

3. High-fidelity prototypes created in Figma

4. Usability testing report with insights and design adjustments

15
16
17
TARGET AUDIENCE

This mini project is ideal for students and aspiring designers looking
to build their portfolios and gain hands-on experience in UI design for
flipkart ordering applications

18
CHAPTER - 4

CONCLUSION

In this project, we undertook a comprehensive analysis of Flipkart's user


interface and user experience to enhance the platform's usability and overall customer
satisfaction. Through user research, usability testing, and iterative design processes, we
identified key pain points and opportunities for improvement.

Our redesign focused on simplifying navigation, improving product


discoverability, and creating a more cohesive visual identity. By implementing user
feedback, we enhanced features like search functionality, filters, and the checkout
process, resulting in a more intuitive and seamless shopping experience.

The final prototype reflects our commitment to user-centered design, ensuring


that Flipkart remains competitive in the rapidly evolving e-commerce landscape. Future
iterations will continue to rely on user insights to adapt to changing user needs and
preferences, ultimately aiming to foster greater customer loyalty and engagement.

This project not only highlights the importance of effective UI/UX design in e-
commerce but also demonstrates the potential for continuous improvement through user
feedback and innovative design strategies.

19

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