1 of 84

Brainstorming

Ideating potential solutions

2 of 84

The Design Process

Koberg & Bagnall

Design Thinking Workshop

3 of 84

Mental Exercise

How can we affix the candle to the wall so that the wax does not drip on the table?

You have:

candle
box of thumb tacks
match sticks

4 of 84

Functional Fixation

If the thumb tacks were left outside of the box, people are much more likely to solve this.

5 of 84

Creativity and Dissent

Authentic dissenters

people who really disagree with group – can enhance group creativity
Their opinion needn’t be right – but they can free the group from stagnant thinking.
The originality of the minority stimulates �the majority

6 of 84

Dissent and Authenticity

The benefits of dissent are weakened if

Dissent is not real 🡪 A deliberate “devil’s advocate” in the group can stifle dissent, because the majority know the opinion is manufactured.

Dissent is not encouraged 🡪 Polite or pro-forma acceptance is not enough.

7 of 84

Personal desires drive innovation

The history of HCI 🡪 An ongoing effort to augment, match, and surpass human intelligence

Mechanical Turk

Fake calculating machine

Early Computers

Real calculating machine

Engelbart’s 1968 GUI “Mother of All Demos” because computers caught up with the way humans do/want to work

Minority Report

We continue to dream up ways for technology to surpass us (and the pitfalls too!)

8 of 84

But we work in groups…

9 of 84

Point of View

Know yours; understand others’

Method

Know yours; understand others’

Communicate

Explain; persuade; synthesize

Experiment

Learn; document; progress

10 of 84

Myth of the Lone Genius

Design

Mystery�Art�Genius

design

Mastery�Shared skills and goals�Collaboration

That famous individuals are often masters, discoverers, groups in disguise.

vs

11 of 84

Brainstorming is for everyone!

Everyone does it. Many organizations already do it.

Critical thinking vs. Lateral thinking

Critical 🡪 Judges true/false value of a statement, identifying errors.
Lateral 🡪 Judges “movement value” of a statement, moving from one known idea to creating new ideas.

12 of 84

Brainstorming is NOT for everyone…

It’s a skill you learn and improve.�First, you should understand its purpose.�Second, you should practice.

Many designers and visionaries are introverts. �But you might need to acquire certain attitudes and skills to be an effective brainstormer and team worker.

13 of 84

Effective Practices

Improvisation

Listen to the other person. Faster reflexes, say the first thing that comes to your mind.

YAP: Yes And Practice

“I saw A when I came here”�“Yes, and because of A, B was on the TV.”�“Yes, and when the President saw B, he decided to call C.”�“Yes, and C was shopping for D.”

14 of 84

IDEO’s Brainstorming Rules

Sharpen the Focus
Playful Rules
Number your Ideas
Build and Jump
The Space Remembers
Stretch Your Mental Muscles
Get Physical

Aim for quantity

Hope for quality

15 of 84

Let’s try it

Receive the topic from the luck of the draw
Select your modifiers on the ff. slides. There is no limit to the number of modifiers taken, but they will all stack.
Pitch your solution (improvised, you get 30 seconds prep time).

Each person can only say up to 2 sentences until they are forced to switch. You have five minutes for the entire pitch.
Members are only allowed to repeat once all members have spoken at least one sentence. Then the counters are reset.

You will be scored based on the rubric in the ff. slides w/ your modifiers.

16 of 84

Modifiers

Modifier	Task	Point Effect
Mahal Ka Ni Rizal	Ang buong presentasyon ng grupo ay gagamit lamang ng wikang Filipino. Bawal gumamit ng anumang salitang Ingles o iba mang wika kung may angkop na salin ito sa wikang Filipino	+10 puntos kung nagtagumpay, -5 puntos kung may nasabing salita na hindi sa wikang Filipino
ABCs	Each person’s first word must start with each letter of the alphabet in succession (starting from A, then person 2 begins with B, then person 3 with C and so on.)	+5 points, -2 if failed
Natural Poet	Each person MUST say 2 sentences and the last words of each must rhyme.	+5 points, -2 if failed
Please Don’t Stop The Music	The entire pitch must be presented as if in a sung through musical. You may adapt the melody of popular pop songs or showtunes, no need to compose your own.	+5 points, -2 if any line is spoken normally

17 of 84

Modifiers

