UX Design: Concept & Frameworks

Project Report Submitted in Partial Fulfilment of the Requirements for the Degree of
Bachelor of Engineering
in
COMPUTER SCIENCE
Submitted by
Name of the Student
Samridhi Ganjoo: (Roll No.19UCSE4038)

Under the Supervision of

Assistant Professor
Mr. Abhisek Gour Sir

Department of Computer Science and Engineering

MBM University, Jodhpur
<April, 2022>
This page was intentionally left blank.
Department of Computer Science & Engineering

M.B.M. Engineering College, Jai Narain Vyas University

Ratanada, Jodhpur, Rajasthan, India –342011

CERTIFICATE

This is to certify that the work contained in this report entitled “UX Design: Concept &
Frameworks” is submitted by Ms. Samridhi Ganjoo (Roll. No: 19UCSE4038) to the Department
of Computer Science & Engineering, M.B.M. Engineering College, Jodhpur, for the partial
fulfilment of the requirements for the degree of Bachelor of Engineering in Computer Science
engineering.

They have carried out their work under my supervision. This work has not been submitted
elsewhere for the award of any other degree or diploma.

The project work in our opinion, has reached the standard fulfilling of the requirements for the
degree of Bachelor of Engineering in Information Technology in accordance with the regulations
of the Institute.

Mr. Abhisek Gour

Assistant Professor
(Supervisor)
Dept. of Computer Science & Engg.
M.B.M. Engineering College, Jodhpur

Mr. Nc Barwar
(Head of Department)
Dept. of Computer Science & Engg.
M.B.M. Engineering College, Jodhpur

This page was intentionally left blank.

DECLARATION

I, Samridhi Ganjoo, hereby declare that this seminar/project titled “UX Design : Concept &
Frameworks” is a record of original work done by me under the supervision and guidance of
Mr. Abhisek Gour Sir.

I further certify that this work has not formed the basis for the award of the
Degree/Diploma/Associateship/Fellowship or similar recognition to any candidate of any
university and no part of this report is reproduced as it is from any other source without
appropriate reference and permission.

Samridhi Ganjoo
 SIGNATURE OF STUDENT

(Samridhi Ganjoo )
7th Semester, CSE

Roll No. - 19UCSE4038

This page was intentionally left blank.

ACKNOWLEDGEMENT

In the completion of my Report on “UX Design: concept & Framework”.

I would like to convey my special gratitude to My Mentor Mr. Abhisek Gour

Sir,Assistant Professor of MBM Engineering College at the Computer Science
Department.

Your valuable guidance and suggestions helped me in various phases of the completion
of this Seminar and report . I will always be thankful to you in this regard.

I am ensuring that this project is finished by me.

• Samridhi Ganjoo

This page was intentionally left blank.

 ABSTRACT

User experience (UX) design is the process design teams use to create products that provide
meaningful and relevant experiences to users. This involves the design of the entire process of
acquiring and integrating the product, including aspects of branding, design, usability and
function. In here, we have discussed on to the detail of UI/UX design , its evolution all the way
back from Circa 1430 to 2007 iPhone and the future of UXD, along with that i have also
explained all about the main backbone concept’ of User Experience in respect to the
company/Product whereas also have briedfly explained into the frameworks of UXD starting
from basics till, famous frameworks in the air used by apple and facebook like giant companies,
followed by pro’s and con’s ending up with a short summary!

This page was intentionally left blank.

Contents

• Introduction to UX(6-8 pages) 1

• UI/UX .……… ………………………………………........2

• What is UX & UXD? …………………………………………. 6

• History & Evolution of UX! (4-5 Pages) 7-11

• Concept Design & Frameworks(4-5 Pages) 12-25

• Pros & Cons (3-4 Pages) 26-30

31-32
References……………………………………………………………………..
33

This page was intentionally left blank.

Chapter 1

INTRODUCTION

UX = USER EXPERIENCE

UXD = USER EXPERIENCE DESIGN

User Experience design is design that is user centered. The goal is to design artifacts
that allow the users to meet their needs in the most effective, efficient and satisfying
manner. It introduces the novice to a cycle of discovery and evaluation and a set of
techniques that meet the user's needs.

