R.M.K.

COLLEGE OF ENGINEERING AND TECHNOLOGY

(Autonomous Institution)

RSM Nagar, Puduvoyal – 601206

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

22CS913 – UI/UX DESIGN LABORATORY MANUAL

II Year / 4th Sem

REGULATIONS 2022
 RMK College of Engineering and Technology
(An Autonomous Institution)
RSM Nagar, Puduvoyal-601206

INSTITUTION VISION

To be knowledge hub of providing quality technical education and promoting research for
building up of our nation and its contribution for the betterment of humanity.

INSTITUTION MISSION

• To make the best use of state-of-the-art infrastructure to ensure quality technical education.
• To develop industrial collaborations to promote innovation and research capabilities.
• To inculcate values and ethics to serve humanity
 RMK College of Engineering and Technology
(An Autonomous Institution)
RSM Nagar, Puduvoyal-601206

Department of Computer Science and Engineering

VISION
To be a source of knowledge in the field of Computer Science and Engineering to
cater to the growing need of industry and society.

MISSION

• To avail state-of-the art infrastructure for adopting cutting edge technologies and
encouraging research activities.
• To promote industrial collaborations for professional competency.
• To nurture social responsibility and ethics to become worthy citizens.

PROGRAM EDUCATIONAL OBJECTIVES

Graduates of Computer Science and Engineering Program will

PEO I: Become globally competent professionals in all spheres and pursue higher education
world over.
PEO II: Successfully carry forward domain knowledge in computing and allied areas to solve
complex real world engineering problems.
PEO III: Continuously upgrade their technical knowledge and expertise to keep pace with the
technological revolution.
PEO IV: Serve the humanity with social responsibility combined with ethics.

PROGRAM SPECIFIC OUTCOMES

Graduates of Computer Science and Engineering Program will be able to:

• Analyze, design and develop computing solutions by applying foundational concepts of Computer
Science and Engineering.
• Apply software engineering principles and practices for developing quality software for scientific
and business applications.
• To implement cost-effective solutions for the betterment of both industry and society with the
technological skills acquired through the Centers of Excellence.
 RMK College of Engineering and Technology
(An Autonomous Institution)
RSM Nagar, Puduvoyal-601206

Department of Computer Science and Engineering

PROGRAM OUTCOME

• Engineering Knowledge: Apply knowledge of mathematics, science, engineering

fundamentals and an engineering specialization to the solution of complex engineering
problems.
• Problem Analysis: Identify, formulate, research literature and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences and engineering sciences.
• Design/ Development of Solutions: Design solutions for complex engineering problems
and design system components or processes that meet specified needs with appropriate
consideration for public health and safety, cultural, societal and environmental
considerations.
• Conduct investigations of complex problems using research-based knowledge and
research methods including design of experiments, analysis and interpretation of data and
synthesis of information to provide valid conclusions.
• Modern Tool Usage: Create, select and apply appropriate techniques, resources and
modern engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.
• The Engineer and Society: Apply reasoning informed by contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to professional engineering practice.
• Environment and Sustainability: Understand the impact of professional engineering
solutions in societal and environmental contexts and demonstrate knowledge of and need
for sustainable development.
• Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of engineering practice.
• Individual and Team Work: Function effectively as an individual, and as a member or
leader in diverse teams and in multi-disciplinary settings.
• Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as being able to comprehend and
write effective reports and design documentation, make effective presentations and give
and receive clear instructions.
• Project Management and Finance: Demonstrate knowledge and understanding of
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
• Life-long Learning: Recognize the need for and have the preparation and ability to Engage
in independent and life- long learning in the broadest context of technological Change.
 RMK College of Engineering and Technology
(An Autonomous Institution)
RSM Nagar, Puduvoyal-601206

Department of Computer Science and Engineering

GENERAL LABORATORY INSTRUCTIONS

