EX.

NO: 1

ANALYSING AN EXISTING APPLICATION – NETFLIX

AIM:
To analyse an existing application NETFLIX.
PROCEDURE:
Step 1: Identifying problem
• The vast array of content available on Netflix can create navigational complexity for
users. With numerous categories, genres, and recommendations, users may struggle to
find content that aligns with their preferences. This complexity can lead to frustration
and disengagement with the platform.
• The extensive catalog of content on Netflix can overwhelm users with choices, leading
to decision fatigue. When faced with too many options, users may find it challenging
to make a decision, resulting in indecision or avoidance of the platform altogether.
• Netflix's extensive library of content may overwhelm users by inundating them with an
excessive amount of information. This content overload can make it difficult for users
to focus on specific titles or genres, diminishing the overall user experience and
satisfaction with the platform.
Step 2: Login
• The Netflix login page(Fig 1.1) features a minimalist interface with secure
authentication, password recovery options, and language selection, inviting users to
seamlessly access their personalized content.

Fig. 1.1 Login

Step 3: Content Discovery Hub

• The Content Discovery Hub(Fig 1.2) leverages user data to offer personalized
recommendations, enhancing relevance and engagement by suggesting content
aligned with individual preferences and viewing history.
 • By presenting a curated selection of recently watched, recommended, and trending
content in one centralized location, the Content Discovery Hub streamlines the
browsing experience, encouraging users to explore and discover new titles.

Fig. 1.2 Content Discovery Hub

Step 4: Multiple profiles

• Multiple profiles(Fig 1.3) on Netflix allow each user to have their own personalized
experience, including customized recommendations, watchlists, and viewing history.
This ensures that each user's preferences are catered to, enhancing overall satisfaction
with the platform.
• Multiple profiles facilitate family sharing by enabling different family members to have
their own dedicated profiles within a single Netflix account. This allows family
members to manage their own viewing preferences and continue watching their favorite
shows and movies without interfering with others' recommendations or watchlists.
 Fig 1.3 Profiles

Step 5: Exploring
• Designing the search bar involves considerations of placement, size, and functionality
to ensure it is easily accessible and intuitive for users to locate. The designer must
prioritize user needs and behaviors to optimize the search experience.
• From a design perspective, the search bar(Fig 1.4) should seamlessly integrate with
the overall UI/UX design of the Netflix platform. This involves attention to aesthetics,
typography, and visual hierarchy to ensure the search bar complements the design
language while remaining prominent enough to catch users' attention when needed.

Fig 1.4 Explore

Step 6: Settings
• Designing Netflix's settings includes features for users to manage their viewing
preferences, such as adjusting autoplay settings, language preferences, and content
maturity ratings, enhancing the viewing experience according to individual
preferences.
• Netflix settings(Fig 1.5) encompass functionalities for managing account details,
subscription plans, and viewing history, providing users with control over their
account settings and facilitating a seamless user experience across devices.

Fig 1.5 Settings

Step 7: My list
• "My List"(Fig 1.6) on Netflix allows users to curate a personalized collection of
movies and TV shows they intend to watch. It serves as an organizational tool,
enabling users to keep track of content they're interested in and easily access it later.
• The "My List" feature ensures continuity in the viewing experience by allowing users
to pick up where they left off across different devices. It enhances user convenience
by providing a centralized location for managing and prioritizing content,
streamlining the content discovery process.
 Fig 1.6 Profile

RESULT:
Thus, an existing application telegram was analysed and its functionalities were
explained in detail.
 EX NO: 2
DESIGN A NON-VISUAL PROTOTYPE

AIM:
To design a non-visual prototype for Skin Care Application.
DESCRIPTION:
A non-visual prototype is a representation of a product or system that focuses on
functionality, interactions, and behaviour without emphasizing visual design. It typically
includes wireframes, user flows, or written descriptions, providing a tangible outline of the
user experience without incorporating detailed visual elements.
Types of Non-Visual Prototypes:
• Wireframes: Providing skeletal structures outlining key components and relationships.
• User Flow Diagrams: Visually mapping the sequence of interactions.
• Written Descriptions: Articulating expected behaviour, functional requirements, and
user interactions.
Purpose and Focus:
Non-visual prototypes prioritize refining user workflows, feature logic, and overall usability.
They allow for early collaboration and validation of ideas before investing in detailed visual
design.
Role in Collaboration and Iteration:
Emphasizing functionality over aesthetics facilitates collaboration among stakeholders. It
enables iterative refinement of core user experience elements.
PROCEDURE:
Step 1: Design the overview of the application.
Step 2: The design of the front page should interact with the user
Step 3: The design that has been created for the application should attract the user.
Step 4: Create buttons, to navigate to the next page of the application.
Step 5: The titles must be highlighted, so that the variation between the content can be
noticed easily.
Step 6: Login page contains the Email and the password.
Step 7: Once after the login page, the application type is been identified.
Step 8: Now the applications prototype can be shared and published.
RESULT:
Thus, the Non-Visual Prototype for Skin care Application was done successfully.
 EX. NO: 1(b)

