Module – 4

Metaphors and Prototyping

✘ Metaphor method: Theory and methodology of concept generation,

✘ Blend method & Thematic Method.

✘ Articulating design ideas: Storytelling;

✘ Introduction to Sketching & Dynamic Diagrams;

✘ K Scripts,

✘ Introduction to Prototyping & Visualization Design Tools

 ‘For me design is a question mark.
That is how I start every new project.’

Gijs Bakker, 2007

(Dutch jewellery designer)
Few products designed by Mr. Bakker
Metaphor Method in Concept generation

A metaphor is a rhetorical figure representing one concept by way of

another concept, which is considered similar to the concept to be
represented. Metaphors are often used in design.

For example, in the figure shows a famous chair called the Swan Chair. This
chair was created by the Danish designer Arne Jacobsen for a hotel, and it
remains very popular. As its name conveys, the Swan Chair is a chair which
approximates the shape of a swan in order to convey the quality of a swan
(i.e. elegance) and can be represented by the framework for a metaphor,
such as ‘the chair is a swan’
 Types of Metaphors

If a person says “that chair looks like a swan”

when he or she looks at the chair, it refers to an existing chair in
the picture. On the other hand, if a person says this while he or
she is designing the chair, then the chair is a concept which does
not yet exist.

In this situation, ‘the new chair which is to be designed is a swan’ is a more suitable representation. In
such a case, the similarity (implicit common features; e.g. elegant shape) between the chair and a swan play
an important role. On the basis of the above considerations, we can say that, in the design process using
metaphors, a new concept will be generated which will be similar to the concept to be assimilated to. A new
concept of a chair is generated (referring to a swan or imitating a swan) on the basis of the similarity between
the chair to be designed and a swan.
“First order Concept generation”
 Higher Order Concept Generation

A first-order concept generation is useful only to create a subspecies of an existing

object, since it cannot extend beyond the category of the existing product.

Abstract concept generated by combining multiple abstract concepts is called

a high-order abstract concept, and the high-order concept generation is the
process of generating a new concept on the basis of this high-order abstract
concept.

Difference between “White Tomato” and “Powdered Ketchup”

A high-order concept generation is understood to have its basis on the

dissimilarity-recognition process.
 Blending and Thematic Method
High-order abstract concepts can be interpreted as abstract concepts involving an innovative concept
which inherits partial properties from both the two base concepts but is different from the two base
concepts. We define the concept generation based on this process as concept blending or blending method.

The concept of ‘‘powdered ketchup’’ is an example of concept blending. This new concept is
understood to be generated by blending the different properties of snow (abstract concept: snowflake)
and tomato (abstract concept: flavouring).

On the other hand, according to the latter relation between the two base concepts, high-order abstract
concepts can be interpreted as abstract concepts involving an innovative concept which is generated
from the thematic scenes (situations, roles, etc.) of the base concepts. We define the concept generation
based on the thematic relation as concept integration in thematic relation.
 CREATIVITY AND PROBLEM SOLVING
✘ Creative thinkers are distinguished by their ability to synthesize new combinations of ideas and

concepts into meaningful and useful forms.

✓ A creative engineer is one who produces a lot of ideas. These can be completely original ideas

inspired by a discovery. More often, creative ideas result from putting existing ideas together in novel

ways.

✓ A creative person is adept at breaking an idea down to take a fresh look at its parts, or in making

connections between the current problem and seemingly unrelated observations or facts.

✓ We all like to be called “creative,” yet most of us, in our ignorance of the subject, feel that creativity

is reserved for only the gifted few.

✓ There is the popular myth that creative ideas arrive with flash-like spontaneity—the flash of lightning

and clap of thunder routine.

Aids to Creative Thinking
✘ Develop a creative attitude

✘ Unlock your imagination

✘ Be persistent

✘ Develop an open mind

✘ Suspend your judgment

✘ Set problem boundaries

Communication
What is Communication ?

14
 15

Articulate Design Ideas

At the surface this sounds easy – anyone can talk, but talking isn't the
challenge. The challenge is in communicating well.
How can you communicate in a way that convinces your stakeholder(s)
that this is the problem to focus on? The meaning behind a particular
decision? The goal you're trying to achieve?
Knowing the goal is critical, but keep in mind that the goal can change.
As we progress through the design process, new insights arise which can
influence the goal or direction of the project.
 16

Articulate Design Ideas

A big part of any designers job is to convincing others of our design can be key to success.

Being a designer we need to consider consumers needs and values. This can be helpful in
pinpointing what to focus on.

For example:

As an engineer, I value technical constraints and want to know the technicality required to make
this project successful, so I should focus on how to address these.

