rapid design & experimentation for user-centered products :: ux days tokyo [april 2015}


Hello!@katerutter

tweet-friendly


3 big trends

✓Cycle time is getting faster

✓UX design moving from implementation to envisioning new value

✓UX design is a team sport


Trend 1

✓Cycle time is getting faster


risk

timeDefine

The old way

Desig

n

Develop

Relea

se

via @seriouslynow


risk

timeDefine

a better old way

Desig

n

Develop

Relea

se

via @seriouslynow


risk

time

A different way via @seriouslynow


BUILD

MEASURE

LEARN

More cycles in less time reduces risk.

faster!


Trend 2

✓UX design moving from implementation to envisioning new value


Features

Users

Uses

Product

Needs

via @luxrco

sketches, prototypes, wireframespixelsUI

Company Purpose

Your vision & ideas

UX is a stack


Trend 3

✓UX design is a team sport.

what we say blah

blah blahblah blah blah

blah blah

what they hear


UX designers invent a lot...wireframes

design studio

sketchboards

sprints

task flows

UI sketches

prototypes

task models

personas

affinity diagrams

content strategy

content strategy journey maps

storyboardscluster diagrams

conceptual models

Content models

Empathy maps

Experience maps

Mental models

Process diagrams

Scenario mapsScenarios

Sitemaps

Style guides System mapsTask grids

Usability reportsUser journeys

User story maps

user storiesmetadata schema

design stories

* and much, much more...


What this means

✓Design & ship smaller & faster

✓Explore new ideas faster

✓Collaborate across many roles & disciplines faster


How can we work...

✓ faster✓simpler✓ together


Ways to Design Faster512


9simple

methods

Sketch people Flows

Dump 2x2 sort Dot-vote

Timebox Quiet readWork at the wall

Sketch UI


5simple tools


Sketch people

By sketching a quick picture and describing it with just a short phrase, you can come up with many human-centered ideas quickly.

✓Stay focused on the human experience

✓Generate many ideas quickly

✓ Itʼs fun


Sketch people




✓ Itʼs fun

Simple materials


Sketch people




✓ Itʼs fun

✓ You can draw a picture of a person in 4 simple steps...

Star people

1 2 3 4


Sketch people




✓ Itʼs fun

✓ Use simple shapes show context.


Sketch people




✓ Itʼs fun

✓ With only 2 parts of the face, you can get a range of emotions.

Expressions Matrix

9 circles

add eyes

3 mouths

2 kinds of eyebrows

9 emotions!


Sketch people




✓ Itʼs fun

✓ A talk bubble makes the picture clear.


Sketch people




✓ Itʼs funvia @glaves


Sketch people




✓ Itʼs funVia Alexa Andrzejewski

Foodspotting


Sketch people




✓ Itʼs fun


Sketch people




✓ Itʼs funhttp://bit.ly/sketchingpeople

Video examples here:


Sketch people

How...


Why...

Use when...

✓ Get a sharpie and white paper.

✓ Use the 4-step Star Person technique to quickly sketch a person.

✓ Use the Expressions Matrix to show the emotion they are having.

