Scribd
Upload
41 views44 pages

UI UX Lab Manual

The document outlines a series of experiments focused on UI/UX design, including creating responsive layouts, exploring UI interaction patterns, and developing style guides. Each experiment details the aims, methodologies, and results, emphasizing the importance of user experience and design consistency. Additionally, it discusses various open-source collaborative platforms for design, such as Sketch and Adobe XD.

Uploaded by

nithyamanivannan87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views44 pages

UI UX Lab Manual

The document outlines a series of experiments focused on UI/UX design, including creating responsive layouts, exploring UI interaction patterns, and developing style guides. Each experiment details the aims, methodologies, and results, emphasizing the importance of user experience and design consistency. Additionally, it discusses various open-source collaborative platforms for design, such as Sketch and Adobe XD.

Uploaded by

nithyamanivannan87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

S.No.

Title of the Experiment

1 Designing a Responsive layout for an societalapplication


2 Exploring various UI Interaction Patterns
3 Developing an interface with proper UI StyleGuides
4 Developing Wireflow diagram for applicationusing open source software

5 Exploring various open source collaborativeinterface Platform


6 Hands on Design Thinking Process for a newproduct

7 Brainstorming feature for proposed product


8 Defining the Look and Feel of the new Project
9 Create a Sample Pattern Library for that product(Mood board, Fonts,
Colors based on UI principles)
10 Identify a customer problem to solve

11 Conduct end-to-end user research - User research, creating personas,


Ideation process (User stories, Scenarios), Flow diagrams, FlowMapping

12 Sketch, design with popular tool and build aprototype and perform usability
testing and identify improvements
EX:01 Designing a Responsive layout for an societal application

Date:

Aim
To design responsive layout for a societal application for resume building using HTML and CSS.

Algorithm:
1.Open a notepad and type index.html code to get the resume home page
2.Open a notepad and type styles.css to set the properties for the resume page

3.Using the viewport metatag the webpage is made responsive to fit the screen size
4. Save the necessay image along with index,styles in a single folder
5. Display the output by opening in a web browser using desktop view and mobile view by selecting

● More tools->developer tools ->toggle device to see the responsive output in google chrome
● By selecting More tools->responsive design mode in Mozilla Firefox
● By selecting Settings->F12 Developer Tools->Document mode ,change mode and see the responsiveness
of the webpage

Program:
<!DOCTYPE html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.form-container {
width: 500px;
margin: 20px
auto;padding:
20px;
border: 1px solid
#ddd;border-radius:
5px;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom:
5px;
}
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
width:
100%;
padding: 10px;
border: 1px solid
#ddd;border-radius:
3px; box-sizing:
border-box;
}

input[type="file"] {
display: block; /* customize as desired */
}

button[type="submit"] {
background-color:
#4CAF50;color: white;
padding: 10px
20px;border:
none; border-
radius: 3px;
cursor: pointer;
}
.animated-button {
background-color:
#008CBA;color: #ffffff;
font-size: 16px;
padding: 10px 20px 10px
20px;text-align: center;
text-decoration:
none;display: inline-
block; font-weight:
bold; border: none;
border-radius: 8px;
box-shadow: 0 4px 15px 0
#006699;width: 350px;
animation: example 1s infinite;
}

