The idea presents itself, and its all hands on deck getting the app built. Most developers will spend some time thinking about the real needs of the target audience, and the best methods for fostering a community. But how can you be sure you truly understand what the audience needs, and how can you legislate for where the community might take your app. Simon will present a number of proven methodologies for audience research, modeling and grouping - and discuss the impact the results can have on the development process. He'll also look at the importance of designers and developers working collaboratively within the process. Presented at Future Of Web Apps Tour, Leeds, May 2009

1. KNOW YOUR AUDIENCE
THE ART OF COLLABORATION
Simon Collison
ERSKINE DESIGN

2. CASE STUDY
THE VANILLA PAGES

3. Video clips removed for slideshow. Sorry folks...

4. RUBBISH!
AND NOW WE’VE UPSET MOBY

8. IF YOU
BUILD IT
THEY WON’T
NECESSARILY
COME

10. {
COLLABORATE
RESEARCH
PROCESS
ORGANIC DEVELOPMENT
REPEAT
ROADMAP
PROTOTYPING
TESTING
LAUNCH
ITERATE

11. ANYONE
CAN ADD
VALUE

12. ORGANIC, COLLABORATIVE PROCESS

13. AGILE / WATERFALL / SPRINT

14. AUDIENCE
GROUPING
AND
ACTIONS

15. http://www.logovisual.com
LOGO VISUAL THINKING (LVT)

21. PROJECT SPACE

22. RESPONSIBILITY
TO THE
COMMUNITY

23. Trust in the the website and information source.
Brevity and swift delivery of information
Retrieval of information and value very quickly.
Understanding the context of the page and website.
Looking for calls to action or next steps.

24. Domain name, branding and design.
Integrity - verification through links and profile.
Sources - evidence of findings.
Volume - the more you write...
Voice - what are you providing, and who is it for?
Duration - match content to intended audience and subject.
Custodians - about the authors and their experience.

25. FEATURES ROADMAP
Parallels with good writing...
Elmore Leonard tried to “leave out the parts
that people skip”
George Orwell called it “transparent writing”
– or text that lets you see the subject without
noticing the words that convey it.

26. CONVENTIONS
AND
THE ULTIMATE PACKAGE

28. <!— META —>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="description" content="" />
<meta name="author" content="Erskine Design" />
<meta name="Copyright" content="" />
<!— TITLE —>
<title>Climb the mountains</title>
<!— CSS —>
<link href="assets/css/screen.css" type="text/css" rel="stylesheet" media="screen" />
<!—[if IE 6]><link href="assets/css/screen-ie6.css" type="text/css" rel="stylesheet"
media="screen" /><![endif]—>
<!—[if IE 7]><link href="assets/css/screen-ie7.css" type="text/css" rel="stylesheet"
media="screen" /><![endif]—>
<!— JS —>
<script type="text/javascript" src="assets/js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="assets/js/onload.js"></script>
<!—[if IE 6]><script type="text/javascript" src="assets/js/ie6.js"></script><!
[endif]—>
<!— RSS —>
<!— FAVICON —>
Railscast theme for Textmate: http://railscasts.com/about

29. /*
CLIMB THE MOUNTAINS by ERSKINE DESIGN
VERSION 1.0
CONTENTS —————
1.BODY
2.DEFAULT STYLING
3.HEADINGS
4.LINKS
5.IMAGES
6.LAYOUT
7.BRANDING/MASTHEAD
8.NAVIGATION
9.SITE INFO AND FOOTER
10.GLOBAL ELEMENTS
10.1 CAPTIONED IMAGE
10.2 ELEVATION
11.HOMEPAGE
11.1 CONTENT PRIMARY
11.2 CONTENT SECONDARY
11.3 CONTENT TERTIARY
*/
@import url(reset.css); /* RESET CSS */
Railscast theme for Textmate: http://railscasts.com/about

30. /* 10.GLOBAL ELEMENTS
——————————————————————————————————— */
/* 10.1 CAPTIONED IMAGE —————— */
div.captioned_image { position:relative; }
div.captioned_image p.caption { position:absolute; bottom:0; left:0; margin:0;
background:rgba(0,0,0,0.5); color:#fff; font-size:13px; line-height:16px; font-
style:italic; padding:5px; }
/* 10.2 ELEVATIONS —————— */
div#route_elevation { background:#dff1f1; background-position:0 bottom; background-
repeat:no-repeat; position:relative; }
div#route_elevation ul { list-style:none; margin:0; font-size:9px; }
div#route_elevation ul li { margin:0; position:absolute; }
div#route_elevation ul li a { color:#333; display:block; background:url(../images/
site/elevation_marker.png) no-repeat 0 5px; padding:0 0 0 15px; }
div#route_elevation ul li a:hover,
div#route_elevation ul li a:focus { color:#000; }
div#route_elevation ul li a img { display:none; }
div#route_elevation ul li a:hover img,
div#route_elevation ul li a:focus img { display:block; width:40px; height:40px;
padding:4px 9px 10px 12px; position:absolute; top:-16px; right:-65px;
background:url(../images/site/marker.png) no-repeat 0 0; }
Railscast theme for Textmate: http://railscasts.com/about

31. A
SINGLE
FOCUSED
DESIGN
PATH

33. PROTOTYPE
FEEDBACK

35. ANTICIPATE
COMMUNITY USE
AND MARKETING

36. Johnny Ball launches
‘Facebook for skills’
Reference to www.skillstories.org

37. Thanks
Simon Collison
erskinedesign.com
colly.com
@collylogic