GOVERNMENT COLLEGE OF ENGINEERING

TIRUNELVELI – 627 007.

20 -20
Register No.

CERTIFICATE
This is a bonafide record of work done by………………….........................
………………………………………. Government College of Engineering,
Tirunelveli during this year 2023-2024
STATION:TIRUNELVELI-7
DATE:

Staff-in-Charge Head of the Department

Submitted for the Anna University Practical Examination held at

Government college Engineering, Tirunelveli on………………………….
…………………………………………………………………………………..

Internal Examiner External Examiner

 CONTENTS
S. NO DATE TITLE PAGE MARKS SIGNATURE
NO
1 DESIGN A RESPONSIVE
LAYOUT FOR MAIL
APPLICATION
2 EXPLORING VARIOUS UI
INTERACTION PATTERN
3 UI STYLE GUIDES

4 DEVELOPING WIREFLOW
DIAGRAM FOR APPICATION
USING FIGMA
5 EXPLORE VARIOUS OPEN-
SOURCE COLLABORATIVE
INTERFACE PLATFORM

6 HANDS ON THINKING PROCESS

FOR MAIL APPLICATION

7 BRAINSTROMING FEATURE
FOR MAIL APPLICATION
8 LOOK AND FEEL OF A NEW
PRODUCT

9 CREATING A SAMPLE PATTERN

LIBRARY FOR A MAIL
APPLICATION
10 IDENTIFY A CUSTOMER
PROBLEM TO SOLVE FOR A
MAIL APPLICATION

11 CONDUCT END TO END USER

RESEARCH AND CREATING
PERSONAS IDEATION PROCESS

12 SKTECH DESIGN AND BUILD A

PROTOTYPE AND PERFORM
USABILITY TESTING AND
IDENTIFIED IMPROVEMENTS
Ex.No:1 DESIGN A RESPONSIVE LAYER FOR THE
Date: MAIL APPLICATION

AIM:
To design responsive layout for a mail application using Figma.

PROCEDURE:
1. Open the web browser and go to figma.com
2. Look for a button that says "Sign in" at the top-right corner of the page and click on it.
3. Click on the box to type the email address or the username to sign up for Figma.
4. Below the email or username box, there's another box for the password. Type in the
password when signing up.
5. Once after entering the email/username and password, click on the "Log in" button
below.
6. Take a look around there Figma dashboard to see the projects, recent files, and other
info.

STEPS:
1. Click on frame icon, and select the frame size on the right corner.
2. Set status bar using shape tool by using draw a rectangle.
3. Insert the things like clock, signal, battery using text tool, and shapes tool. And group
it using Ctrl + G or right click and select group selection.
4. Create nave bar using shapes tool and add icons with the plugins.
5. Click on the resources icon and choose the plugin option, search for icon duck plugin
then enter the resource name needed for nav bar icon.
6. Create search bar using a rectangle and add some highlights.
7. Create the product section by adding a shape from the shapes tool and add image by
using the add image option in the shapes tool select the image form the local device.

8. Next create the events section in the bottom that is same like the product section.
9. Create a new frame and create event page.
 10. First add the back navigation arrow in the top of the page by creating the shapes tool
and add the arrow by using the plugin, and group it.
11. Add the event by using the shapes tool and add image for the event and also buttons
some decorations on it.
12. Now duplicate the first created event bar using Ctrl + D shortcut and move the
duplicate for the next event.
13. Do this for fill the page.

PROTOTYPE:
1. To create prototype, select the prototype section in the Inspector side. Click the
component to redirect to the next page.
2. And click the plus icon and drag and drop to the next page.
3. Go to Event page and click the arrow and click the plus icon and drag and dop to the
home page.
4. Now press the play button in the inspector panel.
5. The page redirect to the prototype section that page guide to the next step for the
prototype.
OUTPUT:

Desktop View:
 Mobile View:

RESULT:
Thus the responsive layout were written, explored and implemented successfully.
Ex.No:2 EXPLORING VARIOUS UI INTERACTION
Date: PATTERN

AIM:
To explore various UI interaction patterns.

DEFINITION:
UI pattern design refers to the process of creating reusable design systems for common user
interface (UI) problems. It helps to improve the usability and consistency of user interfaces making
it easier for users to navigate and interact with digital products. Explore the important aspects of
user interface design and learn more about how it helps to create more efficient and user-friendly
digital products.

IMPORTANCE OF UI PATTERN DESIGN:

UI pattern design is important because it simplifies the design process and makes it more
efficient. Some of the benefits of UI pattern design are mentioned further:

• Consistency: UI patterns provide consistency to user interfaces. Users are accustomed

to certain patterns, and they expect to see them across different interfaces.
• Reduced Learning curve: UI patterns reduce the learning curve for users. Once they
learn how to interact with a pattern, they can apply that knowledge to other interfaces
that use the same pattern.
• Better User Experience: UI patterns are designed to be user-friendly. They make it
easy for users to interact with interfaces and achieve their required goals.

COMMON UI DESIGN PATTERNS:

Common UI (User Interface) design patterns are recurring solutions or best practices that
designers and developers use to solve specific design problems. These patterns help create a
consistent and user-friendly experience for users. Some common UI design patterns are mentioned
below:

• Navigation Patterns:
Navigation patterns, such as the nave bar, sidebar menu, and tabs provide users with
structured and intuitive ways to move between different sections or pages within a
website or application.
• Form Patterns:
Form patterns, including input fields, form validation, and wizards, facilitate the
collection of user input, ensure data accuracy, and guide users through complex data
entry processes.

• Card Patterns:
Card patterns, featuring individual content containers, enable the structured and
visually appealing display of items like articles, products, or user profiles within a user
interface.

• Carousel Patterns:
Carousel patterns, such as image carousels and testimonial carousels create
dynamic and engaging displays of content, allowing users to cycle through images or
testimonials for an interactive experience.

• Input and Feedback Patterns:

Input and feedback patterns are used to design interfaces that provide users with
feedback when interacting. The UI/UX design examples of input and feedback patterns
include tooltips, progress bars, and error messages. These patterns help improve the
user experience by providing clear and concise feedback on their actions.

• Content Display Pattern:

Content display patterns are used to design interfaces that present content in an
organized and easy-to-read manner. Examples of content display patterns include grids,
carousels and lists. These patterns help improve content’s readability and make it easier
for users to find the information they seek.
• Interaction Patterns:
Interaction patterns are used to design interfaces that allow users to interact with
the application. Examples of interaction patterns include drag and drop, swipe, and
pinch to zoom. These patterns help create a more engaging user experience by
providing intuitive and natural ways to interact with the interface.

• Responsive Design Pattern:

Responsive design adapts user interfaces to various devices using fluid grids,
flexible images, media queries, and modern CSS. It prioritizes mobile, enhancing
features for larger screens, ensuring a consistent, user-friendly experience across
devices.
USER DESIGN PATTERN LIBRARIES:
User design pattern libraries, also known as UI component libraries or design
systems, are collections of reusable design elements and components that streamline the process
of creating user interfaces.

Several popular design pattern libraries and frameworks are as follows:

• Material-UI: A popular UI framework based on Google’s Material Design

guidelines. It offers a wide range of pre-designed components for web applications.

• Apple’s Human Interface Guidelines (HIG): Apple provides design

guidelines, templates, and resources for creating iOS and macOS applications
following Apple’s design principles.

• Atlassian Design System: Created by Atlassian, this design system and

component abrogation.

• Bootstrap: A widely used open-source CSS framework with a set of

predesigned components and styles to create responsive and visually appealing
websites.

• Ant Design: A design system and UI library developed by Ali baba,

providing a collection of high-quality components for building web and mobile
applications.
OUTPUT:

Input pattern

Button pattern
Interaction pattern

Card pattern
 Search pattern

Navigation pattern

RESULT:
Thus the UI Interaction pattern was studied.
 Ex.No:3
UI STYLE GUIDES
Date:

AIM:
To Develop an interface with proper UI Style Guides.

UI STYLE GUIDE:
User interface style guides are design guidelines or standards and a
development tool for designing UI elements and interactions for various websites or app
products. These document usually contains the essential details relating to your product’s user
interface to ensure consistency across different screen sizes, design teams, companies, and
brands.

1. Color Palette:

Specifies the colors used in the interface, including primary and

secondary colors, as wear their use in different contexts.

2. Typography:

Defines the font choices, sizes, and styles for various text elements such
heading, subheadings, and body text.

3. Layout and Grid System:

Establishes a grid system for layout consistency, defining margins,

padding, and spacing.

4. Icons and Imagery:

Provide guidelines for the use of icons, images, and other visual elements,
ensuring a cohesive design.

5. Buttons and Forms:

Defines the styles and states of interactive elements like buttons, form
fields, and checkboxes.
 6. Responsive Design:

Guides the adaptation of the interface to different screen sizes and devices.

7. Accessibility:

Includes guidelines to ensure the design is accessible to user with disabilities.

8. Animation and Transitions:

If applicable, provides guidelines for animations and transitions to enhance

the user experience.

9. Documentation:

Documents the UI components with examples, code snippets, and

explanations for easy implementation by developers.

10. Branding Guidelines:

Incorporates any specific branding elements or guidelines to maintain

brand consistency.

CREATE A STYLE GUIDE IN FIGMA:

Open the Figma file and select a frame.
CHOOSE A COLOR PALETTE:
STEP 1: Choose your color categories.
Choose three categories of colors: a primary color, a secondary color, and greys (neutral).

STEP 2: Generate Shades for the Colors.

Generating shades for your color palette helps cater to varied use cases.
The Figma plug-in Tints and Shades helps you generate color shades.
Select a color and click on Tints and shades to generate the shades.
 Auto layout (Shift + A) the generated shades to give them one frame, and arrange them vertically or
Horizontally..

STEP 3: Make the color shades into color styles.

To make the generated colors styles, first select the frame and hit the enter key in order to
select the boxes in the frame individually.
Rename the individual boxes, using the name of the color category differentiating with numbers
for example grey 01, and so on.

If you renamed your boxes successfully, the names will appear on the left hand side of your
Canvas.
 After do this, need to make your colors into styles. The Figma plug-in Style used to style
your colors. Click on the frame, selecting individual boxes using the Enter key. If do this
correctly, then get a notification as you can see in the image above.
CHOOSE YOUR TYPOGRAPHY:
Choosing the right font family, font sizes, and font weights is very important for a good style
guide material. io used to generate type scales.

STEP 1: Open a frame after choosing a font of your choice.

STEP 2: Establish the page hierarchy.

Decide on how many headlines, subtitles, body and captions your design might have.
Remember that you can communicate hierarchy through differences in font weight (light,
medium, regular),size, letter spacing, and case.
STEP 3: Make your fonts styles.
After choosing your font weights, size, and letter spacing, it's time to make them styles. Just like
you did for your color palette, select the fonts and use the plugin Styler to create them as styles.

NB: Choose smaller font sizes when designing for mobile (16px, 18px, and so on) and larger
font sizes for web. The text styles will appear on the right hand side of your screen.
CHOOSE YOUR ICONOGRAPHY:
Next up, we have iconography. Icons are an essential part of our designs, as they
visually express actions and objects in our interfaces. They help the designer further
communicate the meaning of an action or screen, like the home icon, search icon, and more. You
can get icons from plug-in like Iconify, Font Awesome, and libraries like feather icons and
Google icons.
STEP 1: Select a frame.
Go to the frame tool and select a frame for your iconography.

STEP 2: Get all your icons.

Now you'll need to get the icons you need for your design. Make sure you include different states
of each icon, like filled, outline, and so on.

NB: make sure the sizes of your icons are consistent.

SETUP YOUR LAYOUT GRIDS:
Grids are a fundamental part of any style guide as they help achieve better alignment,
hierarchy, and consistency in your designs. Setting a standard for your grid depend on whether
you are designing for web or mobile – each has different standards. For example, you should
use a 960 grid (12 or 16 columns) when designing for web. First, go ahead and select a frame.