@keyframes example {
0% {background-color: #008CBA;}
50% {background-color: #006699;}
100% {background-color: #008CBA;}
}
</style>
</head>
<body>
<div>
<header>
<div class="m_container">
<h1>Ethan Hunt</h1>
<p>Web Developer</p>
</div>

</header>
<section class="m_about-me">
<div class="m_container">
<h2>About Me</h2>
<p>� Hey there! I&#39;m Ethan Hunt, a passionate web developer on a mission to turn ideas into
digital experiences. With a creative mind and a knack for problem-solving, I thrive in thedynamic world of
web development. Whether I&#39;m crafting elegant code or designing intuitiveuser interfaces, my goal is
to create web solutions that not only meet but exceed expectations.</p>
<p>When I&#39;m not immersed in the world of coding, you&#39;ll find me exploring the latest tech
trends, experimenting with new frameworks, or capturing moments through the lens ofmy camera. I believe
in the power of innovation, continuous learning, and collaboration to build the web of tomorrow.</p>
<p>Ready to embark on a digital journey? Let&#39;s code something extraordinarytogether!</p>
</div>
</section>
<section class="m_passion">
<div class="m_container">
<h2>Passion</h2>
<p>I am passionate about creating innovative and user-friendly web applications. Solving complex
problems and turning ideas into reality drive my enthusiasm for web development.</p>
</div>
</section>
<section class="m_interests">
<div class="m_container">

<h2>Interests</h2>
<p>Outside of coding, I enjoy exploring new technologies, staying up-to-date with industrytrends, and
engaging in outdoor activities like hiking and photography.</p>
</div>
</section>
<section class="m_projects">
<div class="m_container">
<h2>Projects</h2>
<div class="m_project">
<h3>Image Quality Enhancer</h3>
<p>The project deals with Image quality enhancement with the help of AI</p>
</div>

<div class="m_project">
<h3>Sentiment Analyzer on Chat</h3>
<p>This app checks the Emotion associated with the Client using AI</p>
</div>

</div>
</section>
<section class="m_completed-projects">
<div class="m_container">
<h2>Completed Projects</h2>
<ul>
<li>Project A - Description of Project A.</li>
<li>Project B - Description of Project B.</li>
</ul>
</div>
</section>
<section class="m_people-to-know">
<div class="m_container">
<h2>People to Know</h2>
<ul>
<li>John Doe - Frontend Developer</li>
<li>Jane Smith - UX/UI Designer</li>
</ul>
</div>
</section>
<section class="m_contact">
<div class="m_container">
<h2>Contact</h2>
<p>Email: <a href="mailto:[email protected]" target="_blank"
rel="noreferrer">[email protected]</a></p>
<p>Phone: (123) 456-7890</p>
</div>
</section>
<footer>
<div class="m_container">
<p>© 2024 Ethan Hunt - All rights reserved</p>
</div>
</footer>
</div>
</body>
</html>
Output:
Result:
Thus a responsive layout for societal application was implemented successfully
Ex no:02 Exploring various UI Interaction Patterns

Date:

Aim:
To explore various UI Interaction Patterns
Objective:

The primary objective of this lab observation is to analyze and evaluate different UI interactionpatterns in
digital interfaces. By observing users interact with these patterns, we aim to gain insights into their
preferences, behaviors, and challenges encountered during their interaction.
User Interface (UI) Interaction Patterns play a crucial role in the design and functionality of digital products.
These patterns encompass a wide range of behaviors and actions that users can performwithin an interface,
shaping their overall experience. In this lab observation, we delve into the exploration of various UI
interaction patterns, analyzing their effectiveness, usability, and impact on user engagement.
Methodology

1. Selection of UI Interaction Patterns: We selected a diverse range of UI interaction patterns


commonly found in digital interfaces, including but not limited to:

 Dropdown menus
 Drag and drop functionality
 Infinite scrolling
 Swipe gestures
 Modal dialogs

2. Participant Selection: We recruited a diverse group of participants representing various


demographics to ensure a comprehensive understanding of user preferences and behaviors.

3. Lab Setup: The lab was equipped with devices such as computers, tablets, and smartphones to
accommodate different interface contexts. Each device was configured with interfaces showcasingthe
selected interaction patterns.

4. Observation and Data Collection: Participants were asked to perform specific tasks within each interface
while their interactions were observed and recorded. Data collection methods included video recording,
screen capture, and note-taking.

5. Post-Interaction Interviews: After completing the tasks, participants were interviewed to gather feedback
on their experiences, preferences, and any challenges encountered during interaction.
Analysis and Findings

1. Dropdown Menus: Participants generally found dropdown menus intuitive and easy to use, especially
when navigating hierarchical structures. However, some participants expressed frustration with long lists,
suggesting the need for efficient organization and search functionality.

2. Drag and Drop Functionality: The drag and drop functionality was well-received among participants,
particularly for tasks involving rearranging items or uploading files. However, some users struggled with
precision and accidental drops, indicating the importance of clear visual cuesand feedback.

3. Infinite Scrolling: While infinite scrolling provided a seamless browsing experience, some participants
expressed concerns about losing track of content and difficulty in reaching the desiredinformation quickly.
Pagination was preferred by a subset of users for better content control.

4. Swipe Gestures: Swipe gestures were appreciated for their simplicity and efficiency in navigating content,
especially on touch-enabled devices. However, users with limited mobility or unfamiliarity with touch
gestures found them challenging to use.

5. Modal Dialogs: Modal dialogs were effective in grabbing users' attention and prompting specificactions.
However, participants emphasized the importance of clear and concise messaging to avoid confusion or
distraction.

Result:
Thus, exploring various UI elements was implemented successfully.
EX:03 Developing an interface with proper UI Style Guides
Date:

Aim:
To develop an interface with proper UI style guides.

Components of UI Style Guides

1. Typography: Selecting appropriate fonts and establishing guidelines for their usage is crucial for
maintaining readability and visual hierarchy within the interface. The style guide should specify primary
and secondary typefaces, font sizes, line heights, and letter spacing for headings, body text, and other
typographic elements.

2. Color Palette: A cohesive color palette enhances visual aesthetics and reinforces brand identity.The style
guide should define primary, secondary, and accent colors along with their corresponding hex codes or
color values. Additionally, guidelines for color usage, such as background colors, text colors, and
interactive states, should be outlined to ensure consistency.

3. Iconography: Icons play a significant role in guiding users and conveying information efficiently.The
style guide should include a library of standard icons along with guidelines for their design, sizing,
spacing, and usage contexts. Consistency in icon style and visual language enhances usability and
familiarity for users.

4. Layout Principles: Consistent layout principles contribute to a cohesive and intuitive user experience.
The style guide should define grid systems, spacing rules, alignment guidelines, and responsive design
principles to maintain visual harmony across different screen sizes and devices.Clear guidelines for
elements such as margins, padding, and alignment ensure consistent layout structures throughout the
interface.

5.Interaction Patterns: Establishing standardized interaction patterns improves usability and user
engagement. The style guide should include guidelines for common interactions such as buttons, forms,
navigation menus, and feedback mechanisms. Consistent use of interaction elements and behaviors
enhances predictability and usability for users.
6.Accessibility Guidelines: Ensuring accessibility is a fundamental aspect of UI design. The style guide
should include guidelines for designing accessible interfaces, including contrast ratios, text legibility,
keyboard navigation, and screen reader compatibility. Accessibility considerations shouldbe integrated into
all aspects of design to ensure inclusivity for all users.

Benefits of Using UI Style Guides

1. Consistency: UI Style Guides promote consistency in design elements and visual aestheticsacross
different components and screens within the interface.

2. Efficiency: Designers and developers can work more efficiently by referencing standardized
guidelines, reducing the time spent on design decisions and revisions.

3.Brand Cohesion: Style guides help maintain brand cohesion by ensuring that design elementsalign with
the brand's visual identity and messaging.

4. Usability: Consistent design patterns and interaction behaviors enhance usability and user
experience, leading to improved user satisfaction and engagement.

5.Scalability: UI Style Guides facilitate scalability by providing a framework for adding new
features, components, and updates while maintaining design coherence and consistency.

Result:
Thus, an interface was created with proper UI style guide successfully.
EX: 04 Developing A WireFlow Diagram For An Application
Date:

Aim:
To develop a wireflow diagram for Netflix Login Page using Any open source platform ( ie; Figma ).

WireFlow:
Wireflow is combination of wireframes and flowcharts to visualize the structure,layout and flow of any
website or application.
Wireframe means skeletal outline that represent basic framework of page or screenwithout design elements
whereas flowchart illustrate the user flow or navigation path of a digital product

Steps to create Wireflow Diagram:

 Sketch Wireframes: Begin by sketching rough wireframes of the screens or pages


representing the basic layout and content structure.

 Define User Flow: Map out the user flow, illustrating how users will navigate through thedigital
product, connecting wireframes with arrows.

 Refine Interactions: Refine the wireframes to include more detailed interactions and
transitions between screens, ensuring clarity and usability.

 Review with Stakeholders: Present the wireflow diagram to stakeholders for feedback anditerate
based on their input, focusing on improving the user experience.

 Annotate Elements: Add annotations to provide context and explanations for specificelements
or interactions, ensuring everyone understands the design decisions.

 Finalize and Document: Finalize the wireflow diagram, documenting any important detailsor
decisions made during the process, and prepare it for handoff to development.
Wireflow Diagram (Login Page)

Note !
If the user already have an account then they are redirected towards their profileafter login. If not they are
asked to create a new account.

Result:
Thus the above wireframe diagram for login page was successfully developed.
Ex No: 5 Exploring Various Open Source Collaborative interface platform

AIM :
To Explore the various Open source Collaborative interface platform.

1. Sketch
Sketch is a vector graphics editor used for drawing, wireframing, prototyping and design
handoff—essentially everything you need to bring your designs to life.

Sketch is a powerful and flexible UX and UI design platform built for collaborative design. It has
long been considered an industry-standard tool, ideal for both beginner and advanced designers.
However, bear in mind that Sketch is only compatible with macOS.
Key features:
 Intuitive vector editing tools and editable boolean operations for flexible and iterative design.
 Infinite design canvas with flexible Artboards, design presets, customisable grids and simpleresizing
tools, allowing you to scale your designs to any screen size.
 Shorthand and math operators to speed up the design process.
 Variable and OpenType fonts for infinite control over your interface typography.
 Cross-platform tools for real-time collaboration, feedback, sharing and developer handoff.

2. Adobe XD
Adobe XD is another all-encompassing vector-based UI tool packed with features for
collaborative design and prototyping.

Adobe XD is considered by many as the go-to design tool. It’s fast, it’s powerful, and there’s not
a lot you can’t do with it! From early ideation and low-fidelity designs, right through to impressive
animations and true-to-life prototypes, Adobe XD will see you through the entire UX and UI design
process.
Adobe XD is part of the Adobe Creative Cloud suite and can be used with both Windows and Mac,giving it
a slight edge over Sketch.
Key features:
 Vector-based drag-and-drop editor tool with unlimited artboards and smart guides that help you to
align different objects and elements in your designs.
 UI kits (i.e. ready-made components) for Apple Design, Google Material Design, Amazon Alexa, and
more.
 3D Transforms, allowing you to simulate object depth and perspective in your designs.
 Components and states for iterative and scalable design. Components work intuitively to instantly
push changes across entire designs or documents, sparing you the work of manuallyduplicating and
implementing changes.
 Powerful animation functionality, including video and Lottie playback, micro-animations and motion
effects, scroll groups and anchor links.
 Voice prototyping, enabling you to create voice commands, build in speech playback, and integrate
voice-enabled features.
 Design Specs feature to streamline the handoff process, allowing you to share interactive prototypes,
CSS code snippets and downloadable assets with developers—all via one link.

3. UXPin
UXPin is a popular UX and UI tool, used by both new and seasoned designers alike. UXPinis
another end-to-end platform capable of delivering polished, interactive prototypes—no coding skills
required.
If you’re already familiar with Sketch or Photoshop, you’ll find the UXPin interface fairly easy to
navigate. Not only does it come with thousands of ready-to-use design components; it’s also well-
equipped to help you create and manage solid design systems.
UXPin works with Mac and Windows, or in the browser.
Key features:
 Built-in libraries for iOS, Google Material Design, Bootstrap and User Flows, full of ready-to-use
interactive elements, colours, text styles and icons.
 Interactive components that you can drag into your designs to create high-fidelity interactions.
 Embedded user flow capabilities to help you tell the story of your work.
 Built-in contrast checker and colour blindness simulator to help you ensure your designsareas
accessible and inclusive as possible.
 Streamlined developer handoff with downloadable design specs.

4. Marvel
Marvel promises all the core functionality you need to design and build digital products,
including wireframing, prototyping, and design specs for handoff. And, with its user-friendly andintuitive
platform, it’s the ideal UX/UI design tool for beginners.
Marvel is a web-based tool that works in the browser, so you don’t need to download or install
anything. It has been built for simple, fast design, with features for wireframing, UI design, and
prototyping. Marvel also integrates with many other popular design tools to help you power up your
workflow.
Key features:
 Drag-and-drop wireframe templates for quick, early-stage designs.
 A vast collection of pre-made assets, images and icons to help you visualise your ideas.
 Option to import static designs from other tools (e.g. Sketch)
 Interactive prototyping with hotspots, interactions and layers. You can learn moreabout how
to use Marvel for prototyping (and about other prototyping tools) in this guide.
 Built-in user testing functionality to get feedback on your ideas and validate your designs.
 Design handoff tool to instantly turn designs into code, specs and assets for developerstouse.
 Integrations for Jira, Maze, Confluence, Lookback, and more.

5. Figma
Figma is a browser-based interface design tool that empowers fast design and prototypingand
asmooth, collaborative workflow.
Just like Sketch and Adobe XD, Figma is a vector graphics editor. Figma is ideal if you’re
looking for an all-in-one tool to cover everything from ideation to interactive prototyping— wrapped up
in a delightfully intuitive interface.
And, if you do give Figma a go, be sure to try out FigJam, too—Figma’s online whiteboard tool for
collaborative ideation, brainstorming and workshops.
Key features:
 Modern pen tool which allows you to draw in any direction with Vector Networks.
 Auto Layout for easy responsive design.
 Flexible Styles which you can apply across all your UI projects.
 Accessible libraries with ready-made assets which you can drag and drop into your
designfiles.
 Code snippets for CSS, iOS, and Android, ensuring easy developer handoff.
 Plugins to automate and augment your design work.
 Interactive prototyping features including advanced transitions, dynamic overlays
andanimated GIFs.
 Embedded commenting functionality for a collaborative design process.

6. In Vision Studio
In Vision Studio claims to be the most powerful screen design tool in the world, providing everything
you need to draw, wireframe, prototype, and animate to perfection.
Part of the InVision suite of collaborative design tools, Studio comes with an intuitive vector-
baseddrawing tool, an infinite canvas, and a multitude of impressive rapid prototyping features and built-
in animations.
Compatible with both MacOS and Windows, it’s one of the most popular UX/UI tools out there for
professional designers.
Key features:
 Vector-drawing tool for lightning-fast screen design.
 Adaptive layout for responsive design, enabling you to quickly and easily adjust and scaleyour
designs to fit any screen size.
 Rapid prototyping functionality with fluid interactions, mobile device mirroring and instant
playback.
 Built-in animation capabilities, including smart-swipe transitions, timeline editing andauto-
layer linking.
 Shared component libraries with global syncing and real-time updates to ensure
designconsistency.
 The Inspect tool for generating pixel-perfect specs for developers.

7. Zeplin
Zeplin is a cloud-based software that bridges the gap between UX/UI designers and frontend
developers. It provides an organised workspace to publish your designs and generate specs, assetsand
code snippets for a smooth developer handoff.
UX and UI designers work in close collaboration with developers—the people who code your designs
into real, functioning websites and apps. As such, it’s essential to provide developers withthe technical
specs they need to develop your designs exactly as you envision them.
Zeplin takes care of that whole process: you simply publish your finished designs in the platformand
select what platform you’re designing for (e.g. web, iOS, or Android) to generate thenecessaryassets.
Key features:
 Flows to quickly and easily map user journeys and document your designs.
 Global Styleguides to organise and update your design system colours, text styles
andcomponents in a centralised location.
 Integrations with Figma, Adobe XD, Sketch, Photoshop, Slack, and more.
 Extensions for HTML, CSS, Swift, XML, React Native, and more.

8. Origami Studio
Origami Studio is a free design tool that was created by Facebook. It’s primarily a prototypingtool,
enabling designers to rapidly build and share interactive interfaces.
Originally built for designers at Facebook, Origami Studio is now available for free for macOS users. It’s
a sophisticated tool with a relatively steep learning curve, so we wouldn’t recommend it as your first
UX/UI design tool. But, for advanced designers looking to create life- likeprototypes, it’s well worth your
consideration.
Key features:
There are 6 main panels in Origami Studio:
 The drag-and-drop canvas where you draw and edit shape layers, text and images
whichyou’ve imported from Sketch or Figma.
 The Patch Editor: add interaction and animation to your prototype using blocks
called“patches”.
 Layer List—a list of layers in your prototype. In this panel, you can add new layers toyour
prototype and add interactions to different layers.
 Inspector which allows you to select a layer and adjust its properties.
 The Viewer panel where you can view, interact with and record your prototype.

RESULT :
Thus, Exploring various open source collaborative interface platform has been donesuccessful
EX :6 Hands On Design Thinking Process using a new product
Date:
AIM:
To explore hands on design thinking process using a new product.

DESIGN THINKING PROCESS:


The design thinking process is of 5 steps. They are1.Empathize
2.Define
3.Ideate
4.Prototype
5.Test

These steps are applied for creating a food delivery app.

1. EMPATHIZE:

Qualitative and quantitative research methods are applied by conducting user interviews and sending outsurveys to
better understand the target audience like customers, delivery person, restaurant partners as well as the labor force.
The questions were asked to know about the users and how they have ordered food in the past, the difficulties
they've had in the past while ordering food online, what features they will like to see in a foodordering app etc. Their
pain points are understood.
Study competing food delivery apps to identify strengths, weakness, and opportunities for differentiation.

2. DEFINE:

In this stage, after conducting interviews and engaging the users in various ways, now it is defined what their needs
and key features are. This can be done by a problem statement, user story, user persona, userjourney map and user
flow. The sample problem statements are:

a) Unable to reorder food from their list of previous orders.

b) Not being able to give feedback on the quantity and quality of the food bought.
3. Ideate:

In this stage, identify new solutions to the pain points and problem statements gathered and how to lookfor alternative
ways of viewing the problems and designing possible solutions.

Sample solutions:

a) Including local eateries, and restaurants depending on the location of the user and including a flexibilitywhich
allows the users to schedule their orders or even opt for pickup at a restaurant.

