EXPT 1:

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.

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:

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 expt we learnt to build an societal application using figma
EXPT2:

AIM: 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.

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:
EXPT 3

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.

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:
INTERFERENCE

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 Develop an interface with ui styled guide lines
EXPT 4

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, "[Link]" 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.

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 "[Link]" 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 develop a wireflow diagram for application using open
source software.
EXPT 5

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.
EXAMPLE DESIGN:
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
platforms
EXPT 6:

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.
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
EXPT 7

AIM: 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?

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.

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:
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.

EXPT 8

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.

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
EXPT 9:

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.

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.

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)
EXPT 10

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 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:

SOURCE: [Link]

INFERENCE:

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 to identify a customer problem to solve.

EXPT 11

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:

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:
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
EXP-12
AIM:
Sketch, design, with popular tool and build a prototype and perform usability
testing and
identify improvements.

PROCEDURE:

Certainly, let us walk through the process of sketching, designing, prototyping,

performing usability testing, and identifying improvements using specific tools:
Sketch for designing, Invision for prototyping, and Usability Hub for usability testing
.
WORKING:

1. Sketching:
Start by sketching out your initial ideas for the user interface using paper or digital
sketching tools. In this case, you will use Sketch:
- Open Sketch and create a new artboard.
- Roughly sketch the layout and elements of your digital product. Focus on the
placement of key elements, such as buttons, forms, and navigation.

2. Design:
Refine your initial sketch by creating a more detailed design in Sketch:
- Use the Sketch tools to create accurate wireframes and visual elements.
- Pay attention to typography, colour schemes, and overall visual consistency
3. Build a Prototype:
Once your design is ready, use Invision to create an interactive prototype:
- Export your design from Sketch to Invision.
- Use Invision’s hotspot functionality to link different screens and create interactive
transitions.
- Add animations to simulate user interactions and provide a more realistic
experience.

4. Perform Usability Testing:

Now, let us use Usability Hub to conduct usability testing on your prototype:
- Upload your Invision prototype to Usability Hub.
- Create usability testing tasks for participants, such as navigating through specific
sections or completing certain actions.
- Recruit participants through Usability Hub or other channels.
5. Identify Improvements:
After gathering feedback from usability testing, it is time to identify and address
improvements:
- Review the usability test results and analyse participant feedback.
- Look for patterns in the issues reported by participants, such as confusion in
navigation or unclear labels.
- Prioritize the identified issues based on their impact on the user experience.

6. Iterate on Design and Prototype:

Based on the feedback and improvements, update your design and prototype:
- Make necessary changes to your Sketch design based on the improvements you
have identified.
- Update your Invision prototype to reflect the revised design.
- Ensure that the changes address the usability issues that were identified.
7. Repeat Usability Testing if Needed:
If you have made significant changes, consider conducting another round of usability
testing to validate the improvements:
- Use Usability Hub to run additional usability tests on the updated prototype.
- Compare the results to previous tests to see if the changes have positively
impacted the user experience.

8. Finalize Design and Prototype:

Once you have iterated and validated your design improvements, finalize the design
and prototype:
- Polish your Sketch design to ensure a consistent and visually appealing interface.
- Update your Invision prototype with the final design and interactions.
Remember, the design process is iterative, and it is important to involve real users
throughout to create a user-centred product. Using tools like Sketch, Invision, and
Usability Hub can help streamline the process and ensure a more effective design
and usability testing cycle.

INFERENCE:
The outlined process showcases a systematic and user-centred approach to
designing and improving digital products. By leveraging appropriate tools and
integrating user feedback, designers can create more effective, user-friendly, and
refined products that cater to the needs of their target audience.

RESULT:
From this experiment we learnt to Sketch, design, with popular tool and
build a prototype and perform usability testing and identify improvements.