Steps for Add a layout grid:

✓ Then get your layout grid from the left hand panel of your canvas.
✓ Input your desired number of columns for the frame and values for the margin and gutter
(that is the vertical part of the frame).Next up, you will need to include grids for the
horizontal part of the frame or the rows.

CHOOSE YOUR COMPONENTS:

The components you choose play an important part in your user interface. Components typically
include text fields, button states, checkboxes, alerts and notifications.
DEFINE YOUR INPUT FIELDS:
Input fields, as the name implies, allow users to input text in a UI. And they need to be

styled like everything else First, as always, select a frame.

STEP 1: Design input fields in various states

You'll want to design each input field according to its state, like default, disabled,
active, and error.

STEP 2: Add icons to your input fields. Design Your Buttons

Your buttons should include primary buttons and secondary buttons in their different states,

like disabled, default, hover and pressed.

 ✓ Primary buttons are usually strong visual indicators to help users complete their journeys
– for example 'next', 'submit', and so on. Secondary buttons are usually the alternatives to
the primary actions, like 'cancel', 'back', and so on.
✓ The image above shows two buttons. The button on the left is a primary button while the
button on the right is a secondary button. First, select a frame.

STEP 1: Design the primary button

First you'll want to design a primary button in its various states: default, hover, pressed and
disabled.

STEP 2: Design the secondary button

Then you'll design a secondary button in its various states: default, hover, pressed and disabled.
STEP 3: Check buttons with icons
You might want to check how the various buttons would look like with icons. Add icons to your
primary and secondary buttons in all their states.
Checkboxes
You'll use checkboxes mostly when users might need to select more than one option from a list –
that is, each checkbox is independent of the others in the list/form.

First, select a frame.

STEP 4: Design your checkboxes
You'll want to include various states like enabled, disabled, hover, focused
Alerts and notifications
With real time alerts, users can get notifications of reminders, errors, successes and so on. This
reduces the risk of hacking, incorrect input, and loss of important information.

First, select a frame.

Design notification and alerts
When you design your alerts, make sure to use the correct icons for warning, error, success and
success states.
Live Style Guide Examples
Here is Mozilla's style guide:
OUTPUT:

Branding

Text Color

Background Image

Secondary Button

Small Padding
Title Highlight

Text Area Style

Warning Color

Border Radius

Letter Case
 User Profile Card

Primary Button

Menu Slide Animations

Image

Font

Typography

Filled icon

RESULT:
Thus the UI style guides were written, explored.
Ex no:4 DEVELOPING WIREFLOW DIAGRAM FOR
Date: APPLICATION USING FIGMA

AIM:
To develop a wireflow diagram for mail application using Figma.

WIREFLOW DIAGRAM:
In UI/UX design, a wireflow diagram is a visual representation that combines elements
of both wireframes and flowcharts. It provides a comprehensive view of the user interface (UI)
design by illustrating the flow of screens and user interactions within a digital product. Wire
flows are particularly useful for conveying not only the layout and structure of individual
screens (like wireframes) but also the connections and transitions between those screens.

KEY COMPONENTS AND CHARACTERISTICS OF A WIREFLOW

DIAGRAM:

Wireframes:

• Wireframes are basic, low-fidelity representations of individual screens or in a digital

interface. In a wire flow, each screen is depicted as a wireframe, showing the essential
elements such as buttons, text, images, and other UI components.

Flowchart Elements:

• The wireflow incorporates flowchart-like elements, such as arrows or lines, to illustrate

the sequence of screens and the user's navigation path. These connections represent the
transitions between different states or screens.

User Interactions:

• Wireflows include annotations or symbols to indicate user interactions, actions, or

behaviors on each screen. This helps in conveying how users move through the
interface and what actions they can take.
Task Flows:

• The wireflow diagram often includes task flows, outlining the step-by-step processes
or user journeys within the application. This is particularly useful for understanding
complex interactions or scenarios.

Annotations:

• Detailed annotations are added to each screen, providing information about specific UI
elements, functionality, or any additional notes relevant to the design. Annotations
enhance communication between designers and other stakeholders.

Visualization of User Flow:

• The primary purpose of a wireflow is to visualize the user flow within the digital
product. It helps designers and stakeholders understand how users will progress through
the application and experience different screens.

Collaborative Tool Integration:

• Wire flows are often created using specialized design tools such as Figma, Adobe XD,
Sketch, or similar applications. These tools provide features specifically designed for
creating and sharing wire flow diagrams, fostering collaboration within design teams.
Iterative Design:
• Like wireframes, wire flows are subject to iteration and refinement. As the design
process progresses, updates can be made to the diagram to reflect changes,
improvements, or new insights.

CREATING A WIRE FLOW DIAGRAM IN FIGMA TOOL:

1. Define User Flows:

• Clearly understand and define the user flows that want to illustrate in the wire flow
diagram. Identify the key screens and interactions that users will go through.
2. Create Wireframes:

• Develop wireframes for each screen in each user flows. Use Figma's design tools to
create simplified representations of the interface, focusing on layout, structure, and
content placement.

3. Use Frames for Screens:

• In Figma, each screen or wireframe can be placed within a frame. Create a frame for
each screen to organize and structure the design.

4. Connect Frames:

• Use Figma's line tool or arrows to connect frames, indicating the flow from one screen
to another. This helps visualize how users will navigate through the application.

5. Add Annotations:

• Include text annotations or notes for each frame to explain the functionality,
interactions, and any dynamic elements. This adds clarity for both designers and
developers.

6. Utilize Figma Prototyping:

• Leverage Figma's prototyping features to create interactive links between frames.

Define interactions like button clicks, transitions, and animations to simulate the user
experience.

7. Review and Iterate:

• Share the wireflow with stakeholders, such as team members or clients, and gather
feedback. Use this feedback to iterate and refine the wire flow diagram.
8. Collaborate with Team:

• Collaborate with the design team, developers, and other stakeholders. Figma allows
real-time collaboration, making it easy for multiple team members to work on the wire
flow simultaneously.

9. Maintain Consistency:

• Ensure consistency in design elements, terminology, and interactions across the wire
flow. Figma's design system features can help maintain a cohesive user experience.

10. Use Figma Components:

• If the wire flow involves recurring elements, consider using Figma components.
Components allows to create reusable design elements, ensuring consistency and
making updates easier.

11. Organize Layers and Frames:

• Keep the Figma project organized by naming layers and frames appropriately. This
helps maintain clarity, especially as the wire flow diagram becomes more complex.
OUTPUT:

Login page Signin page Main page Compose page Google Meet

RESULT:

Thus the wireflow diagram for the mail application has been developed and implemented
successfully.
Ex.No:5 EXPLORE VARIOUS OPEN-SOURCE
Date:
COLLABORATIVE INTERFACE PLATFORM

AIM:
To explore and understand the various types of open-source collaborative interface
platforms in detail.

OPEN-SOURCE COLLABORATIVE INTERFACE PLATFORM:

An open-source collaborative interface platform is a software platform that allows users

to collaborate on projects in a decentralized and open manner. This type of platform is
typically based on open-source software, which means that the code is freely available and
can be modified and distributed by anyone. This makes open-source collaborative interface
platforms very flexible and adaptable, as users can customize them to meet their specific
need.
One of the key benefits of using an open-source collaborative interface platform is that it can
help to reduce costs. Because the software is free to use, there are no licensing fees to pay.
Additionally, open-source platforms are often very scalable, meaning that they can be used to
support many users and projects without incurring significant additional costs. Another benefit
of using an open-source collaborative interface platform is that it can help to improve security.

Because the code is open source, anyone can review it for potential security vulnerabilities.
This means that any security vulnerabilities that are found can be fixed quickly and efficiently.
Additionally, open-source platforms are often very well-supported by the community, which
means that users can get help with any problems they encounter quickly and easily.

Finally, open-source collaborative interface platforms can help to improve transparency and
accountability. Because the code is open source, anyone can see how the platform works and
how their data is being used. This can help to build trust between users and the platform
operators. Additionally, open-source platforms are often governed by a transparent and
democratic process, which means that users have a say in how the platform is run.
1. FIGMA:

Figma is a powerful, cloud-based design tool specifically built for user interface (UI)
and user experience (UX) design, making it a popular choice among designers and developers alike.
Its cloud- based nature that allows real-time collaboration, enabling multiple team members to
work on a project simultaneously, regardless of their location. This collaborative approach is
invaluable for design teams, as it fosters communication, speeds up the design process, and
ensures that everyone stays aligned on project goals and updates.

Key Highlights:

• Multiple users can edit and comment on designs simultaneously.

• Create interactive prototypes to simulate user interactions and transitions.

• Real-time collaboration for multiple users.

• Reusable components for design consistency.

• Shared team libraries for easy asset access.

2. IN-VISION:

In-Vision is a collaborative design platform geared towards creating seamless workflows

and enhancing team alignment throughout the design process. Known for its emphasis on real-
time collaboration, In-Vision provides a centralized workspace where designers, developers,
and stakeholders can come together to share feedback, make decisions, and track progress. Its
robust set of tools supports everything from wireframing to prototyping, making it a valuable
asset for product design teams

Key Highlights:

• Seamless integrations with tools like Zoom, Slack, and Trello.

• Powerful support for wireframing and prototyping.

• Community engagement and resources for users.

• Allows feedback directly on design elements.

• Supports maintaining consistent branding across projects.

3. UPEN:

Upen is dedicated to enhancing team efficiency by breaking down communication

barriers that often hinder collaboration between UX designers and developers. By providing a
unified platform, Upen enables seamless interaction and understanding between these two
critical roles, ensuring that everyone is aligned on project goals and design intent. Upen also
supports customizable workflows, allowing teams to tailor the platform to their
specific processes and preferences

Key Highlights:

• Detailed Integration with NPM packages, Git repos, and Storybook

• User-friendly, codeless UI code component usage

• Built-in features for accessibility and compliance with WCAG standards.

• Comprehensive version control for project tracking.

• Real-time collaboration for instant feedback.

4. SKETCH:
Sketch, like Figma, supports collaborative design, offering tools to simplify the process.
It is known for creating playable prototypes that facilitate developer handoff. Sketch’s user
interface design tools, real-time collaboration, and vibrant community make it a robust
alternative. Sketch also offers a wide range of plugins that extend its functionality, allowing
designers to customize their workflow to meet specific project needs. Sketch's integration with
macOS and its native performance make it especially appealing to Apple users.

Key Highlights:

• Over 700 extensions enhance functionality.

• Robust community and ample learning resources

• Advanced sharing controls and open file format

• Superior control over sharing work and an open

format
5. MOCKPLUS:

Mockplus provides a comprehensive product design platform ideal for collaboration,

design systems, and prototyping. Dynamic and reusable design systems ensure consistency
across your team. This platform is straightforward, boasts a vast user base, and offers ample
learning resources. Mockplus simplifies the design-to-development process with seamless
handoff features, enabling teams to work more efficiently. Its intuitive drag-and-drop
interface allows designers of all levels to create interactive prototypes quickly

Key Highlights:
• Interactive prototyping for user testing

• A glossary and resource set for UI/UX principles

• thriving community for knowledge sharing.

• Interactive prototyping tools for effective user testing

• Extensive resources and community support for UI/UX learning

6. ADOBE XD: FIGMA’S RIVAL

Adobe XD, compared to Figma, is an established rival. It supports web, app, brand, and
game design. It is backed by a robust, active community and offers plenty of resources. Adobe
XD is relatively easy to learn and supports coediting, allowing collaborative work with team
members. Adobe XD integrates seamlessly with other Adobe Creative Cloud tools, streamlining
the design workflow for users familiar with Adobe’s ecosystem. Its powerful plugin library and
design system support enable designers to customize and scale their projects effectively.