b) Design a feedback section to allow the users to talk about their experiences and see how we couldimprove
our services.

c) Design a solution that allows users to see a list of their previous orders and give the ability to reorder from their
previous list of orders.

4. Prototype:

In this experimental stage, creating a storyboard, user flow, sketch and low fidelity wireframes of what theproduct will
look like is done.
Develop interactive prototypes using prototyping tools or low-code development platforms to simulateapp
functionality and test user interactions.
5. Test:

Conduct usability testing sessions with representative users to evaluate the effectiveness and usability ofthe app
prototypes.
Establish mechanisms for collecting and incorporating user feedback into iterative app development cyclesto
continuously improve the user experience.
SAMPLE UI:

RESULT:
Thus, exploring hands on design thinking process using a new product has been done successfully.
EX:07 Brainstorming feature for proposed product
Date:
AIM:
To implement a brainstorming and its features for specified proposed project like weather applications.

BRAINSTORMING:

Brainstorming is a creative thinking technique for coming up with new ideas and solving problems. Teams
use this ideation method to encourage new ways of thinking and collectively generatesolutions. Brainstorming
encourages free thinking and allows for all
ideas to be voiced without judgment, fostering an open and innovative environment. This processtypically involves a
group of people, although it can be done individually as well.

TYPES OF BRAINSTORMING:

 Reverse brainstorming
 Random word brainstorming
 SCAMPER model
 Rapid ideation
 Starbursting