✓ Use basic shapes (to put the person in a context or environment.

✓ Add a text or thought bubble to show their words or thinking.

✓ Add a 1-line sentence describing the scenario.

Sketching is fast. It activates many parts of the brain: pictures, words, hand-eye coordination. You get more and better ideas from you and your team.

You need to show the human experience of your product.

With some simple tips, anyone can sketch a picture of a person in an experience.


Sketch UI

By sketching multiple UI ideas fast, you force ideas out of your head so that you can get feedback on them quickly.

✓Rapidly work out an idea


✓Validate ideas with others


Sketch UI





Via Adaptive Path


Sketch UI






How...Why...

Use when...Sketch UI


Sketching is fast. You can explore many more ideas quickly.

Keeping it low-fidelity puts the focus on the idea, not on the “polished” details.

Exploring ideas for interface and interactions.

Annotations provide clarity and reduce the time spent explaining the ideas.

✓ Get a sharpie and white paper and draw an outline of a screen (web or mobile.)

✓ Add items that could be on the interface: Text, buttons, image boxes, navigation.

✓ Make notes in the margins to describe the item or how it functions.

✓ Use heavier lines for more focus (contrast draws the eye).

✓ Add yellow highlights to identify the most important parts.


Flows

Putting multiple pictures together can tell a very detailed story very quickly.

✓Quickly connect ideas into a story

✓Prototype interactions

✓ Identify & fill gaps


Flows





Storyboards

Via Brandon Schauer


Flows




✓ Identify & fill gapsVia Adaptive Path

Storyboards


Flows




✓ Identify & fill gapsVia https://wordsofasuperheroine.wordpress.com/tag/airbnb/

Storyboards


Flows





UI flows

Via Adaptive Path


Flows





UI flows

Via @glaves


Flows





Showing action

Via @glaves


How...Why...

Use when...

✓ Arrange items (people sketches, UI sketches, stickynotes) in a sequence.

✓ Connect the parts with arrows if needed.

✓ Rearrange the order of items to identify new and different stories.

✓ Identify and fill any gaps in the sequence.

✓ Document the flow with a photo or revised digital image.

Flows


Seeing how things connect helps you optimize a sequence of events, shows dependencies, and prevents isolated ideas.

Communicating a series of things that happen in order or over time.

Helps identify logic gaps, and shows how multiple ideas form a coherent narrative.


✓Externalize thinking

✓Quickly generate many different ideas

✓Push past the basics

Dump

This is an all-purpose way to get information out of your head, so that you can organize it and make decisions.





Dump


~ Linus Pauling Nobel Prize-winning Biochemist

If you want to have

good ideas you must

have many ideas.

http://en.wikiquote.org/wiki/Good

http://en.wikiquote.org/wiki/Good

http://en.wikiquote.org/wiki/Ideas

http://en.wikiquote.org/wiki/Ideas





Dump


Storyboards





Dump


Via Adaptive Path


How...Why...

Use when...Dump


✓ “Dump” the items by writing one item per stickynote, or making one sketch per idea.

✓ If youʼre doing this as a team, each person makes their own set of ideas.

✓ Keep generating ideas until you have at least 10. Force yourself to get to 10+ ideas.

✓ Donʼt overthink it; if you have an idea, write it down. Donʼt judge it (that comes later.)

✓ Use Sharpies so that the ideas are easy to see at an arms length, and stay concise & simple.

Gets all the ideas out of your head very quickly. Kills the censor! Opens up the generative part of your brain.

Coming up with ideas, exploring many options, or when the ideas in your head are messy and freaking you out.

Works great in a team.


✓Set simple criteria for decision-making

✓Organize lots of ideas quickly

✓Easily find top picks

2x2 sort

A quick technique for sorting many items based on simple criteria.





2x2 sort


Simple materials





2x2 sort


StoryboardsSet up your 2x2✓ Decide on 2 sets of parameters

Common pairs:Important Less importantUrgent!! ! ! ! Less urgentEasy!! ! ! ! ! HardHigh value!! ! ! Low valueSelf! ! ! ! ! ! ! Delegate





2x2 sort


Storyboards✓ Make a big + on the wall with tape





2x2 sort


Storyboards✓ Label the end points. Put the optimal ones on the top and right.

Easy

Hard

UrgentLess Urgent





2x2 sort


Storyboards✓ Place your items (stickies, sketches)

Easy

Hard

UrgentLess Urgent





2x2 sort


Storyboards✓ Step back and review

Easy

Hard

UrgentLess Urgent

Do these first

Donʼt do these at all!

Prioritize or reconsider

Prioritize or reconsider





2x2 sort


Storyboards✓ Bonus: stack-rank!

Easy

Urgent





2x2 sort


Storyboards





2x2 sort



How...Why...

Use when...2x2 sort


✓ Make a + on the wall or table with tape (blue tape works great.)

✓ Decide on 2 sets of parameters and label the axes: each end point should be two related opposites. Put the most optimal quadrant on the upper-right.

✓ Plot all the ideas (sketches, stickies), placing them in the appropriate quadrant. Stack duplicates.

✓ Force decisions: at least 1/2 the ideas should be below the horizontal axis.

✓ Focus on the optimal quadrant, and order the ideas (stack-rank.)

Each quadrant allows you to make batch decisions about which items to pursue.

Focuses the discussion on the important ideas.

There are lots of ideas to prioritize and decide on.

Use as a team when there is agreement on the important parameters.


✓Everyone gets a voice

✓Clearly shows items with most support

✓Make decisions very quickly

Dot-vote

A technique that allows you to pick top options and quickly see (without discussion) which ideas have the most agreement.





Dot-vote


Simple materials

+ a bunch of ideas





Dot-vote


StoryboardsHow it works





Dot-vote


Storyboards





Dot-vote


Via http://www.gamestorming.com/core-games/dot-voting/


How...Why...

Use when...Dot-vote


✓ Everyone gets a set number of dots (3-4 is usually sufficient.)

✓ Each person places their dots on the items they feel have the most merit. You can put more than one dot on an item.

✓ After voting, everyone can clearly see the items with the most dots; these are the top items.

✓ If you donʼt have dots handy, use colored markers to make the dots.

Having multiple votes relieves the anxiety of picking only one choice.

Helps everyone see natural agreement.

There are multiple options and you need to pick the best ones to pursue.

This method can be used solo, but works best in a group.


✓ Break down complex tasks into small chunks

✓ Deadlines = hyperfocus!

✓ Immediate feedback improves your time management skills

Timebox

A short, set period of time for fast-focused work.





Timebox


focusFocus

FOCUS!(with short,

task-oriented outcomes)





Timebox


Storyboards

✓ 25 minute focus time✓ 5 minute break✓ longer break every 4 pomodoros

Via http://pomodorotechnique.com/





Timebox


✓ Write down one simple thing to get done✓ 10 minute focus time✓ 2 minute check-in: did you finish? ✓ Set the next goal & repeat

1 small thing

Personal version


How...Why...

Use when...Timebox


✓ Pick a task to accomplish.✓ Pick a time span. For

generating ideas, 10-20 minutes is a good amount. Shorter is better.

✓ Jot down a specific, discrete item you want to complete during the timebox.

✓ Set a timer and focus on completing the task.

✓ When the timer rings...did you finish the item? If so, move to the next one. If not, take a moment to reflect on why, then set a new task and repeat.

Timeboxing provides an artificial forcing function that helps focus your work and gives immediate feedback on small chunks of progress.

Anytime you need to get things done.

Use in team sessions to keep on track and use time effectively.


✓ Forces externalization of ideas

✓ Reduces prep time

✓ Keeps the conversation focused on questions and decisions

Quiet read

A collaboration method that helps your team stay focused on asking questions and making decisions, not on pitching ideas.





Quiet read


http://www.keepcalm-o-matic.co.uk/p/keep-quiet-and-read/





Quiet read






Quiet read


Bezos Narratives

Via http://fortune.com/2012/11/16/amazons-jeff-bezos-the-ultimate-disrupter/





Quiet read



How...Why...

Use when...Quiet read


✓ Post all the work in a visible place.

✓ Without talking, spend 2-10 minutes reading all the material to get familiar with what others have created.

✓ After the quiet read, people can pose questions or prompt discussion.

Keeps teams from presenting ideas too early, and helps people practice externalizing ideas so that others can understand without explanation.

You have a lot of detailed information coming from many contributors.

Use as a team when you have very talkative people involved.


✓ See many ideas at once, see the big picture

✓ Makes comparisons faster

✓ Focus on ideas instead of persuasion

Work at the wall

Working at the wall changes the dynamics of collaboration and allows discussion to focus on ideas instead of persuasion.





Work at the wall


Via Adaptive Path





Work at the wall



How...Why...

Use when...Work at the wall


✓ Post all your work on a wall (sketches, printouts, stickynotes.)

✓ Step back: assess the big picture & the details.

✓ Host discussions, annotate and add/remove items.

✓ Make decisions at the wall & arrange the information to show what was decided.

✓ Take a photo and send it to all participants to document the discussion and decisions.

Decision-making gets easier when everyone can see the ideas and information all at once in a physical place.

Information is complex and there are many variables.

Use as a team when there are diverse perspectives and decision-makers.


How can we work...

✓ faster

✓ simpler

✓ together

Sketch people Flows



Sketch UI


512


themagic of remixing

Sketch people

Flows

Dump 2x2 sort

Dot-vote

Timebox

Quiet readWork at the wall

Sketch UI


Personal productivity

=Dump

+2x2 sort

+Timebox


Dump

Feature prioritization

=+

2x2 sort+

Work at the wall

+Quiet read

Dot-vote+


Sketch UI Flows+

Work at the wall+

Sketchboards

=


Rapid lo-fi prototyping

=+FlowsSketch UI

Timebox+


Sketch peopleSketch UI+

Flows+

Dot-vote

+

Design sprints

=+Work at the wall Timebox

+


Where to go to lunch

=Dot-vote

+Dump


Sketch people Flows



Sketch UI

2=9+

+ + +

+ ++

+

+

+

+

+


512Ways to work

faster + simpler + together


How will YOU work fast?


Sketch people Flows



Sketch UI

✓ Pick 3 new ways to work.✓ Write them down.✓ Commit to doing these in

the next week.✓ Timeboxed at 1 minute!


When it all works...We rapidly deliver products thatdelight, that inspire and thatimprove the lives of the people who use them.


Thanks!Slides (with details about each technique) will be available at:www.slideshare.net/intelleto

Kate [email protected]@katerutter

Thanks & credits to:Adaptive Path [http://adaptivepath.com]Alexa Andrzejewski [http://flavors.me/ladylexy] Brandon Schauer [http://brandonschauer.com/]Gamestorming [http://gamestorming.com]Janice Fraser [http://clevergirl.com]Luxr [http://luxr.co]Leah Buley [http://ugleah.tumblr.com/]Luke Wroblewski - tweet [http://lukew.com]Pomodoro [http://pomodorotechnique.com/]Rachel Glaves [http://about.me/rachelglaves]Tim McCoy - risk model [@seriouslynow]Tradecraft [http://tradecrafted.com]https://wordsofasuperheroine.wordpress.com/tag/airbnb/