Roll up roll up roll up, for my Web Directions South 2010 Big Stonking Post™. A yearly wander through my impressions of WDS, hammered into an EEEpc and posted here for your enjoyment.

The usual notes: These are very raw notes - excuse typos, and if you need an exact quote I recommend checking the podcast. Anything marked "Aside:" is my own thought and not something the speaker said. Unattributed photos are mine.

Jump menu

Scott Thomas – Designing Obama

WDS10

(Photo by JJ Halans)

The Barack Obama campaign early on had no real design coordination so they hired people in to handle this. They were having simple problems like losing the white in the centre of the logo, which flipped the rising sun to a dark star – not cool, not good for the candidate.

Time – time pressure for everything. "we were truly building an airplane while in flight", what needed doing immediately was done immediately.

They created order in the chaos by setting clear and concise messaging:

  • Focus on "we" rather than the "he", make it the person's voice and not Obama's voice. This is unusual for political campaigns.
  • Keep the message of hope while dismantling the notion of being aloof.
  • Communicate the historic atmosphere by pulling from imagery of the past.
  • Establish a consistency and balance to exemplify stability and experience.

The old Obama website had no real consistency, "about 43 typefaces", not well directed. When they approached the website, they initially focused entirely on one page - the homepage - to get that sorted out first.

On the wireframe they set out a plan for what the real estate needed to accomplish – persuade, raise campaign funds, activate, localise, etc.

Very little space was devoted to social networks, because people who connect that way connect on those networks and not on the www site.

The website evolved to make it easier to access user-specific features/information. People did a simple login and then got a toolbar added on the top of the page. my.barackobama.com

A small team on the ground was the liason for the web team who were stuck in one place, in Chicago, and not on the road with the campaign.

One big challenge was getting people not only to read the site and know about Obama, but to actually register and vote. This is a major point of friction in the American system. So they set up the Vote For Change site to help get people registered. Instead of an obscure form, it was a series of plain english questions – one at a time. Although this perhaps doesn't gel with everyone's idea of usability, it was an attempt to ask questions the way humans do – one at a time, in a friendly way.

Layers of strategy – guiding people to register to vote in the contested states where they go to uni, rather than the blue/already-won state they originally come from.

"Of course doing anything simply requires a lot of complex though... lots of nights digging into post-it notes and eating burritos."

All of this helped make the election about the peoples' voice.

Aside: love the grid layout created on top of a photo of the Whitehouse!

Whitehouse.gov had huge amounts of legislation and restriction which made it hard to communicate in a modern way. They were not originally allowed to post videos on non-whitehouse servers – no youtube!

Scott finds himself asking, what do I do next?

Scott realised he wanted to capture the artwork created during the campaign, to create a book to make an artifact in history. He used kickstarter(.com?) to fund the project. He didn't want to go through the usual publishing process, because he didn't like that process...

As it happens the process was a ton of work, but the experience was priceless; and Scott controlled every part of the puzzle and realised the creative goal without interference.

You can read the book online at designing-obama.com

Q&A

Q: Did Obama ever get involved?
A: No, he was too busy. But they trusted the people they hired and that's how it worked. "It wasn't up to Barack Obama to select a shade of blue..."
Q: Does raising the bar for campaign design risk a blowback where it gets harder to repeat?
A: The message was authentic and that's why it worked... people trying to copy the process aren't doing it with an authentic, clear message so it's not just a matter of using Gotham...
Q: Were all the staff real Obama supporters or were some just there as professionals?
A: One of the final, key question in interviews was "what do you think about Obama?" and if they couldn't talk much about that, they didn't get hired. Scott believes that everyone involved honestly wanted to get Obama elected. When people started to follow the message they knew it was working...
Q: Did you get metrics back from the non-digital parts of the campaign?
A: They had field organisers reporting back into the online metrics system, to get the offline information into the system. They needed the numbers to be online to be able to use them quickly enough.
Q: What was your biggest failure during the campaign? ...and do red buttons work better than blue buttons?
A: Someone came and said they wanted a foam presidential seal and put the Obama seal on the shield. They knew they could do it, but the question was should they do it? Nobody was quite sure who could approve it, but they did it and put it in front of Obama at a press conference. People went off on a tangent thinking "Obama thinks he's already won, he's already forming a government..." Repercussions all the way through to it being brought up in the presidential debate. Big mistake! ...and actually red was superior to any other colour, it stood out on the page, it was their highlight colour.
Q: What do you think about how the current parties are putting out their message, including the tea party?
A: "I love the tea party, we needed comedy back in politics! ...but really, I'm not a political person, I'm a designer." Scott actually avoids consuming too much media, he tends to prefer political comedy to political news. It's more entertaining when Jon Stuart makes a joke and you get a little bit of news at the same time.

