VIDYAVARDHAKA COLLEGE OF ENGINEERING

P.B. No.206, Gokulam, III - Stage, Mysore - 570 002, Karnataka, INDIA.
Phone: +91 821 4276201 / 202 / 225.

User Interface/User Experience

20CS73
(ACADEMIC YEAR 2023-24)
“ E-Commerce Application ”

Activity Based Assessment

Submitted By

Amrutha Sindhu A 4VV20CS009

Chaithanya S 4VV20CS021

Chinmayi H 4VV20CS024

Elaine M Paily 4VV20CS037

Hamsini D 4VV20CS046

Department of Computer Science and Engineering

 INTRODUCTION TO APPLICATION

The wireframe design process for an innovative E-Commerce Application

focusing on clothing and accessories which is developed using the collaborative
design tool Figma, this wireframe serves as the foundational structure for the
forthcoming application design and development. We have created 3 wireframes
in this E-Commerce Application , the first page is an onboarding page , second
one is home page and third one is product section page.

1. Onboarding Page:
The onboarding page is designed to welcome and familiarize users with the E-
Commerce Application. Its primary objectives include user registration, setting
preferences, and introducing the key features of the platform.
Components:
- Welcome Message: A visually appealing welcome message introducing users
to the application.
- Introductory Tutorial: A brief walkthrough highlighting key features and
navigation within the application.
Figma Features:
- Collaborative design features for efficient team input on the onboarding layout.
- Prototyping for simulating the user flow from registration to preference setup.

2. Home Page:
Objective:
The home page serves as the central hub where users begin their shopping
experience. It aims to provide an engaging and intuitive interface that showcases
featured products, promotions, and navigation options.
Components:
- Featured Products: Visually appealing displays of selected clothing items and
accessories.
Preferences Setup: Allows users to set preferences such as preferred categories,
sizes, and styles.
-Promotional Banners: Highlighting ongoing sales, discounts, or special events.
- Navigation Menu: Clearly organized menu for easy access to product categories.
- Search Bar: Allows users to search for specific items quickly.
Figma Features:
- Responsive design elements to ensure a seamless experience across devices.
- Collaboration features for team input on the overall layout and visual appeal.

3. Product Section Page:

Objective:
The product section page is designed to showcase detailed information about
individual clothing items and accessories. It focuses on enhancing the user's
understanding of the products and facilitating informed purchasing decisions.
Components:
- Product Images: High-quality images showcasing different angles and details.
- Product Descriptions: Detailed information about materials, sizes, and care
instructions.
- Add to Cart Button: Allows users to add items to their shopping cart directly.
- Related Products Section: Suggestions for complementary items or alternatives.
- Customer Reviews: User-generated reviews and ratings.
Figma Features:
- Prototyping for interactive elements, such as the "Add to Cart" button.
- Collaboration tools for iterative design enhancements based on feedback.

ABOUT WIREFRAMES

Wireframes are fundamental tools in the field of user interface (UI) and user
experience (UX) design, serving as the foundational blueprints for digital
applications. In the early stages of the design process, wireframes provide a visual
representation of a product's layout, structure, and basic functionality. They act
as a crucial bridge between conceptual ideas and the concrete development of
digital interfaces, offering a simplified and focused view of a user interface.
Wireframes are typically low-fidelity, meaning they lack detailed design
elements like colors, images, or intricate styling. Instead, they focus on outlining
the essential components and their spatial relationships within a user interface.
This intentional simplicity allows designers, developers, and stakeholders to
concentrate on the fundamental structure and flow of the application without
being distracted by aesthetic details.
Key Aspects of Wireframes:

1.Structural Planning: Wireframes help designers organize and arrange elements

within an application, defining the layout and hierarchy of information. This
structural planning is essential for creating an intuitive and user-friendly
experience.

2.User Experience Considerations: By mapping out the placement of key

elements, wireframes prioritize user interactions and contribute to the overall user
experience. They ensure that the design aligns with the goals of the application
and the expectations of the target audience.

3.Content Hierarchy: Wireframes aid in establishing a clear hierarchy of

information, guiding users through the interface and emphasizing essential
features. This ensures that users can easily navigate and find what they are
looking for.

4.Feedback and Iteration: Because wireframes are low-fidelity, they facilitate

quick and cost-effective iterations. Designers can gather feedback from
stakeholders and make necessary adjustments early in the design process,
reducing the likelihood of major changes later on.

5.Collaboration: Wireframes foster collaboration among design and development

teams, as well as with clients and stakeholders. Their simplicity allows for clear
communication and alignment of expectations, ensuring that everyone involved
understands the structure and functionality of the application.
Wireframes play a pivotal role in the design and development of digital
applications, providing a visual framework that guides the creation of user
interfaces. They are essential tools for ensuring that the final product meets both
the functional and user experience requirements, setting the stage for a successful
and user-friendly application.

DESIGN OF WIREFRAME
The home page serves as the central hub where users begin their shopping
experience. It aims to provide an engaging and intuitive interface that showcases
featured products, promotions, and navigation options.
Components:
- Featured Products: Visually appealing displays of selected clothing items and
accessories.
Preferences Setup: Allows users to set preferences such as preferred categories,
girls, boys, kids.
 COMPONENTS OF WIREFRAME

• All the important components of an experience should be represented in your

page wireframe. Use simple shapes instead of actual graphics, copy, or text, and
label them. These elements include

✓ Navigation and masthead: These links and buttons enable users to visit the
main sections of your site. Consider both primary navigation (for Level I
categories) and secondary navigation (to navigate with a Level I category).

✓ Branding elements and company logo: In its simplest form, the logo must be
represented by a box.

✓ Content modules: Where will your different sections of copy, content, and
functionality appear?

✓ Search boxes, user login areas, and other utilities: These are any tools the user
would use such as a search engine, user profile, or tools such as online calculators
(such as, to calculate a mortgage rate).
Masthead: Shows the My Home App branding.
Primary navigation: highlights Our Products, Inspiration, and Find a Store
content categories.
Products section page
right fold content
Footer.
The last major step in defining the information architecture for any experience is
defining the primary interaction: the navigation.
Navigation systems in UX generally fall across four areas:

• Primary: Navigation across primary content areas of the experience. Primary

navigation is typically present throughout the experience in the masthead or
header. Also called main navigation or global navigation.
• Secondary: Navigation within each primary content area, specific and distinct
to that content area.
• Tertiary/contextual: Alternative ways to navigate across the experience. This
type of navigation, often used for Related Content or Utilities, does not contain
duplicative navigation from the primary or secondary navigation choices.
• Footer: Utility and related navigation, typically at the very bottom of the page.

Ways to Shop: Includes common ways shoppers want to browse product

selections.
Brands: Filters products by the retailer's key brands for clothes.
Browse by Category: Enables a user to filter product selection by product
categories.

✓ Masthead: Typically, at the top of a website or software application (but in

different places for mobile apps), the masthead serves to orient the user within
the overall experience at any point, as well as to visibly brand the experience.

✓ Navigation: Navigation is typically categorized into primary and second-

navigation, with primary navigation focusing on primary Level 1 categories,
and secondary navigation enabling the user to move within a category.

✓ Content: The main content of the page. This can be written copy, images,
video, or other content.

✓ Related information: Typically, this includes content or links to content that

may often be associated in a tangential way.
✓ Home page template: Most home pages in any user experience
serve a variety of purposes.
✓ First, the home page must support a diverse set of users, who might
include potential customers, existing customers, members of the
press, job seekers, and others...
✓ Article template: Pages like the article template serve a more focused
and singular set of needs in form of an articles.