ST.

JOSEPH COLLEGE OF ENGINEERING

SRIPERUMBUDUR

CCS370-UI & UX DESIGN LABORATORY

NAME OF THE STUDENT :

REGISTER NUMBER :

DEPARTMENT : INFORMATION TECHNOLOGY

YEAR / SEM : III / V

 ST.JOSEPH COLLEGE OF ENGINEERING
SRIPERUMBUDUR

UNIVERSITY REGISTER NUMBER:

Certified that this is bonafide record of practical work done by

Mr./Ms___________________________ of INFORMATION TECHNOLOGY
Department in the CCS370-UI & UX DESIGN LABORATORY during the
semester V year III and submitted for the University Practical Examination conducted
on _______________ in ST.JOSEPH COLLEGE OF ENGINEERING
SRIPERUMBUDUR

LAB IN-CHARGE HEAD OF THE DEPARTMENT

INTERNAL EXAMINER EXTERNAL EXAMINER

 CONTEXT

EX.NO DATE EXPERIMENT PG.NO SIGN

1. Designing a responsive layout for an 1
societal application
2. Exploring various UI interaction
4
patterns
3. Developing an interface with UI
6
styled guide lines
4. Developing a wireflow diagram for
9
application using open source software
5. Exploring various open source and
11
collaborative interface platforms
6. Hands on design thinking process for a
14
new product
7. Brainstroming ideas for an proposed
16
project
8. Defining the look and feel of the
20
project
9. Create a sample pattern library for that
product ( mood boards, fonts,
22
colors based on UI principles)
10. Identify a customer problem to solve 25
11. Conduct end-to-end user research- User
research, creating personas, ideation
process, user stories, scenarios), Flow 28
diagrams, Flow mapping
12. Sketch, design with popular tool and
31
build a prototype and perform usability
testing and identify improvements
Ex.No:01 Designing a responsive layout for an societal application
Date:

AIM:
Designing a responsive layout for an societal application

PROCEDURE:
Setting Up the Figma File:
Create a new Figma project and set the canvas size to a common mobile
breakpoint (e.g., 320px wide). This helps you start with a mobile-first approach. As
you design, you'll expand the canvas width for larger breakpoints.

Components and Styles:

Create components for reusable UI elements like buttons, headers, and form
fields. Define text and color styles to maintain consistency throughout your design.

Design for Mobile:

Begin by designing your user interface for the mobile layout. Place components
and arrange elements according to the content hierarchy. Keep in mind touch-friendly
sizes and spacing.

Viewport Resizing:
To simulate different screen sizes, use Figma's built-in viewport resizing feature.
Select the viewport and resize it to the desired width. This helps you visualize how
your design adapts to different breakpoints.

Creating Variants:
For each component, create variants that represent different states or sizes. For
example, a button might have a normal state, a hover state, and a larger size for tablet
layouts.

Auto Layout:
Figma's Auto Layout feature is incredibly useful for responsive designs. Use
Auto Layout to ensure that components within a container adjust their positions and
sizes automatically when the container's size changes.

Constraints:
Apply constraints to components to define how they respond to resizing.
Constraints define whether components stick to the left, right, top, or bottom of their
parent container.

Spacing and Margins:

Use relative spacing and margins to maintain consistent padding between
elements. This ensures that spacing adapts proportionally to different screen sizes.

1
Grid Systems:
You can create grids in Figma to help align and organize your design
elements. Define grids for different breakpoints to maintain alignment as you scale
your design.

Media Queries and Styles:

Use Figma's Components and Styles features to apply different styles for each
breakpoint. Create styles for typography, buttons, and other UI elements that change
based on the screen size.

Preview and Prototype:

Figma allows you to create interactive prototypes. Link artboards to show how
the design flows between different screens and breakpoints. Preview the prototype to
get a sense of the user experience.

User Testing and Feedback:

Share the Figma prototype with stakeholders or users to gather feedback. Use
this feedback to iterate and refine your responsive design.

Documenting Guidelines:
Figma allows you to create design systems and style guides. Document your
responsive design guidelines, including breakpoints, constraints, and component
variations, to maintain consistency as your project progresses.

Example design:

2
INFERENCE:
Building a societal application using Figma offers the advantage of real-time
collaborative design, facilitating remote teamwork on responsive layouts, interactive
prototypes, and user testing. With version control, design systems, and UI kits, Figma
streamlines the design process while fostering consistency and efficient
communication among team members. Its export and handoff features aid seamless
transition from design to development, and its adaptability empowers iterative
refinement, making Figma a versatile and user-centric tool for crafting effective
societal applications.

