Maps TD in Iowa City

Give it a try in your neighborhood!

Tuesday, March 13 – 3:30PM – 4:30PM

This session was a core conversation, which means the room was filled with Google+ users talking about the product. The session was facilitated by a Google representative. There was generally good back and forth. These notes may be a bit disjointed because of the quick pace of the conversation. I think I was able to capture some good points, but it was not a structured presentation like many of the sessions at SXSW.

• G+ Hangouts will eventually provide an option for “On Air” which is meant for a one to many larger group setting vs. a video conversation between up to 10 people (currently in beta).
• Why Google+? The main reason is create a common thread across all Google products. It is both social and search, and provides a large input to Google’s core, search.
• Search + Your World pushes a lot of content posted on G+ into higher placement in search results.
• Connecting your website to your G+ page using “rel=author” code will create that connection and ultimately help search results.
• Promotion of your G+ Page
• To get traction on your pages, they need to be marketed or pushed externally. You can only get so much internal connection to your G+ pages.
• Engage other pages with your page.
• Look at successful pages: Angry Birds
• You don’t need to post 10x’s a day to get in, just smaller regular engaging content is good enough for now.
• It isn’t all about engagement, but getting users to engage with you – post things that encourage feedback, or host a hangout.
• There are currently 100 million users of G+ – being an early adopter and building the user base now is a good thing.

To see the latest launches for G+, follow #googleplusupdate

We are constantly being asked to go faster and faster.

What is Triage?

• "To sort" produce sorting
• battlefield medics
• Necessity is the mother of invention.
• War provides many necessities.

Design Triage

• Prioritization
  • Assess before treating – what are the products on your table?
  • Minor: walking wounded – low-impact projects that won’t be significantly affected whether you help them or not. (creating banner ads)
  • Delayed: Projects should be addressed, but don’t require immediate attention (proof of concept first).
  • Immediate: Projects that have significant impact and really matter.
  • Expectant: projects that are critically flawed and no amount of time and effort can save.
• Selflessness
  • The product is the star – don’t think you are a genius designer. Don’t thin-slice. Don’t just jump right into wireframes.
  • Marketing is a team sport. Leads digital strategy and planning, collaborates in all phases, responsible for the vision, quality and performance of the work.
• Mercy Killings
  • Some products just nee to be put out of their misery (this is hard to do).
  • Learn how to say no (like Steve Jobs).
  • How to say no:
    • Tell the truth.
    • Ask questions.
    • Tell stories.
    • Reflect Conflict.
    • Poison Pill (plant seeds for something to die).
    • Quit.
• Scrappiness
  • Figure out how to turn no resources into something killer.
  • Determine Vision
    • What is it?
    • Who is it for and what’s their payoff?
    • Why are we creating it?
    • How does it work?
    • What re the risks?
  • Lean UX? Kaban?
• Staying Human
  • Make sure you schedule rest.
  • Find flow in the chaos.
  • Use your lulls – when things quiet down, give attention to the delayed and minor projects.

Storming Juno
A Canadian file about storming Juno Beach in WWII. The interactive portion of the film started moving before filming of the video portion and provided an opportunity to collaborate before production actually began. Many things couldn’t not have been done if the interactive portion came after the fact. The interactive team put together visuals/proof of concepts and wireframe demo/discuss the project with the filmmakers. It helps the more linear people (filmmakers) understand the digital/interactive side.

My Sep 11th (myseptember11th.org)
The interactive piece was put together after the film was made. It included profiles of people’s experiences on Sept 11th. There is a user-created component for uploading video/text/photos of experiences.

Cafe De Fiore (theatrical release film)
The interactive portion was built around the script of the film, since it was the first piece of the film that existed. They would release different portions as the script became ready even before the film was complete. This was all released progressively up until the film was actually released in theaters. Once this was out there, the filmmakers got interested in interacting on the social networks because of the buzz that the initial released content created.

Things to ask with a combo web/film project:

• What is the property and how much participation is there from both sides?
• Will the director be involved on the web portion?
• Which one creates the other?
• Is the web just an entry point, or is it more vertical, and just promotional?
• Who controls the different portion after the fact? Who takes on the social aspect afterwards? Make sure everyone is involved to ask these questions.s

CSS Timeline

• 1994 – Cascading HTML style sheets
• 1996 CSS1
• 1998 CSS2
• 2012 CSS3 Where is it??

HTML has a simple structure, universal semantics, media-independent. It doesn’t have any presentation until the image tag arrived. Somehow the image tag took away the true text. The answer to this was CSS.

CSS3

• border-radius
• box-shadow

Example: The menu on Apple.com is currently done with images – it could be done fully in CSS3. The problem is (and probably the reason Apple has not done it with CSS3) older browsers do not support this.

• @font-face (this has existed since CSS2)

CSS3 Transitions

• transition: 1s; transform: rotate(-360deg);

Testing

• The acid 2 test was created to test browser compatibility with CSS. This put pressure on Microsoft to handle CSS correctly. In IE8, they finally did it.

Paging the Web

• Opera Reader takes a long web page and gets rid of the scroll. It cuts it up into pages.
• overflow: paged; is the tag that the Opera Reader recognizes.

Slides and Code Available

Cnet put together a good (more detailed) write-up of the session.

Telematics: When the vehicle is aware of its location and can engage in 2-way conversation.

Telematic Features/Services

• Safety & Security (onstar)
• Navigation Assistance
• Diagnostics
• Convenience/Info Service (fuel prices/traffic)
• Entertainment

Experience in Cars will Change

• Control + Choice + Ubiquity
• 70% of people say apps are critical to next smartphone purchase

Challenges

• Fragmentation – 15 car manufacturers in the USA with their own systems. 4320 fragmentation to deal with.
• HMI (human machine interface) – steering wheel controls, voice, mouse-type controls
• All vehicle components must be built to withstand conditions similar to those experienced in a jet plane (these systems are expensive).

Customer Conundrum

• Vehicle decisions are made by the heart, and smartphone decisions are made by the brain.

Criteria for App Selection

• Facilitates safe driving behaviors
• Enhances driving and ownership experience
• Allows for enjoyable personalized experience
• Demonstrates strong brand harmony

The Rise of Own Media
New digital technologies
Impact of startup culture on brands
Facebook fanpages, a new friendly environment for brands.

Nike Brazil Project:

They connected runners in a massive relay race to proximity sensors for social networks. Sensors on shoes registered checkins. Confessional video booths were set up for runners for them to record testimonials across the race. They were watched by all the runners’ friends. The user-created "Own Media" really made this campaign work.

• @NikeCorre has 169k followers
• Facebook Page: 297k fans
• Influencers group with 3k runners

This project was possible because people are no longer only consumers. They transformed the culture and made the campaign work.

Doritos Brazil

Doritos are not as big in Brazil as they are in the US. Doritos owns 99% of the chip market in Brazil.

Doritos uncut contest
Start a story, friends continue story, the story with the most likes gets turned into a story board. The most popular story gets turned into an animated video and the winner gets a trip to Hollywood.

• 58k fans in 5 weeks.

Summer Promotion
Upload the "worst summer photo" ever. The winner gets a big box of Doritos.
They picked up 142k fans with the contest.

Take-Away’s:

• You must know your brand well. Make sure you are relevant to your customers.
• Create a Digital Culture internally.
• Marry your agency. The more the agency knows about your business and brand strengths and weaknesses the more it will help.

In the summer of 2011, Google completely redesigned nearly all of its applications to be more focused, elastic, and effortless. For the first time in Google’s history, hundreds of millions of users could use a suite of products – from Search and Maps to Gmail, Docs, and Calendar – with a unified, modern look and feel. Join the designers who led the effort for war stories and lessons learned in bringing beauty to Google’s flagship products.

This isn’t going to be just the story of a redesign, but the story or priority of design at Google.

It is difficult to design holistically across the brand when everyone is in silo with their own products. The latest redesign is one of the first collaborations between all those different groups.

