good design faster at ux sofia

May 26, 2011Sofia

UX SofiaUX Sofia

Bulgaria

The problem

Clients want great experiences, and they want them faster.

Wireframes (our tools of choice)don’t work for this

typical

Wireframes (our tools of choice)don’t work for this

typical

Wireframes (our tools of choice)don’t work for this

typical

An approach inspired by the design studio...

http://www.flickr.com/photos/98736785@N00/1589941777/

1. Sketch and explore ideas

2. Bring lots of ideas together

3. Share and iterate with the team

16:30-17:00Bring lots of ideas together

What we’re going to do today

PEOPLE!

14:00-16:00Sketch and explore ideas

17:00-18:00 pmShare & iterate with the team

PEOPLE!

What do you want to accomplish today?

Activity #1: Tele-Pictionary

Create a“Stack of Stickies”(as many sheets as there are people at the table)

Think of an expression1. write the expression2. pass to neighbor3. read expression4. place sheet at bottom5 draw expression6. pass to neighbor7. check drawing8. place sheet at bottom9. GOTO 1

1. write the expression

5 draw expression

9. GOTO 1

Sketching hacks

Sketching with markers

Yellow marker

Fat

Regular

Small

Gray marker

Sharpie markers

Start here

More attention

Depth:Pop forward

Push back

Look at me!

Tips for design sketching

Use markers and pens, not pencils;our goal is Fast, not perfect

If you mess up, keep going

If you really mess up, grab a new page

ACTIVITY ONE:Trick #1: highlighting

Build-a-Bike

Courtesy of Rachel Glaves

ACTIVITY ONE:Trick #2: line weight

Courtesy of Brandon Schauer

ACTIVITY ONE:

Courtesy of Rachel Glaves

Trick #3: shading / warm gray

ACTIVITY ONE:

1. Fill a page with overlapping rectangles

2. Hold the page up for the group to see

3. Pass it to your neighbor, then choose one rectangle and color it yellow

4. Pass it to your neighbor, then outline 3-4 rectangles with the fat sharpie

5. One more pass! Shade in 3-4 rectangles with the gray marker ... or add some shadows

INSTRUCTIONS

Activity #2: Sketching Boxes

It’s not about HOW to sketch, but WHAT to sketch

Exploratory sketches

Wildly varied

Meaningful only to you

Low fidelity

Unsubtle

Refinement sketches

More realistic

Interpretable by others

Higher fidelity

Within a framework

Tips for sketching screens: helpful patterns

Header

Tab

User Picture

Photo

Video

Filler text

Pop-upModule

ArrowsLarger ones can

communicate weight, or act as labels

Side-scrolling Module

Drop ShadowsCommunicate depth and

bring attention to callouts or popup boxes

Calendar

Page curl

Mouse CursorQuietly indicates a

rollover state

CalloutsCan show alerts, help, guidance or

sketch annotations

Trick #4: 6-Up Template

HOW TO:

1. Draw the first things you think of

2. Then, think about opposites

3. Also, think about other goals of the experience

Trick #5: 1-Up Template

HOW TO:

1. Use line weight

2. Use shading

3. Use highlights

3. Use labels

Let’s try it out

your personal SHOPPER &NUTRITIONIST &

CHEF &FOODIE.

ACTIVITY ONE:

INSTRUCTIONS

Activity #3a: Exploratory Sketching

1. Using a 6-up template, sketch 6 new ideas for the same problem.

2. Put your first ideas down.

3. If you get stuck, think about opposites.Or, think about design principles.

ACTIVITY ONE:

INSTRUCTIONS

Activity #3b: Refinement Sketching

1. Pick the most promising ideas from your 6 sketches. (Which one was it?)

2. Using the 1-up template, sketch a higher fidelity version that brings it all together.

3. Go back over your sketch with a sharpie and add line weight, shading, and labels to make it even clearer.

(пауза)

30 minuteBREAK

2. Bring lots of ideas together

“A new buzzword for a blatantly obvious technique” —danny.hope

Enter Sketchboards

A healthy sketchboard has depth and breadth

STEP ONE: get a large sheet of paper

In this case, size matters

STEP TWO: give it some structure

The structure can change (Trick #6: use stickies to keep it flexible)

STEP THREE: add inputs

Include anything that drives your thinking

STEP FOUR: fill it with sketches!

Trick #7: The incredible drafting dot

ACTIVITY ONE:

Working as a group, use sticky notes to structure your sketchboard. Tape up your inputs, and any sketches that you’ve done so far in each section.

INSTRUCTIONS

Activity #4: Assemble a Sketchboard

3. Share and iterate with the team

Share with the team

How? X

Team Review

ACTIVITY ONE:

1. Discuss your sketches as a group.

2. Decide which sketches are the most viable direction (consider your inputs).

3. Do additional sketches as necessary to fill in holes and evolve the design.

INSTRUCTIONS

Activity #5: Review the Sketchboard

Tips for getting good feedback

ACTIVITY ONE:

1. Working quickly, add a stickie to the sketchboard for every question or concern that you have

2. As a group, talk through the stickies, and decide how to improve the design to address issues raised

3. Resketch as necessary

INSTRUCTIONS

Activity #6: Black Hat session

Bringing it all together

The 5-day sprint

Sketchboards are just a jumping off point

Front Office

Back Office

Customer Action

The 5-day sprint

Tips for iterating sprints

Your “Sprint Kit”

Sketchboards: Discover Better + Faster UX Solutionshttp://www.adaptivepath.com/ideas/essays/archives/000863.php

6-up and 1-up Templateshttp://www.ugleah.com/ux-team-of-one/

Peter Boersmapeter.boersma@adaptivepath.com

Resources to get you started

Thanks toLeah BuleyBrandon SchauerRachel GlavesKate Rutter

Thank you!You were awesome!Thank you!You were awesome!