IFETCE R-2019A ACADEMIC YEAR:2023-2024

IFET COLLEGE OF ENGINEERING

(An Autonomous Institution)
DEPARTMENT OF CSE & IT
CSH007 – UI and UX DESIGNS
YEAR/SEM: III/V
MODULE
UNIT V– UI/ UX DESIGN TOOLS
User Study- Interviews, writing personas: user and device personas, User Context, Building Low
Fidelity Wireframe and High-Fidelity Polished Wireframe using wireframing Tools, Creating the
working Prototype using Prototyping tools, sharing and Exporting Design

5.1 User Study

UI and UX are co-related fields, such that both focus on different key aspects but together
combine to make a product. Irrespective of which part you’re focusing on either UI or UX, to
work efficiently you need tools. UX-UI tools for digital products are our main area of attention.
Many will be useful for aspects of physical products as well, such as designing product
packaging that complies with all market regulations. User research is the methodic study of
target users including their needs and pain points so designers have the sharpest possible insights
to work with to make the best designs. User researchers use various methods to expose problems
and design opportunities, and find crucial information to use in their design process.
5.1.1 User Study in UI
User studies in UI (User Interface) involve conducting research and gathering insights from
users who interact with user interfaces. These studies aim to understand users' behaviors,
preferences, and needs when using interfaces, with the goal of improving the usability and user
experience. The purpose of user research is to put your design project into context. It helps you
understand the problem you’re trying to solve; it tells you who your users are, in what context
they’ll be using your product or service, and ultimately, what they need from you, the designer.
UX research ensures that you are designing with the user in mind, which is key if you want to
create a successful product. Throughout the design process, your UX research will aid you in
many ways. It’ll help you identify problems and challenges, validate or invalidate your
assumptions, find patterns and commonalities across your target user groups, and shed plenty of
light on your users’ needs, goals, and mental models. Here are some common methods used in
user studies for UI:
 Usability Testing: In usability testing, participants are asked to perform specific tasks on
an interface while researchers observe their interactions and collect feedback. This
method helps identify usability issues, navigation problems, and areas of confusion or
frustration.
 Interviews: One-on-one interviews with users can provide valuable qualitative insights
about their experiences with interfaces. Researchers can ask open-ended questions to
explore user behaviors, motivations, preferences, and pain points when using the
interface.
 Surveys and Questionnaires: Administering surveys or questionnaires to a large number
of users helps gather quantitative data about their satisfaction levels, preferences, and
usage patterns related to the interface. These surveys can be distributed online or through
email.

1
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Card Sorting: Card sorting involves asking users to organize content or features into
categories, helping to understand how users mentally group and structure information in
an interface. This method can inform navigation design and information architecture.
 Eye-Tracking: Eye-tracking technology can be used to track users' eye movements and
gaze patterns as they interact with an interface. This provides insights into where users
focus their attention, what elements attract their gaze, and how they scan and process
information.
 A/B Testing: A/B testing involves presenting different versions of an interface to users
and analyzing their preferences and performance. This method helps compare and
evaluate the effectiveness of design variations, allowing for data-driven design decisions.
 Diaries and Field Studies: Asking users to keep diaries or conducting field studies in
real-world settings can provide naturalistic insights into how users engage with interfaces
in their daily lives. This method captures their interactions, context, and challenges
outside of controlled lab environments.
 Analytics and User Behavior Tracking: Analyzing user behavior data collected through
analytics tools can provide quantitative insights into how users navigate and interact with
the interface. This includes metrics like click-through rates, conversion rates, bounce
rates, and time spent on specific pages.

Fig: 5.1 User Research Framework

By conducting user studies in UI, designers can gain valuable insights into user needs, behaviors,
and preferences. These insights inform the design process, leading to interfaces that are more
intuitive, usable, and aligned with users' expectations are shown in the figure5.1. A user study is
a market research method where the target audience is observed and analyzed to understand their
behavior, preferences, and opinions. It often involves collecting qualitative and quantitative data
through various methods such as surveys, interviews, and usability testing. UX design focuses on
creating a seamless and meaningful user experience by understanding user needs, conducting
research, and designing intuitive interfaces, while UI design focuses on the visual, interactive
elements of a product to create aesthetically-pleasing interfaces. The ultimate purpose of UX
design is to create easy, efficient, relevant, and all-around pleasant experiences for the user

2
IFETCE R-2019A ACADEMIC YEAR:2023-2024

5.1.2 Benefits of user studies:

The benefits for brands to conduct user studies are:
 Gaining a deeper understanding of their target audience
 Improving product design and user experience
 Validating product assumptions and market opportunities
 Identifying areas for improvement and innovation
 User studies are sometimes referred to as ―user research‖ or ―user testing.‖
The history of user studies in market research can be traced back to the 1940s and 1950s when
companies started using focus groups and surveys to gather information about consumer
behavior and preferences. Since then, user research has evolved and expanded to include a
variety of methods and techniques to gain insights into the user experience.
5.1.3 Uses of user studies
User studies are used by a wide range of industries, including:
 Technology: companies in the software and hardware industries use user studies to
understand user needs and preferences, improve product design, and validate market
opportunities.
 Consumer goods: companies in the consumer goods industry conduct user studies to
understand consumer behavior and preferences for their products, such as food and
beverage, personal care, and household products.
 Healthcare: user studies are commonly used in the healthcare industry to evaluate and
improve the design and functionality of medical devices, drugs, and healthcare services.
 Automotive: the automotive industry uses user studies to understand consumer
preferences and needs in the design and functionality of vehicles.
 Finance: financial institutions use user studies to understand customer behavior and
preferences in their products and services, such as banking, insurance, and investment.
 Retail: retailers conduct user studies to understand customer behavior, preferences, and
satisfaction in their brick-and-mortar and online shopping experiences.
5.1.4 User Study in UX
User studies in UX (User Experience) involve conducting research and gathering insights
from users to understand their experiences, behaviors, needs, and preferences when interacting
with products, services, or systems. These studies provide valuable data to inform the design and
development of user-centered experiences. Here are some common methods used in user studies
for UX:
 Contextual Inquiry: Contextual inquiry involves observing and interviewing users in