• "user experience UX" or "user interface UI"

UX (user experience) and UI (user interface) are two interdependent terms. While UI
generally deals with the interaction between users and computer systems, software and
applications, UX deals more generally with a user's overall experience with a
brand, product or service.

whereas,

UI design is more concerned with the surface and overall feel of a design. UI design is a
craft where you the designer build an essential part of the user experience. UX design
covers the entire spectrum of the user experience. One analogy is to picture UX design
as a car with UI design as the driving console.

Below is the image which clearly illustrates onto - UI & UX Design

Fig 1.1: UI & UX Design

1.1 User Interface Design(UID)

User interface (UI) design is the process designers use to build interfaces in software or
computerized devices, focusing on looks or style. Designers aim to create interfaces which
users find easy to use and pleasurable. UI design refers to graphical user interfaces and other
forms of interfaces as well like :-

Designing User Interfaces for Users:

 • Graphical user interfaces (GUIs)—Users interact with visual representations
on digital control panels. A computer’s desktop is a GUI.
• Voice-controlled interfaces (VUIs)—Users interact with these through their voices.
Most smart assistants—e.g., Siri on iPhone and Alexa on Amazon devices—are VUIs.
• Gesture-based interfaces—Users engage with 3D design spaces through bodily
motions: e.g.VR games.

1.2 User Experience Design (UXD)

User Experience Design involves the design of the entire process of acquiring
and integrating the product , including aspects of branding , design , usability and
function .
The UX Designer should consider the
Why, What and How of product use.
The Why involves the users’ motivations for adopting a product,
The What addresses the things people can do with a product—its functionality.
whereas,
The How relates to the design of functionality in an accessible and aesthetically
pleasant way.

Below is the Pictorial illustration of :

4 Step Design Process

Step1: Requirements Gathering = Understanding the user

and what her goals are.What are the current practicesThis step can also be thought of as
understanding the "problem space"- what is hindering the completion of the task how can the
task or process be improved.A whole host of techniques are presented that allow the designer to
collect data about the user, her goals and current practices
Step 2: Design Alternatives = Once
you understand the users, their goals, and their current practices (e.i., the problem space) you are
able to take this data and develop various design options that will improve the user experience

Step 3: Prototyping = Techniques for

modelling the novel designs before a final version is produced

Step 4: Evaluation = A set of

techniques for ascertaining that your design meets the needs of the user

THE DESIGN THINKING PROCESS FOR A BETTER UX

This page was intentionally left blank.

Chapter 2
History & Evolution of UX!

Circa 1430: Leonardo da Vinci’s “kitchen nightmare”

Michael Gelb’s wonderful book “How to Think like Leonardo da Vinci” recounts the story of
the Duke of Milan commissioning da Vinci to design the kitchen for a high-profile feast. The
great Maestro took the job on with his usual inventive flair. In what is considered the first use
of the technology (hundreds of years before the Industrial Revolution) da Vinci designed and
employed conveyor belts to transport food items to the preparers. He also built what is likely
the first sprinkler system for safety measures. However, the conveyor belts operated too
erratically for the workers and—to make matters worse—the sprinkler system went off,
ruining some of the food.

While this particular case was a disaster, it’s an early story that bears the trace of user
experience design practices to come.

Early 1900s: Taylorism and the Industrial Revolution

Frederick Winslow Taylor, a mechanical engineer and one of the first management
consultants, authored “The Principles of Scientific Management,” a widely influential study
of engineering efficiency. Along with Henry Ford’s pioneering mass-production techniques,
Taylor and his supporters shaped the early vision of what interactions between laborers and
their tools should be like.

1948: Toyota and the humanizing of the production system

While Toyota, like Ford, valued efficiency in engineering and production, it also sought its
employees' input. The assembly workers’ contributions were valued greatly—almost as much
as the technologies used. The roaring success that Toyota experienced as a result brought
new attention to the role of human interaction with technology.

1955: Dreyfuss’ Designing for People

