prototyping for speed & scale

Prototyping for Speed & ScaleFITC: Web Unleashed • October 2016

Carl Sziebert • goo.gl/G5yHv5

GO

OG

LE S

IMUX

PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 2

Introductions

A little about me

GO

OG

LE S

IMUX


Introductions

What would you say you do here?

GO

OG

LE S

IMUX

PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5

What this talk is aboutIntroductions

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

teams04. The growth of UX Engineering in Google Search, Identity, and Maps

4

GO

OG

LE S

IMUX


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

GO

OG

LE S

IMUX


Enabling design at the highest fidelity

GO

OG

LE S

IMUX


Enabling design at the highest fidelity

7

The Blackbird by The Mill

http://www.themill.com/portfolio/3002/the-blackbird%C2%AE

http://www.themill.com/portfolio/3002/the-blackbird%C2%AE

GO

OG

LE S

IMUX


Building a definition of prototyping

8

GO

OG

LE S

IMUX


What is a prototype?

9

Define prototyping

GO

OG

LE S

IMUX


What is a prototype?

10

Define prototyping

GO

OG

LE S

IMUX


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

GO

OG

LE S

IMUX


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

GO

OG

LE S

IMUX


The importance of prototyping

13

GO

OG

LE S

IMUX


Build a shared understandingThe 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 ExperienceWhat is desirable?

PM & Marketing, Sales, StrategyWhat is profitable?

EngineeringWhat is feasible?

GO

OG

LE S

IMUX


Expose your ideas to real users


Gathering feedback about a prototype you’ve built will help you focus the conversation on the most important elements

15

GO

OG

LE S

IMUX


Neutralize the politics of deciding


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

https://articles.uie.com/swoop_and_poop/

https://articles.uie.com/swoop_and_poop/

GO

OG

LE S

IMUX


The prototyping process

17

GO

OG

LE S

IMUX


Sketching. Paper anddigital prototyping. Native application and web development.


18

GO

OG

LE S

IMUX


Sketching. Paper anddigital prototyping. Native application and web development.


19

GO

OG

LE S

IMUX


Choose the best fidelity for your prototypes


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

https://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/

https://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/

GO

OG

LE S

IMUX


“Learn by doing” and build a culture around it


Prototyping unites the development and design processes

21

Experiential Learning at Wikipedia

https://en.wikipedia.org/wiki/Experiential_learning

https://en.wikipedia.org/wiki/Experiential_learning

GO

OG

LE S

IMUX


The four abilities possessed by experiential learners


● 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

GO

OG

LE S

IMUX

RES

EARC

H


Learn to live with the outcome

23


The prototyping process is just as much about learning what our users want as what they don’t

GO

OG

LE S

IMUX


Exploring ideas with prototypes

24

GO

OG

LE S

IMUX


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

GO

OG

LE S

IMUX



Lo-fi brainstormingThe Skeptics Guide to Low Fidelity Prototyping by Laura Busche, Smashing Magazine

https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/

https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/

GO

OG

LE S

IMUX


Design speed dating and storyboarding


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

http://adaptivepath.org/ideas/speed-dating-as-a-design-method/

http://adaptivepath.org/ideas/speed-dating-as-a-design-method/

GO

OG

LE S

IMUX


Product and experiential prototyping


With a healthy mix of digital prototyping tools we can quickly investigate subtle interaction details

GO

OG

LE S

IMUX


Native application and web development


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?

GO

OG

LE S

IMUX


Prototyping as a part of design sprints


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

http://www.gv.com/sprint/

http://www.gv.com/sprint/

GO

OG

LE S

IMUX


Collaborating with researchers


31

Prototypes and research tools are invaluable to learning what our users value most in our products

GO

OG

LE S

IMUX


Brainstorms, cafe studies, design & stakeholder reviews

Strategies for you and your teams

32

Team activities that promote prototyping, drive ideation, and celebrate feedback

GO

OG

LE S

IMUX


Prototyping your process

33

GO

OG

LE S

IMUX


Adopt a process of thoughtful and deliberate software design


34

Design Kit: The Field Guide to Human Centered Design by IDEO

https://www.ideo.com/work/human-centered-design-toolkit/

https://www.ideo.com/work/human-centered-design-toolkit/

GO

OG

LE S

IMUX


Design for breakpoints and iteration


35

Apply the human centered design process of inspiration, ideation, and implementation. Remember to rinse and repeat as necessary.

GO

OG

LE S

IMUX


Diversity of thought makes for good user experience design


36

GO

OG

LE S

IMUX


Beware of common pitfalls when you prototype


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

https://articles.uie.com/pitfalls_prototyping/

https://articles.uie.com/pitfalls_prototyping/

GO

OG

LE S

IMUX


Beware of prototyping pitfalls

GO

OG

LE S

IMUX


Advice for would-be prototypers

39

GO