1. Students are advised to come to the laboratory at least 5 minutes before (to
starting time), those who come after 5 minutes will not be allowed into the lab.
2. Plan your task properly much before to the commencement, come prepared to
the lab with the synopsis / program / experiment details.
3. Student should enter into the laboratory with:
a. Laboratory observation notes with all the details (Problem statement, Aim,
Algorithm, Procedure, Program, Expected Output, etc.,) filled in for the lab session.
b. Laboratory Record updated up to the last session experiments and other utensils
(if any) needed in the lab.
c. Proper Dress code and Identity card.
4. Sign in the laboratory login register, write the TIME-IN, and occupy the
computer system allotted to you by the faculty.
5. Execute your task in the laboratory, and record the results / output in the lab
observation notebook, and get certified by the concerned faculty.
6. All the students should be polite and cooperative with the laboratory staff, must
maintain the discipline and decency in the laboratory.
7. Computer labs are established with sophisticated and high end branded
systems,which should be utilized properly.
8. Students / Faculty must keep their mobile phones in SWITCHED OFF mode
during the lab sessions. Misuse of the equipment, misbehaviors with the staff and
systems etc., will attract severe punishment.
9. Students must take the permission of the faculty in case of any urgency to go
out; if anybody found loitering outside the lab / class without permission during
working hours will be treated seriously and punished appropriately.
10. Students should LOG OFF/ SHUT DOWN the computer system before he/she
leaves the lab after completing the task (experiment) in all aspects. He/she must
ensure the system / seat is kept properly.
 SYLLABUS

UI/UX DESIGN (Lab Integrated) L T P C

22CS913
0 0 4 2
OBJECTIVES:

The Course will enable learners:

• Explain the principles of User Interface (UI) in order to do design with intention.
• Define the User eXperience (UX) and the psychology behind user decision making.
• Discuss about UX process and user Psychology.
• Apply technology for designing web applications with multimedia effects.
• Create a wireframe and prototype..

●
LIST OF EXERCISES:
1. Design UI for a Game website.
2. Design one-page UI for a website.
3. Design UI for a mobile.
4. Explore the Look and Feel of the new Project developed in Ex1.
5. Design a mascot for an imaginary brand.
6. Create a Sample Pattern Library for a product (Mood board, Fonts, Colors based
on UI principles).
7. Design a mock-up website for a service sector company.
8. Create a brainstorming feature for proposed product.
9. Sketch, design with popular tool and build a prototype and perform usability
testing and identify
improvements.
10. Design a mobile mock-up website for an online store.

30 PERIODS(THEORY) +30 PERIODS (LAB) TOTAL: 60 PERIODS

 LIST OF CONTENTS

S.No. Name of the Experiment Page No.

1 DESIGN UI FOR A GAMING WEBSITE
2 DESIGN ONE-PAGE UI FOR A WEBSITE
3 DESIGN UI FOR A MOBILE APPLICATION
4 EXPLORE THE LOOK AND FEEL OF THE
PROJECT
5 DESIGN A MASCOT FOR AN IMAGINARY
BRAND
6 CREATING A SAMPLE PATTERN LIBRARY
7 DESIGNING A MOCK-UP WEBSITE
8 CREATE A BRAINSTORMING FEATURE FOR
PROPOSED PRODUCT
9 SKETCH, DESIGN WITH POPULAR TOOL,
BUILD A PROTOTYPE, PERFORM USABILITY
TESTING, AND IDENTIFY IMPROVEMENTS
10 DESIGN A MOBILE MOCK-UP WEBSITE FOR AN
ONLINE STORE
EX NO: 1 DESIGN UI FOR A GAMING WEBSITE
DATE:

AIM: Designing a UI for a game website requires careful consideration of

various factors, including user experience, aesthetics, and functionality.
Here's a step-by-step approach to designing the UI for a game website,
along with the algorithm and procedures involved:

Research and Planning:

Define Goals: Determine the purpose of the website, target audience, and
key functionalities.
Competitor Analysis: Study other game websites to identify trends,
strengths, and weaknesses.
User Personas: Create personas representing different types of users who
might visit the website.

Wire framing:
Sketching: Roughly sketch the layout of the website including key
elements such as navigation bars, content areas, and interactive
components.
Prototyping: Create digital wireframes using tools like Adobe XD, Sketch,
or Figma to visualize the layout and flow of the website.

UI Design:
Color Scheme: Choose a color palette that reflects the theme of the website
and appeals to the target audience.
Typography: Select fonts that are easy to read and complement the overall
design.

Visual Elements: Incorporate images, icons, and graphics to enhance the