Henry Dreyfuss, an American industrial designer, wrote the classic text “Designing for
People.”In it, he writes : When the point of contact between the product and the people
becomes a point of friction, then the industrial designer has failed.On the other hand, if
people are made safer, more comfortable, more eager to purchase, more efficient—or just
plain happier—by contact with the product, then the designer has succeeded.These
principles, which include today’s oft-invoked concept of delight, have only grown more
relevant as the points of contact between product and person proliferate.

1966: Disney and the role of joy

In a very early-stage announcement of what would later become Disney World, Walt Disney
described the project as “always in the state of becoming, a place where the latest technology
can be used to improve the lives of people.” His imaginative use of technology to bring
people joy continues to inspire user experience designers.

1970s: PARC and the design of personal computers

Xerox’s famous research arm, PARC, gave form and function to the design of computers for
human use. Bob Taylor, a trained psychologist and engineer, led his team in building some of
the most important and enduring tools of human-computer interaction, including the
graphical user interface (GUI) and the mouse.

1995: Don Norman, the first user experience professional

An electrical engineer and cognitive scientist by trade, Don Norman joined Apple to help
with the research and design of its upcoming line of human-centered products. He asked to
be called “User Experience Architect,” marking the first use of the term in a job title.By this
time Don Norman had also written his classic book, “The Design of Everyday Things,”
which championed design for usability and functionality rather than aesthetics. It remains
hugely influential for designers today.

2007: the iPhone

Steve Jobs unveiled the iPhone at MacWorld 2007, calling it a “leapfrog product” that
promised to be far easier to use than any other smartphone on the market. Not only did it
deliver on its promise, but it changed the landscape of mobile devices forever, catapulting
Apple into its current position as one of the world’s most successful companies.The genius of
the original iPhone, arguably, lay in its fusion of superior hardware and software to provide
connectivity through a revolutionary capacitive touchscreen, making the physical keyboards
of other phones obsolete. Put more simply, it provided a user experience far superior to that
of any other contemporary phone.And this inadvertently led to current business focus on user
experience. If Apple’s emphasis on delivering great user experiences was winning them
market success and critical accolades, others wanted in on it too.

The future of user experience

Every major milestone in the evolution of UX has involved an interaction between

technology and human beings. As technology and the internet continue to weave themselves
into our lives, we can expect to see UX continue to evolve. This will bring to light the need
for more specialized skills in the multidisciplinary practice, including user research, graphic
design, customer advocacy, software development, and more. In fact, a search on Indeed.com
for jobs related to user experience shows that over 6,000 jobs have been posted in the last 15
days.

This page was intentionally left blank

Chapter 3
Concept & Frameworks

1. UX design is the process used to determine what the experience

will be like when a user interacts with your product

2. User experience design is an approach to design that takes the

user into account

3. UX design is about solving problems through empathy

4. User Experience Design is a process for designing systems that

offer a great experience to users

5. UX is improving how useful, easy, pleasant, marketable, or

addictive it is to use a product

6. User experience design is the fulfillment of a brand’s promise

7. UX design is the art and science of generating positive emotions

through product interactions

8. UX design is a commitment to building products with the

customer in mind
9. UX design is the creative and analytical process of determining
what a website, device, or piece of software is going to be

10. UX design is so much more than just designing for a screen

11. UX design is design with an awareness of every touchpoint that

makes up the overall experience with your product or service

12. UX design is a process of deeply understanding the user's needs

and objectives

13. User experience is a commitment to developing products and

services with purpose, compassion, and integrity

14. It’s the practice of meeting people’s needs before, during, and
after product development

15. UX design is about delighting users by anticipating their needs

and giving them something they didn’t think to ask for

UX design improves the experience for the user of that product.

Good user experience increases the adoption of that product.

The goals of UX design include:

• To understand the goals and context-of-use of potential users or

customers.
• To use that understanding to design a product, service, or app within the
 constraints of business and technology.

The base concept lies in this example

That is,
If a user’s goal is to buy a product, then the business goal needs to be making that purchase a
useful, usable and delightful action.

Useful: You need to solve a user’s need; a problem that users actually have.

Usable: Usability needs to be clear so that users understand your product/service.

Delightful: It’s no bad thing if a user enjoys using your product.