As a product owner I value business goals and want to know how this is solving the business
problem, so I should ensure that I outline how this solution will achieve that.

Equally important as understanding their needs and values is listening.

Listening helps to uncover the real problem and let others be heard.
 17

Defining Designs' Purpose

1. Solve a problem
What problem does this particular design solve? Always refer to the problem, goals and big
picture.
2. Be easy for users
How does this particular design affect the user? What barriers are we creating or
minimizing?
3. Be supported by everyone
There will always be someone who will challenge your decision. Be prepared to explain
why it's better than the alternative and the other directions you explored.
 Documentation Benefits in Articulate Design

1. Avoids repeat conversations

2. Focuses on being articulate
3. Builds trust with stakeholders
4. Keeps the meeting on track

18
19
Storytelling is a powerful communication tool
20
21
 STORYTELLING
Storytelling is used in design as a technique to get insight into users, build empathy and access
them emotionally. With stories, designers speak via character, theme, melody, and spectacle to
increase the appeal of what they offer and provide a solid understanding of the users.

Seven Elements in Storytelling

1. Plot – what are users trying to achieve/overcome?
2. Character – who are the users: not just
demographically, but what insights do you require to
understand what they’re truly like?

22
3. Theme – how can you establish a trustworthy presence to them?
4. Diction – what will your design say to users and how?
5. Melody – will the overall design pattern appear pleasant and predictable to users,
moving them emotionally?
6. Décor – how will you present everything so the graphics match the setting the users
can sense?
7. Spectacle – how can you make your design outstanding so users will remember it?
23
 SIX RULES IN STORYTELLING

1. Self knowledge and awareness

2. Clear structure and purpose

3. Have a character to root

4. Appeal to our deepest emotions

5. Surprising and unexpected

6. Simple and focused

24
 Sketching
A sketch is a rapidly executed freehand drawing that is not usually intended as a finished work. A
sketch may serve a number of purposes: it might record something that the artist sees, it might record
or develop an idea for later use or it might be used as a quick way of graphically demonstrating an
image, idea or principle.

Sketches can be made in any drawing medium. The term is most often applied to graphic work
executed in a dry medium such as silverpoint, graphite, pencil, charcoal or pastel. It may also apply to
drawings executed in pen and ink, digital input such as a digital pen, ballpoint pen, marker pen, water
colour and oil paint. The latter two are generally referred to as "water colour sketches" and "oil
sketches". A sculptor might model three-dimensional sketches in clay, plasticine or wax.

25
Dynamic drawings

27
28
 29
SCRIPT

https://medium.com/@bladekotelly/k-scripts-the-fastest-and-most-flexible-way-to-articulate-a-user-experience-97264d9c4786
The fastest and most flexible way to articulate a user
experience

Blade Kotelly
UX Design Strategist, Consultant, Educator

30
▪ In designing physical products, sketching is commonly used as a quick and
inexpensive method to allow the designer to express an idea quickly, evaluate the
concept, and explain it to others.

▪ Early sketches (which really are a form of prototyping) can be easily tweaked, changed
wholesale, edited, questioned or improved.

▪ In the late 90s Mr. Kotelley realized that there was a need for UX designers to have a
method to scketch — and he created a tool name “K-Scripts”.

▪ He started to apply this same idea to web design, mobile application design, social-
robot interaction design, and teaching it in his design-thinking class at MIT. Since then,
it has been used at numerous organizations including big ones like Adobe and the U.S.
Air Force, for articulating interactive experiences for software, hardware, robotics and a
whole lot more.
31
▪ K-Scripts are valuable when they focus on the 80% case — the most typical cases that

users will encounter. They can also be used for failure conditions (in which a user may
make mistakes, even if we don’t expect to have it happen often) or any other context —
but the best value is to show off a normal interaction and not a possible, but unlikely one.

▪ The format of the K-Script can be elegant and visually designed, or as simple as a

spreadsheet table. Regardless of the format used, all K-Scripts contain three essential
elements:

32
Who:
▪ The first section defines the actor, whomever is performing the action, and shows
the sequential relationship between a user (or users) and the product. The who
could be a generic person, a specific user, a product, a system or any entity that is
involved in the interaction.
Observable Action:
▪ This section describes an action that a user performs or an action that occurs by a
system — as long as it’s something a viewer could observe. Whether it is
discussing a physical interaction (touching a screen, walking down stairs) or a
verbal one (talking to a machine), a detailed and truthful description matters here;
the What section is what enables the reader to create a mental picture of the
interaction.
Unobservable Action:
▪ This is the section that enables a designer to help the reader understand why a
situation may be occurring (motivation of the user, or notes about how the system
or technology works to enable this interaction.) It’s also a good place for others to 33
pose questions about the interaction.
Example: A Basic K-Script