their natural environment as they engage with a product or service. Researchers can gain
insights into users' tasks, goals, challenges, and workflows, providing a deeper
understanding of their real-world experiences.
 User Interviews: One-on-one interviews with users allow researchers to gather
qualitative insights about their perceptions, motivations, and needs related to a product or
service. Open-ended questions are used to explore their experiences, expectations, and
pain points.
 Usability Testing: Usability testing involves observing users as they interact with a
product or prototype, typically through specific tasks or scenarios. Researchers can
identify usability issues, gather feedback on the user interface, and assess the
effectiveness, efficiency, and satisfaction of the user experience.

3
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Surveys and Questionnaires: Surveys and questionnaires are used to collect quantitative
data from a larger sample of users. These can include standardized usability scales,
satisfaction ratings, or specific questions about user preferences, attitudes, or
demographics.
 Card Sorting: Card sorting is a method to understand how users categorize and organize
information or features within a product or service. Participants are asked to group and
label items according to their mental models, helping to inform information architecture
and navigation design.
 Prototyping and Co-Design Sessions: Involving users in the design process through
prototyping and co-design sessions allows them to provide direct input and feedback on
the user experience. Participants can actively contribute ideas, suggest improvements,
and help shape the design direction.
 Diary Studies: Diary studies involve participants documenting their experiences,
thoughts, and interactions with a product or service over an extended period. This method
provides longitudinal insights into user behavior, usage patterns, and emotional
responses, capturing nuances that may be missed in one-time studies.
 Analytics and User Behavior Tracking: Analyzing quantitative data collected through
analytics tools, such as website or application usage metrics, can provide insights into
user behavior patterns, popular features, and user flows. This helps identify areas for
improvement and optimization.
 Focus Groups: Focus groups bring together a small group of users to facilitate
discussions on their experiences, opinions, and perceptions related to a product or
service. Researchers can explore shared attitudes, preferences, and gather collective
insights from group dynamics.
By conducting user studies in UX, designers can gain valuable insights into users' needs,
motivations, behaviors, and pain points. These insights inform the design process, enabling the
creation of user-centered experiences that meet user expectations, enhance satisfaction, and drive
engagement. User studies are an important part of the UI/UX design process as they help
designers gather insights and feedback from users to inform the creation of effective and user-
friendly interfaces. While there are several tools available for conducting user studies, here are a
few commonly used ones:
 User Zoom: User Zoom is a comprehensive user research platform that offers a range of
tools for conducting remote usability testing, surveys, card sorting, tree testing, and more.
It provides features like screen recording, task-based testing, and metrics analysis to
gather valuable user feedback.
 User Testing: User Testing is a popular user research platform that allows designers to
recruit participants for remote usability testing. It provides video recordings of users'
interactions with the interface, along with their spoken thoughts and feedback. The
platform offers features for creating test scenarios and collecting quantitative and
qualitative data.
 Optimal Workshop: Optimal Workshop offers a suite of tools for different user research
methods, including card sorting, tree testing, first-click testing, and surveys. These tools
enable designers to evaluate the information architecture and navigation of their designs,
as well as gather insights into user preferences and mental models.
 Lookback: Lookback is a user research platform that specializes in remote user testing
and user interviews. It allows designers to conduct moderated or unmoderated user

4
IFETCE R-2019A ACADEMIC YEAR:2023-2024

sessions, record user interactions, and capture users' facial expressions and comments for
analysis.
 Maze: Maze is a user testing platform that integrates with popular design tools like
Sketch and
 Figma: It enables designers to create interactive prototypes and conduct usability testing
to gather quantitative and qualitative data. Maze provides insights into user flows, task
success rates, and user feedback.
 Validately: Validately offers a range of user research tools, including remote moderated
and unmoderated usability testing, live intercept surveys, and card sorting. It allows
designers to recruit participants, collect feedback, and analyze the data for improving
their designs.
These tools provide different features and capabilities, so it's important to evaluate your specific
research needs and choose the one that best aligns with your project requirements and budget.
Additionally, keep in mind that user studies are most effective when combined with other
research methods such as interviews, surveys, and contextual inquiries to gain a holistic
understanding of users' needs and behaviors.

5.2 Interviews
Interviews are a valuable research method in the field of UI/UX design. They involve direct
conversations between designers and users, allowing designers to gain insights into users' needs,
preferences, behaviors and pain points. Interviews can be conducted in person, over the phone, or
remotely through video conferencing tools. Here are some tips for conducting effective
interviews in the context of UI/UX design:
 Define your objectives: Clearly outline the goals and objectives of the interview. What
specific information or insights do you hope to gather? This will help you structure your
interview questions and guide the conversation.
 Prepare a discussion guide: Develop a discussion guide that outlines the main topics
and questions you want to cover during the interview. This will provide a framework for
the conversation and ensure that you cover all relevant areas. However, be flexible and
allow the conversation to flow naturally, adapting your questions based on the user's
responses.
 Start with an icebreaker: Begin the interview with a warm-up question or icebreaker to
help establish rapport and make the user feel comfortable. This can be a simple question
related to their background or experience with similar products or services.
 Ask open-ended questions: Use open-ended questions that encourage participants to
provide detailed and thoughtful responses. Avoid leading or biased questions that may
influence their answers. Instead, focus on understanding their behaviors, motivations, and
experiences.
 Listen actively: During the interview, listen attentively to the participant's responses.
