Designing all the things (Twitter’s Josh Brewer at Design+Startup)

First Round Capital’s +startup speaker series was recently featured in Pando Daily and I summarized the first Design+Startup talk from IDEO’s London based design director Tom Hulme on SneakerheadVC. If you missed it, check it out the first Design+Startup talk here.

The second talk at our San Francisco event brought Josh Brewer, Principal designer at Twitter, to the stage to talk about Designing All The Things. Josh talks about the evolution of design since 2007 — moving from web sites to web apps to today’s world where a designer’s job feels like fighting a multi-headed monster because we have to deliver product experiences across a multitude of devices and platforms in a consistent way.

Check out the video to learn how to deliver a delightful, meaningful experience that has your users coming back for more regardless of the device they are on or how they access your service. I have also included a detailed summary below so no need to take notes, just enjoy the talk and don’t miss the guest appearance from Henry Winkler about 6 minutes in…

Start mobile first

Some stats:

• 371,124 children are born every day

• 1.27M iOS and Android devices are sold or activated every day (3.4/child)

• Nearly half of all US adults are now smartphones (meaning it is the dominant device)

• Since 2009, Facebook’s mobile traffic has grown from 13% to 50% (note the thumbs up from the Fb designer in the crowd at 4:16)

• Over 60% of Twitter’s traffic comes from mobile

• More than 70% of Pandora’s traffic comes from mobile

• 66% of Google’s mobile search comes from iOS

• eBay accounted for 50% of all mobile commerce in the US and 70% came from iOS

• in 2011 smartphone sales surpassed PC phones for the first time

It is the mobile era so build mobile first using the principles of responsive web design so you can design and build things that scale from a feature phone all the way up to Android or iPhone running mobile web or native app… but at the same time, focus on iOS because there is a more engaged user base who spend more money.

Identify constraints

Looking at business needs, mental models from the market, limits in your product and current use cases.

• Twitter’s 140 characters is not going to change

• Instagram’s square photo — landscape vs. portrait, do you crop or not crop — nope, it is going to be a square.

• constraints gives designers more focused problems to solve and give users less to think about

Think in terms of flows & paths

• Linear site maps were the traditional guides for information architecture but that is not necessarily how humans think and act — most humans are not linear or predictable.

• Let the story create the interface and organize the product. How will people use this, what is the narrative as they flow through your product?

• Narrative brings out emotion and emotion makes people want to come back to your product

• Read Understanding Comics by Scott McCloud for more on story telling

Sketch, sketch, sketch

• Sketching early products before getting into Photoshop or production allows you to see things way earlier and have much deeper understanding of the product before you build it

• Involve product managers, engineers, even your CEO etc.

• The goal is to get ideas out of your brain for others to see and respond to

• Print your sketches out and stick them on the wall so you can receive feedback

Prototype

• Static design is just theory — how do you know if the screen you just designed will do anything that you think it will do?

• Build your ideas (designers should code!) so you know how it will behave

• Interaction designers should understand the full interaction, not just the look

• We design for behavior, we design things that get responses, we design interaction so you have to build the thing and then talk about how it feels to use it

• “Design is not just what it looks like and feels like. Design is how it works.” -Steve Jobs

Build responsive component systems

• Choose one core component. Design it across every platform, in every state.

• Twitter re-design focused on how you can access and navigate Twitter — designed new navigation scheme for all platforms/devices

• Twitter created in-tweet-media and turned the “tweet” into a cross-platform, multi-device, responsive component

• This made the constraints crystal clear — we can now articulate how things should be done as we put more and more into the product and still deliver a consistent experience that is understandable to the user

Pro-Tip: Print things out

Turning bits and images on the screen into physical objects, hanging them on the wall, taking out a pen and editing/commenting forces conversations and collaboration that makes the product better. Just make sure to recycle.

Next up: Beau Smith of Square