Let’s take a look at a short K-Script

for the design of a new ticketing
kiosk at a large fair:

K-Scripts are an exceptionally easy

thing to construct — and it would
take a lot longer to sketch it out
visually. The K-Script format also
allows someone else to edit and
provide feedback:

34
 WHEN TO USE A K-SCRIPT ?
▪ The ability to K-Scripts up quickly is what makes them a powerful tool early on in the design
process.
▪ A K-Script is a great way to introduce a new idea, as it can provide a clear picture of the
interaction to those who have no familiarity with the product, but it can also be useful
throughout the entire design process.
▪ Just as they function as an easy way to convey basic functionality, they can constantly be
refined and become more robust (and more complete) over time, while still maintaining their
flexibility.
▪ In addition to their use as a resource for the designer during product development, K-Scripts
can also be used to demonstrate functionality to clients or investors.

35
▪ By combining a thorough and well-developed K-Script with a rudimentary prototype, customers

can experience the feel of the system (through a functional prototype) as well as understand the
depth and complexity at which the final system will operate.

▪ And since it’s text and it’s focused on the user experience, anyone with a little understanding of

the context will be able to understand it — even non-designers.

▪ Since K-Scripts are not meant to be all encompassing it’s not necessary to create convoluted and

overly complex scripts. The better use is to have the script focus on typical interactions and use
more detailed logic diagrams to show non-typical interactions.

▪ However, additional K-Scripts should be created for less common or fringe cases when the script

format is the best way to express the idea. A set of K-scripts creates a holistic view of the system
that can communicate to lots of different groups and provide vision that aligns teams. 36
Rapid Prototyping
 Rapid Prototyping

Rapid prototyping is the fast fabrication of a physical part, model or assembly

using 3D computer aided design (CAD).

The creation of the part, model or assembly is usually completed using additive
manufacturing, or more commonly known as 3D printing.

How Does Rapid Prototyping Work?

Rapid prototyping (RP) includes a variety of manufacturing technologies,

although most utilize layered additive manufacturing.

While additive manufacturing is the most common RP process, other more

conventional processes can also be used to create prototypes.
 Rapid Prototyping

These processes include:

Subtractive: whereby a block of material is carved to produce the

desired shape using milling, grinding or turning.

Compressive: whereby a semi-solid or liquid material is forced into

the desired shape before being solidified, such as with casting,
compressive sintering or molding.
 Additive Rapid prototyping -3D printing

One type of Rapid Prototyping is known as 3D printing, which is an additive manufacturing technology.

The process begins with taking a virtual design from modeling or CAD software.

The 3D printing machine reads the data from the CAD drawing and lays down successive layers of
liquid, powder, or sheet material, and builds up the physical model from a series of cross sections.

These layers, which correspond to the virtual cross section from the CAD model, are automatically
joined together to create the final shape.
RP process
 STL file

The STL file format has become the Rapid Prototyping industry's defacto standard data
transmission format, and is the format required to interact with On Demand Manufacturing.

For a simple model such as the box shown in figure 1, its surfaces can be approximated with
twelve triangles, as shown in figure 2. The more complex the surface, the more triangles
produced, as shown in figure 3.
 Prototyping Tools for Designer
In simple terms prototyping tools allow designers to Adaptation: Always choose a tool that you can easily
analyse and adapt.
experience how their project will work when it will get
completed. Sharing: As we know, teamwork is essential for a
great design work, so check your tool is suitable for
There are different types of prototypes tools or UX design
collaboration to be in sync with other members of
tools open source available with different goals and users, your team.
means the similar prototyping tool would not work every
Usage: When selecting a prototyping tool, always
time. check how well it fits with your design process and
other tools you regularly use
How to Prefer Best Prototyping Tools that Suit Your
Needs? Easiness of Use and Comfort: The ease of use in
using the prototyping tool is essential for the designer
In order to pick a right tool from the variety of online
to save time and help increase output.
prototyping tools for designing, here are few factors that
Price: we should be careful while choosing tools and
will assist you in your research.
not be blinded by the features.
 Available E-tools
✘ Marvelapp — Turn anything into interactive prototypes

✘ InVision — Powerful design prototyping tools

 Available E-tools

Justin mind — Prototyping Tool for web and mobile

apps

Flinto — The App Design Apps

 Available E-tools

Proto.io — Prototypes that feel real

Origami.Design — Design Prototyping

Available E-tools

Axure — Design the right solution

Fluid — Create Web and Mobile

Prototypes in Minutes
Design Tools for Data Visualization

Adobe Illustrator

SketchApp

Balsamiq

Adobe After Effects

Origami Studio

Adobe Experience Design

Craft

Microsoft PowerPoint