Allow them to speak without interruption and avoid imposing your own assumptions or
opinions. Take notes or record the interview (with the participant's consent) to capture
important details accurately.
 Follow up with probing questions: When participants provide a response, delve deeper
by asking follow-up questions that seek clarification or further exploration. Probing
questions can help you uncover underlying reasons and motivations behind their
behaviors or preferences.

5
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Embrace silence: Don't rush to fill moments of silence during the interview. Sometimes,
participants need time to think and formulate their answers. Silence can lead to more
thoughtful responses and provide valuable insights.
 Be mindful of biases: It's important to be aware of your own biases as a designer and
avoid influencing the participant's responses. Maintain a neutral and non-judgmental
stance throughout the interview to encourage honest and unbiased feedback.
 Be respectful and empathetic: Treat participants with respect and empathy throughout
the interview process. Make them feel valued and appreciated for their time and
contributions. Use language that fosters a safe and open environment for sharing their
thoughts and experiences.
 Thank and debrief participants: After the interview, thank the participant for their time
and willingness to share their insights. If appropriate, offer incentives or tokens of
appreciation. Take some time to debrief and reflect on the interview, capturing key
takeaways and identifying patterns or themes that emerge from multiple interviews.
By conducting interviews effectively, you can gain valuable user insights that inform your
UI/UX design decisions and lead to the creation of more user-centered and impactful
experiences.
5.2.1 User Interviews
A User Interview is a conversation with your end user(s), during which a researcher asks specific
questions and records the user’s responses. It can be focused on examining the user experience,
the usability of a product, or fleshing out data for input into Customer Personas, etc. Ideally, an
interview should be conducted by two UX researchers and one user, where the first researcher
would be in charge of asking questions and guiding the interview, while the second would collect
observations on the interviewee’s behavior and emotional feedback to the questions, as well as
take notes. Alternatively, a video/audio recording can be of support as well, if the second
researcher is not available. There is a number of topics usually discussed at User Interviews, e.g.
the below:
 The users background (technological as well), demographic/ethnographic data, interests;
 The use of technology and position on the innovation curve (innovators, early adopters,
early majority, late majority, laggards);
 Main objectives and motivations behind the choice of products similar to yours, and your
product in particular;
 The use of your product, positive and negative experience related to it;
 The user’s pain points to be covered by the product.
5.2.2 Steps to conduct user interview
Step: 1. Define the goal
User interviews can be used in a generative or evaluative manner, meaning you either intend to
come up with new ideas resulting from the users’ feedback (generative), or to see if your product
is of value to them (evaluative). Document the goals you set for yourself prior to moving further
to setting up the interviewing process.
Step: 2. Set up the process
Then move over to documenting the process, which implies a few stages, 2-3 weeks each, in the
best practice approach.
 Stage 1: Setting up the criteria, and recruiting the interviewees (think who you want to
talk to and how to recruit them, also - what you plan to do with them).

6
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Stage 2: Formulating the Field Guide and/or Questionnaire and the stimuli to facilitate
the user’s participation and feedback.
 Stage 3: Planning the actual field work, e.g. interviews schedule, people in charge,
reporting and de-briefing activities.
 Stage 4: Data processing and analyzing, define how you are going to handle with the data
you’ve received at the interviews, and enhance your product development with it.
Step: 3. Develop a research plan and an interview guide
Now you are well equipped to move over to the Interview Guide creation. You can break it into a
few provisional parts for convenience, please see the example below. We also recommend that
you add an estimated amount of time for each part, even though you can’t anticipate the possible
turns of your interview.

5.3 Writing personas

A persona is a fictional character which represents certain traits and qualities of real users. In
UX, personas are an important tool for understanding and empathising with your target audience.
Personas are usually captured in a document or presentation deck, providing an easily digestible
visualisation of your target user(s). Personas comprise a mixture of text and icons/graphics and
you can also give them a face. For example, you might get a custom-drawn illustration or use a
stock image. Although personas are fictional, they should be based on facts and data about real
users. This is obtained through user research and any behavioural data you may have gathered in
relation to the product you’re designing, typically a UX personas include UX persona includes:
 The persona’s name
 An image (e.g. an illustration, avatar, photo or stock image)
 Demographic information such as your persona’s age, gender, family/living situation,
employment status and anything else that’s relevant to your product or problem space
 Their needs and goals in relation to your product
 A summary of their challenges, frustrations and pain points in relation to your product or
problem space
 Quotes from real users whom the persona should represent
5.3.1 Step by step procedure to write personas
Personas are fictional representations of your target users or customers, created to help you
understand and empathize with their needs, goals, behaviors, and preferences. Writing personas
involves synthesizing research data and user insights into cohesive and relatable character
profiles. Here's a step-by-step guide on how to write personas:
 Gather user research data: Start by collecting and reviewing relevant user research
data, including interviews, surveys, user testing results, and analytics. Look for
commonalities, patterns, and key insights that emerge from the data.
 Identify user segments: Based on your research, identify distinct user segments or
groups that share similar characteristics, goals, and behaviors. These segments could be
based on demographics, psychographics, or specific user needs.
 Define persona goals: Determine the primary goals or tasks that each persona aims to
accomplish when interacting with your product or service. For example, a persona might
seek to find information, make a purchase, or connect with others.
 Create fictional profiles: Give each persona a name, age, occupation, and other relevant
demographic information. Add a photo to help visualize the persona. This makes the
persona more relatable and memorable.

7
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Add background information: Provide a background story or context that reflects the
persona's motivations, values, and experiences. Consider their past experiences,
education, family life, and any other factors that might influence their behavior.
 Outline characteristics and behaviors: Describe the persona's characteristics, traits, and
behaviors relevant to your product or service. Include information such as their level of
technical expertise, preferred communication channels, and typical usage patterns.
 Identify pain points and motivations: Highlight the persona's pain points, challenges,
and frustrations related to your product or service. Understand their motivations, needs,
and desires that drive their behavior.
 Consider goals and expectations: Define the persona's specific goals and expectations
when interacting with your product or service. What do they hope to achieve? What
features or attributes are most important to them?
 Use narrative language: Write the persona descriptions in a narrative format that brings
the characters to life. Use clear and concise language to communicate their attributes,
goals, and motivations effectively.
 Validate with research: Once you've created the initial personas, validate them by
sharing them with stakeholders, conducting user interviews, or getting feedback from
your target users. Refine and update the personas based on the insights gained from this
validation process.
Remember that personas should be based on real user data and insights, not assumptions or
stereotypes. Continuously update and refine your personas as you gather more information and
conduct further research to ensure their accuracy and relevance. Personas serve as a reference
point throughout the design process, helping you make informed decisions that align with your
target users' needs and goals.
5.3.2 Types of personas
The type of persona(s) you create will depend on the resources you have available, as well as the
specific purpose you want your persona(s) to serve. There are generally 3 different approaches
you can take to creating a persona:
1. Goal-directed Personas
This persona cuts straight to the nitty-gritty. ―It focusses on: What does my typical user want to
do with my product?‖. The objective of a goal-directed persona is to examine the process and
workflow that your user would prefer to utilize to achieve their goals in interacting with your
product or service. There is an implicit assumption that you have already done enough user
research to recognize that your product has value to the user and that by examining their goals,
you can bring their requirements to life. The goal-directed personas are based upon the
perspectives of Alan Cooper, an American software designer and programmer who is widely
recognized as the ―Father of Visual Basic.‖
2. Role-Based Personas
The role-based perspective is also goal-directed, and it also focuses on behavior. The personas of
the role-based perspectives are massively data-driven and incorporate data from both qualitative
and quantitative sources. The role-based perspective focuses on the user’s role in the
organization. In some cases, our designs need to reflect upon the part that our users play in their
organizations or wider lives. An examination of the roles that our users typically play in real life
can help inform better product design decisions. Where will the product be used? What’s this
role’s purpose? What business objectives are required of this role? Who else is impacted by the

8
IFETCE R-2019A ACADEMIC YEAR:2023-2024

duties of this role? What functions are served by this role? Jonathan Grudin, John Pruitt, and
Tamara Adlin are advocates for the role-based perspective.
3. Engaging Personas
Engaging personas can incorporate goal and role-directed personas, as well as the more
traditional rounded personas. These engaging personas are designed so that the designers who
use them can become more engaged with them. The idea is to create a 3D rendering of a user
through the use of personas. The more people engage with the persona and see them as ’real’, the
more likely they will be to consider them during the process design and want to serve them with
the best product. These personas examine the emotions of the user, their psychology,
backgrounds and make them relevant to the task at hand. The perspective emphasizes how
stories can engage and bring the personas to life.
5.3.3 Uses of writing personas
UX personas are a great tool for building empathy and keeping the user at the centre of the
design process. To create a persona, UX researchers and designers must pull out and capture the
most important, valuable information they have about their users. In doing so, they’re compelled
to step into the user’s shoes and dig deep into who they are and what they need. As such, the
persona creation process alone fosters a deeper understanding of your target audience.
 Capture your user research in a digestible, visual format
 Build user empathy and make sure the design process prioritises the target audience’s
needs
 Steer, inform and justify design decisions

5.4 User and device personas

When creating personas, you can consider two types: user personas and device personas. User
personas focus on the characteristics, goals, behaviors, and preferences of the individuals who
interact with your product or service, while device personas center around the devices or
platforms through which users engage with your product. A well-defined user persona contains
four key pieces of information:
 Header
 Demographic profile
 End goal(s)
 Scenario
5.4.1 Step by step procedure for user personas
 Step 1: Add a header
The header includes a fictional name, image, and quote that summarizes what matters most to the
persona as it relates to your product. These features aid in improving memorability and keeping
your design team focused on the users they are building the product for.
Let’s imagine you’re designing a travel app. The foundations of your user persona could look
like this:
Name: Savannah Rodriguez
Summary quote: ―Take me to undiscovered holiday destinations away from the tourist traps.‖
This first step might seem simple, but these features ensure that your persona is memorable,
keeping the design team focused on who they are designing for.

9
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Step 2: Add a demographic profile

While the name and image can be fictional, demographic details are factual and based on user
research. The demographic profile includes four main sections: personal background,
professional background, user environment, and psychographics.
 Personal background
The personal background includes details such as age, gender, ethnicity, education, persona
group (e.g. working moms), and family status (e.g. single, married with children, widowed, etc.).
Savannah’s personal background might be described as follows: Savannah, 52 years old, a
divorced mother of two, has a Master’s degree in chemistry.
 Professional background
The professional background includes details such as job occupation, income level, and work
experience. Here we might add that Savannah works full-time at a pharmaceutical company and
earns around $65,000 per year.
 User environment
The user environment represents the physical, social, and technological context of the user. This
section is used to answer questions like: What technological devices do users have access to? Do
they spend most of their time in a corporate office or a home office? And how often do they
collaborate with others? So, Savannah’s user environment could be in her office, mostly on a
laptop, but also on her iPad when commuting to and from work.
 Psychographics
Psychographics include details such as attitudes, interests, motivations, and pain points. Creating
a psychographic profile enables you to better understand why your user behaves in a certain
way—including why they use your product. Let’s continue to imagine you’re designing a
holiday-booking app. Some useful psychographic information to include in your user persona
could be:
 Savannah enjoys luxury spa retreats, hates tourist traps
 Appreciates an element of exclusivity
 Enjoys trying authentic local cuisine
 Prefers to travel alone or with one other person
 Tends to favor quality over economy
 Overall, the demographic profile adds an additional layer of realism to a user persona,
boosting empathy when exploring user needs and goals.
 Step 3: Add end goal(s)
The end goal is the motivating factor that inspires action, and answers the question: what do
users want or need to accomplish by using your product? End goals are the main driving forces
of your users and determine what the persona wants or needs to fulfill. In Savannah’s case, her
end goal when using your holiday-booking app is to discover and book luxurious, off-the-beaten-
track holiday destinations.
 Step 4: Add a scenario
A scenario is a ―day-in-the-life‖ narrative that describes how a persona would interact with your
product in a particular context to achieve his or her end goal(s). The scenario usually defines
when, where, and how the narrative takes place. They are typically written from the perspective
of the persona and describe use cases that may happen in the future. For example, Savannah’s
scenario could start off like this: ―At least once a year, I like to go away on a luxury holiday. I try
to discover places I’ve never been to before and to stick to destinations that aren’t yet overrun
with tourists. I work full time, so I don’t have that much time to browse and book each individual

10
IFETCE R-2019A ACADEMIC YEAR:2023-2024

element of my holiday. Ideally, I’ll find some kind of package deal that comes with local
restaurant recommendations…‖ This step integrates well with customer journey maps; learn how
to build one, here.
Step: 5. Additional suggestions
Each user persona is typically one page, which requires you to focus on the essential elements.
As a rule of thumb, avoid adding extra details that cannot be used to influence the design. If it
does not affect the final design or help make any decisions easier: omit it. Personas are also key
to finding ideal customers in real life so you can test and validate your product with real people.
Therefore, make sure each persona is specific and realistic: avoid exaggerated caricatures, and
include enough detail to help you find real-life representation.
Step: 6. Final thoughts
In response to shorter project timelines, personas are the go-to method for rapidly identifying
user needs. By using real data to develop archetypical users, teams can design for personas with
the confidence that they will also meet the needs of the broader consumer base. Before you
create a persona, conduct plenty of research to make sure your personas accurately represent
your users. After you gather an adequate amount of both qualitative and quantitative data,
organize the information into persona groups that represent your ideal customers. Here's an
overview of both types:
5.4.2 User Personas:
User personas represent the target users of your product or service. They help you understand
and empathize with your users' needs and behaviors, guiding design decisions to create user-
centered experiences. User personas typically include the following information:
 Demographics: Age, gender, location, occupation, etc.
 Background: Education, professional background, hobbies, interests, etc.
 Goals: The primary objectives and tasks users want to accomplish.
 Behaviors: Typical actions, preferences, and patterns of interaction.
 Pain Points: Challenges, frustrations, and obstacles users face.
 Motivations: Underlying reasons, desires, and values that drive their behavior.
 Needs and Expectations: Specific requirements and expectations from the product or
service.
By understanding your target users through user personas, you can design experiences that meet
their needs, address their pain points, and align with their motivations.
5.4.3 Device Personas
Device personas focus on the devices or platforms users employ to engage with your product or
service. This type of persona helps you design experiences that consider the unique
characteristics and constraints of different devices. Device personas include the following
information:
 Device Type: Mobile phone, tablet, desktop, smartwatch, etc.
 Technical Specifications: Screen size, resolution, processing power, etc.
 Context of Use: Where and how the device is typically used.
 User Behavior: Usage patterns, limitations, and preferences specific to the device.
 Constraints: Limitations imposed by the device, such as input methods or screen size.
 Platform Considerations: Operating system, browser, or specific platform requirements.
By incorporating device personas into your design process, you can tailor the user experience to
optimize performance, usability, and engagement on different devices or platforms.

11
IFETCE R-2019A ACADEMIC YEAR:2023-2024

5.5 User Context

User context refers to the various factors and conditions that influence a user's interaction with a
product or service. It encompasses the environment, situation, and circumstances in which users
engage with a particular interface or experience. Understanding the user context is crucial for
designing user-centered experiences that effectively meet users' needs and expectations. Contexts
describe the actual circumstances of use. While not all of the aspects mentioned above apply in
each case, it is important to consider what is and isn’t relevant. ―The context of use comprises a
combination of users, goals, tasks, resources, and the technical, physical and social, cultural and
organizational environments in which a system, product or service is used.‖ This is a much
broader definition of contexts than is used in practice, but it is complete One of the key focal
points of user-centered design is the contexts in which the designs will be used. For technology
products and services, contexts of use include a potentially broad array of factors – physical and
social environments, human abilities and disabilities, cultural issues and similar. Here are some
key elements of user context:
 Physical Environment: The physical surroundings in which users interact with the
product or service. This includes factors like location (home, office, public space),
ambient lighting, noise level, temperature, and available resources.
 Social Environment: The social dynamics and interactions that influence user behavior.
This includes the presence of other people (colleagues, friends, family), social norms,
cultural factors, and social expectations.
 Emotional State: The emotional or psychological state of the user at the time of
interaction. Users' emotions can range from happy and motivated to stressed or frustrated,
and they can significantly impact their perception and engagement with the product or
service.
 User Goals and Tasks: The specific objectives, goals, and tasks that users aim to
accomplish through their interaction with the product or service. Understanding user
goals helps in designing interfaces that facilitate efficient and effective task completion.
 User Abilities and Skills: The capabilities, skills, and level of expertise possessed by
users. User context should take into account factors such as technical proficiency,
familiarity with similar interfaces, and any physical or cognitive limitations that may
impact their interaction.
 Time Constraints: The time available to users for completing tasks or achieving their
goals. Time constraints may vary depending on the urgency of the task, the user's
schedule, or external factors that impose time limitations.
 Device and Platform: The specific devices (e.g., mobile, desktop) and platforms (e.g.,
iOS, Android) that users utilize to access the product or service. Different devices and
platforms come with their own capabilities, limitations, and user expectations that should
be considered in the design process.
By understanding the user context, designers can tailor their interfaces to accommodate and
support users in their specific situations, resulting in more intuitive, seamless, and meaningful
experiences. Research methods like user interviews, contextual inquiries, and usability testing
can provide insights into the user context and help inform design decisions. User context is any
relevant information that can be used to characterize the situation of a user. There are three
important aspects of user context: where the user is, whom the user is with, and what resources
are nearby. A Context is a handle to the system; it provides services like resolving resources,
obtaining access to databases and preferences, and so on.

12
IFETCE R-2019A ACADEMIC YEAR:2023-2024

5.6 Building Low Fidelity Wireframe

Building low-fidelity wireframes is an effective way to quickly and iteratively visualize the
structure and layout of a user interface. Low-fidelity wireframes are basic, simplified
representations that focus on the overall content and layout, rather than detailed visual design
elements. Here's a step-by-step guide to building low-fidelity wireframes:
 Define the scope: Determine the specific features, screens, or interactions you want to
focus on in your wireframe. Identify the key user tasks or flows you want to represent.
 Gather requirements: Understand the goals, user needs, and functional requirements of
the interface. This will help you prioritize elements and ensure the wireframe addresses
the necessary components.
 Select your tools: Choose a tool or method for creating your wireframes. You can use
specialized wireframing software like Sketch, Figma, or Adobe XD, or opt for pen and
paper, whiteboards, or online collaboration tools like Miro or Whimsical.
 Start with a rough layout: Begin by sketching or placing basic shapes to represent the
main components of your interface, such as headers, content areas, sidebars, and footers.
Use simple boxes or placeholders to represent images, text, buttons, and other elements.
 Focus on content hierarchy: Determine the hierarchy of content based on importance
and user needs. Use larger or more prominent placeholders for primary content and
smaller ones for secondary or supporting elements.
 Arrange elements and layout: Experiment with different arrangements of elements to
find an intuitive and logical layout. Consider factors such as flow, grouping related
elements, and aligning content to guide users' attention.
 Use simple annotations: Add basic labels or annotations to clarify the purpose or
functionality of specific elements. For example, label buttons with action descriptions
like "Submit" or "Cancel."
 Iterate and refine: Review and iterate on your wireframes, making adjustments based on
feedback and usability considerations. Iterate until you feel the structure and flow of the
interface adequately support user tasks.
 Test and gather feedback: Share your low-fidelity wireframes with stakeholders,
colleagues, or potential users to gather feedback and insights. This can help identify areas
for improvement or clarification.
 Transition to higher fidelity: Once you're satisfied with the overall structure and layout,
you can gradually add more details and visual design elements to create medium or high-
fidelity wireframes or prototypes.
 Define the objectives: Clearly understand the goals and objectives of the wireframe.
Identify the key features, functionalities, and content that need to be represented in the
wireframe.
 Gather requirements and content: Collect all the necessary information, requirements,
and content that will be included in the wireframe. This can include text, images, buttons,
form fields, and other UI elements.
 Choose your tools: Select a suitable tool for creating low-fidelity wireframes. Popular
options include dedicated wireframing tools like Balsamiq, Sketch, Adobe XD, or even
pen and paper, or whiteboard for quick sketches.

13
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Start with a basic layout grid: Begin by establishing a basic grid system to define the
layout of the wireframe. Use simple shapes or lines to represent the overall structure and
alignment of the interface.
 Place key UI elements: Add basic UI elements such as headers, footers, navigation
menus, and content areas using simple shapes or placeholders. Focus on the placement
and general arrangement of these elements.
 Use standardized UI components: Utilize common UI components such as buttons,
input fields, checkboxes, or dropdown menus. Represent them using simple shapes or
icons to indicate their presence and placement.
 Avoid detailed visual design: Keep the wireframe intentionally devoid of visual
distractions or detailed visual design elements. The focus should be on the structure and
layout rather than visual aesthetics.
 Label and annotate elements: Add labels or text descriptions to indicate the purpose or
functionality of each UI element. This helps provide context and clarity to stakeholders or
team members reviewing the wireframe.
 Iterate and gather feedback: Share the low-fidelity wireframes with stakeholders,
clients, or colleagues to gather feedback and insights. Iterate on the wireframes based on
the feedback received, making necessary adjustments and improvements.
 Progress to high-fidelity design: Once the low-fidelity wireframes have been refined
and approved, they can serve as a foundation for creating high-fidelity designs or
prototypes. High-fidelity designs add more visual details, colors, typography, and
realistic content to represent the final UI more accurately.

Fig: 5.2 Wireframe in UX Designs

Remember, low-fidelity wireframes are meant to be quick and easy to create, allowing for rapid
iterations and exploration of different design possibilities. Focus on capturing the essential
elements and functionality, rather than getting caught up in visual details are shown in the fig:
5.2. The goal is to communicate the structure and flow of the interface effectively

14
IFETCE R-2019A ACADEMIC YEAR:2023-2024

5.7 High-Fidelity Polished Wireframe using wireframing tools

Wireframe tools allow designers to quickly and effectively mock up an outline of a design as
easily as possible. Designers are able to drag and drop placeholders for images, headers, and
content and easily move them around to create a first draft that can be iterated on later
Wireframe tools are software applications or online platforms that allow designers and
developers to create visual representations of user interfaces (UI) in the form of wireframes.
Wireframes are simplified, low-fidelity representations of UI layouts that focus on the structure,
functionality, and content placement rather than visual design details. Here are some popular
wireframe tools used in UI design:
 Balsamiq: Balsamiq is a widely-used wireframing tool known for its simplicity and ease
of use. It offers a drag-and-drop interface with pre-built UI elements and allows quick
creation of basic wireframes.
 Adobe XD: Adobe XD is a comprehensive design and prototyping tool that includes
wireframing features. It provides a range of design capabilities, from wireframes to
interactive prototypes, making it suitable for designers who want an all-in-one solution.
 Sketch: Sketch is a popular macOS design tool that offers powerful vector editing
capabilities. It provides an extensive library of plugins and resources for wireframing and
UI design, making it a preferred choice for many designers.
 Figma: Figma is a cloud-based design tool that enables collaborative wireframing and UI
design. It allows real-time collaboration, prototyping, and sharing of design files, making
it ideal for teams working remotely or across different locations.
 Axure RP: Axure RP is a robust wireframing and prototyping tool that offers advanced
interaction capabilities. It allows designers to create interactive wireframes with
conditional logic, animations, and dynamic content, making it suitable for complex UI
designs.
 InVision: InVision is a popular prototyping tool that also offers wireframing features. It
enables designers to create interactive and animated wireframes and provides
collaborative features for feedback and iteration.
 Marvel: Marvel is a user-friendly prototyping tool that includes basic wireframing
capabilities. It allows designers to create interactive wireframes and prototypes without
coding and offers collaboration features for team members and stakeholders.
 Lucidchart: Lucidchart is a versatile online diagramming tool that can be used for
wireframing. It provides a wide range of pre-built UI elements and offers collaborative
features for team collaboration and feedback. These are just a few examples of wireframe
tools available in the market. The choice of a wireframe tool depends on individual
preferences, project requirements, and the design workflow of the team.
Creating a working prototype using prototyping tools enables you to bring your design concepts
to life and simulate user interactions and flows. Here's a step-by-step guide to creating a working
prototype using prototyping tools:
 Select a prototyping tool: Choose a prototyping tool that suits your needs and supports
the level of interactivity you want to achieve. Some popular options include InVision,
Adobe XD, Figma, Axure RP, or Proto.io.
 Import or recreate design elements: Import your high-fidelity wireframes or recreate
the design elements within the prototyping tool. Ensure that all the necessary screens,
components, and assets are available.

15
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Define the navigation flow: Determine the user flow and navigation paths within the
prototype. Identify the interactions between screens and how users will move from one
screen to another.
 Add interactive elements: Use the prototyping tool's capabilities to add interactive
elements to your screens. This can include buttons, menus, form fields, sliders, or any
other elements that require user input or response.
 Set up transitions and animations: Define the transitions and animations between
screens to mimic the actual user experience. Specify how elements should appear,
disappear, slide, fade, or transform when triggered by user interactions.
 Add microinteractions and feedback: Incorporate microinteractions and feedback
elements that provide visual cues or responses to user actions. This can include hover
effects, loading indicators, success/error messages, or any other interactive feedback.
 Test the prototype: Conduct usability testing with real users or stakeholders to gather
feedback on the prototype. Observe how users navigate the interface, complete tasks, and
provide feedback on their experience.
 Iterate and refine: Analyze the feedback received and make necessary iterations to
improve the prototype. Address any usability issues, optimize interactions, and refine the
user flows based on the insights gathered.
 Consider responsive design: If designing for multiple devices or screen sizes, ensure
that your prototype demonstrates how the layout and interactions adapt to different screen
sizes and orientations.
 Share and collaborate: Use the collaboration features of the prototyping tool to share
the prototype with stakeholders, clients, or development teams. Gather their feedback,
address any concerns, and involve them in the design iteration process.
Creating a working prototype using prototyping tools allows you to test and validate your design
concepts, gather feedback early in the process, and refine the user experience before moving into
the development phase. The prototype serves as a functional representation of the final product
and helps stakeholders visualize and understand the design's interactivity and usability.
5.7.1 Creation of High-Fidelity Polished Wireframe
To create a high-fidelity polished wireframe, you can follow these steps:
 Define your goals and gather requirements: Understand the purpose of the wireframe
and identify the specific goals you want to achieve. Gather requirements from
stakeholders, clients, or users to ensure you have a clear understanding of what needs to
be included in the wireframe.
 Research and gather inspiration: Look for inspiration from existing websites or
applications that have similar features or layouts to what you're aiming for. Explore UI
design patterns, user experience best practices, and current design trends to inform your
wireframe.
 Start with a rough sketch: Begin by sketching out your wireframe ideas on paper or
using a digital sketching tool. This step helps you quickly iterate and explore different
layout options without getting caught up in the details.
 Choose a wireframe tool: Select a wireframing tool that suits your needs and
preferences. Popular options include Balsamiq, Adobe XD, Sketch, Figma, or any other
tool mentioned earlier. Familiarize yourself with the chosen tool's interface and features.
 Create a basic wireframe structure: Use the selected wireframing tool to create the
basic structure of your wireframe. Focus on the layout, content placement, and overall

16
IFETCE R-2019A ACADEMIC YEAR:2023-2024

flow of information. Start by adding the main components like headers, footers,
navigation bars, and content sections.
 Refine the visual elements: Begin adding more specific visual details to your wireframe.
Fine-tune the typography, colors, and visual hierarchy. Ensure that your wireframe aligns
with the brand guidelines, if applicable, and maintains consistency throughout.
 Add interactive elements: If needed, include interactive elements in your wireframe to
showcase user interactions, transitions, or animations. This could involve creating
clickable buttons, dropdown menus, form fields, or any other interactive components
relevant to your design.
 Incorporate real content: Replace placeholder text and images with real content to give
a better sense of how the final product will look and feel. Use actual headlines, body
copy, and images that align with the intended purpose of the wireframe.
 Pay attention to detail: Polish your wireframe by paying attention to small details.
Ensure alignment, consistency, and spacing between elements. Refine the visual design,
making sure it adheres to UI design principles and best practices.
 Seek feedback and iterate: Share your high-fidelity wireframe with stakeholders,
clients, or colleagues to gather feedback. Incorporate the feedback into your wireframe
and iterate as necessary to improve the design and address any concerns or suggestions.
Remember, the level of fidelity in a wireframe can vary depending on the project's needs. It's
important to strike a balance between providing enough visual details and maintaining the
flexibility to make changes during the design process.

5.8 Creating the working Prototype using Prototyping tools

5.8.1 Selecting right Prototyping tools
In order to choose the right prototyping tool for designing, there are a few factors which need to
be evaluated for that tool to check whether it fits our needs or not.
1. Learning Curve: Firstly, we have to analyze how easy is the tool to adopt. Let’s call it the
learning curve i.e., how long it takes for a designer get a hold of the tool. Since all tools are
different from each other and provide various features, it would consume a lot of time for the
designer to learn the tool.
2. Sharing: As collaboration is key for design, we check how well suitable it is for teamwork.
The tool should provide collaboration ability for multiple people to be in sync with each other.
Since every designer has their own perspective/ ideas for a project it’s imperative that all of them
stay on the same page.
3. Usage: Another point to consider when choosing a prototyping tool is how well it fits your
design process and other tools you regularly use. For example, if you are designing in Photoshop,
Illustrator or Sketch, it would be great if your prototyping software could directly use the files
produced by these apps without requiring you to export assets separately and then build
everything from scratch to create the interactions.
4. Ease of use and comfort: The ease of use in using the prototyping tool is essential for the
designer to save time and help increase output. It should reduce the number of steps required for
a designer to complete a task rather than increasing it.
5. Cost: There are many prototyping tools out there, many of which with niche features. But
there is a catch with these tools, that they do not fit our budget. And hence, we should be careful
while choosing tools and not be blinded by the features.

17
IFETCE R-2019A ACADEMIC YEAR:2023-2024

6. Fidelity: What would be the requirement for the prototype? Whether you just require a
mockup of the app layout or do you need something that supports more details and complex
interactions. There can be different requirements for projects which could be classified into low,
medium and high fidelity. Low fidelity would mean where we just want to test the idea. On the
other hand, Medium fidelity would be when we’re focusing on layout, information and
interaction design. And finally, High fidelity when the most important things are visual design,
animation, and micro-interactions.
Creating a working prototype using prototyping tools allows you to bring your design concepts
to life and simulate user interactions and flows. Here's a step-by-step guide to creating a working
prototype using prototyping tools:
 Select a prototyping tool: Choose a prototyping tool that suits your needs and supports
the level of interactivity you want to achieve. Some popular options include InVision,
Adobe XD, Figma, Axure RP, or Proto.io.
 Import or recreate design elements: Import your design assets, such as screens, icons,
images, and UI components, into the prototyping tool. Alternatively, you can create the
design elements directly within the tool using its design capabilities.
 Define the navigation flow: Determine the user flow and navigation paths within the
prototype. Identify how users will move from one screen to another, the interactions they
can perform, and the transitions between screens.
 Add interactive elements: Use the prototyping tool's features to add interactive elements
to your screens. This can include buttons, links, menus, sliders, form fields, or any other
elements that require user input or response.
 Set up interactions and transitions: Define how different elements and screens should
respond to user interactions. Specify the actions triggered by clicks, taps, or other
gestures, and define the transitions and animations that occur when those actions are
performed.
 Incorporate dynamic content: If your design includes dynamic content, such as data
from a database or real-time updates, simulate that content within the prototype. Use
placeholder data or connect to external data sources if the prototyping tool supports it.
 Test the prototype: Conduct usability testing with real users or stakeholders to gather
feedback on the prototype. Observe how users interact with the interface, complete tasks,
and identify any usability issues or areas for improvement.
 Iterate and refine: Analyze the feedback received during testing and make necessary
iterations to improve the prototype. Address any usability issues, optimize interactions,
and refine the user flows based on the insights gathered.
 Consider responsiveness: If you are designing for multiple devices or screen sizes,
ensure that your prototype demonstrates how the layout and interactions adapt to different
screen sizes and orientations. Test the prototype on different devices or use the
responsive preview features of the prototyping tool to ensure a consistent experience.
 Share and collaborate: Use the collaboration features of the prototyping tool to share
the prototype with stakeholders, clients, or development teams. Gather their feedback,
address any concerns, and involve them in the design iteration process.
Creating a working prototype using prototyping tools allows you to validate your design
concepts, gather feedback early in the process, and refine the user experience before moving into
the development phase. The prototype serves as a functional representation of the final product
and helps stakeholders visualize and understand the design's interactivity and usability.

18
IFETCE R-2019A ACADEMIC YEAR:2023-2024

5.9 Sharing and Exporting Design

Sharing and exporting design files in UI/UX involves the process of making your design assets
accessible to stakeholders, clients, and developers. Here are some common steps to share and
export your UI/UX design:
 Choose the appropriate format: Determine the format that best suits the needs of your
recipients. This could include image files (such as PNG or JPEG), PDFs, interactive
prototypes, or design source files from your design tool.
 Export as image files: If you want to share static visuals of your design, you can export
individual screens or artboards as image files. Most design tools provide options to export
in common image formats. Specify the desired resolution and quality settings before
exporting.
 Export as PDF: If you have multiple screens or artboards that need to be shared as a
single document, exporting as a PDF can be a convenient option. This preserves the
layout and allows stakeholders to view the designs in a sequential manner.
 Generate interactive prototypes: If you have created interactive prototypes using
specialized prototyping tools like InVision, Marvel, or Figma, you can share a live link or
generate a prototype file to distribute. This allows stakeholders to interact with the
design, experience user flows, and provide feedback.
 Use collaboration and sharing features: Many design tools provide collaboration and
sharing features to streamline the feedback and review process. Utilize these features to
share your designs with specific individuals or teams, enable comments and annotations,
and track feedback and changes.
 Share design files via cloud storage: Uploading your design files to cloud storage
platforms like Google Drive, Dropbox, or Box allows you to share access with others.
Share the file or folder link with stakeholders, granting them the ability to view or
download the design assets.
 Share via project management tools: If your team uses project management tools like
Trello, Asana, or Jira, you can attach design files or provide links within the relevant
project or task. This ensures that the design assets are easily accessible within the project
workflow.
 Communicate sharing instructions: When sharing your design files, provide clear
instructions on how to view and provide feedback. Include any necessary passwords or
access instructions if the files are shared through secure channels.
 Regularly update and communicate changes: As your designs evolve, make sure to
communicate any updates or changes to the relevant stakeholders. Keep everyone
informed about the progress and ensure they are working with the most recent version of
the design files.
 Organize your design files: Before sharing or exporting, ensure that your design files
are properly organized and named for easy navigation. Use folders or artboards to
separate different screens, sections, or components within your design.
 Choose the appropriate file format: Consider the purpose and requirements of the
design handoff when selecting the file format for sharing or exporting. Common file
formats for design include:
 PDF (Portable Document Format): Ideal for sharing static designs that preserve the
visual layout and can be easily viewed on various devices.

19
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 PNG (Portable Network Graphics): Suitable for exporting individual screens or assets
with a transparent background and lossless compression.
 SVG (Scalable Vector Graphics): Ideal for exporting icons, logos, or illustrations that
require scalability without loss of quality.
 Sketch, XD, or Figma Files: If working with specific design tools, you can share the
source files directly to allow others to access and collaborate on the designs.
 Export assets: If developers require individual design assets, export them in the
appropriate format (PNG, SVG, etc.). Make sure to specify the required dimensions and
resolutions for the assets to ensure they are optimized for different devices or platforms.
 Use design collaboration tools: Consider using design collaboration tools like InVision,
Zeplin, Figma, or Adobe Creative Cloud Libraries to facilitate collaboration and
feedback. These tools allow you to share designs, gather comments, and iterate on the
design collaboratively.
 Share via cloud storage: If the file size is large or you want to maintain a centralized
repository for your design files, consider sharing them through cloud storage services like
Dropbox, Google Drive, or Microsoft OneDrive. Upload the design files to a shared
folder and provide access to the relevant stakeholders.
 Provide access permissions: Ensure that you grant appropriate access permissions when
sharing the design files. Set viewing, commenting, or editing permissions based on the
roles and responsibilities of the recipients.
 Create design specifications or style guides: If the design requires detailed
specifications or guidelines for implementation, consider creating a design specification
document or style guide. Include information about colors, typography, spacing,
interactions, and any specific guidelines for developers to follow.
 Communicate effectively: When sharing or exporting designs, provide clear instructions
or explanations regarding the design concepts, user flows, or any specific functionalities.
This helps stakeholders and developers understand the intent behind the design and
ensure accurate implementation.
 Iterate and update designs: As the design evolves or changes, ensure that you update
the shared or exported files to reflect the latest version. This avoids confusion or
discrepancies between different versions of the design.
 Seek feedback and collaboration: Encourage stakeholders, clients, or developers to
provide feedback or ask questions regarding the shared designs. Foster a collaborative
environment to gather input, address concerns, and improve the design based on valuable
feedback.
By following these steps, you can effectively share and export your design files, ensuring smooth
communication and collaboration throughout the design process. Remember to consider any
intellectual property rights or confidentiality requirements when sharing and exporting design
files. Be mindful of privacy and security concerns, especially when sharing sensitive or
confidential designs.

20