Kill your darlings: Solving design by throwing away prototypes

Download Kill your darlings: Solving design by throwing away prototypes

Post on 16-Jul-2015

249 views

Category:

Design

4 download

Embed Size (px)

TRANSCRIPT

  • Kill Your Darlings Solving Design by Throwing Away Prototypes

    March 24, 2015

    Joe Sokohl

    @RegJoeConsults @MojoGuzzi

  • What Well Talk About

    A brief history of wireframing

    The benefits of prototyping

    Why throw away your work?

    A case study showing a redesign process as an archetypal and practical approach

    !2@RegJoeConsults

  • !3@RegJoeConsults

  • !3@RegJoeConsults

    http://deneroff.com/blog/wp-content/uploads/2012/01/Futureworld-02.jpg

  • !3@RegJoeConsults

  • !4@RegJoeConsults

  • !4@RegJoeConsultshttp://www.fastaanytimelock.com/Frank-Lloyd-Wright-Falling-Water-Site-Blueprint-by-BlueprintPlace.html

  • !4@RegJoeConsults

  • !5@RegJoeConsults

    http://en.wikipedia.org/wiki/Prograph

  • !6@RegJoeConsults

    http://www.levenez.com/NeXTSTEP/InterfaceBuilder.jpg

  • !7@RegJoeConsults

  • !8@RegJoeConsults

  • !9@RegJoeConsults

    version 28!

  • !10

    PrototypesCats and dogs living together

  • What is a prototype, anyway?

    !11@RegJoeConsults

    Representa)ve model or simula)on of the nal system

    Todd Zaki Warfel,Prototyping: A Prac//oners Guide

  • Why Should We Prototype?

    !12@RegJoeConsults

    Reduced risk Smaller systems Less complex systems Reduc)on in creeping requirements Improved visibility

  • Why Should We Prototype?

    !13@RegJoeConsults

    Genera)ve Show, tell & experience Reduc)on of misinterpreta)on Savings in )me/eort/money Reduc)on of waste Real-world value

  • !14@RegJoeConsults

  • !14@RegJoeConsults

    taken to design meetings where they are used to provide a physical reference for discussion and analysis.

  • !15@RegJoeConsults

  • !15@RegJoeConsults

  • !16

    Throwaway versus EvolutionaryWhich do we use?

  • 17@RegJoeConsultshttp://www.flickr.com/photos/rosenfeldmedia/3978302604/

    Cycle of Design

  • 17@RegJoeConsultshttp://www.flickr.com/photos/rosenfeldmedia/3978302604/

    As I see it, knowing how to prototype, test, and evaluate results quickly is the most valuable skill for designers of persuasive technology. BJ Fogg, Crea)ng Persuasive Technologies: An Eight-Step Design Process

    Cycle of Design

  • The Perils of Prototyping

    Which is harder to change: a program with 1000 lines of code or a 1000 square foot slab of concrete? The concrete is ten inches thick and has steel reinforcing rods

    criss-crossing within it. Every cubic foot of it weighs almost 100 pounds.

    The software has almost no physical existence at all. It weighs nothing. It consumes no space. A few microamps and those bits flip from zero to one without a second glance.

    !18@RegJoeConsults

    http://www.cooper.com/journal/2008/05/the_perils_of_prototyping

  • The Perils of Prototyping

    Which is harder to change: a program with 1000 lines of code or a 1000 square foot slab of concrete? The concrete is ten inches thick and has steel reinforcing rods

    criss-crossing within it. Every cubic foot of it weighs almost 100 pounds.

    The software has almost no physical existence at all. It weighs nothing. It consumes no space. A few microamps and those bits flip from zero to one without a second glance.

    !18@RegJoeConsults

    http://www.cooper.com/journal/2008/05/the_perils_of_prototyping

    The answer to my question seems a simple one, doesnt it?

  • !19@RegJoeConsults

    This is the first one. This is it exactly. This is my hand-wired prototype, not a real Apple I or Apple ][ PC board. There are 4 white 2KB EPROMs on the upper board - that's how I developed BASIC and all the other routines of the Apple I. This is an Apple ][ prototype. I can tell by how few chips it is. The Apple I had a computer board attached to my video terminal board, in the prototype stage." __Steve Wozniak

    hTp://www.geekculture.com/joyoWech/joystu/apple1cake/rstapple.jpg

  • Use evolutionary prototypes (EVPs) when

    User requirements are (almost) defined. Few interaction and visual design problems exist, and information architecture is defined.

    UX team is highly experienced. UXers also create the deployable front-end code. Usability testing is summative, not formative. Project requires little documentation.

    !20

  • Use throwaway prototypes (TAPs) when

    User requirements are ill-defined. Major interaction or visual design (or both) issues remain, and the IA is not well defined.

    You have less experienced UXers. UX does not do development. Usability testing is formative and occurs multiple times throughout the project.

    Project requires detailed documentation.

    !21

  • 22@RegJoeConsultshttp://www.flickr.com/photos/rosenfeldmedia/3978302604/

    Sketching vs. Prototyping

    Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design

  • !23@RegJoeConsults

    TAP TAP/EVP

    EVPTAP

    Paper

    Axure

    Macaw/Webow

    Fireworks/Sketch/Photoshop/Illustrator/InDesign.

    HTML/JS/CSS

    Balsamiq/ iPlotz/iMockup... + Firm Reqs Vague Reqs

    + Design Details

    Design Details

  • !24

    Melding sketches, quick wireframes, and prototyping

    Case Study

  • The Project: Redesign site into a modern, user-centered experience

    !25@RegJoeConsults

    From this To this

  • We Did

    Heuristic analysis Data analysis Market research analysis Personas Mood boards & visual design User journeys/scenarios

    !26@RegJoeConsults

  • Mobile First

  • Mobile 2

  • Digital Exploration

    !29

    Carrier 12:00 PMPage Title

    http://www.domain.com Google

    Up to 150% of amount purchased

    Up to 150% of amount purchased

    Up to 150% of amount purchased

    Trip interruption protection

    Trip interruption protection

    Trip interruption protection

    Trip interruption protection

    Trip interruption protection

    1 2 3

    1 Classic w/Trip +

    2 Classic

    3 Basic

    $356

    $326

    $256

    Benefits Coverages

  • !30

    Desktop sketch

  • ..

    !31

  • More Realized Sketches -- Version 1

    !32

  • More Realized Sketches -- Version 2

    !33

  • Prototyping in Axure (but it could be anything)

    !34@RegJoeConsults

  • !35

    Many thanks!

    Joe Sokohl

    joe@RegularJoeConsulting.com

    @RegJoeConsults