visual appeal and convey information effectively.
Consistency: Maintain consistency in design elements such as buttons,
headings, and spacing throughout the website.
 Navigation:
Intuitive Structure: Organize the content in a logical hierarchy to facilitate
easy navigation.
Clear Labels: Use descriptive labels for navigation menus and links to help
users understand where each link will take them.
Search Functionality: Implement a search feature to allow users to quickly
find specific games or content.

Responsive Design:
Adaptability: Ensure the website is optimized for various devices and
screen sizes, including desktops, laptops, tablets, and smart phones.
Mobile Optimization: Prioritize mobile-friendly design elements such as
touch-friendly buttons and responsive layouts.

Accessibility:
Contrast: Maintain sufficient color contrast to make the content accessible
to users with visual impairments.
Keyboard Navigation: Ensure all interactive elements can be accessed and
operated using keyboard shortcuts.
Alt Text: Provide descriptive alt text for images to assist users who rely on
screen readers.

Testing and Iteration:

Usability Testing: Gather feedback from real users to identify any usability
issues or areas for improvement.
A/B Testing: Experiment with different design variations to determine
which layout performs better in terms of user engagement and conversion.
Iterative Improvement: Continuously refine and optimize the UI based on
user feedback and analytics data.
ALGORITHM AND PROCEDURES:

User Registration/Login:
- Algorithm: Validate user input for registration and login forms.
- Procedure: Implement server-side validation to ensure security and
prevent unauthorized access.

Game Selection:
- Algorithm: Retrieve a list of available games from the database.
- Procedure: Use AJAX requests to dynamically update the game list
without reloading the page.

Game Details:
- Algorithm: Fetch detailed information about a selected game.
- Procedure: Utilize API calls to retrieve game data from external sources
or the website's database.

Game Search:
- Algorithm: Filter games based on user input.
- Procedure: Implement a search functionality that queries the database
and displays relevant results in real-time.

Payment Processing:
- Algorithm: Handle secure payment transactions.
- Procedure: Integrate payment gateways such as PayPal or Stripe and
encrypt sensitive information to ensure data security.

Feedback and Reviews:

- Algorithm: Allow users to submit feedback and reviews for games.
- Procedure: Create a form for users to input their feedback, and implement
a rating system to collect user reviews.

Accessibility:
Algorithm: Ensure compatibility with assistive technologies
 Procedure: Conduct accessibility audits using tools like WAVE or Axe,
and make necessary adjustments to improve accessibility.

Sample Design:

Step: 1 Step: 3

Step: 2 Final step.

RESULT:
Thus the above project to develop UI for a gaming website using
Figma application Implemented and executed successfully.
EX NO: 2 DESIGN ONE-PAGE UI FOR A WEBSITE

DATE:

Aim: To design a one-page user interface (UI) for a website using Figma.

Algorithm Design:
Content Planning: Identify the content to be included on the one-page
website, such as an introduction, services/products, testimonials, and
contact information.
Layout Design: Plan the layout of the one-page UI, considering the flow of
information and visual hierarchy. Determine the placement of each section
to ensure a smooth scrolling experience.
Wire framing: Create wireframes of the one-page website, outlining the
structure and arrangement of elements on the page. Focus on simplicity and
clarity in design, keeping in mind the target audience and purpose of the
website.
Visual Design: Utilize Figma's design tools to create a visually appealing
and cohesive design for the one-page website. Choose appropriate colors,
typography, and imagery to enhance the overall aesthetic and reflect the
brand identity.
Interactive Elements: Implement scroll-based interactions or anchor links
to navigate between sections seamlessly. Ensure that interactive elements
are intuitive and enhance user engagement without detracting from the user
experience.
Responsiveness: Optimize the UI design for various devices, including
desktop, tablet, and mobile screens. Test the responsiveness of the design
and make necessary adjustments to ensure consistency and usability across
different screen sizes.
Feedback and Iteration: Gather feedback from peers or stakeholders and
iterate on the design based on the feedback received. Make refinements to
the layout, visual elements, or interactions to improve the overall user
experience.
Finalization: Finalize the one-page UI design, ensuring that all sections are
well-organized and visually appealing. Prepare the design for presentation
or further development.