RESULT:
From this experiment we learnt to build an societal application using figma.

3
Ex.No:2 Exploring various UI interaction patterns
Date:

AIM:
To Exploring various UI interaction patterns

PROCEDURE:

Clicks/Taps:
Users perform a single click (on desktop) or tap (on mobile devices) on buttons,
links, or interactive elements to trigger actions like opening a page, submitting a form,
or revealing additional information.

Hover/Mouseover:
When users move their cursor over an element, it triggers a visual change or
displays additional information, providing contextual cues. For example, buttons
might change color or tooltips may appear.

Swipe/Gesture:
On touch-enabled devices, users use swiping gestures to scroll through content,
navigate between pages, or dismiss items. These gestures enhance navigation and
engagement.

Drag and Drop:

Users click and hold an element, drag it to a new location, and release to
perform actions such as reordering items, moving files, or customizing layouts.

Scrolling:
Scrolling allows users to vertically or horizontally navigate through content
that doesn't fit within the visible area. It's a fundamental way to explore lengthy web
pages or lists.

Accordion:
Accordions allow users to expand and collapse sections of content, conserving
space while providing a way to reveal additional information or options.

Modal/Popup:
Modals or popups are temporary overlays that appear on top of the main
content. They require user interaction before users can proceed, providing focused
attention on a specific task.

Toggle Switch:
Toggle switches represent binary options that users can switch on or off.
They're often used for settings or toggling between modes.

Radio Buttons and Checkboxes:

Radio buttons allow users to select a single option from a list, while
checkboxes enable multiple selections. They're commonly used in forms and settings.

4
Menu:
Menus display a list of options or actions that users can select, often accessed
through buttons or icons, providing a hierarchical structure to navigate within an app.

Progress Bar/Loader:
Progress bars or loaders indicate the status of an ongoing task or loading
process, keeping users informed about the system's activity.

Search and Filters:

Search bars allow users to input keywords for finding specific content, while
filters refine search results based on various criteria, improving content discovery.

Example Desgin:

RESULT:
To Exploring various UI interaction patterns has been showed using Figma.

5
Ex.No:3 Developing an interface with UI styled guide lines
Date:

AIM:
Developing an interface with UI styled guide lines

PROCEDURE:

Define Your Brand and Audience:

Clearly understand your brand identity and target audience. Determine the visual
tone, colors, typography, and overall style that align with your brand's personality and
resonate with your users.

Create a Design System:

Establish a design system that outlines the core components, styles, and
guidelines for your interface. This includes typography, color palette, buttons, form
elements, icons, spacing, and more.

Typography Guidelines:
Define font families, sizes, weights, and line heights for headings, subheadings,
body text, and other UI elements. Ensure legibility and readability across different
devices.

Color Palette:
Select a cohesive color palette that reflects your brand's identity. Define
primary, secondary, and accent colors, along with their uses and combinations for
various UI components.

Iconography:
Choose a set of icons that match your brand and interface style. Ensure icons
are consistent in size, style, and meaning, and provide guidelines for their usage.

Buttons and Interactive Elements:

Define button styles, including normal, hover, active, and disabled states.
Establish guidelines for interactive elements like links, checkboxes, radio buttons, and
more.

Spacing and Layout:

Set guidelines for margins, padding, and spacing between elements to ensure
a visually balanced and organized layout. Establish a grid system for consistent
alignment.

Form Design:
Outline guidelines for form fields, labels, placeholders, and error messages to
create a user-friendly and accessible form experience.

6
Responsive Design:
Define how UI elements and layouts should adapt to different screen sizes
and devices. Consider breakpoints and how components will reflow as the screen size
changes.

Visual Consistency:
Ensure visual consistency across different sections of the interface. Elements
like headings, buttons, and icons should have a uniform appearance throughout the
application.

Accessibility Guidelines:
Incorporate accessibility guidelines to ensure your interface is usable by
people with disabilities. Provide high contrast, readable fonts, and accessible
interactions.

Documentation:
Compile all style guidelines, components, and rules into a comprehensive
document or design tool. This documentation serves as a reference for designers,
developers, and stakeholders.

Iterate and Update:

Regularly review and update your UI style guidelines as the application
evolves or new design trends emerge. Maintain consistency while staying adaptable to
changes
Example Design:

7
Interfrence
Developing an interface with UI style guidelines involves crafting a user-centric
design system that unifies visual elements and interactions. By defining typography,
color palettes, buttons, spacing, and responsive layouts, you ensure a consistent and
visually appealing experience. These guidelines facilitate efficient design and
development collaboration, enhance user recognition and usability, and reinforce
brand identity. Regularly updating and iterating on these guidelines maintains a
cohesive interface while accommodating evolving design trends and user needs.

Result:
From this expt we learnt how to Develope an interface with UI styled guide line s

8
EX.No:4 Developing a wireflow diagram for application using
Date: open source software

AIM :
Developing a wireflow diagram for application using open source software

PROCEDURE:

Choose Tools:
Select open-source software for wireframing and flowcharting. For wireframing,
you can use tools like "Pencil Project" or "MockFlow". For flowcharting, "Draw.io"
or "Dia" are good choices.

Understand Application Flow:

Before you start, have a clear understanding of how users will navigate through
your application. Outline the main screens and the flow between them.

Wireframe Main Screens:

Use your chosen wireframing tool to create rough sketches of the main screens
of your application. Focus on layout, content placement, and key elements.

Connect Screens:
Use arrows or connectors provided by the wireframing tool to depict the flow
between screens. Indicate how users will move from one screen to another.

Add Annotations:
Label the connectors with the actions or interactions that trigger the transition.
For example, "Click 'Login'" or "Swipe to Next Page."

Detail Interactions:
Within each screen, include annotations or descriptions of how users can interact
with various elements, such as buttons, links, and form fields.

Flowchart Transitions:
Open your flowcharting tool and create a new document. Create flowchart
elements to represent screens and interactions. Use arrows to show the flow between
screens.

Organize Elements:
Arrange the flowchart elements logically to reflect the sequence of actions
users will take. Group related screens and interactions together.

Label and Describe:

Label each flowchart element with the screen name and describe the interaction
that leads to that screen. This makes your diagram easy to understand.

Review and Refine:

Review your wireflow diagram to ensure that the application's flow is
accurately represented. Make any necessary adjustments or refinements

9
Export or Share:
Save your wireflow diagram in a suitable format (e.g., PDF, PNG) using the
respective open-source tools. You can also share the diagrams with team members for
feedback.

Iterate as Needed:
As your application's design evolves, revisit and update your wireflow
diagram to reflect any changes in the user flow or interactions.

Example Design:

INFERENCE:
Creating a wireflow diagram for an application using open-source tools involves
sketching main screens in "Pencil Project" for wireframing and using "Draw.io" for
flowcharting. Connect screens with arrows to show user navigation and add
annotations to describe interactions. Organize elements logically, label screens, and
detail interactions to provide a clear overview of the application's functionality.
Sharing or exporting the diagram supports collaboration, making it a valuable tool for
design communication and iteration.

RESULT:
In this expt we learnt how to develope a wireflow diagram for application using open
source software

10
Ex.No:5 Exploring various open source and collaborative
Date: interface platforms

AIM:
Exploring various open source and collaborative interface platforms

PROCEDURE:

Figma:
Figma is a popular cloud-based design tool that enables real-time collaboration.
Multiple team members can work on the same project simultaneously, making it easy
to create and iterate on UI/UX designs. It's widely used for its robust collaboration
features and user-friendly interface.

Adobe XD:
Adobe XD is another widely used design and prototyping tool that offers
collaboration features. While not fully open-source, it's a powerful tool for designing
and sharing interactive prototypes.

InVision:
InVision is known for its prototyping capabilities and collaborative features. It
allows designers to create interactive prototypes and gather feedback from
stakeholders and team members.

Sketch:
Sketch is a macOS-only design tool that's popular among UI/UX designers.
While it's not open-source, it offers various plugins and integrations that can enhance
collaboration and streamline the design process.

Zeplin:
Zeplin is a collaboration tool specifically designed for UI designers and front-
end developers. It helps bridge the gap between design and development by
generating style guides and assets from design files.

Miro:
Miro is a collaborative online whiteboard platform that can be used for various
purposes, including UI/UX design. It's not a traditional design tool but can be useful
for brainstorming, wireframing, and collaborative ideation.

Framer:
Framer offers design, prototyping, and coding capabilities, making it a good
choice for those who want more control over their design interactions. It also supports
collaboration and sharing.

Gravit Designer:
Gravit Designer is a vector design app with both online and downloadable
versions. It's less complex than some of the other options but can still be a good fit for
simple UI/UX projects.

11
EXAMPLE DESIGN:

12
INFERENCE:
The project involves the exploration of various open-source and collaborative
interface platforms centered around UI/UX design. By leveraging tools such as
Figma, Adobe XD, InVision, and more, the aim is to facilitate effective collaboration
between designers and developers in creating user-friendly experiences. Through
these platforms, teams can work in real-time, iteratively designing and prototyping
interfaces, bridging the gap between design and development, and ultimately
enhancing the efficiency and quality of the design process.

RESULT:
From this expt we learnt about various open source and collaborative interface
platform.

13
Ex.No:6 Hands on design thinking process for a new
Date: product

AIM:
Hands on design thinking process for a new product

PROCEDURE:
Empathize:
Begin by understanding the needs, wants, and challenges of your target users.
Conduct interviews, surveys, and observations to gather insights into their behaviors
and motivations. Develop empathy by putting yourself in their shoes to uncover
hidden pain points.

Define:
Synthesize the information you've gathered during the empathy phase to identify
the core problems and opportunities. Create a clear and focused problem statement
that will guide your design process. The goal is to frame the challenge in a way that
inspires innovative solutions.

Ideate:
Generate a wide range of creative ideas. Organize brainstorming sessions and
encourage participants to think outside the box. Use techniques like mind mapping,
SCAMPER (Substitute, Combine, Adapt, Modify, Put to another use, Eliminate,
Reverse), and "What If" scenarios to stimulate idea generation.

Prototype:
Develop rough, low-fidelity prototypes of your ideas. These could be sketches,
digital wireframes, or even physical models, depending on the nature of your product.
Prototyping allows you to quickly visualize concepts and gather feedback before
investing too much time and resources.

Test:
Put your prototypes in front of users to gather feedback. This can be through
usability testing, surveys, or interviews. Observe how users interact with your
prototypes and pay attention to their reactions, frustrations, and suggestions. Use this
feedback to refine and iterate on your design.

Iterate:
Based on the feedback received during testing, make necessary refinements to
your prototypes. Iterate on your design, incorporating user insights and making
improvements to address any pain points or concerns that emerged during testing.

Implement:
Once you've refined your design through iterative testing and improvements, it's
time to move towards the final product. Develop high-fidelity prototypes or a
minimum viable product (MVP) that represents a functional version of your idea.

14
Feedback Loop: Even after implementation, continue to gather feedback from users
and stakeholders. This ongoing feedback loop ensures that your product remains user-
centered and can be further refined based on real-world usage.

INFERENCE:
The project follows a comprehensive design thinking process to create a new product,
prioritizing user needs and innovative solutions. By empathizing with target users,
defining precise problem statements, ideating through creative brainstorming, and
rapidly prototyping concepts, the project aims to develop user-centric designs. These
designs are rigorously tested and iterated upon based on real user feedback, ensuring
the final product aligns seamlessly with user expectations. The process encourages
collaboration, continuous improvement, and a holistic approach to design and
innovation, resulting in a product that effectively addresses user pain points and
stands out in the market.

RESULT:
From the above expt we learnt design thinking process for a new product.

15
Ex.No:7 Brainstroming ideas for an proposed project
Date:

AIM:
To Brainstroming ideas for an proposed project

PROCEDURE:
User Needs and Problems:
What are common challenges or pain points that your target audience faces?
How can you simplify or improve a specific process for your users?
What needs are currently underserved in the market?

Technology and Innovation:

How can emerging technologies like AI, IoT, or blockchain be applied to your
project?
Can you create a new tool, app, or platform that leverages existing technology
in a unique way?
Are there opportunities to use technology to improve efficiency or accessibility?

Social Impact:
How can your project contribute to sustainability or environmental goals?
Is there a way to address social issues or promote inclusivity through your
project?
Can your project inspire positive behavioral change in individuals or
communities?

Market Trends and Gaps:

Are there trends in your industry that you can capitalize on?
Are there gaps in the market where your project could fill a need?
How can you differentiate your project from existing solutions?

Collaborations and Partnerships:

Are there potential collaborations with other organizations, startups, or
institutions?
Can you leverage partnerships to enhance the value of your project?
How can you tap into existing networks to gain traction?

Creative Twists:

Can you combine two unrelated concepts to create something innovative?

What if you turned common assumptions about your industry upside down?
How can you inject an element of surprise or delight into your project?

User Experience and Design:

How can you create a more seamless, intuitive, or enjoyable user experience?
Are there opportunities to enhance the aesthetics and visual appeal of your
project?
Can you introduce gamification elements to engage users more effectively?