Modifier	Task	Point Effect
Pay it forward	After each sentence, the speaker must announce the next speaker with an overly positive comment, e.g. “And now I give the floor to my ridiculously handsome and certified smarter than Elon Musk groupmate, Juan De La Cruz!” WITHOUT laughing.	+5 points if successful, -2 points if at least one member laughs while handing the presentation to another member
Respin Cycle	Reroll your topic to another topic (chance to overlap with other groups)	-3 points per reroll, you cannot revert topics unless they show up on a reroll
El Filibusterismo	Each member may speak up to five sentences instead before a forced switch	-5 points

18 of 84

Rubrics

Criterion	3 points	2 points	1 point
Relevance to Problem Does the solution solve the problem?	Solves the problem very well.	Moderately solves the problem.	Barely or does not solve the problem.
Coherence Are there at least two aspects to the solution and are they coherent	At least 2 aspects are present and all are coherent.	At least 2 aspects are present and some are coherent.	Only 1 aspect to solution, or there are at least 2 but no coherence exists between them.
Creativity Is the solution more novel than expected	Solution is unexpected but effective.	Solution is somewhat expected and effective.	Either solution is predictable OR unexpected but ineffective.
Presentation Are the presenters convincing?	It is not obvious that their entire pitch is improvised.	It is obvious at times that the pitch is improvised.	It is very obvious that the pitch is improvised.
Feasibility Is there some version of the product that is buildable?	The product is feasible, with minor modifications.	The product is somewhat feasible, with major modifications.	The product is too unrealistic.
HIGHEST TOTAL WITH ALL POSITIVE MODIFIERS	45 POINTS

19 of 84

Prizes

Total Presentation Points	Inspiration Rewards
45	50 inspiration.
35 - 44	30 inspiration
25 - 34	15 inspiration
15 - 24 (must have at least 10 points before modifiers)	8 inspiration
10 - 14 (must have at least 5 points before modifiers)	3 inspiration

20 of 84

Let’s try it

Help! I keep forgetting all my appointments/classes/deadlines for school and I think calendars are too complicated.
Help! I want to avoid spoilers for new movies, but YouTube keeps recommending videos with spoilers in the thumbnail.
Help! I need to know how to get to someplace about 30 km away, but I don’t have a car and can’t afford ridesharing!
Help! I want to go out for my birthday, but I don’t know what activities to schedule with my friends for the day.
Help! I want to set alarms in the morning, but I sleep like a corpse, so sound and light vibration from my phone isn’t enough.
Help! It’s that time of year when it’s too hot when the fan or aircon is off, but it’s too cold when they’re on. Blankets and jackets don’t quite work well enough.
Help! My roommate snores too loudly, but I don’t want to kick him out because I cannot afford to pay rent alone.

21 of 84

Prototyping

Getting maximum feedback for minimum effort

22 of 84

23 of 84

Design & Prototyping Techniques

Scenario ∙ Storyboard ∙ Video

Design Sketch ∙ Screenshot

Paper ∙ Cardboard ∙ Foam Mockups

Wizard of Oz

Interactive Prototypes

Vision

Experience

Lo-Fi

Hi-Fi

24 of 84

Scenarios

“Scenarios are stories about people and their activities”
Focuses developers on the most important user activities that should be supported
Does not focus on implementation
Can either describe current practice, or a future hypothetical scenario

25 of 84

Example Scenario

John wants to take notes while in class. Even though the slides will be posted online later, he wants to make sure he captures the most important points. Before the professor starts the lecture, he starts the note-taking application on his phone. The application automatically notes the current date, time and class. During the class he can press one of two buttons - to start recording audio or to take a picture. After recording, the application allows him to tag the recording with keywords. Later, when he is home, he can review his notes, synchronized with the PowerPoint slides downloaded from the course web site. He can search by keyword, follow the lecture linearly, or sped up in time.

26 of 84

Elements of a Scenario

Agents / Actors
Setting
Goals / Objectives
Actions / Events

27 of 84

Example Scenario

John wants to take notes while in class. Even though the slides will be posted online later, he wants to make sure he captures the most important points. Before the professor starts the lecture, he starts the note-taking application on his phone. The application automatically notes the current date, time and class. During the class he can press one of two buttons - to start recording audio or to take a picture. After recording, the application allows him to tag the recording with keywords. Later, when he is home, he can review his notes, synchronized with the powerpoint slides downloaded from the course web site. He can search by keyword, follow the lecture linearly, or sped up in time.