UX Process =
Your process will depend on the type of product you’re designing. Different projects
require different approaches
Approach
The concept of “design thinking” as a UX process. This process has five stages in it:
empathize, define, ideate, prototype, and test. Most design processes originate from
this concept.

If we apply design thinking to product design, we would follow a UX process with the
following five key phases:

• Product definition
• Research
• Analysis
• Design
• Validation
1. Product definition

One of the most important phases in UX design is actually done before the product team
creates anything. Before you can build a product, you need to understand its context for
existence. The product definition phase sets the foundation for the final product. During
this phase, UX designers brainstorm around the product at the highest level (basically, the
concept of the product) with stakeholders.

This phase usually includes:

• Stakeholder interviews: interviewing key stakeholders to gather insights about

business goals.
• Value proposition mapping: thinking about the key aspects and value propositions
of the product: what it is, who will use it, and why they will use it. Value
propositions help the team and stakeholders create consensus around what the
product will be and how to match user and business needs.
• Concept sketching: creating an early mockup of the future product (can be low-
fidelity paper sketches of the product’s architecture).

This phase typically ends up with a project kick-off meeting. The kick-off meeting brings
all the key players together to set proper expectations both for the product team and
stakeholders. It covers the high-level outline of the product purpose, team structure (who
will design and develop the product), communication channels (how they will work
together), and what stakeholders’ expectations are (such as KPIs and how to measure the
success of the product).

2. Product Research

Once you’ve defined your idea, the product team moves to the research phase. This phase
typically includes both user research and market research. Seasoned product designers
 think of research as a good investment—good research informs design decisions and
investing in research early in the process can save a lot of time and money down the road.

The product research phase is probably the most variable between projects—it depends on
the complexity of the product, timing, available resources, and many other factors. This
phase can include:

Individual in-depth interviews (IDI) : A great product experience starts with a good
understanding of the users. In-depth interviews provide qualitative data about the target
audience, such as their needs, wants, fears, motivations, and behavior.

Competitive research: Research helps UX designers understand industry standards and

identify opportunities for the product within its particular niche.

3. Analysis

The aim of the analysis phase is to draw insights from data collected during the research
phase, moving from “what” users want/think/need to “why” they want/think/need it.
During this phase, designers confirm that the team’s most important assumptions are
correct.This phase of the UX process usually includes:

• Creating user personas : Personas are fictional characters that represent the different
user types for your product. As you design your product, you can reference these
personas as realistic representations of your target audience.
• Creating user stories : A user story is a tool that helps designers understand the
product/service interactions from the user’s point of view. It’s usually defined with
the following structure: “As a [user] I want to [goal to achieve] so that
[motivation].”
• Storyboarding : Storyboarding is a tool that helps designers connect user personas
and user stories. As the name suggests, it’s essentially a story about a user
interacting with your product.
4. Design

When users’ wants, needs, and expectations from a product are clear, product designers
move to the design phase. At this step, product teams work on various activities, from
creating information architecture (AI) to the actual UI esign. An effective design phase is
both highly collaborative (it requires active participation from all team players involved in
product design) and iterative (meaning that it cycles back upon itself to validate ideas).

The design phase usually includes:

• Sketching : Sketching is the easiest and fastest way to visualize our ideas. You can
do this by drawing by hand on a piece of paper, on a whiteboard, or in a digital tool.
It’s very useful during brainstorming sessions because it can help the team visualize
a broad range of design solutions before deciding which one to go with.
• Creating wireframes : A wireframe is a tool that helps designers visualize the basic
structure of a future page, including the key elements and how they fit together.
Wireframing acts as the backbone of the product, and designers often use them as a
foundation for mockups and prototypes.
• Creating prototypes : While wireframes are mostly about structure and visual
hierarchy (the look), prototypes are about the actual interaction experience (the
look and feel). A prototype is like a simulation of the product and may be low-
fidelity (clickable wireframes) to high-fidelity (coded prototypes).
• Creating a design specification : Design specifications contain all of the visual
design assets required for developers to turn prototypes into a working product.
• Creating design systems : For large projects, designers typically create a system of
components, patterns, and styles that help both designers and developers stay on the
same page regarding the design.

5. Validation (Testing)