16
Scalability and Growth:
How can your project be scaled to accommodate a larger user base over time?
Are there features or functionalities that can be added in the future to keep
users engaged?
What strategies can you implement to ensure long-term sustainability?

BRAINSTROMED IDEAS FOR AN MOBILE APP:

Clean and Minimalistic Interface:
Use a clean and minimalistic design to convey a sense of professionalism and
trust.
Opt for a light color palette with shades of blue and white, which are
commonly associated with healthcare and cleanliness.
Keep the layout uncluttered, focusing on easy navigation and readability.

Intuitive Navigation:
Design a user-friendly navigation system, such as a bottom navigation bar or a
simple menu.
Ensure that users can easily access essential features like appointment
booking, medical records, and medication reminders.

Personalized Dashboard:
Provide users with a personalized dashboard where they can see their upcoming
appointments, recent medical history, and medication reminders at a glance.
Use clear icons and labels to help users quickly identify different sections.

Appointment Booking:
Create a streamlined appointment booking process with a date picker,
available time slots, and an option to select preferred doctors or specialists.
Allow users to view doctor profiles, including their qualifications, specialties,
and patient reviews.

Health Records and Reports:

Design a digital health record system where users can access their medical
history, test results, and diagnoses.
Implement visualizations like graphs and charts to help users track their
health progress over time
.
Medication Reminders:
Incorporate a medication reminder feature that allows users to set up alarms
for taking their medications.
Use clear visuals to indicate which medications to take and when.

Virtual Consultations:
Integrate video or chat-based virtual consultations with healthcare professionals.
Design an interface that allows users to schedule and join virtual appointments
seamlessly.

17
Emergency Assistance:
Include an emergency button on the home screen that connects users to
emergency services or nearby healthcare facilities.
Implement features like "ICE" (In Case of Emergency) contacts that can be
accessed without unlocking the phone.

Educational Resources:
Offer a section with health-related articles, tips, and information to educate
users about various health topics.
Use engaging visuals and infographics to simplify complex medical concepts.

Accessibility Features:
Ensure the app is accessible to users with disabilities by implementing features
like voice commands, larger text options, and high contrast modes.

User Feedback and Ratings:

Allow users to provide feedback on doctors, services, and their overall app
experience.
Display doctor ratings and patient testimonials to help users make informed
decisions.

Security and Privacy:

Emphasize the app's commitment to data security and patient confidentiality
through clear messaging and secure login methods.

DESIGN:

18
INFERENCE: The brainstorming session focuses on generating diverse and
innovative ideas for a proposed project. Through collaborative and creative thinking,
participants contribute a range of concepts that reflect varied perspectives and
potential solutions. This process encourages a free flow of ideas without immediate
judgment, fostering an environment where even unconventional or ambitious
suggestions are welcomed. By harnessing the collective intelligence of the team, the
brainstorming session aims to lay the foundation for a project with a rich pool of
possibilities that can be further refined and developed into actionable strategies.

RESULT:
From this expt we learnt how brainstroming works

19
Ex.No:8 Defining the look and feel of the project
Date:

AIM:
Defining the look and feel of the project

Introduction to Defining the Look and Feel:

Purpose of Defining the Look and Feel:
In the process of creating a compelling and user-centered project, defining the
"look and feel" is of paramount importance. This stage encompasses visual design,
user interface (UI) elements, typography, color palette, imagery, and overall aesthetic
choices that collectively shape the user's perception and experience.

Significance of Visual Identity:

The visual identity establishes the project's personality and sets the tone for
user engagement. A well-defined visual identity not only makes the project
memorable but also enhances brand recognition, user trust, and emotional connection.
This section will delve into how the visual identity contributes to effective
communication and fosters a sense of consistency.

Elements of Look and Feel Definition:

Visual Design and Brand Consistency
This section will explore how visual design elements such as logo, icons, and
graphics contribute to brand consistency. It will discuss the importance of maintaining
a cohesive visual language across all touchpoints to create a seamless and
recognizable user experience.

User Interface (UI) Elements and Interaction Design

Detailing the importance of UI elements such as buttons, navigation bars, and
forms in guiding users through the project. It will emphasize the significance of
intuitive navigation and user-friendly interactions that enhance usability and minimize
friction.

Typography and Readability

Exploring the role of typography in conveying information effectively. This
section will discuss font choices, text hierarchy, and readability considerations to
ensure that users can easily consume and comprehend the content presented.

Color Palette and Emotional Impact