OG

LE S

IMUX


Strive towards mastery with the tools of your trade


40

Become a polyglot and embrace change in the tools you use over the course of your career

GO

OG

LE S

IMUX


Keep a record of your progress


41

Use source control for everything including design artifacts. Consider tools for managing assets and collecting feedback.

GO

OG

LE S

IMUX


Go guerrilla with user testing


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

https://www.smashingmagazine.com/2014/11/how-to-run-user-tests-at-a-conference/

https://www.smashingmagazine.com/2014/11/how-to-run-user-tests-at-a-conference/

GO

OG

LE S

IMUX


Measure your success & make time to celebrate it


43

We use OKRs (Objectives and Key Results) to capture our goals and define success metrics for our projects

GO

OG

LE S

IMUX


Brooks’ law is real and you should know about it


44

High quality communication is essential to managing complex software design projects

The Mythical Man-Month by Frederick P. Brooks, Jr.

https://archive.org/details/mythicalmanmonth00fred

https://archive.org/details/mythicalmanmonth00fred

GO

OG

LE S

IMUX


Master the powers of active listening


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

http://www.forbes.com/sites/womensmedia/2012/11/09/10-steps-to-effective-listening/

http://www.forbes.com/sites/womensmedia/2012/11/09/10-steps-to-effective-listening/

GO

OG

LE S

IMUX


Embrace compromise with enthusiasm


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

http://jedipath.org/main/index.php/training/81-letting-go-living-a-life-without-attachment

http://jedipath.org/main/index.php/training/81-letting-go-living-a-life-without-attachment

GO

OG

LE S

IMUX


Practice strengths building and invest in learning


47

Reinforce the skills you have and make time to build new ones

GO

OG

LE S

IMUX


Make room for palate cleansing projects and infrastructure development


48

GO

OG

LE S

IMUX


Consider a dedicated prototyping role no matter the size of your team


49

GO

OG

LE S

IMUX


UX Engineering FTW!

50

GO

OG

LE S

IMUX


How would you describe the UX Engineering role to a classroom of 8th graders?

The growth of UX Engineering

51

GO

OG

LE S

IMUX


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

GO

OG

LE S

IMUX


D“Designers figure out WHAT a product should do. UX Engineers figure out HOW a product should do it.”

53

GO

OG

LE S

IMUX



GO

OG

LE S

IMUX


Prototypes are the coreof what SIM UXEs do


55

XResearch studies

XLaunchessupported

XXUX tools

Executivereviews

GO

OG

LE S

IMUX


Design enablement

56

GO

OG

LE S

IMUX


Exploring uncharted territory


Prototyping voice based interactions is hard! We make tools for design and research to learn how people use our products hands-free

GO

OG

LE S

IMUX


Intuitive tools for rapid ideation


58

Giving more freedom to designers to express their ideas without having to convince someone else to build it for them

GO

OG

LE S

IMUX


Bootstrapping our design teams


59

Improving the tools used by our cross-functional counterparts

GO

OG

LE S

IMUX


Abstracting away the complexities


60

Mappy is a great example of this and allows our cartographers to explore map design at scale

GO

OG

LE S

IMUX


B“Be the team everyone wants to work with.”

61

- Alex Cook, UX Lead in Google Search, Identity, & Maps

GO

OG

LE S

IMUX


What is the most important skill for a UX Engineer to possess?


62

GO

OG

LE S

IMUX


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

GO

OG

LE S

IMUX


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

GO

OG

LE S

IMUX


O“Have an open mind. Be nimble. Invest in the ability to learn new tech and skills. Cultivate a feel for delight.”

65

GO

OG

LE S

IMUX


We are changing the way that Google does front-end


66

68.9% 6.8% 5.4%

Web developer Android developer iOS developer

There are X UX Engineers across a multitude of projects at Google and roughly 68% of us identify as web developers.

GO

OG

LE S

IMUX


We’re looking for good people to join our ranks


67

68.9% 6.8% 5.4%

Web developer Android developer iOS developer

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/

https://www.google.com/about/careers/fields-of-work/design/

GO

OG

LE S

IMUX


Wrapping up

68

GO

OG

LE S

IMUX


What this talk was aboutIntroductions

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

teams04. The growth of UX Engineering in Google Search, Identity, and Maps

69

Thanks!Special thanks to Andrew Swank, Kaushal Shah, Mai Tran, and Nida Zada for their help with this talk.

Questions?linkedin.com/in/carlsz

reddit.com/user/carlsz

twitter.com/carlsz

https://www.linkedin.com/in/carlsz

https://www.linkedin.com/in/carlsz

https://www.reddit.com/user/carlsz

https://www.reddit.com/user/carlsz

http://twitter.com/carlsz

http://twitter.com/carlsz

Appendix

GO

OG

LE S

IMUX


Photography

What this talk is not about

Introductions