@simplescott

Silvia Pfeiffer – audio and video

silvia pfeiffer

Running the presentation in browser – "eating my own dogfood... but if anything breaks that's because we're on the leading edge of technology!"

  • Video: unfortunately you need to encode in at least two formats, mp4 and webm recommended.
  • Audio: same deal, mp3 and ogg. There are other formats supported in some browsers, but you can get coverage with the two.

How to encode these files? Open source ffmpeg command line tool is good; there are some GUI option as well, but it's also good for setting up a transcoding pipeline (it's what youtube uses, although their pipeline is quite complex)

Supporting older browsers... you must support the legacy browsers, but it's easy as you can put fallback content inside the audio and video elements. Browsers that don't support the elements will effectively ignore them.

You can use canPlayType() to check for codec support and use that to tailor the experience as well.

For live streaming on http use m3u8.

Video has a good js API – load, play, pause, move forwards and back through the video, change playback speed etc. You can create a rich set of custom controls and get a lot of information back from the video element. You can find out the buffered range; is it muted; is it seeking; etc. You can use video events and state as triggers – that allows things like custom progress bars.

Video + SVG demo – a custom control floating over a masked video. However SVG and video is very much a mixed bag due to inconsistent browser support. eg. Opera supports video inside SVG but others don't.

Video + canvas demo – can pull out tiles from a video being played. Similar to the exploding video demo. Also able to get an average colour from the video as it plays and change the surrounding background colour. Search for "ambient video" to see some neat demos. You can do reflections with the canvas; really the only current way to do it and ensure they are in sync.

Video + Web Workers – making use of the ability to throw a heavy/slow function to an independent thread – demo: face detection simply by finding the usual range of skin tones. It is a little slow because it's going to a delegated thread and that can create a noticeable delay.

Video + accessibility, <track> - track element goes inside the video element and you can place timed subtitles, chunked metadata etc. This is in the html5 spec, not finished yet and not ready for production but it is a standardised way to mark up audio and video captions. This will not only help accessibility it will be visible for SEO purposes. The controls also open up a space for chapter selection, multiple language caption support. Also you can provide audio descriptions for the blind. Being able to do this direct to screen readers is a new option compared with the older way of recording another audio track. Creating a textual transcript is easier than multiple audio tracks; and users can control the reading speed for the text descriptions to whatever they are comfortable with.

WebSRT is the baseline format for captions and audio descriptions. Intentionally similar to SRT files; yet a little different. The choice of format is still under discussion in the standardisation process.

@silviapfeiffer

Ben Shwarz – HTML5; building a better web

[Aside: I did the full workshop so my notes are a little brief.]

Kicking off with the timeline – going back to HTML 2 back in 1995 and a lot of browser development at the same time. But then things slowed down... and Ben realised he'd used the same markup standard for his whole professional life. In the same time he'd had about four computers and seven phones... why the lack of progress in the markup space?

Basically disillusionment with XHTML 1.1's practicality led to Ben and many others going back to HTML 4.01 and staying there. And then.... nothing happened. Until finally html5 came along.

W3C has a really hard job and do great work. However they're not people who build websites every day, with clients and deadlines. So they're concerned that the specs are acts of fiction. We have people who aren't designers building and promoting design features.

The WHATWG was largely a reaction to this. People from Opera/Apple/Moz got together and formed the WHATWG and went through the HTML5 spec to define and document it better. They also opened up the revision process and noted on each change who needs to take notice of the change – browser vendors, validators, editors. The revision history tool is a very powerful tool.