HOW TO HOLD BRAINSTORMING WORKSHOP:

1. Assign a facilitator
You need to choose someone who will facilitate the session and provide
guidelines for the thinking exercises that the group will partake in. This is so the sessiondoesn’t get
too scattered and stays on the right track. The
facilitator should pose questions and guide the group from start to finish.

2. Establish context add ensure group understanding


The group must understand why they are meeting and what the end goal of the session is.
Everyone should also understand the meaning of
brainstorming and what to expect from the brainstorming process.

3. Define an objective
While brainstorming is often looked at as a form of free-thinking creativity, it is best to try to stay
within certain rules. It’s essential that you define a clear objective and use the session to reach
your predetermined goal.
4. Set a time limit
No doubt your team could come up with countless ideas, but there has to be a limit on how long
the session can run. Knowing that you need to solve a problem within one hour,for instance, will
help the team focus on the job at hand and come up with ideas faster. It will also keep everyone
thinking about the same problem.

5. Decide on the brainstorming technique


The brainstorming technique that will be used must be decided on before the sessionbegins. The
best way to do this is to look at the problem at hand. If you’re looking to
prevent obstacles from arising in the future, try the “5 Whys” technique. If you’re lookingto come
up with new marketing ideas or get creative with workplace conflicts, try the rapid ideation
technique.