Sample Output: Fully designed and interactive one-page UI prototype for

the website using Figma.
Result: The designed one-page UI should effectively convey the website's content
and encourage user engagement through intuitive navigation and compelling
visuals.
EX NO: 3 DESIGN UI FOR A MOBILE APPLICATION
Date:

Aim: To design the user interface (UI) for a mobile application using
Figma.

Algorithm Design:
1. Define Purpose and Functionality: Identify the purpose of the mobile
application and its key features. Determine the functionality required to
fulfill the app's objectives and meet the needs of its target users.
2. User Flow Planning: Plan the user flow within the mobile application,
outlining the sequence of screens and interactions users will encounter.
Consider the logical progression of tasks and ensure a seamless navigation
experience.
3. Screen Sketching: Sketch rough drafts of each screen of the mobile app,
focusing on layout and content organization. Pay attention to the placement
of elements such as navigation menus, buttons, forms, and multimedia
content.
4. Wire framing: Create wireframes for the mobile app screens using
Figma's design tools. Translate the screen sketches into digital wireframes,
refining the layout and structure of each screen based on usability
principles.
5. Visual Design: Apply visual design elements to the wireframes,
including color schemes, typography, icons, and imagery. Maintain
consistency in design across screens and adhere to platform-specific design
guidelines (e.g., Material Design for Android, Human Interface Guidelines
for iOS).
6. Interactive Prototyping: Use Figma's prototyping features to create
interactive prototypes of the mobile app. Define transitions between
screens, gestures, and micro interactions to simulate the app's behavior and
user interactions.
7. Feedback and Iteration: Solicit feedback from peers, instructors, or
potential users on the mobile app prototype. Evaluate the usability and
effectiveness of the UI design and make iterative improvements based on
feedback received.
8. Testing and Optimization: Conduct usability testing sessions with target
users to identify any usability issues or pain points in the UI design. Make
necessary optimizations to enhance the user experience and improve
usability.
9. Finalization: Finalize the UI design for the mobile application, ensuring
that all screens are visually appealing, functional, and user-friendly.
Prepare the design files for handoff to developers for implementation.
 Sample Output: Fully designed and interactive mobile app UI prototype
created using Figma.

Result: The designed mobile app UI should provide a seamless and intuitive user
experience, allowing users to accomplish tasks efficiently and effectively while
engaging with the app's content and features.
EX NO: 4

Date:

Explore the Look and Feel of the New Project

Developed in Experiment 1

Aim: To explore the look and feel of the new project developed in
Experiment 1, focusing on the visual design and user experience aspects .

Algorithm Design:

Review Previous Work: Review the UI design prototype created for the
game website in Experiment 1. Familiarize yourself with the layout, visual
elements, and interactive components developed for the project.
Identify Areas for Improvement: Identify any areas of the UI design that
may require refinement or enhancement. Consider aspects such as visual
aesthetics, usability, accessibility, and alignment with project objectives.
Gather Inspiration: Research and gather inspiration from other game
websites or related projects to explore different design styles, trends, and
techniques. Analyze successful examples and identify elements that could
inspire improvements in your project.
Visual Exploration: Experiment with different visual styles, colour palettes,
typography, and imagery to explore alternative looks for the game website
UI. Use Figma's design tools to create mock-ups or mood boards
showcasing different design concepts.
User Experience Enhancement: Evaluate the user experience of the game
website UI prototype and brainstorm ideas for enhancing usability and
engagement. Consider user feedback, accessibility guidelines, and best
practices in UX design.
Iterative Design: Iterate on the existing UI design based on insights gained
from the exploration process. Make refinements to the layout, visual
elements, and interactive components to improve the overall look and feel
of the project.
Feedback and Evaluation: Solicit feedback from peers, instructors, or
potential users on the updated UI design. Gather insights on the
effectiveness of the design changes and identify areas for further
improvement.
Finalization: Finalize the updated UI design for the game website,
incorporating feedback received and ensuring that all elements are cohesive
and aligned with project objectives.
 Output: Revised UI design concept for the game website project,
showcasing improvements in visual aesthetics and user experience.

Result: The exploration and refinement process should result in a visually