Key Highlights:

• Feature-rich, supporting various design needs.

• Integration with Creative Cloud apps

• Coediting for seamless collaboration.

• Comprehensive toolset for diverse design projects

• Strong Creative Cloud integration for smooth workflows

7. PENPOT:
Pen pot stands out as a free, open-source platform ideal for cross-domain teams. It
allows for seamless collaboration and is compatible with most vectorial tools due to its use of
SVG. Resources, including templates, glossaries, and a growing community, ensures that get
the most from this platform. Pen pot browser-based design makes it accessible across different
operating systems, supporting diverse teams without compatibility issues. Its flexible, open-
source nature enables customization

Key Highlights:

• SVG-based, compatible with vectorial tools

• Resource-rich, with comprehensive glossaries and templates.

• Seamless sharing of design files for valuable feedback.

• SVG-based for easy integration with other vector tools

• Extensive resources and easy file sharing for team feedback

8. IO: BRINGING VISIONS TO LIFE

Ideal for UX designers, product managers, and marketers, Proto.io is a web-based

platform that simplifies UI/UX design. It offers a massive library of resources, including video
tutorials and sample projects. While it lacks a forum community, it excels at helping users bring
their visions to life. Proto.io enables designers to create high-fidelity, interactive prototypes
that closely mimic final products, perfect for realistic user testing. It allow even non-designers
to quickly produce professional-quality prototypes.

Key Highlights:

• Web-based; no coding knowledge is required.

• Over 1000 customizable templates

• A vast library of digital assets for concept realization

• Intuitive interface for quick prototype creation

• High-fidelity interactions for realistic user testing

9. MOQUPS:

Moqups simplifies UI prototypes, wireframes, and sketches with its SVG based
platform.Whether there need a quick frame or a comprehensive mock-up, Mops is
intuitive and straightforward. It offers popular drag and-drop elements and a range of fonts.
Mops is designed for efficiency, allowing users to create and iterate on designs rapidly
without unnecessary complexity. Its collaborative features enable teams to share feedback in
real time, enhancing the design process and ensuring alignment among stakeholders.

Key Highlights:

• User-friendly drag-and-drop interface.

• A library of icons, fonts, and extensions

• Scalable page management for in-depth design projects

• SVG-based for high-quality, scalable graphics

• Quick export options for seamless sharing and integration

10. AFFINITY DESIGNER:

Affinity Designer streamlines mock-up design, logo creation, and UI design. Known for
its illustration capabilities, it is excellent for beginners. However, it lacks some collaborative
features found in Figma. Still, the Affinity Designer community and ample resources make it
a strong choice. Affinity Designer offers a one-time purchase model, making it budget-friendly
for individual designers and teams. Its powerful vector and raster tools allow users to create
detailed designs and illustrations without needing to switch between apps.

Key Highlights:

• Exceptional illustration capabilities.

• Multilingual support for global teams

• One-time purchase with no monthly subscriptions.

• Flexible vector and raster editing in a single platform

RESULT:
Thus, the exploration of various open-source collaborative interface platforms was
explored.
 Ex no:6 HANDS ON DESIGN THINKING
Date:

AIM:

To know about the design thinking process for the mail application.

DESIGN THINKING PROCESS FOR A MAIL APPLICATION:

1. Empathize:

• Understand Users: Talk to different users (like students and professionals) to learn
about their email experiences and challenges.

• Gather Insights: Use surveys and observe how they use email to identify common
problems.

2. Define:

• Identify Problems: Clearly outline the main issues users face, such as feeling
overwhelmed by too many emails.

• Create Personas: Develop profiles of typical users to represent their needs and goals.

3. Ideate:

• Brainstorm Solutions: Generate a variety of ideas to improve the email experience.

• Sketch Concepts: Create quick drawings of potential features, like smart

sorting or customizable folders.

4. Prototype:

• Build Mock-ups: Create simple and interactive versions of the email app to visualize
ideas.

• Use Design Tools: Use software like Figma to make prototypes users can click through.
5. Test:

• Get User Feedback: Have real users interact with the prototypes and
observe their experiences.

• Gather Insights: Ask users what they liked and what was confusing or frustrating.

6. Iterate:

• Refine Design: Use feedback to improve the app. Adjust based on what users need.

• Example Changes: If users can't find emails easily, enhance the search feature.

7. Implement:

• Develop the App: Work with developers to turn the final design into a working
application.

• Focus on Usability: Ensure the app is user-friendly and secure.

8. Evaluate:

• Monitor Performance: After launch, gather ongoing feedback and check how
users are interacting with the app.

• Plan Updates: Use feedback and data to continually improve the application over time.

9. Accessibility:

• Design for All Users: Ensure the mail application is accessible to everyone, including
people with disabilities. This may involve using clear language, appropriate contrast,
and keyboard navigation options.

• User Testing with Diverse Groups: Include users with different abilities in testing
phases to gather feedback on accessibility features.

10. User Education:

• Create Tutorials: Develop onboarding tutorials or help sections within the app to
guide users on how to use new features effectively.
 • Feedback Channels: Establish clear channels for users to report issues or
suggest improvements, fostering a community that feels heard and
valued.

RESULT:
Thus, the design thinking for the Mail Application was studied.
 Ex.No:7 BRAINSTORMING OF A NEW PRODUCT
Date:

AIM:
To brainstorm about a new product the Mail management application.

PROBLEM STATEMENT BRAINSTORMING:

1. Lack of Proactive Communication Management:

Users often miss critical emails due to insufficient notifications, reminders, or proactive
communication features.

2. Limited Accessibility Across Devices:

Many email platforms face challenges in delivering seamless experiences across different
devices and platforms.

3. Inefficient Spam and Junk Filtering:

Inadequate spam filters result in users spending time sorting through unnecessary emails.

4. Fragmented Email Organization:

Poor categorization and folder systems make it challenging for users to organize their
inbox efficiently.