6. Set some ground rules


As stated above, the best and most productive brainstorming sessions are those that allowfor free
thinking and creativity within preset boundaries. Brainstorming ground rules are essential to the
success of the session, as they keep everyone focused on the topic at hand and ensure that no one
goes off track.

7. Discuss and vote on ideas


It’s time to discuss them. The team needs to be productive in choosing a creative idea that suits
the problem. To make decisions as a group and come to an agreement, teams can use the action
template. This technique reveals group priorities and helps everyonereach a consensus on the
direction to
take.

AVOID CRITICISM:

We’ll say it again: there are no bad ideas in a brainstorming session. This is the attitude that all
team members must adopt when entering the session. No one should be criticized for the ideasthat they propose. The
best way to foster an environment that is devoid of criticism and encourages creativity is to maintain a relaxed
approach. This will make everyone feel comfortable and happy to contribute their ideas.
BRAINSTROMING FOR WEATHER APPLICATION DEVELOPMENT

RESULT

The brainstorming for proposed project was successfully implemented by using tool called Figma.
EX :8 Defining the Look and Feel of the new Project
Date:

Aim:

To elobrate the user interface and user experience look and feel of spotify app

Look and feel of UI:

1. Navigation Bar: The navigation bar typically appears at the bottom of the screen (in mobile apps) orat
the top
(in desktop/web apps). It includes tabs for navigating between different sections of the app, such as Home,
Search, Your Library, and Settings.

2. Album/Playlist Artwork: Spottily heavily emphasizes album and playlist artwork, which appears prominently
throughout the app. Users often encounter large, visually appealing images representingalbums, playlists, and
individual songs.

3. Playlists and Library: Users can access their playlists and library, which contain saved
songs, albums, artists, and playlists. Playlists can be created, edited, and shared with others.

4. Discover Weekly and Personalized Recommendations: Spottily provides personalized recommendationsbased on users'
listening history and preferences. These recommendations often appear in the form of playlists like "Discover
Weekly" or "Release Radar."

