This is an Ecommerce Mini Project / Group Project Presentation that I created as part of the college curriculum, this presentation is a more design focused presentation that you might need to give in your college. If you want Coding focused presentation please see E-Commerce Mini Project / Group Project Coding PPT that I uploaded. It has things explained like Figma, Sketch, Zeplin etc.

1. Group
Mini Project
Ayushman …
A000000

2. E-Commerce Website
We developed a basic ecommerce website focused on smartphones and
created all the related pages to it for our mini project.
2
The work was divided among team members like:
● UI Designing done by Ayushman and Ayush
● Coding done by Hemant
● Testing done by Ujjwal
Me and Ayush worked together to develop
and improve the UI of the website using
various tools and components etc. which are
described in the upcoming slide.

3. Tools and Software Used
These are some of the various tools and software used to develop the Mini
Project:
3
JavaScript
It is used to create basic logic
processes used to perform
various tasks on the user side
while reducing lag.
Bootstrap
Bootstrap is a free and open-
source CSS framework
directed at responsive,
mobile-first front-end web
development.
Sketch
It is a very popular tool within
the design community that
enables you to create hi-fi
interfaces and prototypes.
Zeplin
It enables you to take your
design and prototypes, hand
them over to developers and
make sure that your ideas are
executed well.
Figma
It is collaborative design tool
whereby multiple users can
work simultaneously on a
project at any given time
simultaneously.
Adobe XD
Adobe XD is a vector-based
user experience design tool
for web apps and mobile
apps, developed and
published by Adobe Inc.

4. E-commerce
Website
Few Snippets & Summary of
Various Pages created for the Mini
Project.

5. Designing Tasks
The various design tasks I completed based on input from my
team members:
▪ Analyzing Popular E-commerce Websites
▪ Learning Googles Material Design Guidelines
▪ Discovering User Habits
▪ Designing Basic Pages Framework
▪ Providing UI Feedback etc.
5
These were some of the various tasks I
was able to complete with the help of
Ayush and with feedback in Coding and
Testing from Hemant and Ujjwal.

6. Place your screenshot here
6
The desktop view of the
ecommerce website.
It contains various
sliders, tickers etc. and
other features to make
the most impact to the
user.
Home
Page

7. The mobile view of the
ecommerce website.
A very optimized page for
mobile view without
compromising features.
Place your screenshot here
7
Home
Page

8. Place your screenshot here
8
It contains various
options through which a
user can choose the
categories of
smartphones as desired.
Shop
Category

9. The mobile view of the
shop category.
Here we used some
dropdowns menus to
preserve the desktop
page functionality.
Place your screenshot here
9
Shop
Category

10. Place your screenshot here
10
It contains the details of
a given product, user
reviews, specification
tabs and much more.
Product
Page

11. The mobile view of the
product page.
A very optimized page
for mobile view without
compromising features
of any sort.
Place your screenshot here
11
Product
Page

12. Place your screenshot here
12
The mobile view of the
Contact Us.
A very optimized page
for mobile view with
touch enabled google
maps support for mobile
view.
Contact
Us

13. The mobile view of the
Contact Us.
A very optimized page
for mobile view with
touch enabled google
maps support for mobile
view.
Place your screenshot here
13
Contact
Us

14. Conclusion
Some of the pages we created for the E-commerce website are
shown here, the various pages I designed allowed me to learn:
▪ Design Analysis of Websites
▪ Googles Material Design Guidelines
▪ Indian User Habits
▪ Pages Framework Designing
14
In conclusion, this mini project helped us
learn various new design, coding, testing
and maintenance techniques which will
surely help us in the long run.

15. Thank You
Any questions?
Ayushman …
A000000
15