28 of 84

Ways to Present a Scenario

Text paragraph
Storyboard (Comic book)
Video

29 of 84

30 of 84

Storyboarding

Quick
Versatile
Powerful

31 of 84

Storyboarding Steps

Decide What to Include
Build the Storyboard
Feedback & Iteration

32 of 84

Decide What to Include

Understand users, their backgrounds, and goals.
Understand the system and its features.
Put together a design team and brainstorm about the storyboard, preferably using a large whiteboard.
Identify people and artefacts in the storyboard.
Develop the storyboard scenarios.

33 of 84

Build the Storyboard

Break the story into smaller sections called frames or panes: Identify key "frames" from the scenarios while focusing each frame on an individual feature. Describe each frame in a short sentence. Draw a picture corresponding to each of these sentences.

Template: http://web.mit.edu/2.744/www/Project/Assignments/userExperienceDesign/storyboard_template1.pdf

Caption

Annotation

34 of 84

Build the Storyboard

Draw the user, the product and other important objects in each frame. Different frames may have different perspectives.
Use text for novel systems or for users' thoughts (balloons, bubbles) or reactions (callouts).
Include people when illustrating interaction.

35 of 84

Creating Storyboards

What can you say about this storyboard?

36 of 84

Feedback & Iteration

Gather internal and external feedback from stakeholders.
Iterate the storyboard design.

37 of 84

Guidelines and Tips

Focus on the vision (forget the details)

Use the minimal level of detail required to communicate the features of the system.
Control yourself by using paper and pencil first

Is it tedious? Yes, but this will force you to only draw the general story instead of details.

38 of 84

Guidelines and Tips

Get many alternatives instead of one
Focus on general ideas instead of details
Question: How to achieve this?

Use Thick Markers

Limit the amount of space

Time yourself

http://ui-patterns.com/blog/User-interface-sketching-tip-3-Use-a-thick-pen

39 of 84

Transform into Digital Form

Once the overall idea is clear, then translate it into digital form using bitstrip.com

http://bitstrips.com/create/comic/

40 of 84

Airbnb’s Storyboards

41 of 84

Airbnb’s Storyboards

42 of 84

Rapid Prototyping

43 of 84

The Purpose of Prototyping

Explore the design space
Deal with things that are hard to predict
Communicate

44 of 84

QUANTITY �vs. �QUALITY

45 of 84

Quantity vs. Quality?

46 of 84

Quantity vs. Quality?

46

“While the quantity group was busily churning out piles of work — and learning from their mistakes — the quality group had sat theorizing about perfection, and in the end had little more to show for their efforts than grandiose theories and a pile of dead clay”

- Art and Fear, by Bayles and Orland

47 of 84

Parallel vs Serial Approach

Prototype

SERIAL

PARALLEL

Feedback

48 of 84

Sample: Create an ad

48

Serial

Parallel

Final

49 of 84

Measures

How would you measure which method is more successful?

49

50 of 84

50

51 of 84

Users clicked Parallel ads at a higher rate than serial ads

51

52 of 84

Visitors from parallel ads spent

52

So not only did Parallel ads generate more visitors to the Ambidextrous website... those visitors spent more time on the client site

The result was marginally statistically significant, but notable, as provides some evidence that the parallel ads did better at reaching the target audience.

(Note, an ad designer could put something on the ad like “free iPod” to get people go click on it. This could artificially inflate the click-through rate, but it wouldn’t have as much of an effect on the time people spend on the Ambidextrous web magazine, because people who came for bad reasons would get bored quickly. The difference here shows that designers really are doing a better job at catching the attention of people who really would want to read the magazine.)

Image source and Text adapted from: Scott Klemmer (CS147, Fall 2010)

53 of 84

Experts rated Parallel ads higher than Serial ads

53

54 of 84

How did parallel�outperform serial?

55 of 84

Fixation in serial

“I tried to find a good idea, and then use that idea and keep improving it and getting feedback. So I’m pretty much stuck with the same idea.”

-Serial participant

56 of 84

Parallel ads are more diverse

56

57 of 84

The danger of critiquing one idea...

57

