Ex no: 1

Date: Designing a Responsive layout for a societal application

Aim
To Design a Responsive Layout for a Societal application

Responsive Design
Designing websites that progressively change the layout to view across multiple devices as well as screen
sizes by scaling its content and elements accordingly is known as responsive design.

Breakpoints
Breakpoints are when the structure of your design changes to give the user the best possible layout in a
given screen size. Defining breakpoints helps you a lot in planning the layout when designing. Ifs best to start off
with designing for three important breakpoints.

 1440 for Web

 768 for iPad
 375 for iPhone

Constraints
Constraints determine how elements in your design should respond as you resize their Frames. This helps
you control how your designs look on different screen sizes. Working with constraints is a crucial part of the
workflow as you design for so many screens. Your layout needs to be flexible enough to react to any content or
screen change

Auto Layout
Auto layout allows elements to resize automatically according to the items inside it. It automatically
resizes the content according to the frame size. This means you don't have to keep resizing the elements every
time a change has been made or new items have been added.

Procedure
 Open Figma Tool. Start by defining breakpoints for different screen sizes. Common breakpoints include
desktop (1440), tablet (768), and mobile (375).
 In Figma, create frames for each breakpoint. These frames represent the different screen sizes your layout
will adapt to. You can name them accordingly, like "Desktop," "Tablet," and "Mobile."
 Design the components of your societal application, such as the navigation bar, sidebar, main content area,
buttons, and other UI elements. Ensure that the components are flexible and can adapt to different screen
sizes. Designing a Responsive layout for a societal application
 Utilize constraints to ensure that the components resize and reposition correctly as the screen size changes.
 Figma's Auto Layout feature is useful for creating flexible, responsive designs. Apply Auto Layout to
groups of components that need to resize dynamically. 6.Preview your design in Figma's preview mode
or by resizing the frames to simulate different screen sizes.
Output

Result
Designing a Responsive Layout for a Societal application has been done successfully.
Ex no: 2
Date: Exploring various UI Interaction Patterns

Aim:

To Explore various UI interaction Patterns like Breadcrumbs,Navigation tab,SideBar,Account

Registration

Pattern Name

NavigationTabs

Problem

Content needs to be separated into sections and accessed using a flat navigation structure that
gives a clear indication of current location.

Solution

✔ A horizontal bar contains the different sections or categories of your website.

✔ Each section or category is represented by a tab that most commonly resembles a button. This is
why the whole button should be clickable, and not just the text that labels the section.

Steps:
Step 1:Creating a new frame by clicking on the Frame tool or pressing the F key.
Step 2:Draw a rectangle shape within the frame to serve as the background for your navigation bar.
Step 3:Select the rectangle shape you just created and apply the desired styling to it. This may include
setting the fill color, adjusting the corner radius for rounded corners.
Step 4:Add Interactivity.create additional states for the navigation tabs to indicate hover or active
states.
Step 5:Preview your design in Figma's preview mode or by resizing the frame to simulate different
screen sizes.
Output
Pattern Name
Account Registration

Problem
You wish to know who the active user is in order to provide personalized content or opportunities to
conduct a purchase.

Solution
Ask users to register an account in order to provide a personalized experience. Let users register an account to
allow saving information with your service, provide a personalized experience, or give access to limited resources.

Steps:
1.Creating a new frame in Figma, representing the area where your registration form will be placed.

2.Add Form Fields: Use the Text tool (T) to add labels and input fields for the information you want users to
provide during registration. Common fields include:

 Username
 Email
 Password
 Confirm Password

3. Add Buttons for submitting the registration form or canceling the registration process. Use the Rectangle
tool (R) to draw rectangles for buttons, and then add text layers on top of them to label the buttons (e.g., "Register"
and "Cancel").
4.Customize the styling of the buttons to make them stand out

Output
Pattern Name
Breadcrumbs

The user needs to know their location in the website's hierarchical structure in order to possibly browse back to a
higher level in the hierarchy.

Solution
Reveal the user’s hierarchical location and provide links to higher levels.
Show the labels of the sections in the hierarchical path that lead to the current page being viewed.
Each label is a link to a section Procedure:
Step 1: Create text or button elements that act as links to different pages or sections within your design.
Step 2: Arrange these links in a sequential order to represent the steps of the process.

Step 3: Utilize Figma's Auto Layout feature to create a set of buttons or tabs that represent each step of the
process.