Validation is an essential step in the design process because it helps teams understand
whether their design works for their users. Usually, the validation phase starts after the
high-fidelity design is ready, since testing with high-fidelity designs provides more
 valuable feedback from end-users). During a series of user testing sessions, the team
validates the product with both stakeholders and end-users.

The validation phase of the UX process may include the following activities:

• “Eat your own dogfood.” Once the design team has iterated the product to the point
where it’s usable, it’s time to test the product in-house. Team members should try
using the product on a regular basis, completing routine operations to uncover any
major usability flaws.
• Testing sessions :. User testing sessions with people who represent your target
audience are very important. There are many different formats to try, including
moderated/unmoderated usability testing, focus groups, beta testing, and A/B
testing.
• Surveys :. Surveys are a great tool for capturing both quantitative and qualitative
information from real-world users. UX designers can add open-ended questions
like “What part of the product do you dislike?” to get user opinions on specific
features.
• Analytics :. Quantitative data (clicks, navigation time, search queries, etc.) from an
analytics tool can be very helpful to uncover how users interact with your product .

What Are UX Frameworks?

These are kind of maps of the design process –

• Determine the steps of creating designs.

• Show a clear direction.
• Make deliverables single-concept.
• Help the design team reach a consensus.
• Save designers’ time and effort.
• Minimize misunderstanding.
• Finally, they work!
Why Should Designers Use UX Frameworks?

• They allow you to split the design process into baby steps. That is, it won’t
seem so complex and long

• Using frameworks may evoke a new wave of creativity.

SOME FRAMEWORKS FOR CONVENIENCE

#1 — Design Thinking

#2 — 6 Levels of User Experience

#3 — The Hierarchy of UX Needs

#4 — BASIC Framework
#5 — Double Diamond

#6 — The UX Honeycomb

#7 — Hooked Model

#8 — Behavior Model

FOGG BEHAVIOR MODEL

Behavior = Motivation (you want to do it) * Ability (you can do it) * Prompt (you do it now).

This page was intentionally left blank.

Chapter 4
Pro’s and con’s
Advantages of user-centred design
User-centred design improves the customer experience associated with a website, a product
or a service.

Benefits of user-centred design

User-centred design could bring many advantages to your business. For example, it could:

• increase your sales - customers are more likely to buy a product or service that meets
their needs
• boost competitiveness - customers are less likely to choose other business' products if
your product meets their needs more effectively
• build positive user experiences - increase loyalty and a good reputation for your
business or brand
• help you gain insight - this, in turn, could lead to innovative new products or services
• save your business time and money - by testing things with end-users when it is still
cost effective to make changes

By involving the customers in the design process, user-centred design could also:

• help you design more effective and safer products

• give your customers a sense of ownership in your product or service
• remove the need to change the design late in the process, avoiding high costs and time
delays

It's important to adopt a user-centred approach at the earliest opportunity. This gives
everyone who needs to be involved - such as research, engineering or marketing teams - a clear
picture of how you will call on their expertise to benefit the project. A good strategy will reduce
the risk of conflicting initiatives, wasting your business' time and money.

Advantages
- More efficient and effective products

- Easier to manage users' expectations and level of satisfaction with products

- Develops of a sense of ownership for the product by users when involved in design process

- Less product redesign and quicker integration into the environment

- More creative design solutions due to collaboration

Disadvantages
- Cost and time resources.

- Additional design team members (ethnographers, usability experts) maybe required for data
collection and research

- Difficulty translating some types of data into design

- Risk of over specifying your product. Products can easily become too specific for general use
and not readily transferable to other clients.

This page was intentionally left blank.

References :

• https://www.usability.gov
 • https://www.flowmapp.com

• Book = Universal Principles of design

• Last but the best reference = Design Everyday Things!(by Don Norman)
best and an ideal book for learning the art of UI/UX
The Design of Everyday Things is a powerful primer on how -- and why -- some
products satisfy customers while others only frustrate them.
THANK YOU!

-Samridhi ganjoo
At the end,

I would like to convey my special gratitude to My Mentor Mr. Abhisek Gour

Sir,Assistant Professor of MBM Engineering College at the Computer Science
Department.

This project was completed because of his guidance and help.

Thank you sir!!