5. Search Functionality: Users can search for specific songs, albums, artists, or playlists using the search bar.Spottily offers
predictive search suggestions as users type.

6. Player Controls: The player controls allow users to play, pause, skip, rewind, and adjust volume while listening to
music. These controls typically appear at the bottom (mobile) ortop (desktop) of the screen and may include
additional features like shuffle and repeat.

7. Social Features: Spotify integrates social features, allowing users to follow friends, share music, and see what their
friends are listening to. These features often appear in the "Friends Activity" section.

8. Settings and Account Management: Users can access settings to customize their Spotify experience,including
preferences for playback quality, offline listening, notifications, and social sharing.

9. Dark Mode: Many users appreciate Spotify's dark mode option, which provides a darker color scheme for reduced
eye strain in low-light environments.

10. Advertisements (Free Version): In the free version of Spotify, users may encounter advertisements
between songs. These ads typically promote Spotify Premium or otherproducts/services.
Look and feel of UX:

Personalized Recommendations: Spotify leverages algorithms and user data to offerpersonalized recommendations
tailored to each user's musical tastes. These
recommendations include playlists like "Discover Weekly," "Release Radar," and "Daily Mixes,"which are
updated regularly based on listening history, liked songs, and user interactions.

Easy Onboarding: Spotify offers a straightforward onboarding process for new users, guiding them through the setup
of their account and preferences. This process may includeselecting favorite genres,artists, and songs to
personalize the initial experience.

Intuitive Navigation: The app features a simple and intuitive navigation system, allowing
users to easily switch between different sections such as Home, Search, Library, and Settings.Clear iconsand labels
help users understand the purpose of each section and navigate effortlessly.

Seamless Music Discovery: Spotify provides various tools and features for discovering newmusic and podcasts. Users
can explore curated playlists, browse by genre, check out trendingtracks, and followartists and friends to stay
updated on their latest releases and recommendations.

Effortless Playback: Playing music on Spotify is a smooth and hassle-free experience. Userscan quickly find and play
songs, albums, playlists, or podcasts with just a few taps or clicks.
The app supports continuous playback, allowing users to queue up songs or create customplaylists foruninterrupted
listening.

Responsive Design: Spotify's app design is responsive and optimized for different screen sizes and devices, including
smartphones, tablets, desktops, and web browsers. The layout and features adapt seamlesslyto provide a consistent
experience across platforms.

Engaging Content: In addition to music, Spotify offers a wide range of engaging content,including podcasts, audio
stories, and exclusive interviews. Users can explore popular
podcasts, follow their favorite shows, and discover new audio content based on theirinterests.

Social Integration: Spotify integrates social features that allow users to connect with friends, share musicrecommendations, and
see what others are listening to. Users can followfriends, create collaborative playlists, and share songs or playlists on
social media platforms.

Accessibility Features: Spotify is committed to making its app accessible to users with disabilities. It includes
features such as text-to-speech support, keyboard navigation, highcontrast mode, and options for adjusting font
sizes and color schemes.

Continuous Improvement: Spotify regularly updates its app to introduce new features, improve performance,
and address user feedback. These updates help enhance the overall user experience and keep the app fresh and
engaging for users.

Result:

Thus the look and feel of the spotify application was successfully analyzed
EX: 09 Create a sample library for that product
Date:

AIM