Specifications are very big, very detailed, very hard to read. They're built for browser vendors and not developers. HTML5 has a web developer edition, maintained by Mike(tm) Smith. This brings it down from 300k words to about 160k, which is much more approachable.

Frustrated even with the design, Ben and his business partner redesigned the spec pages to make them much nicer to read. Within four hours Paul Irish had forked the code and contributed a patch. Then it all went quiet for a long time, until he was put in touch with Mike Smith. They had a meetup and decided to push out the restyled edition – and Mike pushed it live during this presentation!

mike(tm) smith pushing the new design live...

It's off brand for the W3C and if Ben and Mike aren't taken out by W3C Ninja, next week hopefully it will be official.

html5 edition for web authors (before) → html5 edition for web authors (after/originally done with greasemonkey)

Feedback to the hashtag #html5author

Discussing Modernizr – good way to help you roll out html5 and know which features are supported. The classing system allows per-feature support, eg. restyle according to whether columns are supported or not.

Discussing the various session and offline storage... application cache, ApplicationCache.status returns 0-5, which is a set of status codes for things like uncached, idle, etc. Websql pretty much stalled out; but localStorage is pretty cool. Note that a) everything has to be stored as strings; and b) any browser with local storage has a native JSON parser; so you'll probably use stringify a lot...

You can also detect and bind events according to whether the browser is online or offline.

@benschwarz

Dan Rubin – html5 and css

dan rubin

Pimping up the developments in html and css, but particularly browser support. Even IE is getting exciting with IE9 shaping up to be a really good browser.

Patch support into legacy browsers with modernizr and selectivizr.

Media queries – best done in the CSS, many of the queries will only be needed for small adjustments and that's not worth the extra http hits. You can chain queries to meet quite specific needs, right up to checking for high resolution screens.

Aside: the hot technique buzzword is definitely responsive design.

Demo of really slick looking html5 podcast site - http://thebox.maxvoltar.com/ - including nice looking audio player...

Responsive design really isn't hard if you plan for it. Build it into your designs, anticipate the differences and make designs that are flexible.

Http://realworldcss3.com/resources/

@danrubin

Steve Souders – even faster websites

Steve Souders

(Photo by JJ Halans)

It baffled Steve that there was a whole lot of quantified data about how to make things faster but people weren't really getting into it.

Testing showed drops of satisfaction and clicks once search pages went past 2 seconds load times. Not only that but it also reduces operating costs if your code doesn't need as much hardware, bandwidth etc.

Q: Should you run Yslow or Page Speed? A: Both. They both check things you should know but neither one does everything.

The "number one take away today": webpagetest.org/test

Steve suggests an easy term to describe performance improvement... WPO: web performance optimisation. Drives traffic, improves ux, increases revenue, reduces costs.

What makes sites feel slow? Most websites don't practice progressive rendering. You get nothing until you get everything. Demo video shows sites racing each other, some sites are taking seriously long times to load.

Why focus on js? Because most browsers are blocking all other downloads and execution while each js file downloads and executes. Newer browsers are starting to download more in parallel but even then they're not downloading it all at once.

More annoying: a lot of js being loaded isn't used until after the page loads. That is, it could be lazy loaded. Page Speed can give you a list of functions that weren't loaded, which is a good guide to finding code that could be lazy loaded.

Several techniques to lazy load: XHR Eval, script DOM element, iframed js, defer js, document.write... but each has their own drawbacks.

Did a review of the top ten US sites and how they load js... 6.5 get a thumbs up.

Mobile and wifi give different profiles again. Mobile particularly gets weird as carriers are doing transcoding, intermediate js, image resizing, all kinds of stuff... and it's slow.

@souders

Josh Williams – where are we going

Started the presentation with an anecdote about proposing to his wife, using a series of letters to get her to go around a series of locations which were in some way significant to their relationship. She then created a scrapbook of the day so she could share the experience.

So now he's building Gowalla which is the same kind of thing – a way to share places of significance.