Step 4: create interactive components in Figma that simulate the behavior of breadcrumb steps. Each component
can represent a step in the process, and you can define interactions to navigate between them
Step 5: Preview your design in Figma's preview mode or by resizing the frame to simulate different screen sizes
Navbar

Output

Pattern Name
Acoordion

The user needs to know their location in the website's hierarchical structure in order to possibly browse back to a
higher level in the hierarchy.
Steps:
Step 1: Creating a new frame in Figma, which will represent the area where your sidebar navigation will be placed

Step 2: Draw a rectangle shape within the frame to serve as the background for your sidebar navigation. You can
use the Rectangle tool (R) and drag to create a rectangle. Ensure that it covers the entire height of the frame and
adjust the width as needed for your sidebar.

Step 3: Add Interaction (Optional): If you want to simulate interactions such as hover effects or clicking on
navigation links.

Step 4: use Figma's Prototype mode to define interactions between the sidebar elements and other parts of your
design.
Step 5: Preview your design in Figma's preview mode or by resizing the frame to simulate different screen sizes.

Output

Result
Thus various UI interaction Patterns like Breadcrumbs,Navigation tab,SideBar, Account Registration has
been designed successfully.
Ex No: 3

Date: Developing an interface with proper UI Style Guides

Aim
To Develop an interface with proper UI style guides

Procedure
 Create a new Figma file or open an existing one.
 Organize your design elements into frames and layers
 Use Figma's "Styles" feature to define global styles for colors, typography,
 Create text styles and layer styles by selecting the respective elements and clicking the "Create Style"
button in the right panel.
 Create some local text & color styles
 Press Automatic Style Guides > Generate Color Swatches
 A new page called "Style Guide” has been added to your document

Output
Result
Thus an interface with proper UI style guides have been developed successfully.
Exno :4 Developing Wireflow diagram for application using open source software
Date

Aim:
To Develop Wireflow diagram for application using open source software.

Wireflow
Wireflows visually show how parts of the interface change, as the user interacts with
the application

Procedure

Step 1:Create a New File: Log in to your Figma account and create a new file by clicking on the
"+" icon in the dashboard.
Step 2: Set Up Frames: Each frame in Figma represents a screen in your application. Start by
creating frames for each of your application screens. Select the frame tool from the toolbar and draw
rectangles for each screen.
Step 3:Design Screens: Once you have your frames set up, design the individual screens of your
application(ecommerce) within each frame. Use shapes, text, icons, and other design elements to represent
the various UI components.
Step 4:Link Screens: With the screens designed, you can now link them together to create the
flow of your application. To do this, select an element on one screen (e.g., a button) and use the
prototyping feature in Figma to create a connection to another screen. Repeat this process to link all
screens together according to the desired user flow.
Step 5:Add Interactions: Figma allows you to add interactions such as transitions and animations
between screens to simulate how users would navigate through your application. Experiment with
different interaction styles to create a more realistic wireflow.
Step 6: Once you've created the wireflow diagram, review it carefully to ensure that the flow
accurately represents the intended user experience. Make any necessary adjustments or iterations based
on feedback.

Output
Result
Thus Wireflow diagram for e commerce application using figma has been developed Successfully.
Exno: 5 Explore and understand the various open source collaborative interface Platform

Date

Aim

To explore and understand the various open source collaborative interface Platform

Procedure

Exploring various open-source collaborative interface platforms to understand their features, usability,
and applicability in UI/UX design projects.

Various popular open-source collaborative interface platforms

I.Figma

 Figma is a cloud-based design tool that enables real-time collaboration among team members.
 It offers features for designing UI/UX interfaces, prototyping, and sharing design components.
 Figma allows multiple users to work on the same design file simultaneously, making it ideal
 for collaborative design projects.
 Its version history feature allows users to track changes and revert to previous versions if needed.

II.Adobe XD (Adobe Experience Design)

 Adobe XD is a vector-based design tool for UI/UX design and prototyping.While

 Adobe XD itself is not open source, Adobe has made significant portions of its codebase open for
contribution on GitHub.It offers collaboration features such as co-editing and commenting, enabling
seamless teamwork on design projects.
  Adobe XD is a versatile tool that combines design, prototyping, and collaboration features in a single