appealing and user-friendly UI design that effectively communicates the theme and
objectives of the game website project.
EX NO: 5 DESIGN A MASCOT FOR AN IMAGINARY BRAND
Date:

Brand Name: Pixel Pals

Aim: Create a mascot embodying Pixel Pals' values of creativity, innovation,
and fun, appealing to tech enthusiasts of all ages while reflecting inclusivity
and positivity.

Algorithm Design:
Brainstorming and Concept Development:
● Gather inspiration from iconic characters, animals, and elements related to
technology and digital media.
● Consider the brand's identity, values, and target audience.
● Sketch initial ideas and concepts for the mascot.
Defining Characteristics:
● Identify key characteristics that the mascot should possess, such as
friendliness, creativity, and adaptability.
● Determine the physical appearance, including color scheme, shape, and any
unique features or accessories.
Sketching and Refinement:
● Develop rough sketches of potential mascot designs, exploring different
poses, expressions, and variations.
● Refine the sketches based on feedback and iterate to create a cohesive and
appealing design.
Digital Rendering:
● Translate the refined sketches into digital format using design software.
● Add color, shading, and detailing to bring the mascot to life digitally.
● Experiment with different visual elements to enhance the overall design.
Feedback and Iteration:
● Solicit feedback from stakeholders, including team members and target
audience representatives.
● Evaluate the design based on criteria such as appeal, brand alignment, and
versatility.
● Make necessary revisions and refinements based on feedback to improve the
mascot's effectiveness.

Sample Output: The output of the algorithm design process is a finalized

digital rendering of the Pixel Pals mascot. This includes:
● High-resolution illustration in various poses.
● Color palette reflecting brand identity.
● Optional variations for versatility.
Result: Pixel Pals mascot is a lovable symbol, resonating with tech

enthusiasts and reinforcing brand values. Its friendly design fosters positive
associations, enhancing brand recognition across marketing channels.
EX NO: 6 CREATING A SAMPLE PATTERN LIBRARY
Date:

Aim: To develop a sample pattern library for a product, including mood board,
font selection, and color palette based on UI principles.

Algorithm Design:

Mood Board Creation:

● Gather inspiration from various sources including websites, design
galleries, and existing brand identities.
● Compile images, colors, textures, and typography samples that align with
the desired design aesthetic.
● Organize the collected materials into a cohesive mood board that represents
the overall look and feel of the product.
Font Selection:
● Explore different font families and styles to identify suitable options for
headings, subheadings, and body text.
● Consider factors such as readability, visual appeal, and alignment with the
mood board.
● Select primary and secondary fonts that complement each other and
contribute to a unified design language.
Color Palette Development:
● Identify primary brand colors and accent colors based on the mood board
and desired brand identity.
● Experiment with color combinations to create a cohesive palette that
reflects the brand's personality and values.
 ● Ensure sufficient color contrast for readability and accessibility, following
UI principles.

Application of UI Principles:
● Apply the selected fonts and color palette to create a sample UI design,
adhering to UI principles such as consistency, hierarchy, accessibility,
simplicity, feedback, and usability.
● Design UI elements such as buttons, navigation bars, and typography
treatments with attention to detail and alignment with the established
pattern library.
Output:
The output of this experiment includes:
● A mood board showcasing visual inspiration and design direction for the
product.
● Selection of primary and secondary fonts along with their respective usage
guidelines.
● A color palette consisting of primary brand colors and accent colors,
adhering to UI principles.
● Sample UI design showcasing the application of the pattern library in
creating cohesive and visually appealing user interfaces.
Result: Students gain practical experience in creating a pattern library based on UI
principles, fostering design cohesion and practical application skills. They produce
tangible assets applicable to real-world design projects.
EX NO: 7 DESIGNING A MOCK-UP WEBSITE
Date:

Aim: The aim of this experiment is to design a mock-up website for a service
sector company.