Josh created pixel art for icon factory, moved on through other projects to create Blinksale – "a billing solution we'd actually use ourselves" that had a sense of fun as well as solving a problem. It provided a "game like wrapper" to a fairly dry service.

Later created IconBuffet, a site which gave away some icons but in sets – some people got one set, others got another set... it became a game to trade the icons to get the full set and collect badges, which increased exposure – "tell your friends". They later found out fewer than 15% of the users actually used the icons for anything. They realised most people were just there for the community, not anything practical.

Causes uses game mechanics to encourage people to give to charity. Over $25m raised. But of course the question is should something serious be done via game mechanics? In any case it seems to work, at least enough to take notice.

PackRat – a game that expected users to play 1 hour a day... but they discovered to their alarm that people were spending 6-10 hours a day playing a virtual trading card game!

Then Farmville happened... they asked themselves if that was what they wanted to grow into. So they asked what to do next. At that point the iphone happened...

Josh had a moment where he rang his dad to rib him that he was at Lake Tahoe and his dad was stuck in Texas. That was the lightbulb moment where he imagined a checkin system that would track places and make a game style mechanic around exploring and connecting in the real world. If they could motivate people to sit in a chair for hours on end, could they motivate people to go out and explore the world?

Another source of inspiration was a charm bracelet his late mother created during a european tour when she was a student. A charm for each city and a story for every charm. His mother could recount the tales of the trip by pulling out the charm bracelet. So could that be done with an app?

They started putting in landmarks, sports stadiums, airports, places people could go to and share the story and take a picture.

Gowalla.... add go to a wallaby. No really! Inspired by the film Australia and the desire to have a cute mascot, and despite the "questionable quality" of the film... "but the cinematography was great!"

go wallaby

Gowalla, Josh acknowledges, was in the right place at the right time... hype is nice but the real world is better. They have to grow the service and work on it. He cautions against placing your trust in the future as described by great blogger social media gurus and visionaries... how do you separate fads from the future?

Fads like checking in, game mechanics, badges, geo-buzzwords. Josh advises to be careful not to look them as the answer to the web's problems, they're more like outcroppings of services being built right now.

We also face overload. There was so much info being shared, Twitter was noticeable when you were cut back to 140 characters and reduced the overload. Checking in however reduced it even further, to just saying where you were at the time. Very low friction.

Now people are checking in to tv, books, movies, games, even intangibles like checking in to states of mind. There is a very real risk of check in burnout. Now the question is how to bring value to the experience? An easy one is that if you check in you could win an ipad.

Badges and game mechanics are neat, but not new and they are subserviant to the service's actual value. People aren't going to respond to a meaningless email just to gain a badge.

What people are really into is social validation. They don't want a badge, really, but they like to brag to their friends that they visited another country. We like people to reply, comment, retweet, favourite our stuff.

Interesting service: Quora. Question and answer site with direct feedback... "it lights up as people respond.... it's like crack!"

Location in and of itself is boring – context and value matter. Checking in is a temporary solution to a more complex problem, the best we have right now. Similarly game mechanics aren't special sauce that makes everything tasty.

Mobile is the future of the web. Getting people to get up, go outside and yet take the web with them... it's a huge deal. Background services and passive applications are going to be a big part of how the web grows.

@jw

End of day one... whew!

Michal Migursky – let's see what we can see

managing the mess

From Stamen design, who did the digg visualiser and lots of other data/visualisation projects.

Data as choices – accepting data shaped by someone else's choices is a tacit acceptance of their world view (quote frmo mitchell whitelaw http://sta.mn/gb)

Dataviz can illustrate a problem – eg. of comprehension – as well as clarify a concept.

Problems vs. Messes – problems have solutions, but messes can only be managed.

Twitter has given people "permission to speak" in many contexts that were previously closed – MTV awards ceremonies, the olympics... pulling out the keywords from twitter gives a new perspective and voice. You can see what people are really saying and what issues are causing discussion (norweigan crazy pants at the curling...).

Showing a visualisation can reveal patterns and change the way people react to an event – anecdote about korean pop star Rain not getting into the top 12 in an awards visualiser taken from twitter keywords. His fans were complaining that he couldn't get in, so they bumped up the visualiser to top 13 to let him in. The fans then formed crazy theories about how it could have happened......