STUDY ABOUT CUSTOM CONTROLS AND OPERATIONAL

CONTROLS

AIM:
To study and analyse the custom control and operational control tools for Facebook.
PROCEDURE:
CUSTOM CONTROL
Custom control in UI/UX design refers to the creation and implementation of unique or
specialized user interface elements that are tailored to the specific needs and requirements of
an application.
Profile Customization:
• Step 1: Tap on your profile picture at the bottom right to access your profile.
• Step 2: Click on "Edit Profile" to customize your profile picture, display name, bio,
website link, and contact information.
• Step 3: Add a profile picture, change your display name, and provide additional
personal details.
• Step 4: Save your changes to update your profile.

Fig. 1.1 Profile Customization

Post Creation:
• Step 1: Tap the "+" icon at the bottom center to create a new post.
• Step 2: Choose the type of content to post (photo, video, carousel, etc.).
• Step 3: Apply filters, edit the content, and add captions or tags.
• Step 4: Share the post to your feed, stories, or close friends.
 • Step 5: Optionally, enable additional settings like location tagging or post to other
connected platforms.

Fig. 1.2 Post Creation

Story Creation:
• Step 1: Swipe right from the home feed or tap your profile picture to create a story.
• Step 2: Capture a photo or record a video, or choose content from your camera roll.
• Step 3: Add stickers, text, emojis, or drawings to enhance your story.
• Step 4: Use interactive features like polls or questions.
• Step 5: Share the story to your followers or close friends.

Fig. 1.3 Story Creation

Highlight Creation:
• Step 1: Go to your profile and tap on the "+ New" button below your bio.
• Step 2: Select the stories you want to include in the highlight.
 • Step 3: Choose a cover photo and add a title for the highlight.
• Step 4: Arrange the stories in the desired order.
• Step 5: Tap "Add" to create the highlight on your profile.

Fig. 1.4 Highlight Creation

OPERATIONAL CONTROLS
Operational control in UI/UX design involves the design and arrangement of user interface
elements to facilitate efficient and effective operation of the software or system.
Navigation:
• Step 1: Use the bottom navigation bar to switch between Home, Search, Reels, Shop,
and Profile.
• Step 2: Tap on the icons or swipe horizontally to navigate between tabs.
• Step 3: Access additional features like Activity or Direct Messages from the top menu.
 Fig. 1.5 Navigation

Stories and Direct Messages:

• Step 1: View stories by tapping on your profile picture at the top of the home feed.
• Step 2: Swipe left to view the next story or swipe right to go back.
• Step 3: Respond to stories by swiping up and sending a direct message.
• Step 4: Tap the paper airplane icon to access direct messages and engage in private
conversations.
• Step 5: Use the camera icon in direct messages to send disappearing photos and videos.

Fig. 1.6 Messages

Explore and Search:

• Step 1: Tap on the magnifying glass icon to access the Search tab.
• Step 2: Explore content based on your interests, trending topics, or popular accounts.
• Step 3: Use the search bar to find specific users, hashtags, or locations.
• Step 4: Discover new accounts and content by scrolling through the Explore feed.
• Step 5: Engage with content by liking, commenting, or saving posts.

Fig. 1.7 Search

Notifications:
• Step 1: Access notifications by tapping on the heart icon in the bottom menu.
• Step 2: View likes, comments, and other interactions on your posts.
• Step 3: Check notifications for new followers, likes, and comments on your content.
• Step 4: Manage notification settings by tapping on the gear icon in the top right.
• Step 5: Clear notifications or mark them as read.

Fig. 1.8 Notifications

Settings and Privacy:

• Step 1: Access settings by tapping on the three horizontal lines in the top right corner
of your profile.
• Step 2: Navigate through settings to customize account privacy, security, and
notification preferences.
• Step 3: Adjust account settings, such as switching to a business or creator account.
• Step 4: Manage linked accounts, blocked users, and account activity.
• Step 5: Explore additional privacy and security features, such as two-factor
authentication.

RESULT:
Thus, the various custom controls and operational controls in Instagram was studied
and analysed successfully.
 EX. NO: 1(c)

INFORMATION SEARCH MODULE OF FLIPKART

AIM:
To analyse and study the information search module of Flipkart.
PROCEDURE:
INFORMATION SEARCH MODULE IN AMAZON
An "information search module" typically refers to a component or feature within a user
interface that facilitates the search for information. This module is designed to help users find
specific content, data, or details within an application or website. The goal is to enhance user
experience by providing an efficient and user-friendly way to search for information.
Step 1: Open the Flipkart application.
Step 2: Search Bar
• Located prominently at the top of the Flipkart app interface, the search bar allows
users to enter product names, keywords, or categories.

Fig. 1.1 Search bar

Step 3: Auto-suggestions
• As users type in the search bar, Flipkart provides real-time auto-suggestions,
predicting and displaying potential products, categories, or popular searches.

Fig. 1.2 Suggestions

Step 4: Advanced Filters
• After initiating a search, users can apply advanced filters to narrow down results by
department, brand, price range, customer ratings, and other relevant criteria.
 Fig. 1.3 Advanced Filters

Step 5: Search Results Page

• The search results page displays a grid of products with images, names, prices, and
brief descriptions, allowing users to quickly assess and compare options.

Step 6: Highlighting and Previews

• Relevant search terms are often highlighted within product names and descriptions,
providing a quick preview of how the keywords are related to the displayed products.

Fig. 1.4 Highlighting and Previews

Step 7: Advanced Search Options

• Users can employ advanced search features such as barcode scanning, voice search,
and image recognition to find products using alternative methods.

Step 8: Feedback Mechanism

• Amazon provides feedback on search results, including the total number of matches
and recommendations for refining the search if no results are found.
Step 9: Integration with Navigation
• The search bar is seamlessly integrated into the overall navigation structure, allowing
users to transition from browsing categories to conducting a specific search without
disruption.
 Fig. 1.5 Navigation

Step 10: Responsive Design

• The Amazon app is designed to be responsive across various devices, ensuring a
consistent and user-friendly search experience on smartphones and tablets.

Fig. 1.6 Responsive Design

Step 11: Accessibility Considerations

• Amazon's app incorporates accessibility features, making it usable for individuals
with different abilities, including voice command support, screen reader compatibility,
and other accessibility enhancements.

RESULT:
Thus, the UI/UX information search module has been studied and analysed
successfully.
 EX. NO: 1(d)

SHARING AND EXPORTING MODULES IN WHATSAPP

AIM:
To analyse and study the sharing and importing modules in Whatsapp.
PROCEDURE:
The "sharing and exporting module" typically refers to the user interface elements and
functionalities that allow users to share or export content from an application. This module is
essential for enabling users to distribute, save, or utilize information they interact with within
the app.
SHARING MODULE
Step 1: Share Page
A prominent button or icon that, when clicked or tapped, initiates the sharing process.

Fig. 1.1 Share Page

Step 2: Share Options

After clicking the share button, a menu or modal appears with various sharing options. This
could include sharing via social media platforms, email, messaging apps, or generating
shareable links.
 Fig. 1.2 Share Options

Step 3: Social Media Integration

Integration with popular social media platforms, allowing users to directly share content to
their profiles or feeds.
Step 4: Direct Messaging
Options to share content through direct messaging services, facilitating one-on-one or group
sharing.

Fig. 1.3 Direct Messaging

Step 5: Copy Link

A feature to copy a shareable link to the clipboard, enabling users to share content with others
via any communication channel.
 Fig. 1.4 Copy Link

EXPORTING MODULE
Step 1: Export Chat
A designated chat or option that triggers the export functionality.

Fig. 1.5 Export chat

Step 2: Export Formats

Selection of different file formats or options for exporting content. For example, exporting a
document as a PDF, an image in various resolutions, or data in a downloadable format and
audio
 Fig. 1.6 Export Formats

Step 3: Customization Options

