2019 was a year marked by reflecting on design ethics, dark mode becoming part of most of the products, personalization no longer being a buzz word and Figma seriously competing with Sketch. Taking into account some of this year’s strongest revelations and scanning what seems to be on top of the industry’s mind at the moment, here is a forecast of what I see as the 10 strongest trends for 2020.
In 2020 we will see the growth of voice search. The recent studies show that using voice as interaction is becoming the standard in daily life. Voice technology is getting smarter and adapting to the natural conversational language, bringing a new way of interaction that a text search never could.
The time of complex applications, full of interactive elements, call-to-actions, and useless animations will become things of the past (I hope at least). Today the majority of users navigate through several pages at the same time and on different devices, while attention to content decreases more and more. As a solution, minimal design will help to guide the user to gain a better, clearer and faster understanding about your product.
Continuing with the topic of having structures full of complexity and interference, e.g. links opening in new tabs and pop-ups appearing, again and again, distracting the user from his actual goal and shifting their focus to things that are unnecessary.
One good reference is google with Gmail allowing users to access the google calendar while reading email at the same time, dividing the screen into 2 parts, allowing the user to view both at the same time without needing to switch between tabs. In 2020 we will see a growth of similar behaviors, delivering to the user what they are looking for instead of pushing things that we might think the user might like.
Device synchronization is the latest trend. Whether its smartphone, a watch, a laptop — the user demands dynamic capabilities across all devices. Today the interaction is associated with the achievement of booking a cab or hotel, buying things online or control the home — as all of these can be done via the internet.
Deliver the right experience in every touchpoint.
Uber is the best example to take into consideration, as it has fully implemented an independent hardware approach. If you have used Uber, you might know that you can start the trip with voice command and end it with the help of a mobile application or watch. So, a single continuous operation can be performed on different platforms with uninterrupted action.
AI won´t stop the evolution and in 2020 I expect to see more brands embracing it. For some years AI started to be everywhere, from google search, online shopping recommendations, social media feeds adapting to user behaviors, etc. As AI technology grows it is becoming more developed and sophisticated but at the same time it will become more present everywhere.
In the next year, we will see new ways and forms how to use AI´s new methods for creative solutions, video / image-driven, and smarter products.
One good example is Ogilvy’s recent social media ad campaign for Deutsche Bahn, which aimed to encourage people in Germany to vacation in their home country rather than abroad. Using AI, Ogilvy put images of destinations in Germany next to almost-identical images of landmarks around the world. It wouldn’t have been possible without AI, and it drove a 6.61% conversion rate and a 24% increase in revenue.
In the next year and beyond, we’ll see a move from selling products to selling services around products. Many consumers, particularly young people, will become more conscious about what they buy taking a step away from consumerism. Creating new products or finding new ways to sell consumer’s new versions of products they already have is no longer a promising business. An example is in the smartphone and fashion industry where we see the sales numbers having a drop due to the fact that there is no need to replace a perfectly working older phone or jacket that still looks good. Is a generational attitude and consciousness, showing that people are buying less, moving toward investing rather in experience than things. People are more aware of what they buy. Companies will have to rethink many of their business models and focus more on finding solutions that really help their customers instead of creating new products. For example, younger consumers may not want to buy their own car, but they’ll pay a monthly fee for access to a shared car. The same goes for services like streaming media, vacation rentals, and food delivery. It’s about the service that surrounds the products instead of the actual products themselves.
Good design is the one that is centered around users and supports them to complete an action in the most intuitive and simplest way. Mindfulness focuses on being clear, honest, without distractions and respecting the user providing meaningful experiences.
Mindful Design is a human-centered approach to create products which respect user’s privacy, time and attention as well as enhance the state of optimum human experience.” Sandra Mileikyte
We saw last years a gap in how text is adapted to the product with the purpose to benefit the user. Google has created a page to describe what its UX writers do in UX writing. On the page, Google described them as advocates for Google design and how they help to shape product experiences by crafting copy that empowers users to complete the task at hand.
“They set the tone for content and drive cohesive product narratives across multiple platforms and touchpoints. As the resident wordsmiths, they work with a variety of UX design-related jobs including researchers, product managers, engineers, marketing, and customer operations to help establish connective language and a unified voice.”
UX writer will be the storyteller, technical writer and editor of the company, housed within the UX team. While we see companies constantly improving their products and services’ appearance, feel and interaction design, it is intriguing that there will finally be changes to the words too.
We have been engrained to believe that our sole purpose as marketers is to drive short-term return on investment.
This approach and belief has led us to deliver results that are less financially valuable to the businesses we serve. As we pursue strategies that solve our orders to “drive leads this quarter to hit our targets,” we increase our cost per acquisition thus devaluing ourselves even when we hit the sometimes unreasonable goals given to us.
In other words, we often fail even when we win with short term goals.
Across our portfolio, we see clients hit difficult and previously unaccomplished goals given to them by management only to hear their budget will be cut.
How can this be? Why does budget get cut even when we hit our goals?
Marketing budgets are viewed through the lens of opportunity cost. Short-term thinking in your marketing drives up your cost per acquisition and as cost per acquisition increases, other channels like sales development begin to look more attractive.
We think that if we could succeed with one channel, we could probably succeed again with a different channel. This is how budgets change and evolve.
Let’s look at a scenario through the lens of a Chief Revenue Officer or Chief Financial Officer.
If we have $1.2 million to spend to acquire customers this year, should we spend on sales development (where we can have more control over our average order value) or should we spend it on PPC (which is driving results, but costs keep rising from competitive forces)?
Decision-makers do not evaluate budgets solely on hitting goals or not. They evaluate budgets based on other similar or relative opportunities and then decide which is the best allocation of capital.
Thus, when the C-suite evaluates the customer acquisition cost of performance marketing compared to sales development they often wisely reallocate budget to sales development even though marketing hit the goals provided.
So what do we do?
We use a customer acquisition cost (CAC) model to align ourselves and get ahead of reality.
Here’s a tutorial and CAC template to explain how to do this:
After you have added your own data to the CAC model, I believe you will find that the middle of your funnel is a financial wasteland. The middle of the funnel is lead generation for informational intent. These are guides and content assets you are promoting on social media to your ideal customer persona that provide information about the value of your product or services.
Unfortunately, these types of leads rarely have purchase intent.
For example, my employer has reached the point where we were converting LinkedIn ads into contacts at over 60%, but at a $21 cost per contact, we could not justify spending 21x compared to buying the same lead on ZoomInfo for $1.
You see “cold intent” and “informational intent” are not that different to your sales team. And it is definitely not 21x different.
So, you have done your own CAC analysis with the template provided. What’s next?
Well, if you are looking to increase marketing budgets and lower CAC, I would recommend that you explore spending more on third-party review sites and brand advertising.
In other words, spend at the top of the funnel to drive brand awareness and affinity which can over time turn into direct traffic which has your highest lowest CAC and spend heavily on the bottom of the funnel when your ideal customer persona is expressing purchase intent by layering your primary keywords with modifiers such as “top,” “best” or “reviews.”
As an example for top of funnel campaigns, we are generating over two million impressions on our ideal persona via LinkedIn for $2,000 a month for context.
And for the bottom of the funnel, if you search for something like “top ERP software” you will find countless opportunities to make your brand discoverable on review sites. You can then test these sites CAC against Google Ads for the same keywords to determine which is best for your business.
From here, you have now built a new demand gen funnel. And with a thoughtful approach like this, you are more likely to get buy-in from the C-suite and grow your budgets when you hit your goals.
Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.
About The Author
Garrett Mehrguth is the CEO of Directive Consulting, a B2B search marketing agency, and the founder of Freshly Salted. He has been published in a wide variety of industry-leading publications. Garrett also speaks at SMX West, Share16, 3XE Digital, State of Search, Big Digital, MozCon Ignite, General Assembly, PeopleSpace Innovation Labs, SoCal Code Camp and others.
Color is my day-long obsession, joy and torment – Claude Monet
Over the last two years we’ve tried to improve our usage of color at Cloudflare. There were a number of forcing functions that made this work a priority. As a small team of designers and engineers we had inherited a bunch of design work that was a mix of values built by multiple teams. As a result it was difficult and unnecessarily time consuming to add new colors when building new components.
We also wanted to improve our accessibility. While we were doing pretty well, we had room for improvement, largely around how we used green. As our UI is increasingly centered around visualizations of large data sets we wanted to push the boundaries of making our analytics as visually accessible as possible.
Cloudflare had also undergone a rebrand around 2016. While our marketing site had rolled out an updated set of visuals, our product ui as well as a number of existing web properties were still using various versions of our old palette.
Cloudflare.com in 2016 & Cloudflare.com in 2019
Our product palette wasn’t well balanced by itself. Many colors had been chosen one or two at a time. You can see how we chose blueberry, ice, and water at a different point in time than marine and thunder.
The color section of our theme file was partially ordered chronologically
Lacking visual cohesion within our own product, we definitely weren’t providing a cohesive visual experience between our marketing site and our product. The transition from the nice blues and purples to our green CTAs wasn’t the streamlined experience we wanted to afford our users.
Cloudflare.com 2017 & Sign in page 2017Our app dashboard in 2017
Reworking our Palette
Our first step was to audit what we already had. Cloudflare has been around long enough to have more than one website. Beyond cloudflare.com we have dozens of web properties that are publicly accessible. From our community forums, support docs, blog, status page, to numerous micro-sites.
All-in-all we have dozens of front-end codebases that each represent one more chance to introduce entropy to our visual language. So we were curious to answer the question – what colors were we currently using? Were there consistent patterns we could document for further reuse? Could we build a living style guide that didn’t cover just one site, but all of them?
Screenshots of pages from cloudflare.com contrasted with screenshots from our product in 2017
Our curiosity got the best of us and we went about exploring ways we could visualize our design language across all of our sites.
As we first started to identify the scale of our color problems, we tried to think outside the box on how we might explore the problem space. After an initial brainstorming session we combined the Internet Archive’s Wayback Machine with the Css StatsAPI to build an audit tool that shows how our various websites visual properties change over time. We can dynamically select which sites we want to compare and scrub through time to see changes.
Below is a visualization of palettes from 9 different websites changing over a period of 6 years. Above the palettes is a component that spits out common colors, across all of these sites. The only two common colors across all properties (appearing for only a brief flash) were #ffffff (white) and transparent. Over time we haven’t been very consistent with ourselves.
If we drill in to look at our marketing site compared to our dashboard app – it looks like the video below. We see a bit more overlap at first and then a significant divergence at the 16 second mark when our product palette grew significantly. At the 22 second mark you can see the marketing palette completely change as a result of the rebrand while our product palette stays the same. As time goes on you can see us becoming more and more inconsistent across the two code bases.
As a product team we had some catching up to do improve our usage of color and to align ourselves with the company brand. The good news was, there was no where to go but up.
This style of historical audit gives us a visual indication with real data. We can visualize for stakeholders how consistent and similar our usage of color is across products and if we are getting better or worse over time. Having this type of feedback loop was invaluable for us – as auditing this manually is incredibly time consuming so it often doesn’t get done. Hopefully in the future as it’s standard to track various performance metrics over time at a company it will be standard to be able to visualize your current levels of design entropy.
Picking colors
After our initial audit revealed there wasn’t a lot of consistency across sites, we went to work to try and construct a color palette that could potentially be used for sites the product team owned. It was time to get our hands dirty and start “picking colors.”
Hindsight of course is always 20/20. We didn’t start out on day one trying to generate scales based on our brand palette. No, our first bright idea, was to generate the entire palette from a single color.
Our logo is made up of two oranges. Both of these seemed like prime candidates to generate a palette from.
We played around with a number of algorithms that took a single color and created a palette. From the initial color we generated an array scales for each hue. Initial attempts found us applying the exact same curves for luminosity to each hue, but as visual perception of hues is so different, this resulted in wildly different contrasts at each step of the scale.
We can see the intensity of the colors change across hue in peaks, with yellow and green being the most dominant. One of the downsides of this, is when you are rapidly iterating through theming options, the inconsistent relationships between steps across hues can make it time consuming or impossible to keep visual harmony in your interface.
The video below is another way to visualize this phenomenon. The dividing line in the color picker indicates which part of the palette will be accessible with black and white. Notice how drastically the line changes around green and yellow. And then look back at the charts above.
After fiddling with a few different generative algorithms (we made a lot of ugly palettes…) we decided to try a more manual approach. We pursued creating custom curves for each hue in an effort to keep the contrast scales as optically balanced as possible.
Heavily muted palette
Generating different color palettes makes you confront a basic question. How do you tell if a palette is good? Are some palettes better than others? In an effort to answer this question we constructed various feedback loops to help us evaluate palettes as quickly as possible. We tried a few methods to stress test a palette. At first we attempted to grab the “nearest color” for a bunch of our common UI colors. This wasn’t always helpful as sometimes you actually want the step above or below the closest existing color. But it was helpful to visualize for a few reasons.
Generated palette above a set of components previewing the old and new palette for comparison
Sometime during our exploration in this space, we stumbled across this tweet thread about building a palette for pixel art. There are a lot of places web and product designers can draw inspiration from game designers.
Here we see a similar concept where a number of different palettes are applied to the same component. This view shows us two things, the different ways a single palette can be applied to a sphere, and also the different aesthetics across color palettes.
It’s almost surprising that the default way to construct a color palette for apps and sites isn’t to build it while previewing its application against the most common UI patterns. As designers, there are a lot of consistent uses of color we could have baselines for. Many enterprise apps are centered around white background with blue as the primary color with mixtures of grays to add depth around cards and page sections. Red is often used for destructive actions like deleting some type of record. Gray for secondary actions. Maybe it’s an outline button with the primary color for secondary actions. Either way – the margins between the patterns aren’t that large in the grand scheme of things.
Consider the use case of designing UI while the palette or usage of color hasn’t been established. Given a single palette, you might want to experiment with applying that palette in a variety of ways that will output a wide variety of aesthetics. Alternatively you may need to test out several different palettes. These are two different modes of exploration that can be extremely time consuming to work through . It can be non-trivial to keep an in progress design synced with several different options for color application, even with the best use of layer comps or symbols.
How do we visualize the various ways a palette will look when applied to an interface? Here are examples of how palettes are shown on a palette list for pixel artists.
One method of visualization is to define a common set of primitive ui elements and show each one of them with a single set of colors applied. In isolation this can be helpful. This mode would make it easy to vet a single combination of colors and which ui elements it might be best applied to.
Alternatively we might want to see a composed interface with the closest colors from the palette applied. Consider a set of buttons that includes red, green, blue, and gray button styles. Seeing all of these together can help us visualize the relative nature of these buttons side by side. Given a baseline palette for common UI, we could swap to a new palette and replace each color with the “closest” color. This isn’t always a full-proof solution as there are many edge cases to cover. e.g. what happens when replacing a palette of 134 colors with a palette of 24 colors? Even still, this could allow us to quickly take a stab at automating how existing interfaces would change their appearance given a change to the underlying system. Whether locally or against a live site, this mode of working would allow for designers to view a color in multiple contets to truly asses its quality.
After moving on from the idea of generating a palette from a single color, we attempted to use our logo colors as well as our primary brand colors to drive the construction of modular scales. Our goal was to create a palette that would improve contrast for accessibility, stay true to our visual brand, work predictably for developers, work for data visualizations, and provide the ability to design visually balanced and attractive interfaces. No sweat.
Brand colors showing Hue and Saturation level
While we knew going in we might not use every step in every hue, we wanted full coverage across the spectrum so that each hue had a consistent optical difference between each step. We also had no idea which steps across which hues we were going to need just yet. As they would just be variables in a theme file it didn’t add any significant code footprint to expose the full generated palette either.
One of the more difficult parts, was deciding on a number of steps for the scales. This would allow us to edit the palette in the future to a variety of aesthetics and swap the palette out at the theme level without needing to update anything else.
In the future if when we did need to augment the available colors, we could edit the entire palette instead of adding a one-off addition as we had found this was a difficult way to work over time. In addition to our primary brand colors we also explored adding scales for yellow / gold, violet, teal as well as a gray scale.
The first interface we built for this work was to output all of the scales vertically, with their contrast scores with both white and black on the right hand side. To aid scannability we bolded the values that were above the 4.5 threshold. As we edited the curves, we could see how the contrast ratios were affected at each step. Below you can see an early starting point before the scales were balanced. Red has 6 accessible combos with white, while yellow only has 1. We initially explored having the gray scale be larger than the others.
Early iteration of palette preview during development
As both screen luminosity and ambient light can affect perception of color we developed on two monitors, one set to maximum and one set to minimum brightness levels. We also replicated the color scales with a grayscale filter immediately below to help illustrate visual contrast between steps AND across hues. Bouncing back and forth between the grayscale and saturated version of the scale serves as a great baseline reference. We found that going beyond 10 steps made it difficult to keep enough contrast between each step to keep them distinguishable from one another.
Monitors set to different luminosity & a close up of the visual difference
Taking a page from our game design friends – as we were balancing the scales and exploring how many steps we wanted in the scales, we were also stress testing the generated colors against various analytics components from our component library.
Our slightly random collection of grays had been a particular pain point as they appeared muddy in a number of places within our interface. For our new palette we used the slightest hint of blue to keep our grays consistent and just a bit off from being purely neutral.
Optically balanced scales
With a palette consisting of 90 colors, the amount of combinations and permutations that can be applied to data visualizations is vast and can result in a wide variety of aesthetic directions. The same palette applied to both line and bar charts with different data sets can look substantially different, enough that they might not be distinguishable as being the exact same palette. Working with some of our engineering counterparts, we built a pipeline that would put up the same components rendered against different data sets, to simulate the various shapes and sizes the graph elements would appear in. This allowed us to rapidly test the appearance of different palettes. This workflow gave us amazing insights into how a palette would look in our interface. No matter how many hours we spent staring at a palette, we couldn’t get an accurate sense of how the colors would look when composed within an interface.
Full theme minus green & blues and oranges
Grayscale example & monochromatic Indigo
Analytics charts with blues and purples & analytics charts with blues and greensAnalytics charts with a blues and oranges. Telling the colors of the lines apart is a different visual experience than separating out the dots in sequential order as they appear in the legend.
We experimented with a number of ideas on visualizing different sizes and shapes of colors and how they affected our perception of how much a color was changing element to element. In the first frame it is most difficult to tell the values at 2% and 6% apart given the size and shape of the elements.
Stress testing the application of a palette to many shapes and sizes
We’ve begun to package up some of this work into a web app others can use to create or import a palette and preview multiple depths of accessible combinations against a set of UI elements.
In an effort to make sure everything we are building will be visually accessible – we built a react component that will preview how a design would look if you were colorblind. The component overlays SVG filters to simulate alternate ways someone can perceive color.
Analytics component previewed against 8 different types of color blindness
While this is previewing an analytics component, really any component or page can be previewed with this method.
After quite a few iterations, we had finally come up with a color palette. Each scale was optically aligned with our brand colors. The 5th step in each scale is the closest to the original brand color, but adjusted slightly so it’s accessible with both black and white.
Our preview panel for palette development, showing a fully desaturated version of the palette for reference
A visual representation of how the legacy palette colors would translate to the new scales.
Getting a team of people to agree on a new color palette is a journey in and of itself. By the time you get everyone to consensus it’s tempting to just collapse into a heap and never think about colors ever again. Unfortunately the work doesn’t stop at this point. Now that we’ve picked our palette, it’s time to get it implemented so this bike shed is painted once and for all.
If you are porting an old legacy part of your app to be updated to the new style guide like we were, even the best color documentation can fall short in helping someone make the necessary changes.
We found it was more common than expected that engineers and designers wanted to know what the new version of a color they were familiar with was. During the transition between palettes we had an interface people could input any color and get the closest color within our palette.
There are times when migrating colors, the closest color isn’t actually what you want. Given the scenario where your brand color has changed from blue to purple, you might want to be porting all blues to the closest purple within the palette, not the closest blues which might still exist in your palette. To help visualize migrations as well as get suggestions on how to consolidate values within the old scale, we of course built a little tool. Here we can define those translations and import a color palette from a URL import. As we still have. a number of web properties to update to our palette, this simple tool has continued to prove useful.
We wanted to be as gentle as possible in transitioning to the new palette in usage. While the developers found string names for colors brittle and unpredictable, it was still a more familiar system for some than this new one. We first just added in our new palette to the existing theme for usage moving forward. Then we started to port colors for existing components and pages.
For our colleagues, we wrote out desired translations and offered warnings in the console that a color was deprecated, with a reference to the new theme value to use.
Example of console warning when using deprecated colorExample of how to check for usage of deprecated values
While we had a few bugs along the way, the team was supportive and helped us fix bugs almost as quickly as we could find them.
We’re still in the process of updating our web properties with our new palette, largely prioritizing accessibility first while trying to create a more consistent visual brand as a nice by-product of the work. A small example of this is our system status page. In the first image, the blue links in the header, the green status bar, and the about copy, were all inaccessible against their backgrounds.
cloudflarestatus.com in 2017 & cloudflarestatus.com in 2019 with an accessible green
A lot of the changes have been subtle. Most notably the green we use in the dashboard is a lot more inline with our brand colors than before. In addition we’ve also been able to add visual balance by not just using straight black text on background colors. Here we added one of the darker steps from the corresponding scale, to give it a bit more visual balance.
Notifications 2017 – Black text & Notifications 2018 – Updated palette. Text is set to 1st step in corresponding scale of background colorExample page within our Dashboard in 2017 vs 2019
While we aren’t perfect yet, we’re making progress towards more visual cohesion across our marketing materials and products.
2017
Cloudflare.com & Sign in page 2017Our app dashboard in 2017
2019
Cloudflare homepage & updated Dashboard in 2019
Next steps
Trying to keep dozens of sites all using the same palette in a consistent manner across time is a task that you can never complete. It’s an ongoing maintenance problem. Engineers familiar with the color system leave, new engineers join and need to learn how the system works. People still launch sites using a different palette that doesn’t meet accessibility standards. Our work continues to be cut out for us. As they say, a garden doesn’t tend itself.
If we do ever revisit our brand colors, we’re excited to have infrastructure in place to update our apps and several of our satellite sites with significantly less effort than our first time around.
Resources
Some of our favorite materials and resources we found while exploring this problem space.
Design thinking has been a popular topic in the software industry for the past couple of years. Companies such as Google have implemented this framework to innovate and solve challenges collaboratively.
In this episode of the People & Business Podcast, we talk with Travis Neilson, Interaction Designer at Google. He shared his process of implementing Design Thinking in his everyday work and why is it important.
Design thinking is an interesting idea because when you say design thinking, maybe your mind goes straight to the people who make art and designers.
But that’s not really a good goal and that’s not even the audience of design thinking. Design thinking is for everyone and you can think of it as critical thinking. It’s a process for innovation.
Let me ask you this, who is design thinking for? Like who is innovation for? Is it OK for a developer to innovate? Is it OK for a designer to innovate or a CEO or a marketing manager or even a housewife or a 4th grader in school? Is it OK for them to innovate?
One of the things I’m worried about when people hear, let’s talk about design thinking and people might turn off because they are like, “I am not a designer, I don’t want to jump into that.” It’s for all types of people.
And this is Albert Einstein who is not a designer but definitely an engineer, definitely a creative person, definitely an innovator.
[0:00] How to make everyone getting involved in this process of improving products?
Innovation and design thinking often come incrementally like step by step. And I think that’s something that would be hard to keep sight of especially when you have this really great vision of what you want to do and what you want to achieve overall, those little steps every day is where the work happens.
Innovation actually takes work. That’s one of the things that Steve Jobs kept on saying. Apple is definitely an innovative company and everybody looks to them as an example but Steve kept saying innovation is work, it’s not just waking up in the morning and having a great idea and there is your $1 million idea.
So the things that generate a good product, they are the same things that lead to your collaborators to feel safe and valued. And they are able to have bad ideas and not be worried that they’ll be ridiculed.
Because those crazy ideas that they are going to have, the next one you don’t know is going to be that killer feature or that next billion dollar idea. And so in the daily work, it’s important to keep in mind that innovation happens one step at a time and it requires trust and safety and for everyone to feel that they are a critical part of the machine.
[0:00] What is your process to improve products in your daily work?
In a step by step kind of way, this is what it looks like.
If you can close your eyes and imagine a chart and there are two bumps, it goes up and down and then a bigger bump up and then down. And these bump ups and down, they correlate to how your mind is supposed to open and close.
So you have to be open to ideas but you’ll also have to make decisions and that’s the closing part, that’s the going down part.
Understanding. You are doing discovery, you are learning what the problems are. You are understanding the problem with what we are trying to solve, who is the audience, or who are the people that are going to be the users of it?
Defining. And now that you have a really clear picture of what is your problem but also what is not your problem which is the part down where you decide what’s not in the scope of our work because it’s really easy to get side tracked if you don’t narrow things down.
Ideate. This is where you expand your thinking and you go broad, you go wide. This is what we call 10x Thinking at Google. We say there are no bad ideas, every idea is going to be a step on the road to that winning good idea. And the more the better.
What you want to do is go for volume. Like it’s better to have really bad ideas than have one really good idea at this point because you want to have the volume to inform your next steps.
Prototyping. So once you have gone crazy and have all of these crazy ideas and you want to have that safe place where people can contribute. And after that we are going to start the work of prototyping and testing.
The thing about prototyping is that the more rough and the more simple the prototype, the prototype that can speak to the concept the most simply, is the winning prototype.
So if you are trying to do too much with your prototype and you test it, you don’t know what’s actually being tested.
So your prototype needs to be really simple and that’s why we say it’s better to make a lot of different prototypes than to do one really good prototype similar to the ideas. Like if you have three different ideas, make three different prototypes and don’t try to put all of those ideas into one prototype.
And the prototype can be anything. Like if you are designing web solutions, then maybe the prototype is a web interface. Or if you are designing a car, maybe it’s the car. But you want to think about the critical experience that you are trying to test.
Reiterate. The last step is critical. You have to reiterate. You have to go back to the beginning and say, ‘Does this match our thesis? Does this match what we wanted to achieve? And if not, can can continue that cycle?’
The cycle of going up and down these two hills on the graph does not have an end. It’s endless. And it happens in big ways. You can take an idea through the graph and it also happens in small ways. So like when you are defining something, maybe you make a little prototype and talk to somebody. And it helps you define things.
[0:00] In your daily work you go through this process by yourself, a team of designers or is it a multi-disciplinary team?
So when I’m at my desk and I’m alone and I’m maybe moving some pixels around, it’s my job to go through these steps quickly with myself and decide is this the best idea? Can I think of something more crazy? Can I talk to somebody and test my idea? Can I see what they have done? Can I do some research?
But it’s also the responsibility of the engineer. Like how is the best way that they can implement a design? Is it the responsibility of the CEO? Is this the best way to organize my company and my team so that they can move fast and be able to innovate.
Design thinking is everyone’s responsibility it’s not just one profile. And it happens in a lot of different ways.
If you are making a product, like let’s say the insurance product, you have a lot of different stakeholders in the insurance product. You have the people who after the product is created they are going to sell it.
So you want to talk to these people and say, “Is this something that you can sell? Is this a story that makes sense when you are trying to sell?”
You want to talk to the people who are doing the customer support. Like what kind of design thinking do they bring to the table?
Everybody has their own view and respective angle to the problem. And you want to respect those, you want to be able to give everybody that voice and allow everybody to take part in design thinking.
So it’s easy to say, “Design thinking is everyone’s responsibility.” and then just expect them to do it. But really it’s the culture that you are in that encourages it.
And often times that comes from the top. So the people who are in charge kind of set the tone for the culture a lot of the time.
[0:00] It seems like design thinking is just a model for successful tech corporations but it’s not, it’s actually for any kind of organization. So, How do you see having this impact on any other company’s product development and the business in general?
You are right. It comes from the Stanford School of Design and it’s very tech centric. We like to talk about it out here in the west a lot. And it can be tied maybe to start up culture and things like that.
But it is a critical thing for all types of businesses and organizations, not just businesses, like in my family I have a wife and two kids and we try to use design thinking. We try to think about how we are teaching our children to be good humans and what education we want to give them.
We try to use design thinking when we are deciding on what vacation we want to take.
And hopefully it’s not like we are busting out our charts and saying let’s [inaudible] vacation. It’s like a part of our culture and we can have the respect for each other to respect our ideas and somebody is going to say something crazy and be like, “That’s interesting, how can I add on that?”
There is this really good example of design thinking that we talk about a lot here when we are doing presentations on design thinking and stuff. And it’s actually not a tech company that we talk about. It’s Crest, the toothbrush company.
Maybe you’ve seen this, but it’s like the number one seller of all toothbrushes by far. And I don’t know if it’s Crest, maybe Oral B. I don’t know what it is. But then they show the prototypes of their toothbrush and their critical thinking. Like what do people want when they are brushing their teeth? And what leads to a good toothbrushing experience?
And they have all these crazy ideas. There is one that I remember which is my favorite one, imagine you are holding a toothbrush and there is the stick, the part that you hold. And then the head branches off like the shape of a Y and there are two brushes on each arm of the Y.
It’s supposed to get on each side of your tooth. And it’s just a crazy idea. Somebody was like, “why don’t we?” And nobody told them no. Somebody said, cool let’s try it.
So they went through all of these prototypes and they found what was good about that one.
You’ve seen those toothbrushes that have the blue on the side, like those brushes that are a little bit more firm on the outside and softer on the inside. Like, that all comes to play into the final product.
That’s a really great example of design thinking and innovation and it’s not even a tech company, it’s a toothbrush company.
[0:00] What challenges do you see for developers or any technical role to adapt to these methodologies?
In my experience, it’s a mental thing. So we go to school when we are young and we are taught to think in a certain way. And we are taught to ask certain questions. And if we ask the wrong question, then it’s wrong.
So for example in school you have to ask permission to go to the bathroom. You have to ask permission. We are very interested in authority and everything is structure and organization. So we ask permission to go to do this, or permission to join this team, or permission to work on this project.
And the problem is that we believe falsely that we need permission for things.
But I think that if we were able to somehow break, and this is very hard because I’m a father and so I see my kids and I’m just like, “Please, please clean your room. I just want to live in a nice place.”
It’s very hard but you have to enable them to make that choice for themselves for them to want to join the team or work on the product or, in my case with my children, to clean their room and to not have them fixate on authority.
Because once they leave behind the idea that they need permission to be creative or to think of a new idea or to try something new, once they leave the permission behind then they are free to do anything and try and fail and try again.
I think that’s one of the biggest complications or the biggest roadblocks to installing design thinking into an organization or a community is that people are waiting around for somebody to give them authority.
And we work very hard at Google to try and overcome that. In fact I’m on a team and just yesterday we were talking about innovation and the management of the team that I’m on is putting into place new steps in our workflow to kind of try to foster the idea that we can make work that fails.
And so without going too much into that, when we have presentations and we are presenting our ideas, now it’s also required that we present crazy ideas.
You know Google’s famous 20% of your projects, our team says to use judgement but you can spend 20% following a crazy idea and we want to see it.
The main meeting where things are approved or not, this is ready to launch can we go? We want you to share crazy ideas too.
That does two things. Number one, it enables the designers and the thinkers and the engineers and the product managers, that enables us to start thinking weird which is good. But also it’s going to push the buttons of the authority.
That’s one way that we’ve been thinking about design thinking here and how to bake it into our culture is that we are requiring things that are not going to work.
[0:00] What advice do you have for companies that want to implement design thinking?
It’s definitely difficult to change your habits, like, change the way you’ve been thinking and working for so long.
What I’ve noticed is that as much as I say you don’t need permission, if we didn’t obey the traffic lights, if we didn’t obey the laws of human decency, or things like this, we would have chaos. It would be no good.
The problem comes when people believe that it’s only through permission that we can ever do anything on our own or anything new.
So setting that aside, permission is a big deal in our culture. So one of the fastest ways that a company can implement design thinking into their culture is to leverage the need that we have for permission and authority and put it into place using those means.
I just made an example where here at Google how it’s required now when we are making presentations to present those crazy ideas. It’s required and that comes from the top.
And I think one of the fastest ways to get a cultural shift is to come from the top down.
But it’s very hard and it takes responsibility from a lot of people and you have to hold them accountable and sometimes people are resistant to change depending on their risk tolerance. But generally that’s the fastest way I think.