platform, making it well-suited for UI/UX design projects of all sizes. Its intuitive interface, real-time
collaboration capabilities, and seamless integration with other
 Adobe tools make it a popular choice among designers for creating engaging and interactive user
experiences. Adobe XD integrates with other Adobe Creative Cloud applications, enhancing its usability
in design workflows.

III. Sketch:

 Sketch is a popular design tool among UI/UX designers, although it's not open source itself.
 However, there are open-source plugins and resources available for extending its functionality.
 Sketch offers features for interface design, prototyping, and collaboration through plugins like
 Craft by InVision and Abstract.
 While Sketch is macOS exclusive, its designs can be viewed and commented on by
 collaborators using web-based platforms.
IV. InVision:

 InVision is a cloud-based prototyping and collaboration platform designed specifically for UI/UX
designers.
 It allows designers to create interactive prototypes, gather feedback from stakeholders, and collaborate
with team members in real-time.
 InVision supports features like commenting, version history, and design handoff to developers,
streamlining the design-to-development workflow.
 It offers integrations with popular design tools like Sketch and Adobe XD, allowing seamless import of
design files into the InVision platform for prototyping and collaboration.

V.Gravit Designer
  Gravit Designer is a cross-platform vector graphics design tool available as both a web app and desktop
application.

 It offers features for UI/UX design, illustration, and prototyping.

 Gravit Designer's open-source version, Gravit Designer Community Edition, allows users to contribute to
its development and customize the software according to their needs.
 Collaboration features include real-time sharing and commenting on designs, facilitating teamwork on
design projects.

VI.Miro

 Miro is a collaborative online whiteboard platform that supports various design activities, including
UI/UX design.
 While not primarily a design tool, it enables teams to brainstorm, wireframe, and prototype designs
collaboratively.
 Miro offers features such as sticky notes, shapes, and drawing tools for creating design mockups and
prototypes.
 Its real-time collaboration features make it suitable for remote teams working on UI/UX projects.
 These are just a few examples of open-source or open-contributor platforms that facilitate collaboration
in UI/UX design projects. Each platform has its unique features and strengths, so it's essential to explore
and evaluate them based on your specific project requirements and team preferences.
VII. Inkscape:

 Inkscape is an open-source vector graphics editor similar to Adobe Illustrator. While primarily used for
illustration and graphic design, it can also be utilized for UI/UX design projects.
 Inkscape supports SVG (Scalable Vector Graphics) format, making it suitable for designing scalable user
interfaces. Its open-source nature allows for community contributions and customization, catering to
diverse design needs.
 All these Online collaborative UI/UX design tools offer a range of features to facilitate teamwork,
streamline workflows, and enhance communication among designers, stakeholders, and developers.
Depending on the specific project requirements, team size, and preferences, users can choose the tool that
best fits the need.

Result:

Thus various open source collaborative interface platforms are studied and explored.
Ex no: 6

Date Hands on design thinking process for a new product using Figma

Aim
To Develop Hands on design thinking process for a new product using Figma

Design Thinking Overview

Design thinking is a process for innovation and product development, emphasizing empathy, problem
definition, ideation, prototyping,
and testing.

Hands-On Design Thinking Process Steps

1.Empathize
 Use figma design thinking templates for creative processes.
 Gather relevant resources and select a template based on goals .
 Assemble a team and collaborate on tasks using the chosen template.
2.Define
 Utilize figma Customer Problem Statement Template .

 Create a customer problem statement, addressing who the customer is, what they are trying to achieve,
obstacles, root causes, and resulting emotions.

3.Ideate
 Implement the Brainwriting Template in Figma for idea generation.
 Participants write down ideas sequentially, avoiding repetition.
 Review and discuss generated ideas.

4.Prototype
 Use Figma Prototype Template for creating a live mockup of the product
 Define the design concept and plan the user flow
 Wireframe main interaction screens, make elements interactive, and share with users and stake holders.
5.Test:
 Implement Figma Usability Testing Template for user testing.
 Conduct usability tests with users facing the defined problem.
 Document feedback for internal use and track progress toward business goals.

Conclusion:
The design thinking process, facilitated by Figma, involves empathizing with users, defining problems,
generating ideas, prototyping solutions, and testing them. This hands-on approach ensures a user-centric and
innovative product development process
Exp no:7 Brainstorming session for E-commerce application using 5 whys method
Date:

Aim:
To Demonstrate a brainstorming session for E-commerce application using the 5 Whys method.