Settings that allow users to customize exported content, such as adjusting the quality,
dimensions, or including/excluding certain elements.
Step 4: Export Confirmation
A confirmation dialog or message to inform users that the export process is complete and
provide them with the necessary details or links.
Step 5: Cloud Integration
Integration with cloud storage services to allow users to directly export and save content to
their cloud accounts.

Fig. 1.7 Cloud Integration

RESULT:
Thus, sharing and export modules in MS word have been analysed and studied
successfully.
 EX. NO: 3(a)

VIDEO STREAMING APP – NEOPRIME

AIM:
To design a video streaming app - Neoprime using the designing tool Figma.
PROCEDURE:
Step-1: Front Page Overview
• The front page of the app presents users with title screen having “Sign Up”.

Fig. 3.1 Streaming App

Step-2: Home page

• Users can discover recently added movies, TV shows, or original content, keeping them
up-to-date with the latest releases and ensuring fresh content discovery.
• The homepage(Fig 3.2) features a variety of genre categories, such as action, comedy,
drama, or documentaries, allowing users to explore content based on their specific
interests or moods.
 Fig. 3.2 Home page

Step-3: Episode Detailsd

• The episode details(Fig 3.3) page provides a synopsis or summary of the selected
episode, offering a brief overview of the plot and key events.
• It may suggest related episodes or recommend other content based on the selected
episode, encouraging users to continue watching and discover similar titles.

Fig. 3.3 Episode Details

Step-4: My list
• Designers ensure that the "My List"(Fig 3.4) feature is prominently displayed and easily
accessible within the user interface, employing visual cues such as icons or labels to
guide users to the feature.
• Designers focus on creating intuitive interaction patterns for adding, removing, and
organizing items within "My List," ensuring that users can perform these actions
seamlessly and without confusion.

Fig. 3.4 My list

Step-5: Recommendations
• Allow users to tailor their recommendations through preference settings, enabling them
to refine their viewing suggestions according to their interests and viewing habits.
• Integrate mechanisms for users to provide feedback on recommended content, helping
to improve the accuracy and relevance of future suggestions.

Fig. 3.5 Recommendations

RESULT:
Thus, a Beautify 101 application using the designing tool Figma was successfully
completed.
 EX. NO: 3(b)

BEAUTY PRODUCT ORDERING APP – BEAUTIFY 101

AIM:
To design a Beauty Product Ordering App -Beautify 101 using the designing tool
Figma.
PROCEDURE:
Step-1: Front Page Overview
• The front page of the app presents users with title screen having “Baby Wonderland”.

Fig. 3.1 Cosmetics App

Step-2: Login Page

• Next Page displays Login Page for User Account. User can login with their Username
and Password.
• The App provides another options for Login. The User can Login with their Google,
email Account.
 Fig. 3.2 Login

Step-3: Product Display

• After Logging in, users can access a dedicated space showcasing the categories of
Beauty Product.
• The Four Categories of the Product are Skin Care, Make Up, Hair Care, Fragrance.
• The User can search the product using Search Options.
• Furthermore, a seamless redirection to the profile settings page allows users to tailor
their app experience to their preferences, enhancing overall user satisfaction and
engagement.

Fig. 3.3 User Profile

Step-4: Skincare Routine
• The page offers Skincare routine for face.
• The page will update automatically for one week.
• Skincare routine page helps the user to know the basic needs.

Fig. 3.4 Tips

Step-5: Ordering Page

• The Ordering page offers a series of items with their prices, each categories contain
some items.
• By signing all the past and present orders are tracked.
• By clicking the items and Click button the item is ordered and payment page will be
displayed and order cancellation are available.

Fig. 3.5 Session

Step-6: Guided Makeup Videos

 • Upon selecting a videos, users are directed to an instructional video page providing
guidance.
• The User can understand and believe the product by watching the videos.
• This seamless integration of guided videos and interactive features ensures a user-
friendly and effective workout experience within the app.

Fig. 3.6 Videos

Step-7: Profile:
• The User Profile Settings encompass a range of essential options, including Edit Profile,
History, Favourite and Logouts.
• This centralized hub empowers users to manage and customize their app experience,
ensuring seamless control over scheduling, financial transactions, communication
preferences, and relevant notifications for a personalized and efficient user journey.

Fig. 3.7 Profile

RESULT:
Thus, a Beautify 101 application using the designing tool Figma was successfully
completed.