Algorithm Design:
Research and Planning:
● Conduct comprehensive research on the target audience, competitors, and
industry trends.
● Define the goals and objectives of the website to align with the company's
business objectives.
● Develop a site map outlining the structure and navigation of the website to
ensure user-friendly browsing experience.
Wire framing:
● Create low-fidelity wireframes to sketch out the basic layout, focusing on
content hierarchy and user flow.
● Map out key elements such as header, footer, navigation menu, and content
sections to establish the website's structure.
Visual Design:
● Select an appropriate color scheme and typography that reflects the
company's brand identity and appeals to the target audience.
● Design the visual elements of the website including logos, icons, images,
and graphics to enhance the overall aesthetic appeal.
● Develop high-fidelity mock-ups using design software, incorporating the
chosen visual elements to create a polished and professional design.
Prototyping:
● Utilize prototyping tools to create interactive prototypes of the website,
allowing for user interaction and navigation simulation.
● Implement clickable links and transitions to provide a realistic preview of
the website's functionality and user experience.
User Testing:
● Conduct usability testing with a sample audience to gather valuable
feedback on the prototype's usability and user experience.
● Analyze the feedback received and identify areas for improvement,
iterating on the design to address any usability issues or concerns raised by
users.

Sample Output:
The output of this experiment includes:
● A comprehensive site map outlining the website's structure and navigation.
● Low-fidelity wireframes depicting the basic layout and content hierarchy of
the website.
 ● High-fidelity mock-ups showcasing the visual design elements of the
website, including color scheme, typography, and imagery. Interactive
prototypes simulating user interaction and navigation to provide a realistic
preview of the website's functionality

Result: Students demonstrate proficiency in UI/UX design by creating an

intuitive and visually appealing mock-up website for a service sector company.
Through user testing and iteration, they refine the design to meet user needs
effectively.
EX NO: 8
Date:

CREATE A BRAINSTORMING FEATURE FOR

PROPOSED PRODUCT

Aim: To design and implement a brainstorming feature for a proposed

product using Figma.

Algorithm Design:
Define Product Concept: Define the concept and purpose of the proposed
product that will incorporate the brainstorming feature. Identify the target
audience and the problem the product aims to solve.
Brainstorming Feature Planning: Plan the functionality and user
interface of the brainstorming feature. Determine the key components, such
as idea submission, voting, commenting, and collaboration tools.
User Flow Mapping: Map out the user flow for the brainstorming feature,
outlining the sequence of actions users will take to participate in the
brainstorming process. Consider the steps for submitting ideas, reviewing
submissions, voting, and providing feedback.
Wire framing: Create wireframes of the brainstorming feature screens
using Figma's design tools. Design the layout and structure of each screen,
focusing on usability and clarity of information.
Visual Design: Apply visual design elements to the wireframes, including
colour schemes, typography, icons, and imagery. Ensure that the design
reflects the brand identity and encourages user engagement.
Interactive Prototyping: Use Figma's prototyping features to create an
interactive prototype of the brainstorming feature. Define transitions
between screens and interactions such as submitting ideas, voting, and
commenting.
Collaboration Tools Integration: Explore options for integrating
collaboration tools or features that facilitate communication and idea
sharing among users. Consider features such as real-time chat, notification
systems, and user profiles.
Usability Testing: Conduct usability testing sessions with target users to
evaluate the effectiveness of the brainstorming feature. Gather feedback on
the user experience, interface design, and functionality.
Feedback and Iteration: Gather feedback from usability testing sessions
and iterate on the design based on user input. Make refinements to improve
usability, address usability issues, and enhance the overall user experience.
Finalization: Finalize the design and implementation of the brainstorming
feature, ensuring that it meets the requirements and objectives of the
proposed product. Prepare the design files for presentation or further
development.
Output: Completed UI design and interactive prototype of the brainstorming
feature for the proposed product using Figma.

Result: The designed brainstorming feature should provide users with an intuitive
and engaging platform for generating ideas, collaborating with others, and
contributing to the product development process effectively.
EX NO: 9

Date:

SKETCH, DESIGN WITH POPULAR TOOL, BUILD A

PROTOTYPE, PERFORM USABILITY
TESTING, AND IDENTIFY IMPROVEMENTS

Aim: To sketch, design, prototype, conduct usability testing, and identify

improvements for a proposed product feature using Figma.

