Behind the kimono

33
BEHIND THE KIMONO WEB2.0 @ZAKIWARFEL MESSAGEFIRST DESIGN SECRETS REVEALED @RUSSU HAPPY COG

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

Page 1: Behind the kimono

BEHIND THE KIMONOWEB2.0 @ZAKIWARFEL

MESSAGEFIRST

DESIGN SECRETS REVEALED@RUSSUHAPPY COG

Page 2: Behind the kimono

OUR WORKWe don’t show...

Page 3: Behind the kimono

DESIGNERS DO IT

Page 4: Behind the kimono
Page 5: Behind the kimono

DEVELOPERS DO IT

Page 6: Behind the kimono
Page 7: Behind the kimono

HAVE YOU EVER SEEN A WIREFRAME FROM

jjgpeter morvillejared spool

Page 8: Behind the kimono

peter morville

Page 9: Behind the kimono

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

Page 10: Behind the kimono

JARED SPOOL

“I’ve never done a wireframe.”

Page 11: Behind the kimono

WIREFRAMING/PROTOTYPINGWhat’s the best tool?

Page 12: Behind the kimono

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

Page 13: Behind the kimono

OUR WORKWe don’t show...

Page 14: Behind the kimono

NOT SO ANONYMOUS COWARD

“My work is proprietary.”

Page 15: Behind the kimono

NUT UP OR SHUT UP

Page 16: Behind the kimono

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

Page 17: Behind the kimono

THE APPROACH

Page 18: Behind the kimono
Page 19: Behind the kimono
Page 20: Behind the kimono

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

Page 21: Behind the kimono

INSPIRATION LIBRARY

Page 22: Behind the kimono

SKETCHING

Page 23: Behind the kimono

...AND MORE SKETCHING

Page 24: Behind the kimono

PITCH AND CRITIQUE

Page 25: Behind the kimono

VISUAL DESIGN

Page 26: Behind the kimono

PITCH AND CRITIQUE

Page 27: Behind the kimono

HTML PROTOTYPE

Page 28: Behind the kimono

HTML PROTOTYPE

Page 29: Behind the kimono

PITCH AND CRITIQUE

Page 30: Behind the kimono

FIREWORKS PROTOTYPE

Page 31: Behind the kimono
Page 32: Behind the kimono

PRINCIPALS.sketch (a lot)

.practice critique

.the best tool is the one you know

Page 33: Behind the kimono

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