These researchers also found that designers who work on ideas in parallel respond more positively to critique. When designers work on a single idea, their ego gets invested in the quality of that idea. If someone tells them that their idea is bad, the designer might think they are a “bad designer.” If they have multiple ideas, then negative criticism to idea will more likely be seen for what it is. This avoids designer anxiety, and that’s important, because many people have shown that anxiety has a negative effect on performance.

The serial group participant shown on this slide used the following words to describe the experience of getting feedback on his one design:
“There was a short period where the emotional response overwhelmed any positive logical impact that this ended up having. These guys, you know, are telling me I am completely doing something wrong here. So, it took me a while to get past the ...I’m a failure at this....”

Researchers have known for quite a while that an individual’s excitement or anxiety can generally affect performance. This is an example of a negative effect.

Text adapted from: Scott Klemmer (CS147, Fall 2010)
Image source: Scott Klemmer (CS147, Fall 2010)

58 of 84

Designer Anxiety

“There was a short period where the emotional response overwhelmed any positive logical impact that this ended up having. These guys, you know, are telling me I am completely doing something wrong here. So, it took me a while to get past the ...I’m a failure at this....”

-Serial participant

59 of 84

“the companies that want to see the most models in the least time are the most design-sensitive; the companies that want that one perfect model are the least design sensitive.”� �Michael Barry

60 of 84

The Purpose of Prototyping

Explore the design space
Deal with things that are hard to predict
Communicate

61 of 84

Barrier to early testing

Integration of several modules is often necessary to accomplish realistic tasks
Databases may not be populated yet
Development can be unpredictable…

How can we get good feedback before a working version is available?

62 of 84

When building a prototype…

Time

…stay here if possible!

Learning / Communication

63 of 84

Prototyping Methods

63

64 of 84

64

… when Dorothy’s dog Toto pulls back a screen in a corner of the room, she finds a very unimpressive old guy controlling the floating green head with dials and levers. There’s the REAL Wizard!

John F. ("Jeff") Kelley used the terms "Wizard of OZ" and "OZ Paradigm" to describe the prototyping method he developed while doing his dissertation work at The Johns Hopkins University around 1980. (John’s dissertation advisor was Professor Alphonse Chapanis, the "Godfather of Human Factors and Engineering Psychology").

Jeff was working on speech recognition systems, and he had a problem. He needed to know how the interface would work before he would know what words the system should recognize. But he needed the recognizer to work before he could try out a user interface design!

Jeff’s solution was build a prototype that looked like a complete system, but it actually had a human being playing the part of the recognizer. This allowed Jeff to try out user interface designs before he had a working recognizer.