A challenge of visualisation is presenting combinations of information – including communicating data sets with variable precision. eg. Sea level measurement is not as accurate at all measurement locations, some just don't have the same precision. How do you include that into a visualisation? And how do you make combined data sets approachable, human, understandable? How do you make it personally relevant within a time scale that makes them comprehensible?

50% is the number that people can naturally and easily visualise, because it's the line between "ain't gonna happen" and "probably going to happen".

Crime trackers are popular because it's local information. However crime data can be skewed by the way the police report it – or don't. Example of a guy who reported an assault from home after the fact; and the crime was mapped to his home and not where the assault occurred. (Oakland crime tracker)

Data is the public good. http://sta.mn/qk5

How do you get data? How do you create it? ...use what's there. Use the information and technology people already have to create and gather more.

Crowdsourcing maps – OpenStreetMap, Walking Papers (where people print maps, draw and write on them then scan them back in)

http://sta.mn/gm

Data is messy but you can create ways to get useful data from the mess, guide and control the creation of the mess.

Last three points...

  • Know and choose where you get your raw material

  • problems and messes: know the differences, embrace the messes

  • look for the interesting in the merely complicated

Q&A

Q: How do you deal with responsibility, ie people using the data for the wrong reasons?
A: Generally quite lightly, they place a fairly high level of trust in people to do the right thing or at least be responsible.
Q: How do you deal with the ethical implications of presenting data in a certain way?
A: Biggest ethical consieration goes into the tidal gague information mapping... the ethical implications is to talk to the source of the data, to understand the limitations of the data and what level of accuracy it has.
Q: have you encountered privacy breaches due to the higher degree of granularity?
A: with the crimespotting project they essentially offload that to the police, to only make suitable data available. They don't show domestic or sexual crimes, for example; and they fuzz the location – they'll say "the hundred block of Main Street" and not a specific number. With the twitter stuff it's almost the opposite, since the start it's supposed to have been public – so it's a huge group of people that has been promised what they're doing is broadcasting to the public. They don't use Facebook data because it is ecumbered by the problems of starting private and drifting public.
Q: crime mapping could be useful to ciminals too... do you have a comment on that?
A: one of the things they saw early on was quite bizarre... most crime reports are based on the type of crime. They found with prostitution data there was an inversion... dead silence, then a series of arrests. You could see the times the squad went out and made arrests – literally across the space of a couple of hours. If you had access to that minute by minute, you might well know that you should run away. However with paperwork delays it comes through at least 24 hours later so it's not fast enough to be helpful.
Q: how are traditional media reacting to dataviz efforts?
A: actually really well. The producers of TV shows are reacting to the fact of the conversations taking place, and working it into their shows. They have to have some level of control for various reasons; but they're responding and reporting it even if it's broad "Rhianna is trending heavily on twitter right now".
Q: what was it like working with MTV and similar companies with regard to dealing with negative feedback/messages coming through?
A: actually quite well. They actually have a TJ (TwitterJ) in the pre-show reporting on twitter trends. They're finding the times through a broadcast that they'll allow negative comments to be broadcast in the actual show, although they're still less willing to push any of the negative stuff through.
Q: any roll on effects from the crime mapping? Do people scurry home at 9pm?
A: the biggest effect is how people relate to the police. People were going to meetings with the community beat officer informed by the data from the site. They were prepared to have a more informed discussion with the police.
Q: do you find that people come to you with an outcome in mind, or do they give you the data for you to sift through?
A: depends on the client. Some definitely have a message in mind, an idea they want to push and promote. Others, like MTV, just want "excitement" and information they can use during their show. Although generally they don't work with ad agencies and other groups with super-specific outcomes in mind. It's not really an ethical choice, just reflects the client base.
Q: do you have any ideas about ways to encourage governments to release data is in consistent/better formats/
A: probably the best way is to do useful things with what's already available, so they can see some value. If they release stuff and nobody does anything with it, they tend to be a bit discouraged and think nobody cares about the data. So we should use the data even if it's a bit inconvenient at this point. By demonstrating usage the sources may see the value and start releasing it in a more useful format.