Google stood out originally because of everything they didn’t put on their home page. It’s very simple and clean.

There was a big redesign in 2011, but there was a “secret redesign” in 2007.

2007 – Kanna:

A small group of 6 designers started to explore and express the Google brand (Kanna – Icelandic “to explore”) across the org. They explored the connection between design and engineering. Four different designs created:

• Modesty and Minimalism
• Fun with color and personality
• Organization (more like desktop apps)
• Daring – differentiate products by color

How it was presented:
Kanna did not launch. When it was presented, it was shown on a projector.

The Verge has a gallery of photos showing this 2007 design that never was.

2011 – Strawman:

The team was chosen because of their lack of connection and history with any of the smaller groups or history of Google.

Redesign called “Strawman”
Larry Page IM’d the team “if you were to redesign Google, what would it look like?” They were unclear on if it was even a real thing. If it was real, it needed to be done quickly. They did a “design sprint.” They could just jump ahead without any sort of internal fighting based on history.

10-12 screens were chosen representative of Google products and before/after shots were created.

How it was presented:
When Strawman was presented, it was done on 11×17 80lb paper. It just included the before and after shots. The thought was the presentation would be new to the group and stand out. This redesign actually had an opinion.

Timeline:
Started in January, Larry became CEO in April, and told them to launch it in Summer (very very very quickly). The team didn’t even think it was possible. The project name became “Kennedy.” Google Plus had already been in the works, and had to pick up the new design very quickly.

Process:
A prototype was created to test the design across the organization. They would swap out CSS on top of simple HTML mock-ups for all products. The prototype allowed them to demo things to the team and play with different variations and show the grid etc. “It felt like a roller coaster only the latches didn’t go down.”

A lot of attention was paid to the buttons and their hover state. The buttons fade out (218 milliseconds, which is one of the designer’s birthday).

What were they after?
Don’t just bring together for consistency, but also boost the feeling that it’s all one thing that works together. It was not intentional that the Google products were spread out, this design brings them all together.

How was it rolled out?
The prototype was so successful that engineers started grabbing the CSS from it (scary) as it was changing. They ended up creating a really large style guide that they could take it. It helped the engineers engage more. It helped to get buy-in when they could actually go out and see it and use it. Many properties just built based on what they saw, which make it a very smooth roll-out. Voice just went out and did the new design on their own and handled it with very few changes. They held “design office hours.” Everyone was really into it and wanted to help.

Manage Risk and Measuring Success
(Google likes data)
Qualitative research: 80 participants were shown a variety of screens which included both the old and new design for 10 seconds each… just to get an impression. The participants were asked to rank the design on a randomized set of 15 out of 30 attributes (simple, sparse, modern, clean, etc.). The emotions they got out of it were the goals they had, and goals that Google was known for. The research told them they were heading in the right direction

Quantitative research: because there are billions of queries each day, there are many experiments going on. Google can make statistically significant fine-grained measurement for many things. The new design was tested on many users.

Eating our own dog food: Rolled out to Google internally.

“The company has made additional refinements… that reflect a newfound respect for the intangible.” -Khoi Vinh

Slides, Links, Examples: http://bit.ly/teamSass

• Saas allows for variables so you only have to replace elements in a single place in your style sheet.
• Nesting selectors so you don’t have to repeat multiple tags or divs
• Nesting Statements as well

Tools:

• Web Workbench (Visual Studio Plugin)
• Compass.app (Mac/Windows/Linux)
• CodeKit (Mac)
• Scount

Commandline Tools:

• Saas itself
• sass convert
• Middleman
• Compass

Debugging Tools:

• Generated Line Comments
• FireSass for Firebug

Common Good Practices in CSS (same for Sass):

• don’t nest more than 4 selectors deep
• break things down as much as possible
• work from the main area of content out

Number conversions can be created to convert px to em or back.

For the actual compiled CSS output, you can display it whatever way you’d like:
nested, expanded, compact

Nice mixins for the various browser-specific syntax – Sass can just bring them all in.