So you see, you can give users an interface that looks very impressive, even though it’s being controlled by a “man behind a curtain.” Amusingly enough, Jeff’s study actually had a curtain separating him (the "Wizard“), from view during the study.

Text adapted from: http://en.wikipedia.org/wiki/Wizard_of_Oz_experiment
Image 1 source: http://acidemic.blogspot.com/2010/07/great-acid-cinema-wizard-of-oz-1939.html

65 of 84

Wizard of Oz

An operator plays the role of “computer” and enters data “behind the scenes”
Useful for designers to test the concept of an idea without actual implementation
Often combined with mock-ups, paper prototypes and partially functional prototypes
Examples

Context-awareness
Speech recognition

66 of 84

Simulating a “voice navigation system”

67 of 84

Paper prototyping

67

68 of 84

68

Hanmail

Here’s a great video of a user interacting with a paper prototype of an e-mail application.

This example shows that you can do a lot more with paper prototypes than you might think.
You can use scrolling and sliding.
You can use other bits of paper as pop-up widgets.

The obvious reason to use paper prototyping like this is that it is a very fast way to create a prototype. (It’s also a fast way to modify a prototype. You can update a design in seconds, even during a user study!)

But what if you’re in a situation where sketching a paper prototype would take longer than slapping together something in PowerPoint, Photoshop, or raw HTML? Even if this is true, you might prefer to use a paper prototype, because it will influence the kind of feedback you get.

When you show users a polished-looking prototype, they tend to offer their opinions about issues related to polish. (E.g., “I don’t like the font.” or “This button looks like it should be 5 pixels to the left.”) As we said in the previous lecture, though, this kind of feedback is often less useful in the early stages of design. Using a paper prototype prevents people from giving feedback on issues related to polish. (No one is going to point out that your lines don’t look perfectly straight!) Using paper can help focus your users’ attention on the issues that matter most in early stages.

Note: If you MUST use a computer tool, you can get an informal feel from the Balsamiq prototyping tool (http://balsamiq.com/products/mockups). SMU has a site-license if you want to try it out! (https://smusis.mybalsamiq.com).

http://www.youtube.com/watch?v=GrV2SZuRPv0

69 of 84

69

70 of 84

Paper prototyping tools

Paper, Cardboard, Transparencies
Tape, Glue, Rubber Cement
Pens, Pencils, Markers
Scissors
Plastic Tubes, Paper Cups, CD “Coasters”
Anything that you can buy in an arts and crafts store

70

71 of 84

Paper Prototyping Videos

Paper prototyping with mobile devices

Paper prototyping with websites

http://www.youtube.com/watch?v=55D2nCJ1HZQ

71

72 of 84

Hybrid prototypes

If you are having trouble deciding…

73 of 84

Hybrid prototype: InkSeine

74 of 84

Hybrid prototype: InkSeine

75 of 84

Hybrid prototype: InkSeine

76 of 84

High-fidelity prototyping

76

77 of 84

10 minute mockup prototyping

http://www.youtube.com/watch?v=JjbeCkn0bJg

77

78 of 84

Choosing a prototyping method

78

79 of 84

Manage risk

Start with what you know the least about

Formulate the question(s) you need answered

Choose a method that’ll give you feedback

Every prototyping method has strengths and weaknesses

Digest what you’ve learned, make changes
Move on to the next thing you’re worried about

79

So in general, why do we create prototypes? The answer almost always has to do with reducing some kind of risk – the risk that the technology won’t work, that users won’t accept it, or whatever. And the key to it is to start by focusing on what you don’t know. Having been a software developer for 10 years, I can tell you that this is the opposite of what most developers want to do – it’s really tempting to get something running by first building the pieces are you more sure about, and then tackling the new stuff. But this is a recipe for nasty surprises late in the development process.
So here’s the view from 30,000 feet of how an iterative development process works. You start by making a list of everything you don’t know, or would like to know, or lie awake at night wondering about. Oh, and I am assuming here that you’ve gotten to the point where you either have an interface or are ready to design one. Now, sometimes my clients tell me they don’t know what they should be worried about, and I’m like, aha, so that’s your biggest risk. Other times they have a whole laundry list of questions.
And why do this? Well, it’s like Alice in Wonderland – she’s lost, and she asks the Cheshire Cat for help. He asks where she wants to go. She says I don’t know. He says, well, then any path will do. Same thing with research – if you don’t know what you want to find out, any method is equally good. But prototyping methods all have their strengths and weaknesses, so if you’re smart you’ll pick whatever method can answer your questions for the least amount of effort, and then you can move on to the next thing you’re worried about, until you run out of time and have to ship the product. 1:30

80 of 84

Start with your questions

Some questions are general

Does this work flow support the business goals?
Why do people say they can’t find things?
How much flexibility do users need?

Other questions are specific

Do people realizes it saves automatically?
What do they think of this feature?
Do they know what this icon means?

80

What I’d like each of you to do is jot down a few of your own questions about something you’re working on. I have some examples here to get you thinking… you might have big broad questions like “are we building the right thing?” or “do people like the overall concept of this product?” Or your questions might be very specific, down to the level of words or widgets on the screen. Or anything in between – don’t worry about classifying your questions as general or specific, just recognize that for any product there’s usually a whole spectrum. Also, it’s fine if you have completely different questions than your co-workers. In fact, for those of you who are attending with several people on the same project, I’m going to give you a homework assignment after this talk to combine all your questions and discuss what methods might be used to answer them.
:45

81 of 84

The rights of a prototype

Should not be required to be complete
Should be easy to change
Gets to retire

81

82 of 84

General Tips

If possible, try define your research questions first
All prototyping methods are good

It totally depends on your situation

Maximum feedback for minimum effort

What’s the simplest way I could mock up, simulate, fake…?

82

83 of 84

Task: How might we design a chair that keeps us engaged in online learning?

84 of 84

Asynchronous Activity

4 judges (tributes or volunteers)
Split your project group into 2 teams

1 feedback person
The rest are designers

Decide who will do parallel and serial