@migursky

rapt

Mike Smith – html5 report card

Progress report on HTML5. Evaluating html5 (mike's grades are overall, some things are better, some worse):

  • ancillary materials (mike gives B-)
  • tools support (mike gives C+)
  • features specced
  • features implemented
  • accessibility

Ancillary materials

Some recommended resources:

Tools

HTML5 "the good parts"

  • syntax simplifications
  • html5 parsing algorithm
  • mathml and svg
  • new elements and attributes
  • new apis for scripting

Mike gives A+ to all of these.

  • design principles
  • maintain xhtml support

[Aside: Good simplification is the doctype – although a number would have been nice – short meta tags for encoding, etc. Bad simplification is sloppy syntax like unquoted attributes.]

Little known feature – context menus (eg. For right click). "Don't feel bad if you didn't know... even people on a browser project didn't know about it... I won't name which one..."

Related APIs: geo, device orientation/motion, files, selectors, audio

@sideshowbarker

html5 panel

I didn't take notes in this as it was a freeform session, although I will say if you missed it it's worth checking the podcast for a vintage John Allsopp rant!

html5 panel

Dmitry Baranovskiy - Raphaël

[Aside: get ready for some quotable quotes!]

You shouldn't really talk about Raphael... you should do things with Raphael.

"This is a great example... I would do it better of course..."

Why Raphael? Why was it created, why would you use it? We've heard lots about the awesome new features of html5, css3 etc... but welcome back to the real world, were IE6 is still alive and will be for a while.

If you want to create really amazing stuff with lots of interactivity, motion, rich media... Flash is generally considered the answer. But it has two big problems: you have to know quite a lot of stuff about it and you have to buy the software. Then of course you'll run into iphones and ipads...

Raphael meanwhile uses SVG, backed with VML in IE.

"I want you to remember this. Raphael doens't use canvas. Raphael doesn't use bloody fucking canvas!"

"VML is like the grandfather of SVG.... it's an amazing stinking pile of garbage."

However SVG and VML together work very well as a solution; they have a similar ideology even if the technology is different. Dmitry was able to bridge SVG and VML with Javascript. Raphael however can only support the crossover features that are in both SVG and VML.

Raphael is free, MIT license and will be forever, that's never going to change.

Android doesn't support SVG because it would make Webkit 1meg bigger. ....what?! "But if they can't do something the iphone guys can do... then I guess Android sucks!"

Using Raphael...

  • create canvas/paper, three ways to do it but you must create it to create things in it
  • then you can draw primitives – circle, rect, ellipse, image, text – and each of them has a set of attributes and functions
  • you can use attr with an object to do this in a more convenient way
  • you can then animate things, eg. From point to point; shape to shape
    • with the latest version of Raphael you can now chain animations without callbacks
    • there is a new syntax for animation now! W00t!

Next... you can create paths. Simple! ...but path strings are quite long and annoying. They represent points and paths to create shapes. M – move to, then a number for X and Y to move to; then L means line. Lowercase means relative, uppercase means absolute.

But much easier than doing things manually, you can pull paths out of any .svg file created in an editor.

In the new version of Raphael you can create custom attributes, which is a way to do unusual animations... although you do need to know some maths :(

Plugins... Raphael is pluggable, you can extend the paper or elements.

So, you can use Raphael. What can you actually do with it?

Charts!

"The computers are ruining our peoples." Since it became easier to print stuff, things aren't beautiful any more.

bad graph... good graph...

Charts are the same. Look at this chart... it's awful! It's terrible, but it was so easy to create. It's 3D, so can you tell the difference between segments at the top and bottom? The perspective distortion means you can't actually read it. "This is crazy chart. This chart makes no sense. Picture of Tom Cruise would be better."

If you draw it flat you can actually read it, which is what is was for! Maybe it doesn't look as fancy.... "fuck that!"

(showing a round colour picker) "There is nothing stopping you doing this. Just you! Because you still think in squares and rectangles."

Raphael site doesn't use any images... is that just for the sake of it? No, it's because the SVGs are smaller than the images would have been. Plus, they scale when you zoom in! ...and they look awesome if you print them, no pixelation!

(raphael icon set available for free)

Huge shout out to Lachlan for encouraging Dmitry to continue with Raphael.

"Web is not rectangular any more. Break this habit, take the red pill. Take two red pills."

Q&A

Q: I have a design background rather than js... how long would it take to get started, where should i go?
A: You should really learn js, but if you can pick up jQuery you should be able to pick up Raphael.
Q: is it accessible?
A: any screen reader that can read SVG will be ok, but that means we need screen readers to read SVG... but since it's a standard it should come through.

@RaphaelJS

Tim Harrison - Designers, designers, designers

WDX10

(Photo by JJ Halans)

Two things to remember: rainbows and number twos! These are the only two things you need to know about to do good design.

Tim went to the same art college as Joe Strummer... he figured if it was good enough for punk rockers, it was good enough for him.

Design became so easy that he thought... "even cavemen could do it". But then he realised humans have been designing things since cave men started chipping out stone tools.

Looking back from stone tools, to the wheel, to electricity, to the web, to the mobile web... the time between major steps is compressing. What's going to be next? ...and how soon?

In the list of top 100 inventions of all time, the iPhone was 8, over number 9 the flushing toilet. There's some priorities for you.

Tim worked on the iphone launch... hilarious photo of the iphone on a pedestal with people worshipping it... but the iphone did bring a different level of design quality to the mainstream – in terms of being a wildly successful product that was intentionally Well Designed.

"Design Thinking" as a standford university d.school principle... example of an ipad app that was rapid prototyped and highly successful in the marketplace.

So, should we be taking this stuff seriously? Yes.

McDonald's are starting design exercises to improve customer experience, and the stock price is going up in anticipation of the results.

The rainbow is all about experiences. (played the double rainbow video - "What does it meeeeeeeeeean?")

In the bigger picture we should be working out how to make things we build more exciting, life changing... more double rainbow. It's the ultimate user experience.

Design challenge at apple: designing mini-stores, to give the "full experience" in a very small space; and still have a functional store. Also there wasn't room for a window display; so they made the front all glass and put up backlit photos inside the store that you could see as you walked past.

The little stores took off so well, they amped it up to the bigger stores. They took the backlit photos through into the larger stores.

"What I'm talking about here is considering the impact of the WHOLE." Every detail of the experience is part of the experience.

Anecdote about challenging assumptions and attitudes – he was sent out with an art college assignment to draw pets/animals. Came back with nice sketches of pets and the tutor said no, no, go out and challenge your thinking. Draw your dog taking a dump instead, look for something a little more challenging.

We don't like to be challenged, we like to stay in our comfort zone. Fear is a strong motivator, both for action and inaction. Showed examples of quite disturbing anti-AIDS posters done in france, with people having sex with spiders and scorpions. It certainly got people to pay attention.

But the other way is Honda's hybrid, the second generation came out after the Prius was a success... and it looked exactly like the Prius instead of finding its own design path.

Some principles...

  • Pay attention to the details
  • Simplify - remove the crap
  • Focus – make it great
  • Cult-ivate – embed ethos

Odd attitudes and promotion points:

  • in .au things are labelled "fully imported"
  • in .uk things are just made in china.
  • UK's favourite word is no, US is yes... where's australia on that spectrum?

So now you know the secret formula...

rainbows + shit = awesome

Do you really need $2.4b to do things? No, you really don't, you need to be creative. (example – the safety dance, which probably cost $2 for an itunes track)

[At this point, the EEEpc reminded me I forgot to charge it at lunchtime and it gave up...]

And that brings us to the end of day two... where does the time go?!

Need more?

Official resources and podcasts: http://www.webdirections.org/events/#south10

From what I've heard since, I regret missing this one: James Bridle – Wrangling Time: The Form and Future of the Book | Web Directions ...here's hoping James comes back to WDS sometime!

Also, finally, a huge shout-out and thank you to Campaign Monitor for giving away an iPad... 64gig 3G no less... to me! Hell of a way to finish the conference! :)