Behind the kimono

Post on 14-Jun-2015

911 views 2 download

Tags:

description

Slides from my Web2.0 NYC talk giving a behind the scenes look at the design process we use at my design studio, messagefirst.

Transcript of Behind the kimono

BEHIND THE KIMONOWEB2.0 @ZAKIWARFEL

MESSAGEFIRST

DESIGN SECRETS REVEALED@RUSSUHAPPY COG

OUR WORKWe don’t show...

DESIGNERS DO IT

DEVELOPERS DO IT

HAVE YOU EVER SEEN A WIREFRAME FROM

jjgpeter morvillejared spool

peter morville

discover new approachesexpand your knowledge build your expertise

StrategyLeadershipOrganizational changeInformation & technologyGlobal business

Decision makingInterpersonal skillsProject managementManaging uncertaintyTime management

Business processesManagement by objectivesQuality managementForecastingKnowledge management

explore hbr

storecart

accountdownloads

today on hbr authorsblogs current

magazine books HBS

logo search

discover new approachesexpand your knowledge build your expertiseexplore hbr

storecart

accountdownloads

today on hbr authorsblogs current

magazine books HBS

logo search

1. Today on HBRThis new page highlights timely content from the blogs, magazine, and books sections.

2. Store areaThis area provides a focal point for all e-commerce related links.

3. AuthorsThis new page allows users to find aggregated links to content from popular authors across blogs, magazine, and books sections.

4. Explore drawerThis expandable area encourages and facilitates exploration of content by subject.

5. Expand your knowledgeThis area features editorially selected sub-categories from the current “Topics” category in search results.

6. Build your expertiseThis area features editorially selected sub-categories from the current “Management Skills” category in search results.

7. Discover new approachesThis area features editorially selected sub-categories from the current “Tools & Methodologies” category in search results.

8. “More” linksThese links drive users interested in exploring further to dedicated landing pages.

Global NavigationSeptember 24, 2009

Web Redesign | Harvard Business Review

Version 1.0

discover new approachesexpand your knowledge build your expertise

StrategyLeadershipOrganizational changeInformation & technologyGlobal business

Decision makingInterpersonal skillsProject managementManaging uncertaintyTime management

Business processesManagement by objectivesQuality managementForecastingKnowledge management

explore hbr

storecart

accountdownloads

today on hbr authorsblogs current

magazine books HBS

logo search

12

Default state

Partially expanded state

Fully expanded state

43

6

more skills »more topics » more methods »8

5 7

Jesse James Garrett

jjg

JARED SPOOL

“I’ve never done a wireframe.”

WIREFRAMING/PROTOTYPINGWhat’s the best tool?

YOU’RE MISSING THE POINTIf you’re still arguing about wireframes vs. prototypes

OUR WORKWe don’t show...

NOT SO ANONYMOUS COWARD

“My work is proprietary.”

NUT UP OR SHUT UP

I’VE HAVEN’T WORKED FROM A REQUIREMENTS DOCUMENT IN OVER 5 YEARS

THE APPROACH

5DWLQJV +LJK���DGGUHVV�DV�VRRQ�DV�SRVVLEOH

0HGLXP����DGGUHVV�DIWHU�SULRULW\��

/RZ���DIWHU�SULRULW\���DQG�LI�WKHUH�LV�WLPH�LQ�GHYHORSPHQW�F\FOH

)XWXUH���FRQVLGHU�IRU�D�IXWXUH�YHUVLRQ�RI�WKH�SURGXFW

���

���

���

���

*ORVVDU\

�&RPSLOHG�7DVN�$QDO\VLV

&DOO�+LVWRU\���&RPSLOHG�7DVN�$QDO\VLV

6XE�7DVNV

6FHQDULR

3DLQ�3RLQWV

)XQFWLRQDOLW\

&RQVLGHUDWLRQV�,QIOXHQFHUV

&KHFNLQJ�YRLFHPDLO�LV�WHGLRXV�DQG�WLPH�FRQVXPLQJ��,�ZDQW�D�V\VWHP�WKDW�LV�TXLFN��FRQYHQLHQW��DQG�HDV\�IRU�RQFH�

-HQQ\�UHWXUQV�KRPH�IURP�D�ZHHNHQG�DZD\��6KH�ZDONV�LQ�WKH�GRRU��SXWV�GRZQ�KHU�EDJV�DQG�WDNHV�D�ORRN�DURXQG��(YHU\WKLQJ�DSSHDUV�WR�EH�ULJKW�ZKHUH�VKH�OHIW�LW�

&KHFNLQJ�IRU�PLVVHG�FDOOV�DQG�YRLFHPDLO�LV�ODERULRXV�DQG�LQFRQYHQLHQW�

&DQ�,�EH�QRWLILHG�WKDW�,�PLVVHG�FDOOV�ZKLOH�,�ZDV�DZD\"�,V�LW�TXLFN"�,V�LW�HDV\"�'R�,�QHHG�DQ\�VSHFLDO�HTXLSPHQW"�+RZ�PXFK�GRHV�LW�FRVW"

-HQQ\�ZDONV�LQWR�WKH�RIILFH�WR�FKHFN�WKH�FDOOHU�LG�OLJKW�RQ�KHU�SKRQH�WR�VHH�LI�DQ\RQH�FDOOHG�ZKLOH�VKH�ZDV�DZD\��

9LHZ�FDOO�KLVWRU\�VWDWXV�7KH�FXVWRPHU�FDQ�YLHZ�WKH�VWDWXV�RI�ZKHWKHU�RU�QRW��V�KH�KDV�DQ\�QHZ�PLVVHG�FDOOV��

,�KDYH�WR�JR�WR�P\�RIILFH�WR�VHH�LI�DQ\RQH�FDOOHG��&KHFNLQJ�IURP�WKH�URDG�LV�HYHQ�PRUH�ODERULRXV�DQG�LQFRQYHQLHQW��

&����

���

9LHZ�QHZ�PLVVHG�FDOOV�KLVWRU\�7KH�FXVWRPHU�FDQ�YLHZ�WKH�FDOO�KLVWRU\�IRU�QHZ�PLVVHG�FDOOV��

&����

���

9LHZ�IXOO�PLVVHG�FDOO�KLVWRU\�7KH�FXVWRPHU�FDQ�YLHZ�WKH�HQWLUH�FDOO�KLVWRU\��LQFOXGLQJ�QHZ�DQG�SDVW�PLVVHG�FDOOV�

&����

���

9LHZ�IXOO�LQFRPLQJ�FDOO�KLVWRU\�7KH�FXVWRPHU�FDQ�YLHZ�WKH�HQWLUH�LQFRPLQJ�FDOO�KLVWRU\��LQFOXGLQJ�DOO�PLVVHG��DQVZHUHG��DQG�IRUZDUGHG�FDOOV��

&����

���

9LHZ�VLPLODU�RU�GXSOLFDWH�FDOOV�7KH�FXVWRPHU�FDQ�YLHZ�LI�DQ\RQH�SODFHG�D�GXSOLFDWH�FDOO�WR�PRUH�WKDQ�RQH�SKRQH�

&����

���

&DQ�,�EH�QRWLILHG�TXLFNO\�WKDW�VRPHRQH�LPSRUWDQW�FDOOHG�ZKLOH�,�ZDV�DZD\"�

-HQQ\�FKHFNV�WKH�YRLFHPDLO�LQGLFDWRU�DQG�VHH¶V�WKH�QXPEHU�VL[��6KH�NQRZV�VKH�KDG�VDYHG�VRPH�PHVVDJHV��EXW�GRHVQ¶W�NQRZ�KRZ�PDQ\��

+RZ�PDQ\�RI�WKH�PHVVDJHV�DUH�QHZ"�:KLFK�RQHV�DUH�LPSRUWDQW"�&DQ�,�SLFN�D�VSHFLILF�PHVVDJH�WR�OLVWHQ�WR"�:KLFK�PHVVDJHV�QHHG�LPPHGLDWH�DWWHQWLRQ"

9LHZ�YRLFHPDLO�VWDWXV�7KH�FXVWRPHU�FDQ�YLHZ�WKH�VWDWXV�RI�ZKHWKHU�RU�QRW��V�KH�KDV�DQ\�QHZ�YRLFHPDLO�

&����

���

9LHZ�QHZ�YRLFHPDLO�OLVW�7KH�FXVWRPHU�FDQ�YLHZ�D�OLVW�RI�QHZ�YRLFHPDLO�PHVVDJHV�ZLWK�WKH�QDPH��QXPEHU��DQG�GDWH�WLPH�RI�HDFK�YRLFHPDLO��

&����

���

9LHZ�IXOO�YRLFHPDLO�KLVWRU\��7KH�FXVWRPHU�FDQ�YLHZ�WKH�HQWLUH�YRLFHPDLO�KLVWRU\��LQFOXGLQJ�QHZ�DQG�SDVW�YRLFHPDLOV��

&����

���

9LHZ�VLPLODU�RU�GXSOLFDWH�PHVVDJHV��7KH�FXVWRPHU�FDQ�YLHZ�LI�DQ\RQH�ZKR�OHIW�D�GXSOLFDWH�YRLFHPDLO�RQ�PXOWLSOH�SKRQHV��RU�HPDLO�IRU�D�VLPLODU�PHVVDJH��

&����

���

&DQ�,�FKHFN�TXLFNO\�WR�VHH�LI�,�KDYH�DQ\�PHVVDJHV�ZDLWLQJ"

-HQQ\�VHHV�WKHUH�DUH�IRXU�QHZ�YRLFHPDLO�PHVVDJHV��7KH�VHFRQG�QHZ�PHVVDJH�LV�IURP�KHU�PRWKHU��6KH�ZRXOG�OLNH�WR�OLVWHQ�WR�LW�ILUVW�

/LVWHQLQJ�WR�YRLFHPDLO�LV�WLPH�LQFRQYH�QLHQW�DQG�WLPH�FRQVXPLQJ��:K\�FDQ¶W�,�OLVWHQ�WR�D�VSHFLILF�PHVVDJH�ZLWKRXW�OLVWHQLQJ�WR�WKH�RQHV�EHIRUH�LW"�'R�,�KDYH�WLPH�WR�OLVWHQ�WR�WKH�PHVVDJHV�QRZ"

$FFHVV�WKH�YRLFHPDLO�V\VWHP�7KH�FXVWRPHU�DFFHVVHV�WKH�YRLFHPDLO�V\VWHP�WR�OLVWHQ�WR�QHZ�PHVVDJHV��

&����

���

6HOHFW�D�YRLFHPDLO�IRU�SOD\EDFN�7KH�FXVWRPHU�UHYLHZV�WKH�OLVW�RI�PHVVDJHV�DQG�UHODWHG�LQIR�DQG�VHOHFWV�D�PHVVDJH�WR�SOD\��

&���

���

3OD\�PHVVDJH�8SRQ�VHOHFWLRQ��WKH�PHVVDJH�DXWRPDWLFDOO\�EHJLQV�SOD\EDFN�

&����

���

0HVVDJH�QRWHV�7KH�FXVWRPHU�FDQ�SODFH�QRWHV�DQG�RU�D�GHVFULSWLRQ�QH[W�WR�WKH�YRLFHPDLO���XVHIXO�ZKHQ�UHWXUQLQJ�RU�VDYLQJ�WKH�FDOO�

&����

���

6HW�PHVVDJH�SULRULW\�DQG�RU�UHPLQGHU�7KH�FXVWRPHU�FDQ�VHW�D�SULRULW\�OHYHO��GXH�GDWH��DQG�RU�UHPLQGHU�IRU�WKH�PHVVDJH��2YHU�WLPH��WKH�V\VWHP�OHDUQV�DQG�VHWV�WKHVH�DXWRPDWLFDOO\�

&����

���

6DYH�PHVVDJH�7KH�PHVVDJH�LV�DXWRPDWLFDOO\�VDYHG�LI�WKH�FXVWRPHU�GRHVQ¶W�GHOHWH�LW�

&����

���

'HOHWH�7KH�FXVWRPHU�GHOHWHV�WKH�PHVVDJH��7KH\�VKRXOG�EH�DEOH�WR�SHUIRUP�WKLV�DFWLRQ�DW�DQ\�WLPH�GXULQJ�WKH�PHVVDJH�SOD\EDFN�

&����

���

5HZLQG�DQG�IDVW�IRUZDUG�7KH�FXVWRPHU�FDQ�UHZLQG��DQG�IDVW�IRUZDUG�WKURXJK�WKH�PHVVDJH�GXULQJ�SOD\EDFN��

&����

���

)RUZDUG�PHVVDJH�7KH�FXVWRPHU�FDQ�IRUZDUG�WKH�PHVVDJH�WR�DQRWKHU�QXPEHU�RU�HPDLO�DGGUHVV�

&����

���

&DQ�,�OLVWHQ�WR�D�VSHFLILF�PHVVDJH"�&DQ�,�OLVWHQ�WR�WKH�PHVVDJH�TXLFNO\"�&DQ�,�VDYH�RU�GHOHWH�WKH�PHVVDJH�EHIRUH�LW�LV�FRPSOHWHG�SOD\LQJ"

-HQQ\�VHHV�WKDW�KHU�JUDQGPRWKHU�FDOOHG��EXW�GLGQ¶W�OHDYH�D�YRLFHPDLO��VKH�W\SLFDOO\�GRHVQ¶W�OHDYH�PHVVDJHV�

&KHFNLQJ�IRU�PLVVHG�FDOOV�LV�LQFRQYHQLHQW�DQG�WLPH�FRQVXPLQJ��&DQ�WKH�V\VWHP�KHOS�PH�GHWHUPLQH�ZKLFK�FDOOV�QHHG�WR�EH�UHWXUQHG"

9LHZ�QHZ�PLVVHG�FDOO�KLVWRU\�7KH�FXVWRPHU�FDQ�YLHZ�WKH�QHZ�PLVVHG�FDOOV�KLVWRU\�

&����

���

9LHZ�FDOO�SULRULW\�VWDWXV�7KH�FXVWRPHU�FDQ�YLHZ�WKH�SULRULW\�LPSRUWDQFH�RI�D�FDOO�WR�KHOS�WKHP�GHWHUPLQH�ZKLFK�FDOOV�QHHG�WR�EH�UHWXUQHG��

&����

���

'HOHWH�7KH�FXVWRPHU�FDQ�GHOHWH�PLVVHG�FDOOV�IURP�WKH�PLVVHG�FDOO�KLVWRU\��

&����

���

&DQ�,�FKHFN�P\�PLVVHG�FDOOV�TXLFNO\�DQG�FRQYHQLHQWO\"�&DQ�,�TXLFNO\�GHWHUPLQH�ZKLFK�FDOOV�,�QHHG�WR�UHWXUQ�WKDW�GRQ¶W�KDYH�YRLFHPDLOV"

2QH�RI�-HQQ\¶V�IULHQGV�FDOOHG�IURP�KHU�QHZ�PRELOH�SKRQH��-HQQ\�ZDQWV�WR�DGG�WKH�QXPEHU�WR�KHU�DGGUHVV�ERRN�

.HHSLQJ�DOO�P\�GHYLFHV�LQ�V\QF�LV�GLIILFXOW��+RZ�FDQ�,�NHHS�P\�PRELOH�SKRQH�DQG�HPDLO�DGGUHVV�ERRNV�LQ�V\QF"

$GG�WR�DGGUHVV�ERRN��XSGDWH�LQ�DGGUHVV�ERRN��7KH�FXVWRPHU�FDQ�DGG��XSGDWH��D�QDPH�DQG�QXPEHU�LQ�WKH�DGGUHVV�ERRN��

&����

���

6\QF�DGGUHVV�ERRN�7KH�FXVWRPHU�FDQ�V\QF�WKH�DGGUHVV�ERRN�DFURVV�KRPH�SKRQH��PRELOH�SKRQH��HPDLO��HWF�

&����

���

&DQ�,�DGG�WKH�QHZ�QXPEHU�WR�P\�DGGUHVV�ERRN�TXLFNO\�DQG�HDVLO\"�,I�DQ�HQWU\�DOUHDG\�H[LVWV��FDQ�,�XSGDWH�LW�HDVLO\"�&DQ�,�V\QF�WKH�DGGUHVV�ERRN�ZLWK�P\�PRELOH"

-HQQ\�KDV�D�OLVW�RI�FDOOV�WR�UHWXUQ��(DFK�LWHP�KDV�WKH�QDPH��QXPEHU��DQG�D�IHZ�EULHI�QRWHV�DERXW�WKH�FDOO��

+RZ�GR�,�NQRZ�ZKDW�HDFK�FDOO�LV�DERXW"�+RZ�ZLOO�,�NQRZ�WKDW�,¶YH�UHWXUQHG�D�FDOO��RU�PDUNHG�LW�IRU�³FDOO�EDFN�ODWHU"´

5HYLHZ�FDOO�EDFN�OLVW�7KH�FXVWRPHU�FDQ�UHYLHZ�D�FDOO�EDFN�OLVW��RUGHUHG�E\�SULRULW\��DQG�ZLWK�QRWHV�IRU�HDFK�FDOO��

&����

���

'R�,�KDYH�HQRXJK�WLPH�WR�UHWXUQ�DOO�WKHVH�FDOOV�QRZ"�:KLFK�FDOOV�VKRXOG�,�UHWXUQ�ILUVW"

-HQQ\�UHYLHZV�WKH�RUGHU�RI�FDOOV�VKH�QHHGV�WR�PDNH�DQG�UHWXUQV�WKH�SKRQH�FDOOV�VKH�FDQ�QRZ��VDYLQJ�WKH�RWKHUV�IRU�ODWHU�

+RZ�GR�,�NHHS�WUDFN�RI�ZKLFK�FDOOV�,¶YH�UHWXUQHG"�'R�,�KDYH�WR�XVH�VRPHWKLQJ�HOVH�WR�UHWXUQ�WKH�FDOOV"

5HWXUQ�FDOOV�7KH�FXVWRPHU�FDQ�UHWXUQ�FDOOV�IURP�ZLWKLQ�WKH�PHVVDJH�FHQWHU�

&����

���

0DUN�FDOO�DV�UHWXUQHG�2QFH�D�FDOO�KDV�EHHQ�UHWXUQHG��WKH�PHVVDJH�LV�DXWRPDWLFDOO\�PDUNHG�DV�UHWXUQHG��

&����

���

'R�,�KDYH�HQRXJK�WLPH�WR�UHWXUQ�WKHVH�FDOOV�QRZ"�

%HIRUH�6FHQH

7KH�VSDUH�EHGURRP��RIILFH��RI�-HQQ\¶V�WZR�EHGURRP�WRZQKRPH�LQ�VXEXUEDQ�,QGLDQDSROLV��

-HQQ\�FRPHV�KRPH�IURP�D�ZHHNHQG�DZD\�DQG�ZDQWV�WR�VHH�LI�WKHUH�KDYH�EHHQ�DQ\�LPSRUWDQW�SKRQH�FDOOV�RU�PHVVDJHV�WKDW�VKH�PLVVHG��6KH�VHHV�WKH�YRLFHPDLO�LQGLFDWRU�RQ�KHU�SKRQH�DQG�EHJLQV�WKH�OHQJWK\�SURFHVV�RI�FDOOLQJ�DQG�OLVWHQLQJ�WR�KHU�YRLFHPDLO��

$IWHU�6FHQH

7KH�VSDUH�EHGURRP��RIILFH��RI�-HQQ\¶V�WZR�EHGURRP�WRZQKRPH�LQ�VXEXUEDQ�,QGLDQDSROLV��

-HQQ\�FRPHV�KRPH�IURP�D�ZHHNHQG�DZD\�DQG�ZDQWV�WR�VHH�LI�WKHUH�KDYH�EHHQ�DQ\�LPSRUWDQW�SKRQH�FDOOV�RU�PHVVDJHV�WKDW�VKH�PLVVHG��6KH�ORRNV�DW�KHU�&RPFDVW�0HVVDJH�&HQWHU�'DVKERDUG�VKH�TXLFNO\�VHHV�WKDW�VKH�KDV�ILYH�QHZ�YRLFHPDLOV��7KURXJK�WKH�&RPFDVW�0HVVDJH�&HQWHU¶V�GDVKERDUG��VKH�LV�DEOH�WR�VHH�WKDW�WKH�WKLUG�YRLFHPDLO�LV�IURP�KHU�PRWKHU�DQG�SOD\V�WKH�PHVVDJH�LQVWDQWO\��

)XWXUH�6FHQH

7KH�VSDUH�EHGURRP��RIILFH��RI�-HQQ\¶V�WZR�EHGURRP�WRZQKRPH�LQ�VXEXUEDQ�,QGLDQDSROLV��

-HQQ\�FRPHV�KRPH�IURP�D�ZHHNHQG�DZD\�DQG�ZDQWV�WR�VHH�LI�WKHUH�KDYH�EHHQ�DQ\�LPSRUWDQW�SKRQH�FDOOV�RU�PHVVDJHV�WKDW�VKH�PLVVHG��6KH�ORRNV�DW�KHU�&RPFDVW�0HVVDJH�&HQWHU�'DVKERDUG�VKH�TXLFNO\�VHHV�WKDW�VKH�KDV�ILYH�QHZ�YRLFHPDLOV��7KURXJK�WKH�&RPFDVW�0HVVDJH�&HQWHU¶V�GDVKERDUG��VKH�LV�DEOH�WR�VHH�WKDW�WKH�WKLUG�YRLFHPDLO�LV�IURP�KHU�PRWKHU�DQG�SOD\V�WKH�PHVVDJH�LQVWDQWO\��7KH�&RPFDVW�0HVVDJH�&HQWHU¶V�SUHVHQFH�LQGLFDWRU��-HQQ\�FDQ�VHH�WKDW�KHU�PRWKHU�PD\�QRW�EH�KRPH��EXW�KDV�KHU�FHOO�SKRQH�ZLWK�KHU��-HQQ\�FDOOV�KHU�PRWKHU�EDFN�RQ�KHU�FHOO�SKRQH�

-HQQ\�UHWXUQV�KRPH�IURP�D�

ZHHNHQG�DZD\�

-HQQ\�FKHFNV�WR�VHH�LI�DQ\RQH�

FDOOHG�ZKLOH�VKH�ZDV�DZD\�

-HQQ\�FKHFNV�WR�VHH�LI�DQ\RQH�

OHIW�D�YRLFHPDLO�PHVVDJH�

-HQQ\�OLVWHQV�WR�KHU�

YRLFHPDLO�

-HQQ\�FKHFNV�IRU�PLVVHG�FDOOV�

VKH�QHHGV�WR�UHWXUQ�

-HQQ\�DGGV�WKH�FDOOHU�WR�KHU�

DGGUHVV�ERRN��

-HQQ\�UHYLHZV�KHU�OLVW�RI�FDOOV�

WR�UHWXUQ�

-HQQ\�UHWXUQV�KHU�SKRQH�

FDOOV�

TASK ANALYSIS GRID

INSPIRATION LIBRARY

SKETCHING

...AND MORE SKETCHING

PITCH AND CRITIQUE

VISUAL DESIGN

PITCH AND CRITIQUE

HTML PROTOTYPE

HTML PROTOTYPE

PITCH AND CRITIQUE

FIREWORKS PROTOTYPE

PRINCIPALS.sketch (a lot)

.practice critique

.the best tool is the one you know

http://bitly.com/protobk THANKS!SAVE 25% WITH DISCOUNT CODE TODD