5. Overwhelmed Inbox Management:

Users with high email volumes struggle to prioritize and manage their emails effectively.

6. Lack of User Engagement and Empowerment:

Users may not utilize advanced email features due to poor awareness or complex
interfaces.
 7. Resource Allocation and System Efficiency:
Email systems often fail to optimize server resource allocation, leading to slower
performance during peak usage.

8. Data Privacy and Security Concerns:

Ensuring robust encryption and secure storage of sensitive data remains a top concern for
users.

9. Community and Team Collaboration Features:

The absence of integrated collaboration tools, such as shared inboxes or real-time email
editing, hampers team efficiency.

10. Integration of Smart Features and Automation:

Leveraging AI to introduce features like smart email sorting, auto-replies, and calendar
integration can enhance productivity and user satisfaction.

OUTPUT:
RESULT:
Thus the brainstorming of a Mail application was studied and defined.
Ex.No:8 LOOK AND FEEL OF A NEW PRODUCT
Date:

AIM:
To define the look and feel of a new product.

PRODUCT LOOK AND FEEL:

1. Visual Elements:

i) Clean and Modern Interface:

The design should follow a minimalist approach with a clutter-free, intuitive layout,
ensuring the user is not overwhelmed by excessive information. Simple lines, generous white space,
and a focus on key actions should guide the user’s attention.
ii) Bright and Welcome Colors:
Incorporate calming colors like soft blues and greens to evoke a sense of trust,
security, and approachability. Accents of white or light greys can be used for the background to
enhance clarity, making the interface feel open and easy to navigate.
 iii) Simple and Friendly Icons:
Use universally recognized, simple icons to represent common functions like
composing, replying, archiving, and deleting emails. This will allow users to quickly understand the
purpose of each element and navigate the app with ease.
iv) High Quality Imagery:
Include high-resolution images in settings, themes, or promotional material to
personalize the experience. Imagery should reflect a modern, professional tone, while remaining
friendly and inviting.

2. Typography and Color Palette:

i) Clear and Readable Fonts:

Choose modern, easy-to-read fonts like Montserrat for headings and Roboto for
body text. The font choices should ensure legibility, even on smaller screens, and be consistent across
different platforms (desktop, tablet, and mobile).

ii) Consistent and Typography:

Maintain consistent font sizes, weights, and styles to reinforce a cohesive visual
identity throughout the application. This helps users feel comfortable and familiar with the interface,
whether they're composing an email or managing their inbox.
3. User Interface (UI) Elements:

i) User Friendly Navigation:

The email app should offer a straightforward navigation structure, ensuring that
common tasks—such as composing a message, checking the inbox, or searching for emails—are
easily accessible. Users should be able to quickly switch between views, such as Inbox, Sent, Drafts,
and Archives, with minimal effort.
ii) Interactive Elements:

Buttons, menus, and input fields should be interactive and responsive to user actions.
For example, buttons should have clear hover effects, and actions like sending or deleting emails
should result in immediate, tactile feedback, ensuring a seamless experience.
iii) Interactive Elements:
The app should provide clear, unobtrusive feedback to users regarding their actions,
such as email sent confirmation, error messages for failed actions, and reminders for unsent drafts.
This feedback should help users feel confident in their interactions with the system.

4. Branding and Logo:

i) App Branding:

The email application’s visual identity should align with the brand's core values—
professionalism, reliability, and accessibility. Incorporate brand elements such as logos, colors, and
consistent visual style to reinforce brand recognition.

ii) Consistent Branding Across Touchpoints:

Whether users interact with the email application on mobile, web, or through
promotional materials, maintain consistent branding across all platforms. This fosters trust and
ensures a unified user experience across different devices.
 5. Accessibility and Inclusivity:

i) Accessibility Features:

Ensure the app is accessible to all users, including those with visual impairments,
through features like high-contrast mode, adjustable font sizes, and compatibility with screen readers.
The app’s interface should be easy to navigate with or without assistive technologies.
ii) Language Support:

Provide multilingual support to cater to a diverse user base. The app should be able
to accommodate users from different linguistic backgrounds, offering multiple language options to
ensure inclusivity.

RESULT:
Thus the look and feel of a Mail application was created and defined.
 Ex.No:9 CREATE A SAMPLE PATTERN LIBRARY
Date: FOR A PRODUCT

AIM:
To create a sample pattern library for a Mail Application.

1. MOOD BOARD:
o Keywords: Efficient, Friendly, Accessible, Trustworthy, Professional.
o Images: Clean and simple inbox designs, Smiling support agents, Minimalist email
interfaces, Modern communication tools.
o Colors: Blue and green for trust and professionalism, White for simplicity and clarity,Light
grays for contrast and neutrality.

2. TYPOGRAPHY:
o Header Font: Montserrat (bold, modern)
o Body Font: Roboto (easy-to-read, versatile)
3. VISUAL ELEMENTS:
o Clean and Modern Interface: A minimalist layout with intuitive navigation.
o Bright and Welcoming Colors: Use of blue and green accents to make users feel atease.
o Simple and Friendly Icons: Easily recognizable icons (envelope, reply, star, etc.) to
enhance clarity.

4. DESIGN MOCKUPS:
o Inbox Screen: Clean list view with user-friendly organization of emails.
o Compose Screen: Minimalist email editor with prominent actions for composing,
attaching, and sending.
o Settings Dashboard: Simple controls for configuring notifications, themes, and
security settings.

5. BRANDING COLLATERAL:
o Logo and Brand Mark: Simple, modern logo with strong typography for clear
recognition.
 o Promotional Materials: Email signatures, banners for mobile and desktop
applications, app icons.

6. COLOR PALETTE:
i) Primary Colors:

o Blue (#007BFF): Trustworthy and calming, ideal for a professional environment.

o Green (#00B74A): Represents positive action, progress, and clear communication.
o White (#FFFFFF): Cleanliness, simplicity, and focus.
ii) Secondary Colors:

o Light Grey (#F2F2F2): Soft background for minimal distraction.

o Dark Grey (#333333): High contrast text for readability.

7. VISUAL STYLE GUIDE:

i) Design Principles:
o Minimalism: Keep the UI clear and clutter-free.
o Consistency: Design elements and interactions should be familiar and predictable.
o Efficiency: Fast access to important features, like inbox and compose.
ii) Color Palette: Use primary and secondary colors consistently to highlight important
elements.
iii) Typography Guidelines:
o Headers should use Montserrat for a clean, bold look.
o Body text should be set in Roboto for legibility and ease of reading.
 iv) Iconography: Simple, flat icons with easily recognizable metaphors (e.g., envelope, pencil,
paperclip).
v) Branding Specifications: Maintain the brand’s tone and identity through every interface, from
emails to marketing materials.

8. ACCESSIBILITY FEATURES:
o High Contrast Modes: Option to switch to a high-contrast theme for easier reading.
o Text Resizing Options: Allow users to adjust font sizes to their preference for better
accessibility.
o Language Support: Multi-language options for a global audience.

RESULT:
Thus the sample pattern library for a Mail application. was studied and defined.
Ex.No:10 IDENTIFY A CUSTOMER PROBLEM TO
Date: SOLVE

AIM:
To identify a customer problem to solve.

1. Lack of Efficient Email Organization and Prioritization:

Problem:
Many users struggle with overwhelming inboxes, leading to missed or delayed
responses to important emails. Lack of smart filtering, prioritization, and sorting makes it hard
for users to manage their emails effectively.
Solution:
Implement intelligent email categorization and prioritization systems (e.g.,
“Important” or “VIP” folders, smart tags) that automatically sort emails by urgency or relevance.
Include features like snooze, reminders, and AI-powered recommendations to help users stay on
top of critical emails without feeling overwhelmed.
2. Limited Accessibility for Users with Disabilities:
Problem:
Users with visual impairments or other disabilities face challenges when using email
applications that are not optimized for accessibility. This can lead to difficulties in navigating,
reading, and responding to emails.
Solution:
Develop accessibility features such as screen reader support, adjustable text size,
high-contrast mode, and voice commands. Also, integrate keyboard navigation shortcuts to help
users with disabilities navigate the email interface more easily.

3. Inefficient Email Collaboration and Group Communication:

Problem:
Collaboration within email threads is often inefficient, as users have to manually
track conversations, attachments, and task assignments in long email chains, leading to confusion
and missed action items.
Solution:
Integrate tools that enable email collaboration, such as threaded conversations, task
tracking, real-time editing, and shared document collaboration directly within the email interface.
Allow users to tag colleagues, assign tasks, and get notifications about progress in shared email
chains.
4. Fragmented User Experience Across Devices:
Problem:
Users often experience inconsistencies in the user experience when accessing their
emails on different devices (e.g., mobile phone, tablet, desktop), resulting in confusion and poor
usability.
Solution:
Create a seamless, responsive email application that offers a consistent, user-friendly
experience across all devices and platforms. Implement features such as cloud-syncing to ensure
that all folders, labels, and preferences are unified across devices.

5. Security and Privacy Concerns:

Problem:
With the rise of phishing attacks, spam, and data breaches, users are increasingly
concerned about the security and privacy of their email communications.
Solution:
Introduce enhanced email security features such as end-to-end encryption, two-
factor authentication, and phishing detection. Provide users with easy-to-understand privacy
settings to control who can access their data, and offer spam-filtering tools to block malicious
emails.
6. Low User Engagement and Email Overload:
Problem:
Users often feel overwhelmed by the sheer volume of emails they receive, resulting
in low engagement with important messages and a cluttered inbox.
Solution:
Implement email management features such as smart filtering, newsletter
categorization, one-click unsubscribe, and digest options to reduce email overload. Allow users
to create custom rules or use AI-driven suggestions to automatically sort or archive less relevant
emails.

RESULT:
Thus the problem identified and solution was defined.
 CONDUCT END TO END USER
Ex No:11 RESEARCH,CREATING PERSONAS,IDEATION
Date: PROCESS,FLOW DIAGRAMS AND FLOW
MAPPING

AIM:
To conduct end-to-end user research – user research, creating personas, ideation
process (user stories, scenarios), flow diagrams, flow mapping.

1. User Research:
Methodology: Conducted qualitative research through in-depth interviews and
quantitative research via surveys among email users, including working professionals,
students, and retirees.

Objective: To understand the needs, challenges, and preferences of users regarding

email communication, organization, notifications, and ease of access to feature.
2. Creating Personas:

Approach: Developed user personas based on research findings, representing distinct

user demographics, needs, and behaviors.

Persona Examples:

• Sarah: A 35-year-old project manager who values efficiency and needs

organized inbox management due to her heavy email volume.

• David: A 55-year-old retiree who uses email to stay in touch with family and
friends and prefers a simple, user-friendly interface with minimal notifications.
3. Ideation Process:
User Stories and Scenarios: Generated user stories and scenarios based on persona
needs and pain points to guide the design process.
User Stories Examples:

• As Sarah, I want a quick way to categorize and prioritize emails so I can

respond to important messages efficiently.

• As David, I want an easy-to-navigate app with clear labels and settings so I

can access my emails without confusion.
4. User Experience Flow Diagram:
Approach: Created flow diagrams to visualize the user journey through key
interactions and tasks within the mail app.
Flow Diagram Examples:

• Registration Flow: User enters personal details > Verifies email address >
Sets up login credentials > Completes setup.

• Email Organization Flow: User opens inbox > Selects emails to categorize >
Moves emails to folders or applies labels > Organizes inbox.
5. Flow Mapping:
Mapping Process: Mapped out user flows for different scenarios, including
onboarding, email management, and notification preferences.
Flow Mapping Examples:

• Onboarding Flow: Welcome screen > Introduction to key features >

Registration process > Confirmation of setup.

• Email Management Flow: Home screen > View inbox > Organize emails by
priority or category > Archive, delete, or mark as read.