Discussing the psychological impact of color choices on user emotions and
perceptions. This section will highlight the importance of selecting a color palette that
aligns with the project's objectives and resonates with the target audience.

Imagery and Visual Content

Addressing the role of imagery in storytelling and evoking emotions. This
section will emphasize the significance of high-quality visuals, illustrations, and
multimedia content that enhance the project's narrative and engagement.

20
Accessibility and Inclusivity
This section will touch upon the importance of designing with accessibility
in mind. It will cover considerations for color contrast, font size, and other
accessibility factors to ensure that the project is usable by a diverse range of users,
including those with disabilities.

Iterative Refinement and User Feedback

Concluding with the iterative nature of defining the look and feel. This
section will emphasize the value of gathering user feedback and continuously refining
visual and experiential aspects to align with evolving user expectations and project
goals.

INFERENCE:
The project centers on the crucial task of defining the visual identity and
experiential aspects, encapsulating the project's essence. It highlights the significance
of a consistent and well-crafted visual identity that resonates with users and builds
brand recognition. By meticulously addressing elements like user interface,
typography, color palette, and imagery, the project aims to create a holistic user
experience that fosters engagement and emotional connection. The emphasis on
accessibility ensures inclusivity, while the iterative process acknowledges the
dynamic nature of design, allowing for continuous improvement based on user
feedback and evolving requirements.

RESULT:
From the above expt we learnt Defining the look and feel of the project

21
Ex.No:9 Create a sample pattern library for that product
Date: ( mood boards, fonts, colors based on ui principles)

AIM:
Create a sample pattern library for that product ( mood boards, fonts, colors based on
ui principles)

Product Pattern Library

Mood Boards:
1. Modern Minimalism
Description: Clean lines, ample white space, and minimalistic aesthetics convey a
sense of sophistication and simplicity.
Key Attributes: Minimalistic design, monochromatic color scheme, spacious layouts.
Keywords: Clean, Elegant, Contemporary.

2. Playful Interaction
Description: Vibrant colors, playful typography, and dynamic animations create an
engaging and lively user experience.
Key Attributes: Bold colors, playful graphics, animated elements.
Keywords: Fun, Interactive, Energetic.

Fonts:
1. Sans Serif - "OpenSans"
Description: OpenSans provides clear legibility and a modern touch, suitable for
headings and body text.
Usage: Headings, body text, buttons.
Weights: Regular, Bold.

2. Display - "Bungee Inline"

Description: Bungee Inline adds a touch of uniqueness to headings and emphasizes
creative aspects.
Usage: Headings, creative titles.
Weights: Regular.

Colors:
1. Primary Palette:
Primary Blue: #007BFF
Secondary Blue: #6E86FF
Primary Green: #2ECC71
Primary Gray: #333333
2. Secondary Palette:
Accent Yellow: #FFD700
Accent Red: #FF5733
Accent Purple: #9B59B6
UI Principles:

1. Consistency
Maintain a consistent visual language across all interface elements, ensuring a
coherent and unified user experience.

22
2. Contrast
Use color contrast effectively to ensure text readability and emphasize important UI
components.

3. Hierarchy
Establish a clear hierarchy through font sizes, styles, and spacing to guide users'
attention and convey information effectively.

4. Visual Feedback
Provide visual cues such as hover effects, animations, and feedback states to enhance
user interaction and engagement.

5. Accessibility
Prioritize accessibility by using high contrast colors, legible fonts, and adhering to
accessibility guidelines.

6. Mobile Responsiveness
Design with mobile devices in mind, ensuring responsive layouts and touch-friendly
interactions.

7. Microinteractions
Incorporate subtle animations and microinteractions to enhance the user experience
and make interactions feel intuitive.

INFERENCE:
The provided sample pattern library offers a comprehensive guide for designing the
product's visual identity and user interface. By curating distinct mood boards that
capture the essence of modern minimalism and playful interaction, the project
establishes a clear tone for the design direction. The carefully chosen fonts, including
the sans-serif OpenSans for clarity and the display font Bungee Inline for creative
emphasis, contribute to a versatile typographic hierarchy. The dual-color palette,
comprising primary and secondary colors, adheres to UI principles, ensuring both
aesthetic appeal and accessibility. Additionally, the outlined UI principles underscore
the project's commitment to delivering a consistent, accessible, and engaging user
experience across various devices, culminating in a holistic design approach that
prioritizes both form and function.

23
Example design:

RESULT:
From this Expt we learnt how to Create a sample pattern library for that product (
mood boards, fonts, colors based on ui principles)

24
Ex.No:10 Identify a customer problem to solve
Date:

AIM:
Identify a customer problem to solve

PROBLEM STATEMENT:
Many brands and aspiring influencers struggle to efficiently connect and
collaborate in the fast-paced digital landscape. There is a clear need for a user-friendly
website that seamlessly facilitates the grouping and matchmaking of influencers and
brands, enabling streamlined communication, targeted partnerships, and effective
collaboration. This platform should address challenges such as finding the right
influencer-brand fit, managing negotiations, and tracking campaign performance,
ultimately simplifying the process of forming mutually beneficial partnerships in the
ever-evolving realm of influencer marketing.

STEP-BY-STEP APPROACH:
Step-by-Step Approach to Solving the Problem Through UI/UX Design:

Step 1: User Research and Empathy

Conduct in-depth user research to understand the pain points and frustrations
users experience while using the current website. Engage with both influencers and
brands to gain insights into their unique needs and challenges. Develop empathy for
their struggles to inform the design process.

Step 2: Information Architecture and Navigation Design

Revamp the website's information architecture to create a clear and organized
navigation structure. Categorize influencers by niche, follower count, and engagement
rate, while also enabling brands to specify their requirements. Implement an intuitive
search bar and advanced filters to make it easy for users to find relevant influencers or
brands quickly.

Step 3: Transparent Communication System

Introduce a transparent communication system to enhance the partnership
process. Implement real-time messaging and collaboration tools, allowing influencers
and brands to communicate directly on the platform. This feature not only reduces the
need for external communication channels but also ensures all negotiation details are
documented and easily accessible.

Step 4: User-Centric Profiles and Dashboards

Redesign user profiles for both influencers and brands to showcase their
portfolio, past collaborations, and performance metrics. Create customizable
dashboards that provide insights into ongoing campaigns, engagement rates, and other
relevant analytics. This empowers users with the data needed to make informed
partnership decisions.

Step 5: Interactive Prototyping and User Testing

Develop interactive prototypes based on the redesigned UI/UX. Conduct
thorough user testing sessions with a diverse group of influencers and brands to

25
validate the usability and effectiveness of the new design. Collect feedback to identify
any remaining pain points and areas for improvement.

Step 6: Iterative Design Refinement

Based on the user testing feedback, iterate on the design to refine the user
experience further. Implement necessary adjustments to enhance usability,
accessibility, and overall user satisfaction. Continue testing and iterating until the
design meets users' needs and expectations.

Step 7: Launch and Continuous Improvement

Launch the revamped website to users, ensuring a smooth transition and
providing support for any questions or concerns. Monitor user interactions, gather
feedback, and track key metrics to identify areas that require ongoing improvement.
Regularly update the platform based on user feedback and evolving user needs.

WEB DESIGN:

26
SOURCE: GOMONETIZE.IN

INFLUENCE:
The customer problem statement highlights usability challenges faced by users of an
influencer-brand grouping website, including unintuitive navigation and a lack of
transparency during collaboration. The step-by-step approach to solving these issues
through UI/UX design emphasizes comprehensive user research and empathy,
redesigning information architecture and navigation, introducing transparent
communication tools, enhancing user profiles and dashboards, iterative testing, and
ongoing improvement. This approach aims to create an intuitive and efficient platform
that empowers influencers and brands to easily connect and collaborate, ultimately
fostering more meaningful and successful partnerships while providing a seamless
and satisfying user experience.

RESULT:
In this expt we learnt how Identify a customer problem to solve

27
Ex.No:11 Conduct end-to-end user research- User research,
Date: creating personas, ideation process, user stories,
scenarios), Flow diagrams, Flow mapping

AIM: Conduct end-to-end user research- User research, creating personas, ideation
process, user stories, scenarios), Flow diagrams, Flow mapping

PROCEDURE:
Conducting end-to-end user research and design involves several critical steps to
ensure a user-centered approach. Here's an overview of the process:

User Research:
User Interviews and Surveys: Conduct interviews and surveys with target users to
understand their needs, preferences, pain points, and behaviors. Gather qualitative and
quantitative data to inform the design process.

Competitor Analysis: Study competitors' products to identify gaps, strengths, and

opportunities for differentiation. Analyze user feedback and reviews to gain insights
into what users like and dislike about existing solutions.

Creating Personas:
Persona Development: Based on the user research findings, create detailed user
personas representing distinct user segments. Each persona should include
demographics, motivations, goals, challenges, and behaviors.
Ideation Process:

Brainstorming Sessions: Organize brainstorming sessions with cross-functional

teams to generate creative ideas for addressing user needs and solving identified
problems. Encourage a free flow of ideas without judgment.

Idea Prioritization: Evaluate and prioritize the generated ideas based on factors such
as feasibility, alignment with project goals, and potential impact on user experience.

User Stories and Scenarios:

User Stories:Develop user stories that outline specific tasks or actions users need to
accomplish within the product. Use the "As a [user], I want to [do something] so that
[benefit]" format to capture user needs and objectives.

Scenarios: Create scenarios that describe how personas would use the product to
achieve their goals. These narratives provide context and help in understanding the
user's journey.

Flow Diagrams:
User Flow Diagrams:Map out the step-by-step journey that users will take to achieve
their goals within the product. Visualize interactions, decision points, and potential
pathways.
Flow Mapping:

28
User Journey Mapping:
Create user journey maps to illustrate the end-to-end experience of a user. This
includes touchpoints, emotions, pain points, and opportunities for improvement.

Task Flow Mapping:

Map out specific task-oriented flows, such as a user signing up for an account or
making a purchase. Highlight potential roadblocks and identify ways to streamline the
process.

EXAMPLE DESIGN:

29
INFERENCE:
The end-to-end user research and design process involves a holistic approach to
product development. Starting with in-depth user research, personas are crafted to
represent user segments. The ideation process generates creative ideas that align with
user needs. User stories and scenarios help refine the product's focus, while flow
diagrams visualize user paths. User journey and task flow mapping provide insights
into the user experience, enabling the identification of pain points and opportunities
for enhancement. This comprehensive approach ensures that the final product is not
only aesthetically pleasing but also tailored to the needs of the users it serves.

RESULT:
In this expt we learnt how to Conduct end-to-end user research- User research,
creating personas, ideation process, user stories, scenarios), Flow diagrams, Flow
mapping

30
Ex.No:12 Sketch, design with popular tool and build a prototype
Date: and perform usability testing and identify improvements

AIM
Sketch, design with popular tool and build a prototype and perform usability testing
and identify improvements

PROCEDURE:
1. Sketching/Brainstorming:
 Use tools like pen and paper, or digital sketching tools such as Adobe
Photoshop, Adobe XD, Sketch, or Figma.
 Focus on creating rough sketches of your ideas to visualize the layout,
flow, and basic structure of your design.
2. Designing:
 Transition your rough sketches into a more detailed design using
software like Figma, Sketch, Adobe XD, or Adobe Illustrator.
 Create wireframes, mockups, and prototypes of your design. These
tools often have pre-built components and libraries for quicker design
iterations.
3. Building a Prototype:
 Utilize prototyping tools like InVision, Marvel, Proto.io, or Figma to
create interactive prototypes from your designs. These tools allow you
to link different screens together to simulate user interactions.
4. Usability Testing:
 Conduct usability testing with your prototype. This can be done
remotely or in-person with actual users. Tools like UserTesting, Maze,
or even simple Google Forms can help gather feedback.
 Observe and collect data on user interactions, difficulties faced, and
overall user experience.
5. Identifying Improvements:
 Analyze the feedback and data collected from the usability testing.
 Look for patterns or recurring issues encountered by users.
 Prioritize improvements based on the severity of issues and their
impact on user experience.
Example Scenario: Let's say you're designing a mobile app for a to-do list:
1. Sketching/Brainstorming:
 Use pen and paper or digital sketching tools to outline different layouts
for the app's main screen, task creation, task management, etc.
2. Designing:
 Transfer your sketches to a digital platform like Figma or Sketch.
Create wireframes and detailed designs of each screen.
3. Building a Prototype:
 Use Figma or InVision to create an interactive prototype. Link screens
together to simulate user interactions, like adding tasks, editing, or
marking them as completed.
4. Usability Testing:
 Invite users to interact with the prototype. Ask them to perform tasks
and observe their interactions.

31
  Collect feedback on the ease of use, intuitiveness, and any difficulties
faced while using the app.
5. Identifying Improvements:
 Analyze user feedback to identify pain points and areas for
improvement.
 For instance, if users struggle to find the 'delete' button for a task,
consider redesigning its placement or appearance for better visibility.

EXAMPLE DESIGN:

RESULT:
Sketch, design with popular tool and build a prototype and perform usability
testing and identify improvements has been successfully created using Figma.

32