Successfully reported this slideshow.

Prototyping for speed & scale

6

Share

Upcoming SlideShare
Storytelling with software
Storytelling with software
Loading in …3
×
1 of 73
1 of 73

Prototyping for speed & scale

6

Share

Download to read offline

Want to unlock the full potential of your design team? Need to understand how interaction, animation, and visual elements combine to shape an experience for your users? Leveraging the prototyping process you can build a realistic version of your idea, validate your design direction, and share your vision with stakeholders.

Want to unlock the full potential of your design team? Need to understand how interaction, animation, and visual elements combine to shape an experience for your users? Leveraging the prototyping process you can build a realistic version of your idea, validate your design direction, and share your vision with stakeholders.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Prototyping for speed & scale

  1. 1. Prototyping for Speed & Scale FITC: Web Unleashed • October 2016 Carl Sziebert • goo.gl/G5yHv5
  2. 2. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 2 Introductions A little about me
  3. 3. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 3 Introductions What would you say you do here?
  4. 4. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 What this talk is about Introductions 01. The importance of validating your design direction with real users and real devices 02. How to use prototyping to explore ideas and collaborate with others 03. Strategies you can apply to your own process and implement with your teams 04. The growth of UX Engineering in Google Search, Identity, and Maps 4
  5. 5. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 W“We tend to think of prototyping as storytelling. The stronger your story the more compelling argument you can make.” 5 - Kaushal Shah, UX Engineer in Google Search
  6. 6. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 6 Enabling design at the highest fidelity
  7. 7. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Enabling design at the highest fidelity 7 The Blackbird by The Mill
  8. 8. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Building a definition of prototyping 8
  9. 9. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 What is a prototype? 9 Define prototyping
  10. 10. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 What is a prototype? 10 Define prototyping
  11. 11. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Defined: What is a prototype? Define prototyping Let’s break that definition down to it’s core elements: ● An early sample or release of a product ● Built to test a concept or process ● Act as the thing to be learned from 11
  12. 12. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 A prototype is a thing to be learned from Define prototyping Verbally communicating about design mocks can be confusing and many things can get lost in translation 12
  13. 13. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 The importance of prototyping 13
  14. 14. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Build a shared understanding The importance of prototyping User experience design is not an individual sport. To that end, we leverage prototypes to align around our design direction together 14 User Experience What is desirable? PM & Marketing, Sales, Strategy What is profitable? Engineering What is feasible?
  15. 15. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Expose your ideas to real users The importance of prototyping Gathering feedback about a prototype you’ve built will help you focus the conversation on the most important elements 15
  16. 16. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Neutralize the politics of deciding The importance of prototyping Get stakeholders involved with your team and invested in the design process early 16 Preventing the Executive Swoop and Poop with Design Sprints by Jared M. Spool, User Interface Engineering
  17. 17. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 The prototyping process 17
  18. 18. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Sketching. Paper and digital prototyping. Native application and web development. The prototyping process 18
  19. 19. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Sketching. Paper and digital prototyping. Native application and web development. The prototyping process 19
  20. 20. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Choose the best fidelity for your prototypes The prototyping process 20 Strike a balance between where you are in the design lifecycle and the goals of the project Choosing the Right Prototyping Tool by Javier Cuello, Smashing Magazine
  21. 21. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 “Learn by doing” and build a culture around it The prototyping process Prototyping unites the development and design processes 21 Experiential Learning at Wikipedia
  22. 22. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 The four abilities possessed by experiential learners The prototyping process ● Be willing to be actively involved in the experience ● Able to reflect on the experience ● Possess and use analytical skills to conceptualize the experience ● Possess decision making and problem solving skills in order to use the new ideas gained from the experience 22
  23. 23. GOOGLESIMUXRESEARCH PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Learn to live with the outcome 23 The prototyping process The prototyping process is just as much about learning what our users want as what they don’t
  24. 24. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Exploring ideas with prototypes 24
  25. 25. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 PPrototypes are a fabulous way to explore ideas with a team. They shorten the time between “This is what we’re thinking” and “Oh, I get it.” 25 - Jared M. Spool, User Interface Engineering
  26. 26. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 26 Exploring ideas with prototypes Lo-fi brainstorming The Skeptics Guide to Low Fidelity Prototyping by Laura Busche, Smashing Magazine
  27. 27. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Design speed dating and storyboarding Exploring ideas with prototypes 27 Sketching, storyboarding, and paper prototyping are great for divergent ideation and have a low barrier to entry Speed Dating as a Design Method by Rachel Hinman, Adaptive Path
  28. 28. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Product and experiential prototyping Exploring ideas with prototypes With a healthy mix of digital prototyping tools we can quickly investigate subtle interaction details
  29. 29. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Native application and web development Exploring ideas with prototypes 29 Want to try out a new component library for your Android app? Heard that Angular or React may be a good choice for your web app?
  30. 30. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Prototyping as a part of design sprints Exploring ideas with prototypes 30 Sprints are a framework for teams of any size to solve and test design problems in 2-5 days The Design Sprint by Google Ventures
  31. 31. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Collaborating with researchers Exploring ideas with prototypes 31 Prototypes and research tools are invaluable to learning what our users value most in our products
  32. 32. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Brainstorms, cafe studies, design & stakeholder reviews Strategies for you and your teams 32 Team activities that promote prototyping, drive ideation, and celebrate feedback
  33. 33. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Prototyping your process 33
  34. 34. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Adopt a process of thoughtful and deliberate software design Strategies for you and your teams 34 Design Kit: The Field Guide to Human Centered Design by IDEO
  35. 35. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Design for breakpoints and iteration Strategies for you and your teams 35 Apply the human centered design process of inspiration, ideation, and implementation. Remember to rinse and repeat as necessary.
  36. 36. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Diversity of thought makes for good user experience design Strategies for you and your teams 36
  37. 37. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Beware of common pitfalls when you prototype Strategies for you and your teams 37 ● Fixating on the artifact instead of the understanding ● Converging too soon without exploring enough ● Neglecting to test our work with real people ● Over engineering our prototypes Five Prevalent Pitfalls When Prototyping by Jared M. Spool, User Interface Engineering
  38. 38. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 38 Beware of prototyping pitfalls
  39. 39. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Advice for would-be prototypers 39
  40. 40. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Strive towards mastery with the tools of your trade Advice for would-be prototypers 40 Become a polyglot and embrace change in the tools you use over the course of your career
  41. 41. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Keep a record of your progress Advice for would-be prototypers 41 Use source control for everything including design artifacts. Consider tools for managing assets and collecting feedback.
  42. 42. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Go guerrilla with user testing Advice for would-be prototypers 42 Ad-hoc testing is an easy way to collect causal feedback about your progress How to run user tests at a conference by Daniel Sauble, Smashing Magazine
  43. 43. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Measure your success & make time to celebrate it Advice for would-be prototypers 43 We use OKRs (Objectives and Key Results) to capture our goals and define success metrics for our projects
  44. 44. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Brooks’ law is real and you should know about it Advice for would-be prototypers 44 High quality communication is essential to managing complex software design projects The Mythical Man-Month by Frederick P. Brooks, Jr.
  45. 45. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Master the powers of active listening Advice for would-be prototypers 45 “Listening is one of the most important skills you can have. How well you listen has a major impact on your job effectiveness…” 10 Steps to Effective Listening by Dianne Schilling, Forbes Magazine
  46. 46. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Embrace compromise with enthusiasm Advice for would-be prototypers 46 “It is through self-discipline we actually do the work of letting go of our attachments” Letting go: Living a life without attachment by Jedi Path
  47. 47. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Practice strengths building and invest in learning Advice for would-be prototypers 47 Reinforce the skills you have and make time to build new ones
  48. 48. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Make room for palate cleansing projects and infrastructure development Advice for would-be prototypers 48
  49. 49. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Consider a dedicated prototyping role no matter the size of your team Advice for would-be prototypers 49
  50. 50. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 UX Engineering FTW! 50
  51. 51. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 How would you describe the UX Engineering role to a classroom of 8th graders? The growth of UX Engineering 51
  52. 52. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 B “Being a UX Engineer at Google is like having a great idea for landing a spaceship on Mars. You could start by dropping eggs with parachutes from your roof and realize that you missed a few important things. In the next prototypes you’ll incorporate those ideas. When the spaceship lands on Mars, your quick prototypes’ big ideas will be visible.” 52
  53. 53. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 D“Designers figure out WHAT a product should do. UX Engineers figure out HOW a product should do it.” 53
  54. 54. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 54 The growth of UX Engineering
  55. 55. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Prototypes are the core of what SIM UXEs do The growth of UX Engineering 55 XResearch studies XLaunches supported XX UX tools Executive reviews
  56. 56. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Design enablement 56
  57. 57. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Exploring uncharted territory Exploring ideas with prototypes Prototyping voice based interactions is hard! We make tools for design and research to learn how people use our products hands-free
  58. 58. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Intuitive tools for rapid ideation Exploring ideas with prototypes 58 Giving more freedom to designers to express their ideas without having to convince someone else to build it for them
  59. 59. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Bootstrapping our design teams Exploring ideas with prototypes 59 Improving the tools used by our cross-functional counterparts
  60. 60. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Abstracting away the complexities Exploring ideas with prototypes 60 Mappy is a great example of this and allows our cartographers to explore map design at scale
  61. 61. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 B“Be the team everyone wants to work with.” 61 - Alex Cook, UX Lead in Google Search, Identity, & Maps
  62. 62. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 What is the most important skill for a UX Engineer to possess? The growth of UX Engineering 62
  63. 63. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 T“Tenacity! It’s not enough to just be analytical or have a great eye. You need to have the patience and wherewithal to bend the code to your will.” 63
  64. 64. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 E “Empathy for the user married with technical selflessness. You need to be able to project yourself into the minds of your users, and in so doing, you may have to abandon what you originally wanted to do — something that may have been conceptually elegant or visually cool or technically simple — in order to do what's best for the user.” 64
  65. 65. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 O“Have an open mind. Be nimble. Invest in the ability to learn new tech and skills. Cultivate a feel for delight.” 65
  66. 66. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 We are changing the way that Google does front-end The growth of UX Engineering 66 There are X UX Engineers across a multitude of projects at Google and roughly 68% of us identify as web developers.
  67. 67. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 We’re looking for good people to join our ranks The growth of UX Engineering 67 We hired X UXEs in 2016 and currently have X+ openings with design teams across the company Apply online: https://www.google.com/about/careers/fields-of-work/design/
  68. 68. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 Wrapping up 68
  69. 69. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 What this talk was about Introductions 01. The importance of validating your design direction with real users and real devices 02. How to use prototyping to explore ideas and collaborate with others 03. Strategies you can apply to your own process and implement with your teams 04. The growth of UX Engineering in Google Search, Identity, and Maps 69
  70. 70. Thanks! Special thanks to Andrew Swank, Kaushal Shah, Mai Tran, and Nida Zada for their help with this talk.
  71. 71. Questions? linkedin.com/in/carlsz reddit.com/user/carlsz twitter.com/carlsz
  72. 72. Appendix
  73. 73. GOOGLESIMUX PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 73 Photography What this talk is not about Introductions

×