Algorithm Design:
Sketching: Begin by sketching rough drafts of the proposed product
feature on paper or using digital sketching tools. Explore different layout
options, interface elements, and user interactions to visualize the concept.
Design with Figma: Transfer the sketched designs to Figma and use its
design tools to create high-fidelity mock-ups of the product feature. Pay
attention to visual design elements, layout composition, and user
experience considerations.
Prototyping: Use Figma's prototyping features to build an interactive
prototype of the product feature. Define user flows, transitions between
screens, and interactive elements to simulate the user experience.
Usability Testing Plan: Develop a usability testing plan outlining the
objectives, tasks, and criteria for evaluating the product feature's usability.
Identify target users and set up testing sessions to gather feedback.
Usability Testing: Conduct usability testing sessions with representative
users to evaluate the effectiveness and usability of the product feature
prototype. Observe user interactions, gather feedback, and note any
usability issues or pain points.
Feedback Analysis: Analyze the feedback collected from usability testing
sessions to identify common themes, insights, and areas for improvement.
Prioritize feedback based on severity and impact on the user experience.
Iterative Design: Iterate on the design of the product feature based on
insights gained from usability testing and feedback analysis. Make
refinements to address usability issues, improve user flow, and enhance
visual design elements.
Prototype Update: Update the prototype with the iterative design changes
and improvements. Ensure that the revised prototype reflects the desired
user experience and meets the objectives of the proposed product feature.
Usability Retesting: Conduct additional usability testing sessions with the
updated prototype to validate the effectiveness of the design improvements.
Gather feedback on the revised prototype and assess the impact of the
changes.
Finalization: Finalize the design of the product feature based on the
iterative design process and usability testing results. Prepare the design
files and usability testing reports for presentation or further development.

Output: Revised UI design and interactive prototype of the proposed

product feature, along with usability testing reports documenting feedback
and improvements.
Result: The iterative design process and usability testing should result in a refined
and user-friendly product feature prototype that effectively addresses user needs
and enhances the overall user experience.
EX NO: 10

Date:

DESIGN A MOBILE MOCK-UP WEBSITE FOR AN

ONLINE STORE

Aim: To design the user interface for a mobile mock-up website for an
online store using Figma.
Algorithm Design:
Define Website Requirements: Define the requirements and objectives of
the mobile mock-up website for the online store. Identify key features such
as product listings, search functionality, shopping cart, and checkout
process.
User Flow Planning: Plan the user flow within the mobile website,
outlining the sequence of screens and interactions users will encounter.
Consider the steps for browsing products, adding items to cart, and
completing purchases.
Wire framing: Create wireframes of the mobile website screens using
Figma's design tools. Design the layout and structure of each screen,
focusing on usability and clarity of information.
Visual Design: Apply visual design elements to the wireframes, including
colour schemes, typography, icons, and imagery. Ensure that the design
reflects the brand identity of the online store and provides a visually
appealing experience for users.
Product Listing: Design screens for displaying product listings, including
product images, descriptions, prices, and user reviews. Explore options for
filtering and sorting products to enhance the browsing experience.
Shopping Cart and Checkout: Design screens for the shopping cart and
checkout process, including adding/removing items from the cart, updating
quantities, and entering shipping/payment information. Ensure a streamlined
and intuitive checkout flow.
Responsive Design: Optimize the UI design for various mobile devices,
including smart phones and tablets. Test the responsiveness of the design
and make adjustments to ensure consistent usability across different screen
sizes.
Interactive Prototyping: Use Figma's prototyping features to create an
interactive prototype of the mobile website. Define transitions between
screens and interactions such as tapping on product listings, navigating
through categories, and completing purchases.
Usability Testing: Conduct usability testing sessions with target users to
evaluate the effectiveness and usability of the mobile website prototype.
Gather feedback on the user experience, interface design, and functionality.
Feedback and Iteration: Gather feedback from usability testing sessions
and iterate on the design based on user input. Make refinements to improve
usability, address usability issues, and enhance the overall user experience.
Finalization: Finalize the design of the mobile mock-up website,
incorporating feedback received and ensuring that all elements are cohesive
and aligned with the objectives of the online store.
Output: Completed UI design and interactive prototype of the mobile mock-up
website for the online store using Figma.

Result: The designed mobile mock-up website should provide users with a
seamless and enjoyable shopping experience, allowing them to browse products,
add items to cart, and complete purchases efficiently on their mobile devices.