Brainstorming Overview:
Brainstorming is a creative thinking technique aimed at generating new ideas and solving problems
collaboratively. It encourages creativity, fosters collaboration, and introduces various perspectives.

Brainstorming Techniques:

1.Reverse Brainstorming:
Focuses on identifying the root causes of a problem.

2.Random Word Brainstorming:

Promotes idea generation by associating words with a specific topic.

3. 5 Whys Method:
Aims to uncover the root cause of an issue by repeatedly asking "why."

4.SCAMPER Model:
Views a problem through seven filters: substitute , combine, adapt, modify ,put to another use, eliminate
and reverse.

5.Rapid Ideation:
Participants write down solutions quickly.

6.Star bursting:
Emphasizes asking questions instead of providing answers.

Tool Used: Figma

Template Used: 5 Whys Template
Scenario: Addressing Product Shipment Delay Algorithm:
1.Use the 5 Whys Template Example from Figma
2.Follow the 5 Whys method:
Start with a broad question(e.g.,Why was the app late?).
Narrow down the question and answer it iteratively
Ask"why"until reaching the root cause
Example:Production delay -> Last-minute patch -> Lack of communication-> Communication
challenges within teams.
Output:

Result: Thus a brainstorming session for addressing product shipment delays using the 5 Whys method is
Demonstrated successfully.
Exp no:8
Designing the look and feel of a E-commerce website using figma
Date:

Aim:
Demonstrate the look and feel of a E-commerce website using Figma.

Website Wireframe Overview:

A website wireframe serves as a visual guide to arrange the elements and framework for each webpage.
It aids in aligning visual design, userflow, and website information architecture. Framework for each webpage.

Tool Used: Figma

Template Used :Figma

Website Wireframe Template Scenario : E-commerce website

Algorithm:
1.Select the Figma website wireframe template for an online footwear store.

2.Add the template to the Figma board.

3.Explore the components glossary on the template to understand customization for various UI states and styles.

4.Open the Wireframe Library to choose elements and icons relevant to the online footwear store. 5.Drag and
drop selected elements onto the wireframe on the board. 6.Double-click on wireframe elements to edit and
customize them based on the desired look and feel. 7.Request feedback directly on the board by tagging team
members in comments.
Output: E-commerce website

Result:
Thus the look and feel of a E-commerce website is done successfully.
Exp no:9 create a pattern for E-commerce application(Mood board, fonts , colors of
UI principles)
Date:

Aim:

To Create E-commerce Application with (Mood board, Fonts, Colors based on UI principles) using Figma.

Procedure:
In Figma, a E-commerce is a collection of design assets, like components, styles, and variables. These
design assets live in a single file, but can be reused across different files or projects. application
are used for sharing common design elements, like buttons, icons, pieces of UI, colors, or values for certain
properties. This helps everyone stay consistent and makes it easy to build from existing designs.When someone
changes assets in a library, reviewing the changes and automatically updating their designs takes place.

Step 1:Create components, styles, or variables to use in a library

Step 2:Publish a elements - Publish styles, components, and variables to a library
Step 3: Choose which libraries to use in your files
Step 4: Use E-commerce assets in a file
Step 5:Accept updates to a E-commerce in your files

Detailed Steps:
Step 1:Set Up Figma Workspace
Open Figma and create a new file for your E-commerce project.
Organize your workspace by creating pages for different sections of E-commerce Application(e.g., Mood board,
Fonts, Colors).

Step 2:Creating the Mood Board

 Start by collecting inspiration for your mood board. This could include images, textures, illustrations, and
other visual elements that represent the desired aesthetic for your product.
 Use Figma's "Frames" to create a canvas for your mood board.
 Drag and drop images onto the canvas and arrange them to create a visually appealing composition.
 Add annotations or descriptions to elements on the mood board to explain their significance or how they
relate to the product.
Step 3: Selecting Fonts
 Create a new page in Figma dedicated to Fonts.
 Choose the fonts you want to include in your pattern E-commerce. Consider factors such as readability,
brand consistency, and appropriateness for different use cases.
 Use Figma's text tool to display each font in your selection. Experiment with different font sizes, weights,
and styles to showcase the versatility of each font.
 Provide information about each font, such as its name, characteristics, and recommended usage scenarios.