To create and publish sample library for that product (Mood board, Fonts, Colors Based on UIprinciples.
LIBRARY:

A UI library, in the simplest terms, is a collection of materials, or components, that you canreadily use or
modify to meet your needs.
In Figma, a library is a collection of design assets, like components, styles, and variables. These design
assets live in a single file, but can be reused across different files or projects. Peopleoften use
libraries for sharing common design elements, like buttons, icons, pieces of UI, colors, or values for
certain properties.
At the moment, there are a few ways to incorporate design system documentation in your Figmalibraries:

 Give styles, components, and variables meaningful names


 Add short descriptions to styles, components, and variables
 Add links to external documentation to components
 Add descriptions to any library updates
Name:
Naming is very important to identify the style or components in library. You can name the
style and other components based on your needs. Other teammates can picks the
components or styles easily by using their names.
Description:

You can also add descriptions when publishing updates to your library. These descriptions show in both the
library modal and in the file’s version history and are great for communicating high- level changes to
your library.
Properties:

Figma allows you to edit the properties (like color, font, etc.,) of a style or components even afteryou have
added to the library.
Also you can edit the name and description of the style whenever you want to change.
1. STEPS TO CREATE AND ADD THE STYLES LIBRARY:
Create a new file and publish it as a Library. Once a new file is created, click on theAssets tab,
click the Library icon, and then click Publish. This publishes the Styles and Components in the library
file so they can be used in other files.

 Select the object’s style and click the “Four Dot” button in right side panel.
 Add Style by the “+” symbol on the dialogue box.
 Give meaningful name and description to that style to be added in library.
 Finally the style was created and added in the library by clicking “Create style”
button.

OUTPUT:

CREATE STYLE AND ADD TO LIBRARY

2. STEPS TO APPLY THE STYLE TO OTHER COMPONENTS BY USING LIBRARY:

 Create an object and go to properties of an particular object.


 To change the color of an object as exact color of an already existing object.
 Ensure that color of an already existing object was created and added to the library.
 Pick the library from the right side panel.
 It show number of styles were created
 You can pick the styles what you want to apply for n object.
OUTPUT:

GET COLOR FROM LIBRARY

APPLY THE COLOR FROM LIBRARY


3. STEPS TO PUBLISHING LIBRARY:
Create a new file and publish it as a Library. Once a new file is created, click on the Assets tab, click the Library
icon, and then click Publish. This publishes the Styles and Components in the library file sothey can be used in
other files.

1. Go to “assets” in Right side panel.


2. Click an Book symbol or “Exploring library”.
3. It shows the all the available styles in library and Publish button.
4. The libraries are published after clicking the button “PUBLISH”.

OUTPUT:

RESULT:

Hence the creation and publishing of sample library for that product wassuccessfully
executed with help of the tool called figma.
EX:10 Identify the customer problem and solve
Date:

Aim:

To identify the customer’s problem and to solve the problem reported in the google map app

Identiflcation:

Identifying and solving customer problems in Google Maps involves a combination of user feedback
analysis, data analysis, and iterative improvements to the app. Here's a step-by-step approach:

1 Collect User Feedback:

 Gather feedback from users through app reviews, customer support inquiries, social media
channels, and user surveys.
 Look for recurring themes or issues mentioned by multiple users, such as navigation
errors, inaccurate information, or missing features.

2 Analyze User Data:

 Utilize user analytics data to identify patterns and trends in user behavior within the app.
 Look for areas where users may be encountering dimculties, such as high drop-offrates in
certain features or frequent re-routing requests.

3 Prioritize Customer Problems:

 Prioritize customer problems based on their severity, frequency, and impact on user experience.
 Focus on addressing issues that are critical to user satisfaction and retention first.

4 Investigate Technical Issues:

 Conduct technical investigations to identify any underlying issues causing customer


problems, such as bugs, server errors, or data inaccuracies.
 Collaborate with engineering and QA teams to diagnose and resolve technical issues
promptly.

Solution:

1 Implement Solutions:

 Develop solutions to address identified customer problems, whether they involveimproving


existing features, fixing bugs, or adding new functionality.
 Prioritize solutions based on their potential impact on user experience andfeasibility
of implementation.

2 Test and Iterate:

 Test the effectiveness of implemented solutions through A/B testing, usability testing,
and beta testing.
 Gather feedback from users on the effectiveness of the solutions and iterate based on
their input.

3 Communicate with Users:

 Keep users informed about the changes and improvements made to addresstheir
problems.
 Provide clear explanations of how the changes will benefit them and
encourage
feedback to ensure ongoing satisfaction.

4 Monitor and Measure Results:

 Continuously monitor key metrics such as user engagement, retention, and


satisfaction to gauge the impact of implemented solutions.
 Use analytics tools to track changes in user behavior and identify any new issues that
arise.

5 Iterate Based on Feedback:

 Use ongoing user feedback and data analysis to inform future iterations and
improvements to the app.
 Maintain a feedback loop with users to ensure that their needs and concerns are
addressed over time.

Result:

Thus by following these steps, Google Maps can identify and solve customer problems
effectively, leading to a better overall user experience and increased user satisfaction.
Conduct end-to-end user research - User research, creatingpersonas,
Ideation process , Flow diagrams, Flow Mapping

EX:11

Date:

1. User Research:
User research is a systematic investigation aimed at understanding users' behaviors, needs, and
motivations. It provides valuable insights into how users interact with products or services and helps in
identifying pain points and areas for improvement. Methods of user research include qualitative
techniques like interviews, usability testing, and ethnographic studies, as well as quantitative methods
like surveys and analytics.
Conducting End-to-End User Research:
1. Define Objectives and Scope:
- Clearly outline the goals and scope of your research. Determine what specific questions you want to
answer or problems you want to address.

2. Select Research Methods:


- Choose appropriate research methods based on your objectives and target audience. Common methods
include surveys, interviews, observational studies, and usability testing.

3. Recruit Participants:
- Recruit participants who represent your target audience. Ensure diversity in your participant pool to capture
a range of perspectives.

4. Collect and Analyze Data:


- Execute the research plan and collect data using structured methods. Analyze the collected data to identify
patterns, trends, and insights.
5. Synthesize Insights:
- Synthesize the research findings into actionable insights and recommendations. Create personas,
journey maps, or user stories to communicate key findings.

6. Share Findings:
- Present the research findings to stakeholders, product teams, or decision-makers. Use visualizations,
storytelling, or presentations to effectively communicate the insights.

7. Iterate and Validate:


- Iterate on the research findings based on feedback and validation from stakeholders and users.
Continuously refine your understanding of user needs and behaviors through ongoing research
efforts.By following these steps, you can conduct comprehensive user research that informs the design
and development of user-centered products and services.
2. Creating Personas:

Personas are fictional representations of user archetypes based on research data. They help teams empathize
with users by providing a clear understanding of their goals, behaviors, and pain points. Personas typically
include demographic information, job roles, preferences, and motivations. To create personas, researchers
analyze qualitative and quantitative data collected during user research, identify
common patterns and behaviors, and then craft detailed profiles that represent different segments of the
target audience. Visualization of personas often involves creating visual representations accompanied
by narrative descriptions that bring the personas to life.
3. Ideation Process:
Ideation is the process of generating, developing, and evaluating ideas to address user needs and solve
problems. It often involves multidisciplinary collaboration and creativity techniques such as
brainstorming, mind mapping, or design thinking workshops.
User stories and scenarios are used to frame problems from the user's perspective and guide ideation
sessions. During ideation, teams aim to generate a diverse range of ideas, suspend judgment, and build
upon each other's contributions.
Once ideas are generated, they are evaluated based on criteria such as feasibility, desirability, and
viability. Visualization of the ideation process can be done through concept sketches, storyboards, or
idea boards that capture and organize generated ideas.

4. Flow Diagrams and Flow Mapping:


Flow diagrams and flow mapping visually represent the sequence of steps users take to complete tasks or
achieve goals within a product or service.
They help teams understand user interactions, identify pain points, and optimize the user experience.
Flow diagrams typically use symbols and arrows to depict the flow of actions and decision points in a
user journey.
Flow mapping involves mapping out different user flows for key tasks or scenarios, often using
techniques like swimlane diagrams or user flow charts. Visualization of flow diagrams and flow
mapping helps teams communicate complex user journeys, identify bottlenecks, and prioritize
improvements.
Tools like Axure, Adobe XD, or even pen and paper can be used to create flow diagrams and flow
mapping, with iterations based on feedback and testing to refine the user experience.
Basic user flow chart for logging in
Forgot password user flow

Result:
Thus, for a login system end-end user research, ideation process, flow diagram andflow
mapping was implemented successfully.
Sketch, design with popular tool and build a prototype and performusability testing and identify
improvements

EX:12

Date:

Aim:
To sketch and design the prototype for a login page.

1. Sketching and Design:


Sketching and design are the initial stages where you conceptualize the layout and functionality of your
product. Here's how you can approach it:

 Wireframing:
Start by creating wireframes, which are basic, low-fidelity representations of your design. These
focus on the structure and layout of the interface without including detailed visuals. You can use
tools like Sketch, Adobe XD, Figma, or even pen and paper for this stage.

 Mockups:
Once you're satisfied with your wireframes, you can move on to creating mockups. Mockups are
more detailed visual representations of your design, including colors, typography, and imagery.
They provide a clearer idea of how the final product will look. Again, tools like Sketch, Adobe XD,
or Figma are commonly used for creating mockups.

2. Building the Prototype:


After designing your mockups, it's time to turn them into an interactive prototype. This stage involves
adding functionality to your design to create a prototype that users can interact with. Here's how you
can do it:

 Interactive Elements:
Use prototyping tools like Figma, InVision, or Adobe XD to add interactive elements such as buttons,
links, and form fields to your design. These tools allow you to define interactions and transitions
between different screens or components.

 Clickable Prototypes:
The goal is to create a prototype that closely resembles the final product in terms of user interaction. This
means users should be able to click through the prototype and perform tasks as they would in the actual
product.

3. Usability Testing:
Usability testing involves gathering feedback from potential users to identify any usability issues with
your prototype. Here's how to conduct usability testing effectively:

 -Recruit Participants:
Find participants who represent your target audience. Aim for a diverse group to gather varied perspectives
on your prototype.
 Define Tasks:
Create a list of tasks that participants should complete using your prototype. These tasks should be
representative of the key actions users will perform in the actual product.

 Observation and Feedback:


During the testing session, observe how participants interact with the prototype and note any issues or
areas for improvement. Encourage participants to think aloud as they navigate through the prototype.
After the testing session, gather feedback from participants through interviews or surveys

4. Identifying Improvements:
Based on the feedback and observations from usability testing, identify areas for improvement in your
prototype. Here are some common areas to focus on:
Navigation: Ensure that users can easily navigate through the prototype and find the information heyneed.
Clarity: Clarify instructions, labels, and messaging to reduce confusion and improve user
understanding.
Visual Hierarchy: Enhance the visual hierarchy of your design to guide users' attention to important elements
and actions.
Accessibility: Make sure your prototype is accessible to all users, including those with disabilities. This
may involve adding alternative text for images, ensuring sufficient color contrast, and providing
keyboard navigation options.
Workflow: Streamline workflows and interactions to make the user experience more efficient and intuitive.
Once you've identified areas for improvement, iterate on your design and prototype to address these
issues. Continue to test and refine until you're satisfied with the usability and user experience of your
prototype.
Example 1:
Example 2:

Usability testing
1. Usability Testing Setup:

Define objectives, recruit diverse participants, and prepare materials.

2. Conduct Testing:

Introduce, provide task instructions, observe, and encourage feedback from participants.

3. Analysis:

Compile feedback, identify patterns, and prioritize improvements based on impact and feasibility.

4. Implement Improvements:

Iterate on the design based on feedback, test again if necessary, and continue the iterative process for ongoing
improvement.

Result:
Thus, Sketch, design with popular tool and build a prototype and usability testing was
implemented successfully.
Syllabus

LIST OF EXPERIMENTS :

1. Designing a Responsive layout for an societal application


2. Exploring various UI Interaction Patterns
3. Developing an interface with proper UI Style Guides
4. Developing Wireflow diagram for application using open source software
5. Exploring various open source collaborative interface Platform
6. Hands on Design Thinking Process for a new product

7. Brainstorming feature for proposed product


8. Defining the Look and Feel of the new Project
9. Create a Sample Pattern Library for that product (Mood board, Fonts, Colors based on UI principles)
10. Identify a customer problem to solve
11. Conduct end-to-end user research - User research, creating personas, Ideation process (User
stories, Scenarios), Flow diagrams, Flow Mapping
12. Sketch, design with popular tool and build a prototype and perform usability testing and identify
improvements

You might also like