6. UX Testing:
Methodology: Conducted usability testing sessions with representative users to
evaluate the effectiveness and usability of the mail app prototype.
Objectives: Gathered feedback on user interface design, navigation structure, and
overall user experience to inform iterative design improvements.
Outcome: Iterated on design improvements based on user feedback, resulting in a
user-friendly and efficient mail app that meets the needs of users.
RESULT:
Thus, the end-to-end user research for the mail application has been successfully
conducted and outlined.
Ex no:12 SKETCH DESIGN AND BUILD A PROTOTYPE
Date: AND PERFORM USABILITY TESTING AND
IDENTIFY IMPROVEMENTS

AIM:

To sketch, design using a popular tool, build a prototype, and perform usability testing
to identify improvements for a mail app.

PROCESS FOR BUILDING THE PROTOTYPE:

1. Research and Analysis:

• Understand the target audience (e.g., professionals, general users,

administrators).

• Analyze existing mail applications to identify strengths, weaknesses, and

areas for improvement.

• Conduct interviews, surveys, and usability tests to gather insights into user
needs and pain points.

2. Define User Personas and Use Cases:

• Develop personas representing different user groups (e.g., daily users,

occasional users, power users).

• Define specific use cases and scenarios the mail app will address (e.g.,
composing emails, managing folders, quick searches).

3. Information Architecture:

• Create a sitemap to organize the structure of the mail app.

• Define navigation flow and hierarchy of information for ease of use.

4. Prototyping:

• Use prototyping tools (e.g., Sketch, Adobe XD, Figma) to create interactive
prototypes based on wireframes.
 • Include basic functionality such as navigation, form inputs, and interaction
elements.

• Iterate on the prototype based on feedback from stakeholders and users.

5. Visual Design:

• Develop high-fidelity mockups based on the approved wireframes and

prototype.

• Apply visual design elements such as colors, typography, and icons to createa
visually appealing interface.

• Ensure that the design aligns with branding guidelines (if applicable) and is
accessible to all users.

6. Prototype Testing:

• Conduct usability testing with real users to gather feedback on the

prototype.

• Identify usability issues or areas for improvement.

• Iterate on the design based on user feedback and testing results.

KEY IMPROVEMENTS TO IMPLEMENT:

1. Simplified Onboarding:

• Streamline the registration and onboarding process, reducing the number

of steps required to set up an account or access key features.

• Implement clear instructions and visual cues to guide users through

onboarding smoothly.

2. Intuitive Navigation:

• Design an intuitive navigation structure that allows users to find information

and features easily.

• Use familiar navigation patterns (e.g., tab bars or side menus) and organize
content logically to reduce cognitive load.
 3. Clear and Accessible Information:

• Ensure that information and instructions are presented clearly and concisely.

• Use plain language where possible and provide explanations or definitions for
complex terms.

• Make text easy to read by using appropriate font sizes, contrast ratios, and
spacing.

Step 1: Creating a wireframe

Step 2: Designing the PHC
Sign In Page Enter username and password Finish Sign In

Inbox page Detailed Inbox Viewing email from Inbox

Compose email Search emails Drafts page

Viewing Profile Meeting page AI Assistant

AI Assistant
 View Snoozed emails Social page Promotions page

USABILITY TESTING:
Performing usability testing in Figma involves a combination of tools within Figma itself and
external platforms for conducting the actual tests. Here's a step by-step guide:
1. Prepare Your Design in Figma:
Create or import your design into Figma. Ensure that it represents the interface or product
you want to test accurately.
2. Identify Test Objectives:
Clearly define what you want to test and achieve from the usability testing. This could
include understanding user behavior, identifying pain points, or validating design decisions.
3. Recruit Test Participants:
Find participants who match your target user demographics. Aim for diversity to capture
a range of perspectives. You can recruit participants through various channels such as user
research platforms, social media, or email lists.
4. Choose a Usability Testing Tool:
While Figma doesn't have built-in usability testing capabilities, there are several third-
party tools you can integrate with Figma for testing, such as Maze, User Testing, or Lookback.
Choose the tool that best fits your needs and integrates smoothly with Figma.
5. Set Up Your Test in the Usability Testing Tool:
Create your test scenario, tasks, and questions within the chosen usability testing tool.
Ensure that tasks are clear, concise, and relevant to your test objectives.
6. Create Prototypes in Figma:
Use Figma's prototyping feature to create interactive prototypes of your design. Link
screens together to simulate user flow and interactions.
7. Integrate Prototypes with the Usability Testing Tool:
Connect your Figma prototypes with the usability testing tool you've chosen. This
typically involves importing your Figma designs into the tool and setting up any interactions or
hotspots needed for testing.
8. Conduct Usability Testing Sessions:
Invite participants to take part in the usability testing sessions through the chosen tool.
Provide clear instructions and guidance for participants.
9. Observe and Collect Feedback:
During the testing sessions, observe how participants interact with the prototype. Take
note of any issues, feedback, or insights they provide.
10. Analyze Results:
Review the data collected from the usability testing sessions. Look for patterns, common
issues, and areas of improvement.
11. Iterate on Design:
Based on the insights gathered from usability testing, make necessary revisions to your
design in Figma. Address any identified issues or pain points.
12. Repeat Testing (if necessary):
If significant changes were made to the design, consider conducting additional rounds of
usability testing to validate improvements.
13. Implement Final Design:
Once you're satisfied with the usability of your design, finalize it in Figma and prepare it
for development or further iterations.
14. Document Findings:
Document the findings from the usability testing sessions along with any design changes
made as a result. This documentation can inform future design decisions and serve as a reference
for stakeholders.
15. Share Results:
Share the findings from the usability testing with relevant stakeholders to keep them
informed about the user feedback and design improvements.
MAZE PLATFORM FOR TESTING:
Creating maze project for the usability testing:

Then, build the test case using the maze with the template with the questions generated:
Results observed on usability testing:
RESULT:

Thus, the application is designed, implemented and also tested in the maze platform.