Step 4:Defining Colors

  Create another new page in Figma for Colors.
 Select a color palette that aligns with your product's branding and design principles. This palette may
include primary colors, secondary colors, and accent colors.
 Use Figma's color picker tool to add swatches representing each color in your palette.
 Arrange the color swatches in a visually pleasing way, such as a grid or linear layout.
 Include information about each color, such as its hexadecimal code, RGB values, and suggested use cases.

Step 5:Organizing and Documenting:

 Once you've created the mood board, selected fonts, and defined colors, organize all the elements in your
pattern library file.
 Consider creating a table of contents or index to help users navigate through the different sections of the
pattern E-commerce website.
 Add annotations, descriptions, or instructions where necessary to provide context and guidance for users.
 Group related elements together using frames or folders to keep your pattern library organized and easy
to manage.

Step 6:Sharing and Collaboration:

 Share your pattern library file with relevant stakeholders, such as designers, developers, and product
managers.
 Encourage collaboration by allowing others to comment, make suggestions, or contribute additional
elements to the pattern library.
 Continuously update and refine the pattern library based on feedback and changes to the product's design
and branding.
Output:

Result:

Thus a Mood board is created for E-commerce Application.

Ex no:10 Identify a customer problem to solve
Date

Aim
To Identify a customer problem to be solved using UI/UX design.

Problem statement
Problem statements summarize a challenge we want to resolve, its causes, who it impacts and why that’s
important. Problem statements help to share details about a challenge facing the team. Instead of rushing to a
solution, writing a problem statement enables you to reflect on the challenge and plan the response.

Elements of a problem statement:

 Gap: The challenge, issue, or pain point we currently face
 Orientation: a description of when and where we found the problem and the trend it creates or follows
 Impact: a measure of our problem’s consequences in cost, time, quality, environment, or personal
experience
 Importance: why this problem matters to our organization and customers

Writing a problem statement :

Step 1: Identify the problem
Step 2: Put the problem into context
Step 3: Find the root cause
Step 4: Describe your ideal outcome
Step 5: Propose a solution and outline its benefits

Customer Problem to solve :

E-Commerce application

The user experience of our e-commerce application is suffering due to significant navigation and checkout
process issues. Users struggle to find products efficiently due to confusing navigation structures, unclear category
labels, and limited search functionality. Moreover, the checkout process is overly complex, featuring multiple
steps and unnecessary form fields, leading to frustration and high cart abandonment rates. These UX challenges
hinder user satisfaction and impede conversion rates. It is imperative to address these navigation andcheckout
problems to enhance the overall user experience, increase engagement, and improve conversion rates.

 Gap: Designers may face challenges in creating intuitive navigation structures and optimizing the
checkout process.Product managers may struggle to prioritize UX improvements amidst
competing demands and limited resources.
 Orientation: This problem usually exists in all E-Commerce applications.
 Impact: Business executives may be concerned about the impact of poor UX on key performance
metrics such as conversion rates, revenue, and customer retention.They may need to allocate
 resources and set strategic priorities to address UX problems effectively, recognizing the long-
term benefits of investing in improved user experiences.
 Importance: Addressing the identified UX problems in the e-commerce application
 requires collaboration and coordination among various individuals within the organization.
Retaining customers with support is essential for using any E-Commerce application.

Solution for the identified Customer Problem :

Improved Navigation:
Simplify navigation by reorganizing categories and labels based on user research and
feedback.
Implement clear and intuitive navigation menus and pathways to help users easily find
products.
Enhanced Search Functionality:
Implement advanced search features such as autocomplete suggestions, spell check,
and synonym recognition.
Incorporate filters and facets to refine search results based on user preferences.
Streamlined Checkout Process:
Reduce the number of steps in the checkout process and minimize the amount of
required form fields.
Offer guest checkout options to streamline the purchase process for users who prefer
not to create an account.

Mobile Optimization:
Optimize the e-commerce application for mobile devices by implementing responsive
design principles.
Ensure that all features and functionalities are accessible and intuitive on various
screen sizes and resolutions.
Clear Communication of Costs:
Provide transparent information about shipping costs, taxes, and any additional fees
upfront to avoid surprises at checkout.
Offer shipping cost calculators and estimators to help users understand the total cost
of their purchase before proceeding to checkout.
User-Centric Product Presentation:
Enhance product pages with high-quality images, detailed descriptions, and
informative specifications.
Include user-generated content such as reviews and ratings to help users make
informed purchasing decisions.
Continuous User Testing and Feedback:
Conduct regular usability testing sessions with real users to identify pain points and
 gather feedback on proposed solutions.
Utilize feedback mechanisms such as surveys, feedback forms, and user analytics to
gather insights into user behaviour and preferences.
By implementing these solutions, the e-commerce application can significantly improve the
overall user experience, leading to increased user satisfaction, engagement, and conversion
rates.

Output

Result
Thus to Identify a customer problem to be solved using UI/UX design has done successfully
Exp no:11
Conduct end-to-end user research - User research, creating personas, Ideation process
Date: (user stories, user scenarios)Flow diagrams, flow mappings

AIM:
To Conduct end-to-end user research - User research, creating personas, Ideation process (User stories,
Scenarios), Flow diagrams, Flow Mapping.

PROCEDURE:

STEP 1: Goal: Gather comprehensive insights about end users and ideate based on those insights. Emphasize
user centric design approach.

STEP 2: Methods: Use surveys, interviews, analytics to understand user needs and preferences. Focus on
gathering data about user behaviors, pain points, and goals.

STEP 3: Purpose: Create fictional representations of different user types for reference. Include demographics,
behaviors, goals, and pain points to make personas relatable.

STEP 4: Importance: Ideation is key to designing user centric solutions.Start with user stories and scenarios to
define specific user tasks.

STEP 5: Format: "As a [type of user], I want to [perform an action] so that [achieve a goal]." Define specific
user tasks within the project.

STEP 6: Provide detailed contexts for user stories to help visualize the user's journey. Describe the context,
actions, and expected outcomes.

STEP 7: Visualize user flows using flowcharting tools or software.Map out the sequence of steps a user takes to
accomplish tasks.

STEP 8: Create a visual map illustrating the entire user journey.Include decision points, interactions, and
touchpoints with the project.

STEP 9: Compile all research data, personas, user stories, scenarios, flow diagrams, and flow mapping. Provide
explanations and justifications based on user insights.

STEP 10: Share documentation for team and stakeholder review.Gather feedback on user research findings and
ideation process.
OUTPUT:

User persona

User stories
Flow mapping

Result:

Thus end-to-end user research - User research, creating personas, Ideation process (User stories, Scenarios),
Flow diagrams, Flow Mapping is done using figma.
Exp no:12 Sketch ,design with popular tool and build a prototype and perform
usability testing and identify improvements
Date:

Aim:
To create interactive prototypes and conduct Usability Testing using maze.

Problem Statement:
Create interactive prototypes to simulate the final product using website designing tools and do usability
testing.

Interactive prototypes:
Interactive prototypes are an essential part of the product development process, as they allow designers to
test and refine the user interface and functionality of a product before it is fully developed. By allowing users to
interact with a product in a realistic way, designers can gather valuable feedback and insights into how users are
likely to interact with the product and identify any issues or problems that need to be addressed.

Discuss the steps involved in creating an interactive prototype.

Creating an interactive prototype is a multi-step process that involves several stages of planning,
design,testing, and refinement. Here are the key steps involved in creating an interactive prototype:

1. Define the purpose and scope of the prototype.

2. Develop a wireframe or design mock-up.
3.Choose a prototyping tool..
4. Create the interactive prototype.
5. Test the prototype with users using Maze
6. Analyse user feedback and refine the prototype.
7. Repeat the testing and refinement process.

Usability testing is typically conducted in a controlled environment, such as a usability lab or a conference room,
and involves a facilitator, a user, and a product being tested. Steps involved in
1. Plan & prepare.
2. Find Participants.
3. Conduct the Session.
4. Analyze Results.
5. Make Recommendations.
6. Iterate and refine.

Outputs:
Test Cases:
1. Is it clear what this website is for and what it offers?
2. Can you easily find the information you are looking for?
3. Is the color scheme and layout of the website visually appealing and consistent?
4. Are there any functionality issues?
5. Do you feel that the website accurately represents the college and its values?
6. Is the color scheme and layout of the website visually appealing and user-friendly?
7. Does the website show all the necessary resources available in the college?
8. Is the search function usable?
9. Are the text and font sizes legible and easy to read?

Pages
Result:
Hence we have Sketched, designed with figma and built a prototype and performed usability testing
using Maze and identified improvements.