The personal website of Matthew Ström
Writing about design, code, work, and culture
2023-03-24T00:00:00Z
https://matthewstrom.com
Matthew Ström
matthew.h.strom@gmail.com
Creating a positive workplace community
2023-03-24T00:00:00Z
https://matthewstrom.com/writing/culture-policy-enforcement/
<p>Your workplace community — the way you interact with your coworkers every day — can have a major impact on your productivity, happiness, and self-worth. It’s natural to want to shape the community in ways that might make you feel more comfortable. But how can you shape it?</p>
<p>Over my career I’ve developed a framework that strikes a balance between authority and autonomy; it’s neither omnipotent intelligent design nor chaotic natural selection.</p>
<p>The framework consists of three components: culture, policy, and enforcement. Each shapes and influences the other in an endless feedback loop. By understanding them in turn, and seeing how they intersect, we can be intentional in how we design our community.</p>
<h2 id="what-is-culture%3F">What is culture?</h2>
<p>For most of my career, I’ve held that culture is all that mattered. Specifically, I believed the quote often misattributed to Peter Drucker: “Culture eats strategy for breakfast.” Which is to say, if your team’s culture isn’t aligned with your strategy, you’ll never succeed.</p>
<p>But what is culture? “Culture” refers to the shared values, beliefs, attitudes, and rituals that shape the interactions among employees within an organization. If you were to draw a big Venn diagram of every single coworker’s mental model of the company, culture would be the part in the middle where they all intersect.</p>
<p>In 2009, Patty McCord and Reid Hastings (chief talent officer and CEO of Netflix, respectively) wrote the book on modern tech company culture. More accurately, they wrote <a href="https://www.slideshare.net/reed2001/culture-2009" target="_blank" rel="noopener">a 129-slide Powerpoint deck on the company’s culture</a>; Sheryl Sandberg called it “one of the most important documents ever to come out of Silicon Valley.” It defined seven aspects of the culture, including its values, expectations for employees, approach to policy, ways of making decisions, compensation, and career progression frameworks.</p>
<p>But culture can’t be written down. In the very same deck, McCord and Hastings cited Enron’s company values (“Integrity, communication, respect, excellence”). The values, they noted, were chiseled in marble in the lobby of Enron’s office. But history shows that Enron’s <em>real</em> company culture contained none of those things.</p>
<h2 id="what-is-policy%3F">What is policy?</h2>
<p>When I was running my own company, I genuinely enjoyed thinking about company policies. At the time, I felt that even though the company was small and relatively poor, our policies could attract the best talent in the world.</p>
<p>“Policy” refers to the guidelines, rules, and procedures that govern employees. Some policies are bound to legal requirements: discrimination, harassment, and security policies are in place to ensure that employees don’t break the law.</p>
<p>Other policies aren’t backed up by laws, but apply to the whole company equally. Vacation policies, for example, usually dictate the number of days an employee can take paid leave from work, and how employees should schedule and coordinate those days.</p>
<p>Other policies still are put in place by smaller teams of coworkers to govern functional or cross-functional units as they do their work. These are policies like requiring regular critiques and approvals of creative work, getting peer code reviews, or doing postmortems after technical issues.</p>
<p>Generally, I’m an acolyte of the McCord school of policy, which is to say I don’t think we need much at all: according to Netflix’s culture deck, in 2004 she said “There is no no clothing policy at Netflix, but no one has come to work naked lately.” In 2009, GM’s current CEO Mary Barra (then the VP of global human resources) demonstrated this approach in dramatic fashion, <a href="https://www.businessinsider.com/gm-ceo-mary-barra-on-changing-gms-dress-code-2015-3?op=1" target="_blank" rel="noopener">rewriting the company’s clothing policy</a> from a 10-page manifesto to the two-word maxim “dress appropriately.”</p>
<p>However, I’ve seen the minimal policy approach go awry; when not supported by cultural norms or consistent enforcement, the lack of policy can reinforce a status quo of privilege, bias, and hierarchy.</p>
<h2 id="what-is-enforcement%3F">What is enforcement?</h2>
<p>I’ve always struggled with enforcement. I believed that if culture and policy were strong, then there was no need for enforcement; everyone would feel compelled to follow the high standard they held for each other. But recently, I’ve understood its importance. That’s why it’s the third piece of this puzzle, the last one to fall into place.</p>
<p>Culture is an unwritten belief. Policy is a recorded norm. “Enforcement” is an action that demonstrates those beliefs and norms. It can take many forms, like counseling, coaching, or discipline. It can be as light and casual as an emoji in a group chat, or as grave and serious as termination without notice.</p>
<p>Effective enforcement is hard. It requires being both consistent <em>and</em> flexible. Every situation is unique; good enforcement is fair and equitable, with an emphasis on clear communication and collaboration. While, traditionally, HR is the group that enforces a company’s policies, the highest performing teams police themselves.</p>
<p>Enforcement can positively reflect cultural values and policy beliefs. For instance, Kayak requires its engineers and designers to occasionally handle customer support, a task usually reserved for trained associates. Instead of merely suggesting this practice, Kayak enforces it. <a href="https://www.inc.com/chris-beier-and-daniel-wolfman/paul-english-kayak-co-founder-customer-service-programmers.html" target="_blank" rel="noopener">Kayak co-founder Paul English says</a> “once they take those calls and realize that they have the authority and permission to give the customer their opinion of what is going on and then to make a fix and release that fix, it’s a pretty motivating part of the job.”</p>
<h2 id="balancing-the-feedback-loop">Balancing the feedback loop</h2>
<p>Culture, policy, and enforcement constitute a web of forces in tension, holding the workplace community in balance. If any of the three pull too hard, the others can break, and the community can fall apart. So how do you keep the tension working for you?</p>
<p><strong>Culture</strong> can influence <strong>policy</strong> by first acknowledging and valuing policy. This doesn’t mean that policy has to be exhaustively written down; Mary Barra’s rewrite of GM’s dress code wasn’t about removing policy altogether. She was asking managers and employees to think carefully about the policy, to consider how it shaped (and was shaped by) the company’s culture, and to make decisions together. At <a href="https://wpa.wharton.upenn.edu/content/video/wharton-people-analytics-conference-2018-keynote-discussion-mary-barra-adam-grant/" target="_blank" rel="noopener">Wharton’s 2018 People Analytics Conference</a>, Bara said: “if you let people own policies themselves, it helps develop them.”</p>
<p><strong>Culture</strong> can influence <strong>enforcement</strong> by changing the manner of enforcement altogether. In a positive culture, enforcement is likely to be carried out in a fair and consistent manner. In a negative workplace culture, enforcement may be carried out in a punitive or arbitrary manner, which can lead to resentment. If your team’s mechanisms of enforcement are unclear, ask: “How do our cultural values result in action?”</p>
<p><strong>Policy</strong> influences <strong>culture</strong> by creating common knowledge. It’s a kind of mythos, an origin story, or a shared language. On most teams, one of the first things any new member does is learn the team’s policies; the first week of an employee’s tenure is usually the only time they read the company handbook. This sets the tone for the rest of their time with the company or team. Take advantage of those moments to build your culture up.</p>
<p><strong>Policy</strong> can influence <strong>enforcement</strong> by setting expectations, creating consistency, and guaranteeing fairness. Without clear policy, consistent enforcement is impossible and may seem arbitrary. If there is no policy at all, enforcement is entirely subjective and personal. Sometimes, the key to enforcement lies in simply defining, discussing, and committing to a policy. In the event that enforcement is necessary, the shared understanding created by clear policy will make it easy for the team to act.</p>
<p><strong>Enforcement</strong> shapes <strong>culture</strong> by buttressing the shared values of the team. Negative aspects of culture like privilege and bias are, in part, a result of inconsistent enforcement of policy: unfair enforcement creates a culture where some people expect to be exempt from some rules. Leaders should be just as beholden to a team’s values as those they lead, or else the culture will splinter along the fault lines of management layers.</p>
<p><strong>Enforcement</strong> shapes <strong>policy</strong> by creating (or reducing) “shadow policy.” That is, if not all policies are enforced, and if there are expectations that are enforced but not written or communicated, team members will tend to ignore policies altogether. In many cases of white collar crime or malfeasance, shadow policies overwhelmed the written rules, undermining them entirely.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Culture, policy, and enforcement are three aspects of every workplace community. The ways in which they interact define the health of that community. When they’re in balance, the community can grow and adapt to challenges without losing its identity, like an animal evolving, reacting to its environment by adapting over generations.</p>
<p>If those aspects of community are out of balance, teams, functions, and entire companies are brittle and self-destructive. Bad culture undermines well-intentioned policy. Unclear, unwritten policy leads to unfair and inconsistent enforcement. Too much enforcement, or not enough, or the wrong kind at the wrong time, can fracture culture into in-groups and out-groups.</p>
<p>In these ways, the balance of culture, policy, and enforcement is vital. Being vigilant about the balance, regardless or your role, will help you shape and guide your workplace community. The more your team works to understand these components, the more they make intentional choices to keep them in healthy tension, the happier, productive, and more fulfilled you’ll be.</p>
Design-by-wire
2023-03-02T00:00:00Z
https://matthewstrom.com/writing/design-by-wire/
<p>There’s a lot of fear in the air. As AI gets better at design, it’s natural for designers to be worried about their jobs. But I think the question — will AI replace designers? — is a waste of time. Humans have always invented technology to do their work for them and will continue to do so as long as we exist.</p>
<p>Let’s use our curiosity and creativity to imagine how technology will help us be better, more efficient, and more impactful.</p>
<p>So, in that spirit, I’d like to share a metaphor that I think paints a picture of how the job of design will change in the next decade.</p>
<h2 id="flying-by-wire">Flying by wire</h2>
<p>Commercial airplanes are some of the most complicated machines humans have ever built.</p>
<p>It took all of Wilbur Wright’s skill to fly the first powered airplane for a minute, just 10 feet off the ground. That plane, the <em>Wright Flyer</em>, could carry one person; it weighed 745 pounds with fuel and could reach a height of 30 feet at a maximum speed of 30 miles per hour.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-by-wire/#fn1" id="fnref1">1</a></sup> The Airbus A380, currently the world’s largest commercial airliner, weighs over a million pounds when fully loaded. It can carry up to 853 people, flying up to 43,000 feet at a cruising speed of 561 mph — 85% the speed of sound. Just two people pilot the A380.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-by-wire/#fn2" id="fnref2">2</a></sup></p>
<figure data-type="image"><img src="https://matthewstrom.com/images/design-by-wire-1.jpg" alt="The cockpit of an Airbus A380. Photo by Steve Jurvetson, CC BY 2.0" /><figcaption>The cockpit of an Airbus A380. <span class="figure--credit">Photo by <a href="https://secure.flickr.com/photos/jurvetson/7510460530/in/photostream" target="_blank" rel="noopener">Steve Jurvetson</a>, <a href="https://commons.wikimedia.org/w/index.php?curid=23313866" target="_blank" rel="noopener">CC BY 2.0</a></span></figcaption></figure>
<p>The A380, and all modern commercial airplanes, wouldn’t exist without something called “fly-by-wire.” Fly-by-wire is a system that translates a pilot’s inputs — changing the throttle to speed up or slow down, controlling pitch and roll with the yoke, turning knobs and dials in the cockpit — into coordinated movements of the airplane’s engines and control surfaces. The first fly-by-wire systems were a veritable nervous system of electric relays and motors; today, they’re sophisticated computers in the belly of the plane.</p>
<p>Originally, fly-by-wire had nothing to do with automation. As airplanes got larger, the cables, rods, and hydraulic links connecting the cockpit to the rest of the plane became a monumental design challenge. By replacing those complex, bulky components with electrical wires and switches, airplanes would be lighter and easier to maintain, with more room for passengers and cargo.</p>
<p>The first commercial airplane with a fly-by-wire system was the supersonic Concorde jet. At speeds of over Mach 1, it would be almost impossible for a pilot to move the control surfaces of the airplane through sheer mechanical force; fly-by-wire allowed pilots to smoothly operate the plane at any speed. And because sudden changes at top speed could be catastrophic, the fly-by-wire system could use analog circuitry to smooth out a pilot’s inputs.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/design-by-wire-2.jpg" alt="An experimental fly by wire system in the Vought F-8 Crusader using data-processing equipment adapted from the Apollo Guidance Computer" /><figcaption>An experimental fly by wire system in the Vought F-8 Crusader using data-processing equipment adapted from the Apollo Guidance Computer</figcaption></figure>
<p>As fly-by-wire systems became more common, they went from faithfully transferring pilot’s inputs to interpreting and adjusting them. The Airbus A320, introduced in 1988, featured the first digital (computerized) fly-by-wire system; it included “flight envelope protection,” a system that prevents pilots from taking any action that would cause damage to the airplane. Depending on the speed, altitude, and phase of flight, the fly-by-wire system will ignore certain pilot inputs altogether.</p>
<p>Fly-by-wire has been the focus of both scrutiny and praise since its introduction. On one hand, it has saved lives: When US Airways Flight 1549 (an Airbus A320) flew through a flock of birds on takeoff, it lost all power. The pilots had to make an emergency landing in the Hudson river, flying the airplane unusually low and slow, risking putting the plane into an uncontrollable stall. The fly-by-wire system, with its flight envelope protection, ensured the plane could maneuver at the very edge of its capability, leading to a controlled landing with only a few serious injuries for those aboard.</p>
<p>On the other hand, fly-by-wire has been criticized for replacing parts of pilots’ expertise. In 2009, Air France Flight 447 (another Airbus A320), crashed in the Atlantic Ocean, killing all 228 passengers and crew. An investigation into the cause of the crash concluded that the autopilot and fly-by-wire protections started to malfunction when ice crystals interfered with the aircraft’s sensors; the pilots, used to flying with the safety of flight envelope protection, couldn’t correct for the errors, stalled the plane, and crashed into the ocean.</p>
<p>Whether you think fly-by-wire is a crucial innovation or a crutch, its effect on the airline industry is easy to demonstrate. Bigger planes that fly farther can carry more passengers to more destinations. From 1970 to 2019, the number of airline passengers worldwide has grown over 1,400%, from 310 million to 4.4 billion.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-by-wire/#fn3" id="fnref3">3</a></sup> In the same time period, the number of commercial pilots — pilots holding “commercial” or “airline transport” licenses — has increased 27%, from 208,027 in 1969 to 265,810 in 2019. Pilots’ salaries have stayed consistently high: an average airline captain made about $51,750 a year in 1975<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-by-wire/#fn4" id="fnref4">4</a></sup>, the equivalent to $287,770 in 2023<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-by-wire/#fn5" id="fnref5">5</a></sup>. An airline captain with six years of experience can expect to make $285,460 today.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-by-wire/#fn6" id="fnref6">6</a></sup></p>
<h2 id="designing-by-wire">Designing by wire</h2>
<p>Just as fly-by-wire systems have made pilots more efficient (not redundant), AI and automation will make designers more effective.</p>
<p>Imagine a design-by-wire system. The job of the designer is to indicate what they want the desired outcome to be. Like a pilot pushing the throttle to make the airplane accelerate, a designer could assemble a wireframe or configure a screen to enable a user to accomplish a task. The design-by-wire system could then <em>interpret</em> the designer’s instructions.</p>
<ul>
<li>The system could change aspects of the design to <strong>use the latest design systems components</strong> in the correct way.</li>
<li>The system could optimize the design to <strong>make implementation cheaper, faster, or less prone to bugs</strong>.</li>
<li>The system could automatically <strong>fix accessibility issues</strong>, or <strong>add information to address accessibility concerns</strong> like keyboard shortcuts, screen reader labels, or high-contrast and reduced-motion variations.</li>
<li>A designer could list out hypotheses about the design (like “will this convert the most users to paid plans?”), and the system could <strong>provide designs for multivariate testing</strong>, along with test or research plans.</li>
<li>The system could <strong>automate QA by testing designs against simulated user behavior</strong>, adjusting the designs to cover the wide and unpredictable cases of real user interaction.</li>
</ul>
<p>You can already see these kinds of systems taking shape. <a href="https://www.noya.io/" target="_blank" rel="noopener">Noya</a> promises to take wireframes and turn them into production code using an existing design system. <a href="https://www.usegalileo.ai/" target="_blank" rel="noopener">Galileo AI</a> claims to be able to create fully-editable designs from a single text description. Diagram’s <a href="https://blog.diagram.com/p/introducing-genius" target="_blank" rel="noopener">Genius</a> aims to provide contextual suggestions in Figma, filling out designs with the click of a button. These are just early tech previews, but they paint a picture of AI becoming a core component of our design tools.</p>
<p>At the end of the day, design-by-wire systems are centered around the designer. Like the pilot of an Airbus A380, the designer becomes the operator of a fantastically complicated machine.</p>
<p>There is a risk in designing by wire. If designers don’t understand how the system works, they risk losing control, becoming less effective than they were before. That’s why it’s important that we become experts in AI; we don’t have to be able to write the code that drives these tools, but we need to understand the way the systems work.</p>
<p>To use the machine to its full potential, the designer has to understand the intricacies of its operation: Pilots, by analogy, train for years in simulators before they step foot in the cockpit of a real airliner. Here’s a few resources you can use to learn more about GPTs, the systems driving the current boom in AI:</p>
<ul>
<li>Stephen Wolfram’s “<a href="https://writings.stephenwolfram.com/2023/02/what-is-chatgpt-doing-and-why-does-it-work/" target="_blank" rel="noopener">What is ChatGPT Doing … and Why Does It Work?</a>” is an incredibly in-depth exploration of the technology and concepts, with interactive code.</li>
<li>Ted Chiang’s “<a href="https://www.newyorker.com/tech/annals-of-technology/chatgpt-is-a-blurry-jpeg-of-the-web" target="_blank" rel="noopener">ChatGPT Is a Blurry JPEG of the Web</a>” uses analogies to explain the strengths and weaknesses of GPT technology.</li>
<li>3Blue1Brown has a <a href="https://www.3blue1brown.com/topics/neural-networks" target="_blank" rel="noopener">5-part video series explaining the basics of neural networks</a>, including how they are trained.</li>
<li>The Coding Train has <a href="https://youtube.com/playlist?list=PLRqwX-V7Uu6aCibgK1PTWWu9by6XFdCfh" target="_blank" rel="noopener">26 videos on neural networks</a>, in which Daniel Schiffman builds and explains various components and variations of neural nets. There’s also an <a href="https://natureofcode.com/book/chapter-10-neural-networks/" target="_blank" rel="noopener">accompanying chapter in Schiffman’s book The Nature of Code</a>.</li>
</ul>
<p>All four of the above authors are amazing teachers who mix mathematical depth with intuitive analogies and mental models.</p>
<h2 id="conclusion">Conclusion</h2>
<p>AI will change our jobs in ways we can’t imagine.</p>
<p>This has been happening to airline pilots since the advent of fly-by-wire systems. In the transition to newer, faster, larger, and more efficient airplanes, pilots have needed more and more technical understanding and skill in interacting with the computers that fly their planes.</p>
<p>But pilots are still needed. Likewise, designers won’t be replaced; they’ll become operators of increasingly complicated AI-powered machines. New tools will enable designers to be more productive, designing applications and interfaces that can be implemented faster and with less bugs. These tools will expand our brains, helping us cover accessibility and usability concerns that previously took hours of effort from UX specialists and QA engineers.</p>
<p>It’ll take years of training to become an expert at designing with these new AI-powered systems. Start now, and you’ll stay ahead of the curve. Wait, and the challenge won’t come from the AI itself; it’ll be other designers — ones who are skilled at AI-powered design — who will come for your job.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>“Wright Flyer.” In <em>Wikipedia</em>, February 19, 2023. https://en.wikipedia.org/w/index.php?title=Wright_Flyer&oldid=1140234161. <a href="https://matthewstrom.com/writing/design-by-wire/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>“Airbus A380.” In <em>Wikipedia</em>, February 10, 2023. https://en.wikipedia.org/w/index.php?title=Airbus_A380&oldid=1138648822. <a href="https://matthewstrom.com/writing/design-by-wire/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>“Top 15 Countries with Departures by Air Transport - 1970/2020 -.” Accessed February 20, 2023. https://statisticsanddata.org/data/top-15-countries-with-departures-by-air-transport-1970-2020/. <a href="https://matthewstrom.com/writing/design-by-wire/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>“Industry Wage Survey. Scheduled Airlines.” <em>Scheduled Airlines</em>, Bulletin / Bureau of Labor Statistics, 1977 1972, 2 v. https://catalog.hathitrust.org/Record/009881222. <a href="https://matthewstrom.com/writing/design-by-wire/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Calculated with <a href="https://www.in2013dollars.com/us/inflation/1975?amount=51750" target="_blank" rel="noopener">https://www.in2013dollars.com/us/inflation/1975?amount=51750</a> <a href="https://matthewstrom.com/writing/design-by-wire/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>“Major Airline Pilot Salary: First Officer and Captain Pay in 2023 / ATP Flight School.” Accessed February 18, 2023. https://atpflightschool.com/become-a-pilot/airline-career/major-airline-pilot-salary.html. <a href="https://matthewstrom.com/writing/design-by-wire/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
What it means to design a platform
2023-01-11T00:00:00Z
https://matthewstrom.com/writing/platform-design/
<p>After four months of parental leave, I came back to work and noticed something different. Many of the words, phrases, acronyms, and figures of speech I took for granted no longer held the same meanings. Specifically, the word “platform:” before my time off, I would breeze over it in any presentation or document without a second thought. Now, I find it totally devoid of any meaning.</p>
<p>I decided to start sketching out some possible defintions, and quickly uncovered something exciting: platform design isn’t just another flavor of UX or product design. There are challenges, mental models, and requisite skills that set platform design apart. I lead the platform design team;the work that we can do as platform designers gives us extreme leverage in solving user problems. We have the opportunity to make an outsize difference in the experience of our users.</p>
<p>What follows is the result of my exploration of what sets platform design apart. If you are a platform designer, too, I hope it gives you an idea of the potential of your work.</p>
<h2 id="interfaces">Interfaces</h2>
<p>Application designers fit components, modules, containers, and data together to create the best user experience possible. Platform designers additionally focus on the layers between all those elements — the <em>interfaces</em> — to ensure that <em>everything that can be possibly built on the platform</em> has the same high bar of quality.</p>
<p>Developers use the concept of an API to plan the way two things fit together (“interface” is the I in API). Good APIs can change the world: TCP/IP enables every computer in the world to communicate with every other. Stripe’s famous “<a href="https://www.bloomberg.com/news/features/2017-08-01/how-two-brothers-turned-seven-lines-of-code-into-a-9-2-billion-startup" target="_blank" rel="noopener">7 lines of code</a>” could connect any piece of software to the complex global banking system. Jeff Bezos’ insistence on API design at Amazon allowed the company to turn its own infrastructure into its most profitable product (AWS).</p>
<p>Platform designers have to understand and plan experience APIs: interfaces both in space (how elements appear beside each other, in front of or behind each other, inside or surrounding each other) and in time (how elements or entire screens appear before or after each other, how to communicate causal relationships). With the right interfaces, any application built on the platform will have a great user experience.</p>
<h2 id="incentives">Incentives</h2>
<p>Designing applications requires understanding the balance between motivation and friction. It’s almost mathematical: if a user’s motivation is greater than the friction they experience, the user will complete a task. If users aren’t completing a task, you can increase the motivation through marketing and guidance, or decrease the friction through usability improvements or automation.</p>
<p>Designing a platform involves the same balancing act, but with an additional variable: whether we intend to or not, we influence the <em>incentives</em> for both application builders and end users.</p>
<p>Platform incentives are complex. Take Spotify, for example: they create incentives for artists in the form of paying for each stream of a song. So, in 2014, funk band Vulfpeck released an album on Spotify called <em>Sleepify</em> consisting entirely of 30-second-long silent “songs”. Vulfpeck encouraged fans to play the album on repeat while they slept. After it garnered 5 million streams, Spotify removed the album, but paid the band accordingly; Vulfpeck used the $20,000 it earned to go on tour.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/platform-design/#fn1" id="fnref1">1</a></sup></p>
<p>Incentives are a powerful tool unique to platform design. To create a successful platform, we need to think deeply about all the ways in which incentives can lead to desired outcomes, or ways in which they motivate bad — or, in Vulfpeck’s case, merely mischievous — actors.</p>
<h2 id="emergence">Emergence</h2>
<p>Application users usually behave in predictable ways. We can study their tendencies and preferences, then create experiences to fit our observations. Data like task success, retention rate, user sentiment, and engagement tells us how our predictions matched the real world. Over time, by researching and iterating, we come closer to meeting business goals.</p>
<p>We can’t always predict platform users’ behavior. The people building applications on the platform and the people using those applications form a feedback loop; both groups develop creative and unexpected ways to use (or abuse) the platform. Think of Twitter users inventing hashtags and @-mentions, or early bulletin board users using punctuation to create emoticons. These ideas spread far beyond their original application, becoming deeply-embedded cross-platform features. This is called <em>emergence</em>.</p>
<p>Emergence presents a unique opportunity in design. When behavior is predictable, we design tightly-tuned experiences (“happy paths”) to realize the best outcomes for users. When behavior is emergent, users’ creativity becomes a multiplier on top of our own, exponentially increasing the best outcomes for both users and business.</p>
<h2 id="second-order-thinking">Second-order thinking</h2>
<p>Application design is all about first-order thinking. A user interacts with the application, and something happens as a result — cause and effect. Causes and effects can be separated by space and time, but their constant tick and tock drives the crucial engagement loop of every successful product.</p>
<p>Platform design requires second-order thinking, where first-order effects are causes, too. A great example of this is attributed to Warren Buffett: imagine a crowd watching a parade. A few people stand on their tiptoes — that’s a first-order cause. Now, they can see better — the first-order effect. What happens next? All the people behind them have to stand on their tiptoes, too — that’s the second-order effect. In the end, everyone is worse off, and nobody can see any better.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/platform-design/#fn2" id="fnref2">2</a></sup></p>
<p>Second-order thinking requires creativity. Platform designers have to ask: how will interfaces and incentives create emergent behavior? How will those behaviors change the incentives? What can we build to channel these feedback loops towards our goals? Though these thought exercises will never fully predict the outcomes, without them, a platform is doomed.</p>
<h2 id="case-study%3A-lego">Case study: Lego</h2>
<p>Let’s put all these pieces together.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/platform-design/#fn3" id="fnref3">3</a></sup></p>
<p>Lego is one of the most successful toy companies of all time due to their rigorous approach to platform design. Lego bricks are clearly fun to play with, but Lego’s multi-generational success story goes deeper than that — to interfaces, incentives, emergence, and second-order thinking .</p>
<h3 id="interfaces-2">Interfaces</h3>
<p>Lego didn’t invent interlocking plastic bricks; Hilary Page, owner of Kidicraft, secured a patent for injection-molded building blocks in 1940. But Lego succeeded, and Kidicraft didn’t. It wasn’t the bricks themselves that mattered. It’s was the way they fit together — their interfaces.</p>
<p>The level of precision of a Lego brick is mesmerizing. Manufacturing tolerances (exact to 2 microns, less than the width of a human hair) are so rigorously maintained that every lego brick ever manufactured attaches to every other brick. Pieces fit together and lock tightly, but can be pulled apart easily by a child. Instructions for lego sets also keep children in mind, only using pictures to communicate.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/platform-design/#fn4" id="fnref4">4</a></sup></p>
<p>But the simplicity of the design is misleading: if you have 6 standard lego bricks, you can put them together in 915,103,765 different ways.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/platform-design/#fn5" id="fnref5">5</a></sup></p>
<p>The ingenious design of standard interfaces, together with an ironclad commitment to precise adherence to those standards, is why Lego succeeds.</p>
<h3 id="incentives-2">Incentives</h3>
<p>Lego incentivizes play. Specifically, they encourage builders to (literally) think outside the box, combining pieces from widely different sets to produce new and inventive designs. They do this in both <em>direct</em> and <em>indirect</em> ways, and through both <em>positive</em> and <em>negative</em> interventions:</p>
<figure>
<table>
<thead>
<tr>
<th class="table--header-empty"></th>
<th>Direct</th>
<th>Indirect</th>
</tr>
</thead>
<tbody>
<tr class="l--border-btm-width-s l--border-btm-style-solid c--border-btm-gray-2">
<th scope="row">Positive</th>
<td> Sponsored events like <a href="https://www.lego.com/en-us/rebuild-the-world/build-day">Lego Build Day</a>, where builders are encouraged to explore ideas like “take a space ship and rebuild it into a panda bear hammock.”
</td>
<td>Allowing third parties to sell and resell individual Lego pieces, enabling builders in any part of the world to find any piece they want.</td>
</tr>
<tr>
<th scope="row">Negative</th>
<td>Setting clear rules for first-party designers of Lego sets that set the tone for builders: for example, sets can’t require bricks to be assembled in ways that can’t be disassembled later</td>
<td>Using trade protections to keep low-quality third-party parts from entering the market, keeping the guarantee of quality for lego bricks high.</td>
</tr>
</tbody>
</table>
</figure>
<p>We can imagine a Lego that allows for parts with unique pieces that don’t fit with others, incentivizing consumers to constantly buy new kits, and locking third parties out of the market. But it’s hard to see how this version of Lego would be as successful.</p>
<h3 id="emergence-2">Emergence</h3>
<p>There are many examples of how Lego users have adapted the system to do things the original designers never intended. In some cases, Lego has even brought those innovations back into the core system.</p>
<p>In 1985, a group of computer scientists had a big idea. What if they connected a programming language to physical machines, like Lego creations? Partnering with Lego through the MIT Media Lab, the researchers created Lego Logo, a beginner-friendly robotics programming language that was optimized for creativity. Since then, programmable Legos — “Mindstorms” and “Technics,” offshoots of the original Lego Logo products — have been used to build everything from a <a href="https://www.youtube.com/watch?v=X0pFZG7j5cE" target="_blank" rel="noopener">Rubik’s Cube-solving robot</a> to c<a href="https://www.cnet.com/culture/lego-compatible-prosthetic-arm-lets-kids-build-their-own-hand/" target="_blank" rel="noopener">ustomizable prosthetics for children</a>.</p>
<p>Lego also encourages emergence in passive ways. Take <a href="https://brickit.app/" target="_blank" rel="noopener">Brickit</a>, an app created by Leonid Aleksandrov. Snap a photo of your Lego pieces and it’ll show you what you can build, with 3D instructions. You can even scan finished creations and Brickit will reverse-engineer the instructions so you can share your ideas with others. Surprisingly, Lego hasn’t sued Aleksandrov – they’ve allowed Brickit and its community of creators to flourish.</p>
<h3 id="second-order-thinking-2">Second-order thinking</h3>
<p>Lego is no stranger to second-order thinking. As a toy company, they are aware of the impact their decisions have on the lives of children and the planet.</p>
<p>Specifically, Lego has avoided selling sets that include military equipment or vehicles. No tanks, no bomber planes, no soldiers with guns. The ban extends beyond finished designs — for a long time, the company didn’t even sell gray-colored bricks, the first choice for making military machines. This self-imposed restriction is especially impressive in the light of how profitable war-like toys can be; think of Nerf guns, green army men, and first-person shooter video games.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/platform-design/#fn6" id="fnref6">6</a></sup></p>
<p>Another example of second-order thinking lies in Lego’s plans for the future. Lego bricks are made of ABS, a petroleum-derived plastic. ABS can’t be recycled, meaning Lego produces more than 100,000 metric tons of single-use plastic every year. To reduce their environmental impact, Lego has invested hundreds of millions of dollars in sustainability, resulting in plant-derived plastic flora, and fully recycled paper packaging. And in 2021, after 3 years of research and 250 material tests, a fully recycled brick — made of PET from used water bottles — was ready for mass production.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/platform-design/#fn7" id="fnref7">7</a></sup></p>
<h2 id="tl%3Bdr">tl;dr</h2>
<p>Interfaces, incentives, emergence, and second-order thinking constitute the biggest differences between platform and application design.</p>
<p><strong>Interfaces</strong> are the points of contact between elements, where simplicity and flexibility can lead to efficiency at scale.</p>
<p><strong>Incentives</strong> drive the motivation of both platform- and end- users. By designing incentives, we can re-invest users’ energy, amplifying desired outcomes and preventing undesired results.</p>
<p><strong>Emergence</strong> is the open-ended feedback loop that platforms can create and maintain. By designing for emergence, not against it, we enable users to discover applications we never imagined.</p>
<p><strong>Second-order thinking</strong> lets us plan for, and potentially tame, the complexities that threaten to turn platforms into dead ends — or worse.</p>
<p>By putting these concepts together, designers can take advantage of the unique leverage platform design provides, efficiently solving thorny problems at scale.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>“How Funk Band Vulfpeck Took on Spotify.” CNBC, 2 Apr. 2018, www.cnbc.com/video/2018/04/02/how-funk-band-vulfpeck-took-on-spotify.html. <a href="https://matthewstrom.com/writing/platform-design/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>“Second-Order Problem.” Farnam Street, April 7, 2019. https://fs.blog/second-order/. <a href="https://matthewstrom.com/writing/platform-design/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Pun fully intended. <a href="https://matthewstrom.com/writing/platform-design/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p><a href="https://www.lego.com/cdn/product-assets/product.bi.core.pdf/6218872.pdf" target="_blank" rel="noopener">The instructions for the largest lego set</a> (The Millennium Falcon) run over 450 pages, all without a single word. <a href="https://matthewstrom.com/writing/platform-design/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Eilers, Søren. “A Lego Counting Problem.” University of Copenhagen, April 7, 2005. https://web.math.ku.dk/~eilers/lego.html. <a href="https://matthewstrom.com/writing/platform-design/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Lendon, Brad. “Lego Won’t Make Modern War Machines, but Others Are Picking up the Pieces.” CNN, December 13, 2020. https://www.cnn.com/style/article/lego-military-sets-intl-hnk-dst/index.html. <a href="https://matthewstrom.com/writing/platform-design/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>White, Jeremy. “How Lego Perfected the Recycled Plastic Brick.” Wired, July 11, 2021. https://www.wired.com/story/lego-recycled-plastic-brick/. <a href="https://matthewstrom.com/writing/platform-design/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The micromanager's dilemma
2022-12-13T00:00:00Z
https://matthewstrom.com/writing/the-micromanagers-dilemma/
<p>Here’s a riddle: Nobody I’ve ever worked with likes micromanagement. Yet, on every team I’ve been on, there is at least one micromanager. How is this possible?</p>
<p><em>Harvard Business Review</em> says, “<a href="https://hbr.org/2008/02/micromanage-at-your-peril.html" target="_blank" rel="noopener">Micromanage at Your Peril.</a>” <em>Forbes</em> says “<a href="https://www.forbes.com/sites/forbescoachescouncil/2017/05/19/micromanaging-heres-how-and-why-you-should-stop/?sh=5d9b4d4c7518" target="_blank" rel="noopener">Micromanaging is one of the most damaging habits an executive can have</a>.” <em>Inc.</em> says “<a href="https://www.inc.com/kevin-daum/5-ways-to-successfully-deal-with-a-micromanager.html" target="_blank" rel="noopener">Micromanagement is a major source of inefficiency and frustration in most work environments</a>.”</p>
<p>If micromanagement is so bad, why does it persist? At a time where companies monitor and quantify every aspect of employees’ productivity, how can such a harmful practice survive?</p>
<p>Business journals and management books tend to focus exclusively on the psychological and interpersonal causes of micromanagement: anxiety, performance pressure, politics, and misaligned incentives combine to bring out the worst in managers. The experts say that with the right training, micromanagement can be avoided.</p>
<p>But this doesn’t solve the riddle. The story falls short of explaining why micromanagement is so pervasive, even (especially!) at today’s top-performing companies.</p>
<p>So I want to take a different path. In this essay, I’ll show you that micromanagement isn’t just a nagging habit; it’s an inevitability. That’s the paradox: micromanagement is both bad management practice <em>and</em> a key component of the best management strategies. So in addition to explaining this paradox, I’ll offer some lessons from similar paradoxical problems. In the end, I want to demonstrate that, with the right approach to micromanagement, managers and their reports can thrive.</p>
<h2 id="what-is-micromanagement%3F">What is micromanagement?</h2>
<p>First, it’s important to clear up some confusion and misconceptions about micromanagement.</p>
<p>In <em>My Way or the Highway: The Micromanagement Survival Guide,</em> Harry Chambers shares a survey of 261 workers on management styles. 79% said they had experienced micromanagement from their current or past managers. 72% said that micromanagement had interfered with their job performance. 65% said that they had considered changing jobs because of micromanagement.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fn1" id="fnref1">1</a></sup></p>
<p>But how do you define micromanagement? The name itself is misleading: “micro” implies an attention to small-scale details, and “detail-oriented” is a very common phrase that shows up on job requirements and positive performance reviews. If attention to detail was all that defined micromanagement, I don’t think it would be so universally reviled.</p>
<p>Instead, a micromanager is best defined as <strong>a manager who is highly involved in the work of their subordinates.</strong> This can manifest as controlling behavior, insisting on making decisions or producing work on behalf of other people — “if you want it done right, you have to do it yourself.” It can also look like omnipresence, a manager who expects to be included in every meeting, on every email, and in every Slack channel.</p>
<p>It also might help to describe what micromanagement is not. It isn’t manipulative. Machiavellian behavior like backstabbing, gaslighting, politicking, and prejudice is definitely bad management, but these behaviors aren’t necessarily concomitant with micromanagement.</p>
<p>Most micromanagers have good intentions. They might not identify their behavior as micromanagement at all; if they can see the negative impact of their actions, they may consider it a necessary sacrifice for a greater good.</p>
<h2 id="the-psychology-of-micromanagement">The psychology of micromanagement</h2>
<p>Management requires weighing tradeoffs: trading cost for speed, trading short-term benefits for long-term debts, trading concrete capital for intangible quality. A good manager can maintain the balances between employee engagement, hiring and retention, productivity, innovation, and profitability.</p>
<p>Micromanagement is just one of many possible tactics that a manager might utilize in pursuit of the right balance. We can think of these strategies in the context of a game between two players: on one side, the manager, and on the other, their report. At stake is the value that their work creates, in both company profit and personal fulfillment.</p>
<p>It might seem reductive to compare management to a game, but this thought exercise is at the center of one of the most practical innovations in pure mathematics in the last century: game theory. Game theorists see human behavior through the lens of abstract mathematical reductions — “games.” The search for winning strategies to these games has led economists and politicians to breakthroughs in diplomacy and policy; role-playing moves and counter-moves was at the heart of the Cuban Missile Crisis in 1962.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fn2" id="fnref2">2</a></sup></p>
<p>Game theory has been used to analyze and optimize nearly every aspect of business. But while entire books, conferences, and even business school departments are dedicated to the application of game theory to corporate strategy, there are very few examples of how game theory can improve the relationship between a manager and their reports.</p>
<p>Game theory is the key to understanding the paradox of micromanagement and seeing the pathway to winning management strategies.</p>
<h2 id="the-prisoner%E2%80%99s-dilemma">The Prisoner’s Dilemma</h2>
<p>If you’ve ever studied game theory, you know about the Prisoner’s Dilemma. If you haven’t, or if you’re a bit rusty, here’s a recap, as described by William Poundstone in his 1993 book <em>Prisoner’s Dilemma</em>:</p>
<blockquote>
<p>Two members of a criminal gang are arrested and imprisoned. Each prisoner is in solitary confinement with no means of speaking to or exchanging messages with the other. The police admit they don’t have enough evidence to convict the pair on the principal charge. They plan to sentence both to a year in prison on a lesser charge. Simultaneously, the police offer each prisoner a Faustian bargain.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fn3" id="fnref3">3</a></sup></p>
</blockquote>
<p>The prisoners (call them A and B) choose either to blame their partner for the crime or stay silent. They have to make their decision without consulting each other.</p>
<p>Depending on their decisions, the possible outcomes are:</p>
<ul>
<li>If A and B blame each other, both will be sentenced to two years in prison</li>
<li>If A points the finger but B stays silent, A will be set free and B will serve three years in prison</li>
<li>If A stays silent but B casts the blame, A will serve three years and B will be set free</li>
<li>If A and B both stay silent, each will serve one year</li>
</ul>
<p>Here are those options laid out in a table game theorists call a “payoff matrix.” In each cell, the outcome is listed as “A’s score, B’s score”.</p>
<figure>
<table class="table--layout-fixed">
<tr>
<td></td>
<td></td>
<th colspan="2" class="t--align-center"><strong>B’s strategy</strong></th>
</tr>
<tr>
<td></td>
<td></td>
<th class="t--align-center c--bg-gray-1 l--border-right-width-s l--border-right-style-solid c--border-right-gray-2">Stay silent</th>
<th class="t--align-center c--bg-gray-1">Blame A</th>
</tr>
<tr>
<th rowspan="2" class="t--align-right"><strong>A’s strategy</strong></th>
<th class="t--align-center c--bg-gray-1 l--border-btm-width-s l--border-btm-style-solid c--border-btm-gray-2">Stay silent</th>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">-1, -1</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">-3, 0</td>
</tr>
<tr>
<th class="t--align-center c--bg-gray-1">Blame B</th>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">0, -3</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">-2, -2</td>
</tr>
</table>
<figcaption>
Payout matrix for the Prisoner’s Dilemma. Scores are negative to follow the convention that a higher score (i.e., fewer years of prison) is better.
</figcaption>
</figure>
<p>What’s the winning play?<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fn4" id="fnref4">4</a></sup></p>
<p>The Prisoner’s Dilemma is so commonly taught because it’s one of the simplest examples of a “non-zero-sum” game. In a non-zero-sum game, the total payoff depends on the strategies the players choose. In the Prisoner’s Dilemma, for example, if both players cooperate, a total of two years of prison are doled out. If one player defects, three years result; when both defect, four.</p>
<p>Compare that to a zero-sum game like chess: In a chess tournament, a win is worth one point, a loss is worth zero, and a tie is worth half a point. Your loss is your opponent’s gain, and winning the most games always results in winning the tournament. No matter what opening, middle game, or endgame you play, the total points awarded in the tournament are the same. In zero-sum games, one side’s loss is another side’s gain.</p>
<p>In non-zero-sum games, both sides can lose — or win. For example, towards the end of the Cold War, the USSR and the US shifted their thinking from zero-sum to non-zero sum. Before, having fewer nuclear weapons meant losing, so both sides spent decades building up their arsenal, rattling sabers in a deadly game of chicken. But during the Nixon administration, the USSR and the US agreed to the policy of detente — dismantling their warheads at an equal rate, “losing” the game simultaneously. Without the threat of mutually assured destruction, both sides could afford to focus their resources on domestic economic and social issues.</p>
<p>Studying non-zero-sum games, researchers have made surprising conclusions about the nature of friendship, culture, evolution, and ecosystems. Counter to centuries of theories of evolution and “survival of the fittest,” it seems that nature rewards cooperation.</p>
<h2 id="why-cooperation-works">Why Cooperation Works</h2>
<p>In 1980, Robert Axelrod, a political scientist, was studying the Prisoner’s Dilemma. Axelrod’s review of the existing research left him feeling unsatisfied: most researchers had only studied a few games at a time, denying players the chance to develop sophisticated tactics. So he decided to run a tournament, inviting academics who were experts in game theory (thus well-versed in the mechanics of the Prisoner’s Dilemma).</p>
<p>For his tournament, Axelrod decided to use a variant of the Prisoner’s Dilemma called the <em>Iterated</em> Prisoner’s Dilemma. In the iterated version, players compete in back-to-back rounds of the game. At the beginning of each round, each player chooses a strategy (stay silent or blame their partner); then, the outcome (including the strategies each player chose) is revealed, and the next round begins. At the end of a predetermined number of rounds, the players’ scores from each round are summed to a final result.</p>
<p>Fifteen people ended up answering the call. Participants wrote their strategies as computer programs, allowing for an unprecedented competition: each pair of strategies would duel an even 1,000 times over five consecutive round-robin rotations. The player with the most points at the end of the tournament won.</p>
<p>Axelrod set the payoffs as follows. Following a game theory convention, staying silent is called “cooperating” (since mutual silence results in the best collective outcome), and blaming your opponent is called “defecting” (since blaming a trusting partner can result in a bigger individual payoff):</p>
<figure>
<table class="table--layout-fixed">
<tr>
<td></td>
<td></td>
<th colspan="2" class="t--align-center"><strong>B’s strategy</strong></th>
</tr>
<tr>
<td></td>
<td></td>
<th class="t--align-center c--bg-gray-1 l--border-right-width-s l--border-right-style-solid c--border-right-gray-2">Stay silent</th>
<th class="t--align-center c--bg-gray-1">Blame A</th>
</tr>
<tr>
<th rowspan="2" class="t--align-right"><strong>A’s strategy</strong></th>
<th class="t--align-center c--bg-gray-1 l--border-btm-width-s l--border-btm-style-solid c--border-btm-gray-2">Stay silent</th>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">3, 3</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">0, 5</td>
</tr>
<tr>
<th class="t--align-center c--bg-gray-1">Blame B</th>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">5, 0</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">1, 1</td>
</tr>
</table>
<figcaption>
Axelrod’s payoff matrix sets the outcomes to be all positive — this just makes the math a bit easier but doesn’t change the nature of the game.
</figcaption>
</figure>
<p>Axelrod’s payoff matrix sets the outcomes to be all positive — this just makes the math a bit easier but doesn’t change the nature of the game.</p>
<p>The programs ran, the dust settled, and a clear victor emerged. It was called “tit for tat.”</p>
<p>Tit for tat was a program written by Professor Anatol Rapoport of the University of Toronto. Here’s the whole of it:</p>
<ol>
<li>In the first round, cooperate</li>
<li>In all other rounds, copy what your opponent did in the previous round</li>
</ol>
<p>That’s it. Tit for tat wasn’t just the best strategy; it was also the simplest program submitted.</p>
<p>And here’s the most confusing thing about tit for tat: in every match it played, it <em>never</em> scored higher than its opponent.</p>
<p>How could it win the overall tournament? Because the Prisoner’s Dilemma is a non-zero-sum game, tit for tat was able to play games that resulted in high scores for <em>both</em> players. As Axelrod put it, “in a non-zero-sum world you do not have to do better than the other player to do well for yourself.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fn5" id="fnref5">5</a></sup></p>
<p>It’s important to emphasize that the effectiveness of tit for tat does not come from an altruistic willingness to sacrifice its own gain for the collective good. Axelrod’s tournaments weren’t team sports; each player was out to win for themselves. That’s why cooperation is so counterintuitive. Cooperative strategies may lose in head-to-head matches against more aggressive strategies, but over time, groups who cooperate maximize their own outcomes.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fn6" id="fnref6">6</a></sup></p>
<h2 id="an-ideal-management-strategy">An ideal management strategy</h2>
<p>At work, our relationships with our bosses and subordinates are like a zero-sum game. Trust is the basis of a healthy partnership, but it’s not a given; misaligned incentives, miscommunication, and ego can result in trust-destroying selfishness. A healthy company culture is a multiplier on the output of a team. A rotten culture can destroy profits and sink a company.</p>
<p>So let’s imagine a version of the Prisoner’s Dilemma for workers and bosses instead of criminals. How do “cooperate” and “defect” map to workplace strategies?</p>
<p>In this game, a defecting boss is a micromanager. They stay close to their subordinates, either doing their work themselves or insisting on onerous reporting and quality assurance. By contrast, a cooperative boss delegates work, trusting reports to follow assignments unsupervised; they believe workers will always adhere to company policy and culture.</p>
<p>Workers defect by being apprehensive of their boss’s leadership. They interpret instructions according to their own beliefs about what’s important, bending policy and process when it’s convenient to their ends. A cooperative worker, on the other hand, follows their manager’s lead unquestioningly. They do what’s delegated to them, look to company goals to gain context on decisions, and always use established processes.</p>
<p>A micromanaging (defecting) boss and a questioning (defecting) worker will struggle to be productive. A micromanager may lead a cooperative worker to productivity, but at the cost of their own time and effort. On the other hand, a trusting (cooperative) boss may enable a strong-willed (defecting) worker, but they might not be pulling in the same direction as the rest of the team. The cooperative boss and employee have the most to gain, using less of their personal energy to work toward the company’s goals.</p>
<p>Just like in the Prisoner’s Dilemma, we can analyze this game to develop an optimal strategy. In <em>The Evolution of Cooperation,</em> Robert Axelrod analyzes all the strategies that competed in his tournament and identifies the following qualities of the top performers:</p>
<ol>
<li>Nice — a nice strategy is never the first one to defect</li>
<li>Forgiving — a forgiving strategy will “forget” about its opponents’ defections quickly</li>
<li>Clear — a clear strategy makes it easy for opponents to know when cooperation is in their best interest</li>
</ol>
<p>If you described your management style as “nice, forgiving, and clear,” most people would agree that you’re a good boss. But these aspects alone don’t add up to a winning strategy. Imagine a manager who always cooperates, no matter what. The strategy pays off when managing a cooperative worker, but a defecting worker will be able to take advantage of it.</p>
<p>Here are the results of a 100-round tournament between “always cooperate,” “tit for tat,” and “always defect.”</p>
<figure>
<table class="table--layout-fixed t--size-s">
<tr>
<td></td>
<td></td>
<th colspan="3" class="t--align-center"><strong>B’s strategy</strong></th>
</tr>
<tr>
<td></td>
<td></td>
<th class="t--align-center c--bg-gray-1 l--border-right-width-s l--border-right-style-solid c--border-right-gray-2">Always cooperate</th>
<th class="t--align-center c--bg-gray-1 l--border-right-width-s l--border-right-style-solid c--border-right-gray-2">Tit for tat</th>
<th class="t--align-center c--bg-gray-1">Always defect</th>
</tr>
<tr>
<th rowspan="3" class="t--align-right"><strong>A’s strategy</strong></th>
<th class="t--align-center c--bg-gray-1 l--border-btm-width-s l--border-btm-style-solid c--border-btm-gray-2">Always cooperate</th>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">300, 300</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">300, 300</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">0, 500</td>
</tr>
<tr>
<th class="t--align-center c--bg-gray-1 l--border-btm-width-s l--border-btm-style-solid c--border-btm-gray-2">Always Tit for tat</th>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">300, 300</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">300, 300</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">99, 104</td>
</tr>
<tr>
<th class="t--align-center c--bg-gray-1">Always defect</th>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">500, 0</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">104, 99</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">100, 100</td>
</tr>
</table>
</figure>
<p>Despite being nice, forgiving, and clear, “always cooperate” never does better than tit for tat. Against always-defectors, always cooperating is substantially worse. To account for this, Axelrod added a fourth quality to his formula:</p>
<ol start="4">
<li>Retaliatory — a retaliatory strategy responds to defection with defection</li>
</ol>
<p>This means that, for a manager, micromanagement (defection) <em>has</em> to be a part of a strategy in order for it to be successful. A successful manager uses the threat of defection, combined with a clear preference for cooperation, to encourage their reports to cooperate in kind.</p>
<p>In the management game, being willing to micromanage — and demonstrating that willingness in response to uncooperative actions — is a necessary evil.</p>
<h2 id="why-micromanagers-persist">Why micromanagers persist</h2>
<p>So, hopefully, I’ve convinced you that micromanagement is a real possibility in even the healthiest and most cooperative manager–report relationship. And in those ideal relationships, a manager using a tit-for-tat strategy with like-minded employees never has to actually micromanage. Unfortunately, most workplace relationships aren’t ideal.</p>
<p>That’s because the optimal strategy is so counterintuitive: tit for tat looks worse when compared to other strategies. Here are a few strategies that beat tit for tat in head-to-head comparisons:</p>
<p><strong>Grim</strong>: <strong>Cooperate until your opponent defects. Then, in every turn afterwards, defect.</strong> This strategy is appealing because it satisfies most of Axelrod’s criteria (it’s nice, retaliatory, and clear). And in my experience, it’s the most common manifestation of a micromanaging boss: they start off cooperative but become jaded after a single incident in which their report fails to meet their expectations.</p>
<p><strong>Bully</strong>: <strong>Defect until your opponent cooperates. Then, cooperate as long as your opponent does.</strong> This is another appealing strategy — it’s retaliatory, forgiving, and clear. But it’s not nice (it doesn’t start off by cooperating). Because the bully starts off by defecting, the rewards for cooperation are always promised in the <em>next</em> round. Many strategies never manage to fully cooperate with a bully. It’s another common micromanager persona: the boss that says, “You need to earn my trust,” but is unable to solicit the trust of their reports.</p>
<p><strong>Prober</strong>: <strong>Cooperate as long as your opponent cooperates. Occasionally, defect to see what your opponent does</strong>. Again, prober meets three out of four criteria: nice, retaliatory, and forgiving. But it’s not clear. This type of micromanagement is sneaky; at first, a boss looks like they’re setting their employees up for success. But then they throw out a challenge, like asking the team to 10x their quarterly goals or hit an impossible deadline. And when the team inevitably fails to meet the challenge, they switch to micromanagement mode, believing that they have an uncooperative group on their hands.</p>
<p>I’ve worked with all three kinds of micromanagers.</p>
<p>Here’s the outcomes of 100 games with Axelrod’s payoff matrix:<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fn7" id="fnref7">7</a></sup></p>
<figure>
<table class="table--layout-fixed t--size-s">
<tr>
<td></td>
<td></td>
<th colspan="4" class="t--align-center"><strong>B’s strategy</strong></th>
</tr>
<tr>
<td></td>
<td></td>
<th class="t--align-center c--bg-gray-1 l--border-right-width-s l--border-right-style-solid c--border-right-gray-2">Grim
</th><th class="t--align-center c--bg-gray-1 l--border-right-width-s l--border-right-style-solid c--border-right-gray-2">Bully
</th><th class="t--align-center c--bg-gray-1 l--border-right-width-s l--border-right-style-solid c--border-right-gray-2">Prober
</th><th class="t--align-center c--bg-gray-1">Tit for tat
</th></tr>
<tr>
<th rowspan="4" class="t--align-right"><strong>A’s strategy</strong></th>
<th class="t--align-center c--bg-gray-1 l--border-btm-width-s l--border-btm-style-solid c--border-btm-gray-2">Grim
</th><td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">300, 300</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">103, 103</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">107, 112</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">300, 300</td>
</tr>
<tr>
<th class="t--align-center c--bg-gray-1 l--border-btm-width-s l--border-btm-style-solid c--border-btm-gray-2">Bully
</th><td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">103, 103</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">100, 100</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">250, 250</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">250, 250</td>
</tr>
<tr>
<th class="t--align-center c--bg-gray-1 l--border-btm-width-s l--border-btm-style-solid c--border-btm-gray-2">Prober
</th><td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">112, 107</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">250, 250</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">108, 108</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">112, 107</td>
</tr>
<tr>
<th class="t--align-center c--bg-gray-1">Tit for Tat
</th><td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">300, 300</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">250, 250</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">107, 112</td>
<td class="t--align-center l--border-width-s l--border-style-solid c--border-gray-2">300, 300</td>
</tr>
</table>
</figure>
<p>You can see that the grim, bully, and prober all manage to tie or beat tit for tat. But because tit for tat is nice, retaliatory, forgiving, and clear, it coaxes the most cooperation from each of its opponents. In two cases, it never has to defect at all.</p>
<p>It follows that a manager who only sees their own actions and reactions may assume that their suboptimal strategy is, in fact, working. Prober “beats” nice strategies like grim and tit for tat in head-to-head matchups; overall, however, it comes in last place.</p>
<h2 id="how-to-play-the-long-game">How to play the long game</h2>
<p>In non-zero-sum games, cooperation may look like a sucker’s choice. But over time, players who figure out how to cooperate — without being taken advantage of — come out on top.</p>
<p>Managers should study games like the Prisoner’s Dilemma to craft their own approach to cooperation. Putting David Axelrod’s research to use, here are four characteristics of a winning management strategy:</p>
<ol>
<li><strong>Be nice.</strong> Show vulnerability and trust right out of the gate. Delegate and give your reports opportunities even if they haven’t “earned” your trust.</li>
<li><strong>Respond to issues immediately</strong>. If your report needs more oversight to get their work done, more coaching to advance their skillset, or needs to be put on an improvement plan, take the appropriate action right away.</li>
<li><strong>Forgive and forget</strong>. As soon as things are back on the right track, go back to a pattern of trust and cooperation.</li>
<li><strong>Be clear</strong>. Give your reports an exact roadmap to how you work, and stick to it. If your team knows that you’ll do all the above, they’ll know that cooperation is the way to get the most out of your relationship.</li>
</ol>
<p>With these rules in mind, there may be times that micromanagement is unavoidable. Otherwise, always-defectors would be rewarded for their stubbornness. But as part of a balanced strategy, micromanagement can be kept to an absolute minimum. That way, everyone — bosses and workers alike — can benefit from the outsized rewards of cooperation.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Chambers, Harry E. <em>My Way or the Highway: The Micromanagement Survival Guide</em>. ReadHowYouWant, 2009. <a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Brams, Steven J. Theory of Moves. Cambridge University Press, 1994. <a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Poundstone, William. <em>Prisoner’s Dilemma</em>. 1st ed. New York: Doubleday, 1992. <a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>A quick analysis shows that it almost always pays to defect.
Let’s say you defect. In that case, if your partner cooperates, it’s the best case scenario: no prison time at all. Even if your partner defects, you only spend two years in prison. On the other hand, If you choose to cooperate, the best you can do is one year of prison for mutual cooperation, and the worst is three years for getting fleeced. Knowing that your partner is doing the same calculations, it seems inevitable that they’ll defect. So you have no choice but to defect, too — two years in prison for mutual defection is better than the three you’ll get if you try to cooperate with a defector.
This roundabout reasoning is what makes the game so interesting. A complex argument weaves the two players’ decisions into a bind that almost always results in mutual defection. Curiously, when people really play this game, the most logical strategy isn’t the most popular one: In real-world trials, players tend to cooperate with their partner more often than not. <a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Axelrod, Robert M. <em>The Evolution of Cooperation</em>. New York: Basic Books, 1984. <a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Tit for tat is not the only collectively stable strategy. In fact, always defect is collectively stable, too! Imagine a group of always-defectors. Their games all end in ties, just like the group of tit-for-tatters, albeit with the lowest collective outcome instead of the highest. Now, in comes a tit-for-tatter: as we saw before, it scores fewer points than the always-defector, since it always loses the first round of the match. The tit-for-tatter will never score higher than the collective of always-defectors. <a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>In this case, prober defects once after it has cooperated four times in a row. <a href="https://matthewstrom.com/writing/the-micromanagers-dilemma/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Ballet dancers and shot putters
2022-11-06T00:00:00Z
https://matthewstrom.com/writing/ballet-dancers-and-shot-putters/
<p>Starting a career in design is like crash-landing on Mars. You may have studied it through a telescope, but nothing can prepare you for actually <em>being</em> there.</p>
<p>One of the biggest surprises many new designers experience is that design isn’t always about coming up with the most creative solution. Sometimes, a well-worn pattern is the right tool for the job. For the new designers I’ve managed, the disappointment is often palpable: They wanted to think outside the box, but what we needed was in the box all along. Is this really what they signed up for?</p>
<p>Because this is such a common moment in any designer’s career, I’ve come up with an analogy to help make sense of the paradigm shift. If you’re new to design, I hope it helps you make sense of the work ahead of you. If you’re an old hand, I hope you can share it with others to clarify what exactly it is we designers do.</p>
<hr />
<p>Professional ballet dancers and Olympic shot putters are both elite athletes.</p>
<p>As far as shot put goes, hopefully this isn’t news. Humans have been throwing big rocks around since we had arms. So imagine a shot putter: big, burly, muscular.</p>
<p>But ballet dancers? If you haven’t seen a professional ballet company, the amount of strength it takes will surprise you. Nevermind the core you need to balance on the tip of your toes, or the upper body it takes to lift a 100-pound ballerina over your head. To do all of that for anywhere from 10 minutes to many hours in a row, to the beat of an orchestra conductor’s baton, takes a lifetime of training and exercise.</p>
<p>But just as a surprising amount of strength is required for ballet, a lot of balance, coordination, and study is required of olympic shot putters. Check out this video with Olympic record-holder Ryan Crouser:</p>
<!-- Load the JS only when the component is needed -->
<script src="https://matthewstrom.com/js/yt-lite.js"></script>
<!-- Web component for lite-youtube-embed -->
<p><lite-youtube videoid="TZANFlvsXv4" style="background-image: url('https://i.ytimg.com/vi/TZANFlvsXv4/hqdefault.jpg');">
</lite-youtube></p>
<p>In 2021, Crouser set the world record with a throw of 22.82 meters (74 feet, 10 ½ inches). The world record for shot put has a rich history filled with drama and scandal, but at the end of the day, each competitor is measured on the same exact scale. Since the rules of the event are so straightforward, and the equipment so minimal, it’s one of the purest “sports” there is: how far can you throw a rock? There’s no special judge or umpire; if you can see the field, you know who wins and who loses.</p>
<p>Ballet does not have world records. If there were an Olympics of ballet, <em>Tchaikovsky Pas de Deux</em> would be the closest event to the shot put. The second half of the 12-minute ballet consists of a series of some of the most physically demanding solos in all of ballet: The dancers run, jump, and spin across the stage to a frenetic passage from <em>Swan Lake</em>. At the very end, the ballerina does a set of head-first dives, landing in their partner’s arms before hitting the ground.</p>
<!-- Load the JS only when the component is needed -->
<script src="https://matthewstrom.com/js/yt-lite.js"></script>
<!-- Web component for lite-youtube-embed -->
<p><lite-youtube videoid="sQeCVBdjw9w" style="background-image: url('https://i.ytimg.com/vi/sQeCVBdjw9w/hqdefault.jpg');">
</lite-youtube></p>
<p>But it’s hard to measure one dancer’s <em>Tchaikovsky Pas de Deux</em> against another. Dancing faster, jumping higher, or spinning further doesn’t always result in a better dance. A casual ballet goer might be stunned by the physicality of it all; <em>New York Times</em>’ ballet critic might lament a lack of finesse in a foetté. Every dance is different. Tiler Peck, one of today’s most accomplished ballerinas, said, “Every time I do it, I find out something different that I didn’t know about my dancing.”</p>
<p>And every dancer is their own worst critic. When the ballet ends, and the curtain drops, every person in the room has a slightly different perception of the dance.</p>
<hr />
<p>Sometimes, design is like ballet. It requires a tremendous amount of creativity and skill, and it rewards exploring new and innovative interpretations of well-known problems. When designers start their career, most imagine they’ll be doing this kind of creativity-heavy design. And creativity is subjective. Some of the most iconic designs of all time were criticized harshly in their time. In 2007, <em>Bloomberg</em>’s Matthew Lynn said “The iPhone is nothing more than a luxury bauble that will appeal to a few gadget freaks. In terms of its impact on the industry, the iPhone is less relevant.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ballet-dancers-and-shot-putters/#fn1" id="fnref1">1</a></sup> Frank Lloyd Wright’s Solomon R. Guggenheim Museum in New York was unfavorably compared to “a giant corkscrew, a washing machine and a marshmallow.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ballet-dancers-and-shot-putters/#fn2" id="fnref2">2</a></sup> But in both these cases (and many more), the critics were wrong.</p>
<p>Sometimes, design is like a shot put. It still requires skill and effort, but very little creativity. Take a login page, for example: a good login page is predictable, with clear inputs for your username or email and password, a way to get help with a forgotten password, social sign-ins, and a link to create an account. Under the hood, there’s a lot of details to get right: security concerns with leaking credentials, good accessibility affordances, fast validation and responsiveness to inputs. The best designers can get those details right while keeping the page simple and straightforward. But almost every app needs a login page, so those problems have been solved before.</p>
<p>It’s possible to know if you’ve designed a good login page. The user experience can be measured objectively: how many people successfully log in? Measuring means optimization and continuous improvement, down to the tenths of a percent on any given metric. How do you know if you’ve designed a good logo? A brand is in the eye of the beholder. You can measure sales, market share, consumer sentiment, but how much a logo actually impacts these numbers is hotly debated.</p>
<p>As a designer, there are times where it seems that you’re doing shot put after shot put. It may feel like this work is less fulfilling, because you’re not using the creativity you worked so hard to cultivate. But to your partners, the work will be no less valuable. And if you put all your training and effort into it, your work will be no less impressive to other designers, shot-putters and ballet dancers alike.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://web.archive.org/web/20121212065222/https://www.bloomberg.com/apps/news?pid=newsarchive&sid=aRelVKWbMAv0" target="_blank" rel="noopener">https://web.archive.org/web/20121212065222/https://www.bloomberg.com/apps/news?pid=newsarchive&sid=aRelVKWbMAv0</a> <a href="https://matthewstrom.com/writing/ballet-dancers-and-shot-putters/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Genauer, Emily (October 21, 1959). “Frank Lloyd Wright’s Spiral Museum Opens: Guggenheim Museum Is Ready for Public Controversial 5th Ave. Structure Praised by Critics at Preview”. New York Herald Tribune. p. 1 <a href="https://matthewstrom.com/writing/ballet-dancers-and-shot-putters/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Generative art Open Graph preview images
2022-10-29T00:00:00Z
https://matthewstrom.com/writing/generative-art-og-images/
<p>I like writing and sharing essays on twitter. I especially like the way the link previews look when they have images that stand out in the timeline. In the past, I’ve created illustrations for each of my posts. But I have two problems: 1. Creating illustrations takes time, and 2. I’m not good at it.</p>
<p>Fortunately, <a href="https://www.zachleat.com/web/automatic-opengraph/" target="_blank" rel="noopener">Zach Leatherman</a> wrote up a potential solution to my problems: his site automatically generates nice-looking images that include the title, date, and site name. But I’m a glutton for punishment. I wanted to take it one step further. A terrible idea stuck itself in my brain:</p>
<p>What if each preview image was a piece of generative art?</p>
<p>Slowly and painfully, over the course of a month, I hacked away until I had shipped this terrible idea. My website now makes nice pieces of generative art for each post, so I can share them with my friends on Twitter.</p>
<p>So that I didn’t suffer in vain, I thought I’d write up my process and share the code, in case you’re also interested in unnecessary complex solutions to first-world website problems.</p>
<p>Let’s go!</p>
<nav class="table-of-contents"><ol><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#making-generative-art">Making generative art</a><ol><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#flow-fields">Flow fields</a></li><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#noise">Noise</a></li><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#evenly-spaced-lines">Evenly-spaced lines</a></li><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#the-finishing-touches%3A-colors%2C-shapes%2C-and-scale">The finishing touches: colors, shapes, and scale</a></li></ol></li><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#making-open-graph-images">Making Open Graph images</a><ol><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#taking-a-screenshot">Taking a screenshot</a></li><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#solving-performance-issues">Solving performance issues</a></li></ol></li><li><a href="https://matthewstrom.com/writing/generative-art-og-images/#in-the-end">In the end</a></li></ol></nav><h2 id="making-generative-art">Making generative art</h2>
<p>When I started this adventure, I didn’t know much about making generative art. I follow some amazingly talented creative coders on twitter (like <a href="https://twitter.com/tylerxhobbs" target="_blank" rel="noopener">Tyler Hobbs</a>, <a href="https://twitter.com/georgedoescode" target="_blank" rel="noopener">George Francis</a>, and <a href="https://twitter.com/bendotk" target="_blank" rel="noopener">Ben Kovach</a>), and I’d dabbled with generative algorithms in previous versions of my website. But getting interesting results would take a lot more than just a simple algorithm.</p>
<figure class="l--grid-wide">
<div class="l--flex l--space-flush">
<div class="l--flex-auto">
<img loading="lazy" src="https://matthewstrom.com/images/generative-og-0a.jpg" />
</div>
<div class="l--flex-auto">
<img loading="lazy" src="https://matthewstrom.com/images/generative-og-0b.jpg" />
</div>
</div>
<figcaption>Previous examples of generative art on my homepage</figcaption>
</figure>
<article class="post l--grid-narrow">
<h3 id="flow-fields">Flow fields</h3>
<p>Tyler Hobbs’ essay <em><a href="https://tylerxhobbs.com/essays/2020/flow-fields" target="_blank" rel="noopener">Flow Fields</a></em> was the kickstart I needed. In it, Tyler walks through the basics of flow fields, a concept at the heart of many pieces of generative art.</p>
<p>A flow field is a kind of map; for every point in the space, the flow field has an arrow pointing in some direction. The arrow represents a force like a current or a magnetic field. So, if the space is an ocean, the flow field is like the waves on the surface showing which way the wind is blowing.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-1.jpg" alt="A flow field. The arrows show which direction the field is moving at that point." /><figcaption>A flow field. The arrows show which direction the field is moving at that point.</figcaption></figure>
<p>That means a flow field is essentially a function. The input to the function is a point and the output is a vector.</p>
<div class="t--align-center">
$$ \overrightarrow{r}(t) = \left<f(t), g(t)="" \right="">$$
</f(t),></div>
<p>A flow field function can be as simple as setting assigning the same vector to every point in the field:</p>
<div class="t--align-center">
$$\overrightarrow{r}(x,y) = \left<1, 0 \right>$$
</div>
<p>The math notation might be unfamiliar, so here’s the same function in javascript:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">vectorAtPoint</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">}</span></code></pre>
<p>This flow field is not terribly exciting, though.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-2.jpg" alt="A flow field where every vector points one unit to the right" /><figcaption>A flow field where every vector points one unit to the right</figcaption></figure>
<p>To make things more interesting, we can make use of our input coordinates when calculating the output vector. Take this function, for example:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">vectorAtPoint</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token punctuation">[</span><br /> <span class="token number">1</span><span class="token punctuation">,</span><br /> Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span><span class="token punctuation">(</span>x <span class="token operator">/</span> <span class="token constant">WIDTH</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span><span class="token punctuation">(</span>y <span class="token operator">/</span> <span class="token constant">HEIGHT</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token punctuation">]</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Where <code>WIDTH</code> and <code>HEIGHT</code> are constants defining our space’s width and height. Here’s how that looks:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-3.jpg" alt="A flow field where every vector’s angle is defined by a trigonometric function" /><figcaption>A flow field where every vector’s angle is defined by a trigonometric function</figcaption></figure>
<p>Groovy.</p>
<p>You probably have noticed that the vector returned by our function has, until now, taken the form of [1, t] where t is some angle in radians. If we vary the first term instead of holding it constant, we get even more interesting results.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">vectorAtPoint</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token punctuation">[</span><br /> Math<span class="token punctuation">.</span><span class="token function">sin</span><span class="token punctuation">(</span><span class="token punctuation">(</span>x<span class="token operator">/</span><span class="token constant">WIDTH</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span><span class="token punctuation">(</span>x <span class="token operator">/</span> <span class="token constant">WIDTH</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span><span class="token punctuation">(</span>y <span class="token operator">/</span> <span class="token constant">HEIGHT</span><span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token punctuation">]</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-4.jpg" alt="A flow field where every vector’s angle and magnitude are defined by trigonometric functions" /><figcaption>A flow field where every vector’s angle <em>and</em> magnitude are defined by trigonometric functions</figcaption></figure>
<p>If we draw a line through this field, letting the vectors indicate how far and in which direction to move as we go, we get something like this:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-5.jpg" alt="A line moving through a flow field" /><figcaption>A line moving through a flow field</figcaption></figure>
<p>And if we draw a whole <em>lot</em> of lines through the field, we get some interesting shapes and patterns:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-6.jpg" alt="Many lines moving through a flow field" /><figcaption>Many lines moving through a flow field</figcaption></figure>
<h3 id="noise">Noise</h3>
<p>While generative art involves a lot of math, it wouldn’t be very interesting if it only followed perfect math equations. Generative artists employ randomness to give their work a more organic, unpredictable, and therefore more interesting effect.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">vectorAtPoint</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token punctuation">[</span><br /> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">,</span><br /> <span class="token punctuation">]</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Unfortunately, simply picking a random direction and magnitude for each point in the flow field doesn’t result in aesthetically pleasing results.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-7.jpg" alt="A line moving throw a flow field where every vector is randomly generated" /><figcaption>A line moving throw a flow field where every vector is randomly generated</figcaption></figure>
<p>That’s because complete randomness is too random.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/generative-art-og-images/#fn1" id="fnref1">1</a></sup></p>
<p>In nature (at human scale, at least), things don’t zigzag wildly and at sharp angles; they curve. So how can we produce random smooth curves? This exact problem was tackled by Ken Perlin when working on the 1982 movie <em>Tron</em>. His solution produced such impressive-looking computer graphics that he won a special Academy Award, for enabling “computer graphics artists to better represent the complexity of natural phenomena in visual effects.”</p>
<p>I won’t go into the details of the Perlin noise algorithm, or its more modern successor, simplex noise.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/generative-art-og-images/#fn2" id="fnref2">2</a></sup> But substituting the simplex noise function for our random number function above, we get the following:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-8.jpg" alt="A line moving through a flow field determined by simplex noise" /><figcaption>A line moving through a flow field determined by simplex noise</figcaption></figure>
<p>Bingo. We see those nice natural shapes emerging, like the path or a river through the landscape of our flow field.</p>
<p>Adding in more lines, and adjusting the scale of our noise landscape a bit, you can see how simplex noise leads to such pleasant-looking images.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-9.jpg" alt="Many lines moving through a flow field determined by simplex noise" /><figcaption>Many lines moving through a flow field determined by simplex noise</figcaption></figure>
<h3 id="evenly-spaced-lines">Evenly-spaced lines</h3>
<p>One of the works I’ve been most inspired by was Tyler Hobbs’ <em>Mirror Removal #5 (White)</em>. The lines in the piece are evenly spaced, creating a consistent texture throughout the piece.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-10.jpg" alt="Tyler Hobbs’ Mirror Removal #5. Image by Tyler Hobbs" /><figcaption>Tyler Hobbs’ <em>Mirror Removal #5</em>. <span class="figure--credit">Image by <a href="https://tylerxhobbs.com/essays/2020/flow-fields">Tyler Hobbs</a></span></figcaption></figure>
<p>To accomplish this effect, I used a paper that Hobbs links in his essay <em><a href="https://tylerxhobbs.com/essays/2020/flow-fields" target="_blank" rel="noopener">Flow Fields</a></em>, <a href="https://web.cs.ucdavis.edu/~ma/SIGGRAPH02/course23/notes/papers/Jobard.pdf" target="_blank" rel="noopener">“Creating evenly-spaced Streamlines of Arbitrary Density”</a> by Bruno Jobard and Wilfred Lefer.</p>
<p>Jobard and Lefer’s technique requires two separate algorithms:</p>
<ol>
<li><strong>An algorithm that draws lines that do not intersect.</strong> There are a number of ways to do this, each with performance and complexity tradeoffs. My preference is a method I learned from <a href="https://youtu.be/flQgnCUxHlw" target="_blank" rel="noopener">Daniel Schiffman’s Coding Train video on Poisson-Disc sampling</a>: essentially, store points you’ve drawn in a grid data structure, then use that data structure to efficiently check for nearby points before drawing a line segment.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/generative-art-og-images/#fn3" id="fnref3">3</a></sup></li>
<li><strong>An algorithm that creates a “queue” of points to start lines from</strong>. This is where Jobard and Lefer make their unique contribution: while drawing a flow line, occasionally pick points a consistent distance away from the current line, and stash them in a queue. When you finish your current line, jump to a random point in the queue and start drawing a new line. Again, Schiffman’s video on Poisson-Disc sampling has some very applicable lessons.</li>
</ol>
<p>Putting those two together, I got really nice results.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-11.jpg" alt="Lines drawn through a flow field using Jobard and Lefer’s technique" /><figcaption>Lines drawn through a flow field using Jobard and Lefer’s technique</figcaption></figure>
<h3 id="the-finishing-touches%3A-colors%2C-shapes%2C-and-scale">The finishing touches: colors, shapes, and scale</h3>
<p>Adding additional variables to the equation creates possibilities for each image to have its own character. I’ve previously written about <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/" target="_blank" rel="noopener">algorithms for picking colors</a>, and many of those strategies can be applied to generative art. For this application, I used the same color scale that’s at the foundation of my VS Code syntax theme, <a href="https://marketplace.visualstudio.com/items?itemName=MatthewStrom.little-league" target="_blank" rel="noopener">Little League</a>.</p>
<p>I also randomly varied the scale of the flow field, the size of the lines, and how densely packed the lines are.</p>
</article>
<figure class="l--grid-wide l--space-compact">
<div class="l--flex l--space-compact">
<div class="l--flex-auto">
<img loading="lazy" src="https://matthewstrom.com/images/generative-og-12.jpg" />
</div>
<div class="l--flex-auto">
<img loading="lazy" src="https://matthewstrom.com/images/generative-og-13.jpg" />
</div>
</div>
<div class="l--flex l--space-compact">
<div class="l--flex-auto">
<img loading="lazy" src="https://matthewstrom.com/images/generative-og-14.jpg" />
</div>
<div class="l--flex-auto">
<img loading="lazy" src="https://matthewstrom.com/images/generative-og-15.jpg" />
</div>
</div>
<figcaption>Images generated by my algorithm with variations in color, line size, and noise scale</figcaption>
</figure>
<article class="post l--grid-narrow">
<p>At that point, I had accomplished a lot — all told, I’d wager the art algorithm alone took around 100 hours of coding.</p>
<p>However, this was only half of my goal. The other half would really stretch my technical abilities; it’s where the greatest opportunities for improvement still lie.</p>
<h2 id="making-open-graph-images">Making Open Graph images</h2>
<p>In order to use these images to accompany my website’s previews, I’d need to wade into automation. Sure, I could hand-pick the background image, mock up the preview image in Figma, and serve it alongside my site. But that would be far too easy, and wouldn’t involve painstakingly learning how to automate a browser.</p>
<h3 id="taking-a-screenshot">Taking a screenshot</h3>
<p>Open Graph image generators like <a href="https://github.blog/2021-06-22-framework-building-open-graph-images/" target="_blank" rel="noopener">Github’s</a> and <a href="https://github.com/vercel/og-image" target="_blank" rel="noopener">Vercel’s</a> generally approach the problem from the same angle:</p>
<ol>
<li>Use the metadata from the page (like the title, subtitle, and date) to generate some HTML from a template</li>
<li>Pipe that HTML to a browser and use an automation framework to take a screenshot</li>
<li>Serve up the screenshot in the original page’s <code><head></code> tag</li>
</ol>
<p>The first step is pretty straightforward. Since I wrote the generative art algorithm in javascript, it’s just a matter of bundling it up into a self-contained blob of html with webpack. I also added a few lines to grab the headline and subhead from the URL; these are used as the seed values for the algorithm’s random number generator. The headline and subhead are injected into the HTML via inline javascript and styled with good ol’ fashioned CSS.</p>
<p>If I visited my template in a browser from the URL ending in <code>/headline=Test%20Headline/subhead=Test%20Subhead</code>, I got the following:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-16.jpg" alt="An example of the algorithm using the headline as a seed for the random number generator" /><figcaption>An example of the algorithm using the headline as a seed for the random number generator</figcaption></figure>
<p>But the same page, accessed from a url ending in <code>headline=Different%20Headline/subhead=Different%20Subhead</code>, resulted in this image:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-17.jpg" alt="An example of the algorithm using the headline as a seed for the random number generator" /><figcaption>An example of the algorithm using the headline as a seed for the random number generator</figcaption></figure>
<p>Unfortunately, this wasn’t an image yet — it was an HTML page rendered by the browser. Since Open Graph images are … well, images … they need to be something like a .jpg or a .png. Following in the footsteps of other (more talented) developers, I used <a href="https://pptr.dev/" target="_blank" rel="noopener">Puppeteer</a>.</p>
<p>Puppeteer is an automation tool for the Chromium browser engine. With a few commands, you tell Chromium to load up a blob of HTML, and take a screenshot.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">let</span> htmlPage <span class="token operator">=</span> fs<br /> <span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/template.html</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <br /> <span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br /><br /><span class="token keyword">const</span> page <span class="token operator">=</span> <span class="token keyword">await</span> browser<span class="token punctuation">.</span><span class="token function">newPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">setContent</span><span class="token punctuation">(</span>htmlPage<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">const</span> screenshot <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">screenshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Ok, finally on to step three: serving the screenshot as an image.</p>
<p>I decided to host the screenshot-taker as a serverless function, because I don’t actually know how to maintain a server-ful function. I figured I’d let Netlify handle the gory details for me.</p>
<p>This meant jumping through a few extra hoops. Puppeteer needs an instance of Chromium to work with, which is a little more than serverless functions are meant to handle. Fortunately there’s <a href="https://github.com/alixaxel/chrome-aws-lambda" target="_blank" rel="noopener">a version of Chromium designed to run on AWS Lambda</a>, Amazon’s serverless function service; this works seamlessly with Puppeteer in Netlify’s own serverless functions.</p>
<p>With code to load in the font and parse the URL parameters, I could take the screenshot and run the following to serve it up as an image:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">return</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">statusCode</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token string-property property">"Content-Type"</span><span class="token operator">:</span> <span class="token string">"image/png"</span><span class="token punctuation">,</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">body</span><span class="token operator">:</span> screenshot<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token string">"base64"</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">isBase64Encoded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>After a lot of debugging, and a little crying, I had a Netlify function that made generative art images from URL parameters.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/generative-og-18.jpg" alt="The final result of the fully-functional image generator function" /><figcaption>The final result of the fully-functional image generator function</figcaption></figure>
<p>I was done!</p>
<p>… Right?</p>
<h3 id="solving-performance-issues">Solving performance issues</h3>
<p>As far as websites go, my serverless function is not the speediest. This isn’t terribly surprising; every time it gets a request, the serverless function boots up chromium, waits for the page to load, takes a screenshot, and sends it as a response. This can take up to two seconds, depending on variables outside of my control.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/generative-art-og-images/#fn4" id="fnref4">4</a></sup></p>
<p>This might have been ok, since Netlify keeps the network request open while it does its work. A browser or server asking for a post’s image just has to wait a second or two, like in the old days of the internet. But in my testing, I found that Twitter in particular gets impatient with the function; it hangs up the connection and doesn’t download the image if it’s taking too long. Plus, if the function runs more than 125,000 times a month, I have to pay Netlify for a higher tier of service. While I love Netlify, I would like to avoid the expense.</p>
<p>The thing is, these images don’t change very often (maybe never). Once a post’s image has been rendered, I shouldn’t need to run the function again to retrieve it. If I were a better developer, I would figure out how to cache the images on the server(less) side. But I’m not that clever.</p>
<p>Instead, I used Zach Leatherman’s <a href="https://github.com/11ty/eleventy-img" target="_blank" rel="noopener">eleventy-img plugin</a>. When my site is built in production, Eleventy downloads an image for each post on the site that needs one. It saves that image into the build directory, then pipes the filename/URI into the relevant meta tag in the post’s <code><head></code> tag.</p>
<p>This has the added benefit of making sure my Open Graph images still exist, even if the Netlify function stops working (or, in my case, when I accidentally disable it by changing the environment settings).</p>
<h2 id="in-the-end">In the end</h2>
<p>All in, I spent over 200 hours across multiple months to get to this point. All the various functions and templates add up to a scant 500 lines of code; almost every single one challenged my abilities as a hobbyist coder.</p>
<p>It may seem like overkill to write a serverless generative art algorithm to get some pretty pictures that only show up when folks paste links to my site into Twitter or Slack. It probably won’t result in a deluge of new traffic, or make my writing go viral. But over-engineering complicated solutions to simple problems is my love language.</p>
<p>Pursuing technical challenges, no matter how seemingly sisyphean, is a great way to learn. And the feeling of accomplishment when you finally get the boulder up the hill is priceless.</p>
<p>You can find all the source code for my generative art Open Graph images in <a href="https://github.com/ilikescience/mhs11" target="_blank" rel="noopener">the repo for this site</a> and <a href="https://github.com/ilikescience/mhs-og" target="_blank" rel="noopener">the repo for the serverless function</a>. Happy hacking!</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>What I’ve drawn here looks a lot like <a href="https://en.wikipedia.org/wiki/Brownian_motion" target="_blank" rel="noopener">Brownian motion</a>, which does indeed occur in nature, albeit at a sub-molecular scale. <a href="https://matthewstrom.com/writing/generative-art-og-images/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>If you’d like to go deeper on the topic, I recommend starting with Daniel Schiffman’s <a href="https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD" target="_blank" rel="noopener">collection of videos on Perlin noise</a>. <a href="https://matthewstrom.com/writing/generative-art-og-images/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>For more on Poisson-Disc sampling, you can read <a href="https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph07-poissondisk.pdf" target="_blank" rel="noopener">Robert Bridson’s paper on a fast method of implementing the algorithm</a>, or follow the links on <a href="https://www.jasondavies.com/poisson-disc/" target="_blank" rel="noopener">Jason Davies’ reference site</a>. <a href="https://matthewstrom.com/writing/generative-art-og-images/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Github and Vercel both address these performance issues in their own implementation of this concept. Github manages to squeeze an extra ~400ms out of Puppeteer by using <code>domcontentloaded</code> instead of <code>waitUntil</code>. Vercel ended up completely <a href="https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images" target="_blank" rel="noopener">abandoning Puppeteer altogether</a>. Both approaches are a little outside my technical comfort zone. <a href="https://matthewstrom.com/writing/generative-art-og-images/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
</article>
Beauty in the machine: Post-industrial design
2022-09-21T00:00:00Z
https://matthewstrom.com/writing/post-industrial-design/
<p>Has design become boring?</p>
<p><a href="https://twitter.com/culturaltutor/status/1538211892707086338?s=21&t=9wlF1eyl_todjUl3ctnQYA" target="_blank" rel="noopener">A twitter thread by Sheehan Quirke</a> (aka the Cultural Tutor) has been making the rounds lately, arguing just that. Quirke describes the many shortcomings of modern design: architecture, urban planning, industrial design, and interior design have all been reduced to a featureless sea of same-ness. Modern things lack beauty, variety, detail, and identity.</p>
<p>https://twitter.com/culturaltutor/status/1538211892707086338</p>
<p>It’s a solid argument with good examples. Lots of folks agree and have added their own evidence to support the thread. But I think that these conversations stop short of an important conclusion (it’s Twitter, of course, not Plato’s Academy): design is a radically different exercise than it was in the 18th, 13th, or 5th century. Industrialization has made the world more deeply interconnected, automated, and chaotic. The aesthetics of the things around us are not in the way they look to us, but in the way they came to be, and the way they shape the future.</p>
<p>Beauty is no longer skin-deep.</p>
<h2 id="pre-industrial-design">Pre-industrial design</h2>
<p>To understand how this came to be, let’s take Quirke’s example of a well-designed bollard as a study in pre-industrial design.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-1.jpg" alt="" /></figure>
<p>Quirke says that this design (called a Manchester bollard) has “some character.” What is that character? Where does it come from?<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/post-industrial-design/#fn1" id="fnref1">1</a></sup></p>
<p>“Bollard” originally meant a post that anchored ropes between ships and docks. <em>The Sailor’s Word-Book</em> of 1867 gives this definition:</p>
<blockquote>
<p>A thick piece of wood on the head of a whale-boat, round which the harpooner gives the line a turn, in order to veer it steadily, and check the animal’s velocity. Also a strong timber fixed vertically into the ground, part being left above it, on which to fasten ropes. Also a light sort of dolphin for attaching vessels to. Wharves have bollards to which vessels are secured when alongside.</p>
</blockquote>
<p>Bollards didn’t make their way to streets and sidewalks until the 18th and 19th centuries, when cities started giving more space to vehicles. Before paved roads and raised curbs, bollards gave protection to pedestrians, first from horse-drawn carts, then from streetcars and trains, then later from motorized cars. These barriers didn’t need the same features as their maritime namesakes, so many were wooden posts or short stones.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/post-industrial-design/#fn2" id="fnref2">2</a></sup></p>
<p>What about the Manchester bollard? It doesn’t get its character from the early maritime prototypes or the first utilitarian street barriers. Instead, the design is a consequence of the 1805 British victory over the French at the Battle of Trafalgar: among the spoils of the battle were the cannons from the captured French ships. They were too large to be used on British ships, and too valuable to be melted down, so the British employed them as bollards throughout the East End of London. After that, bollards in other British cities — like Manchester — were designed to match the cannons, with black metallic finishes, tapered silhouettes, and rounded ends.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-2.jpg" alt="A canon re-used as a bollard outside the church of St Helen’s Bishopsgate, London. Photo by Bollards of London" /><figcaption>A canon re-used as a bollard outside the church of St Helen’s Bishopsgate, London. <span class="figure--credit">Photo by <a href="https://www.bollardsoflondon.uk/2012/03/bollard-hunting-part-two.html" target="_blank" rel="noopener">Bollards of London</a></span></figcaption></figure>
<p>The Manchester bollard is a great example of how design happened in Europe before the rapid industrialization of the 19th and 20th centuries. Durable goods (like bollards, lamp posts, door handles, and park benches) were made using valuable materials and labor-intensive processes. The people who made these things were artisans, and the resulting products were expensive. Therefore, they were usually only available to the wealthy (or to wealthy governments, in the case of cannons).</p>
<p>Pre-industrial art and design was synonymous with materialism and frivolity. Operas, symphonies, ballets, and plays were made for the leisure class — they were ornamental, gilded, and plush. The great European universities and cathedrals were built and supported by the nobility and the monarchy, which hired the best artists and artisans to fill their spaces with their best work. A country’s art and architecture were extensions of their national or imperial identity, supporting the mythology of the state.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-3.jpg" alt="The Palais Garnier in Paris, designed in 1861, represents the peak of pre-industrial design: hand-crafted, ornamental design full of symbolism meant to be enjoyed by the wealthiest Parisians. Photo by Jeremy Bezanger on Unsplash" /><figcaption>The Palais Garnier in Paris, designed in 1861, represents the peak of pre-industrial design: hand-crafted, ornamental design full of symbolism meant to be enjoyed by the wealthiest Parisians. <span class="figure--credit">Photo by <a href="https://unsplash.com/@unarchive?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">Jeremy Bezanger</a> on <a href="https://unsplash.com/@unarchive?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">Unsplash</a></span></figcaption></figure>
<p>For centuries, design was a luxury. But throughout the 1800s, science — and the technology it created — would begin to make design more accessible to the masses. A design revolution was on the horizon.</p>
<h2 id="industrial-design-and-the-transition-to-modern-consumerism">Industrial design and the transition to modern consumerism</h2>
<p>As manufacturing technology progressed, durable goods became more affordable. Because these things used to be exclusively available to the wealthy, entrepreneurs could capitalize on aesthetics. Goods would fetch a higher price just because they <em>looked</em> expensive: working men and women would pay extra to have homes, neighborhoods, clothes, and vehicles that broadcast their fellowship with the rich.</p>
<p>Unfortunately for the entrepreneurs, mass manufacturing wasn’t always compatible with the exquisite details and craftsmanship of pre-industrial design. Nowhere was this more apparent than in Britain’s Great Exhibition of 1851, where the products of the latest manufacturing technology were proudly displayed in the palatial Crystal Palace. The event was a commercial success, clearly demonstrating Britain’s manufacturing prowess. But art critics found it lacking. Ornamentation was applied superfluously, and the manufacturing was shoddy. Designer/activist William Morris called the exhibition “wonderfully ugly.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/post-industrial-design/#fn3" id="fnref3">3</a></sup> The philosopher John Ruskin had this takeaway: “our taste, thus exalted and disciplined, is dazzled by the lustre of a few rows of panes of glass.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/post-industrial-design/#fn4" id="fnref4">4</a></sup></p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-4.jpg" alt="The interior of the Crystal Palace circa 1859, eight years after the Great Exhibition. Source: Historic England Archive" /><figcaption>The interior of the Crystal Palace circa 1859, eight years after the Great Exhibition. <span class="figure--credit">Source: Historic England Archive</span></figcaption></figure>
<p>Morris and Ruskin’s violent reaction to the Great Exhibition pushed designers of the time to seek a new style, one that emphasized intellectual purity and quality of craftsmanship above all else. This movement — later dubbed “Arts and Crafts” — was a countermovement to design as decoration. Arts and Crafts designers dusted off writing from medieval and classic scholars, fitting historic material into modern social contexts, aiming to define a grand unified theory of design.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-5.jpg" alt="Wallpaper designed by William Morris in the Arts and Crafts style. Morris’ designs used bright colors and natural patterns in direct contrast to the monotonous ornate style of the early 1800s. Source: Morris & Co. - Online Collection of Brooklyn Museum via Wikipedia" /><figcaption>Wallpaper designed by William Morris in the Arts and Crafts style. Morris’ designs used bright colors and natural patterns in direct contrast to the monotonous ornate style of the early 1800s. <span class="figure--credit">Source: Morris & Co. - Online Collection of Brooklyn Museum <a href="https://commons.wikimedia.org/wiki/Category:William_Morris_wallpaper_sample_book_1_(image_set)" target="_blank" rel="noopener">via Wikipedia</a></span></figcaption></figure>
<p>Alongside Arts and Crafts, another movement was sprouting in the work of young architects and engineers. Like Morris and Ruskin, they were appalled at the soulless excesses of design. Unlike Morris and Ruskin, they believed the way forward was to remove historical context entirely from the equation, pushing modern materials and manufacturing into the spotlight. Architectural Modernism was a celebration of technology, forcing designers to master their technique by giving them nowhere to hide their mistakes. The architectural theorist Eugène Viollet-le-Duc summarized it in his influential 1872 book <em>Entretiens sur L’Architecture</em>: “Use the means and knowledge given to us by our times, without the intervening traditions which are no longer viable today, and in that way we can inaugurate a new architecture.”</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-6.jpg" alt="Frank Lloyd Wright’s first “Prairie House,” built in 1893–94. Wright would go on to exemplify the “new architecture” first called for by Viollet-le-Duc: putting modern materials, construction methods, and ideologies together in accessible ways. Photo by Hedrich Blessing Collection / Chicago History Museum / Getty Images" /><figcaption>Frank Lloyd Wright’s first “Prairie House,” built in 1893–94. Wright would go on to exemplify the “new architecture” first called for by Viollet-le-Duc: putting modern materials, construction methods, and ideologies together in accessible ways. <span class="figure--credit">Photo by Hedrich Blessing Collection / Chicago History Museum / Getty Images</span></figcaption></figure>
<p>Conversations around design, architecture, engineering, and manufacturing reached an unprecedented volume. Consumers — first wealthy elites, then the middle and lower classes — were beginning to make choices about what to buy, what to wear, and where to live, based on more than just their desire to show material wealth. Those choices reflected beliefs about art, society, economics, government, technology, the past, and the future. As the 19th century ended, consumerism became the dominant force in the evolution of design.</p>
<p>In the 20th century, two forces would combine to forge the new language of post-industrial design.</p>
<h2 id="post-industrial-design">Post-industrial design</h2>
<p>Post-industrial design was forged in the crucible of advertising and globalization.</p>
<p>In the 19th century, advertising focused on quality, craftsmanship, and aesthetics. But as media grew in scope and speed, advertisers began experimenting with tactics and techniques first employed by governments in propaganda, incorporating the work of psychological pioneers like Sigmund Freud to take advantage of the subconscious mind. Advertising pushed consumers to make new decisions about the goods they purchased. Goods like cigarettes that had no aesthetic value and were previously advertised based on their quality now became part of a lifestyle: for men, cigarettes meant sex appeal, and for women they meant femininity and liberation.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/post-industrial-design/#fn5" id="fnref5">5</a></sup></p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-7.jpg" alt="A 1929 ad for Lucky Strike cigarettes capitalizing on the women’s liberation movement. Source: Stanford Research Into the Impact of Tobacco Advertising" /><figcaption>A 1929 ad for Lucky Strike cigarettes capitalizing on the women’s liberation movement. <span class="figure--credit">Source: <a href="https://tobacco.stanford.edu/cigarettes/targeting-women/mass-marketing-begins/#collection-21">Stanford Research Into the Impact of Tobacco Advertising<a></a></a></span></figcaption></figure>
<p>Meanwhile, new technology — air transportation, commercial refrigeration, and rapid communication — massively increased the distance and speed with which goods could move around the planet. For good and bad, global commerce vastly expanded the impact of each individual’s decisions. Before globalization, the impact of consumer decisions was limited to local communities. After, the most mundane purchases are now the result of thousands of actions by hundreds of people in a dozen countries spanning the globe.</p>
<p>Advertising and globalization create a feedback loop, giving consumers and corporations a wedge to drive into marketplaces. Upstart brands have been able to beat out incumbents by claiming their supply chain is more ethical, more eco-friendly, more politically popular. Governments have created standards and classifications identifying products as “free trade,” “organic,” or “hormone free,” along with certifications of origin like Italy’s “DOP,” France’s “AOC,” the EU’s “PDO”,<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/post-industrial-design/#fn6" id="fnref6">6</a></sup> and America’s “Made in USA.” Today, companies call attention to the invisible aspects of design: design of process, design of policy, design of consequence.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-8.jpg" alt="An ad for Everlane highlighting the environmental impact of using recycled plastic in their clothing Photo by Kasia Bedkowski" /><figcaption>An ad for Everlane highlighting the environmental impact of using recycled plastic in their clothing <span class="figure--credit">Photo by <a href="https://www.kasiabedkowski.com/work/renew" target="_blank" rel="noopener">Kasia Bedkowski</a></span></figcaption></figure>
<p>Design has migrated from the visible (aesthetics, material quality, and markers of social class) to the invisible (ecosystems, economies, and communities). A picture of pre-industrial design captures its entire essence; a picture of post-industrial design shows the tip of an iceberg.</p>
<h2 id="the-modern-bollard">The modern bollard</h2>
<p>Back to the bollard. What character is missing from this design?</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-9.jpg" alt="" /></figure>
<p>It has very few visible details. It’s about as simple as can be: a cylinder of stainless steel. No celebration of past maritime victories. No projection of nationalist identity. No way to know if it’s in a rich neighborhood in Malaysia or a poor neighborhood in Peru. So let’s look a little deeper.</p>
<p>The bollard is made of stainless steel. Compared to the cast iron in the Manchester bollard, stainless steel is far more resistant to corrosion; the cost to maintain a street lined with stainless steel bollards will be much lower as a result. There will be fewer disruptions in street traffic, less noise for the surrounding buildings, and more foot traffic to support nearby businesses.</p>
<p>While this particular bollard is fixed in place, the design has a feature that the Manchester bollard lacks: it can retract seamlessly into the ground. This means spaces can be dynamic and responsive to the needs of pedestrians and vehicles. For example, retractable bollards regulate bus lanes in many cities, giving commuters and tourists more affordable and environmentally friendly transit options.</p>
<p>The stainless steel bollard also has a substantially simpler manufacturing process, saving time, energy, and ultimately, money. It can be made lighter than the cast iron equivalent, and packaged more efficiently due to its shape. Specifications like height, diameter, and wall thickness can be adjusted down to the millimeter, making it much more useful in a wide variety of applications. In all these ways, the stainless steel bollard is a better design.</p>
<p>But all of these comparisons are misleading. Bollards are needed to protect pedestrians from vehicles, to separate spaces into different functional areas. They’re vital to cities that were designed around vehicles — that is, almost every large city in the world. But in the spirit of post-industrial design, architects and engineers have begun to question this underlying need.</p>
<p>Let’s take a look at a typical use of bollards. Here’s an image from Manchester, featuring the classic cannon lookalike:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-10.jpg" alt="Great Northern Square in Manchester. Photo from Google Maps" /><figcaption>Great Northern Square in Manchester. <span class="figure--credit">Photo from <a href="https://goo.gl/maps/KRDMbs3AbfqrQuqe8" target="_blank" rel="noopener">Google Maps</a></span></figcaption></figure>
<p>With plenty of separation between cars and pedestrians, streets can be wider and traffic can move faster. Faster vehicle traffic leads to less foot traffic, and less business for nearby shops. The streetscape is a transitory one, meant for moving from place to place.</p>
<p>Compare this to another English streetscape, at London’s Oxford Circus.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-11.jpg" alt="Oxford circus Crossing before a pedestrian-focused redesign" /><figcaption>Oxford circus Crossing before a pedestrian-focused redesign</figcaption></figure>
<p>The crossing of these four major streets is similar to the Manchester one: bollards protected the sidewalks, giving vehicles as much room as possible. Pedestrians were kept out of the intersection altogether, pushed out to make crossing high-speed traffic safer. But in 2009, the intersection was redesigned to prioritize pedestrian traffic.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/postindustrial-12.jpg" alt="Oxford Circus crossing after the redesign. Photo by Dan Kitwood / Getty Images" /><figcaption>Oxford Circus crossing after the redesign. <span class="figure--credit">Photo by Dan Kitwood / Getty Images</span></figcaption></figure>
<p>In the year after the redesign, 90 million people crossed the intersection. What was once a forgettable crossing is now a destination and landmark. And the benefits go beyond aesthetics: annual sales in the shopping district around the intersection increased by 7%.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/post-industrial-design/#fn7" id="fnref7">7</a></sup></p>
<p>Post-industrial design goes beyond the material and asks important questions about the nature of human interactions with the built and natural environment. The modern bollard is no bollard at all.</p>
<h2 id="conclusion">Conclusion</h2>
<p>The design of durable goods began as an expression of quality and artisanship. Wealthy patrons used design to reinforce myths about social status and politics. As mass manufacturing made goods more accessible, and as hand-made goods were supplanted by assembly line products, critics began to question the value and purpose of ornamentation. Consumers voted with their dollar, leading to the evolution of design past mere decoration and towards self-expression. Over time, the scope of that self-expression grew exponentially: today, individual consumer decisions can have a direct impact on geopolitics, the global economy, and the course of human-caused climate change.</p>
<p>Design has evolved to meet the challenge of the new relationship between people and the material goods they need. Today, designers — artisans, manufacturers, engineers, architects — think far beyond the way things look. Comparing pre-industrial design to post-industrial design with a picture is absurd. Critiquing a modern object based on its appearance is ignoring the thousands of decisions that go into its creation. Each and every one of those decisions has tradeoffs, ranging in impact from saving fractions of pennies in material cost to causing billions of dollars of long-term ecological harm.</p>
<p>Today, beautiful things have beautiful supply chains. They enable beautiful systems, connect beautiful communities, and redouble the beauty of nature. Their beauty is much, much more than skin deep.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Ironically, the bollard in this picture is a modern recreation, available brand new from UK-based Broxap for £146.00. <a href="https://matthewstrom.com/writing/post-industrial-design/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Boulting, Nikolaus (1976). “The law’s delays: conservationist legislation in the British Isles.” In Fawcett, Jane (ed.). <em>The Future of the Past: attitudes to conservation, 1174–1974</em>. London: Thames & Hudson. p. 13. ISBN 978-0-8230-7184-5. <a href="https://matthewstrom.com/writing/post-industrial-design/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Purbrick, Louise (ed.). <em>The Great Exhibition of 1851: New Interdisciplinary Essays.</em>. Manchester, U.K.: Manchester Univ. Press. 2001. 232 pp. ISBN 978-0-7190-5592-8. <a href="https://matthewstrom.com/writing/post-industrial-design/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Ruskin, John. <em>The Opening of the Crystal Palace: Considered in Some of Its Relations to the Prospects of Art.</em> 1854. <a href="https://matthewstrom.com/writing/post-industrial-design/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Edward Bernays, called “the father of public relations,” was behind the earliest cigarette ad campaigns targeted at women. Bernays was Sigmund Freud’s nephew and organized the US publication of Freud’s <em><a href="https://en.wikipedia.org/wiki/Introductory_Lectures_on_Psychoanalysis" target="_blank" rel="noopener">Introductory Lectures on Psychoanalysis</a></em> in 1920. <a href="https://matthewstrom.com/writing/post-industrial-design/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Denominazione di Origine Protetta, Appellation d’origine contrôlée, and Protected Designation of Origin, respectively. <a href="https://matthewstrom.com/writing/post-industrial-design/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>“Oxford Circus ‘X-crossing’ used by 90 million people.” <em>BBC</em>. November 2, 2010. https://www.bbc.com/news/uk-england-london-11672984 <a href="https://matthewstrom.com/writing/post-industrial-design/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
How to pick the least wrong colors
2022-05-31T00:00:00Z
https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/
<p>I’m a self-taught designer.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn1" id="fnref1">1</a></sup> This has its upsides: I learn at my own pace (in my case, slowly over decades and counting), I design my own curriculum, and I don’t have to do any homework or pass any tests. But it also has a serious downside: because I don’t have to learn anything, I skip the things that intimidate me. That’s why, for years and years, I’ve avoided learning much of anything about color.</p>
<p>But recently I picked up a pet project that forced me to fill in the gaps in my own knowledge. In the course of trying to solve a seemingly simple problem, I got a crash course in the fundamentals of color. It was (sorry, I have to get this out of my system) eye-opening.</p>
<p>I thought it might be worthwhile to recap my journey so far, not just to share an interesting result to a common challenge in data visualization, but also to help any other learners who have been shy about color.</p>
<nav class="table-of-contents"><ol><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#the-problem">The problem</a><ol><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#prior-art">Prior art</a></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#why-none-of-these-solutions-work-for-me">Why none of these solutions work for me</a></li></ol></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#optimizing">Optimizing</a><ol><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#how-simulated-annealing-works">How simulated annealing works</a></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#choosing-the-right-evaluation-score">Choosing the right evaluation score</a><ol><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#nice-looking">Nice-looking</a></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#broadly-applicable">Broadly applicable</a></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#accessible">Accessible</a></li></ol></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#putting-it-all-together">Putting it all together</a></li></ol></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#the-result">The result</a></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#stress-test">Stress test</a></li><li><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#conclusion">Conclusion</a></li></ol></nav><h2 id="the-problem">The problem</h2>
<p>Stripe’s dashboards use graphs to visualize data. While the color palettes we use are certainly passable, the team is always trying to improve them. A colleague was working on creating updated color palettes, and we discussed the challenges he was working through. The problem boiled down to this: <strong>how do I pick nice-looking colors that cover a broad set of use cases for categorical data while meeting accessibility goals?</strong></p>
<figure data-type="image"><img src="https://matthewstrom.com/images/annealing-1.jpg" alt="An example of Stripe’s dashboard graphs showing categorical data" /><figcaption>An example of Stripe’s dashboard graphs showing categorical data</figcaption></figure>
<p>The domain of this problem is categorical data — data that can be compared by grouping it into two or more sets. In Stripe’s case, we’re often comparing payments from different sources, comparing the volume of payments between multiple time periods, or breaking down revenue by product.</p>
<p>The criteria for success are threefold:</p>
<ol>
<li><strong>The colors should look nice.</strong> In my case, they need to be similar to Stripe’s brand colors.</li>
<li><strong>The colors should cover a broad set of use cases.</strong> In short, I need lots of colors in case I have lots of categories.</li>
<li><strong>The colors should meet accessibility goals.</strong> WCAG 2.2 dictates that non-text elements like chart bars or lines should have a color contrast ratio of at least 3:1 with adjacent colors.</li>
</ol>
<p>Put this way, the problem doesn’t seem so daunting. Surely, I thought, a smart person has already solved these problems.</p>
<h3 id="prior-art">Prior art</h3>
<p>There are, in fact, many ways to pick good colors for data visualizations. For example:</p>
<ul>
<li><a href="http://bids.github.io/colormap/" target="_blank" rel="noopener">Viridis</a> is a sequential palette designed by Stéfan van der Walt and Nathaniel Smith.</li>
<li><a href="https://colorbrewer2.org/" target="_blank" rel="noopener">ColorBrewer</a> is a tool and set of color palettes created by Cynthia Brewer.</li>
<li><a href="http://vrl.cs.brown.edu/color" target="_blank" rel="noopener">Colorgorical</a> is a tool for selecting visually distinct colors created by Connor Gramazio with advisement from David Laidlaw and Karen Schloss.</li>
<li>Companies like <a href="https://spectrum.adobe.com/page/color-for-data-visualization" target="_blank" rel="noopener">Adobe</a> and <a href="https://carbondesignsystem.com/data-visualization/color-palettes/" target="_blank" rel="noopener">IBM</a> have documented the color palettes they use in their design systems for data visualization.</li>
</ul>
<h3 id="why-none-of-these-solutions-work-for-me">Why none of these solutions work for me</h3>
<p>While most of the above palettes would serve as a good starting point, each has tradeoffs as an out-of-the-box solution. Using the ColorBrewer schemes sacrifices accessibility and applicability; using any of them fails to get to the harmony I want with Stripe’s brand colors.</p>
<p>There are many, many other approaches and palettes to try. As I looked through the research and material, I had a sinking feeling that I’d need to settle for something that wasn’t optimal.</p>
<p>That conclusion turned out to be a breakthrough.</p>
<h2 id="optimizing">Optimizing</h2>
<p>One night, I was watching a YouTube video called “<a href="https://www.youtube.com/watch?v=Lq-Y7crQo44" target="_blank" rel="noopener">Algorithmic Redistricting: Elections made-to-order</a>.” My YouTube recommendation algorithm is very weird and finds things like this for me; I am also very weird and like watching other people program algorithms.</p>
<p>In the video, Brian Haidet describes a process he used to draw different election maps. The algorithm could draw unfair maps that looked normal because Haidet used something called simulated annealing.</p>
<p>The name stuck in my head because it sounded cool. Googling it later, I realized simulated annealing might help me find a color palette because it works well on problems with the following qualities:</p>
<ul>
<li><strong>Lots of possible solutions.</strong> I mean LOTS. One of the reasons why picking a set of colors is hard is because there are so many possible colors: a typical computer monitor in 2022 can display 16,777,216 distinct colors. That means a color palette of just three colors has 4.7 sextillion possibilities.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn2" id="fnref2">2</a></sup></li>
<li><strong>Multiple competing success criteria.</strong> Just as Haidet’s maps had to be both unfair and normal-looking, my ideal color palettes had to be Stripe-y, accessible, and broadly applicable.</li>
<li><strong>Room for error.</strong> I’m not designing a space suit; if my palette isn’t perfect, nobody is going to die.</li>
</ul>
<p>Simulated annealing is a very complex algorithm that I will now try to explain to the best of my (admittedly limited) abilities.</p>
<h3 id="how-simulated-annealing-works">How simulated annealing works</h3>
<p>Simulated annealing is named after a process called annealing. Annealing involves getting a piece of metal white-hot, then carefully cooling it down. Metalsmiths use annealing to strengthen metals.</p>
<p>Here’s how it works:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/annealing-2.png" alt="" /></figure>
<ol>
<li>Annealing starts with a weak piece of metal. In such a piece, the metal’s atoms are spread unevenly: Some atoms are close enough to share magnetic bonds, but others are too far apart to bond. The gaps that are left lead to microscopic deformities and cracks, weakening the metal.</li>
<li>When the weak metal is heated, the energy of heat breaks the bonds between atoms, and the atoms start to move around at random. Without the magnetic bonds between atoms, the metal is even weaker than before, making it easy to bend and reshape if needed; when the metal is glowing hot, its atoms are moving freely, spreading out evenly over time.</li>
<li>Next, the metal is placed in a special container to slowly cool. As the metal cools, the energy from heat decreases, and gradually, the atoms slow down enough to form magnetic bonds again. Because they’re more evenly spaced now, the atoms are more likely to share magnetic bonds with all their neighbors.</li>
<li>When fully cooled, the evenly-spaced atoms have many more bonds than they did before. This means there are far fewer imperfections; the metal is much stronger as a result.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn3" id="fnref3">3</a></sup></li>
</ol>
<p><em>Simulated</em> annealing is an optimization algorithm that operates on a set of data instead of a piece of metal. It follows a process similar to metallurgical annealing:</p>
<ol>
<li>Simulating annealing starts with data that is in an unoptimized state.</li>
<li>The algorithm begins by making a new version of the data, changing elements at random. Changing the data is like adding heat, resulting in random variations of the data. The algorithm scores both the original and the changed data according to desired criteria, then makes a choice: keep the current state or go back to the previous one? Strangely, the algorithm doesn’t always pick the version with the better score. At first, the algorithm is “hot,” meaning it picks between the two options (the current state and the randomly-changed one) with a coin toss. This means the data can become even less optimal in the first stage of the process, just as the glowing-hot metal becomes weaker and more pliable than it was to start.</li>
<li>With each new iteration, the algorithm “cools down” a little. Here, temperature is a metaphor for how likely the algorithm is to choose a better-scoring iteration of the data. With each cycle, the algorithm is more and more likely to pick mutations that are more optimized.</li>
<li>The algorithm finishes when the data settles into a highly optimized state; random changes will almost always result in a worse-scoring iteration, so the process comes to a halt.</li>
</ol>
<p>If we have a formula for comparing how optimized two versions of our data are, why don’t we always choose the better-scoring one? This is the key to simulated annealing. Hill-climbing algorithms, ones that <em>always</em> pick iterations with better scores, can quickly get stuck in what are called “local maxima” or “local minima” — states which are surrounded by less optimal neighbors but aren’t as optimal as farther-away options.</p>
<svg viewBox="0 0 1200 260">
<text x="5" y="50" font-size="24" style="fill: var(--c--theme-gray-3)">More optimal</text>
<text x="5" y="230" font-size="24" style="fill: var(--c--theme-gray-3)">Less optimal</text>
<text x="340" y="120" font-size="30" style="fill: var(--c--theme-primary-3)"> Local maximum</text>
<text x="770" y="60" font-size="30" style="fill: var(--c--theme-positive-3)"> Global maximum</text>
<path d="M65,65 l-8,8 m8,-8 l8,8 m-8,-8 v140 l-8,-8 m8,8 l8,-8" style="stroke: var(--c--theme-gray-2)" fill="transparent" stroke-width="5px"></path>
<path fill="transparent" style="stroke: var(--c--theme-gray-3)" stroke-width="7px" d="M150,220 c154 0 169 -80 271 -80 c79 0 107 71 189 71 c100 0 120 -130 250 -130 c136 0 171 139 293 139"></path>
<circle cx="420" cy="140" r="10" style="fill: var(--c--theme-primary-3)"></circle>
<circle cx="860" cy="80" r="10" style="fill: var(--c--theme-positive-3)"></circle>
</svg>
<p>So, by sometimes picking less-optimal iterations, simulated annealing can find good solutions to problems that have complicated sets of criteria, like my problem of picking color palettes.</p>
<h3 id="choosing-the-right-evaluation-score">Choosing the right evaluation score</h3>
<p>In applying simulated annealing to any set of data, the most important ingredient is a way of grading how optimal that data is. In my case, I needed to find a way to score a set of colors according to my desired criteria. Again, those were:</p>
<ul>
<li>Nice-looking (i.e., Stripe-y)</li>
<li>Broadly applicable</li>
<li>Accessible</li>
</ul>
<p>For each criteria, I needed to come up with an algorithm-friendly way of numerically scoring a color palette.</p>
<h4 id="nice-looking">Nice-looking</h4>
<p>The first criteria was one of the most challenging to translate into an algorithmic score. What does it mean for a color to be “nice-looking?” I knew that I wanted the colors to look similar to Stripe’s brand colors because I thought Stripe’s brand colors look nice; but what makes Stripe’s brand colors look nice? I quickly realized that, in the face of hundreds of years of color theory and art history, I was way out of my depth.</p>
<p>And so I hope you’ll forgive me for one small cop-out: instead of figuring out a way to objectively measure how nice-looking a set of colors are, I decided it’d be much easier to start with a set of colors about which a human had already decided (for whatever reason) “these look nice.” The score for how nice-looking a set of colors is would be: “how similar they are to a given subjectively-determined-by-a-human-to-look-nice color palette?.”</p>
<p>Only it turns out that even the question of “how similar are these two colors” is itself a very, very deep rabbit hole. There are decades of research published in hundreds of papers on the dozens of ways to measure the distance between two colors. Fortunately for me, this particular rabbit hole was mostly filled with math.</p>
<p>All systems of color distance rely on the fact that colors can be expressed by numbers. The simplest way to find the distance between two colors is to measure the distance between the numbers that represent the colors. For example, you might be familiar with colors expressed in RGB notation, in which the values of the red, green, and blue components are represented by a number from 0 to 255. When the components are blended together by a set of red, green, and blue LEDs, we see the resulting light as the given color.</p>
<p>In programming languages like CSS, <code>rgb(255, 255, 255)</code> is a way to express the color white — the red, green, and blue components each have the value of 255, the maximum for this notation. Pure red is <code>rgb(255, 0, 0)</code>. One way to measure the distance between white and red is to add each component’s colors together — for white, 255 + 255 + 255 = 765, and for red, 255 + 0 + 0 = 255 — then subtract the two resulting numbers — 765 - 255 = 510.</p>
<p>For reasons beyond the scope of this essay, this simple measurement of distance doesn’t match the way people perceive colors<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn4" id="fnref4">4</a></sup> — for example, darker colors are easier to tell apart than lighter colors, even if they have the same simple numeric difference in their RGB values. So scientists and artists have developed other ways to measure the difference between two colors, each with its own strengths and weaknesses. Some are better at matching our perception of paint on canvas, others are better at representing the ways colors look on computer monitors.</p>
<p>I spent a lot of time investigating these different color measurement systems. In the end, I settled on the International Commission on Illumination’s (CIE’s) ΔE* measurement.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn5" id="fnref5">5</a></sup> ΔE* is essentially a mathematical formula that measures the perceptual difference between two colors. Perceptual is the key word: The formula adjusts for some quirks in the way that we see and perceive color. It’s still somewhat subjective, but at least it’s subjective in a way that stands up to experimental scrutiny.</p>
<div class="t--align-center">
$$
{\displaystyle \Delta E_{00}^{*}={\sqrt {\left({\frac {\Delta L'}{k_{L}S_{L}}}\right)^{2}+\left({\frac {\Delta C'}{k_{C}S_{C}}}\right)^{2}+\left({\frac {\Delta H'}{k_{H}S_{H}}}\right)^{2}+R_{T}{\frac {\Delta C'}{k_{C}S_{C}}}{\frac {\Delta H'}{k_{H}S_{H}}}}}}
$$
</div>
<p>The ΔE* measurement between two colors ranges from zero to 100. Zero means “these colors are identical,” and 100 means “these colors are as different as possible.” For my algorithm, I wanted to minimize the ΔE* between my algorithmically selected colors and the nice-looking colors I hand-picked.</p>
<h4 id="broadly-applicable">Broadly applicable</h4>
<p>The “broadly applicable” criteria comes up most often when providing a list of colors for designers to pick from.</p>
<p>Colors that are <strong>very different from one another</strong> work in a wider variety of situations than colors that are from a similar family. Combining different hues and shades gives us a larger number of colors to use if we have many categories to visualize.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/annealing-3.jpg" alt="" /></figure>
<p>Colors that are <strong>equally different from one another</strong> reduce the chance that someone viewing the chart will see a relationship that doesn’t exist in the data.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/annealing-4.jpg" alt="" /></figure>
<p>To come up with a way of numerically calculating how applicable a color palette is, my friend ΔE* came in handy. The “very different” criteria can be measured by taking the average distance between all the colors in the set — this should be as high as possible. The “equally different” criteria can be measured by taking the <em>range</em> of the distances between all of the colors — this should be as small as possible.</p>
<h4 id="accessible">Accessible</h4>
<p>WCAG 2.2 dictates that non-text elements like chart bars or lines should have a color contrast ratio of at least 3:1 with adjacent colors.</p>
<p>There are lots of colors that have a 3:1 contrast ratio with 1 other color (like a white or black background). But for something like a stacked bar chart, pie chart, or a multi-line chart, it’s likely that there will be multiple elements adjacent to each other, all with their own color. Finding just three colors with a 3:1 contrast ratio to each other is extremely challenging. Anything beyond three colors is essentially impossible.</p>
<p>It’s important to note that WCAG is only concerned with color contrast, just one of the ways in which colors can be perceived as different. Color contrast measures the relative “brightness” of two colors; the relative brightness of colors depends highly on whether or not you have colorblindness. The way people perceive the amount of contrast between two colors varies greatly depending on the biology of their eyes and brains.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/annealing-5.jpg" alt="" /></figure>
<p>Fortunately, addressing the WCAG contrast requirement can be done without too much difficulty. Instead of finding colors that have a 3:1 contrast ratio, use a border around the colored chart elements. As long as the chart colors are of a 3:1 contrast ratio with the border color, you’re set.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/annealing-6.jpg" alt="" /></figure>
<p>For my color palettes, I wanted to go beyond the WCAG contrast requirement and find colors that work well for people with and without color blindness. Fortunately, there is (again) a deep body of published research on mathematical ways to simulate color blindness. Like our ΔE* formula earlier, there is a formula — created by Hans Brettel, Françoise Viénot, and John D. Mollon<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn6" id="fnref6">6</a></sup> — for translating the color a person without color blindness sees into the (approximate) color a person with colorblindness would see.</p>
<div class="t--align-center">
$$
\begin{pmatrix} L_{Q}
\\ M_{Q}
\\ S_{Q}
\end{pmatrix}
=
\begin{bmatrix}
L_R & L_G & L_B \\
M_R & M_G & M_B \\
S_R & S_G & S_B
\end{bmatrix}
\begin{pmatrix} R_{Q}
\\ G_{Q}
\\ B_{Q}
\end{pmatrix}
$$
</div>
<p>One bonus to this formula is that it comes with variations for the different types of colorblindness. When evaluating, we can adjust the score for each type of colorblindness, depending on how common or uncommon it is (more on this in a bit).</p>
<p>To determine whether a color palette works well for people with colorblindness, I first translate the colors into their color blindness equivalent using the matrix math above. Then, I measure the average of the distances between the colors using the ΔE* like we did above.</p>
<h3 id="putting-it-all-together">Putting it all together</h3>
<p>At this point, I had an algorithm that could optimize a set of data in a huge solution space, and quantitative measurements of each of the criteria I wanted to evaluate for. The last step was to crunch all the quantitative measurements down into a single number representing how “good” a color palette is.</p>
<p>The calculation that produces this single number is called the “loss function” or “cost function.” The resulting number is the “loss” or “cost” of a set of colors. It’s essentially just a measurement of how optimized the data is; the lower the loss, the better; a loss of zero means that we have the ideal solution.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn7" id="fnref7">7</a></sup></p>
<p>In practice, optimizers stop long before they get to zero loss. In most optimization problems, there’s no such thing as the one right answer. There are only lots of wrong answers. Our goal is to find the least wrong one.</p>
<p>To that end, at the very end of my loss function, all the individual criteria scores are added together. Each is given a multiplier, which allows me to dial up or down how important a value is: Multiplying the “nice-looking” score by a higher value means that the optimizing algorithm will tend to pick nice-looking palettes, even if they aren’t as accessible or versatile.</p>
<div class="t--align-center">
$$
\begin{align}
loss & = a * nice\newline
& + b * applicable\newline
& + c * protanopia\newline
& + d * deuteranopia\newline
& + e * tritanopia
\end{align}
$$
</div>
<p>I’m calculating scores for three different types of colorblindness, each with its own multiplier. This means that the overall tradeoffs in the algorithm are in relation to how common each type of colorblindness is.</p>
<p>I plug the loss function into the simulated annealing algorithm and run it. On my 2016 MacBook, the algorithm ran in about three seconds. It’s far from optimized, but not too shabby considering it generates and evaluates around 16,000 color palettes.</p>
<figure class="l--grid-wide">
<img src="https://matthewstrom.com/images/annealing-7.jpg" loading="lazy" />
<figcaption>
The result of optimizing randomly-selected colors with simulated annealing
</figcaption>
</figure>
<article class="post l--grid-narrow">
<h2 id="the-result">The result</h2>
<p>The colors on the left (<code>#3ec240</code><span class="swatch" style="background: #3ec240"></span>, <code>#65c590</code><span class="swatch" style="background: #65c590"></span>, <code>#ac2444</code><span class="swatch" style="background: #ac2444"></span>, <code>#b9a263</code><span class="swatch" style="background: #b9a263"></span>, and <code>#ab088d</code><span class="swatch" style="background: #ab088d"></span>) are the randomly-chosen starting point of the algorithm. Running them through my loss function results in a score of 217.8.</p>
<p>The colors on the right (<code>#004ebd</code><span class="swatch" style="background: #004ebd"></span>, <code>#00825d</code><span class="swatch" style="background: #00825d"></span>, <code>#7c0000</code><span class="swatch" style="background: #7c0000"></span>, <code>#fe91fe</code><span class="swatch" style="background: #fe91fe"></span>, and <code>#ff821f</code><span class="swatch" style="background: #ff821f"></span>) are the result of the simulated annealing algorithm. The loss function scores this palette a 136.3.</p>
<p>According to the loss function, the optimized palette on the right is about 38% better than the random colors on the left I started with. Visually, that checks out: three of the initial colors are very closely clustered in the green part of the spectrum. If I said “the green portion of the bar,” you’d have a hard time guessing which one I was talking about. The optimized palette, by contrast, has a wide variety of shades and hues — there’s only one green part of each bar.</p>
<p>As for my accessibility criteria, you can visually check the results using a color blindness simulation<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn8" id="fnref8">8</a></sup>:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/annealing-8.jpg" alt="A simulation of how a person with protanopia might see the two color palettes" /><figcaption>A simulation of how a person with protanopia might see the two color palettes</figcaption></figure>
<p>In the unoptimized palette, the differences between the greens becomes even harder to perceive. In the optimized palette, most of the colors are distinct. But the algorithm isn’t perfect; the orange and green become much more similar in the protanopia simulation. It’s a good reminder that no tool can replace the important step of testing your choices with real users.</p>
<p>Overall, the algorithm appears to be doing a great job of finding colors that fit the criteria I defined. You can see this in a chart of the loss function over time as the algorithm runs: Initially, when the algorithm is “hot,” the loss function fluctuates up and down; as the algorithm “cools,” more optimal palettes are chosen until the algorithm finds a stable solution and sticks to it.</p>
<figure>
<svg viewBox="0 0 600 300">
<text x="5" y="30" font-size="24" font-weight="600" style="fill: var(--c--theme-gray-4)">Loss function over time</text>
<text x="5" y="70" font-size="18" style="fill: var(--c--theme-gray-3)">More optimal</text>
<text x="5" y="270" font-size="18" style="fill: var(--c--theme-gray-3)">Less optimal</text>
<text x="130" y="70" font-size="14" style="fill: var(--c--theme-gray-3)">100</text>
<text x="130" y="136" font-size="14" style="fill: var(--c--theme-gray-3)">150</text>
<text x="130" y="203" font-size="14" style="fill: var(--c--theme-gray-3)">200</text>
<text x="130" y="270" font-size="14" style="fill: var(--c--theme-gray-3)">250</text>
<path d="M160 65 h800" style="stroke: var(--c--theme-gray-2)"></path>
<path d="M160 131 h800" style="stroke: var(--c--theme-gray-2)"></path>
<path d="M160 198 h800" style="stroke: var(--c--theme-gray-2)"></path>
<path d="M160 265 h800" style="stroke: var(--c--theme-gray-2)"></path>
<g transform="translate(160, 100) ">
<path d="M1 104v2h1c0-1 0-1 0 0h1c0-1 0-1 0 0l1 4v-6l1 2c0 1 0 1 0 0v-2h1V94h1c0 1 0 1 0 0l1-2v5h2v-2l1-1v-4h1v-1h1v-5h1v-1h1v-5s0-1 0 0h1v-2l1 4v3c0 1 0 1 0 0v-1h1v-1 1h1v1l1 4v-1c0-1 0-1 0 0h1v-1h1v2-3h1v2-1h1v-1h1v-6h1v4h1v-1h1v1h1v-7l1-1h1v7l1 1 1 3v2h1v5h1v-6l1-1v-7h1v-1h1v2h1v1h1v-6h1v-2l1 3v1-1h1v-1 3h1v-2h1v12h1v2-8h1v3l1 1v-2h1v1c0 1 0 1 0 0h1v3h1v1l1 2v8h1v-2h1v-7l1-2v1h1v-4l1-5v5h1v2h1v-6h1v-4l1-1v8l1 1v6h2v10h1v-5l1-2c0-1 0-1 0 0h1v-4l1-4v-9 8l1-6v-2c0-1 0-1 0 0h1v3l1 1v-4h1v-1c0-1 0-1 0 0v4l1 1v2l1 1v9l1-8v9l1 2v-4l1-2c0-1 0-1 0 0v-2l1-1v3h1v2h1v-3h1v-3h1v3c0 1 0 1 0 0v1l1 1v-1l1-1v6h1v1-1h1c0-1 0-1 0 0v-1l1-2v-3l1 2v8l1-1v-6l1 7v-3h1v8l1 3v-6h1v3h1v-4l1-2v-9l1-1v1h1v-1l1-2v-3 10h1v6h1c0-1 0-1 0 0h1v6l1 2v-1h1v-2l1 2v3h1v-5h1v1-1h1c0-1 0-1 0 0l1-4v3c0 1 0 1 0 0l1-2v-5l1 8h1v-5l1 2v1-4h1v-6h1v8h1v3-3l1-9v-5l1-3v7-5h1v9l1-1v-4l1 10v2h1v-1h1v-4l1 1v1c0-1 0-1 0 0h1v-3h1v-3h1v2l1-3v-2 2h1v-2l1-1V76h1v2c0-1 0-1 0 0l1-4v-4l1-6v-5h1v-6h1v1l1 2v1l1-6v6l1 3v10l1-3v-5h1v4l1-1v-2l1-1v3l1 5v5l1 4V68h1v11-12 3h1v-4c0-1 0-1 0 0l1-1v-1h1v-3l1-3c0 1 0 1 0 0v-3h1v6h1v5-6h1v-6l1-3c0-1 0-1 0 0v3h2v1-2h1v7-4l1-5v3l1 6v6-6h1v-4l1-6c0 1 0 1 0 0l1 4c0-1 0-1 0 0l1 3v6l1-4v-3l1-1v-2h1v-2 2h2v5-4l1-1v-2h1v-3h1c0 1 0 1 0 0v-1l1-2v-4l1 1v2h1v-1 11-3h1c0-1 0-1 0 0h1v3h1v-1s0-1 0 0h1v-4h1l1-2v4h1v1l1-3v11h1v2h1v-3h1v1c0-1 0-1 0 0h1v-4l1-1v-1l1-1v3h1v-7l1 1v2s0 1 0 0l1-4v-1h1v1-3c0-1 0-1 0 0h1c0-1 0-1 0 0h1v-3h1v1h1v-6l1-1h1l1-1v-1h1v1h1v-5l1-1v-3h2v2h2v1h1v-3l1-3v-4h1v1h1v3h1v-3l1 1h1v-1l1-1h1v-3h2v-1h1v-1h1l1 1v3h1v1h1l1-1c0-1 0-1 0 0l1-1v-1h1v-3h1v-1h1v-1h1v-1h1V9h1V8h1V7s0-1 0 0V6l1 1V6h4l1 1h2l1-1h1V5h2V4h1l1 1h5v1-1h4V4h6v1-1h2c0 1 0 0 0 0h1V3l1 1h1l1-1h6V2h15l1-1h194" style="stroke: var(--c--theme-primary-3)" stroke-width="2" stroke-miterlimit="10" fill="transparent"></path>
</g>
</svg>
<figcaption>A chart of the algorithm's loss function over time</figcaption>
</figure>
<p>I’m not a computer scientist, and the parameters I’ve chosen for the simulated annealing algorithm probably aren’t quite right. Regardless, the results are promising.</p>
<h2 id="stress-test">Stress test</h2>
<p>With an optimization function in hand, I wanted to put it through a few tests to see if it was capable of matching the hand-picked and optimized palettes of IBM and Adobe.</p>
<p>To compare the palettes, I used “just-noticeable difference” (JND), the method that Elijah Meeks and Susie Lu implemented on the color evaluation tool Viz Palette. This approach recognizes the fact that when it comes to data visualization, large areas of color are easier to tell apart than small dots or lines.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn9" id="fnref9">9</a></sup> Viz Palette reports an issue with any pair of colors in a palette that would be indistinguishable when used in chart elements of various sizes.</p>
<p>The following table analyzes four 12-color palettes:</p>
<ol>
<li>Adobe’s Spectrum design system 12-color palette</li>
<li>The first 12 colors of IBM’s 14-color palette</li>
<li>The first 12 colors of d3’s <code>d3.category20</code> palette</li>
<li>The best of five runs of my optimizer generating 12 random colors<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fn10" id="fnref10">10</a></sup></li>
</ol>
<table class="table--responsive">
<colgroup span="1"></colgroup>
<colgroup span="4"></colgroup>
<thead>
<tr>
<th class="table--group-header table--group-start table--group-end t--weight-bold" colspan="1">Color vision deficiency</th>
<th class="table--group-header t--align-right table--group-start table--group-end t--weight-bold" colspan="4" scope="colgroup">JND issues</th>
</tr>
<tr>
<th width="40%"></th>
<th class="t--align-right" width="15%">Adobe</th>
<th class="t--align-right" width="15%">IBM</th>
<th class="t--align-right" width="15%">D3</th>
<th class="t--align-right" width="15%">Mine</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">No color vision deficiency</th>
<td data-label="Adobe" class="t--align-right t--numbers-tabular">2</td>
<td data-label="IBM" class="t--align-right t--numbers-tabular">1</td>
<td data-label="D3" class="t--align-right t--numbers-tabular">4</td>
<td data-label="Mine" class="t--align-right t--numbers-tabular">0</td>
</tr>
<tr>
<th scope="row">Protanopia</th>
<td data-label="Adobe" class="t--align-right t--numbers-tabular">6</td>
<td data-label="IBM" class="t--align-right t--numbers-tabular">9</td>
<td data-label="D3" class="t--align-right t--numbers-tabular">13</td>
<td data-label="Mine" class="t--align-right t--numbers-tabular">3</td>
</tr>
<tr>
<th scope="row">Deuteranopia</th>
<td data-label="Adobe" class="t--align-right t--numbers-tabular">6</td>
<td data-label="IBM" class="t--align-right t--numbers-tabular">11</td>
<td data-label="D3" class="t--align-right t--numbers-tabular">12</td>
<td data-label="Mine" class="t--align-right t--numbers-tabular">4</td>
</tr>
<tr class="c--bg-gray-1">
<th scope="row">Total</th>
<td data-label="Adobe" class="t--align-right t--numbers-tabular">14</td>
<td data-label="IBM" class="t--align-right t--numbers-tabular">21</td>
<td data-label="D3" class="t--align-right t--numbers-tabular">29</td>
<td data-label="Mine" class="t--align-right t--numbers-tabular">7</td>
</tr>
</tbody>
</table>
<p>Looking at accessibility alone, my optimization function is much better at picking colors.</p>
<p>Another interesting feature of the algorithm is that you can “art direct” it. In my “nice looking” criteria, I measured how far the palette was from Stripe’s brand colors; if, instead, I use target colors from trendy color palettes from <a href="https://color.adobe.com/trends" target="_blank" rel="noopener">Adobe Color</a>, I get other nice-looking — but still optimized — outcomes.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/annealing-9.jpg" alt="" /></figure>
<p>The algorithm finds colors that are close to the desired palette, along with appropriately contrasting colors. In each case, the colors are easy to see when stacked against one another. I’m really happy with the result; it’s taken a lot of manual tweaking out of exploring new palettes.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Starting from a position of knowing very little color theory, I’ve been able to wander from concept to concept in search of a solution to a very tricky problem.</p>
<p>Color is complicated. Despite being one of the fundamental aspects of design, there’s a lot of theory that is still being discovered, debated, and defined. Some of the concepts I ended up using — like the CIE ΔE* formula and Brettel et al.’s colorblindness transformation — were first described in the last half century. Even newer concepts like wide-gamut colors are only being unlocked with this year’s technology.</p>
<p>The underlying problem — picking a color palette for a categorical data visualization — is just as complex. For just three colors, there are more possible palettes than there are atoms in the universe. Evaluating each one is impossible; besides, there may be no single best answer but millions of answers that are equally good enough.</p>
<p>With the right tools (like simulated annealing), a computer can perform a relatively lightweight series of calculations to find an acceptable answer. I’m sure a more knowledgeable computer scientist could point me to a dozen more powerful tools that may be able to find even better answers in even shorter amounts of time.</p>
<p>Regardless, this type of learning has given me two important things:</p>
<ol>
<li>an immense amount of respect for designers who have an intuitive feeling for color</li>
<li>a lot of new information to bring to bear when making my own decisions about color</li>
</ol>
<p>I’ve made the source code for the algorithm available <a href="https://github.com/ilikescience/category-colors" target="_blank" rel="noopener">here</a> — please take a look and let me know if you have ideas for how to improve the method. A month’s worth of nights and weekends exploring the problem might seem like overkill to end up here. But maybe these 4,000 words can help spark more journeys.</p>
<p>I hope you’ve found something new to explore.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>A misleading term. Lots of people taught me — but very few of them were professional teachers. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>An absurdly large number. If you could program a computer to evaluate each and every one of these possibilities at a rate of 1 per nanosecond, it would take more than 10 thousand years to complete the task. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Annealing is much more complicated than this, and I hope any metalsmiths or physicists will forgive me for the simplifications I’ve made. As usual, you can get the full picture on Wikipedia. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Maybe a future essay, though! In the meantime, try browsing <a href="https://en.wikipedia.org/wiki/Color_difference" target="_blank" rel="noopener">Wikipedia’s page on color difference</a>. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Sharma, Gaurav, Wencheng Wu, and Edul N. Dalal. “The CIEDE2000 Color-Difference Formula: Implementation Notes, Supplementary Test Data, and Mathematical Observations.” <em>Color Research & Application</em> 30, no. 1 (2005): 21–30, <a href="http://www2.ece.rochester.edu/~gsharma/ciede2000/ciede2000noteCRNA.pdf" target="_blank" rel="noopener">http://www2.ece.rochester.edu/~gsharma/ciede2000/ciede2000noteCRNA.pdf</a>. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Brettel, Hans, Françoise Viénot, and John D. Mollon. “Computerized simulation of color appearance for dichromats.” Journal of the Optical Society of America A 14, no. 10 (1997): 2,647–2,655, <a href="http://vision.psychol.cam.ac.uk/jdmollon/papers/Dichromatsimulation.pdf" target="_blank" rel="noopener">http://vision.psychol.cam.ac.uk/jdmollon/papers/Dichromatsimulation.pdf</a>. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>Data scientists use words like “loss” and “cost” instead of “gain” and “value,” not because they’re pessimists but because minimizing gives us a nice boundary to work toward: If we were maximizing a number instead, there would always be a hypothetically better solution, since there’s always a bigger number. But we’re minimizing, and we can stop at zero. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn8" class="footnote-item"><p>In this case, I used the Brettel et al. method via <a href="http://mapeper.github.io/jsColorblindSimulator/" target="_blank" rel="noopener">jsColorblindSimulator</a>. No color blindness simulation can accurately represent how people with color blindness see the world. Color blindness is not as strictly categorical as the various diagnoses make it out to be; people can have widely-varying degrees of color vision deficiencies in one or more categories. The tools I used to create these images are making educated approximations, but they’re still approximations. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref8" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn9" class="footnote-item"><p>Stone, Maureen, Danielle Albers Szafir, and Vidya Setlur. “An engineering model for color difference as a function of size.” Color and Imaging Conference, 2014, pp. 253–258. Society for Imaging Science and Technology, <a href="https://research.tableau.com/sites/default/files/2014CIC_48_Stone_v3.pdf" target="_blank" rel="noopener">https://research.tableau.com/sites/default/files/2014CIC_48_Stone_v3.pdf</a>. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref9" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn10" class="footnote-item"><p>In these runs, I tuned the algorithm a bit to not care so much about finding colors that looked like Stripe’s brand colors. This results in slightly less aesthetically pleasing palettes, but if you need a functional 12-color palette, you’ll have to make that sacrifice. <a href="https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/#fnref10" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
</article>
Hockey sticks don't look like hockey sticks
2022-02-26T00:00:00Z
https://matthewstrom.com/writing/hockey-sticks/
<p>“Hockey stick” growth has long been the elusive goal of Silicon Valley (and Valley-esque) venture-capital-backed startups. It’s so named because the graph of some company metric — users, revenue, retention, orders — starts low and flat, then slowly lifts, then turns steeper and steeper into a near-vertical line representing thunderous growth.</p>
<p>For example, here’s two hockey-stick graphs showing the revenues of Alphabet (Google), and Meta (Facebook).</p>
<figure>
<div class="l--flex">
<div class="l--flex-auto">
<svg viewBox="0 0 900 820">
<text x="10" y="30" style="font-size: 2em; font-weight: var(--t--weight-bold); fill: var(--c--theme-gray-4);">Alphabet</text>
<g transform="translate(0 0)">
<path style="stroke:var(--c--theme-gray-2)" d="M90 70h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 170h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 270h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 370h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 470h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 570h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 670h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 770h760"></path>
</g>
<g transform="translate(25, 400)">
<text text-anchor="middle" transform="rotate(-90)" style="font-size:1.5em; fill: var(--c--theme-gray-3)">Revenue, billions</text>
</g>
<g text-anchor="end" transform="translate(30 30)" style="font-size:1.5em; fill: var(--c--theme-gray-3)">
<text x="40" y="150">3</text>
<text x="40" y="350">2</text>
<text x="40" y="550">1</text>
<text x="40" y="750">0</text>
</g>
<g transform="translate(20 35)" style="font-size:1.5em; fill: var(--c--theme-gray-3)">
<text x="50" y="780">Year 1</text>
<text x="170" y="780">Year 2</text>
<text x="290" y="780">Year 3</text>
<text x="410" y="780">Year 4</text>
<text x="530" y="780">Year 5</text>
<text x="650" y="780">Year 6</text>
<text x="770" y="780">Year 7</text>
</g>
<g transform="translate(0 20)" style="fill: var(--c--theme-positive-3)">
<circle cx="110" cy="750" r="10"></circle>
<circle cx="230" cy="750" r="10"></circle>
<circle cx="350" cy="740" r="10"></circle>
<circle cx="470" cy="710" r="10"></circle>
<circle cx="590" cy="660" r="10"></circle>
<circle cx="710" cy="440" r="10"></circle>
<circle cx="830" cy="110" r="10"></circle>
</g>
<path transform="translate(0 20)" fill="transparent" style="stroke: var(--c--theme-positive-3)" stroke-width="5" d="M110 750 h120l120-10 120-30 120-50 120-220 120-330"></path>
</svg>
</div>
<div class="l--flex-auto">
<svg viewBox="0 0 900 820">
<text x="10" y="30" style="font-size: 2em; font-weight: var(--t--weight-bold); fill: var(--c--theme-gray-4);">Meta</text>
<g transform="translate(0 0)">
<path style="stroke:var(--c--theme-gray-2)" d="M90 70h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 157h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 244h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 331h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 418h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 505h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 592h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 679h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90 770h760"></path>
</g>
<g transform="translate(25, 400)">
<text text-anchor="middle" transform="rotate(-90)" style="font-size:1.5em; fill: var(--c--theme-gray-3)">Revenue, billions</text>
</g>
<g text-anchor="end" transform="translate(30 10)" style="font-size:1.5em; fill: var(--c--theme-gray-3)">
<text x="40" y="70">2</text>
<text x="40" y="244">1.5</text>
<text x="40" y="418">1</text>
<text x="40" y="592">0.5</text>
<text x="40" y="770">0</text>
</g>
<g transform="translate(20 35)" style="font-size:1.5em; fill: var(--c--theme-gray-3)">
<text x="50" y="780">Year 1</text>
<text x="170" y="780">Year 2</text>
<text x="290" y="780">Year 3</text>
<text x="410" y="780">Year 4</text>
<text x="530" y="780">Year 5</text>
<text x="650" y="780">Year 6</text>
<text x="770" y="780">Year 7</text>
</g>
<g transform="translate(0 20)" style="fill: var(--c--theme-primary-3)">
<circle cx="110" cy="750" r="10"></circle>
<circle cx="230" cy="750" r="10"></circle>
<circle cx="350" cy="740" r="10"></circle>
<circle cx="470" cy="710" r="10"></circle>
<circle cx="590" cy="660" r="10"></circle>
<circle cx="710" cy="490" r="10"></circle>
<circle cx="830" cy="110" r="10"></circle>
</g>
<path transform="translate(0 20)" fill="transparent" style="stroke: var(--c--theme-primary-3)" stroke-width="5" d="M110 750 h120l120-10 120-30 120-50 120-170 120-380"></path>
</svg>
</div>
</div>
<figcaption>Source: <a href="https://hockeystickprinciples.com/charts/" target="_blank" rel="noopener">https://hockeystickprinciples.com/charts/</a></figcaption>
</figure>
<p>Looking at a hockey-stick graph, it’s not hard to see why it’s so desirable. Once a business hits the handle side of the stick, any investment made on the low end is quickly multiplied to astronomical returns. This is particularly alluring to venture capitalists who see the potential for rocket-ship growth as justification for risky investments in early-stage companies.</p>
<p>But once the hockey-stick dream is dreamt and the big checks get written, the investors start scrutinizing the graphs. “We had lackluster growth last quarter,” they say. “We need to start moving the needle.”</p>
<p>I’ve heard those words from investors. They get passed down to CEOs, to VPs, to middle managers, and to the people on the ground. The push for accelerating growth starts showing up in every planning meeting, every metrics review, every standup and check-in.</p>
<p>“Incremental” becomes a dirty word. Incremental changes — small, continuous ones — won’t win the race. We need hockey-stick changes. Blue-sky thinking. Out-of-the-box innovation. Big swings.</p>
<p>The great irony of this mindset is it almost guarantees that the company will not achieve the hockey-stick growth that it so desires. That’s because the very incremental changes that growth-hungry executives are avoiding are the key to reaching the prize at the end of the graph.</p>
<p>I can’t be too hard on them, though; hockey sticks are deceptive. It’s almost impossible to know you’re on one until you’re already leaving the stratosphere. But with a little knowledge of statistics and some patience, you can learn to foster the right mindset to not ignore the one that may be right under your nose.</p>
<h2 id="embrace-the-incremental">Embrace the incremental</h2>
<p>Let’s try an experiment: I’m going to start two savings accounts, accounts A and B. Both accounts start with $100.</p>
<p>At the beginning of every <strong>week</strong>, I’ll deposit $20,000 into account A.</p>
<p>At the beginning of every <strong>day</strong>, I’ll make a deposit to account B equal to 3% of the account’s value (for example, today, the account has $100, so I’ll deposit 3% of $100, or $3.00. Tomorrow, the account will have $103.00 in it, so I’ll deposit 3% of $103, or $3.09).</p>
<p>After a year, I’ll give you all the money in one account. Which do you want?</p>
<p>Right off the bat, what’s your intuition of how <em>different</em> the accounts are?</p>
<p>You can probably quickly figure out that account A will have a little over a million dollars in it at the end of the experiment ($20k × 52 weeks = $1,040,100). But I probably wouldn’t be setting up this thought experiment if that was the right choice. So what about account B? Without sitting down to do the math, it’s very hard to even guess how much money it will accrue.</p>
<p>So let’s do the math. Here are the numbers:</p>
<table class="table--responsive">
<thead>
<tr>
<th></th>
<th class="t--align-right t--weight-bold">Account A</th>
<th class="t--align-right t--weight-bold">Account B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Week 1</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$20,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$122.99</td>
</tr>
<tr>
<th scope="row">Week 2</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$40,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$151.26</td>
</tr>
<tr>
<th scope="row">Week 3</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$60,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$186.03</td>
</tr>
<tr>
<th scope="row">Week 4</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$80,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$228.79</td>
</tr>
</tbody>
</table>
<p>After the first month, account A has grown by \$80,000, while account B has grown by $128.79. You’d be right to suspect that account A was the right choice.</p>
<p>Now, the first four months:<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/hockey-sticks/#fn1" id="fnref1">1</a></sup></p>
<table class="table--responsive">
<thead>
<tr>
<th></th>
<th class="t--align-right t--weight-bold">Account A</th>
<th class="t--align-right t--weight-bold">Account B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Month 1</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$100,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$250.01</td>
</tr>
<tr>
<th scope="row">Month 2</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$180,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$589.16</td>
</tr>
<tr>
<th scope="row">Month 3</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$260,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$1,472.95</td>
</tr>
<tr>
<th scope="row">Month 4</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$340,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$3,575.23</td>
</tr>
</tbody>
</table>
<p>Account A is worth over 100× account B. If you picked account B and were checking the balances every day, you’d be crying.</p>
<p>In fact, things look pretty bleak the whole year. But after week 34 — that’d be August 21, if we started the experiment on January 1 — something exciting happens. Here’s that moment, with a little extra data:</p>
<table class="table--responsive l--mar-top-m l--mar-btm-m">
<colgroup></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th class="table--header-empty" rowspan="2"></th>
<th class="table--group-header t--align-right table--group-start table--group-end t--weight-bold" colspan="2" scope="colgroup">Account A</th>
<th class="table--group-header t--align-right table--group-start table--group-end t--weight-bold" colspan="2" scope="colgroup">Account B</th>
</tr>
<tr>
<th class="t--align-right table--group-start" scope="col">Total</th>
<th class="t--align-right table--group-end" scope="col">Weekly change</th>
<th class="t--align-right table--group-start" scope="col">Total</th>
<th class="t--align-right table--group-end" scope="col">Weekly Change</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Week 34</th>
<td data-label="Account A total " class="t--align-right t--numbers-tabular table--group-start">$680,100.00</td>
<td data-label="Account A weekly change" class="t--align-right t--numbers-tabular table--group-end">$20,000.00</td>
<td data-label="Account B total " class="t--align-right t--numbers-tabular table--group-start">$92,341.92</td>
<td data-label="Account B weekly change" class="t--align-right t--numbers-tabular table--group-end">$17,777.27</td>
</tr>
<tr>
<th scope="row">Week 35</th>
<td data-label="Account A total " class="t--align-right t--numbers-tabular table--group-start">$700,100.00</td>
<td data-label="Account A weekly change" class="t--align-right t--numbers-tabular table--group-end">$20,000.00</td>
<td data-label="Account B total " class="t--align-right t--numbers-tabular table--group-start">$113,568.92</td>
<td data-label="Account B weekly change" class="t--align-right t--numbers-tabular table--group-end">$21,863.80</td>
</tr>
<tr>
<th scope="row">Week 36</th>
<td data-label="Account A total " class="t--align-right t--numbers-tabular table--group-start">$720,100.00</td>
<td data-label="Account A weekly change" class="t--align-right t--numbers-tabular table--group-end">$20,000.00</td>
<td data-label="Account B total " class="t--align-right t--numbers-tabular table--group-start">$139,675.44</td>
<td data-label="Account B weekly change" class="t--align-right t--numbers-tabular table--group-end">$26,889.72</td>
</tr>
</tbody>
</table>
<p>Account A has over a half a million dollars <em>more</em> than Account B. But in that last column — look! — account B has started to get more money per week than account A. But we’re two thirds of the way through the year, and with a half-million-dollar difference, account A still looks like the clear winner.</p>
<p>But on day 310 (November 7 if we started on January 1), Christmas comes early:</p>
<table class="table--responsive">
<thead>
<tr>
<th></th>
<th class="t--align-right t--weight-bold">Account A</th>
<th class="t--align-right t--weight-bold">Account B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Day 308</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$880,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$873,027.62</td>
</tr>
<tr>
<th scope="row">Day 309</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$900,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$899,218.45</td>
</tr>
<tr>
<th scope="row">Day 310</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$900,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$926,195.00</td>
</tr>
</tbody>
</table>
<p>Account B now has more money and is growing faster than account A.</p>
<p>And there’s one more trick up account B’s sleeve: It continues to grow even faster. When the year comes to an end, the winner is clear:</p>
<table class="table--responsive">
<thead>
<tr>
<th></th>
<th class="t--align-right t--weight-bold">Account A</th>
<th class="t--align-right t--weight-bold">Account B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Day 365</th>
<td class="t--align-right t--numbers-tabular" data-label="Account A">$1,060,100.00</td>
<td class="t--align-right t--numbers-tabular" data-label="Account B">$4,848,272.45</td>
</tr>
</tbody>
</table>
<p>In retrospect, it’s a no brainer. But before — and even during — the experiment, it’s fuzzy. Hockey-stick growth is just plain hard to have an intuitive feel for. For example, at 2% growth per day, account B is an awful pick, topping out at $132,392. At 4% growth, account B winds up with more than 100× that, over $152 million. Tiny changes in the initial conditions, repeated many times over, swing the results wildly.</p>
<h2 id="the-second-half-of-the-chessboard">The second half of the chessboard</h2>
<p>There’s another parable that illustrates the surprising nature of hockey-stick growth: the story of the inventor of chess.</p>
<p>The legend goes that soon after chess was invented, it became wildly popular. The ruler of the kingdom (some versions say China, others say India) was a big fan himself and wanted to thank the inventor. The ruler called the inventor to court and told him: “Name your reward.”</p>
<p>The inventor replied: “One grain of wheat on the first square of the chessboard. Two on the second square, four on the third square, doubling each time, for each of the 64 squares.”</p>
<p>The ruler was amazed that such a genius would also be so humble, and immediately granted his request.</p>
<p>Later, the court treasurers delivered bad news: The kingdom would be bankrupt.</p>
<p>While the amount of wheat on the chessboard was minuscule at first, it quickly grew. In the end, the total number of grains over all the squares was 18,446,744,073,709,551,615 — over 1.4 trillion metric tons of wheat.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/hockey-sticks/#fn2" id="fnref2">2</a></sup></p>
<p>In some versions of the story, the inventor pays the ultimate price by losing his head.</p>
<p>On the face of it, this story makes it clear that hockey-stick growth is good for business. But the inventor Ray Kurzweil points out a hidden fact of the story (in Kurzweil’s version, the inventor asks for rice):</p>
<blockquote>
<p>… there is one thing we should note: [the story] was fairly uneventful as the emperor and the inventor went through the first half of the chessboard. After thirty-two squares, the emperor had given the inventor about 4 billion grains of rice. That’s a reasonable quantity — about one large field’s worth — and the emperor did start to take notice.</p>
</blockquote>
<blockquote>
<p>But the emperor could stay an emperor. And the inventor could still retain his head. It was as they headed into the second half of the chessboard that at least one of them got into trouble.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/hockey-sticks/#fn3" id="fnref3">3</a></sup></p>
</blockquote>
<p>The “second half of the chessboard” effect shows up in our earlier thought experiment, too — especially when we plot out the results.</p>
<figure>
<svg viewBox="0 0 900 620">
<text x="10" y="30" style="font-size: 1.5em; font-weight: var(--t--weight-bold); fill: var(--c--theme-gray-4);"><tspan style="fill: var(--c--theme-highlight-4)">Account A</tspan> vs. <tspan style="fill: var(--c--theme-primary-3)">Account B</tspan>, entire year</text>
<path style="stroke:var(--c--theme-gray-2)" d="M90,70h 760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90,170 h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90,270 h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90,370 h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90,470 h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90,570 h760"></path>
<g text-anchor="end" transform="translate(30 25)" style="font-size:1em; fill: var(--c--theme-gray-3)">
<text x="40" y="50">$5M</text>
<text x="40" y="150">$4M</text>
<text x="40" y="250">$3M</text>
<text x="40" y="350">$2M</text>
<text x="40" y="450">$1M</text>
<text x="40" y="550">$0</text>
</g>
<g style="font-size:1em; fill: var(--c--theme-gray-3)">
<text x="85" y="600">Month 1</text>
<text x="415" y="600">Month 6</text>
<text x="765" y="600">Month 12</text>
</g>
<path transform="translate(0 20)" fill="transparent" style="stroke: var(--c--theme-highlight-4)" stroke-width="5" d="M100,550 l740,-105 "></path>
<path transform="translate(0 20)" fill="transparent" style="stroke: var(--c--theme-primary-3)" stroke-width="5" d="M100,550 c600,0 700,0 740,-480 "></path>
</svg>
</figure>
<p>Looking at the entire year, it’s easy to focus only on the end state. The difference between accounts A and B at the end of the year is clear; the graph’s horizontal lines show that account B is roughly 5× account A.</p>
<p>But what if we look at the graph only halfway through the year? Not only was account B worth less; it <em>wasn’t even close.</em></p>
<figure>
<svg viewBox="0 0 900 420">
<text x="10" y="30" style="font-size: 1.5em; font-weight: var(--t--weight-bold); fill: var(--c--theme-gray-4);"><tspan style="fill: var(--c--theme-highlight-4)">Account A</tspan> vs. <tspan style="fill: var(--c--theme-primary-3)">Account B</tspan>, first half of the year</text>
<path style="stroke:var(--c--theme-gray-2)" d="M90,70h 760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90,170 h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90,270 h760"></path>
<path style="stroke:var(--c--theme-gray-2)" d="M90,370 h760"></path>
<g text-anchor="end" transform="translate(30 25)" style="font-size:1em; fill: var(--c--theme-gray-3)">
<text x="40" y="50">$0.3M</text>
<text x="40" y="150">$0.2M</text>
<text x="40" y="250">$0.1M</text>
<text x="40" y="350">$0.0M</text>
</g>
<g style="font-size:1em; fill: var(--c--theme-gray-3)">
<text x="85" y="400">Month 1</text>
<text x="765" y="400">Month 6</text>
</g>
<path transform="translate(0 20)" fill="transparent" style="stroke: var(--c--theme-highlight-4)" stroke-width="5" d="M100,350 l740,-305 "></path>
<path transform="translate(0 20)" fill="transparent" style="stroke: var(--c--theme-primary-3)" stroke-width="5" d="M100,350 c600,-10 600,-10 740,-20 "></path>
</svg>
</figure>
<p>We tend to look at examples of hockey-stick growth through the rearview mirror, when the trend is obvious and growth is booming. But to the people who experienced it, most of the time their charts looked like the one above — mostly flat, with a bit of a lift toward the end.</p>
<h2 id="patience%2C-focus%2C-tenacity">Patience, focus, tenacity</h2>
<p>I’ve been in many strategic discussions where very smart people talk disparagingly of incremental growth. They want to go straight to the steep end of the hockey stick. What they don’t realize is that the only way to get there is through the shallow end.</p>
<p>The 1997 letter to Amazon shareholders reported the following:</p>
<blockquote>
<p>… by year-end, we had served more than 1.5 million customers, yielding 838% revenue growth to $147.8 million.</p>
</blockquote>
<p>In 1998, that number would grow to $610 million. In 1999, they passed $1 billion in revenue. Their growth rate appeared to be slowing — 838% annually, then 313%, then 169%. The company was highly valued by investors, but was operating at a loss to the tune of $390 million. The leaders of Amazon believed they were on the slow ramp at the beginning of a hockey stick; the investor letter each year would carry a copy of the original 1997 letter. It spelled out the long-term strategy in no uncertain terms:</p>
<blockquote>
<p>We believe that a fundamental measure of our success will be the shareholder value we create over the <em>long term</em>.</p>
</blockquote>
<p>Through patience, focus, and tenacity, along with a commitment to constant, incremental growth, Amazon succeeded. In 2021, they reported almost $470 billion of revenue, resulting in a profit of $26.2 billion.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/hockey-sticks/#fn4" id="fnref4">4</a></sup></p>
<p>True, sustainable, explosive growth requires patience. It won’t be obvious on charts or graphs, and working with it can be unwieldy and unintuitive. Most times it will appear only in retrospect.</p>
<p>The kind of growth that most businesses want is also the kind of growth that is the easiest to ignore; you have to <a href="https://matthewstrom.com/writing/learning-how-to-see/" target="_blank" rel="noopener">learn how to see it</a>.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>In our thought experiment, a year is composed of 12 equal months of 30.417 days each. Boy, time is weird. <a href="https://matthewstrom.com/writing/hockey-sticks/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>In 2020, the total production of wheat (globally!) was estimated at 772.64 million metric tons, or 0.2% of the inventor’s request. <a href="https://matthewstrom.com/writing/hockey-sticks/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Kurzweil, Ray. <em>The Age of Spiritual Machines: When Computers Exceed Human Intelligence</em>. United Kingdom: Penguin Publishing Group, 2000. <a href="https://matthewstrom.com/writing/hockey-sticks/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>“Amazon’s original 1997 letter to shareholders,” Amazon News, Amazon, March 21, 1997, <a href="https://www.aboutamazon.com/news/company-news/amazons-original-1997-letter-to-shareholders" target="_blank" rel="noopener">https://www.aboutamazon.com/news/company-news/amazons-original-1997-letter-to-shareholders</a>. <a href="https://matthewstrom.com/writing/hockey-sticks/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Functions and the future of design systems
2022-02-12T00:00:00Z
https://matthewstrom.com/writing/functions-in-design-systems/
<p><span class="t--weight-bold t--variant-smallcaps t--transform-lowercase t--tracking-loose">New kinds of computers and interfaces</span> are becoming ubiquitous: in our cars, on our wrists, in our ears, at our desks at work, on our TVs at home. In response, we’ve seen innovations in the content, organization, and delivery of design systems: design tokens, interoperability, handoff automation, CSS-in-JS, and atomic styles, to name a few. But these may not be enough to match the pace at which new kinds of experiences are brought to market. As digital interfaces become more personal, more customizable, and more accessible, many design systems are being stretched thin, groaning under the weight of exponential possibilities.</p>
<p>That’s because, despite their name, most design systems aren’t all that much like systems. Granted, they are <em>designed according to a system</em>, and there’s a logical consistency to how their components and tokens are defined, but really, most design systems work like a dictionary: look up a component, get the instructions for using that component.</p>
<p>The most sophisticated design systems can provide instructions in multiple coding languages, with detailed documentation, with orderly, regular updates. But they’re still relatively static, needing a designer or engineer to interpret the documents and use them in the correct context. Today, when we put a design system to work, there’s no coupling; pushing one part doesn’t cause another to pull. There’s no interlocking or interconnection; no networks, feedback loops, or forces at play. And without those mechanisms, there’s no leverage, no simple machines multiplying force, no power in the output.</p>
<p>But there’s a glimmer of hope in design systems at the forefront of scale and complexity. It’s a new way of managing the growing diversity of users and interfaces. It has the potential to not only keep up with the current pace of innovation, but to enable new levels of customization and specificity.</p>
<p>In this essay, I’d like to analyze why the dictionary model of design systems is reaching its limit, then look ahead to imagine the tools and paradigms that are waiting for us just over the horizon.</p>
<nav class="table-of-contents"><ol><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#the-remarkable-efficiency-of-dictionaries">The remarkable efficiency of dictionaries</a></li><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#dictionaries-and-design-systems">Dictionaries and design systems</a></li><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#a-deeper-dive-on-design-systems-as-dictionaries">A deeper dive on design systems as dictionaries</a></li><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#what-is-a-function%3F">What is a function?</a></li><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#a-brief-history-of-functions">A brief history of functions</a></li><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#how-functions-work-in-design-systems">How functions work in design systems</a></li><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#let%E2%80%99s-write-a-design-system-function">Let’s write a design system function</a></li><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#how-to-use-functions-in-design-systems">How to use functions in design systems</a></li><li><a href="https://matthewstrom.com/writing/functions-in-design-systems/#the-future-of-functions-in-design-systems">The future of functions in design systems</a></li></ol></nav><h2 id="the-remarkable-efficiency-of-dictionaries">The remarkable efficiency of dictionaries</h2>
<p>Comparing design systems to dictionaries isn’t a slight. Dictionaries often show up in languages and cultures during golden ages of learning or periods of substantial cultural change.</p>
<p>Let’s look at the first part of the New Oxford American Dictionary entry for “design”:</p>
<div class="c--bg-gray-1 l--rounded-corners l--pad-s t--family-serif">
<p><span class="t--size-l"><strong>de·sign</strong></span> <span class="c--gray">| dəˈzīn </span></p>
<dl class="l--space-compact">
<dt class="t--weight-bold">noun</dt>
<dd class="l--mar-left-s" style="display: list-item; list-style:decimal">a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made: <em>he has just unveiled his design for the new museum.</em> <br />
• the art or action of conceiving of and producing a plan or drawing: <em>good design can help the reader understand complicated information</em> | <em>the cloister is of late-twelfth-century design.</em>
</dd>
<dd style="display: list-item; list-style:decimal">an arrangement of lines or shapes created to form a pattern or decoration: <em>pottery with a lovely blue and white design.</em></dd>
<dd style="display: list-item; list-style:decimal">purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object: the appearance of design in the universe.</dd>
</dl>
<dl class="l--space-compact">
<dt><span class="t--weight-bold">verb</span> [with object]</dt>
<dd>decide upon the look and functioning of (a building, garment, or other object), by making a detailed drawing of it: <em>a number of architectural students were designing a factory.</em><br />
• do or plan (something) with a specific purpose or intention in mind: <em>[with object and infinitive] : the tax changes were designed to stimulate economic growth.</em></dd>
</dl>
</div>
<p>The entry packs an amazing amount of information into a small space:</p>
<ol>
<li>Its pronunciation (useful when learning a new language, or in languages with complicated pronunciation rules like English)</li>
<li>Its part of speech (useful when trying to parse unfamiliar words in the context of a sentence)</li>
<li>A number of possible definitions (useful when encountering new words)</li>
<li>Examples of how that word might be used in a sentence (useful in covering the nuances of meaning that are difficult to articulate in a short definition)</li>
</ol>
<p>Some dictionaries<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/functions-in-design-systems/#fn1" id="fnref1">1</a></sup> include even more information, like the word’s etymology (what language or languages it comes from), synonyms, antonyms, common phrases, or regional dialects and variations.</p>
<p>The power of a dictionary comes from the way it connects (maps) a single word to a collection of information. By looking up the word “design,” a dictionary user can find a set of the information necessary to use that word effectively in speech, writing, or language research.</p>
<h2 id="dictionaries-and-design-systems">Dictionaries and design systems</h2>
<p>Most modern design systems work like dictionaries.</p>
<p>The users of a design system agree to standardize components in exchange for efficiency and consistency. Work speeds up, since nobody has to make design decisions from scratch. Additionally, users can look up a component or fundamental value and use it in a consistent way, without needing to coordinate with all the other end users. Ambiguity is reduced or eliminated altogether.</p>
<p>Ambiguity hurts collaboration. Here’s an example: If you’re American, you probably know what a “sloppy joe” is (if you’re not American, it’s a sandwich with ground beef and tomato sauce). But in the small region of New Jersey where my wife is from, a sloppy joe is an entirely different sandwich (turkey on rye with coleslaw, swiss cheese, and Russian dressing). If she and I don’t consult a recipe book before making sloppy joes for lunch, one of us will be very disappointed.</p>
<p>Similarly, if I think of a button as being blue with round corners and white text, and you think of a button as being green with square corners and an icon, then we’ll have a hard time building a consistent, user-friendly interface.</p>
<p>The dictionary that maps the names of components to their design, functional, and code specifications is a critical part of any design system. Without this source of truth, design and engineering teams can’t do much to realize the promise of a design system.</p>
<h2 id="a-deeper-dive-on-design-systems-as-dictionaries">A deeper dive on design systems as dictionaries</h2>
<p>Design systems are composed of discrete parts; each specification has a one-to-one relationship with a kind of name or signifier. In Material Design, for example, there are 15 different signifiers for types of text. The signifier ‘Display large’ maps to text with the following qualities:</p>
<div class="c--bg-gray-1 l--rounded-corners l--pad-s">
<p><span class="t--size-l t--weight-bold">Display large</span></p>
<ul>
<li>Typeface:
<ul>
<li>System token: md.sys.typescale.display-large.font</li>
<li>Reference token: md.ref.typeface.brand-regular</li>
<li>Default value: Roboto Regular</li>
</ul>
</li>
<li>Line Height:
<ul>
<li>System token: md.sys.typescale.display-large.line-height</li>
<li>Reference token: -</li>
<li>Default value: 64</li>
</ul>
</li>
<li>Size:
<ul>
<li>System token: md.sys.typescale.display-large.size</li>
<li>Reference token: -</li>
<li>Default value: 57</li>
</ul>
</li>
<li>Tracking:
<ul>
<li>System token: md.sys.typescale.display-large.tracking</li>
<li>Reference token: -</li>
<li>Default value: 0</li>
</ul>
</li>
<li>Weight:
<ul>
<li>System token: md.sys.typescale.display-large.weight</li>
<li>Reference token: -</li>
<li>md.ref.typeface.weight-regular</li>
<li>Default value: 400</li>
</ul>
</li>
</ul>
</div>
<p>When you see ‘display large’ referenced in design or code, you can look it up in the Material Design dictionary and find out everything you need to know to implement that text correctly.</p>
<p>Likewise, colors in Material Design are mapped in a dictionary format. The signifiers ‘md.sys.color.primary’ and ‘md.sys.color.primary-container’ are defined like this:</p>
<div class="c--bg-gray-1 l--rounded-corners l--pad-s">
<p><span class="t--size-l t--weight-bold">Primary</span></p>
<ul>
<li>System token: md.sys.color.primary</li>
<li>Light scheme reference token: md.ref.palette.primary40</li>
<li>Light scheme default value: #6750A4 <div class="swatch" style="background: #6750A4"></div></li>
<li>Dark scheme reference token: md.ref.palette.primary80</li>
<li>Dark scheme default value: #D0BCFF <div class="swatch" style="background: #D0BCFF"></div></li>
</ul>
</div>
<div class="c--bg-gray-1 l--rounded-corners l--pad-s">
<p><span class="t--size-l t--weight-bold">Primary container</span></p>
<ul>
<li>System token: md.sys.color.primary-container</li>
<li>Light scheme reference token: md.ref.palette.primary90</li>
<li>Light scheme default value: #EADDFF <div class="swatch" style="background: #EADDFF"></div></li>
<li>Dark scheme reference token: md.ref.palette.primary30</li>
<li>Dark scheme default value: #4F378B <div class="swatch" style="background: #4F378B"></div></li>
</ul>
</div>
<p>It’s worth noting that the word ‘token’ shows up in these definitions. This refers to <strong>design tokens</strong>, another way to talk about these kinds of dictionary mappings. Design tokens are machine-readable dictionary maps between keys (signifiers) and values (definitions); a design token version of the ‘Primary’ color above might like this:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><span class="token property">"Primary"</span><span class="token operator">:</span> <br /> <span class="token punctuation">{</span><br /> <span class="token property">"systemToken"</span><span class="token operator">:</span> <span class="token string">"md.sys.color.primary"</span><span class="token punctuation">,</span><br /> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br /> <span class="token punctuation">{</span><br /> <span class="token property">"theme"</span><span class="token operator">:</span> <span class="token string">"light"</span><span class="token punctuation">,</span><br /> <span class="token property">"refToken"</span><span class="token operator">:</span> <span class="token string">"md.ref.palette.primary40"</span><span class="token punctuation">,</span><br /> <span class="token property">"defaultValue"</span><span class="token operator">:</span> <span class="token string">"#6750A4"</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br /> <span class="token property">"theme"</span><span class="token operator">:</span> <span class="token string">"dark"</span><span class="token punctuation">,</span><br /> <span class="token property">"refToken"</span><span class="token operator">:</span> <span class="token string">"md.ref.palette.primary80"</span><span class="token punctuation">,</span><br /> <span class="token property">"defaultValue"</span><span class="token operator">:</span> <span class="token string">"#4F378B"</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">]</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>Design systems have hundreds of these dictionary mappings. Salesforce’s Lightning Design System, for example, lists over 200 single-value design tokens alone — that doesn’t include larger components or layouts.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/functions-in-design-systems/#fn2" id="fnref2">2</a></sup></p>
<p>As design systems grow more sophisticated and more complicated, the dictionaries they rely on have to grow larger and more difficult to maintain. Like I illustrated earlier, a design system without a dictionary isn’t very useful.</p>
<p>But there’s a different kind of approach that is perfectly suited for systems that grow larger and larger. It’s one we learned about as children, one we have a very intuitive sense of, even if writing it out gets a little confusing.</p>
<p>It’s called a function.</p>
<h2 id="what-is-a-function%3F">What is a function?</h2>
<p>When you first learned how to do multiplication in grade school, how was it taught? If your school was like mine, you learned two ways to multiply numbers; the first was by memorizing a table that looked something like this:</p>
<table style="table-layout: fixed">
<thead>
<tr>
<th class="table--header-empty"></th>
<th class="t--align-center">1</th>
<th class="t--align-center">2</th>
<th class="t--align-center">3</th>
<th class="t--align-center">4</th>
<th class="t--align-center">5</th>
<th class="t--align-center">6</th>
<th class="t--align-center">7</th>
<th class="t--align-center">8</th>
<th class="t--align-center">9</th>
<th class="t--align-center">10</th>
<th class="t--align-center">11</th>
<th class="t--align-center">12</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="t--align-center c--bg-gray-1">1</td>
<td class="t--align-center">2</td>
<td class="t--align-center">3</td>
<td class="t--align-center">4</td>
<td class="t--align-center">5</td>
<td class="t--align-center">6</td>
<td class="t--align-center">7</td>
<td class="t--align-center">8</td>
<td class="t--align-center">9</td>
<td class="t--align-center">10</td>
<td class="t--align-center">11</td>
<td class="t--align-center">12</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="t--align-center">2</td>
<td class="t--align-center c--bg-gray-1">4</td>
<td class="t--align-center">6</td>
<td class="t--align-center">8</td>
<td class="t--align-center">10</td>
<td class="t--align-center">12</td>
<td class="t--align-center">14</td>
<td class="t--align-center">16</td>
<td class="t--align-center">18</td>
<td class="t--align-center">20</td>
<td class="t--align-center">22</td>
<td class="t--align-center">24</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="t--align-center">3</td>
<td class="t--align-center">6</td>
<td class="t--align-center c--bg-gray-1">9</td>
<td class="t--align-center">12</td>
<td class="t--align-center">15</td>
<td class="t--align-center">18</td>
<td class="t--align-center">21</td>
<td class="t--align-center">24</td>
<td class="t--align-center">27</td>
<td class="t--align-center">30</td>
<td class="t--align-center">33</td>
<td class="t--align-center">36</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="t--align-center">4</td>
<td class="t--align-center">8</td>
<td class="t--align-center">12</td>
<td class="t--align-center c--bg-gray-1">16</td>
<td class="t--align-center">20</td>
<td class="t--align-center">24</td>
<td class="t--align-center">28</td>
<td class="t--align-center">32</td>
<td class="t--align-center">36</td>
<td class="t--align-center">40</td>
<td class="t--align-center">44</td>
<td class="t--align-center">48</td>
</tr>
<tr>
<th scope="row">5</th>
<td class="t--align-center">5</td>
<td class="t--align-center">10</td>
<td class="t--align-center">15</td>
<td class="t--align-center">20</td>
<td class="t--align-center c--bg-gray-1">25</td>
<td class="t--align-center">30</td>
<td class="t--align-center">35</td>
<td class="t--align-center">40</td>
<td class="t--align-center">45</td>
<td class="t--align-center">50</td>
<td class="t--align-center">55</td>
<td class="t--align-center">60</td>
</tr>
<tr>
<th scope="row">6</th>
<td class="t--align-center">6</td>
<td class="t--align-center">12</td>
<td class="t--align-center">18</td>
<td class="t--align-center">24</td>
<td class="t--align-center">30</td>
<td class="t--align-center c--bg-gray-1">36</td>
<td class="t--align-center">42</td>
<td class="t--align-center">48</td>
<td class="t--align-center">54</td>
<td class="t--align-center">60</td>
<td class="t--align-center">66</td>
<td class="t--align-center">72</td>
</tr>
<tr>
<th scope="row">7</th>
<td class="t--align-center">7</td>
<td class="t--align-center">14</td>
<td class="t--align-center">21</td>
<td class="t--align-center">28</td>
<td class="t--align-center">35</td>
<td class="t--align-center">42</td>
<td class="t--align-center c--bg-gray-1">49</td>
<td class="t--align-center">56</td>
<td class="t--align-center">63</td>
<td class="t--align-center">70</td>
<td class="t--align-center">77</td>
<td class="t--align-center">84</td>
</tr>
<tr>
<th scope="row">8</th>
<td class="t--align-center">8</td>
<td class="t--align-center">16</td>
<td class="t--align-center">24</td>
<td class="t--align-center">32</td>
<td class="t--align-center">40</td>
<td class="t--align-center">48</td>
<td class="t--align-center">56</td>
<td class="t--align-center c--bg-gray-1">64</td>
<td class="t--align-center">72</td>
<td class="t--align-center">80</td>
<td class="t--align-center">88</td>
<td class="t--align-center">96</td>
</tr>
<tr>
<th scope="row">9</th>
<td class="t--align-center">9</td>
<td class="t--align-center">18</td>
<td class="t--align-center">27</td>
<td class="t--align-center">36</td>
<td class="t--align-center">45</td>
<td class="t--align-center">54</td>
<td class="t--align-center">63</td>
<td class="t--align-center">72</td>
<td class="t--align-center c--bg-gray-1">81</td>
<td class="t--align-center">90</td>
<td class="t--align-center">99</td>
<td class="t--align-center">108</td>
</tr>
<tr>
<th scope="row">10</th>
<td class="t--align-center">10</td>
<td class="t--align-center">20</td>
<td class="t--align-center">30</td>
<td class="t--align-center">40</td>
<td class="t--align-center">50</td>
<td class="t--align-center">60</td>
<td class="t--align-center">70</td>
<td class="t--align-center">80</td>
<td class="t--align-center">90</td>
<td class="t--align-center c--bg-gray-1">100</td>
<td class="t--align-center">110</td>
<td class="t--align-center">120</td>
</tr>
<tr>
<th scope="row">11</th>
<td class="t--align-center">11</td>
<td class="t--align-center">22</td>
<td class="t--align-center">33</td>
<td class="t--align-center">44</td>
<td class="t--align-center">55</td>
<td class="t--align-center">66</td>
<td class="t--align-center">77</td>
<td class="t--align-center">88</td>
<td class="t--align-center">99</td>
<td class="t--align-center">110</td>
<td class="t--align-center c--bg-gray-1">121</td>
<td class="t--align-center">132</td>
</tr>
<tr>
<th scope="row">12</th>
<td class="t--align-center">12</td>
<td class="t--align-center">24</td>
<td class="t--align-center">36</td>
<td class="t--align-center">48</td>
<td class="t--align-center">60</td>
<td class="t--align-center">72</td>
<td class="t--align-center">84</td>
<td class="t--align-center">96</td>
<td class="t--align-center">108</td>
<td class="t--align-center">120</td>
<td class="t--align-center">132</td>
<td class="t--align-center c--bg-gray-1">144</td>
</tr>
</tbody>
</table>
<p>Essentially, it’s a dictionary for multiplication.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/functions-in-design-systems/#fn3" id="fnref3">3</a></sup></p>
<p>In school, you memorized the table for the numbers 1–12<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/functions-in-design-systems/#fn4" id="fnref4">4</a></sup> so you could quickly recall the products when tested. Now, if I asked you to multiply 250 × 10, you’d probably be able to come up with the answer quickly. But I’ll bet you didn’t memorize a multiplication table from 1–250!</p>
<p>You’re able to multiply large numbers because you learned a second way to do multiplication, which looked something like this:</p>
<svg viewBox="0 0 500 160" style="font-variant-numeric: tabular-nums; fill: currentColor;">
<g transform="translate(200 40)">
<text>
<tspan x="30">187</tspan>
<tspan x="0" y="21" style="fill: var(--c--gray-50)">×</tspan>
<tspan x="42" y="22">54</tspan>
</text>
<line x1="0" y1="28" x2="70" y2="28" style="stroke: var(--c--gray-50)"></line>
<text>
<tspan x="30" y="50">748</tspan>
<tspan x="0" y="68" style="fill: var(--c--gray-50)">+</tspan>
<tspan x="18" y="69">9350</tspan>
</text>
<line x1="0" y1="76" x2="70" y2="76" style="stroke: var(--c--gray-50)"></line>
<text>
<tspan x="6" y="97">10098</tspan>
</text>
</g>
</svg>
<p>Using a simple set of rules (simple enough to teach to young children), you can multiply any two numbers together. And I mean any; it might take a while, but a 10-year-old can calculate 294,038 × 9,203,989 (which is 2,706,322,517,582, by the way). If that 10-year-old had to look up the answer in a multiplication dictionary, they’d need a very large book.</p>
<p>Technically, both a multiplication table and longhand multiplication are <strong>functions</strong>. The definition of a function is pretty simple: it’s a connection from one set of things (like words or numbers) to another set of things (like definitions or products).</p>
<p>A dictionary is a <em>discrete</em> function: it connects a word to its definition. Discrete functions have limitations: If you looked up the word “quarfle" in an English dictionary, you’d come up empty-handed. Dictionaries don’t have an output for every word you might try to look up. Discrete functions don’t have an output for every input.</p>
<p>Multiplication, on the other hand, can handle any number you throw at it; it is a <em>continuous</em> function. For anything that counts as a number (15, 0.25, 3/8ths, the square root of pi), you can multiply it by another number (or itself) and get a product.</p>
<div class="c--bg-highlight-1 l--rounded-corners l--pad-s">
<p><em>N.B.: For the rest of the essay, I’ll be focusing on continuous functions. Continuous functions are so ubiquitous and useful that mathematicians and scientists will often use the word “functions” to mean “continuous functions”; I’ll follow that convention for ease of reading.</em></p>
</div>
<h2 id="a-brief-history-of-functions">A brief history of functions</h2>
<p>The functions for adding, subtracting, multiplying, and dividing numbers have been known and used for a very long time. While we teach children to memorize multiplication tables, most people can do simple calculations in their heads without needing to look up the results.</p>
<p>Over time, however, mathematicians and scientists discovered more complicated functions. For example, the logarithm function was discovered in the 17th century; it’s used in calculating things like the loudness of a sound or the brightness of a star. Unlike multiplication and division, calculating a logarithm by hand is an arduous process; while it’s possible to boil it down to a combination of simpler operations, it takes a lot of time. Likewise, memorizing more than a handful of the most common logarithms is pretty cumbersome. Instead, mathematicians in the 17th century published books full of pre-calculated logarithms, tables upon tables of them, to save time and effort.</p>
<p>These reference books (along with similar ones for trigonometric functions like sine, cosine, and tangent) were used by scientists and mathematicians for hundreds of years. Later, tools like slide rules were created to make it a bit easier to look up a logarithm, but the limitations remained: you couldn’t look up the logarithm of a number that wasn’t in your reference book or on your slide rule.</p>
<p>Then, in 1819, Charles Babbage began constructing prototypes of a machine that could perform complicated functions like logarithms for any whole number; he called it the <em>difference engine</em>, and it immediately caught the attention of scientists and engineers. Over the next 60 years, Babbage would design and build many influential prototypes of machines that could perform the continuous functions for many mathematical operations. His work, and that of his collaborator Ada Lovelace, formed the basis for the modern computer.</p>
<p>Babbage’s prototypes and their successors made huge tables of products, logarithms, and square roots obsolete. Computers made it possible to skip the process of calculating and publishing discrete functions; people could now use complicated functions directly, no dictionary needed.</p>
<h2 id="how-functions-work-in-design-systems">How functions work in design systems</h2>
<p>Now, back to design systems. I hope you’ll see how the metaphor of dictionaries and functions applies: As design systems get bigger and more complicated, their reference manuals are also getting more unwieldy. Meanwhile, new technology (well, old technology being used in new ways — nothing like the invention of the computer) can skip the steps of manually computing the values for a part of the system.</p>
<p>Take Material Design’s color palettes, for example. version 2 of Material Design has a dictionary of colors. The set of reds looked like this:</p>
<p><strong>Red</strong></p>
<ul>
<li>50: #FFEBEE <div class="swatch" style="background: #FFEBEE"></div></li>
<li>100: #FFCDD2 <div class="swatch" style="background: #FFCDD2"></div></li>
<li>200: #EF9A9A <div class="swatch" style="background: #EF9A9A"></div></li>
<li>300: #E57373 <div class="swatch" style="background: #E57373"></div></li>
<li>…etc.</li>
</ul>
<p>There are 240 colors available; it’s up to the user to select the right colors for their case.</p>
<p>In version 3 of Material Design, these tables are replaced by what Google calls <strong>dynamic color</strong>. Dynamic color is a function that takes a single input color and returns a set of 46 labeled colors (that is, design tokens) that are ready to plug into a Material Design component. The guesswork of which colors to use is gone; the dynamic color function creates the colors to satisfy accessibility and usability criteria, taking much of the effort out of the end user’s hands.</p>
<p>The dynamic color function is <em>continuous</em>, where Material Design v2’s color tables were <em>discrete</em>. Dynamic color can turn any input color into a color palette, allowing for far greater customization and differentiation between apps.</p>
<p>Adobe has taken a similar approach to the colors in their design system, Spectrum. Its concept of “adaptive color” is essentially a function that generates a set of colors at specific contrast ratios from two inputs: a “key color” — the hue basis for the color palettes — and a “base color” — the background color used for calculating contrast ratio. Like Material Design v3, the output of the function is a set of discrete colors, but the input can be any possible color, meaning the system can be customized to a huge number of applications.</p>
<h2 id="let%E2%80%99s-write-a-design-system-function">Let’s write a design system function</h2>
<p>The color functions in Material Design and Spectrum are a little cryptic, since they involve a lot of calculation behind the scenes. So to understand functions better, let’s look at a simpler function that is commonly manually computed in design systems: font size.</p>
<p>In 2010, Tim Brown introduced the concept of a <strong>modular scale</strong> to the audience at the Build conference. A modular scale is a discrete function that scales font sizes so that as text grows larger, the proportion between the sizes remains the same; it takes a base size and a ratio, then returns a series of font sizes that can be used. Since then, through websites like the eponymous <a href="https://www.modularscale.com/" target="_blank" rel="noopener">modularscale.com</a>, designers have been able to use discrete, pre-computed values in their systems.</p>
<p>However, the process of implementing a type scale across many text styles is complicated. A header should be much smaller on a phone than it is on a TV, so designers and engineers write media queries to re-define text sizes for each screen size. The process gets even harder when introducing user-defined customizations and variations for different font families.</p>
<p>To solve this challenge, we can implement a continuous function for type size. And thanks to recent additions to the World Wide Web Consortium’s (W3C’s) CSS specification, it’s possible to do this directly in a browser, with no JavaScript or server-side scripting.</p>
<p>The first ingredient is the vw and vh units; these are CSS units that represent 1/100th of the browser’s width or height, respectively.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/functions-in-design-systems/#fn5" id="fnref5">5</a></sup> This gives us a value that will be small on small screens and large on large screens.</p>
<p>The second ingredient is the calc() function. calc() allows us to add, subtract, multiply and divide units of length together on the fly.</p>
<p>The last ingredient is the max(), min(), and clamp() functions. max() picks the larger of two values, min() picks the smaller of two values, and clamp() defines a minimum <em>and</em> a maximum, keeping the value between the two extremes.</p>
<p>Putting it all together, we can design a function to achieve a set of desired properties. Say I wanted the size of my text to be no smaller than 16px on small screens and no larger than 24px on large screens. The following line of code does that:</p>
<pre class="language-css"><code class="language-css"><span class="token property">--dynamic-font-size</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>16px<span class="token punctuation">,</span> <span class="token function">calc</span><span class="token punctuation">(</span>1vw + 12px<span class="token punctuation">)</span><span class="token punctuation">,</span> 24px<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre>
<p>On an 800-pixel-wide screen, the calc(1vw + 12px) part of our code evaluates to 20px (at 800px wide, 1vw is equal to 8px, plus 12px equals 20px). Since that is between the lower bound of 16px and the upper bound of 24px set by the clamp() function, the entire custom property is defined as 20px.</p>
<p>On a 375-pixel-wide screen, the calc(1v + 12px) part of our code evaluates to 15.75px. Since that’s below the 16px lower bound set in clamp(), the custom property is defined as 16px.</p>
<p>On a 1,400-pixel-wide screen, calc(1v + 12px) evaluates to 26px. That’s larger than 24px, so the property is defined as 24px.</p>
<p>Altogether, this one line of code replaces the dozen or so that would have been required to do the same with discrete media queries. And it has the bonus of being continuous when the screen is between 400px and 1,200px wide; the font size is adjusted smoothly for every possible value.</p>
<h2 id="how-to-use-functions-in-design-systems">How to use functions in design systems</h2>
<p>Similar to the change from a dictionary of logarithms to the electronic calculator, using functions in design systems requires a slightly different set of tools than using discrete, pre-computed values.</p>
<p>There are a few ways to implement a function in your design system. The first is (as we explored in the previous section) to take advantage of features of the language you’re working in. This works for applications with a small set of target platforms; a web app can use CSS functions like calc(), clamp(), and upcoming functions like color() and mix(). Or, if the app is using JavaScript, it can take advantage of libraries like <a href="https://gka.github.io/chroma.js/" target="_blank" rel="noopener">chroma.js</a> or <a href="https://typetura.com/" target="_blank" rel="noopener">Typetura</a> to provide functions to the design system.</p>
<p>Another way to implement functions in a design system is with a <a href="https://matthewstrom.com/writing/design-apis/" target="_blank" rel="noopener">design API</a>. In short, a design API is a way for an application (like this website) to interact with a design system to set or retrieve design decisions (like tokens). A design API allows the application requesting a token to work independently of the application that defines the token.</p>
<p>In the case of a function, the server side of the API can handle the computation and formatting of a given token according to a function. The client that is rendering a design would simply request the token through the API, providing any information the system needs to calculate it. An app using Material Design, for example, might send a GET request to <code>https://material.design/api/color?token=md.sys.color.secondary&primaryColor=#6750A4</code> and receive some JSON back like <code>{name: 'md.sys.color.secondary', value: '#625B71'}</code>.</p>
<p>In some ways, this isn’t so different from the dictionary mappings we started with: look up a key or signifier, get back a value or definition. But the important difference is that, unlike traditional design systems, a function-powered API will give a response for <em>any</em> value you look up. Our hypothetical Material Design API would never reply with <code>404: token not found</code>. It’s like a dictionary that will return a definition for any word you look up, even ones that don’t exist yet.</p>
<h2 id="the-future-of-functions-in-design-systems">The future of functions in design systems</h2>
<p>Today, most design systems work like dictionaries, composed of a finite set of definitions. But there’s a new page turning, one that ushers in the age of functions. Design systems are evolving to survive in a world where applications and experiences exist on vastly different screen sizes, for different accessibility needs, language modes, hardware specifications, and spatial dimensions. For these complex interfaces, dictionaries just can’t cut it.</p>
<p>Design systems are starting to use functions that recreate the design decision making process, responding appropriately to any input they are given. The early uses of functions do a great job of extending the reach of design systems. But the potential is vast.</p>
<p>Currently, Apple develops a huge range of software interfaces: iOS for phones, iPadOS for tablets, macOS for personal computers, watchOS for its watches, tvOS for large screens, CarPlay for vehicle infotainment systems, and on and on. Each OS has its own set of interface queues and paradigms, suited to its use case. Each requires a discrete and well-defined dictionary of design decisions.</p>
<p>But imagine if Apple’s software could tailor an experience to a person’s exact needs at any moment in time. Think of the same app moving seamlessly from watch to tablet to car screen to laptop to big screen TV. The font, margins, and line height are tuned to the user’s reading speed, the colors and labels of charts and graphics changed to reflect their cultural norms<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/functions-in-design-systems/#fn6" id="fnref6">6</a></sup>, animations and color contrast adjusted to respect accessibility preferences, and affordances and signifiers suited to the user’s input device, be it keyboard, touchscreen, voice commands, eye tracker, mouse pointer, or game controller.</p>
<p>We’re seeing the whisperings of this future in features like dark mode, dynamic font size, Apple’s accessibility features like assistive touch, and Google’s Material Design dynamic color. But this is just the beginning. Functions are how design systems will meet the challenges of the next phase of user experience design, and I’m excited to start exploring.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>I’ll never miss a chance to link to one of my favorite blog posts about dictionaries, <a href="http://jsomers.net/blog/dictionary" target="_blank" rel="noopener">James Somers’ “You’re probably using the wrong dictionary.”</a> <a href="https://matthewstrom.com/writing/functions-in-design-systems/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://www.lightningdesignsystem.com/design-tokens/" target="_blank" rel="noopener">https://www.lightningdesignsystem.com/design-tokens/</a> <a href="https://matthewstrom.com/writing/functions-in-design-systems/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>A table is a nice way to look at the information, since a more traditional dictionary would look like this: <strong>1</strong>: 1 ✕ 1 = 1, 1 ✕ 2 = 2, 1 ✕ 3 = 3, 1 ✕ 4 = 4 … and so on. <a href="https://matthewstrom.com/writing/functions-in-design-systems/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Why 12? I’ve never thought about this before, but it’s an awfully strange place to stop. <a href="https://matthewstrom.com/writing/functions-in-design-systems/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>We can also use the fancier vmax and vmin units, which reflect whichever of vw and vh are largest or smallest. <a href="https://matthewstrom.com/writing/functions-in-design-systems/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>In East Asian countries, the color red is associated with good luck and fortune — when stocks are listed on the Nikkei index, they’re shown in red. This is the opposite of European or American norms, which show negative numbers in red. <a href="https://matthewstrom.com/writing/functions-in-design-systems/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Stop brainstorming
2022-01-18T00:00:00Z
https://matthewstrom.com/writing/stop-brainstorming/
<p>“Brainstorming” — the problem-solving technique of coming up with as many ideas as possible in a short period of time — has been showing up on a lot of my leadership meeting agendas lately. Many of my peers are employing brainstorming in the belief that, as thought-leading creative consultancy Ideo puts it, “the more ideas you come up with, the better chance you have to reach a truly brilliant solution.” Here’s a little more about Ideo and brainstorming from a 2001 <a href="https://www.fastcompany.com/63818/seven-secrets-good-brainstorming" target="_blank" rel="noopener">Fast Company piece</a>:</p>
<blockquote>
<p><em>Silicon Valley-based Ideo has sparked some of the most innovative products of the past decade — the Apple mouse, the Polaroid I-Zone Pocket Camera, and the Palm V, among others. But Ideo staffers don’t just sit around waiting for good ideas to pop into their heads. The company has institutionalized a process whereby ideas are coaxed to the surface through regular, structured brainstorming sessions. At Ideo, idea-generation exercises are “practically a religion,” [Tom Kelley, partner at Ideo] says.</em></p>
</blockquote>
<p>The quote goes on:</p>
<blockquote>
<p><em>On any given day, multiple brainstorming sessions may spawn hundreds of ideas and burn through just as many chocolate-chip cookies, the preferred fuel of world-class idea mongers. Indeed, collective idea generation is so important at Ideo that a staffer caught trying to noodle a problem alone at his desk may be called on the carpet for wasting his time and the client’s money.</em></p>
</blockquote>
<p>Even though the days when anyone thought the Polaroid I-Zone Pocket Camera was innovative are long since gone, brainstorming continues to be popular.</p>
<p>You’ve read the title, so you know where this is going: Brainstorming is bad. At its best, a brainstorming group comes up with the same ideas as the group’s members would when working alone; at its worst, it perpetuates negative cultural habits, reinforces hierarchies, stunts productivity, and severely limits creativity.</p>
<p>No matter how many chocolate chip cookies I eat, I can’t seem to make this kind of brainstorming work. So I’ve spent some time researching why brainstorming ever came to be so popular, the science behind its lack of results, and any possible remedy to this leech of a collaborative practice.</p>
<p>Here’s what I learned.</p>
<h2 id="a-history-of-brainstorming">A history of brainstorming</h2>
<p>Alex Osborn was born in 1888. Throughout his life, he’d be one of the most influential creative thinkers in America, producing ads for clients like General Electric, Chrysler, American Tobacco, B.F. Goodrich, and Du Pont. His initial would join those of his partners Batten, Barton, and Durstine in the agency BBDO, which continues to be one of the most prolific ad agencies in the world.</p>
<p>In 1948, Osborn published <em>Your Creative Power</em>, a book of the accumulated wisdom of his decades of experience in the ad industry. Most of the anecdotes and advice are based on Osborn’s successes; through tales of award-winning campaigns, creative breakthroughs, and many rounds of golf, he lays down a framework for creative thinking that is accessible to the anyman.</p>
<p>In chapter 33 of <em>Your Creative Power,</em> Osborn introduces the world to brainstorming:</p>
<blockquote>
<p><em>Every day, everywhere in a democracy, juries are proving that a dozen minds can jointly judge and judge well. But that’s judicial thinking; how about creative thinking? Can a squad produce ideas? The answer is yes. Properly organized and run, a group can be a gold-mine of ideas.</em>
<em>It was in 1939 when I first organized such group-thinking in our company. The early participants dubbed our efforts “Brainstorm Sessions”; and quite aptly so because, in this case, “brainstorm” means using the brain to storm a creative problem—and do so in commando fashion, with each stormer attacking the same objective.</em></p>
</blockquote>
<p>Osborn goes on to define the parameters of a successful brainstorm. How many people should be included? “Between five and ten.” What kind of people? “Both brass and rookies.” What kind of problems should be tackled? “The problems should be <em>specific</em> rather than general.” Should we include the womenfolk? “A group of men seems best; but our Vice-President, Mrs. Jean Rindlaub, has had great success with groups of young women.”</p>
<p>The key to Osborn’s brainstorming meetings is to eliminate what he calls <em>judicial</em> thinking. “The crazier the idea, the better,” he claims; the group should defer judgment, think outside the box and go for quantity; “the more ideas we pile up, the more likelihood of winners.”</p>
<p>It’s hard to deny the appeal of brainstorming. To be given a judgment-free space to express yourself? What a dream! And especially appealing, imagine, to the ad men of the 1940s.</p>
<p>But it isn’t the 1940s anymore. Brainstorming doesn’t work.</p>
<p>Maybe it never did.</p>
<h2 id="proof-that-brainstorming-doesn%E2%80%99t-work">Proof that brainstorming doesn’t work</h2>
<p>In 1987, Michael Diehl and Wolfgang Stroebe published a paper in the <em>Journal of Personality and Social Psychology</em> titled “Productivity Loss In Brainstorming Groups: Toward the Solution of a Riddle,” in which they analyzed 22 former studies of brainstorming. The first of these studies was conducted in 1958, just a decade after Osborn’s book was published. In that study, forty-eight students were asked to solve a series of puzzles. Some participants were grouped together to solve the problems following Osborn’s framework; others were asked to solve the puzzles by themselves. The result was clear: Those who worked alone solved twice as many solutions as those who worked in groups. The solo solvers also came up with more “feasible” solutions than the groups, according to a panel of judges.</p>
<p>The other 21 studies that Diehl and Stroebe analyzed followed these initial results: brainstorming had no appreciable effect on creativity or problem-solving ability. In many cases like the first, brainstorming was worse for thinkers than working alone.</p>
<p>The authors of the 1987 paper theorized three possible sources of brainstorming’s failures, all which still ring true in group creativity exercises.</p>
<ol>
<li><em>Production Blocking:</em> In most groups, only one person speaks at a time. As other people wait their turn to contribute, they may forget their ideas or reconsider them when they hear similar ones. As proof, one of the studies analyzed showed that as groups got larger, the negative effects of brainstorming became more pronounced.</li>
<li><em>Evaluation Apprehension:</em> In group settings, many participants are uncomfortable sharing their ideas for fear of being judged negatively by their peers. This fits with my experience — typically, the most senior person in the room is the one who suggests we brainstorm, and most ideas end up coming from their end of the org chart.</li>
<li><em>Free Riding:</em> The more ideas a group comes up with, the less each individual idea matters, and the less incentive any one person has to contribute. Put another way, as idea quantity increases, ideas seem more and more disposable. Throwing away ideas makes it less likely that a brainstormer will share something they feel particularly strongly about.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/stop-brainstorming/#fn1" id="fnref1">1</a></sup></li>
</ol>
<p>But Diehl and Stroebe’s paper isn’t the final word on the effectiveness of brainstorming: Another paper published by the Creative Problem Solving Group in Buffalo (or CPSB) provided counter-arguments, along with nearly 100 studies, demonstrating that brainstorming <em>can</em> be successful, as long as the facilitator of the brainstorm is properly trained. CPSB also happens to sell facilitator training services. Go figure.</p>
<p>The truth is that a properly-trained facilitator can only unlock a group’s creativity if they’re invited to the brainstorm; in my experience, brainstorming activities tend to be led by a senior stakeholder or group leader instead. The leader hopes the participants will help them solve a very specific problem; the ideas the group produces weave an iterative or incremental path through the solution space. Eventually the group arrives at “alignment” on a single solution. Divergent thinking is discouraged. Most of the ideas are forgotten.</p>
<p>So Osborn’s version of brainstorming is a nonstarter. Can we do any better?</p>
<h2 id="brainstorming-alternatives-don%E2%80%99t-work%2C-either">Brainstorming alternatives don’t work, either</h2>
<p>There are plenty of articles and essays and journal papers that call into question the effectiveness of brainstorming. Almost all of these proceed to recommend ways to “fix” brainstorming. Here’s a few:</p>
<p>Tony McCaffrey invented (and trademarked) “Brainswarming™” after being inspired by the behavior of ants searching for food. The gist is that the problem-solving group lays their ideas out in a visual relationship, drawing lines to connect resources to the problems they might solve. McCaffrey claims that Brainswarming™ produces “up to 115 ideas in 15 minutes.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/stop-brainstorming/#fn2" id="fnref2">2</a></sup></p>
<p>While working with teams at Google, Jake Knapp experienced the downsides of large-group brainstorming. “What happened in the weeks and months after each brainstorm? The results were depressing. Not a single new idea generated in the brainstorms had been built or launched. The best ideas — the solutions that teams actually executed — came from individual work.” His solution was the <em>design sprint,</em> in which you “take a small team, clear the schedule for a week, and rapidly progress from problem to tested solution.” Knapp wrote a book on the design sprint and facilitates workshops on the method.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/stop-brainstorming/#fn3" id="fnref3">3</a></sup></p>
<p>There are plenty of other frameworks and exercises that don’t require buying books. The <strong>6-3-5 method,</strong> for example, asks six people to each write down three ideas in five minutes. After six rounds of this over 30 minutes, you have 108 ideas — a far cry from McCaffrey’s 115 ideas in 15 minutes, but hey, who’s counting? The <strong>Five Whys</strong> is another common tool: a group iterates through the analysis of a problem (asking “why” at each stage) to uncover its root cause.</p>
<p>Each of these variations fails to address the critical factor in the failure of brainstorm. It’s not the presence of a facilitator, the amount of time the team has, the diagrams they draw, or the language they use.</p>
<p>It’s the group itself.</p>
<p>In Diehl and Stroebe’s paper, their analysis highlights the fundamental weakness of group collaboration: cultural norms tied to the deep-rooted instincts of a social animal. We’ve evolved over millions of years to work within groups in very specific ways; no book, workshop, or thought leadership blog will fully rewire our brains.</p>
<h2 id="why-brainstorm-at-all%3F">Why brainstorm at all?</h2>
<p>Here’s the conclusion of Diehl and Stroebe’s paper:</p>
<blockquote>
<p><em>Because blocking slows down the generation of ideas in groups, it might be more effective to ask subjects first to develop their ideas in individual sessions and next have these ideas discussed and evaluated in a group session.</em></p>
</blockquote>
<p>Ideas are best developed by individuals.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/stop-brainstorming/#fn4" id="fnref4">4</a></sup></p>
<p>Why, then, did Osborn get so excited about brainstorming? What problem are leaders trying to solve? If individuals are just as good at coming up with ideas, why put them in a group and risk their productivity?</p>
<p>Because ideas, no matter who comes up with them, need to be shared. Effective collaboration relies on constant communication of ideas — between individuals, in small groups, and to all-encompassing audiences.</p>
<p>Osborn’s brainstorming meetings weren’t successful because he put a bunch of scotch-sipping ad men in a room together. It was successful because, maybe for the first time in their careers, these creative thinkers were told “We won’t tell you your idea is bad.” Page 270 of <em>Your Creative Power</em>:</p>
<blockquote>
<p><em>Here’s how one leader interpreted the first rule to one of his [brainstorming] groups: “If you try to get hot and cold water out of the same faucet at the same time, you will get only tepid water. And if you try to criticize and create at the same time, you can’t turn on either cold enough criticism or hot enough ideas. So let’s stick solely to ideas—let’s cut out all criticism during this session.”</em></p>
</blockquote>
<p>What Osborn is getting at is <em>psychological safety</em>. It’s the feeling that you can show up to work without the fear that your contributions will have negative consequences to your self-image, status, or career.</p>
<p>Psychological safety wasn’t explored explicitly until the 1990s, with William A. Kahn’s “Psychological Conditions of Personal Engagement and Disengagement at Work.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/stop-brainstorming/#fn5" id="fnref5">5</a></sup> In this sense, Osborn was way ahead of the curve; creating the conditions for psychological safety meant that the creatives of BBDO could share their ideas, no matter how unusual, conventional, boring, or controversial. Nobody was judged. Simply having ideas was rewarded.</p>
<p>This is the part that most leaders miss about brainstorming. If a group feels psychologically safe, they’ll be just as effective coming up with ideas on their own and sharing them as they go. If there’s no psychological safety, the team isn’t performing at their best, and a brainstorm is only going to exacerbate fears of negative judgment.</p>
<p>Brainstorming has become a <em>heuristic</em>, an attempted shortcut, a lossy substitution for psychological safety. Osborn’s encouragement during the brainstorm signaled psychological safety, giving his team what they needed to be creative even after they left the room. But simply putting a bunch of people on a Zoom call and saying “there are no bad ideas” won’t create a sense of safety where none existed before.</p>
<p>How to build psychological safety on a creative team is beyond the scope of this one essay (though I have a feeling I’ll write another and link it soon). But my point is this: Brainstorming is just a worse version of creativity. If your team is already producing lots of ideas, let them keep doing it however they want. If your team isn’t producing lots of ideas, work on psychological safety.</p>
<p>Whatever you do, don’t schedule a brainstorm.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Diehl, Michael, and Wolfgang Stroebe. “Productivity Loss in Brainstorming Groups: Toward the Solution of a Riddle.” <em>Journal of Personality and Social Psychology</em> 53, no. 3 (September 1987): 497–509. <a href="https://doi.org/10.1037/0022-3514.53.3.497" target="_blank" rel="noopener">https://doi.org/10.1037/0022-3514.53.3.497</a>. <a href="https://matthewstrom.com/writing/stop-brainstorming/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>McCaffrey, Tony. “Why You Should Stop Brainstorming.” <em>Harvard Business Review</em>, March 25, 2014. <a href="https://hbr.org/2014/03/why-you-should-stop-brainstorming" target="_blank" rel="noopener">https://hbr.org/2014/03/why-you-should-stop-brainstorming</a>. <a href="https://matthewstrom.com/writing/stop-brainstorming/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Jake Knapp, “Stop Brainstorming, Start Sprinting,” TheSprintBook.com, <a href="https://www.thesprintbook.com/articles/stop-brainstorming-start-sprinting" target="_blank" rel="noopener">https://www.thesprintbook.com/articles/stop-brainstorming-start-sprinting</a><span style="text-decoration:underline;">. Last accessed January 17, 2022.</span> <a href="https://matthewstrom.com/writing/stop-brainstorming/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>If your goal is something other than “come up with lots of ideas,” there are certainly ways to have effective group meetings. Diehl and Stroebe concluded that if the goal is idea quality, it would be more effective for individuals to come to a meeting with ideas already formed, then have the group discuss/evaluate. These meetings are “subtractive,” to contrast with brainstorming’s “additive” goal: after a critique, you have fewer, better ideas. <a href="https://matthewstrom.com/writing/stop-brainstorming/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Kahn, William A., “Psychological Conditions of Personal Engagement and Disengagement at Work,” <em>Academy of Management Journal</em> 33, no. 4 (December 1, 1990): 692–724. <a href="https://doi.org/10.2307/256287" target="_blank" rel="noopener">https://doi.org/10.2307/256287</a>. <a href="https://matthewstrom.com/writing/stop-brainstorming/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The legacy of NFTs
2021-12-29T00:00:00Z
https://matthewstrom.com/writing/nfts/
<p>A new trend is sending shock waves through the world of art, collecting, finance, and investing.</p>
<p>It’s the result of a perfect storm: one part scientific breakthrough, one part new financial paradigm, one part reflection of world events. Some people attribute it entirely to the current pandemic; only fatalism could explain why normally logical and sane people are cashing out their life savings or remortgaging their homes to buy in.</p>
<p>But for those who are buying and selling, it’s a community. Buyers are willing to pay extra fees to middlemen just to participate in the market. They meet up in private to trade their goods (though, the goods themselves technically don’t go anywhere; the traders are essentially exchanging proof of ownership). The stuff has exotic names that amount to in-jokes; to hear someone talk about the market you’d swear it was another language entirely. It’s a renaissance, and it’s unregulated.</p>
<p>Behind the scenes, creators cash in. In a masterful application of new technology, artisans have figured out how to walk a tightrope between creativity, scarcity, and accessibility. An arms race has ensued: creators “breed” unique assets that, by the nature of their creation, are rare and impossible to reproduce.</p>
<p>There is, of course, a downside: It’s all a massive leech on the environment. The “farmers” that support the market are incentivized to use their resources in what amounts to, at best, a waste of space, and at worst, a cruel act of ecocide.</p>
<p>The whole thing is a public spectacle. Trades make newspaper headlines. Eye-watering prices on seemingly insignificant things make the market a constant topic of debate. People who have never invested in anything are getting into the market. It seems like you can’t go five minutes without hearing about it.</p>
<p>It’s 1630s Holland. Everyone has lost their minds about tulips.</p>
<hr />
<figure data-type="image"><img src="https://matthewstrom.com/images/nfts-1.jpg" alt="A botanical illustration of tulips" /><figcaption>A botanical illustration of tulips</figcaption></figure>
<p>Before 1550, the Dutch had never seen a tulip.</p>
<p>When the Dutch East India Company brought them to Holland from Turkey, the flowers were a popular novelty due to their bright, vivid colors. But cultivators quickly discovered that, under the right circumstances, new colors and patterns of the flowers could be created. New tulips with names like <em>Admirael</em> (“admiral”) and <em>Generael</em> (“general”) were introduced. Rarer combinations had even more extravagant names, like “Admiral of Admirals” and “General of Generals”.</p>
<p>By 1610, ‘tulip mania’ — <em>tulpenwindhandel</em> — was in full swing (so was the bubonic plague in Haarlem, center of the tulip trade). Because tulips take years to grow and multiply, there was a hard limit on the supply of new bulbs. Demand, however, was growing exponentially, and soon prices began to do the same.</p>
<p>At the same time, the Dutch were leading a golden age of innovation in economics, banking, and financing. The introduction of <em>futures</em> markets — where traders bet on the value of assets that haven’t been bought or sold yet — were especially influential in the growth of Dutch commerce. There was, of course, a tulip futures market.</p>
<p>As tulip mania rose to a fever pitch, more and more people got involved in trading. Middle- and lower- class dutchmen who knew nothing about how the markets worked (or how tulips were grown) were investing in bulbs. Buyers and sellers met at taverns where sellers paid a “wine money” fee. The bulbs themselves never traded hands; the ownership of them did via notarized paper records.</p>
<p>The promise of a windfall loomed large in traders’ minds, driving prices higher and higher. Then in 1637, prices suddenly dropped. Investors who had purchased thousands of bulbs, most of which were in the ground and years away from becoming tulips, panicked. Bulbs were dumped into the market for a loss, causing supply to quickly outweigh demand, inverting the market. Tulip mania ended with a bang.</p>
<hr />
<p>It’s easy to see the parallels between tulip mania and the NFT craze. This New York Times headline from March 2021 sums it up nicely:</p>
<p><strong>“JPG File Sells for $69 Million, as ‘NFT Mania’ Gathers Pace”</strong></p>
<figure data-type="image"><img src="https://matthewstrom.com/images/nfts-2.jpg" alt="Beeple’s “Everydays — The First 5000 Days”" /><figcaption>Beeple’s “Everydays — The First 5000 Days”</figcaption></figure>
<p>In 2021, $23 billion moved through the NFT marketplace.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/nfts/#fn1" id="fnref1">1</a></sup> This isn’t that much in the grand scheme of things: $474 billion worth of trades was conducted on Nasdaq, the second largest stock exchange in the world, in <em>just one day</em>.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/nfts/#fn2" id="fnref2">2</a></sup> But Nasdaq has been around for 50 years; the NFT market has existed for less than 10.</p>
<p>Vast amounts of energy are being poured into minting and staking new NFTs. While accurate estimates are elusive, a recent analysis shows that OpenSea, one of the most popular NFT trading platforms, is responsible for the equivalent of over 600 billion tons of CO<sub>2</sub> emissions over the past four years.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/nfts/#fn3" id="fnref3">3</a></sup></p>
<p>And we’re still on the upswing. The NFT market tripled in 2020 to more than $250 million; then, grew another $200 million in the first three months of 2021. It’s impossible to know where the top of this mountain is or what the slope on the other side of it looks like. My guess is: probably pretty high, and probably pretty steep.</p>
<p>There are as many arguments about NFTs as there are NFTs themselves. They’re pretty bad for the environment — unless you know what you’re doing and use an environmentally-friendly blockchain. They’re often minted without authorization from artists — but blockchains can establish provenance and smoke out illegal copying. They’re a grift, a pyramid scheme, greater fools all the way down — but at least artists are getting paid.</p>
<p>My point in bringing up tulip mania is this: Tulip mania didn’t start the Dutch Golden Age, and it didn’t end it. It was a product of the time. In 1630, international trade, financial innovation, and class mobility were all at an all-time high. The economic innovations that led the ships of the Duch East India to circle the world were the same ones that led to tulip mania.</p>
<p>Tulip mania may have been the world’s first recorded asset bubble, but it ended up ranking pretty low on the list of the worst economic catastrophes. Likewise, over the long arc of history, NFTs are much more likely to be an amusing anecdote than a watershed or a rubicon.</p>
<p>Like tulip mania, NFTs are a product of their time. It’s become common to see someone list their job as “content creator.” Digital art is coming into its own as a thing you can <em>own</em>, and artists are finding new ways of skirting the predatory system of galleries and private collectors. Cryptocurrency is definitely here to stay, though nobody can quite say where it’s headed. And underneath it all, concepts introduced by blockchains have kicked off a boom in related fields like security, cryptography, and finance.</p>
<p>But the crash will come, and the bubble will pop. And some day someone will buy an NFT for their mom for mother’s day and chuckle, because at one point in the 2020s these things cost an entire year’s salary.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://dappradar.com/blog/2021-dapp-industry-report" target="_blank" rel="noopener">https://dappradar.com/blog/2021-dapp-industry-report</a> <a href="https://matthewstrom.com/writing/nfts/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="http://www.nasdaqtrader.com/Trader.aspx?id=DailyMarketSummary" target="_blank" rel="noopener">http://www.nasdaqtrader.com/Trader.aspx?id=DailyMarketSummary</a> - accessed December 20, 2021 <a href="https://matthewstrom.com/writing/nfts/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p><a href="https://github.com/kylemcdonald/ethereum-nft-activity" target="_blank" rel="noopener">https://github.com/kylemcdonald/ethereum-nft-activity</a> <a href="https://matthewstrom.com/writing/nfts/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Beyond 10×
2021-11-01T00:00:00Z
https://matthewstrom.com/writing/beyond-10x/
<p>In the January 1968 issue of computer science trade magazine <em>Communications of the ACM</em>, a paper appeared under the unassuming title “Exploratory experimental studies comparing online and offline programming performance.” “Programming is a multibillion dollar industry,” the paper begins, but given just how much money is spent on on their salaries, nobody had yet bothered to study how programmers work. So the authors broke new ground, creating a set of experiments to measure programmer productivity. Across different skill levels, years of experience, and task types, they found “large individual differences between high and low performers.” The differences were as large as “an order of magnitude”—that is, the most effective programmers were 10 times more productive than the least effective ones.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/beyond-10x/#fn1" id="fnref1">1</a></sup></p>
<p>The myth of the 10× programmer was born.</p>
<p>The Communications of the ACM paper was widely cited and spread, most notably in Fredrick Brooks’ The Mythical Man-Month. From there, it was re-interpreted and re-hashed. An <a href="https://twitter.com/skirani/status/1149302838746464256" target="_blank" rel="noopener">infamous example from 2019</a> is a Twitter thread describing a 10× programmer as someone who:</p>
<ol>
<li>Hates meetings</li>
<li>Works irregular hours</li>
<li>Uses a dark theme for their IDE</li>
<li>Rarely looks at help documentation</li>
<li>Etc.</li>
</ol>
<p>The thread was swiftly parodied mercilessly. What made the parodies hit home, though, is self-awareness: we all want to be the 10× programmer. Or the 10× designer. Or the 10× product manager. I definitely want to be a 10× design leader ! Maybe then I’d get my annual reviews done without an extra weekend of work. It’d make the case for a promotion or a raise much easier; maybe I’d get invited to speak at more conferences, or be given a bigger budget, or more headcount.</p>
<p>I don’t think that a 1,000% increase in productivity is outrageous. It’s just a matter of looking at the problem a little differently, applying some sound (but clever) technology, and looking for the markers of a good feedback loop. In fact, with the right approach, 10× is just the start.</p>
<h2 id="10%C3%97-what%3F">10× what?</h2>
<p>First of all, let’s get something straight: no software product is built by a single person. It doesn’t matter if they’re a 10, 100, or 1,000x-er. Modern software is complex. It comprises rich features, complicated user flows, and elaborate technical systems, all coming together seamlessly. Teams, sometimes teams of teams, come together to build software by combining expertise from design, research, UI, software architecture, QA, and more. So, if we are going to consider any huge leaps in the efficiency of producing software, we have to think about the efficiency of the team.</p>
<p>Second, a key to unlocking productivity is to shift focus away from output and towards outcomes. One of my favorite anecdotes about this shift comes from Andy Hertzfeld: In 1982, a team at Apple was working on Lisa, the often-forgotten predecessor to the Macintosh. “Some of the managers decided,” Andy explains, “to track the progress of each individual engineer in terms of the amount of code that they wrote.” Every Friday, the programmers would submit a form recording how much code they wrote that week. The designer of the user interface, Bill Atkinson, was a prolific contributor to the codebase; one week, he completely re-wrote his UI code to be faster and more efficient, resulting in a 6x performance improvement. His rewrite also happened to be 2,000 lines shorter than the original. When filling out his productivity report for the week, he stopped at the part about lines of code. “He thought about it for a second,” Hertzfeld writes, “and then wrote in the number: -2000. I’m not sure how the managers reacted to that, but I do know that after a couple more weeks, they stopped asking Bill to fill out the form, and he gladly complied.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/beyond-10x/#fn2" id="fnref2">2</a></sup></p>
<p>The key insight is this: <strong>what matters is your team’s outcomes, not the raw amount of work they do</strong>. Bill Atkinson’s contributions were reflected in the performance of his code and the innovativeness of his interface, not in the number of lines of code he wrote. Similarly, your team’s value is in the great things they enable your users, customers, and business stakeholders to achieve.</p>
<h2 id="moving-over-the-line">Moving over the line</h2>
<p>Let’s take a look at some common tasks for a software development team, in terms of effort—how much time and energy the task takes—and outcome—the value that the task produces for users and stakeholders.</p>
<svg viewbox="0 0 1000 1000">
<style>
.axis-text {
fill: var(--c--theme-gray-2);
}
.label-text {
fill: var(--c--theme-fg);
}
</style>
<!-- axes -->
<line x1="500" y1="0" x2="500" y2="1000" stroke="var(--c--theme-gray-3)" stroke-width="0.1"></line>
<line x1="0" y1="500" x2="1000" y2="500" stroke="var(--c--theme-gray-3)" stroke-width="0.1"></line>
<!-- axis labels -->
<text transform="rotate(-90) translate(-230 480)" font-size="25" class="axis-text">High Value Outcome</text>
<text transform="rotate(-90) translate(-990 480)" font-size="25" class="axis-text">Low Value Outcome</text>
<text transform="translate(0 480)" font-size="25" class="axis-text">Low effort</text>
<text transform="translate(880 480)" font-size="25" class="axis-text">High effort</text>
<!-- data points -->
<g transform="translate(100 300)">
<text font-size="25" class="label-text">
<tspan>Enforcing accessible</tspan>
<tspan x="0" y="25">color combinations</tspan>
</text>
<circle cx="250" cy="-7.5" r="10" fill="#F2C94C"></circle>
</g>
<g transform="translate(700 80)">
<text font-size="25" class="label-text">
<tspan>Internationalization</tspan>
</text>
<circle cx="230" cy="-7.5" r="10" fill="#9B51E0"></circle>
</g>
<g transform="translate(550 150)">
<text font-size="25" class="label-text">
<tspan>Creating automated</tspan>
<tspan x="0" y="25">accessibility tests</tspan>
</text>
<circle cx="240" cy="-7.5" r="10" fill="#9B51E0"></circle>
</g>
<g transform="translate(630 240)">
<text font-size="25" class="label-text">
<tspan>Qualitative user research</tspan>
</text>
<circle cx="285" cy="-7.5" r="10" fill="#9B51E0"></circle>
</g>
<g transform="translate(600 300)">
<text font-size="25" class="label-text">
<tspan>Multivariate testing</tspan>
</text>
<circle cx="230" cy="-7.5" r="10" fill="#9B51E0"></circle>
</g>
<g transform="translate(550 400)">
<text font-size="25" class="label-text">
<tspan>Building a custom</tspan>
<tspan x="0" y="25">design system</tspan>
</text>
<circle cx="220" cy="-7.5" r="10" fill="#9B51E0"></circle>
</g>
<g transform="translate(50 550)">
<text font-size="25" class="label-text">
<tspan>Using an open-source</tspan>
<tspan x="0" y="25">design system</tspan>
</text>
<circle cx="270" cy="-7.5" r="10" fill="#2D9CDB"></circle>
</g>
<g transform="translate(150 750)">
<text font-size="25" class="label-text">
<tspan>Tracking user metrics</tspan>
</text>
<circle cx="250" cy="-7.5" r="10" fill="#2D9CDB"></circle>
</g>
<g transform="translate(550 580)">
<text font-size="25" class="label-text">
<tspan>Fixing visual regressions</tspan>
</text>
<circle cx="280" cy="-7.5" r="10" fill="#6FCF97"></circle>
</g>
<g transform="translate(650 700)">
<text font-size="25" class="label-text">
<tspan>Fully documenting the</tspan>
<tspan x="0" y="25">design system</tspan>
</text>
<circle cx="270" cy="-7.5" r="10" fill="#6FCF97"></circle>
</g>
<g transform="translate(550 850)">
<text font-size="25" class="label-text">
<tspan>Presenting the product</tspan>
<tspan x="0" y="25">roadmap to stakeholders</tspan>
</text>
<circle cx="270" cy="-7.5" r="10" fill="#6FCF97"></circle>
</g>
</svg>
<p>Of course, the placement of tasks in this spectrum is highly subjective and varies from team to team. But all tasks fall somewhere on this spectrum. And there’s a 45-degree angle line down the middle dividing tasks into net positive—where the value of the outcome is greater than the effort — and net negative — where the effort is greater than the outcome.</p>
<svg viewbox="0 0 1000 1000">
<style>
.axis-text {
fill: var(--c--theme-gray-2);
}
.label-text {
fill: var(--c--theme-fg);
}
</style>
<!-- axes -->
<line x1="500" y1="0" x2="500" y2="1000" stroke="var(--c--theme-gray-3)" stroke-width="1"></line>
<line x1="0" y1="500" x2="1000" y2="500" stroke="var(--c--theme-gray-3)" stroke-width="1"></line>
<!-- axis labels -->
<text transform="rotate(-90) translate(-230 480)" font-size="25" class="axis-text">High Value Outcome</text>
<text transform="rotate(-90) translate(-990 480)" font-size="25" class="axis-text">Low Value Outcome</text>
<text transform="translate(0 480)" font-size="25" class="axis-text">Low effort</text>
<text transform="translate(880 480)" font-size="25" class="axis-text">High effort</text>
<!-- shapes -->
<path d="M 30 30 L 940 30 L 30 940 Z" fill="rgba(242, 153, 74, 0.2)"></path>
<path d="M 970 60 L 970 970 L 60 970 Z" fill="rgba(33, 150, 83, 0.2)"></path>
<path d="M 955 45 L 45 955" stroke="var(--c--theme-gray-2)" stroke-width="10" stroke-dasharray="30 30"></path>
<!-- text -->
<text text-anchor="middle" font-size="70" font-weight="var(--t--weight-bold)" transform="translate(250 250)" fill="#F2994A">
<tspan x="0" y="0">Net</tspan>
<tspan x="0" y="0" dy="60">Positive</tspan>
</text>
<text text-anchor="middle" font-size="70" font-weight="var(--t--weight-bold)" transform="translate(750 750)" fill="#219653">
<tspan x="0" y="0">Net</tspan>
<tspan x="0" y="0" dy="60">Negative</tspan>
</text>
</svg>
<p>Sometimes, “10×” conversations focus too much on picking and choosing work, only doing things that have a high value-to-effort ratio. But to go <em>beyond</em> 10×, your team has to figure out how to move tasks from one side of the dividing line to the other. It’s important to recognize that there are times where seemingly net negative work is called for. Business requirements, legal compliance, and risk-limiting all sometimes call for work that doesn’t have a clearly positive outcome. High-performing teams know how to make any work a net positive.</p>
<p>And the neat thing about this paradigm shift is that net-negative work can turn net-positive two different ways: by increasing the <strong>value of the outcome</strong>, or by <strong>decreasing the effort required</strong>. The increase or decrease doesn’t have to be by much; by finding tasks on the borders, and nudging them across to be net positive, a team can transform their productivity.</p>
<svg viewbox="0 0 1000 1000">
<style>
.axis-text {
fill: var(--c--theme-gray-2);
}
.label-text {
fill: var(--c--theme-fg);
}
</style>
<!-- axes -->
<line x1="500" y1="0" x2="500" y2="1000" stroke="var(--c--theme-gray-3)" stroke-width="1"></line>
<line x1="0" y1="500" x2="1000" y2="500" stroke="var(--c--theme-gray-3)" stroke-width="1"></line>
<!-- axis labels -->
<text transform="rotate(-90) translate(-230 480)" font-size="25" class="axis-text">High Value Outcome</text>
<text transform="rotate(-90) translate(-990 480)" font-size="25" class="axis-text">Low Value Outcome</text>
<text transform="translate(0 480)" font-size="25" class="axis-text">Low effort</text>
<text transform="translate(880 480)" font-size="25" class="axis-text">High effort</text>
<!-- shapes -->
<path d="M 30 30 L 940 30 L 30 940 Z" fill="rgba(242, 153, 74, 0.2)"></path>
<path d="M 970 60 L 970 970 L 60 970 Z" fill="rgba(33, 150, 83, 0.2)"></path>
<path d="M 955 45 L 45 955" stroke="var(--c--theme-gray-2)" stroke-width="10" stroke-dasharray="30 30"></path>
<!-- points -->
<circle cx="500" cy="350" r="20" fill="#F2994A"></circle>
<circle cx="800" cy="350" r="20" fill="#219653"></circle>
<circle cx="350" cy="500" r="20" fill="#F2994A"></circle>
<circle cx="350" cy="800" r="20" fill="#219653"></circle>
<!-- lines -->
<path d="M 350 750 L 350 550 M 330 570 L 350 550 L 370 570" stroke="var(--c--theme-fg)" stroke-width="10" fill="transparent"></path>
<path d="M 750 350 L 550 350 M 570 330 L 550 350 L 570 370" stroke="var(--c--theme-fg)" stroke-width="10" fill="transparent"></path>
<!-- labels -->
<text class="label-text" font-size="40" transform="translate(530 300)">Decrease Effort</text>
<text class="label-text" font-size="40" transform="translate(300 770) rotate(-90)">Increase Value</text>
</svg>
<p>One of the biggest innovations in high-performing software development teams has been the use of design systems. That’s because design systems do exactly what I’ve been outlining: they increase the value or decrease the effort of many of the common tasks that teams have to do. Some of those shifts—like reusing components — are well-known. But other shifts — like automations — are just being explored.</p>
<h3 id="increasing-value-through-re-use">Increasing value through re-use</h3>
<p>Some work can be pushed over the dividing line by increasing its value. Design systems do this primarily by allowing you to re-use the same component multiple times; every time you use a design system component, you’re driving up the value with very little extra effort.</p>
<p>There’s a number of ways that your design system can be geared towards re-use without a ton of effort:</p>
<ul>
<li><strong>Document how to use a component, don’t just provide a mockup.</strong> A lot of design system documentation is focused on how a component looks or works. A button, say, has 10 pixels of padding, and has such and such a hover state. And while that documentation might make it easy for a developer to implement the button the first time around, it doesn’t make it any more reusable. If your design system doesn’t have it, work on documentation that helps designers and developers use your components: include the package dependencies, required configuration variables, and potential errors. Make the component easy to find in Figma or Sketch or XD, and provide some clear guidance on how it interacts with other components or plugins.</li>
<li><strong>Don’t over-specialize. Don’t over-generalize.</strong> Extremely general components — I’m looking at you, <box> — require a ton of configuration and finessing to become useful in a real-world feature. Extremely specialized components — <SecondaryAutoCompleteModalCloseButton> — will never be re-used and become a drag on maintainers. Find a sweet spot in between. I like to use the <a href="https://blog.codinghorror.com/rule-of-three/" target="_blank" rel="noopener">rule of three</a> to tell me when a component is ready for the design system.</li>
<li><strong>Use systems thinking</strong>. Once your work goes from one-off specs and buildouts to reusable systems of components, you’re treading in a complex and unpredictable current. Systems thinking is a broad umbrella of tools and techniques for dealing with uncertainty. Grappling with concepts like <a href="https://medium.com/disruptive-design/tools-for-systems-thinkers-the-6-fundamental-concepts-of-systems-thinking-379cdac3dc6a" target="_blank" rel="noopener">interconnectedness, synthesis, emergence, feedback loops, and causality</a> can help you anticipate the counterintuitive outcomes of long-lived design systems.</li>
</ul>
<p>If you’ve spent much time with design systems, you are probably familiar with just how effective re-use can be at increasing the value of your work. But like we saw earlier, that’s not the only way to get to 10× and beyond. How do design systems decrease the effort involved with software development?</p>
<h3 id="decreasing-effort-through-automation">Decreasing effort through automation</h3>
<p>Automation is a scary word. In many conversations, automation is associated with people losing their jobs to machines that can do the same work for far less money. However, in design and development, automation allows us to remove repetitive, low-effort, low-value work from our day-to-day, enabling us to work together on the high-value or high-effort end of the scale.</p>
<p>Automation is still a new frontier for design systems, and there’s lots to explore:</p>
<ul>
<li><strong>Design tokens</strong> are ways of automating the tedious work of converting common values between different units of measurement, operating system contexts, or presentational modes. The work that was started by the folks behind <a href="https://github.com/salesforce-ux/theo" target="_blank" rel="noopener">Salesforce’s Theo</a> is being continued by tools like <a href="https://amzn.github.io/style-dictionary/#/" target="_blank" rel="noopener">Style Dictionary</a>, <a href="https://www.knapsack.cloud/" target="_blank" rel="noopener">Knapsack</a>, <a href="https://diez.org/" target="_blank" rel="noopener">Diez</a>, and more. Recently, the <a href="https://www.w3.org/community/design-tokens/" target="_blank" rel="noopener">W3C Design Tokens Community Group</a> finished its first editor’s draft, signaling the start to a new phase in the standardization of design token technology. Soon, any design tool will be able to create and share tokens in a standard, interoperable way, reducing the effort required to maintain tokens between tools and teams.</li>
<li><strong>Design APIs</strong> reduce the effort required to move decisions and specifications between designers, developers, and user-facing applications. I recently went through the exercise of <a href="https://matthewstrom.com/writing/design-api-in-practice/" target="_blank" rel="noopener">building a design API</a> as a proof of concept; while the technology is still very nascent, it’s extremely promising to see how a fully automated design system can push design and code out to users with minimal effort. Tools like <a href="https://specifyapp.com/" target="_blank" rel="noopener">Specify</a> are sprouting up to make design APIs even more accessible to teams.</li>
<li><strong>Testing and continuous integration</strong> tools like <a href="https://storybook.js.org/" target="_blank" rel="noopener">Storybook</a> are beginning to explore what automated tests look like for design systems. By running tests for accessibility issues, design consistency, functionality, and visual regression, Storybook substantially reduces the effort required to maintain big design systems; tests run in the background as components are being built and shipped, freeing designers and developers up to focus on functionality.</li>
</ul>
<p>If there’s one thing automation does well, it’s eliminating repetition. Some of the most frequent day-to-day tasks of collaboration between designers and developers — copying and pasting, double-checking values, inspecting and testing — all but disappear from the work with just a touch of automation. Decreasing the effort of our work, even a little, can shift our net-negative work across the line into net-positive.</p>
<h2 id="putting-it-all-together">Putting it all together</h2>
<p>Forget 10×. With a focus on outcomes and an eye towards the border between net-positive and net-negative work, any team can push their productivity beyond their previous limits. And with the innovations in design systems, there is a vast array of high-leverage tools and techniques that are ready to be applied to designer-developer collaboration.</p>
<p>That’s why design systems are becoming instrumental to building software products: not because they look nice (some don’t) or are more elegant (most aren’t) or organized (definitely not). It’s because they make so much of our work slightly more valuable, or take slightly less effort, or some combination of both.</p>
<p>If you can perform one task better than most people, you might be a 10× designer or developer or product manager (or whatever you are). But if your team can find small ways to make many of their tasks net-positive, 10× is just the start.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Sackman, H., et al. “Exploratory Experimental Studies Comparing Online and Offline Programming Performance.” Communications of the ACM, vol. 11, no. 1, Jan. 1968, pp. 3–11. DOI.org (Crossref), doi:10.1145/362851.362858. <a href="https://matthewstrom.com/writing/beyond-10x/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Folklore.Org: -2000 Lines Of Code. https://www.folklore.org/StoryView.py?story=Negative_2000_Lines_Of_Code.txt. Accessed 10 May 2021. <a href="https://matthewstrom.com/writing/beyond-10x/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Pictures of websites
2021-03-13T00:00:00Z
https://matthewstrom.com/writing/pictures-of-websites/
<p>A scene from the 2001 movie <em>Zoolander</em><sup class="footnote-ref"><a href="https://matthewstrom.com/writing/pictures-of-websites/#fn1" id="fnref1">1</a></sup>:</p>
<style>
/** Screenplay styles */
.screenplay {
padding: 2rem 1rem;
background: var(--c--theme-gray-1);
border-radius: var(--l--border-radius-l);
}
.screenplay h2, .screenplay h3, .screenplay p {
font-family: var(--t--family-mono);
font-size: 0.8rem;
margin-top: 0;
}
.screenplay .action p + p {
margin-top: 1rem;
}
.screenplay .character {
width: 60%;
margin: 2rem auto;
}
.screenplay .parenthetical,
.screenplay .character h3 {
text-align: center;
}
.screenplay .parenthetical {
font-style: italic;
}
</style>
<pre class="screenplay">
<div class="heading">
<h2>INT. THE PALATIAL OFFICE OF FASHION MOGUL JACOBIM MUGATU (PLAYED BY WILL FERRELL)</h2>
</div>
<div class="action">
<p>
MUGATU desperately wants to hire DEREK ZOOLANDER (PLAYED BY BEN STILLER). MUGATU has prepared an employment offer that ZOOLANDER can’t refuse.
</p>
<p>
MUGATU crosses his cavernous office to a small display stand, covered in a red velvet drape.
</p>
</div>
<div class="character">
<h3>MUGATU</h3>
<p>Without much further ado, I give you...</p>
</div>
<div class="action">
<p>
MUGATU pulls back the drape to reveal a scale architectural model of a building.
</p>
</div>
<div class="character">
<h3>MUGATU</h3>
<p>The Derek Zoolander Center for Kids Who Can't Read Good!</p>
</div>
<div class="action">
<p>
ZOOLANDER moves in to inspect the model. He scrutinizes the model closely with his characteristic pout. MUGATU and his assistant TODD stand nearby in nervous anticipation.
</p>
</div>
<div class="character">
<h3>ZOOLANDER</h3>
<p class="parenthetical">(suddenly enraged)</p>
<p>What is this?</p>
</div>
<div class="action">
<p>
ZOOLANDER stares expectantly at MUGATU. Not hearing an answer, ZOOLANDER erupts, throwing the model across the room, shattering it. MUGATU and TODD look dumbfounded.
</p>
</div>
<div class="character">
<h3>ZOOLANDER</h3>
<p class="parenthetical">(shouting, pointing at the broken model)</p>
<p>A center for ants?!</p>
</div>
<div class="action">
<p>MUGATU and TODD are shocked. They stand frozen in a mixture of confusion and fear.</p>
</div>
<div class="character">
<h3>MUGATU</h3>
<p>What?</p>
</div>
<div class="character">
<h3>ZOOLANDER</h3>
<p class="parenthetical">(incredulous)</p>
<p>How can we be expected to teach children to learn how to read if they can't even fit inside the building?</p>
</div>
<div class="character">
<h3>MUGATU</h3>
<p>Derek, it's just a small...</p>
</div>
<div class="character">
<h3>ZOOLANDER</h3>
<p class="parenthetical">(in a blind rage)</p>
<p>I don't want to hear your excuses! The center has to be at least...</p>
</div>
<div class="action">
<p>ZOOLANDER looks at the broken model, calculating.</p>
</div>
<div class="character">
<h3>ZOOLANDER</h3>
<p>... three times bigger than this.</p>
</div>
<div class="action">
<p>TODD anxiously looks at MUGATU. MUGATU slowly turns to match TODD’s gaze.</p>
</div>
<div class="character">
<h3>MUGATU</h3>
<p class="parenthetical">(to TODD, loudly)</p>
<p>He's absolutely right.</p>
</div>
<div class="character">
<h3>ZOOLANDER</h3>
<p class="parenthetical">(with conviction)</p>
<p>Thank you. I have a vision.</p>
</div>
</pre>
<p>If you design digital products, this scene probably hits a little too close to home. Here’s an even more relatable version from <a href="https://clientsfromhell.net/" target="_blank" rel="noopener">Clients From Hell</a>:</p>
<blockquote>
<p><strong>Me:</strong> Since the final copy isn’t approved yet we have replaced it with Latin so we can focus on the design and not get hung up on the message.<br />
<strong>Client:</strong> Well I can’t read any of this. How can we possibly approve this?</p>
</blockquote>
<p>It’s easy to come away from a conversation like this thinking, <em>How can my client be so dense?</em> But I’ve worked with verifiably smart people who fall into the same stereotypes:</p>
<ul>
<li>Complaining they can’t click on links in a jpg</li>
<li>Suggesting that the font size is too small when they look at a (desktop) mockup on their (2005-era) smartphone</li>
<li>Asking to see 50+ edge cases of various user profile states before approving it for implementation</li>
</ul>
<p>And designers aren’t the only ones with this experience. Developers have to describe byzantine concepts to their stakeholders without missing nuance or downplaying risk. Product managers sum up tangled webs of business value, user need, team velocity, technical debt, legal pitfalls, and personal ambition, often in the course of a single-page document or a 15-minute meeting.</p>
<p>It’s frustrating. I try to cope by spending a lot of time on presentations. I explain what lorem ipsum is, put big “FPO” stickers on all the mockups, document every possible caveat in excruciating detail in anticipation of questions. But no matter how much preparation I put in, there’s almost always a “center for ants” moment.</p>
<p>The work yields a knot of missed expectations, misaligned incentives, and basic misunderstandings.</p>
<p>In order to improve my own practice — and hopefully, shed some light for other designers — I want to dig in, to try and untangle the knot.</p>
<p>I use mockups and prototypes to communicate with my stakeholders, our peers, and our partners in implementation. They’re a source of constant friction. Why is that? And what can I do to make them better?</p>
<hr />
<p>When I was a product designer, people would ask what I did for a living, and sometimes I’d answer “I draw pictures of websites.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/pictures-of-websites/#fn2" id="fnref2">2</a></sup></p>
<p>Sure, I could just say “I design websites.” That’s true. The end result of my work is (hopefully) that a website looks better, works better, or results in better outcomes.</p>
<p>But most of my day isn’t spent looking at the website, or working on the code of the website, or manipulating the website directly in some way. It’s spent in Figma or Sketch, drawing <em>pictures</em> of how I think the website should look and work.</p>
<p>Through some kind of alchemy, the pictures I draw have an impact on the finished website. But they’re not all the same. The pictures have different purposes:</p>
<p>Some pictures are just for me. They’re part of the thought process, answers to questions I have about possible outcomes. I’ll share them with my peers to get their input on a problem I’m working on. Call these <em>pictures that discover</em>.</p>
<p>Some pictures, like Mugatu’s model, are meant to visualize an idea or plan, to make it easy to see how some decision or set of decisions might lead to how the website looks. Let’s call them <em>pictures that define</em>.</p>
<p>Other pictures are used to give very precise directions to the people building the website. These pictures are double- and triple-checked, then coated in a layer of technical language. These are <em>pictures that deliver</em>.</p>
<p>Discover, define, deliver. These are the three jobs of my pictures of websites. The key to improving each, to reduce confusion and misunderstanding, to improve our efficiency and eliminate wasted work, is to ask: what are the qualities of each that make them work? And how can I teach my partners to tell the difference?</p>
<hr />
<p>A picture of a website is not the website. Say it again. A picture of a website is not the website. Say it until it starts to become a song, a little tune you get stuck in your head, maybe a sea shanty or a jingle.</p>
<p>♫ <em>A picture of a website is not the website… ♫</em></p>
<p>Sometimes, the picture looks nothing like the website, and nobody gets confused — it’s all marker drawings on a whiteboard, of course it’s not a website. But other times, the picture looks very much like a website. It might be in a browser window, it might be animated, or it might have a clever way to appear different when you look at it on your phone. This is probably the most common source of confusion between my stakeholders and me.</p>
<p>But it’s still just a picture of the website, and not the website:</p>
<ol>
<li>The picture can’t remember anything you do to it — it’s not connected to a database, which is one of the things that makes websites so useful.</li>
<li>The picture is frozen in a moment in time, so it might quickly fall out of date with our knowledge or understanding.</li>
<li>The picture is one person’s point of view of the website; it can’t show you how every person might see the website.</li>
</ol>
<p>The technical reasons for the differences between pictures and websites are very complicated.</p>
<p>To explain to a layperson — say, a person with only the very cursory experience with both pictures and websites — <em>why</em> you can’t click on something that looks like a link, you’d have to explain the various file formats a picture can come in, and how the software of your computer reads and visualizes the code the files contain. You’d have to explain that links were invented to connect documents on the internet, that when the internet was invented, web browsers couldn’t even display pictures, so nobody thought to put links in pictures. Smart people would figure it out later, by the way, but at that point the older common file formats (like jpg) were standardized and implemented, so everyone just used pictures without links.</p>
<p>There are many, many places technical complexity hides in the mockups we show to people. Often, nobody knows to even ask the technical questions required to suss out the differences.</p>
<p>That’s why we should be more deliberate in preparing our presentations: focus on the purpose of your picture, and you can steer clear of some hidden complexities.</p>
<hr />
<p>Pictures that <em>discover</em> are probably easiest to define and improve.</p>
<p><strong>The purpose of a picture that discovers: explore the vast space of possible designs. Visualize alternate realities. Play.</strong></p>
<p>These live in design tools like <a href="https://www.figma.com/" target="_blank" rel="noopener">Figma</a>, <a href="https://www.sketch.com/" target="_blank" rel="noopener">Sketch</a>, or <a href="https://www.adobe.com/products/xd.html" target="_blank" rel="noopener">Adobe XD</a>. I like to put them in a folder, artboard, or page titled “DISCOVERY” or “FUTURE EXPLORATIONS,” in case anyone is lurking through my work.</p>
<p>Pictures that discover are usually messy, unfinished, abandoned once the exploration is done. They’re sketches in notebooks, moodboards filled with screenshots, andunlabeled artboards in Figma.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/picturesofwebsites-1.jpg" alt="Photo by Sigmund on Unsplash
" /><figcaption>Photo by <a href="https://unsplash.com/@sigmund?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sigmund</a> on <a href="https://matthewstrom.com/s/photos/web-design?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
</figcaption></figure>
<p>In some ways, the messiness of these pictures is a symptom of modern design tools’ ways of keeping many copies of your work side by side. It’s a brilliant way of time traveling, creating many branches of reality where you can explore the possibilities of design decisions. But the tools don’t often have a way of organizing or managing the copies of your work.</p>
<p>They’re still focused on the pictures that define, which we’ll talk about in a bit.</p>
<p>Designer Jon Gold wrote an excellent piece of speculative design fiction about pictures that discover.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/pictures-of-websites/#fn3" id="fnref3">3</a></sup> Describing the problem with modern design tools, he cites J. C. R. Licklider’s seminal <em>Man-Computer Symbiosis</em>:</p>
<blockquote>
<p>My “thinking” time was devoted mainly to activities that were essentially clerical or mechanical: searching, calculating, plotting, transforming.… My choices of what to attempt and what not to attempt were determined to an embarrassingly great extent by considerations of clerical feasibility, not intellectual capability.</p>
</blockquote>
<p>Gold goes on to imagine a tool that frees the designer from clerical work. It’s a possibility machine: input a single design idea, define the things that might be changed, and the possibility machine does all the hard work of creating copies, making changes, and organizing them all in a way that encourages exploration.</p>
<p>Gold’s design tool visualizes the design process itself, making each step its own explicit document, preserving the path you took like a breadcrumb-dropping fairy tale character.</p>
<p>You can try a prototype of the possibility machine <a href="http://rene.jon.gold/" target="_blank" rel="noopener">here</a>. While it’s limited to just a few test cases, it’s not hard to see just how different it is from our industry-standard design interfaces.</p>
<p>As our design tools evolve, and as we embrace AI and machine learning, our discovery pictures will look more like Gold’s prototype than like Photoshop.</p>
<p>For now, the best we can do is to be very careful about when we show these pictures that discover to stakeholders or collaborators. They’re visions of possibilities, full of untested assumptions and leaps of faith. To fully articulate the thinking behind them, or the questions they pose, we need to draw a different kind of picture: pictures that define.</p>
<hr />
<p>Pictures that <em>define</em> are all about communication.</p>
<p><strong>The purpose of a picture that defines: place knowledge and understanding into a sense-making frame.</strong></p>
<p>These pictures don’t communicate the “what” — pixels, colors, fonts — of a design, but the “why” — tradeoffs, strategy, long-term maintenance — and “how” — interactions, responsive sizes, edge cases, accessibility and internationalization.</p>
<p>Sometimes teams call this picture a “product requirement document.” It articulates the goals of a website or app feature, puts into words and pictures the decisions that the team has made about scope and capabilities, and often begins to shape the work the team has to do to implement the functionality.</p>
<p>Traditionally, this kind of documentation is the realm of a product manager. But in my work with product managers, a <em>picture</em> of our strategy and tactical decisions is a must-have. That’s because when we visualize our plan, all our assumptions and understanding are meeting reality for the first time. Missed opportunities become obvious. Incorrect assumptions leap off the page. And the picture of the strategy is usually much better at communicating than the paragraphs of description that it comes from.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/picturesofwebsites-2.png" alt="Atlassian’s product requirements template" /><figcaption>Atlassian’s product requirements template</figcaption></figure>
<p>Today, these pictures usually look a lot like this essay. Mostly words, plus a few pictures. Sometimes, they’re presentations à la slide decks. Of the types of pictures we make, these are the most ripe for disruption.</p>
<p>The newest rash of unicorn productivity apps — led by <a href="https://www.notion.so/" target="_blank" rel="noopener">Notion</a>, which recently blew past a two-billion-dollar valuation — is all about innovating documentation. <a href="https://www.abstract.com/" target="_blank" rel="noopener">Abstract</a>, a product that launched as version control for design, is pivoting to focus on smart documentation for design. <a href="https://www.google.com/docs/about/" target="_blank" rel="noopener">Google Docs</a> and <a href="https://www.dropbox.com/paper" target="_blank" rel="noopener">Dropbox Paper</a> are adding features every day to make their documents more dynamic and interactive. New presentation tools like <a href="https://pitch.com/" target="_blank" rel="noopener">Pitch</a> and <a href="https://www.mmhmm.app/" target="_blank" rel="noopener">Mmhmm</a> promise to revolutionize the slide deck, and async video tools like <a href="https://www.loom.com/" target="_blank" rel="noopener">Loom</a> offer ways to produce documentation without writing a word.</p>
<p>What lends these tools so much potential is their ability to provide context to thinking. That’s what pictures that define are all about. Even without live-updating embedded design files, or a video commentary, or hyperlinks and tooltips and nested databases, a design document can be immensely powerful if it can communicate why and how a design works.</p>
<p>Pictures that define have to take a bird’s-eye view. Include too many specifics, and you risk your stakeholders losing the forest from the trees, getting fixated on a font here or a color there. To communicate the specifics — the “what” — we need yet another type of picture.</p>
<hr />
<p>Pictures that <em>deliver</em> are maybe the most information-dense and exact of the bunch.</p>
<p><strong>The purpose of a picture that delivers: give the builders detailed instructions on how to realize a design.</strong></p>
<p>If you’ve seen these kinds of pictures, you’ll know why they’re often called “redlines.”</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/compounding-2.png" alt="Redlines, by Jazzmenn M" /><figcaption>Redlines, by <a href="https://www.behance.net/gallery/53174717/UX-Redline-website-compenents" target="_blank" rel="noopener">Jazzmenn M</a></figcaption></figure>
<p>These inert diagrams were once a part of the day-to-day collaboration between designers and developers. In order to build the mocked-up website, a developer needed to know the size, spacing, font names, hex colors, shadow values, and more, of each and every element on the page, for every screen size a user might have.</p>
<p>Making these pictures is tedious. In the past five years, though, enterprising designers have built tools to make definition-pictures more interactive, more automated, and more informative. Applications like <a href="https://zeplin.io/" target="_blank" rel="noopener">Zeplin</a>, <a href="https://www.abstract.com/" target="_blank" rel="noopener">Abstract</a>, <a href="https://www.figma.com/" target="_blank" rel="noopener">Figma</a>, and <a href="https://www.invisionapp.com/" target="_blank" rel="noopener">Invision</a> have an “inspect” mode, which draws redlines on the fly from a designer’s mockup. The time saved and value generated by this automation is mind-boggling.</p>
<p>Tunneling from the other side of the channel, developers have created tools and frameworks that eliminate the need for separate design and engineering specifications altogether. Tools like <a href="https://storybook.js.org/" target="_blank" rel="noopener">Storybook</a>, <a href="https://www.modulz.app/" target="_blank" rel="noopener">Modulz</a>, and <a href="https://www.framer.com/" target="_blank" rel="noopener">Framer</a> promise to put code directly into the hands of designers — the pictures we make are more like quilts built of real bits of the website we’re drawing.</p>
<p><a href="https://css-tricks.com/what-are-design-tokens/" target="_blank" rel="noopener">Design tokens</a> are another piece of the puzzle. These are atomic bits of design, formulated in such a way that’s useful to both the design tools we use and the codebase of the websites and apps we’re designing. If both designer and developer use the same design token, there’s no longer any need to look up the hex value for a particular shade of blue.</p>
<p>Despite the surfeit of tools for drawing pictures that define, there will always be redlines. That’s because the point of these pictures, the source of their power, is to be as explicit, dense, and technically correct as possible. Eliminate all ambiguity, and you guarantee a fast implementation as bug-free as any (which is to say, always a few bugs).</p>
<hr />
<p>It’s impossible for a picture to be good at discovering, defining, <em>and</em> delivering all at the same time.</p>
<p>This is a bitter pill for me. Almost every project requires all three. Do I really have to draw so many pictures?</p>
<p>I can play back the last few times I ran into hiccups in the design process and see how each one was in part due to having the wrong kind of picture. I sent a stakeholder early explorations without providing the <em>how</em> and <em>why</em> of my decisions, leading to misunderstandings and frustration. I jumped straight to high-fidelity mockups without exploring, developing some blind spots and missing an opportunity. I gave a mockup to a developer without explaining that certain elements needed new interaction patterns; by the time it was built, it was too late to go back.</p>
<p>These are just a few of the ways I’ve goofed. If you’re anything like me, you can instantly conjure a few of your own.</p>
<p>“But Matt,” you may say, “why should I have to do all the work to correct people’s misunderstandings about design? Shouldn’t they work a little harder to understand the design process?”</p>
<p>Hey, friend; that’s design. It’s our responsibility to meet our collaborators and stakeholders where they are. If we show them the wrong kind of picture, or don’t provide the important context, or don’t make it obvious that they’re looking at a picture of the website, and not the website, we’ll keep getting centers for ants.</p>
<p>The good news is that with all the technology and automation, a single designer can design a complex website that millions of people rely on every day. We have a unique kind of leverage among our peers, in that we get to walk the path from concept to vision to plan to execution smoothly and surely.</p>
<p>Embrace the pictures. Draw lots. Figure out what job each does, and make them better.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>This is not the actual screenplay, but a reproduction I created for this essay. <a href="https://www.youtube.com/watch?v=mBNom46c4tQ" target="_blank" rel="noopener">Watch the scene here</a> if you’re into moving pictures. <a href="https://matthewstrom.com/writing/pictures-of-websites/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>NB: I’m going to say “website” throughout this essay, where I really mean “digital interfaces.” These issues affect all digital product designers, whether you’re designing for the web, native apps, embedded technology, or digital services. <a href="https://matthewstrom.com/writing/pictures-of-websites/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p><a href="https://web.archive.org/web/20200512084534if_/https://jon.gold/2016/06/declarative-design-tools/" target="_blank" rel="noopener">The post</a> is only available on the Internet Archive without pictures, so you’ll have to apply a bit of imagination. <a href="https://matthewstrom.com/writing/pictures-of-websites/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The service-based design org
2021-01-23T00:00:00Z
https://matthewstrom.com/writing/service-based-design-org/
<figure data-type="image"><img src="https://matthewstrom.com/images/service.jpg" alt="" /></figure>
<p>Last year, I joined SimpleHealth with the mission of building a design org from scratch. On my first day, there were no in-house designers — just a rotating cast of freelance designers hired by various departments as they were needed.</p>
<p>A blank slate is a design leader’s dream. Finally, I thought, an opportunity to correct every frustrating wrong I’d been cataloging in previous jobs. No politics to navigate, no entrenched habits, just me and the org chart.</p>
<p>First question: <em>What does a good design org actually look like?</em></p>
<p>Like a chicken on the other side of the wire, I was immediately overwhelmed by my newfound freedom. Sure, I had read <a href="https://bookshop.org/books/org-design-for-design-orgs-building-and-managing-in-house-design-teams/9781491938409" target="_blank" rel="noopener"><em>Org Design for Design Orgs</em></a> (like three times). I had pitched the centralized partnership model as part of my interview loop with company leadership. I had a clear head and a strong will.</p>
<p>But how would I know it was working?</p>
<p>The Achilles heel of design leadership. It’s asked in a million ways by a million stakeholders with a million acronyms. “What’s the ROI of design?” “How can design have its own P&L?” “ROAS EBITDA CAC ARPU LTV CRO?” Ok, I got a bit carried away with that last one. But if one team’s structure is better than another, surely there’s a way to measure it.</p>
<p>Can you really <em>measure</em> design?</p>
<p>Uh oh. I’m spiraling. Yes, these questions get asked by other designers. But they’re also asked by CEOs when some designer suggests that design should have a “seat at the table.” Marketing has a seat at the table; measuring marketing is a science, marketing managers live and breathe spreadsheets. Product has a seat at the table; you know product is working because agile coaches have burndown charts to prove it.</p>
<p>If design leaders like me are to get a seat at the table, we <em>have</em> to measure design. We need inscrutable data points to convince our stakeholders that, yes, the design org is working. And ultimately, our peers are the judges; the design org is only good if it works for everyone.</p>
<p>—</p>
<p>That’s it: design is a <em>service.</em> Design doesn’t happen in a vacuum; whether we’re art-directing a new brand campaign, producing display ads for re-targeting, writing research plans for user testing, or speccing out a new component in the design system, our work is ultimately in <em>service</em> of our collaborators’ goals. The brand team needs to build awareness, the performance marketing team needs to acquire new customers, the product team has to increase engagement, and the engineering team needs to reduce tech debt.</p>
<p>Thankfully, some really smart people have already done the hard work to define what a good service looks like. Lou Downe wrote an excellent book called <em><a href="https://bookshop.org/books/good-services-how-to-design-services-that-work/9789063695439" target="_blank" rel="noopener">Good Services</a></em> which is exactly that: 15 principles for good services. While Downe’s book is more focused on services like a DMV, a customer service team, a website, or a subscription platform, it’s been enlightening to apply them to design.</p>
<p>Here are my 15 principles for a good design service:</p>
<p><strong>A good (design) service must:</strong></p>
<div class="l--space-compact">
<ol>
<li><strong>Enable a user to complete the outcome they set out to do</strong><br />
The service-driven design org is only successful when it enables our internal customers (folks in leadership, on the marketing team, on the product team, on the finance team) to accomplish their goals.</li>
<li><strong>Be easy to find</strong><br />
The design team needs to be extremely visible within the company. Open Slack channels, visible links to resources, templates and playbooks in commonly-used tools and processes.</li>
<li><strong>Clearly explain its purpose</strong><br />
We call it “design,” but each company has a vastly different set of needs. At SimpleHealth, design also includes writing, video editing, audio mixing, animating, researching and testing, project management, facilitation, and more. What is design’s purpose at your company?</li>
<li><strong>Set the expectations a user has of it</strong><br />
How does design work? Will a “customer” get a design ready-made in a day? Will they need to provide details and materials themselves, or does the design team have that on hand? Will they get to see the final product before it’s shipped to the users? Good services answer all these questions and more.</li>
<li><strong>Be agnostic of organizational structure</strong><br />
Our customers don’t need to know the difference between UX and UI design. They shouldn’t need a Figma account or a Notion account or an Adobe account or an Asana account to work with us. We should be like a control panel — a clean, easy-to-use interface that hides all the messy internal wiring from the public.</li>
<li><strong>Require the minimum possible steps to complete</strong><br />
I recently ordered a COVID test online. I put in my insurance information, ready to go through an elaborate maze of poorly-designed forms to get my test shipped. But that didn’t happen: the next screen said “your test is on its way.” That’s it. It just worked. If we can <em>just work</em> as a design team, our stakeholders will sing our praises.</li>
<li><strong>Be consistent throughout</strong><br />
This applies to our output as much as it does our ways of working; marketing design, brand design, product design, service design, it should all look and feel and work the same.</li>
<li><strong>Have no dead ends</strong><br />
Did the work get shipped? Does it need additional feedback? What did we learn? For anyone working with design, it should be obvious what comes next. And when we reach the end of a project, we can celebrate and start all over again.</li>
<li><strong>Be usable by everyone, equally</strong><br />
It’s hard not to privilege certain types of design requests above others. A new brand campaign with celebrity talent is way more exciting than formatting a slide deck for a quarterly finance meeting. But to our partners and peers, each project is important. Likewise, folks who don’t know the first thing about design should be able to work with the team just as easily as the product leader who used to be a UX designer.</li>
<li><strong>Respond to change quickly</strong><br />
One of the most damning pieces of feedback I get is when my stakeholders feel that I don’t share their urgency. Similar to principle 5 (be agnostic of organizational structure), a good design service should be organized in a way that allows us to match our stakeholders’ changing priorities and needs.</li>
<li><strong>Work in a way that is familiar</strong><br />
Designers can be frustrating to work with. We have a language all our own: rhythm and measure, contrast, figure, ground, line height, font weight, padding, and gridlines. To provide the best service, we should try to speak the language of our partners. There’s also plenty of opportunities to educate our stakeholders in how design works.</li>
<li><strong>Encourage the right behaviors from users and staff</strong><br />
My 2021 motto is “aligned incentives.” It should be in everyone’s best interest — designers and stakeholders alike — to be user-focused, to be ethically-minded, to work safely and respectfully and inclusively. The way we structure our design service can help.</li>
<li><strong>Clearly explain why a decision has been made</strong><br />
No, “because it looks better” is not a good explanation. Clearly articulating why a design comes together the way it does is an invaluable skill; designers who are transparent in their decision-making tend to go farther. This extends to project management, too. Explaining prioritization and resourcing decisions in the open helps everyone manage the workload in a more sustainable way.</li>
<li><strong>Make it easy to get human assistance</strong><br />
This one’s a little more applicable to typical services than it is to a design team. But the spirit is a good one: designers are humans, in all the good ways and the bad ways too. Embedding designers on functional teams facilitates more empathetic collaboration.</li>
<li><strong>Require no prior knowledge to use</strong><br />
Similar to principle 11 (work in a way that is familiar), it should be easy for anyone in the company to work with designers. This principle is great for rooting out the kind of favoritism and political horse trading that is common to large design teams.</li>
</ol>
</div>
—
<p>And then there’s measuring. Calculating the return on design investment is an exercise in frustration, since, to be a broken record, we don’t work in a vacuum. If you’re trying to figure out how much value design adds to a marketing campaign, how do you separate your creative choices from the strategic deployment of the campaign? Did the color increase the clickthrough rate, or did the marketing manager have the right audience targeting dialed in?</p>
<p>Trying to tease out design’s contributions to a successful project can also feel like a zero-sum game. Of the total revenue a new feature generated, which dollars go on design’s scorecard and which go on product’s? Accounting for success this way leads to an us vs. them mentality that only serves to pad egos.</p>
<p>Instead, we should measure success the way other services do:</p>
<p><strong>Response time</strong> - how quickly does your design organization respond to the needs of your partners? Do new projects sit in a backlog for weeks, or are they immediately put into action?</p>
<p><strong>Throughput</strong> - how many projects does your design team handle? How does that relate to the number of team members you have?</p>
<p><strong>Time to completion</strong> - From the first time your team is brought into a project, how long does it take to complete?</p>
<p><strong>Customer success</strong> - What does the design team enable? Instead of subtracting our contributions from the work of our partners, we should add it all up as part of our own service health metric.</p>
<p><strong>Engagement metrics</strong> - How invested are your partners in the design process? A healthy design service is inclusive and engaging across the company. How many people participate in critiques? How many of your colleagues use your Slack channels, project management tools, or other self-serve tools?</p>
<p><strong>Customer satisfaction</strong> - Have you ever asked how happy your partners are with the design team? Measuring this — either through quantitative tools, like CSAT or NPS, or qualitative measures — will help you grow your service.</p>
<p>Tracking these metrics and comparing them to other higher-order signals like revenue and profit will help you tell a cohesive story about how design contributes to overall business goals.</p>
<p>Going even further, you can compare the design team’s service metrics to the<a href="https://medium.com/mule-design/a-three-part-plan-to-save-the-world-98653a20a12f" target="_blank" rel="noopener"> triple storyline</a> of the company as a whole. With a focus on service, you can demonstrate how your work leads to better outcomes for the business, for users, and for the planet.</p>
<p>Companies that depend on their sales team have tools, team members, and services — sales ops — meant to increase the efficiency of the sales team. Same with engineering teams. The power of service-based thinking is one reason why <strong>design ops</strong> is essential to any high-functioning design team. Design ops is a way of thinking about the efficiency of the design team, applying an analytical mindset to workflow challenges, and improving outcomes by increasing the availability of design as a function.</p>
<p>—</p>
<p>The service model has been instrumental in my efforts to build a design team. It aligns me and my partners in other parts of the org in ways that previously seemed out of reach. When I say “your goals are my goals,” collaboration becomes a breeze. When I’m frustrated with a deluge of feedback or stressed by an onslaught of requests, it helps to frame these things as signs that my service is in demand; I can take that demand and use it as a signal to grow my team.</p>
<p>It’s not a silver bullet. Sometimes, I catch myself wishing I could deliver my work without the constant watchful eye of my stakeholders. Some projects suffer from design by committee, while others are pushed through with constant priority-hacking (when everything is high priority, nothing is). There are lots of challenges to the service model.</p>
<p>But treating the design organization as a service has made it clear just how important it is to every part of the business. And the framework that service thinking provides has helped me be proactive in designing and growing the team.</p>
The hand and the brain
2020-11-18T00:00:00Z
https://matthewstrom.com/writing/the-hand-and-the-brain/
<figure data-type="image"><img src="https://matthewstrom.com/images/handandbrain.jpg" alt="" /></figure>
<p>Prescriptive feedback limits creative collaboration. I’ve seen it time and time again, but I’ve struggled to articulate the exact reasons and their remedies. Recently, though, I got some insight from an unusual source: a game of chess.</p>
<p>Even though it wasn’t the last move, pawn takes rook ended our game. It was textbook chess; even though our pawn was going to be snatched up by our opponent’s queen, trading the lowest-value piece for one of the highest seemed like a no-brainer. But when the queen flew in to take the sacrificial pawn, our king was in its path. Check.</p>
<p>Over our next three moves, black’s queen and our king danced back and forth in a forced sequence of short hops. Once, twice, and then a third time. A sneaky rule in chess is that if you repeat any position on the board three times, the game ends in a draw. And that’s exactly what just happened to Sasha and me.</p>
<p>The post-game review showed that for the first 20 moves of the game, we were all but guaranteed a victory. But when we took that rook, the analysis predicted a stalemate. Even though our opponent was the lowest-level computer algorithm available in the Chess app, it managed to teach us a lesson.</p>
<p>I say ‘us’ because Sasha and I were playing a version of chess called “hand and brain” chess. Chess is usually a lonely game. For hours on end, opponents sit in silence, puzzling through tactics and strategies, straining to read the mind of the person across the board. But hand and brain chess is different: it’s a way for two people to play collaboratively in a game that is almost perfectly designed for solitude.</p>
<p>In hand and brain chess, each team has two players: a “brain” and a “hand.” At the beginning of each turn, the “brain” tells the “hand” which piece to move, and the “hand” then has to move that piece, but can move it wherever they think it should go. No other communication is allowed.</p>
<p>A deep and interesting game evolves from this simple set of rules. Consider the first decision a team has to make: who’s the brain and who’s the hand? Maybe you want the stronger player to be the brain, to narrow down the possibilities for the weaker player to work within. Or maybe the stronger player should be the hand, making the most out of whatever piece the weaker player calls.</p>
<p>Hand and brain chess is rewarding for experienced players, who are forced to evaluate and work through positions they don’t normally find themselves in. It’s also great for inexperienced players, who get to work within constraints and see how more experienced players would play a position.</p>
<p>—</p>
<p>After the game, back at work, I was thinking about how lonely design can be — like chess. It’s all talk about collaboration, partnership, and cross-functional teamwork, but in the end, design happens between a designer and their computer (or notebook, or slip mat and X-Acto knife).</p>
<p>This tension has been keeping me up at night lately. I’m working on building my own team’s processes and culture to be inclusive and collaborative; why does design still feel so lonely? What can we do to make it more of a team sport?</p>
<p>If the goal of design is only “get the stakeholder’s approval,” the stakeholder should just hand the designer a list of revisions to check off. If the goal is only speed, efficiency, or technical rigor, the most skilled designer should work alone, with no stakeholder to slow them down. But if my experience is any indication, the goal of design is almost always something in between. We work within a combination of hard and soft constraints, looking for a solution that combines our team’s technical aptitude with our stakeholder’s vision.</p>
<p>You can see this intention in the many opportunities we get to collaborate. For example, critiques and design reviews are a fixture of the design process, a time for a broad group of people to come together and exercise their creativity.</p>
<p>But these opportunities are often spoiled. And the culprit is predictable: prescriptive feedback.</p>
<p>—</p>
<p>Prescriptive (or directive) feedback comes in the form of a highly specific demand. “Make the logo bigger.” “I like blue better.” “Let’s go with a different font.” Prescriptive feedback feels like collaboration; why should all the decisions be made by one designer? Prescriptive feedback is also incredibly efficient at producing approvals or buy-in: it’s a checklist of everything a designer should do to finish their work. For that reason, sometimes I’m thankful to get prescriptive feedback.</p>
<p>But when the majority of the conversation between designers and their partners takes the form of such direct demands, it turns the creative process into a treadmill. Sure, we’re working hard, but are we really going anywhere? As Adam Connor and Aaron Irizarry put it in <em>Discussing Design</em>, getting approval and creating an effective design are not necessarily the same thing.</p>
<p>Consider a version of brain and hand chess in which the brain called out the full move, not just the piece: “Queen’s pawn to D4.” What kind of strategy should each team employ? Easy: the most skilled player should be the brain. And then what’s the hand’s part, exactly? It’s a foregone conclusion: the hand only needs the bare minimum of language and motor skills to participate.</p>
<p>That’s what happens when a creative conversation involves prescriptive feedback. No more collaboration. In these cases, prescriptive feedback is the enemy. The hand and the brain have to work together.</p>
<p>So what does hand and brain design look like?</p>
<p>In every feedback conversation, one person is the hand. That’s the person doing the design — they’ll leave the meeting and go back to their computer and fire up a dozen Adobe apps. The other people in the room (virtual or otherwise) are the brain. Regardless of their skill in design, it’s their job to give the hand some constraints to work within.</p>
<p>But not to tell them <em>exactly</em> what move to make.</p>
<p>—</p>
<p>There’s certainly an element of trust involved in hand and brain design. But it’s not a one-way trust in the skill of the designer, or trust in the guidance and leadership of the stakeholder. It’s mutual trust in the process.</p>
<p>Sasha and I lost our chess match to the low-grade computer opponent. If either one of us played alone, we might have won. There’s a paradox in deliberately handicapping yourself for the sake of collaboration, a sort of self-sacrifice that usually doesn’t fly in high-growth business environments.</p>
<p>Collaboration is a compounding investment: taken alone, each individual episode might not be optimal. Over time, the team learns and improves, gets more attuned to each other, uncovers surprising opportunities and novel strategies. That old saw: if you want to go fast, go alone. If you want to go far, go together.</p>
Copying is the way design works
2020-10-28T00:00:00Z
https://matthewstrom.com/writing/copying/
<div class="l--grid copying">
<div class="l--grid-narrow l--mar-top-s post">
<div class="c--gray">
This is a very short book about copying. Its contents, unless
otherwise noted, are licensed under
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">CC-BY SA 4.0</a>
(more on that in a bit). You can download, copy, remix, excerpt,
change, and repost it however you see fit.
</div>
<div class="copying--chapter">I</div>
<p>
<strong class="t--transform-uppercase">Charles Eames</strong> said
it best: “We don’t do ‘art’ — we solve problems.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn1" id="fnref1">1</a></sup>
</p>
<p>
To buy furniture in 1950, you had to choose between affordable and
enduring, between rugged and fashionable. Charles and Ray designed a
chair that was all the above and sold it for $20.95.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn2" id="fnref2">2</a></sup>
They called it the LCW.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn3" id="fnref3">3</a></sup>
</p>
<p>
The LCW embodies the Eames’ obsession with simplicity in material
and method. “We want to make the best for the most for the least,”
they said.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn4" id="fnref4">4</a></sup>
The design was revolutionary: in 1999, <em>Time</em> magazine called
the LCW “the best design of the century.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn5" id="fnref5">5</a></sup>
Today, you can buy a brand new LCW from Herman Miller (the
officially licensed manufacturer of Eames products) for $1,195.
</p>
<p>
Or, you can buy a chair called the “Fathom” from a company called
Modway for $145.
</p>
<p>Functionally and aesthetically, the chairs are identical.</p>
</div>
<div class="l--grid-wide">
<figure class="l--flex">
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-1.jpg" alt="Eames Molded Plywood Lounge Chair" />
<figcaption>
Eames Molded Plywood Lounge Chair<br />© Herman Miller
</figcaption>
</div>
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-2.jpg" alt="Modway Fathom" />
<figcaption>Modway Fathom<br />© Modway</figcaption>
</div>
</figure>
</div>
<div class="l--grid-narrow post">
<p>
There’s an LCW from 1946 in MOMA’s collection. It’s one of the very
first ever made. Most people would call it the original LCW.
</p>
<p>
Charles and Ray Eames sold the manufacturing rights for their
furniture to Herman Miller in 1947. Collectors call the LCWs made in
the ’40s and ’50s “originals.” But in some sense, these — and the
more recently manufactured Herman Miller versions — are copies of
that LCW in the MOMA collection.
</p>
<p>
And then there’s the Modway Fathom. It’s clearly a copy, an
unlicensed one at that. But at $145 (the equivalent of $12.78 in
1947) it’s more affordable than the LCW was when it was first
manufactured and sold. In spirit, it’s more of an original than any
LCW: the best, for the most, for the least.
</p>
<hr class="copying--divider" />
<p>
I’m sharing this story because it demonstrates a surprising fact:
what makes something “original” (the first, the best, the most
famous, the most true) or a “copy” (an identical copy, an
unauthorized replica, an interpretation or a remix) isn’t always
obvious — or important.
</p>
<p>
I’m a designer. As a designer, I feel the need to be original. If
you’re a designer, or even if you’re just interested in design, you
probably feel the need to be original, too. We tend to worship
inventors and originators, designers who were trailblazing and
innovative. And we copy them.
</p>
<p>
This oxymoron of a craft can drive a person crazy. There’s lots of
space between originality and industry, authorship and
acknowledgement, riffing and ripping. I wrote this very short book
to explore that space.
</p>
<p>
Some people have been frustrated by copying, refused to accept it,
and struggled with every ounce of their strength against it. Other
people have used copying to their advantage, whether to improve
themselves, build a community, or subvert authority.
</p>
<p>I’ve only been able to have a career in design because I copied.</p>
<p>
I hope that by the time you’ve finished reading, you’ll see how
important copying is. Right or wrong, virtue or vice, copying is the
way design works.
</p>
<div class="copying--chapter">II</div>
<p>
<strong class="t--transform-uppercase">Steve Jobs copied.</strong>
“Great artists steal,” he said, quoting Pablo Picasso (or was it
Stravinsky? T. S. Eliot?<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn6" id="fnref6">6</a></sup>). Jobs and Apple copied many designs in their early days, most
notably from a Xerox research laboratory in Palo Alto. The story
goes like this:
</p>
<p>
In the early 20th century, Xerox was a pioneer of office technology.
By the middle of the century, computers were getting smaller and
more affordable, and Xerox knew they’d have to work hard to keep
their market dominance. In 1970, The Xerox Palo Alto Research Center
— Xerox PARC — was founded to explore the future of the “paperless
office.”
</p>
<p>
Within two years, Xerox PARC had designed a groundbreaking computer
called the Alto. One of its innovations was a graphical user
interface: programs and files were displayed in virtual windows
which users navigated using a mouse. It was an eerily accurate
picture of what personal computers would look like 30 years later.
</p>
<p>
Jef Raskin, leader of the Macintosh project at Apple, had seen
Xerox’s work. He wanted Steve Jobs to see it for himself, and set up
a meeting.
</p>
<p>
“I thought it was the best thing I’d ever seen in my life,” Jobs
said of the Alto’s user interface. “Within ten minutes it was
obvious to me that all computers would work like this some day.”
</p>
<p>
When the Macintosh was released in 1984, it featured a graphical
user interface. Programs and files were displayed in virtual windows
which users navigated using a mouse.
</p>
<p>It was just like the Alto.</p>
</div>
<div class="l--grid-push-right">
<figure class="l--flex">
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-3.jpg" alt="Xerox Alto Operating System" />
<figcaption>
Xerox Star Operating System<br />© Xerox
</figcaption>
</div>
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-4.jpg" alt="Apple Macintosh Operating System" />
<figcaption>
Apple Macintosh Operating System<br />© Apple
</figcaption>
</div>
</figure>
</div>
<div class="l--grid-narrow post">
<p>Steve Jobs didn’t like to be copied.</p>
<p>
In 1985, a year after the Macintosh was launched, Apple sued a
company called Digital Research Interactive for copying the
Macintosh’s user interface. Digital Research settled out of court,
and changed the appearance of its icons, windows, and mouse
pointers.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn7" id="fnref7">7</a></sup>
</p>
<p>
In 1990, Apple sued both Microsoft and Hewlett-Packard. The case was
a repeat: Microsoft’s Windows and HP’s NewWave featured designs that
Apple claimed were copies of the Macintosh’s operating system. But
early licensing agreements between Apple and Microsoft made it
unclear if any infringement took place; the case was thrown out.
</p>
<p>
In the middle of Apple’s case against Microsoft, Xerox sued Apple,
hoping to establish its rights as the inventor of the desktop
interface. The court threw out this case, too, and questioned why
Xerox took so long to raise the issue.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn8" id="fnref8">8</a></sup>
Bill Gates later reflected on these cases: “we both had this rich
neighbor named Xerox ... I broke into his house to steal the TV set
and found out that [Jobs] had already stolen it.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn9" id="fnref9">9</a></sup>
</p>
<p>
The rampant copying fueling the explosive growth of consumer
computers meant that by 1990, the desktop user interface was
ubiquitous; it was impossible to determine who originated any part
of it, or who copied who. The quest to stake their claim nearly
consumed Apple. But when they emerged, they had learned a thing or
two. Today, Apple holds more than 2,300 design patents.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn10" id="fnref10">10</a></sup>
</p>
</div>
<div class="l--grid-wide">
<figure>
<img loading="lazy" src="https://matthewstrom.com/images/copying-5.jpg" alt="Apple's design patent for a device with rounded corners" />
<figcaption class="t--align-center">
Apple's design patent for a device with rounded corners
</figcaption>
</figure>
</div>
<div class="l--grid-narrow post">
<p>
This story ends in 2011, with Apple suing Samsung for copying the
design of its software and hardware products. One of the most
remarkable claims: Samsung broke the law when it sold “a rectangular
product with four evenly rounded corners.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn11" id="fnref11">11</a></sup>
</p>
<p>
The court rejected Apple’s claim to own rounded rectangles. But it
upheld the other claims, fining Samsung a blistering $539 million
for patent violations.
</p>
<p>
Designers copy. We steal like great artists. But when we see a copy
of our work, we’re livid. Jobs, on Google’s Android: “I will spend
my last dying breath if I need to, and I will spend every penny of
Apple’s $40 billion in the bank, to right this wrong. I’m going to
destroy Android, because it’s a stolen product.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn12" id="fnref12">12</a></sup>
</p>
<p>
Steve Jobs was unmatched in his visionary dedication to innovation.
But he never came to terms with the inevitability of copying.
</p>
<div class="copying--chapter">III</div>
<p>
<strong class="t--transform-uppercase">John Carmack had </strong>a
different relationship with copying. For him, copying was a way to
learn, a challenge to overcome, and a source of new ideas.
</p>
<p>
Carmack was — still is — a brilliant coder. He’s best known for
programming the ultraviolent and action-packed first-person shooters
<em>Doom</em> and <em>Quake</em>. Those games pushed the limits of
consumer computers and defined a genre. But his first real
breakthrough game was simpler, cuter, more whimsical. It was called
<em>Commander Keen</em>.
</p>
<p>
Growing up in the early ’90s, I loved <em>Commander Keen</em>. It’s
a goofy adventure game; you guide an eight-year-old boy wearing a
football helmet and red Converses through alien planets, collecting
candy bars and zapping monsters with a ray gun.
</p>
<p>
<em>Keen</em> began life as a copy of another of my favorite games:
<em>Super Mario Bros. 3</em>.
</p>
<p>
Before <em>Keen</em>, Carmack was working for a subscription
software company called Softdisk. Carmack and the other programmers
at Softdisk churned out these games at a prodigious rate: today,
blockbuster games can take more than five years to create;<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn13" id="fnref13">13</a></sup>
Softdisk produced a brand-new full-length game every single month.
</p>
<p>
In September 1990, Carmack decided that for his next game, he’d try
to tackle a new and daunting challenge: scrolling. At the time, only
consoles like the Nintendo had enough computing power to smoothly
scroll scenery, characters, and enemies. The PCs were stuck to
simple one-screen-at-a-time games. But if Carmack was going to sell
millions of games like Nintendo had with <em>Super Mario Bros.</em>,
he needed to figure out how to recreate the effect.
</p>
<p>
So, on September 19, 1990, Carmack and another developer named Tom
Hall decided to reverse-engineer the first level of
<em> Super Mario Bros. 3</em>. Working through the night, Carmack
coaxed his PC into scrolling and animating the world of
<em>Super Mario</em>; Hall jumped back and forth between a TV screen
and his computer, playing the Nintendo version, pausing to copy the
images pixel-for-pixel.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn14" id="fnref14">14</a></sup>
</p>
</div>
<div class="l--grid-push-right">
<figure class="l--flex">
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-6.jpg" alt="Super Mario Bros. 3" />
<figcaption>Super Mario Bros. 3<br />© Nintendo</figcaption>
</div>
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-7.jpg" alt="John Carmack's unlicensed PC port of Super Mario Bros. 3" />
<figcaption>
John Carmack's unlicensed PC port of Super Mario Bros. 3<br />
</figcaption>
</div>
</figure>
</div>
<div class="l--grid-narrow post">
<p>
The next day, their coworkers were floored. Nobody had ever seen a
PC game work like this. John Romero, Carmack’s closest colleague and
future collaborator on <em>Doom</em> and <em>Quake</em>, called it
“the fucking coolest thing on the planet.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn15" id="fnref15">15</a></sup>
He insisted that they keep copying until they had finished an exact
replica of the full game. They were going to send it to Nintendo.
</p>
<hr class="copying--divider" />
<p>
Unfortunately for Carmack and his team, Nintendo wasn’t interested
in a PC version of <em>Super Mario</em> (their console version was
doing just fine, thank you very much).
</p>
<p>
Disappointed, but not defeated, they resolved to build a better
version of Mario. Starting with Carmack’s code for scrolling and
animating the screen, the coders — calling themselves Ideas from the
Deep, keeping the game a secret from their day jobs at Softdisk —
put their <em>Super Mario</em> copy through a complete
metamorphosis. In place of Mario, it starred eight-year-old Billy
Blaze. Instead of turtles and mushrooms, the enemies were aliens
called Yorps. Instead of eating a mushroom to jump higher, Billy
Blaze hopped on a pogo stick.
</p>
<figure>
<img loading="lazy" src="https://matthewstrom.com/images/copying-8.jpg" alt="Commander Keen in Invasion of the Vorticons" />
<figcaption>
<em>Commander Keen in Invasion of the Vorticons</em><br />©3D
Realms
</figcaption>
</figure>
<p>
The debut <em>Commander Keen</em> game,
<em>Commander Keen in Invasion of the Vorticons</em>, was a huge
success. More than 50,000 copies were sold, making <em>Keen</em> one
of the best-selling PC games of its time.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn16" id="fnref16">16</a></sup>
</p>
<p>
Unlike Steve Jobs, John Carmack never changed his mind about
copying. When his boss at Softdisk suggested that they patent
Carmack’s PC scrolling technique, Carmack reeled. “If you ever ask
me to patent anything,” he said, “I’ll quit.”
</p>
<hr class="copying--divider" />
<p>
In a 2005 forum post, John Carmack explained his thoughts on
patents. While patents are framed as protecting inventors, he wrote,
that’s seldom how they’re used. Smart programmers working on hard
problems tend to come up with the same solutions. If any one of
those programmers patents their solution, the rest are screwed.
</p>
<p>
He concluded: “I’ll have no part of it. Its [sic] basically mugging
someone.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn17" id="fnref17">17</a></sup>
</p>
<p>
In his games after <em>Keen</em>, Carmack would go beyond simply
refusing to patent his inventions. He would release the source code
to the biggest games of the ’90s, <em>Wolfenstein 3D</em>,
<em>Doom</em>, and <em>Quake</em>. Everyone is free to download,
modify, or copy them.
</p>
<div class="copying--chapter">IV</div>
<p>
<strong class="t--transform-uppercase">It’s one thing to copy.</strong>
It’s another to encourage others to copy from you. Richard Stallman
went even further — he made copying a right.
</p>
<p>
In 1983, Richard Stallman wanted to build a new operating system. At
the time, Unix was the most popular and influential operating
system, but it was expensive to license. Commercial licenses cost
$20,000 — that’s $52,028 in 2020 money.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn18" id="fnref18">18</a></sup>
And Unix was closed-source.
</p>
<p>
So on September 27, 1983, he wrote this message on the Unix Wizards
message board:
</p>
<blockquote class="t--family-mono">
Free Unix!<br /><br />
Starting this Thanksgiving I am going to write a complete
Unix-compatible software system called GNU (for Gnu's Not Unix), and
give it away free to everyone who can use it. Contributions of time,
money, programs and equipment are greatly needed.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn19" id="fnref19">19</a></sup>
</blockquote>
<p>
That Stallman would write software and give it to others to use, for
free, was a radical notion. To drive the point home, Stallman wrote
a manifesto, defining the idea of
<strong>free software</strong> (“Free software is software that
users have the freedom to distribute and change.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn20" id="fnref20">20</a></sup>) The manifesto kicked off the free software movement.
</p>
<p>
The enduring innovation of Stallman’s movement was how he and his
co-conspirators used software licenses. They flipped traditional
licensing on its head: instead of prohibiting the copying or
distribution of the software, a free software license guarantees the
right of people to use, modify, distribute, and learn from its code.
</p>
</div>
<div class="l--grid-push-left">
<figure class="copying--quote">
Instead of prohibiting the copying or distribution of the software,
a free software license guarantees the right of people to use,
modify, distribute, and learn from its code.
</figure>
</div>
<div class="l--grid-narrow post">
<p>
New kinds of software licenses weren’t the only product of the free
software movement. Ideological offshoots quickly spun out into new
groups, like the <strong>open-source software</strong> movement.
While Stallman’s free software faction was centered around a small
group of hard-line progressive coders, the open-source movement was
broad and inclusive, abandoning some of Stallman’s more political
language to spread farther and find new audiences.
</p>
<p>
Permissive licensing and distributed source control form the engine
of modern software development. They create a feedback loop, or a
symbiotic pair, or a living organism, or maybe even a virus: the
tools that software developers use are themselves products of the
open-source philosophy. Free and open-source code replicates itself,
mutates, and spreads instantly across the world.
</p>
<hr class="copying--divider" />
<p>
The free and open-source software movements (sometimes combined into
a single acronym, FOSS) were echoed by another revolution in how
creative works are licensed. In 2001, Lawrence Lessig, Hal Abelson,
and Eric Eldred started Creative Commons, a non-profit and
international network dedicated to enabling the sharing and reuse of
“creativity and knowledge through the provision of free legal
tools.”
</p>
<p>
Nearly 20 years later, nearly half of a million images on Flickr
have Creative Commons (or CC) licenses. Wikipedia uses CC licenses
on all its photos and art. MIT provides more than 2,400 courses
online for free under Creative Commons licenses. Countless millions
of creative works have benefited from the open-source approach to
licenses and permissions.
</p>
</div>
<div class="l--grid-narrow">
<figure>
<img loading="lazy" src="https://matthewstrom.com/images/copying-9.jpg" alt="An image of a feedback loop from Flickr's Creative Commons archive" />
<figcaption>
An image of a feedback loop from Flickr's Creative Commons
archive
</figcaption>
</figure>
</div>
<div class="l--grid-narrow post">
<p>
A decade ago, the open-source movement came to design. Michael Cho
created
<a href="https://unsplash.com/" target="_blank" rel="noopener">Unsplash</a>
in 2013 to share a few photographs he thought might be useful to
designers at startups; as of September 2020, Unsplash hosts
2,147,579 photos, and all-time photo downloads are well over 2
billion.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn21" id="fnref21">21</a></sup>
Pablo Stanley recently released
<a href="https://www.humaaans.com/" target="_blank" rel="noopener">Humaaans</a>, a collection of Creative Commons-licensed designs that can be
re-assembled into editorial graphics.
<a href="https://feathericons.com/" target="_blank" rel="noopener">Feather icons</a>,
<a href="https://heroicons.dev/" target="_blank" rel="noopener">Heroicons</a>, and
<a href="https://icons.getbootstrap.com/" target="_blank" rel="noopener">Bootstrap Icons</a>
are all open-source and free-to-use collections of UI icons, used by
designers to build websites and applications.
</p>
<p>
Meanwhile, the explosion of open-source design resources has been
bolstered by a new class of tools for sharing and collaborating on
design.
<a href="https://www.abstract.com/" target="_blank" rel="noopener">Abstract</a>
is a version-control system for design that promises “collaboration
without the chaos.” With Abstract, many designers can contribute to
a single file, without worrying about overwriting each other's
changes or always needing to download the latest versions. Figma,
too, has just launched
<a href="https://www.figma.com/community" target="_blank" rel="noopener">its community feature</a>
, allowing designers to publish files and download each other’s
projects. It’s not hard to imagine how this will evolve into a
designer’s version of
<a href="https://github.com/" target="_blank" rel="noopener">GitHub</a>
in the near future. Other design tools have followed suit: both
Sketch and Framer have launched community content hubs, laying the
groundwork for distributed source control.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn22" id="fnref22">22</a></sup>
</p>
<p>
Copying is fundamental to design, just as it is to software. The
rise of permissive licenses and version control tools makes it seem
like copying is a new idea, an innovative approach in an industry
that thrives on novelty. But the truth is, copying has informed art
and industry for thousands of years.
</p>
<div class="copying--chapter">V</div>
<p>
In China, there are many concepts of a copy, each with distinct
subtext. Fangzhipin (仿製品) are copies that are obviously different
from the original — like small souvenir models of a statue. Fuzhipin
(複製品) are exact, life-size reproductions of the original.
Fuzhipin are just as valuable as originals, and have no negative
stigma.
</p>
<p>
In 1974, local farmers in the Xi’an region of China unearthed
life-sized sculptures of soldiers made of terra cotta clay. When
Chinese archeologists came to investigate the site, they uncovered
figure after figure, including horses and chariots, all exquisitely
detailed. All told, there were more than 8,000 terra cotta soldiers.
They were dated to 210 BCE.
</p>
<figure>
<img loading="lazy" src="https://matthewstrom.com/images/copying-10.jpg" alt="Terracotta warriors, Xi'an city" />
<figcaption>Terracotta warriors, Xi'an city</figcaption>
</figure>
<p>
The terracotta warriors instantly became cultural treasures. A
museum was built on the site of the excavation, but many of the
statues were also exhibited in traveling shows. Hundreds of
thousands of museumgoers all over the world lined up in galleries to
see the soldiers.
</p>
<p>
Then, in 2007, a revelation rocked the Museum für Völkerkunde in
Hamburg, Germany: some of the terracotta warriors it had on display
were not the originals that had been discovered in the field in
Xi’an. They were copies.
</p>
<p>
The Museum für Völkerkunde’s director became a pariah: “We have come
to the conclusion that there is no other option than to close the
exhibition completely, in order to maintain the museum’s good
reputation.” The museum issued refunds to visitors. The event kicked
off a rash of geopolitical finger-pointing: German officials cried
foul, saying they were duped; Chinese officials washed their hands,
since they never claimed the statues were originals to begin with.
</p>
<p>
The statues in the Hamburg museum were fuzhipin, exact copies. They
were equivalent to the originals. After all, the originals were
themselves products of mass manufacturing, made with modules and
components cast from molds. Almost as soon as the terracotta
warriors were discovered, Chinese artisans began producing replicas,
continuing the work that had started more than 2,000 years
before.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn23" id="fnref23">23</a></sup>
</p>
<hr class="copying--divider" />
<p>
It’s easy to attribute this approach to copying as a cultural
curiosity, an aberration particular to China. But copying was just
as vital to Western artists.
</p>
<p>
Japanese art was one of the main sources of inspiration for Vincent
van Gogh, himself one of the most influential European painters of
the 19th century, if not of all time. Van Gogh was fascinated by the
woodblock prints of artists like Hiroshige: stylized and vivid, they
captured dramatic moments within compelling stories.
</p>
<p>
Van Gogh’s interest went beyond inspiration. To study the techniques
mastered by Japanese artists, he copied prints by Keisei Eisen and
Utagawa Hiroshige. He tried to replicate their bold lines, their
energetic compositions, and their strong colors. For his copy of
Eisen’s A courtesan, van Gogh started by tracing the outline of the
courtesan’s figure directly from the May 1886 edition of Paris
Illustré. For Flowering Plum Tree and The Bridge in the Rain, both
copies of Hiroshige prints, he added borders of Japanese calligraphy
he had seen on other prints.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn24" id="fnref24">24</a></sup>
</p>
</div>
<div class="l--grid-push-right">
<figure class="l--flex">
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-11.jpg" alt="Sudden Shower over Shin-Ōhashi bridge and Atake (1857) by Hiroshige" />
<figcaption>
<em>Sudden Shower over Shin-Ōhashi bridge and Atake</em>
(1857) by Hiroshige
</figcaption>
</div>
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-12.jpg" alt="The Bridge in the Rain (after Hiroshige) (1887) by Vincent Van Gogh" />
<figcaption>
<em>The Bridge in the Rain (after Hiroshige)</em> (1887) by
Vincent Van Gogh
</figcaption>
</div>
</figure>
</div>
<div class="l--grid-narrow post">
<p>
His practice with Japanese styles provided a crucial breakthrough.
Van Gogh began to flatten landscapes. He outlined his subjects in
bold black strokes. He painted with eye-watering colors. His
interpretations of reality lit the art world on fire, influencing
artists and designers to this day.
</p>
<p>
By copying directly from Japanese artists, van Gogh’s works became
what we know today.
</p>
<p>
He was clear about this influence. In a letter to his brother Theo,
he wrote: “All my work is based to some extent on Japanese art.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn25" id="fnref25">25</a></sup>
</p>
<hr class="copying--divider" />
<p>
There’s another word in Chinese for a copy: shanzhai (山寨). It’s
translated to English as “fake,” but as with most Chinese words, the
translation is lacking. Shanzhai literally means “mountain
stronghold;” the word is a neologism, a recent invention, inspired
by a famous novel in which the protagonists hide in a mountain
stronghold to fight against a corrupt regime. Shanzhai products are
playful, drawing attention to the fact that they aren’t original,
putting their makers’ creativity on display.
</p>
<p>
Take the popular shanzhai novel
<em>Harry Potter and the Porcelain Doll</em>; in it, Harry goes to
China to stop Voldemort and Voldemort’s Chinese counterpart. It
doesn’t pretend to be an original. It plays on its fake-ness: Harry
speaks Chinese fluently, but he has trouble eating with chopsticks.
</p>
<p>
It’s easy to think of shanzhai as a Chinese quirk, but there are
parallels in Western culture. One in particular, is a staple of the
design community: the unsolicited redesign.
</p>
<p>
An unsolicited redesign demonstrates a designer’s ideas for how a
well-known website or app could be improved. They range from
single-screen aesthetic tweaks (like
<a href="https://dribbble.com/shots/13154163-Instafresh" target="_blank" rel="noopener">this take on Instagram</a>) to in-depth case studies in UX, IA, and content design (like
<a href="https://blog.prototypr.io/gmail-an-unsolicited-redesign-1-2b244886eef8" target="_blank" rel="noopener">this redesign of Gmail’s mobile app</a>).
</p>
<p>
Unsolicited redesigns copy the visual elements of the original as a
starting point, then transform those elements to produce something
new. Like van Gogh tracing Eisen, designers can pick up new
techniques and approaches just by copying. But when a designer riffs
on the original, they can create something new and inspiring.
</p>
<p>
The design community has a complicated relationship with unsolicited
redesigns. On the one hand, they’re the mainstay of talented young
designers looking to demonstrate their ability to think critically
about design and apply their skills. Companies have used the
unsolicited redesign to position themselves as leaders: in 2003,
37signals (creator of the popular project management tool Basecamp)
created redesigns of PayPal, Google, and FedEx to critical acclaim:
their redesign of an online car dashboard “could do for cars what
TiVo did for television,” Jason Kottke proclaimed.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn26" id="fnref26">26</a></sup>
</p>
<p>
In rare cases, unsolicited redesigns turn into solicited ones. In
2018, Adam Fisher-Cox published a redesign of the digital signage of
the AirTrain system at John F. Kennedy International Airport. The
agency overseeing AirTrain saw the redesign and hired Fisher-Cox to
implement it.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn27" id="fnref27">27</a></sup>
</p>
</div>
<div class="l--grid-wide">
<figure>
<div class="l--flex">
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-13.jpg" alt="The old signage for JFK's AirTrain" />
<figcaption>The old signage for JFK's AirTrain</figcaption>
</div>
<div class="l--flex-half">
<img loading="lazy" src="https://matthewstrom.com/images/copying-14.jpg" alt="The beginning of Adam's redesign, copying directly from the existing signage" />
<figcaption>
The beginning of the redesign, copying directly from the
existing signage
</figcaption>
</div>
</div>
<div class="l--flex">
<div>
<img loading="lazy" src="https://matthewstrom.com/images/copying-15.jpg" alt="The final redesign comissioned by the agency in charge of AirTrain" />
<figcaption>
The final redesign comissioned by the agency in charge
of AirTrain. All images courtesy
<a href="https://adamfishercox.com/portfolio/airtrain-arrival-signs/">Adam Fisher-Cox.</a>
</figcaption>
</div>
</div>
</figure>
</div>
<div class="l--grid-narrow post">
<p>
On the other hand, unsolicited redesigns are often looked down on.
In a 2013 essay titled “Keep Your Unsolicited Redesign to
Yourself,”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn28" id="fnref28">28</a></sup>
Eric Karjaluoto argued that without acknowledging the constraints
and incentives that guided an original design, the redesign is
“utter fluff.” Those working on unsolicited redesigns “should know
better than to waste their time.” There are countless other
invectives against unsolicited redesign across the internet of
design blogs.
</p>
<p>
In 2011,
<a href="https://web.archive.org/web/20111208041110/https://andyrutledge.com/news-redux.php" target="_blank" rel="noopener">Andy Rutledge’s unsolicited redesign of <em>The New York Times</em></a>
drew the attention of design pundits in countless blog posts and
tweets.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn29" id="fnref29">29</a></sup>
But if they disagreed with Rutledge’s conclusions, many defended his
approach. “Sometimes we need to go crazy and mock up stuff that
can’t absolutely work in its pure form,” wrote Stijn Debrouwere,
because “a full-on rethink might be what we need to move
forward.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn30" id="fnref30">30</a></sup>
Even Khoi Vinh, previous design director for the Times, supported
the practice: “Unsolicited redesigns are terrific and fun and
useful, and I hope designers never stop doing them.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/copying/#fn31" id="fnref31">31</a></sup>
</p>
<p>
The shanzhai approach of copying — to learn, to invent, to comment,
to make a statement — is just at home in the West as it is in China.
</p>
<div class="copying--chapter">VI</div>
<p>
Copying can be instructive, challenging, devious, or revolutionary.
To me, copying is fun.
</p>
<p>
When I was young, I liked to trace. My mom would buy me tracing
paper, and I’d copy comic book characters line for line. Pulling the
paper back from the original was a rush. I drew this! With my hand!
Sure, it was a copy, but once I signed my name in the corner, it was
my copy.
</p>
<p>
These days, there’s automatic copy protection on just about
everything. You can’t easily pirate Netflix streams, copy Kindle
books, or torrent Adobe Creative Cloud. But designs are different.
To copy a design, all you need is tracing paper.
</p>
<p>
In fact, you don’t even have to draw. Pull out your phone, take a
picture, and save it to your Pinterest board. You can use a color
picker to extract the exact shade from the design, use a physical or
digital measuring tool to get the pixel-perfect dimensions, and use
<a href="https://www.myfonts.com/WhatTheFont/" target="_blank" rel="noopener">WhatTheFont</a>
to learn the typefaces in the design.
</p>
<p>
If you’re looking at a website, you can just click “view source” and
see all the design decisions laid out in granular detail. That’s
exactly how I went from tracing comic books to being a designer: I
copied designs from websites I liked and pasted them onto my Xanga
blog.
</p>
<p>I copied because I could.</p>
<p>
In my first design job, I copied relentlessly. I had created a music
magazine with friends and tried to recreate the layouts I saw in my
favorite mags. Wired was a constant source of inspiration: I
obsessed over their typography. When I figured out that they were
using Joshua Darden’s Freight Micro, I switched our magazine to use
it, too.
</p>
<p>
Copying helped me develop as a designer without needing to go to
design school. For lots of people too young for college-level design
programs, or without the means to attend these schools or bootcamps,
copying serves the same function.
</p>
<p>
And then, when folks like me wind up in a career in design, we find
that copying is still useful. I eyedropper colors from Apple’s
marketing websites. I start my color palettes from Google’s Material
Design examples. I screenshot and recreate components from
Facebook’s new redesign.
</p>
<p>
I don’t fancy myself to be the van Gogh of design, to be anywhere on
the level of Stallman or Carmack in my approach to copying,
possessing even one-one-hundredth of Steve Jobs’ ability to steal
artfully, or to be in any way comparable to Charles or Ray Eames.
But I can certainly copy all of their work. I can copy their
mindset, their process, and their designs.
</p>
<p>
I can make cheap, small-scale facsimiles, fangzhipin, to demonstrate
some quality of the original. I can make exact replicas,
pixel-perfect fuzhipin, to learn how the originals and their
creators work. Or I can create shanzhai, unsolicited redesigns,
commenting and riffing on the work of others. All these copies have
an important role to play in the process of design.
</p>
<p>
Whether you believe that it’s worthwhile or worthless to copy,
whether you think that copies are a valuable part of the design
community or a scourge, you are using software, hardware, websites
and apps that all owe their existence to copying.
</p>
<p>As long as there is design, there will be copying.</p>
<hr />
</div>
<section class="footnotes l--space-compact l--grid-narrow">
<div class="t--weight-bold l--pad-btm-s">
Footnotes & References
</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item">
<p>
Cook, William. “Charles and Ray Eames: The Couple Who Shaped
the Way We Live.” Accessed October 27, 2020.
https://www.bbc.com/culture/article/​20171218-charles-and-ray-eames-the-couple-who-shaped-the-way-we-live.<a href="https://matthewstrom.com/writing/copying/#fnref1" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn2" class="footnote-item">
<p>
That’s the equivalent of $205.48 today.<a href="https://matthewstrom.com/writing/copying/#fnref2" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn3" class="footnote-item">
<p>
An acronym of “low chair wood” or “lounge chair wood.”<a href="https://matthewstrom.com/writing/copying/#fnref3" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn4" class="footnote-item">
<p>
Jim Carroll’s Blog. “‘The Best for the Most for the Least’:
The Eames Office and the Democratic Impulse.” Accessed
October 27, 2020.
https://www.jimcarrollsblog.com/blog/​2018/11/22/the-best-for-the-most-for-the-least-the-eames-office-and-the-democratic-impulse.<a href="https://matthewstrom.com/writing/copying/#fnref4" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn5" class="footnote-item">
<p>
“The Best Of The Century.” Time, December 26, 1999.
http://content.time.com/time/​magazine/article/0,9171,36533-1,00.html.<a href="https://matthewstrom.com/writing/copying/#fnref5" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn6" class="footnote-item">
<p>
If you’re curious, it was W. H. Davenport Adams (<a href="https://quoteinvestigator.com/2013/03/06/artists-steal/" target="_blank" rel="noopener">https://quoteinvestigator.com/2013/03/06/artists-steal/</a>).<a href="https://matthewstrom.com/writing/copying/#fnref6" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn7" class="footnote-item">
<p>
“Digital Research To Modify GEM.”
<em>The New York Times,</em> October 1, 1985.
https://www.nytimes.com/1985/10/01/​business/digital-research-to-modify-gem.html.<a href="https://matthewstrom.com/writing/copying/#fnref7" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn8" class="footnote-item">
<p>
Fisher, Lawrence M., and Special To the New York Times.
“COMPANY NEWS; Xerox Sues Apple Computer Over Macintosh
Copyright (Published 1989).” <em>The New York Times</em>,
December 15, 1989.
https://www.nytimes.com/1989/12/15/​business/company-news-xerox-sues-apple-computer-over-macintosh-copyright.html.<a href="https://matthewstrom.com/writing/copying/#fnref8" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn9" class="footnote-item">
<p>
Dernbach, Christoph. “Did Steve Jobs Steal Everything from
Xerox PARC?” Mac History (blog), March 22, 2012.
https://www.mac-history.net/computer-history/2012-03-22/apple-and-xerox-parc.<a href="https://matthewstrom.com/writing/copying/#fnref9" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn10" class="footnote-item">
<p>
“Google Patents.” Accessed October 27, 2020.
https://patents.google.com/?assignee=Apple+Inc&type=DESIGN.<a href="https://matthewstrom.com/writing/copying/#fnref10" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn11" class="footnote-item">
<p>
Apple, Inc. v. Samsung Elecs. Co., Inc., No. 14-1335 (Fed.
Cir. 2015).<a href="https://matthewstrom.com/writing/copying/#fnref11" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn12" class="footnote-item">
<p>
Isaacson, Walter. <em>Steve Jobs</em>. New York: Simon &
Schuster, 2011.<a href="https://matthewstrom.com/writing/copying/#fnref12" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn13" class="footnote-item">
<p>
“Why Do AAA Games Often Take 1 to 2 Years to Make If They
Have Big Teams Working on Them? - Quora.” Accessed October
27, 2020.
https://www.quora.com/Why-do-AAA-games-often-take-1-to-2-years-to-make-if-they-have-big-teams-working-on-them.<a href="https://matthewstrom.com/writing/copying/#fnref13" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn14" class="footnote-item">
<p>
You can watch a video of Carmack’s copy here:
<a href="https://www.youtube.com/watch?v=1YWD6Y9FUuw" target="_blank" rel="noopener">https://www.youtube.com/watch?v=1YWD6Y9FUuw</a>
<a href="https://matthewstrom.com/writing/copying/#fnref14" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn15" class="footnote-item">
<p>
Kushner, David.
<em>Masters of Doom: How Two Guys Created an Empire and
Transformed Pop Culture</em>. New York: Random House Trade Paperbacks, 2004.<a href="https://matthewstrom.com/writing/copying/#fnref15" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn16" class="footnote-item">
<p>
<em>Commander Keen</em> was distributed as shareware,
meaning anyone could freely download and copy the first of
three installments. The entire game could then be purchased
from the publisher.<a href="https://matthewstrom.com/writing/copying/#fnref16" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn17" class="footnote-item">
<p>
“Are Video Game Patents Next? - Slashdot.” Accessed October
27, 2020.
https://slashdot.org/comments.pl?sid=151312&cid=12701745.<a href="https://matthewstrom.com/writing/copying/#fnref17" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn18" class="footnote-item">
<p>
<em>Byte Magazine Volume 08 Number 10 - UNIX</em>, 1983.
http://archive.org/details/byte-magazine-1983-10.<a href="https://matthewstrom.com/writing/copying/#fnref18" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn19" class="footnote-item">
<p>
“New UNIX Implementation.” Accessed October 27, 2020.
https://groups.google.com/g/​net.unix-wizards/c/8twfRPM79u0/m/1xlglzrWrU0J?pli=1.<a href="https://matthewstrom.com/writing/copying/#fnref19" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn20" class="footnote-item">
<p>
“The GNU Manifesto.” Accessed October 27, 2020.
https://www.gnu.org/gnu/manifesto.html.<a href="https://matthewstrom.com/writing/copying/#fnref20" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn21" class="footnote-item">
<p>
“Statistics | Unsplash.” Accessed October 27, 2020.
https://unsplash.com/stats.<a href="https://matthewstrom.com/writing/copying/#fnref21" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn22" class="footnote-item">
<p>
Sketch Cloud:
<a href="https://sketch.com/c" target="_blank" rel="noopener">https://sketch.com/c</a>, Framer Packages:
<a href="https://packages.framer.com/" target="_blank" rel="noopener">https://packages.framer.com/</a><a href="https://matthewstrom.com/writing/copying/#fnref22" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn23" class="footnote-item">
<p>
Han, Byung-Chul, and Philippa Hurd.
<em>Shanzhai: Deconstruction in Chinese</em>. Untimely
Meditations. Boston, MA: The MIT Press, 2017.<a href="https://matthewstrom.com/writing/copying/#fnref23" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn24" class="footnote-item">
<p>
“Japonaiserie (Van Gogh).” In <em>Wikipedia</em>, July 21,
2020.
https://en.wikipedia.org/w/index.php?​title=Japonaiserie_(Van_Gogh)​&oldid=968846328.<a href="https://matthewstrom.com/writing/copying/#fnref24" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn25" class="footnote-item">
<p>
“Inspiration from Japan.” Accessed October 27, 2020.
https://vangoghmuseum-prod.azurewebsites.net/​en/stories/inspiration-from-japan.<a href="https://matthewstrom.com/writing/copying/#fnref25" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn26" class="footnote-item">
<p>
“37Better Project: Better Thinking, Design and Usability
Leads to Better Online Experiences,” December 14, 2003.
https://web.archive.org/web/​20031214174325/​http://37signals.com/better.php.<a href="https://matthewstrom.com/writing/copying/#fnref26" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn27" class="footnote-item">
<p>
Adam Fisher-Cox. “Minimizing Lost Time for AirTrain Riders
at JFK Airport.” Accessed October 27, 2020.
https://adamfishercox.com/portfolio/airtrain-arrival-signs/.<a href="https://matthewstrom.com/writing/copying/#fnref27" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn28" class="footnote-item">
<p>
Eric Karjaluoto. “Keep Your Unsolicited Redesign to
Yourself,” August 25, 2013.
http://www.erickarjaluoto.com/blog/keep-your-unsolicited-redesign-to-yourself/.<a href="https://matthewstrom.com/writing/copying/#fnref28" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn29" class="footnote-item">
<p>
For example, Joshua Benton’s counter-critique on
<a href="https://www.niemanlab.org/2011/07/designing-a-big-news-site-is-about-more-than-beauty/" target="_blank" rel="noopener">Nieman Labs’ website.</a><a href="https://matthewstrom.com/writing/copying/#fnref29" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn30" class="footnote-item">
<p>
“The Andy Rutledge Debacle,” December 28, 2011.
https://web.archive.org/web/​20111228200142/​http://stdout.be/​2011/07/26/the-andy-rutledge-debacle/.<a href="https://matthewstrom.com/writing/copying/#fnref30" class="footnote-backref">↩︎</a>
</p>
</li>
<li id="fn31" class="footnote-item">
<p>
Subtraction.com. “A Word About Unsolicited Redesigns,” July
28, 2011.
https://www.subtraction.com/​2011/07/28/unsolicited-redesigns/.<a href="https://matthewstrom.com/writing/copying/#fnref31" class="footnote-backref">↩︎</a>
</p>
</li>
</ol>
</section>
<section class="footnotes l--space-compact l--grid-narrow">
<div class="t--weight-bold l--pad-btm-s">Colophon</div>
<div class="t--size-s">
<p>
This very short book is set in
<a href="https://practicaltypography.com/charter.html" target="_blank" rel="noopener">Charter</a>
and
<a href="https://rsms.me/inter/" target="_blank" rel="noopener">Inter</a>. The headline is set in
<a href="https://gitlab.com/bonjour-monde/fonderie/syne-typeface" target="_blank" rel="noopener">Syne</a>. All typography used is open-source. Very special thanks to
Josh Petersel and Sasha Awn for feedback on early drafts of this
book.
</p>
</div>
</section>
</div>
The things of everyday design
2020-07-30T00:00:00Z
https://matthewstrom.com/writing/the-things-of-everyday-design/
<figure data-type="image"><img src="https://matthewstrom.com/images/everyday-design.jpg" alt="" /></figure>
<p>There’s a secret code embedded in every app, website, and interface you use. Underneath your fingers is a hidden world traveled by the interface designers, caught up in a war between the complexities of technology and the breakneck evolution of user needs. These designers speak cryptically in neologisms (squircle, sharrow, neumorphism) and food-themed shibboleths (hamburger menu or meatball menu? Candy bar or toast?).</p>
<p>Their code is made of things called affordances. Those fluent in the language of affordances possess an intuitive and powerful understanding of how design works.</p>
<p>So let’s take a trip into the depths of interface design and shine a light on affordances. We’ll study them, explore how they work, and see how they define our digital tools. Bringing affordances out of the shadows can lead to clearer conversations about design, no matter if you’re a veteran designer or a casual user.</p>
<h2 id="the-history-of-affordances">The history of affordances</h2>
<p>In 1988, Don Norman published a book called <em>The Design of Everyday Things.</em> At the time, Norman was transitioning from a career in cognitive science and psychology to one in technology — he was one of the first people to write about “human-centered design,” an approach to technology that focuses on human biology and psychology to create functional software and hardware. <em>The Design of Everyday Things</em> was the genesis of many of these ideas, including one he called “affordances.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn1" id="fnref1">1</a></sup></p>
<blockquote>
<p>An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn2" id="fnref2">2</a></sup></p>
</blockquote>
<p>Norman’s explorations of usability design, human-centered-design, and universal design all serve as the foundation of modern digital product design. But it’s the concept of affordances that has taken on a life all its own. Designers have taken the original definition and transformed it slightly: today, designers use “affordances” to mean “properties of objects which show users the actions they can take.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn3" id="fnref3">3</a></sup></p>
<p>Here’s an example of an affordance in the real world:</p>
<p>A handle on a door is an affordance: it indicates that the door should be pulled. A flat, rectangular plate on a door is an affordance indicating that it should be pushed.</p>
<p>Norman would say that a handle or a plate is a <em>good affordance</em>, because of its relationship to the person who is using the door. A plate on a door begs to be pushed. Without edges or round parts to grab, the natural way — the only way — of interacting with it is to push. A good door handle, on the other hand, is located right where your arm naturally falls when reaching for the door. The radius of the handle is the right size to give you a good grip. It’s located on the side of the door opposite the hinge, so the door isn’t too hard to open.</p>
<p>Some doors don’t have good affordances. To make up for the confusion, there’s a “PUSH” or “PULL” sign. The sign doesn’t take advantage of the way our bodies instinctively interact with the door; it’s only helpful to people with good vision, who happen to be paying attention, or aren’t in too much of a hurry.</p>
<p>So, a good affordance takes advantage of some natural interaction between a thing and its user. Something that’s supposed to be used with your hands ought to be hand-shaped (and ambidextrous!). If something has visual feedback mechanisms, those mechanisms should be at eye level. Things arranged in physical space — like a row of lights, or a set of stovetop burners — should have their controls arranged in a corresponding way.</p>
<p>But we don’t always have a physical relationship to the tools we use.</p>
<p>Our phones, laptops, tablets, watches, and earbuds have so many functions that many interactions are digital by default. What does a good affordance look like in the digital world? If good affordances are ones that suit the nature of the interaction, what happens when the interactions are finger (or mouse pointer) on a flat, glass surface?</p>
<h2 id="the-evolution-of-affordances">The evolution of affordances</h2>
<p>Designers of early computers had to figure out what good digital affordances looked like. Most built clues into interfaces based on familiar physical objects: things stored in your computer’s memory are called files, and files are grouped into folders. How do you use a real-world folder? You open it. So, we can easily find the right command for accessing our digital folders because it’s labeled “open.” These affordances have been around for more than 70 years.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn4" id="fnref4">4</a></sup></p>
<p>Some designers had to reckon with entirely new functions, ones that didn’t have any real-world equivalent. For instance, how do you represent a hyperlink — a piece of text that fluidly joins two documents together? Tim Berners-Lee, inventor of the World Wide Web, had to figure it out. He chose a blue underline. But there’s no reason why blue means “link”:</p>
<blockquote>
<p>I think the first WWW client … used just underline to represent [a] link, as it was a spare emphasis form which isn’t used much in real documents. Blue came in as browsers went color — I don’t remember which was the first to use blue.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn5" id="fnref5">5</a></sup></p>
</blockquote>
<p>In the early days of the web, hundreds of affordances were coined this way. The URL for a page goes at the top. Text appears in a vertically scrolling column. A dropdown menu has a downward-pointing triangle next to it. Your mouse cursor is a slanted triangle with a tail, and when you hover over a link it looks like Mickey Mouse’s glove.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn6" id="fnref6">6</a></sup></p>
<p>Most of these affordances don’t have any relationship to the physical characteristics of the interaction they mediate. But remove them from a website, application, or interface, and users get disoriented, frustrated, and unproductive.</p>
<p>This is a second way of thinking about good affordances: instead of being useful because they are natural, some affordances are useful because they’re norms. Designers employ commonly recognized icons, patterns, labels, and layouts to make it easy for new users to find and utilize functionality. As Jakob Nielsen puts it:</p>
<blockquote>
<p>Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn7" id="fnref7">7</a></sup></p>
</blockquote>
<p>This circular definition underscores how important it is for digital interface designers to understand affordances. In fact, how a designer sees, uses, understands, and breaks the rules of affordances is a telling sign of their experience and abilities.</p>
<h2 id="how-designers-use-affordances">How designers use affordances</h2>
<p>Early in a designer’s career, they’ll <strong>use affordances</strong> even without knowing. That’s how I got started in design: I copied other designer’s work as a starting point, instead of starting from scratch. I had no idea why certain elements worked the way they did — but by emulating more experienced designers, I could take a shortcut past my lack of knowledge.</p>
<p>But design enough of the same kind of thing — t-shirts, band posters, MySpace pages — and you’ll start to recognize common elements. <strong>Recognizing affordances</strong> might not come with a detailed understanding of the <em>why</em>, but at least many inexperienced designers can identify the <em>what</em>.</p>
<p><strong>Understanding affordances</strong> comes from a place of curiosity. This means questioning affordances — why are links blue? Why is most text left-aligned? Why are user avatars usually cropped into circles? Sometimes the answers to these questions are rooted in psychology, biology, anthropology, or technology.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn8" id="fnref8">8</a></sup></p>
<p>But affordances sometimes exist for no obvious reason. As I use the same affordances over and over, I think, “is this really the right way to do things?” As the internet enters its fourth or fifth decade,<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn9" id="fnref9">9</a></sup> many designers are <strong>abandoning affordances</strong> once taken for granted. Google, for example, is in the middle of <a href="https://www.wired.com/story/google-chrome-kill-url-first-steps/" target="_blank" rel="noopener">a battle to kill the URL</a>, one of the few remaining affordances that distinguish a web page from an app.</p>
<p>Finally, as old affordances are being left behind, designers are <strong>inventing new affordances</strong> to take their place. Small touchscreens have become the dominant mode of interaction with digital interfaces,<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn10" id="fnref10">10</a></sup> and designers created new ways of indicating functionality. The “hamburger” menu is one example: three horizontal lines indicates where to tap to expand a menu, something only required on small screens where some elements have to be hidden.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/everyday-design-1.jpg" alt="A hamburger menu, a meatball menu, and a bento box menu" /><figcaption>A hamburger menu, a meatball menu, and a bento box menu</figcaption></figure>
<h2 id="affordances-everywhere">Affordances everywhere</h2>
<p>Understanding the correct application of affordances is one of the most fundamental jobs of designers of functional things. This won’t change anytime soon: as long as we’re interacting with the world around us, designers will need to maintain a mental library of affordances.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn11" id="fnref11">11</a></sup></p>
<p>Affordances are the hidden language of interface design. Using affordances wrong can stunt a company’s growth, as Snapchat famously discovered.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fn12" id="fnref12">12</a></sup> Using them right has returns in <a href="https://articles.uie.com/three_hund_million_button/" target="_blank" rel="noopener">millions</a>, <a href="https://articles.uie.com/beyond_ux_tipping_point/" target="_blank" rel="noopener">billions</a>, and <a href="https://www.nngroup.com/articles/intranet-usability-the-trillion-dollar-question/" target="_blank" rel="noopener">trillions</a> of dollars.</p>
<p>For that reason, affordances are, and will always be, the things of everyday design.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>When it was first used, “affordance” had nothing to do with design. In the popular 1979 book <em>The Ecological Approach to Visual Perception,</em> James J. Gibson defined an affordance as something the environment offers an individual. Norman borrowed the word for <em>The Design of Everyday Things</em>, shifting the definition to mean the potential uses of an object as perceived by its user. Norman went on to tweak this definition further, but for where this essay is concerned we’ll keep things simple and stick to the most common interpretation. <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Norman, Donald A. <em>The Design of Everyday Things. Revised and Expanded edition</em>, p. 11. New York, New York: Basic Books, 2013. <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Interaction Design Foundation, “Affordances,” <a href="https://www.interaction-design.org/literature/topics/affordances" target="_blank" rel="noopener">https://www.interaction-design.org/literature/topics/affordances</a> (last accessed 28 July 2020). <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Barnard, G. A., and L. Fein, “Organization and Retrieval of Records Generated in a Large-Scale Engineering Project,” <em>International Workshop on Managing Requirements Knowledge</em>, Vol. 1, 1958, p. 59, doi:10.1109/AFIPS.1958.75. <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Curiously, attempts at styling web pages to resemble physical pages didn’t stick. Berners-Lee himself was fond of an early web browser that had a parchment-paper background and used a “embossed” affordance for links, making it look like they were raised out of the page. Tim Berners-Lee, “Frequently Asked Questions by the Press - Tim BL,” WC3, <a href="https://www.w3.org/People/Berners-Lee/FAQ.html" target="_blank" rel="noopener">https://www.w3.org/People/Berners-Lee/FAQ.html</a> (last accessed 19 July 2020). <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>The slanted triangle originated in Xerox Parc’s introduction of the<a href="http://bitsavers.trailing-edge.com/pdf/xerox/parc/techReports/VLSI-81-1_The_Optical_Mouse.pdf" target="_blank" rel="noopener"> optical mouse pointer</a>. The Mickey Mouse hand’s origins are harder to trace, but<a href="https://ux.stackexchange.com/questions/52503/who-created-the-mac-mickey-pointer-cursor" target="_blank" rel="noopener"> may have started with Apple’s HyperCard software</a>. <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>Jakob Nielsen, “Jakob’s Law of Internet User Experience,” Nielsen Norman Group, <a href="https://www.nngroup.com/videos/jakobs-law-internet-ux/" target="_blank" rel="noopener">https://www.nngroup.com/videos/jakobs-law-internet-ux/</a> (last accessed 28 July 2020). <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn8" class="footnote-item"><p>In the case of left-aligned text, it’s all of the above. Left-aligned (ragged right) text was popularized in the early 20th century by designers like the German Jan Tschichold and Swiss as part of the ideologically-charged “new typography” movement. New technology enabled more flexible mechanical typesetting, and the European designers used left-aligned text to separate their work from previous typographical norms. More recently, studies have shown that left-aligned text is easier to read and recall: see Margaret Gregory’s and E. C. Poulton’s article “<a href="https://www.tandfonline.com/doi/abs/10.1080/00140137008931157" target="_blank" rel="noopener">Even versus Uneven Right-hand Margins and the Rate of Comprehension in Reading</a>” in <em>Ergonomics</em> and David R. Thompson’s paper “<a href="https://files.eric.ed.gov/fulltext/ED337749.pdf" target="_blank" rel="noopener">Reading Print Media: The Effects of Justification and Column Rule on Memory.</a>” <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref8" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn9" class="footnote-item"><p>The word “internet” was first used by Vint Cerf to describe a TCP/IP network in 1974. That date puts the internet’s age in 2020 at 46. The internet as we know it today — hypertext in web browsers — was first described by Tim Berners-Lee in 1989, making the internet just 31 years old, a veritable spring chicken compared to Cerf’s version. <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref9" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn10" class="footnote-item"><p>StatCounter, “Mobile and tablet internet usage exceeds desktop for first time worldwide,” <a href="https://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide" target="_blank" rel="noopener">https://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide</a> (last accessed 28 July 2020). <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref10" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn11" class="footnote-item"><p>Maybe one day we’ll have a real catalogue to look through, an <em>OED</em> of affordances, and it’ll be on every designer’s bookshelf. <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref11" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn12" class="footnote-item"><p>Nellie Bowles, “Snap to Tweak Snapchat’s Redesign After Users Complain,” The New York Times, 1 May 2018, <a href="https://www.nytimes.com/2018/05/01/technology/snapchat-redesign-snap-earnings.html" target="_blank" rel="noopener">https://www.nytimes.com/2018/05/01/technology/snapchat-redesign-snap-earnings.html</a>. <a href="https://matthewstrom.com/writing/the-things-of-everyday-design/#fnref12" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Collaborative design research
2020-07-12T00:00:00Z
https://matthewstrom.com/writing/collaborative-design-research/
<figure data-type="image"><img src="https://matthewstrom.com/images/collaborative-1.jpg" alt="" /></figure>
<p>I spend a lot of my day talking to myself. “Maybe this whole experience should just be a chat interface,” I think while brushing my teeth. “What if that component didn’t have borders?” I ask to nobody while cooking dinner. The office-less office doesn’t help; I’m nostalgic for folks walking by and seeing what’s on my screen, offering an unsolicited comment or saying later, “Ah, so <em>that’s</em> what you had zoomed in at 800% yesterday.” Besides, at the moment, Simple Health has a design team of one — me — so there aren’t any Slack threads for the latest font trends or design Twitter drama.</p>
<p>Even when I was on larger teams in real offices, design felt lonely. It took constant effort to create space for designers to share their work and safely give and receive critique. Creativity requires vulnerability, and designers spend most of their day exposed to scrutiny and interpretation. Collaboration between designers always yields great results, but it doesn’t come naturally, or easily.</p>
<p>And then there’s collaboration between designers and non-designers. To productively co-create with colleagues and customers requires steel-plated emotional armor. Even the best designers leave stakeholder workshops needing a hug. Once, when my boss asked me to lead a capital-D capital-S Design Sprint with a group of non-designers, I felt my life get shorter by a few months.</p>
<p>So over the years I’ve developed tools and techniques for opening up the design process to more folks in the safest way (emotionally and mentally) possible. I’ve run almost every one at Simple Health over the last six months. They’ve helped to bridge the gap between the isolation of the design process and the emotional intensity of collaboration.</p>
<p>I’d like to share one of these tools with you. Specifically, one that makes <strong>design research</strong> more collaborative. Broadening the community of research on your team not only improves the quality of the final design, but also builds empathy and trust with folks you might not otherwise have a relationship with.</p>
<h2 id="why-design-research%3F">Why design research?</h2>
<p>Research isn’t the most common place for designers to collaborate. No, that distinction goes to critique (or review), that dreaded step of the design process where the designer has to offer her work up to folks for scrutiny and judgement. As a collaborative tool, critique has been sufficiently analyzed and how-to’d. I’ve written a few essays on the subject:</p>
<ul>
<li><a href="https://matthewstrom.com/writing/critique-vs-review/" target="_blank" rel="noopener">A brief guide to design feedback</a></li>
<li><a href="https://matthewstrom.com/writing/feedback/" target="_blank" rel="noopener">How to get the best design feedback from your team</a></li>
<li><a href="https://matthewstrom.com/writing/feedback-revisited/" target="_blank" rel="noopener">Towards better creative feedback</a></li>
</ul>
<p>And there’s a couple of books I’d recommend if you’re interested in going deeper on critique:</p>
<ul>
<li><a href="https://matthewstrom.com/reading/articulating-design-decisions/" target="_blank" rel="noopener"><em>Articulating Design Decisions</em></a></li>
<li><a href="https://matthewstrom.com/reading/discussing-design/" target="_blank" rel="noopener"><em>Discussing Design</em></a></li>
</ul>
<p>So this essay isn’t about critique. It’s about design research, the part at the <em>beginning</em> of the creative process, a phase where the stakes for collaboration are low and there isn’t any work to critique.</p>
<p>Where collaboration is concerned, focusing on the beginning of the process has a few advantages.</p>
<p><strong>In the research phase, it’s easier to identify and discuss assumptions.</strong> Every participant in the design process — designer or not — brings some assumptions to the table. We all have some unvalidated notions of best practices, based on intuition or experience, not proven by research or data. At best, assumptions can be shortcuts to good design. At worst, they are blindspots that threaten to undermine our work.</p>
<p>As the design process rolls along, the line between unvalidated assumptions and validated ones gets blurred. When you’ve invested in a solution based on one of those unvalidated assumptions, it’s hard to take an honest look at its foundation for cracks.</p>
<p>Early collaborative research serves as a safe space to explore assumptions without the specter of sunk cost.</p>
<p><strong>Generating questions and research topics is easier for non-design collaborators.</strong> I’ve spent a lot of time building up clout and rapport with my team. I want to be the expert, to have folks solicit my input, to be trusted to make the right decision. But when a project gets to the critique phase, it’s hard to square that role with the importance of incorporating feedback from all collaborators, experts or not.</p>
<p>That’s why the beginning of a project is ideal for collaboration: during the research phase, everyone is a beginner. Nobody is expected to have the answers, so we focus on generating questions instead. At this point, inexperience is a strength; asking the very most basic questions can lead to the best insights. It’s much easier to make space for non-design collaborators in early research than it is in later critiques.</p>
<p><strong>It sets the tone for the rest of the project.</strong> There have been projects where, in the late stages of design, I realized we didn’t have enough collaborators. This sucks. Trying to bring in new stakeholders or designers for feedback can be painful when those collaborators haven’t been involved the whole time. Correcting course in the later stages of a project is a monumental task.</p>
<p>Promoting collaboration in the research phase ensures that your collaborators are along for the ride. It sets expectations that you’ll be including them every step of the way, and creates accountability — accountability is one of the biggest positive motivational drivers of collaboration.</p>
<h2 id="range-rover">Range Rover</h2>
<p>I’ve always been on the hunt for a way to efficiently include an entire company in a design project. How can I give hundreds of people a megaphone for their ideas without the result being completely incomprehensible?</p>
<p>My current approach is a pretty good start. It’s a survey called Range Rover.</p>
<p>The goal of Range Rover is to have a large number of people evaluate a design or set of designs without needing to articulate precisely-worded ideas. There’s only one prompt on the survey: in the version I ran most recently, the prompt was “Please evaluate Simple Health’s current branding.”</p>
<p>The survey itself is a series of <strong>range inputs</strong>: range inputs consist of a slider that can move freely between two extremes. In the case of Range Rover, the two extremes are pairs of opposite adjectives: hot vs. cold, lighthearted vs. serious, soft vs. hard, and so on.</p>
<p>When I first ran this survey, I wrote all the adjectives myself. But I found that even the process of coming up with adjectives to test is a fun way to collaborate with stakeholders. Which goes to show: you can <em>always</em> start collaborating earlier.</p>
<p>Code the survey like this: the value of the adjective on the left is 0, on the right is 1. The slider starts at neutral, halfway between (0.5). The survey-taker shouldn’t see the exact value of the slider as they move it.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/collaborative-design-research/#fn1" id="fnref1">1</a></sup></p>
<figure data-type="image"><img src="https://matthewstrom.com/images/collaborative-2.jpg" alt="An example of a range input" /><figcaption>An example of a range input</figcaption></figure>
<p>It’s quick to fill out: most folks will fill out a survey of 15 pairs of adjectives in less than two minutes. I put a gif of a dancing cat on the “Thank you page,” which is always a hit.</p>
<p>The lightweight nature of the survey means hundreds of collaborators (thousands? I’ve never tried) can contribute.</p>
<p>Once you get those hundreds of results, how do you use the data? Well, it’s important to try and tell a story with the data. To that end, there’s a few tools at your disposal.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/collaborative-3.jpg" alt="An example of the output of a range slider, visualized" /><figcaption>An example of the output of a range slider, visualized</figcaption></figure>
<h3 id="average-value-(aka-mean)">Average value (aka mean)</h3>
<p>The easiest calculation to do is to simply average all the results for a given adjective pair. What you’ll get is a nice democratically-elected result. Say our slider has the word “quirky” on the left side and “serious” on the right. A slider pushed by most participants towards the left will yield an average (or, mean, as my high school math teacher would have us all know) like 0.15. You can say something like, “on average, participants think our brand is quirky.”</p>
<p>But averages aren’t the most informative kind of information. You’re rolling all of the data up into a single insight burrito; it’s a nice snack, but it’s hard to tell what all the individual ingredients are.</p>
<p>Spicier wisdom comes from deeper investigation.</p>
<h3 id="variance">Variance</h3>
<p>Variance is, essentially, the level of disagreement between individual data points. For an adjective pair, <em>low variance</em> means that most people put the slider in the same place. <em>High variance</em> means there was a higher spread of values. The higher the variance is, the less confident you can be that the mean is a good representative of the group’s assessment.</p>
<p>Most spreadsheet software (Excel, Google Sheets, etc.) will calculate variance for you automatically.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/collaborative-4.jpg" alt="An example of the high variance and low variance with the same mean" /><figcaption>An example of the high variance and low variance with the same mean</figcaption></figure>
<p>I think variance is fascinating: data with the same mean can have a different variance, which is just one example of how data can hide valuable insights. Variance tells a compelling story, one of agreement or (most likely) disagreement. If you limit your analysis to averages, you’ll lose the individual, human aspect of the data you’ve gathered.</p>
<h3 id="modality">Modality</h3>
<p>Modality is a measure of how many “groups” there are in a data set. A bell curve is an example of <strong>unimodal,</strong> or one-group data. Data sets can have two groups, three, or more — because our survey isn’t multiple-choice, we need to look at modality to find any naturally-occurring groups.</p>
<p>Finding modality usually requires visualizing your data with a line or a bar chart.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/collaborative-5.jpg" alt="Two graphs with the same variance and same mean but different modality" /><figcaption>Two graphs with the same variance and same mean but different modality</figcaption></figure>
<p>Here’s something wild: data with the <strong>same mean</strong> and <strong>same variance</strong> can have <strong>different modality</strong>. For instance, your data might have high variance — at first glance, you think that people don’t agree on the answer at all. But on further investigation, you might see that there are two tightly-grouped clusters. There’s actually <em>low</em> variance inside those clusters; there are two groups who agree with themselves but disagree with each other. This happens most often along organizational lines; for instance, the marketing team might see the brand in one light, whereas the engineering team has a different perspective.</p>
<h2 id="the-wisdom-of-the-crowd">The wisdom of the crowd</h2>
<p>Including a broad range (get it?) of collaborators in gathering design research is just one step on the road to a more inclusive design process. But the step I look forward to the most is sharing the results of the research with the participants (and even non-participants). It’s great to reflect on how individual data points fit into a larger narrative.</p>
<p>Sharing your research can be a matter of simply summing everything up in an email or a Word/Google Doc. You can have a read-out meeting where you walk folks through the results. Or you could build a pretty website, like I tend to do when I have too much time on my hands.</p>
<p>Regardless of the form it takes, the aggregated output of your collaborative research is likely to be more insightful than any of its individual data points. This is a phenomenon called “the wisdom of the crowd,” in which the judgement of a group tends to be more accurate, reliable, or useful than the input of any of its individuals.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/collaborative-design-research/#fn2" id="fnref2">2</a></sup></p>
<p>The knowledge you share from your design research is a springboard for conversations about design. Encourage people who participated to share their reaction to the output: my favorite question is, “Did this surprise you?”</p>
<p>—</p>
<p>Collaborative design is tough. There’s all sorts of hurdles in the way of an inclusive and transparent environment for teamwork. At the very least, collaboration is a gauntlet for the ego; I usually come out of group design work with more than a few bruises. But in the safer waters of design research, I’ve found that my colleagues are kinder and more constructive. With care and intention, you can use the research phase as the pattern and foundation for powerful positive collaboration throughout the design process.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Results will be funky decimal values like 0.248983. That’s OK — the more open-ended the input, the more diverse (and useful) the results will be. <a href="https://matthewstrom.com/writing/collaborative-design-research/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://en.wikipedia.org/wiki/Wisdom_of_the_crowd" target="_blank" rel="noopener">https://en.wikipedia.org/wiki/Wisdom_of_the_crowd</a> <a href="https://matthewstrom.com/writing/collaborative-design-research/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
A design API in practice
2020-07-06T00:00:00Z
https://matthewstrom.com/writing/design-api-in-practice/
<figure data-type="image"><img src="https://matthewstrom.com/images/design-api-5.jpg" alt="" /></figure>
<div class="c--bg-highlight-1 l--pad-s l--rounded-corners">
<strong>Update 6/12/22:</strong> The links to the implmentation of the API are currently broken. I'm updating some dependencies to make it work again.
</div>
<p>A few months ago I wrote an essay titled “<a href="https://matthewstrom.com/writing/design-apis" target="_blank" rel="noopener">Design APIs: the evolution of design systems</a>”. The API model for design systems resonated with design systems practitioners. The response blew me away.</p>
<p>Since then, I’ve had lots of conversations (and <a href="https://www.digitale-leute.de/interview/design-systems-into-design-api/" target="_blank" rel="noopener">one podcast</a>) about the concept of a design API. One question comes up almost every time: what does a design API actually look like? Good question.</p>
<p>So I built one. It’s up and running at <a href="https://matthewstrom.com/api" target="_blank" rel="noopener">https://matthewstrom.com/api</a>. It’s very rudimentary, but it makes an excellent proof of concept. In this essay I’ll describe how it works, how I built it, and what it can (and can’t yet) do.</p>
<div class="c--bg-gray-1 l--pad-s l--rounded-corners-l">
<strong>Heads up:</strong> This essay is more technical than usual; some terms may be unfamiliar. The first time a technical term appears, I'll use <a class="definition--link">dotted underline</a> to link to a definition. A full glossary appears at the bottom.
</div>
<h2 id="how-it-works">How it works</h2>
<p>My design API consists of a few libraries and frameworks, connected by pieces of my own code:</p>
<ol>
<li>The foundation of the <a id="src-api" href="https://matthewstrom.com/writing/design-api-in-practice/#api" class="definition--link">API</a> is an <a id="src-express-js" href="https://matthewstrom.com/writing/design-api-in-practice/#express-js" class="definition--link">Express.js</a> application, running as a <a id="src-serverless-function" href="https://matthewstrom.com/writing/design-api-in-practice/#serverless-function" class="definition--link">serverless function</a> via <a id="src-netlify-functions" href="https://matthewstrom.com/writing/design-api-in-practice/#netlify-functions" class="definition--link">Netlify Functions</a> .</li>
<li>The API accepts and responds to <a id="src-json" href="https://matthewstrom.com/writing/design-api-in-practice/#json" class="definition--link">JSON</a> queries, using <a href="https://matthewstrom.com/writing/design-api-in-practice/#graphql" id="src-graphql" class="definition--link">GraphQL</a> to interpret requests and compose responses.</li>
<li>The application uses <a id="src-theo" href="https://matthewstrom.com/writing/design-api-in-practice/#theo" class="definition--link">Theo</a> to read and compose <a id="src-design-token" href="https://matthewstrom.com/writing/design-api-in-practice/#design-token" class="definition--link">design tokens</a> on the fly.</li>
</ol>
<p>I won’t go through the technical implementation of those libraries and frameworks in this essay, and after this point they’re not that important. I wrote a companion piece for this essay, and CSS-Tricks was kind enough to publish it; <a href="https://css-tricks.com/building-serverless-graphql-api-in-node-with-express-and-netlify/" target="_blank" rel="noopener">check out that article</a> if you’re interested in the nuts and bolts. If you’ve never written a line of code, keep reading — let’s take a more abstract look.</p>
<hr />
<p>Like most <a id="src-design-system" href="https://matthewstrom.com/writing/design-api-in-practice/#design-system" class="definition--link">design systems</a>, the one that styles this website has a broad range of colors (gray, blue, green, yellow, and red). Each color has a range of lightness values running from 10 to 90 in increments of 10. So when I refer to <code>blue-50</code>, I mean the blue color in the middle of the lightness range.</p>
<p>The design API allows me to <svg class="l--mar-top-none" fill="none" xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm-.248-21.09h2.601V22h-2.768V11.536h-.076l-2.998 1.88V10.96l3.24-2.052z" fill="currentColor"></path></svg> <strong>request the design token</strong> for <code>blue-50</code>. The token contains some information about the color, including the exact hsl color code in a format ready to be used by CSS to style the page.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/design-api-1.jpg" alt="A high-level overview of a design API" /><figcaption>A high-level overview of a design API</figcaption></figure>
<p>When I <svg class="l--mar-top-none" fill="none" xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.724-8h-9.332v-1.994l4.66-4.315c1.189-1.144 1.828-1.86 1.828-2.902 0-1.15-.857-1.866-2.007-1.866-1.195 0-1.988.767-1.982 2.02h-2.627c-.006-2.57 1.88-4.213 4.628-4.213 2.806 0 4.66 1.604 4.66 3.874 0 1.489-.722 2.716-3.413 5.17l-1.912 1.874v.09h5.497V22z" fill="currentColor"></path></svg> <strong>get the token back</strong>, I can use it however I want. If I’m working with old-school CSS, that value might go in a custom property. If I’m using new-fangled CSS-in-JS, maybe it’ll become a variable or a property passed to a component.</p>
<p>But what’s really going on inside the API? Let’s peek inside.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/design-api-2.jpg" alt="A closer look at the internal process of the design API" /><figcaption>A closer look at the internal process of the design API</figcaption></figure>
<p>Inside the API, there are three processes happening. The first <svg class="l--mar-top-none" fill="none" xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm-2.367-10.985L11.662 22H8.696l4.519-13.09h3.567L21.294 22H18.33l-.972-2.985h-4.724zm2.314-7.114l-1.61 4.953h3.323l-1.61-4.953h-.103z" fill="currentColor"></path></svg> <strong>looks up</strong> the token from a database (<code>blue-50</code>). In my rudimentary proof-of-concept, the database is a lowly text file sitting on the server. An API with more traffic will probably need a proper database.</p>
<p>The second process <svg class="l--mar-top-none" fill="none" xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm.78-8h-5.592V8.91h5.241c2.89 0 4.347 1.393 4.347 3.355 0 1.54-1.004 2.506-2.365 2.812v.128c1.489.07 2.876 1.24 2.876 3.177 0 2.084-1.566 3.618-4.506 3.618zm-2.825-5.74v3.477h2.257c1.547 0 2.218-.645 2.218-1.63 0-1.08-.825-1.847-2.154-1.847h-2.32zm0-5.114v3.241h2.052c1.132 0 1.975-.626 1.975-1.662 0-.946-.696-1.579-1.924-1.579h-2.103z" fill="currentColor"></path></svg> <strong>transforms</strong> the token into whatever format I’ve requested. In my demo API, I’m using Theo to accomplish this. There are other tools like <a href="https://amzn.github.io/style-dictionary" target="_blank" rel="noopener">Style Dictionary</a> which have the same features; you could even build your own transformer. The premise is: take the value stored in the database (In my example, the value of <code>blue-50</code> is <code>#274dd8</code>) and transform it into the desired format.</p>
<p>This is the magic of design tokens: if we want the color in a web-friendly format, we transform it to rgb (<code>rgb(39, 77, 216) </code>). If we are using the color in an iOS app, we need a UIColor object (<code>red: 0.15, green: 0.30, blue: 0.85, alpha: 1.00</code>). Android apps need an 8-digit hex value with the alpha channel first (<code>#ff274dd8</code>) and so on.</p>
<p>The third process <svg class="l--mar-top-none" fill="none" xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm.238-21.27c3.03 0 5.318 1.739 5.683 4.762h-2.8c-.211-1.438-1.304-2.314-2.819-2.314-2.026 0-3.356 1.553-3.356 4.276 0 2.8 1.349 4.277 3.337 4.277 1.476 0 2.576-.806 2.838-2.205l2.8.012c-.3 2.41-2.327 4.641-5.683 4.641-3.503 0-6.098-2.455-6.098-6.724 0-4.283 2.64-6.725 6.098-6.725z" fill="currentColor"></path></svg> <strong>formats</strong> the response. Here we can choose to wrap the output token’s (or list of tokens’) value in some extra code to make it easier to incorporate into our own program or use case. For instance: if I’m working on a documentation site that uses SASS, it’d be nice to have the color formatted as a SASS variable (<code>$blue-50: rgb(39, 77, 216)</code>). But if my production app uses CSS custom properties, the formatting should be in vanilla CSS ( <code>:root {--blue-50: rgb(39, 77, 216);</code>). At the moment, my own proof-of-concept can only format the response as JSON - more on that later.</p>
<p>After looking up, transforming, and formatting the token, the API <svg class="l--mar-top-none" fill="none" xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.724-8h-9.332v-1.994l4.66-4.315c1.189-1.144 1.828-1.86 1.828-2.902 0-1.15-.857-1.866-2.007-1.866-1.195 0-1.988.767-1.982 2.02h-2.627c-.006-2.57 1.88-4.213 4.628-4.213 2.806 0 4.66 1.604 4.66 3.874 0 1.489-.722 2.716-3.413 5.17l-1.912 1.874v.09h5.497V22z" fill="currentColor"></path></svg> sends the token back to me. This all happens in milliseconds.</p>
<hr />
<p>Here’s a few examples of requests and responses:</p>
<h3 id="example-1%3A-list-all-tokens">Example 1: list all tokens</h3>
<p><strong>Request</strong></p>
<pre class="language-graphql"><code class="language-graphql"><span class="token punctuation">{</span><br /> <span class="token object">tokens</span> <span class="token punctuation">{</span><br /> <span class="token property">name</span><br /> <span class="token property">value</span><br /> <span class="token property">category</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p><strong>Response</strong></p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"tokens"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br /> <span class="token punctuation">{</span><br /> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"gray-10"</span><span class="token punctuation">,</span><br /> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"rgb(249, 247, 246)"</span><span class="token punctuation">,</span><br /> <span class="token property">"category"</span><span class="token operator">:</span> <span class="token string">"color"</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span><br /> <span class="token punctuation">]</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>This example lists all of the tokens in the database. This might be useful for a documentation site or Sketch/Figma plugin. An optional filter can be passed in (<code>tokens(category:"color")</code>) to only return a subset of tokens.</p>
<h3 id="example-2%3A-get-a-single-token">Example 2: Get a single token</h3>
<p><strong>Request</strong></p>
<pre class="language-graphql"><code class="language-graphql"><span class="token punctuation">{</span><br /> <span class="token property-query">token</span><span class="token punctuation">(</span><span class="token attr-name">name</span><span class="token punctuation">:</span> <span class="token string">"blue-50"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token property">value</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p><strong>Response</strong></p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"token"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"rgb(39, 77, 216)"</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>This is how you’d retrieve a single token. It’s useful for styling an element directly, or looking up metadata about the token.</p>
<h3 id="transform-a-token">Transform a token</h3>
<p><strong>Request</strong></p>
<pre class="language-graphql"><code class="language-graphql"><span class="token punctuation">{</span><br /> <span class="token property-query">token</span><span class="token punctuation">(</span><span class="token attr-name">name</span><span class="token punctuation">:</span> <span class="token string">"blue-50"</span><span class="token punctuation">,</span> <span class="token attr-name">transform</span><span class="token punctuation">:</span> <span class="token string">"android"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token property">value</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p><strong>Response</strong></p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"token"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"#ff274dd8"</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>This is an example of how you can request a token in a specific format - in this case, the eight-digit hex code used in Android app development.</p>
<h2 id="one-to-one-%E2%86%92-one-to-many">One-to-one → One-to-many</h2>
<p>There’s an idea buried in my approach and implementation of a design API that warrants a closer look. It’s the move to a <strong>one-to-many</strong> model for design tokens.</p>
<p>In my <a href="https://matthewstrom.com/writing/design-apis" target="_blank" rel="noopener">previous design API essay</a>, I used the metaphor of a phone book to describe modern design systems:</p>
<blockquote>
<p>A dedicated design system team is required [to maintain a design system] because a design system is only a low-level abstraction of the design process.
This means the design system’s documentation — the website or wiki or design file that describes it — is its most useful application.</p>
</blockquote>
<blockquote>
<p>… Think of this like a phone book. A phone book is a low-level abstraction of a phone number directory. To find someone’s number, you flip through the pages of the phone book until you find their name. A whole team of people produces the phone book, printing and distributing it on a regular basis to ensure it is up to date.</p>
</blockquote>
<p>And later, I mentioned that while tools like Theo and Style Dictionary are innovative in their own right, they are still just printing phone books:</p>
<blockquote>
<p>However, [design tokens] are generated and distributed in bulk. If you only need one token, you need to import the whole library. That means they’re still a type of phone book, albeit one that is formatted in a way that software can easily read.</p>
</blockquote>
<p>A package generated by Theo contains many copies of each design token, pre-formatted for each platform and format the end users need. When a new use case emerges, a whole new package needs to be compiled and distributed. As users’ needs grow, so does the package size. This is a <strong>many-to-many</strong> model: many tokens, many use cases.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/design-api-3.jpg" alt="A many-to-many model" /><figcaption>A many-to-many model</figcaption></figure>
<p>The database of my design API (it’s just a text file, really … you can see the source file <a href="https://github.com/ilikescience/mhs11/blob/master/src/assets/tokens/tokens.json" target="_blank" rel="noopener">here</a>) contains just a single copy of each token. Custom-tailored copies are generated on demand — whenever a request to the API is made. Handling new use cases doesn’t require a new print run: a new query or argument is added to the API and each end user continues to get request what they need. This is a <strong>one-to-many</strong> model: one token, many use cases.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/design-api-4.jpg" alt="A one-to-many model" /><figcaption>A one-to-many model</figcaption></figure>
<p>The one-to-many model is a powerful evolution of design tokens, one that enables a small team (or, in my case, a single person) to support a huge number of use cases and client applications.</p>
<h2 id="limitations">Limitations</h2>
<p>I’m proud of my little proof-of-concept design API, but there’s a lot it can’t do yet. Most of its limitations are due to my own limitations as a developer — if you have ideas for how to solve these, get in touch!</p>
<ol>
<li><strong>It can only serve JSON.</strong> Currently, I can only respond with a JSON containing the desired code. This means that unless the client or end user can use JSON directly, an extra processing step is needed. Ideally, I’d be able to provide whatever format the client application wants. For example: even though I can query the API with a URL like <code>http://matthewstrom.com/api?query={tokens{value}}</code>, I can’t use that URL in a css import or tag like <code><link href="http://matthewstrom.com/api?query={tokens{value}}"></code>.</li>
<li><strong>It’s read-only.</strong> To keep things simple in this proof-of-concept, I didn’t implement any way of updating tokens via the API. This is fairly straightforward with GraphQL — since the API operates on the one-to-many model, there’s only one token to update.</li>
<li><strong>It has a limited set of transformation options.</strong> when building the API, I started off with Style Dictionary handling the token transformations. Style Dictionary has a ton of built-in transformation options, allowing for many use cases out of the box. However, Style Dictionary is geared towards producing large, static bundles of tokens, not single tokens on demand. So, I switched to Theo. Theo is also intended to produce bundles of tokens in static files, but has enough wiggle room to be adapted to this token-on-demand approach. The downside is that Theo has far fewer transformation options built in.</li>
</ol>
<h2 id="where-do-we-go-from-here%3F">Where do we go from here?</h2>
<p>There’s lots of room for experimentation and exploration. Here’s a list of ideas for future updates:</p>
<ul>
<li>More tokens: spacing, typography, shadows, and easing</li>
<li>Aliases: component-based naming and theme-based naming</li>
<li>Accessibility: programmatically listing accessible color combinations</li>
<li>Components: providing specifications for higher-order design decisions</li>
</ul>
<p>There’s also inspiration to be found in the experimental API for Shopify’s <a href="https://polaris.shopify.com/resources/graphql-api" target="_blank" rel="noopener">Polaris design system</a>.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-api-in-practice/#fn1" id="fnref1">1</a></sup></p>
<p>As for the future of design APIs in general: it’s closely tied to the work being done to write a specification for design tokens, and the <a href="https://www.w3.org/community/design-tokens/" target="_blank" rel="noopener">W3C design tokens community group</a> is just getting started. Having a stable specification for design tokens will make it possible to write applications that consume tokens without needing to coordinate directly with the services that provide tokens. This kind of collaboration is what made the web so resilient and flexible, so I have high hopes for the future of design tokens as a standardized web technology.</p>
<p>An <a href="https://jxnblk.com/blog/interoperability/" target="_blank" rel="noopener">interoperable</a>, <a href="https://johno.com/guessable/" target="_blank" rel="noopener">guessable</a> design API is the foundation of a fully networked design system, one that takes the rote and error-prone aspects out of designers and engineers collaborating and iterating on design. It’s the next step in the evolution of design systems.</p>
<hr />
<p><span class="t--family-sans t--weight-bold">Definitions</span></p>
<dl class="definition--list">
<div class="definition" id="api">
<dt class="definition--term">API</dt>
<dd class="definition--description">
Stands for “Application Programming Interface.” A reliable way for two or more programs
to cooperate. It allows programs to work together despite differences in hardware,
language, architecture, or other operating constraints. <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-api" class="footnote-backref">↩︎</a>
</dd>
</div>
<div class="definition" id="design-system">
<dt class="definition--term">Design system</dt>
<dd class="definition--description">
Collection of code and design specifications that enables faster and more consistent
collaboration between designers and developers. <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-design-system" class="footnote-backref">↩︎</a>
</dd>
</div>
<div class="definition" id="design-token">
<dt class="definition--term">Design token</dt>
<dd class="definition--description">
Self-contained piece of code describing a single design decision, like a color or a
typeface. <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-design-token" class="footnote-backref">↩︎</a>
</dd>
</div>
<div class="definition" id="express-js">
<dt class="definition--term">Express.js</dt>
<dd class="definition--description">
Lightweight javascript library for building web applications.
<a href="https://expressjs.com/" target="_blank">Link to official Express.js website ↗</a> <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-express-js" class="footnote-backref">↩︎</a>
</dd>
</div>
<div class="definition" id="graphql">
<dt class="definition--term">GraphQL</dt>
<dd class="definition--description">
Language for querying APIs, designed enable web applications to make fewer queries.
<a href="https://graphql.org/" target="_blank">Link to official GraphQL website ↗</a> <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-graphql" class="footnote-backref">↩︎</a>
</dd>
</div>
<div class="definition" id="json">
<dt class="definition--term">JSON</dt>
<dd class="definition--description">
Open standard file format that uses human-readable text to store and transmit
data. <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-json" class="footnote-backref">↩︎</a>
</dd>
</div>
<div class="definition" id="netlify-functions">
<dt class="definition--term">Netlify Functions</dt>
<dd class="definition--description">
A service that deploys, hosts, and scales serverless functions.
<a href="https://www.netlify.com/products/functions/" target="_blank">Link to Netlify Functions site ↗</a> <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-netlify-functions" class="footnote-backref">↩︎</a>
</dd>
</div>
<div class="definition" id="serverless-function">
<dt class="definition--term">Serverless function</dt>
<dd class="definition--description">
Piece of code that runs — paradoxically — on a server. In contrast to traditional
functions, serverless functions are managed by large platforms like Amazon and allow
developers to deliver small pieces of functionality to end users without worrying about
complicated infrastructure management. <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-serverless-function" class="footnote-backref">↩︎</a>
</dd>
</div>
<div class="definition" id="theo">
<dt class="definition--term">Theo</dt>
<dd class="definition--description">
Library that converts design tokens into a variety of formats. Theo was developed by
Salesforce and was one of the first open-source examples of design tokens in use.
<a href="https://github.com/salesforce-ux/theo" target="_blank">Link to Theo on GitHub ↗</a> <a href="https://matthewstrom.com/writing/design-api-in-practice/#src-theo" class="footnote-backref">↩︎</a>
</dd>
</div>
</dl><hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>However, based on my experiments with it, the API seems to be mostly a way of communicating with an underlying CMS (for example, the design tokens query only provides a single list of values tailored for the web). <a href="https://matthewstrom.com/writing/design-api-in-practice/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Ethics for designers in the real world: Snapchat’s Juneteenth filter
2020-06-28T00:00:00Z
https://matthewstrom.com/writing/ethics-snapchat/
<figure data-type="image"><img src="https://matthewstrom.com/images/snapchat-1.jpg" alt="Photo by Agê Barros on Unsplash" /><figcaption>Photo by <a href="https://unsplash.com/@agebarros?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Agê Barros</a> on <a href="https://matthewstrom.com/s/photos/%22cracked-phone%22?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></figcaption></figure>
<p>Growing up a white kid in the south, Juneteenth was on my list of ‘other kids’ holidays.’ Some kids had Ash Wednesday and All Saints’ Day, some kids had the first day of deer season, and some kids had Juneteenth. Juneteenth had the added obscurity of happening outside of the school year; there were no classroom decorations, special lessons, or school plays to give me any hints as to what it was about. That’s why I knew more about Kwanzaa than I did Juneteenth.</p>
<p>This year I celebrated Juneteenth for the first time. A lot of white people did. A lot of companies and brands did, too. Some made Juneteenth a paid holiday. Others donated their proceeds to charities, or used their platforms to promote Black-owned business. Snapchat — and Snap, its parent company — celebrated by releasing a filter.</p>
<div class="l--mar-top-s">
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This SnapChat <a href="https://twitter.com/hashtag/Juneteenth?src=hash&ref_src=twsrc%5Etfw">#Juneteenth</a> filter is...um...interesting. <br /><br />Smile to break the chains? Okay then. <a href="https://t.co/Wyob3kT3ew">pic.twitter.com/Wyob3kT3ew</a></p>— Mark S. Luckie (@marksluckie) <a href="https://twitter.com/marksluckie/status/1273938129129529345?ref_src=twsrc%5Etfw">June 19, 2020</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<p>The backlash was immediate. The “smile to break the chains” filter wasn’t just a minor moment of tone-deafness from Snap — it was a burning dumpster in the town square. The company apologized, and took the filter down. But the damage was done.</p>
<p>How could this have happened? Where did Snap go wrong?</p>
<p>Ethics often seems like other kid’s holidays, an abstract concept you only hear about in school. Sometimes, though, you get to see how ethics impacts peoples’ lives in real time. By applying some of the ideas from <em><a href="https://matthewstrom.com/ethics" target="_blank" rel="noopener">Ethics for designers</a>,</em> we can learn a lot from Snap’s mistakes, and make our own design process more ethically rigorous.</p>
<h2 id="snap-and-deontology">Snap and Deontology</h2>
<p>Oona King, Snap’s vice president of diversity and inclusion, sent an apology email to employees the weekend after Juneteenth.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn1" id="fnref1">1</a></sup></p>
<p>A few passages are worth exploring in detail (emphasis is King’s).</p>
<blockquote>
<p>Snap released a Lens to commemorate Juneteenth that many people felt was offensive because it prompted users to ‘smile’ to break the chains of slavery. Snap was also accused of failing to include Black perspectives in the creation of our Lens to mark Juneteenth — a date often celebrated by African-Americans to mark the end of slavery. After reviewing how the process unfolded, it’s very clear that Black Snap team members were fully involved in every stage of developing and approving the Lens and that, in hindsight, we should have developed a more appropriate Lens.</p>
</blockquote>
<blockquote>
<p>… We reviewed the Lens from the standpoint of Black creative content, made by and for Black people, so did not adequately consider how it would look when used by non-Black members of our community. What we also did not fully realize was a) that a ‘smile’ trigger would necessarily include the actual <strong>word</strong> “smile” on the content; and b) that people would perceive this as work created by <strong>White</strong> creatives, not Black creatives.</p>
</blockquote>
<blockquote>
<p>… The mischaracterization on social media — that White executives at a tech company failed, yet again, to include Black perspectives — is completely untrue. What is true is that regardless of our diverse backgrounds, we are all human, and humans make mistakes.</p>
</blockquote>
<p>King’s focus throughout the letter is on the process that Snap used to create the filter. In ethics terms, this is a <strong>deontological</strong> mindset.</p>
<p>“Deontology” is a really unwieldy word (if I had a magic ethics wand, I would change it to something more memorable). In <em><a href="https://matthewstrom.com/ethics/deontology" target="_blank" rel="noopener">Ethics for designers part III</a>,</em> I defined deontology like this:</p>
<blockquote>
<p>According to deontology, ethics is all about how you act. Deontologists search for the right set of rules to define and govern moral behavior … The deontological view is that logic and reason are all you need to determine whether actions are right or wrong.</p>
</blockquote>
<p>King’s response to critics is that the process isn’t the problem. "Black Snap team members were fully involved in every stage,” she says, explaining that the people who suggested the “smile” trigger were Black — in fact, there were White team members who raised concerns. The work was seen “from the standpoint of Black creative content, made by and for Black people.”</p>
<h2 id="snap-and-consequentialism">Snap and Consequentialism</h2>
<p>But if Snap’s process was logical and thoughtful, what went wrong? If Snap did everything right, there would be no news stories, no apology letter, no reaction videos on social media. It’s ethics in motion: in the messy world of real decision making, you can’t figure out the right course of action just by following a logical process. That’s why it’s important to understand <strong>consequentialism.</strong></p>
<p>Consequentialism differs from deontology in almost every way. Again, from <em><a href="https://matthewstrom.com/ethics/consequentialism" target="_blank" rel="noopener">Ethics for designers</a>:</em></p>
<blockquote>
<p>Deontology says that there is a logically consistent set of rules that can determine whether some act is ethical or not. Consequentialism says “it depends.” A rule that looks ethical in one case might result in unethical outcomes in another case. Consequentialism is based on an intuition: the best action now is whatever makes the world best in the future.</p>
</blockquote>
<p>Designing its Juneteenth filter, Snap followed an ethical-sounding set of rules (call them maxims if you’re feeling saucy). Chief among these was the rule to <strong>include Black perspectives in the making of new technology and creative content.</strong> That’s a great rule. Everyone should follow it. Snap’s mistake was their belief that following this rule would guarantee an ethical outcome.</p>
<p>If this was one isolated incident, it might be easier to chalk it up to Snap’s learning process. But Snap has been here before. In 2016, it released a filter for 4/20 that mapped Bob Marley’s face onto users. Like with its Juneteenth filter, Snap included Black perspectives in its creation, this time working with the Marley estate. And like the Juneteenth filter, the backlash was swift: it was immediately called out as digital blackface.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn2" id="fnref2">2</a></sup></p>
<div class="l--mar-top-s">
<blockquote class="twitter-tweet l--mar-top-m" data-dnt="true"><p lang="en" dir="ltr">oh god <a href="https://twitter.com/Snapchat?ref_src=twsrc%5Etfw">@snapchat</a> you didn’t <a href="https://t.co/lBZUHZKODg">pic.twitter.com/lBZUHZKODg</a></p>— Casey Johnston (@caseyjohnston) <a href="https://twitter.com/caseyjohnston/status/722773182734802944?ref_src=twsrc%5Etfw">April 20, 2016</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<p>Later that year, Snap released and quickly recalled a filter that painted squinted eyes and rosy cheeks onto users, distorting their face into a caricature reminiscent of racist portrayals of Asians. A Snap spokesperson took the deontological view: “Lenses are meant to be playful and never to offend.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn3" id="fnref3">3</a></sup></p>
<div class="l--mar-top-s">
<blockquote class="twitter-tweet l--mar-top-m" data-dnt="true"><p lang="en" dir="ltr">.<a href="https://twitter.com/Snapchat?ref_src=twsrc%5Etfw">@Snapchat</a> wanna tell me why u thought this yellowface was ok?? <a href="https://t.co/sgpW4AFPsE">pic.twitter.com/sgpW4AFPsE</a></p>— grace (@tequilafunrise) <a href="https://twitter.com/tequilafunrise/status/763060616877608960?ref_src=twsrc%5Etfw">August 9, 2016</a></blockquote>
</div>
<p>When it comes to Snapchat’s filters, consequences matter.</p>
<h2 id="learning-from-snap%E2%80%99s-mistakes">Learning from Snap’s mistakes</h2>
<p>Just because Snap included Black perspectives in its creative process did not guarantee their output wouldn’t be harmful to Black users. There are a few ways we can learn from this outcome to make our own design process more ethically-aware.</p>
<h3 id="1.-be-aware-of-the-assumptions-in-your-process-(and-correct-them-if-they%E2%80%99re-wrong)">1. Be aware of the assumptions in your process (and correct them if they’re wrong)</h3>
<p>Snap’s example isn’t a death knell for deontology.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn4" id="fnref4">4</a></sup> A defender of deontology might say, “Snap should have followed a <em>different</em> set of rules. That would have guaranteed ethical outcomes.”</p>
<p>So, what rules can we introduce to improve Snap — and, by extension, our own work?</p>
<p>Here’s a start: your users will be the ultimate judge of your work. Bring them into the design process — especially users who are especially at risk of being harmed, like marginalized and under-represented groups.</p>
<h3 id="2.-everyone-makes-mistakes-(virtue-alone-won%E2%80%99t-save-you)">2. Everyone makes mistakes (virtue alone won’t save you)</h3>
<p>King’s recognizes that Snap’s Juneteenth filter was a mistake. She also highlighted the pain of being accused of racism.</p>
<p>King has previously discussed her own experiences with racism as a Black Jewish woman.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn5" id="fnref5">5</a></sup> She was the second black woman elected to Parliament, and has made a career of championing diversity in organizations like the UK’s Channel 4 and YouTube.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn6" id="fnref6">6</a></sup> But what she said in her email to Snap employees is true: we’re all human, and we all make mistakes.</p>
<p>Nobody can be perfectly virtuous.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn7" id="fnref7">7</a></sup> No set of rules will work in every case. It’s important to recognize and plan for that fact. That’s why it’s important to build out your ethical toolkit: practices like ethical premortems allow you to play out the possible consequences of your decisions, no matter how unlikely. For a good starting point, check out Shannon Vallor’s <em><a href="https://www.scu.edu/ethics-in-technology-practice/ethical-toolkit/" target="_blank" rel="noopener">Ethical Toolkit for Engineering/Design Practice</a></em>.</p>
<h3 id="3.-measure-what-matters-(and-hold-yourself-accountable)">3. Measure what matters (and hold yourself accountable)</h3>
<p>Many large tech companies report their own diversity data: Google, Facebook, and Twitter all publish a yearly report of their staff broken down by gender and ethnicity. But not Snap. Snap’s CEO Evan Spiegel said in an interview with CNBC that “Snapchat looks like most other technology companies in terms of representation,” but that he wouldn’t release the data. Instead, Snap is “inventing” a new way to release its diversity reports.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn8" id="fnref8">8</a></sup></p>
<p>The influential management thinker Peter Drucker was an avid proponent of the power of measurement. But one of his most influential quotes of all time “if you can’t measure it, you can’t manage it,” is a misquote; he never actually said it. His take on measurement was much more nuanced:</p>
<blockquote>
<p>Work implies not only that somebody is supposed to do the job, but also accountability, a deadline and, finally, the measurement of results — that is, feedback from results on the work and on the planning process itself.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn9" id="fnref9">9</a></sup></p>
</blockquote>
<p>Measuring the ethical impact of your work, and being accountable to that measurement, is part of designing for equitable outcomes. Snap does measure the diversity of their workplace, and makes that data available to its own employees. <sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ethics-snapchat/#fn10" id="fnref10">10</a></sup> But when it comes to diversity, lack of public accountability takes all the force out of measurement.</p>
<p>Snap is just one case for ethically-aware design among many; we can learn a lot from analyzing what went wrong. Comparing consequentialism to deontology shows that in Snap’s case, the Juneteenth filter wasn’t just a mistake, but the result of an ethically unsound decision making process, one that didn’t anticipate the harm it would cause to users. Using tools like ethical accounting and premortems can help design teams avoid the mistakes that Snap seems to be repeating over and over.</p>
<p>And reading case studies like this will hopefully mean there are less of them written in the future.</p>
<hr />
<p><em>Special thanks to Josh Petersel for feedback on an earlier version of this essay.</em></p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>You can read the full email on <a href="https://www.theverge.com/2020/6/21/21298251/snap-juneteenth-filter-lens-oona-king-statement-snapchat" target="_blank" rel="noopener">The Verge</a>. <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Kwame Opam, “Snapchat Enables Tasteless Bob Marley Selfie Lens for 4/20,” The Verge (The Verge, April 20, 2016), https://www.theverge.com/2016/4/20/11467160/snapchat-bob-marley-selfie-lens-420. <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Sarah Emerson, “Snapchat Doesn’t Think Its ‘Yellowface’ Filter Is Racist,” Vice, August 10, 2016, https://www.vice.com/en_us/article/yp3q5b/snapchat-doesnt-think-its-yellowface-filter-is-racist-asian-americans. <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>“Death Knell for Deontology” is my new indie band name. <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Oona King, “At Last! It’s Cool to Be Mixed Race (Which Is Handy Because I’m African, American, Jewish, Geordie, Irish, Scottish and Hungarian),” Baroness King of Bow - Oona King - Baroness King of Bow, April 25, 2010, https://www.oonaking.com/in-the-press/136-at-last-it-s-cool-to-be-mixed-race-which-is-handy-because-i-m-african-american-jewish-geordie-irish-scottish-and-hungarian.html. <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Fun fact: she is also a Baroness. <a href="https://en.wikipedia.org/wiki/Oona_King" target="_blank" rel="noopener">https://en.wikipedia.org/wiki/Oona_King</a> <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>I wrote a whole essay on <a href="https://matthewstrom.com/ethics/virtue-ethics" target="_blank" rel="noopener">virtue ethics</a>, including the reasons it was later superseded by deontology and consequentialism. <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn8" class="footnote-item"><p>Rachel Sandler, “CEO Evan Spiegel Defends Not Publicly Releasing Snapchat’s Diversity Reports,” Forbes (Forbes Magazine, June 12, 2020), https://www.forbes.com/sites/rachelsandler/2020/06/11/ceo-evan-spiegel-defends-not-publicly-releasing-snapchats-diversity-reports/. <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref8" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn9" class="footnote-item"><p>Zak Paul, “Measurement Myopia,” The Drucker Institute, July 4, 2013, https://web.archive.org/web/20180303182316/<wbr />https://www.druckerinstitute.com/2013/07/measurement-myopia/. <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref9" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn10" class="footnote-item"><p>Sandler, “CEO Evan Spiegel Defends Not Publicly Releasing Snapchat’s Diversity Reports” <a href="https://matthewstrom.com/writing/ethics-snapchat/#fnref10" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Know thyself
2020-06-08T00:00:00Z
https://matthewstrom.com/ethics/know-thyself/
<p>Throughout the series, we’ve covered four of the major ethical movements in philosophy. Here’s a brief recap:</p>
<ol>
<li><strong><a href="https://matthewstrom.com/ethics/virtue-ethics" target="_blank" rel="noopener">Virtue ethics</a></strong> is the belief that well-being comes from having the right personality traits or dispositions. The key to virtue ethics is finding those special skills that, when practiced faithfully, result in ethical behavior.</li>
<li><strong><a href="https://matthewstrom.com/ethics/deontology" target="_blank" rel="noopener">Deontology</a></strong> is the study of duty. According to deontology, acting ethically is all about the action itself, not the intention or consequences of the action.</li>
<li><strong><a href="https://matthewstrom.com/ethics/consequentialism" target="_blank" rel="noopener">Consequentialism</a></strong> says that the outcomes of our actions are what matters most. Whether you had good intentions or did the most logical thing, your actions are only good if they have positive results.</li>
<li><strong><a href="https://matthewstrom.com/ethics/care-ethics" target="_blank" rel="noopener">Care ethics</a></strong> is the view that relationships are central to determining what is and is not ethical. Our actions are ethical only when they fulfill our obligation to care — unselfishly — for others.</li>
</ol>
<p>These schools of ethics are not the only ones. There are thousands of years’ worth of texts refining, refuting, and revitalizing a dizzying array of ethical frameworks. But I hope that starting with these four gives you a solid foundation on which to explore ethical and moral philosophy.</p>
<h2 id="how-do-we-apply-ethics-to-design%3F">How do we apply ethics to design?</h2>
<p>In addition to exploring the historic approaches to ethics, we also considered tools for making more ethical design decisions.</p>
<ol>
<li><strong>Design principles</strong> are ways of designing more consistently and taking some of the mental overhead out of designing with ethics in mind.</li>
<li><strong>Dogfooding <strong>and</strong> premortems</strong> are ways of directly investigating the ethics of design decisions. These tools help designers gain perspective.</li>
<li><strong>The double bottom line</strong> is a framework that makes ethics more measurable. Measuring outcomes highlights the consequences of design decisions.</li>
<li><strong>Qualitative user research</strong> and <strong>ethical community building</strong> emphasize the relationships that are fundamental to design. These techniques focus not only on the relationships between designers and users, but also on the relationships between users.</li>
</ol>
<p>Again, this is a short list. Kat Zhou has an excellent <a href="https://www.designethically.com/toolkit" target="_blank" rel="noopener">list of tools for ethical design</a>; Jet Gispen has <a href="https://www.ethicsfordesigners.com/tools-1" target="_blank" rel="noopener">another list</a>; Maheen Sohail created a <a href="https://drive.google.com/file/d/0B_BduP_zkbNWZWVRSkpxNGtTRG8/view" target="_blank" rel="noopener">printable PDF toolkit</a> for ethical design. Each of these devices can be used in tandem or on their own.</p>
<h2 id="what%E2%80%99s-the-point%3F">What’s the point?</h2>
<p>As I wrote this series, I often discussed the ethics of design with my friends. Some of them are designers, others aren’t. But the same questions came up again and again: what’s the point of ethical design? Will it really make a difference?</p>
<p>These are good questions. They lead me to a challenging conjecture: designers can’t singlehandedly save the world from harmful experiences.</p>
<p>That’s because design doesn’t happen in a vacuum. There are always other stakeholders, business interests, user needs, and strategic goals involved. An ethical designer can’t have much impact if they’re surrounded by unethical partners.</p>
<p>So why read 10,000 words on ethics if there’s nothing to gain?</p>
<p>Let’s go back to Socrates.</p>
<h2 id="what-we-know-and-what-we-don%E2%80%99t">What we know and what we don’t</h2>
<p>Socrates’ friend Chaerephon once went to Delphi and asked the oracle there: “Is anyone wiser than Socrates?” Her response: “No one.”</p>
<p>This puzzled Socrates. “I have no wisdom,” he claimed at his trial, “small or great.” All he had to do was find someone wiser than him, and he’d have proven the oracle wrong. So he went to meet with a highly-regarded politician (“he was thought wise by many, and wiser still by himself”).</p>
<p>After talking with the politician for a while, Socrates has a revelation: “Well, although I do not suppose that either of us knows anything really beautiful and good, I am better off than he is — for he knows nothing, and thinks that he knows. I neither know nor think that I know.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/know-thyself/#fn1" id="fnref1">1</a></sup></p>
<p>It’s one thing to know. It’s another to think you know. And wisest yet: to know that you don’t know.</p>
<p>So instead of focusing on what we know, here’s something we don’t: We don’t know with certainty what the impact of ethical design will be. We’ll only really know when we fail, when we see another story in the news about the negative consequences of new technology.</p>
<p>Critics of ethics in design stop there. Designers aren’t responsible for making sure technology is ethical, they say. And if we aren’t responsible, we have nothing to gain by learning and practicing ethical design.</p>
<p>But admitting that we don’t know the impact of ethical design, as Socrates realized, gives us an advantage. Nobody knows. At least we know that we don’t know. And that’s a great place to start.</p>
<h2 id="the-future-of-design">The future of design</h2>
<p>Knowing nothing, we can at least imagine two futures for design: one in which designers learn and incorporate ethics into their work, and one where they don’t.</p>
<p>The downside to ethical design is that it’s hard. It takes work — in the hours of our time we spend learning and applying ethical frameworks and philosophies, and in the emotional and spiritual energy required to be compassionate toward the people who are impacted by our work. Worse, there’s no clear return on investment in terms of dollars and cents; getting the support of your company to pursue ethical design is an uphill battle against the bottom line.</p>
<p>But if we practice, if we share what we learn, we’ll get better. Big, hairy questions — ones that once seemed like a bottomless pit — will look more tamable — like we can approach them with confidence. Practicing ethical design is a skill, a muscle, a compounding investment. It might not ever be easy, but the more we try, the greater our impact will be.</p>
<p>If we don’t practice ethical design, we will avoid that effort. In the most pessimistic case — in which, as critics claim, ethical design doesn’t make a difference — we can have those hours of our lives back.</p>
<p>But if ethical design does matter, the upside is nearly limitless. One designer can make a meaningful difference in the experiences of thousands, millions, or billions of people. Some design decisions — like the layout of a city block — matter for tens, even hundreds of years.</p>
<p>Or millions of years. In the late 1970s, a team of NASA designers created a set of plaques that is currently hurtling through space at 38,612 miles per hour on board the Voyager spacecraft. Today, it’s nearly 14 billion miles from Earth, at the very edge of our solar system. The material carries messages from Earth to anyone or anything that finds it — messages of love, peace, beauty, and humanity.</p>
<p>It’s easy to see the impact of ethical design at these massive scales of time and space. It’s hard to care when you’re in a meeting to discuss the placement of a button on a screen in an app with a stakeholder who just won’t let their quarterly OKRs go.</p>
<p>At the core of these day-to-day debates is the conflict between the known and the unknown. Or, between what Donald Rumsfield called the “known unknown” — we know that we don’t know what the impact of our ethical work will be — and what Slavoj Žižek called the “unknown known” — we try to ignore the knowledge that even small decisions have ethical implications.</p>
<p>Unethical decisions flourish where the known unknown is left unexplored and the unknown known goes unacknowledged. That’s the reason why ethical design is important. Designers are involved in conversations at every level of every business decision — from pixel-perfect product tweaks to long-term strategy and roadmap planning.</p>
<p>After learning the ethical tools and frameworks in these essays, I hope that you have the right knowledge and vocabulary to bravely face the challenging conversations of ethical design.</p>
<p>Worst case, the difficulty is temporary.</p>
<p>Best case, the benefit is endless.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Plato, <em>Apology</em>, translated by Benjamin Jowett, The Internet Classics Archive, Daniel C. Stevenson, Web Atomics, last accessed March 18, 2020: <a href="http://classics.mit.edu/Plato/apology.html" target="_blank" rel="noopener">http://classics.mit.edu/Plato/apology.html</a>. <a href="https://matthewstrom.com/ethics/know-thyself/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Care ethics
2020-05-26T00:00:00Z
https://matthewstrom.com/ethics/care-ethics/
<p>Care ethics is closely related to the rise of feminist voices in philosophy starting in the 1970s. Writers at the time were inspired by the vanguard of feminism — Mary Astell in 1694, Mary Wollstonecraft in 1792, and Harriet Taylor Mill in 1869. They pointed out the dominance of men in the history of ethics and sought to understand the impact that such a one-sided approach might have on ethical theories. Care ethics emerged as the counterpoint to consequentialism and deontology. It emphasizes relationships — not tabulated outcomes or logical rulebooks — as the primary test of ethical behavior.</p>
<h3 id="a-note-from-the-author">A note from the author</h3>
<p>Before I dive into the history and practice of care ethics, I should address a few things.</p>
<p>I’m a white, cisgender, heterosexual male living in a country and a community that provide people like me significant privilege at the exclusion of others. I was conflicted about writing an essay on feminist ethics. I asked friends: is it right for me to try? Can I faithfully represent the beliefs of people who have experienced kinds of oppression and exclusion that I’ll never know?</p>
<p>I have good friends. They encouraged me to give it my all.</p>
<p>So, a disclaimer: This essay is my honest attempt at highlighting the ethical frameworks first stated by women in the 18th, 19th, and 20th centuries. I hope I do their ideas justice. If you’re interested in learning more about care ethics, please read the original texts; I’ll provide links in the footnotes.</p>
<h2 id="what-is-care-ethics%3F">What is care ethics?</h2>
<p>Care ethics puts relationships at the center of ethical decision making. And relationships are built on care: relationships with distant strangers might consist of a general concern, whereas relationships with your family and friends might involve much more direct care-giving and care-receiving.</p>
<p>According to supporters of care ethics, care is universal: no matter what culture or community you belong to, you experience care. This fact makes care a great foundation for ethics.</p>
<p>The ultimate test of ethical behavior, then, is how that behavior expresses care. We can be selfish, only caring for ourselves. We can be selfless, only caring for others. <strong>According to care theory, ethical behavior strikes a balance between selfishness and selflessness. This is “moral maturity, wherein the needs of both self and other are understood.”</strong><sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn1" id="fnref1">1</a></sup></p>
<h2 id="a-history-of-care-ethics">A history of care ethics</h2>
<p>While the label “feminist ethics” didn’t appear until the 1970s, there is a rich history of women calling out the gender-specific flaws of philosophy. For example, Mary Astell’s 1694 book <em>A Serious Proposal to the Ladies</em> and its 1967 sequel call out “those deep background philosophical and theological assumptions which deny women the capacity for improvement of the mind.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn2" id="fnref2">2</a></sup> In <em>A Vindication of the Rights of Woman</em>, Mary Wollstonecraft criticized the contemporary interpretation of virtue ethics — that ethics applied differently to men and women: “I here throw down my gauntlet, and deny the existence of sexual virtues.” She continues, “women, I allow, may have different duties to fulfill; but they are human duties, and the principles that should regulate the discharge of them … must be the same”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn3" id="fnref3">3</a></sup></p>
<p>In the 1980s, two authors picked up Wollstonecraft’s mantle and crafted complementary theories of ethics.</p>
<h3 id="carol-gilligan-and-gender">Carol Gilligan and gender</h3>
<p>Carol Gilligan, in her landmark 1982 work <em>In a Different Voice: Psychological Theory and Women’s Development</em>, illustrated gender biases in the works of Lawrence Kohlberg by revisiting one of Kohlberg’s studies, the “Heinz dilemma.” Kohlberg’s study focused on two eleven-year-old children, Jake and Amy.</p>
<p>In the Heinz dilemma, the children are asked whether a man (“Heinz”) should steal an overpriced drug to save his wife’s life. Jake sees the Heinz dilemma as a math problem: the right to life is greater than the right to property. Jake reasons that Heinz ought to steal the drug. Amy disagrees, believing Heinz shouldn’t steal the drug. If Heinz is caught and goes to prison, she explains, his wife will be even worse off. Amy sees the dilemma as a narrative of relationships, not as a logic puzzle.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn4" id="fnref4">4</a></sup></p>
<p>Kohlberg concluded that Jake is further along in his moral development than Amy. Gilligan, a fellow researcher in the study, sharply criticized this view:</p>
<blockquote>
<p>While current theory brightly illuminates the line and the logic of the boy’s thought, it casts scant light on that of the girl. The choice of a girl whose moral judgments elude existing categories of developmental assessment is meant to highlight the issue of interpretation rather than to exemplify sex differences per se. Adding a new line of interpretation, based on the imagery of the girl’s thought, makes it possible not only to see development where previously development was not discerned but also to consider differences in the understanding of relationships without scaling these differences from better to worse.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn5" id="fnref5">5</a></sup></p>
</blockquote>
<p>Gilligan concluded that a new understanding of moral development was needed.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/care-2.jpg" alt="" /></figure>
<h3 id="nel-noddings-and-care">Nel Noddings and care</h3>
<p>In 1984, Nel Noddings published <em>Caring</em>; it was the kind of framework that Gilligan called for. In <em>Caring,</em> Noddings defined relationships as having two fundamental roles: the “one-caring” and the “cared-for.” Ethical action, she claimed, comes from two intertwined motives: our natural inclination to care for others, and our memories of being cared for.</p>
<p>One of the central themes of <em>Caring</em> is what Noddings called “engrossment.” To be engrossed in caring means taking an active interest in the needs of another. Noddings specified that engrossment doesn’t have to be “intensive [or] pervasive in the life of the one-caring,” but “it must occur.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn6" id="fnref6">6</a></sup></p>
<p>To Noddings, behaving ethically requires being engrossed in the needs of others and caring for them. She describes ethical caring as happening when you care out of a sense of duty or obligation, not just out of convenience or self-interest. Therefore, immoral behavior happens when you fail to meet your obligations. “[When] one intentionally rejects the impulse to care and deliberately turns her back on the ethical, she is evil, and this evil cannot be redeemed.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn7" id="fnref7">7</a></sup></p>
<h2 id="how-to-apply-care-ethics">How to apply care ethics</h2>
<p>In order to see design through the lens of care ethics, you have to first identify the relationships that exist in design.</p>
<p>First, there’s the relationship between the person doing the design and the person consuming the design — for digital products, we call these consumers users. The best way to understand the relationship between maker and consumer is through user research.</p>
<h3 id="qualitative-user-research">Qualitative User Research</h3>
<p>Once a given, the value of user research has recently been called into question by today’s growth-hungry startup culture. On one hand, being smarter about what you build can give your company a competitive advantage. On the other hand, user research can take time, money, and energy.</p>
<p>Uber made its stance on user research known in 2019 when it laid off 800 employees, including almost half its research team.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn8" id="fnref8">8</a></sup> <em>The Washington Post</em> reported:</p>
<blockquote>
<p>Executives inside Uber have told employees they will devote fewer costly resources to user experience and research — including teams who worked on those issues — and conduct more direct testing of in-app features for riders and drivers.</p>
</blockquote>
<blockquote>
<p>“We will deliberately rely less on user research for tactical features and instead rely more on experimentation,” Uber’s chief of product, Manik Gupta, wrote to employees in an email the day of this month’s layoffs. “We will focus on fewer projects with more direct business impact.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn9" id="fnref9">9</a></sup></p>
</blockquote>
<p>It’s debatable whether or not user research is the best way to assess the direct business impact of incremental product changes. But no amount of A/B testing will make an acceptable substitute for empathy.</p>
<p>As Erika Hall put it in <em>Just Enough Research</em>:</p>
<blockquote>
<p>You do user research to identify patterns and develop empathy. From a designer’s perspective, empathy is the most useful communicable condition: you get it from interacting with the people you’re designing for.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn10" id="fnref10">10</a></sup></p>
</blockquote>
<p>Empathy is another way to think about Noddings’ concept of engrossment; empathizing with your users corresponds to having an active interest in their needs.</p>
<p>User research studies don’t need to be lengthy, complex affairs. Jakob Nielsen and Tom Landauer showed that running a test with five users over three iterations will identify nearly 100% of usability issues.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn11" id="fnref11">11</a></sup> But that’s only the business case: going beyond the original research, I believe that talking to your users creates a lasting interest in their well-being.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/care-3.jpg" alt="Photo by Mathew Schwartz on Unsplash" /><figcaption>Photo by <a href="https://unsplash.com/@cadop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">Mathew Schwartz</a> on Unsplash</figcaption></figure>
<h3 id="ethical-community-building">Ethical community building</h3>
<p>Ties between designer and user aren’t the only relationships to consider. It’s possible — likely, even — that your work facilitates relationships between other people. If we want to design against the backdrop of care ethics, we have to understand those relationships.</p>
<p>An example: if you host a design conference, you are facilitating relationships between the conference’s attendees, speakers, vendors, and staff. To fulfill your obligation to care for those people — and to increase the likelihood they’ll care for each other — you need a code of conduct.</p>
<p>Ashe Dryden, a diversity advocate whose work has been featured in <em>The New York Times</em>, <em>Scientific American</em>, <em>Wired</em>, and on NPR, makes the case for a code of conduct:</p>
<blockquote>
<p>The people most affected by harassing or assaulting behavior tend to be in the minority and are less likely to be visible. As high-profile members of our communities, setting the tone for the event up front is important. Having visible people of authority advocate for a safe space for them goes a long way.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn12" id="fnref12">12</a></sup></p>
</blockquote>
<p>If you’re writing your own code of conduct, a great place to start is<a href="https://confcodeofconduct.com/" target="_blank" rel="noopener"> this template for conference organizers</a>, originally written by the organizers of JSConf.</p>
<p>Communities aren’t always bound by a physical space, a limited time, or a single topic. Online, communities can spread out in every direction, connecting people across physical and socioeconomic chasms. The designers of community platforms must scale their efforts to match the growth of their user base.</p>
<p>This<a href="https://community-covenant.net/" target="_blank" rel="noopener"> code of conduct template</a> for online communities was written by Coraline Ada Ehmke; use it to create more ethical relationships between members of your community.</p>
<h2 id="criticism-of-care-ethics">Criticism of care ethics</h2>
<p>As a modern ethical framework, commentary on care ethics reflects the multitude of perspectives in modern philosophy. Some critics — like Vanessa Siddle Walker and John Snarey — ask about intersectionality: how much of care ethics is reflected in the identities of white women like Gilligan and Noddings? How does care ethics work for people of different ages, races, genders, sexual orientations, disabilities, or classes?<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/care-ethics/#fn13" id="fnref13">13</a></sup></p>
<p>Care ethics also stops short of identifying specific actions that an ethical person should perform. Nel Noddings identifies an obligation to care for others — how similar is this to the obligations that Kant and other deontologists talked about? And if care ethics has no litmus test for ethical behavior, how is it that different from Aristotle’s virtue ethics?</p>
<p>You can see how theories of ethics can blend seamlessly into one another. It’s hard to see where one ends and the other begins.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Until recently, the history of philosophy has been written almost entirely by men. To move forward, we have to face a hard reality: we missed something. The threads of bias have already been sewn into the fabric of academic philosophy.</p>
<p>Care ethics is one attempt to untangle the gendered past of moral philosophy. It puts relationships at the center of ethics: whether or not you are acting ethically depends entirely on whether or not you’ve upheld your duty to care for others.</p>
<p>This is a powerful way to look at design. How well have we cared for the people that use our products? How have we enabled them to care for each other? The answers to these questions point the way to a more just, more equitable, more kind future.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><sup> </sup>Craig P. Dunn and Brian K. Burton, “Ethics of Care,” <em>Encyclopedia Britannica</em>, accessed February 1, 2020: <a href="https://www.britannica.com/topic/ethics-of-care" target="_blank" rel="noopener">https://www.britannica.com/topic/ethics-of-care</a>. <a href="https://matthewstrom.com/ethics/care-ethics/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Mary Astell, <em>A Serious Proposal to the Ladies</em> (Peterborough, Canada: Broadview Press, 2002). <a href="https://matthewstrom.com/ethics/care-ethics/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Mary Wollstonecraft, <em>A Vindication of the Rights of Woman</em>, edited by Carol H. Poston (New York: W.W. Norton and Company, 1988). <a href="https://matthewstrom.com/ethics/care-ethics/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p><sup> </sup>Maureen Sander-Staudt, “Care Ethics,” <em>Internet Encyclopedia of Philosophy</em>, accessed February 1, 2020: <a href="https://www.iep.utm.edu/care-eth/" target="_blank" rel="noopener">https://www.iep.utm.edu/care-eth/</a>. <a href="https://matthewstrom.com/ethics/care-ethics/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p><sup> </sup>Carol Gilligan, <em>In a Different Voice: Psychological Theory and Women’s Development</em>, reprint edition (Cambridge, MA: Harvard University Press, 2016). <a href="https://matthewstrom.com/ethics/care-ethics/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Nel Noddings, <em>Caring: A Feminine Approach to Ethics & Moral Education</em>, 2nd ed. (Berkeley: University of California Press, 2003). <a href="https://matthewstrom.com/ethics/care-ethics/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p><sup> </sup>Ibid. <a href="https://matthewstrom.com/ethics/care-ethics/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn8" class="footnote-item"><p>Elsa Ho, “Five Things UX Researchers Can Do Differently: A Reflection After Uber’s Lay-Off,” accessed February 3, 2020: <a href="https://medium.com/@elsaho/five-things-ux-researchers-can-do-differently-a-reflection-after-ubers-lay-off-9dd967148056" target="_blank" rel="noopener">https://medium.com/@elsaho/five-things-ux-researchers-can-do-differently-a-reflection-after-ubers-lay-off-9dd967148056</a>. <a href="https://matthewstrom.com/ethics/care-ethics/#fnref8" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn9" class="footnote-item"><p><sup> </sup>Faiz Siddiqui, “Inside the New Uber: Weak Coffee, Vanishing Perks and Fast-Deflating Morale,” accessed February 3, 2020: <a href="https://www.washingtonpost.com/technology/2019/09/30/inside-new-uber-weak-coffee-vanishing-perks-fast-deflating-morale/" target="_blank" rel="noopener">https://www.washingtonpost.com/technology/2019/09/30/inside-new-uber-weak-coffee-vanishing-perks-fast-deflating-morale/</a>. <a href="https://matthewstrom.com/ethics/care-ethics/#fnref9" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn10" class="footnote-item"><p>Erika Hall, <em>Just Enough Research</em> (New York City: A Book Apart, 2013). <a href="https://matthewstrom.com/ethics/care-ethics/#fnref10" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn11" class="footnote-item"><p><sup> </sup>Jakob Nielsen and Thomas K. Landauer: “A mathematical model of the finding of usability problems,” Proceedings of ACM INTERCHI ’93 Conference (Amsterdam, The Netherlands, April 24–29, 1993), pp. 206–213. <a href="https://matthewstrom.com/ethics/care-ethics/#fnref11" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn12" class="footnote-item"><p>Ashe Dryden, “Codes of Conduct 101 + FAQ,” Ashe Dryden & Programming Diversity, accessed February 3, 2020: <a href="https://www.ashedryden.com/blog/codes-of-conduct-101-faq#coc101why" target="_blank" rel="noopener">https://www.ashedryden.com/blog/codes-of-conduct-101-faq#coc101why</a>. <a href="https://matthewstrom.com/ethics/care-ethics/#fnref12" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn13" class="footnote-item"><p>Vanessa S. Walker and John R. Snarey, <em>Race-ing Moral Formation: African American Perspectives on Care and Justice</em> (New York: Teachers College Press, 2004). <a href="https://matthewstrom.com/ethics/care-ethics/#fnref13" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Bottom Line Up Front: write to make decisions faster
2020-05-17T00:00:00Z
https://matthewstrom.com/writing/bluf/
<figure data-type="image"><img src="https://matthewstrom.com/images/bluf.jpg" alt="" /></figure>
<p>On April 2nd, 2020, Brett Crozier, the USS <em>Theodore Roosevelt</em>’s commanding officer, was relieved of command. The Navy’s decision to remove Crozier stemmed from a message that the commander wrote to his superiors. The message concerned a developing emergency aboard the <em>Roosevelt</em>: 114 crew members had tested positive for COVID-19 among a total crew of 4,000. Without action, many more sailors would get sick.</p>
<p>The issue at hand wasn’t that Crozier sounded the alarm bell. It was how he did it: using an unclassified message that was quickly leaked to the press.</p>
<p>This essay isn’t about whether or not Crozier should have been dismissed. I’m sharing the story because while reading Crozier’s message, I came across a curious phrase: Bottom Line Up Front, or BLUF. Captain Crozier used BLUF at the beginning of his request to his superiors:</p>
<blockquote>
<p>BLUF: If required the USS THEODORE ROOSEVELT would embark all assigned Sailors, set sail, and be ready to fight and beat any adversary that dares challenge the US or our allies. The virus would certainly have an impact, but in combat we are willing to take certain risks that are not acceptable in peacetime. However, we are not at war, and therefore cannot allow a single Sailor to perish as a result of this pandemic unnecessarily. Decisive action is required now in order to comply with CDC and NAVADMIN 083/20 guidance and prevent tragic outcomes.</p>
</blockquote>
<p>Three and a half pages of supporting arguments follow, but true to its name, BLUF puts Crozier’s conclusions first.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/bluf/#fn1" id="fnref1">1</a></sup></p>
<p>This style of communication is bold. It doesn’t hedge. It’s not a summary; it states the document’s purpose in simple, unambiguous language. In a sense, it’s the opposite of most business communications.</p>
<p>Can businesses use BLUF? What would it take to put clarity over completeness? Does it leave room for vulnerability and candor?</p>
<p>Bottom Line Up Front: I think BLUF can and should be used in business communication like presentations, emails, memos, and documentation.</p>
<h2 id="where-does-bluf-come-from%3F">Where does BLUF come from?</h2>
<p>The phrase “bottom line up front” appears in a 100-page-long document with the dizzying title <em>Army Regulation 25–50: Information Management: Records Management: Preparing and Managing Correspondence</em>. It’s in Chapter 1: Preparing Correspondence, section IV: Effective Writing and Correspondence: The Army Writing Style, sub-section 36: Standards for Army writing, paragraph b. No, I am not making that up.</p>
<blockquote>
<p>Army writing will be concise, organized, and to the point. Two essential requirements include putting the main point at the beginning of the correspondence (bottom line up front) and using the active voice (for example, “You are entitled to jump pay for the time you spent in training last year”).<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/bluf/#fn2" id="fnref2">2</a></sup></p>
</blockquote>
<p>It also shows up in Air Force Handbook 33-337 (called, cryptically, <em>The Tongue and Quill</em>) for speakers, writers, and presenters:</p>
<blockquote>
<p>Organizing: get your bottom line up front (most of the time). In nearly every communication situation, you need to state your bottom line early in the message. In a direct or deductive approach, state your position, main point or purpose up front, then go into the details that support your main point. When you take a direct approach to communication, your audience is better prepared to digest the details of the message and logically make the connections in its own mind.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/bluf/#fn3" id="fnref3">3</a></sup></p>
</blockquote>
<p>A cursory search didn’t turn up any instance of BLUF in the US Navy’s regulations or documentation, but it seems that at some point there was a regular Navy newsletter called <em>Bottom Line: Up Front</em>.</p>
<p>While the US Military may have a claim on the phrase BLUF, they’re hardly the first organization to see the benefit of brevity in communication.</p>
<p>In 1940, Winston Churchill took a personal stake in the way the British War Cabinet communicated. He wrote a memo, titled “BREVITY,” which made the case for more efficient writing:</p>
<blockquote>
<p>To do our work, we all have to read a mass of papers. Nearly all of them are far too long. This wastes time, while energy has to be spent in looking for the essential points … [the result] may at first seem rough as compared with the flat surface of officialese jargon. But the saving of time will be great, while the discipline of setting out the real points concisely will prove an aid to clear thinking.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/bluf/#fn4" id="fnref4">4</a></sup></p>
</blockquote>
<h2 id="bottom-line-vs.-summary">Bottom line vs. Summary</h2>
<p>The bottom line is not a summary.</p>
<p>The purpose of a summary is to stand in for the whole document, to make it easy for a reader to glean important information. At the beginning of a document, a summary saves a reader time. Journalists often use this approach in news stories, writing in what they call<a href="https://owl.purdue.edu/owl/subject_specific_writing/journalism_and_journalistic_writing/the_inverted_pyramid.html" target="_blank" rel="noopener"> inverted pyramid</a> style. News stories written in inverted pyramid style begin with a paragraph that answers the five w’s: who, what, where, when, and why. The rest of the story builds context and reinforces these points, but laying the full narrative out in a few short sentences helps readers get the most information in the least amount of time.</p>
<p>Here’s an example from <em>The New York Times</em>:</p>
<blockquote>
<p>The harsh economic toll of the social distancing measures put in place to curb the spread of the pandemic was underscored Thursday when the Labor Department reported that another 6.6 million people had filed for unemployment benefits last week.</p>
</blockquote>
<p>In Captain Crozier’s memo, the bottom line is “Decisive action is required now.” This sentence doesn’t include the five w’s: there’s no mention of the epidemiological facts, the status of the <em>Roosevelt</em>’s crew, or historical examples of breaking Navy operating procedures.</p>
<p>The purpose of the bottom line is to capture the decisive moment of your argument, the sentence or two that most directly reflects your point of view. At the beginning of a document, the bottom line saves time by enabling the reader to respond immediately.</p>
<h2 id="how-to-use-bluf">How to use BLUF</h2>
<p>A decade ago, I was starting a business for the first time, a local music magazine called <a href="https://www.facebook.com/ElevenMagazine" target="_blank" rel="noopener">Eleven</a>. My co-founders and I had grand ambitions but zero experience, especially in selling advertising — a crucial function to surviving past the first issue.</p>
<p>We pitched our magazine to every local business in a 20-mile radius. I passionately described our mission, I touted the benefits of reaching local 18-to-25-year-olds, I smiled a lot. I left behind a meticulously designed media kit. For weeks, we didn’t sell a single ad.</p>
<p>And then I walked into Mangia Italiano, a dusty Italian restaurant and bar on a late-night block. I asked for the manager, took a deep breath, and started the pitch from the top.</p>
<p>The manager interrupted me immediately: “How much does it cost?”</p>
<p>I was determined to finish the pitch. I handed him the media kit and rate card but continued rattling off figures on disposable income and target demographics.</p>
<p>He ignored me. One look at the rate card, and he pulled out his checkbook. “I’ll take it.”</p>
<p>My first sale had nothing to do with my pitch. My well-rehearsed speech proclaiming the power of print media didn’t matter one bit. I had failed to understand that for local businesses, the bottom line is all that matters: Can we afford to run an ad? If not, let’s move on. Maybe next time.</p>
<p>Putting the bottom line (in my case, how much ads cost) up front allows your reader to make a decision much faster. If they’re busy, or time-constrained, or overloaded with information, taking time to structure your writing will pay dividends in trust, respect, and appreciation.</p>
<h2 id="with-a-grain-of-salt">With a grain of salt</h2>
<p>Of course, starting every email with a paragraph titled “BLUF” isn’t going to magically make your communication clearer. In the civilian world, where we don’t have 100-page guidebooks to dictate official communication patterns, communication requires lots of subtlety and self-awareness.</p>
<p>Being direct and getting straight to the point isn’t always the right approach. If you know your audience is already skeptical, putting the bottom line up front may cause the reader to ignore everything that comes after it.</p>
<p>But in the right circumstances, starting off your communication — email, presentation, or document — with the main point is powerful.</p>
<p>A presentation at work might open:</p>
<blockquote>
<p>Because of recent budget cuts, we’re changing our operational strategy. Starting next week, the design team will no longer hire consultants to advise us on branding. Instead, we’ll produce more positioning and strategy work in-house.</p>
</blockquote>
<p>Being up front with your bottom line puts a lot of pressure on those first few sentences. Without context, any ambiguity is subject to misinterpretation. If you’re like me, using BLUF means spending way more time on just a few word choices.</p>
<p>It may not be easy to immediately start using BLUF. If you typically communicate in a more conversational style, your colleagues might interpret your brevity as sudden coldness. If you’re already at a disadvantage due to office politics, gender bias, or cultural stereotypes, BLUF might not be the right approach.</p>
<p>But as we rely more on asynchronous communication without the benefit of face-to-face interaction, tools like BLUF will be valuable in saving time and energy that’s better spent on picking the right emoji reaction in Slack.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Matthias Gafni and Joe Garofoli, “Exclusive: Captain of aircraft carrier with growing coronavirus outbreak pleads for help from Navy,” <em>San Francisco Chronicle</em>, published March 31, 2020, updated April 9, 2020: <a href="https://www.sfchronicle.com/bayarea/article/Exclusive-Captain-of-aircraft-carrier-with-15167883.php" target="_blank" rel="noopener">https://www.sfchronicle.com/bayarea/article/Exclusive-Captain-of-aircraft-carrier-with-15167883.php</a>. <a href="https://matthewstrom.com/writing/bluf/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Department of the Army, <em>Army Regulation 25–50: Information Management: Records Management: Preparing and Managing Correspondence</em>, Chapter 1: Preparing Correspondence, section IV: Effective Writing and Correspondence: The Army Writing Style, sub-section 36: Standards for Army writing, paragraph b, p. 6: <a href="https://armypubs.army.mil/epubs/DR_pubs/DR_a/pdf/web/r25_50.pdf" target="_blank" rel="noopener">https://armypubs.army.mil/epubs/DR_pubs/DR_a/pdf/web/r25_50.pdf</a>. <a href="https://matthewstrom.com/writing/bluf/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Department of the Air Force, <em>The Tongue and Quill</em>, AFH 33-337, Chapter 6: Step 4 (Organize and Outline), p. 54, published May 27, 2015, updated November 2015, certified current July 27, 2016: <a href="https://static.e-publishing.af.mil/production/1/saf_cio_a6/publication/afh33-337/afh33-337.pdf" target="_blank" rel="noopener">https://static.e-publishing.af.mil/production/1/saf_cio_a6/publication/afh33-337/afh33-337.pdf</a>. <a href="https://matthewstrom.com/writing/bluf/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Erik Larson, <em>The Splendid and the Vile</em> (New York: Crown, 2020), Kindle Edition, pp. 154–155. <a href="https://matthewstrom.com/writing/bluf/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Consequentialism
2020-05-10T00:00:00Z
https://matthewstrom.com/ethics/consequentialism/
<p>Consequentialism became the most popular approach to ethics following the Age of Enlightenment. Writers in the late 18th and early 19th century saw how strict, rule-based, duty-bound theories of ethics resulted in contradictory and often destructive behavior. After Napoleon’s wars and the bloody French Revolution that followed, philosophers wondered how our individual decisions impact the communities we live in. As the Industrial Revolution began, politicians and scholars alike wondered: what responsibilities do we have to society?</p>
<h2 id="what-is-consequentialism%3F">What is consequentialism?</h2>
<p>It’s right there in the title: consequentialism is about consequences. The view of consequentialists is that <strong>what is and is not ethical depends only on the outcome of our decisions.</strong></p>
<p>It’s helpful to compare consequentialism to deontology, which we covered in a previous essay. Deontology says that there is a logically consistent set of rules that can determine whether some act is ethical or not. Consequentialism says “it depends.” A rule that looks ethical in one case might result in unethical outcomes in another case. Consequentialism is based on an intuition: the best action now is whatever makes the world best in the future.</p>
<p>Many consequentialists believe that the best-ness of the future can be measured and counted. They call this best-ness “utility,” and by extension they are called utilitarians. In their view, comparing the utility of two decisions is the way to identify the right one.</p>
<h2 id="a-brief-history-of-consequentialism">A brief history of consequentialism</h2>
<p>Jeremy Bentham is generally considered to be one of the founders of consequentialism and utilitarianism. Born in England in 1748, Bentham grew up similarly to Immanuel Kant; he was put in a series of strict schools and instructed mostly in classics and religion. This upbringing bred a dislike of the Anglican Church and a love for challenging norms and establishments.</p>
<p>After a false start as a lawyer, Bentham began his career in 1776 by writing anonymous pieces criticizing the English legal system. In <em>A Fragment on Government</em>, he wrote a short summary of utilitarianism: its “fundamental axiom” is that “it is the greatest happiness of the greatest number that is the measure of right and wrong,” and “the obligation to minister to general happiness, was an obligation paramount to and inclusive of every other.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn1" id="fnref1">1</a></sup> The happiness of others is the most important measure of right and wrong.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/cons-1.jpg" alt="Jeremy Bentham" /><figcaption>Jeremy Bentham</figcaption></figure>
<p>Bentham’s works were hugely influential. He knew this. In a dream, he imagined himself as “a founder of a sect; of course a personage of great sanctity and importance. It was called the sect of the utilitarians.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn2" id="fnref2">2</a></sup> One of his most famous apostles was John Stuart Mill, born in 1806.</p>
<p>Mill took up the mantle of consequentialism. He wrote the book on utilitarianism, <em>Utilitarianism</em>, in 1863. In it, he clarified and defended many of Bentham’s ideas. “Happiness,” he wrote, “is the sole end of human action, and the promotion of it the test by which to judge of all human conduct.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn3" id="fnref3">3</a></sup></p>
<p>Mill’s writings on social justice, economics, and government were powerful influences during a time of upheaval in England and abroad.</p>
<h2 id="how-do-you-measure-consequences%3F">How do you measure consequences?</h2>
<p>In considering our actions, it can be hard to add up the consequences. How much does inventing a cure for cancer count, compared to returning a stranger’s wallet? What if that stranger is inspired by your act of kindness, dedicates their life to bettering the world, and then invents a cure for cancer?</p>
<p>Consequentialists can be categorized according to how they handle a few high-level tensions:</p>
<ul>
<li><strong>What is good?</strong> Some consequentialists like to keep things simple: called hedonists, they claim that only pain or pleasure matter when tabulating outcomes. Other philosophers believe that pain and pleasure aren’t everything: “<em>Moore’s ideal utilitarianism, for example, takes into account the values of beauty and truth (or knowledge) in addition to pleasure (Moore 1903, 83–85, 194; 1912). Other consequentialists add the intrinsic values of friendship or love, freedom or ability, justice or fairness, desert, life, virtue, and so on.”</em> <sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn4" id="fnref4">4</a></sup></li>
<li><strong>Do intentions matter?</strong> Let’s go back to returning a stranger’s wallet. If the stranger goes on to do great things, can you take credit for those great things? You didn’t intend to contribute to cancer research when you decided to return the wallet. “Actual” consequentialists say that the actual outcomes of your actions are all that matter, while “foreseeable” consequentialists take your intentions into account.</li>
<li><strong>Who decides?</strong> Classic consequentialists like Bentham and Mill believed that the relative goodness or badness of an outcome shouldn’t depend on your perspective. Moral relativists argue that people have vastly different cultures, communities, and beliefs, resulting in vastly different conclusions about consequences.</li>
</ul>
<p>These basic questions result in disagreements between consequentialists. But generally speaking, consequentialism has endured as an intuitive and useful approach to morals. Most legal systems today are based in consequentialism; it’s illegal to break the speed limit, whether you intended to or not. The severity of a criminal’s punishment is meant to be proportional to the consequences of their crime. In determining guilt, we look at evidence that connects actions to outcomes.</p>
<h2 id="how-to-apply-consequentialism-to-design">How to apply consequentialism to design</h2>
<p>Consequentialism can be much easier to wield on a day-to-day basis than deontology or virtue ethics. Try it out: next time you’re designing anything, think ahead to the moment a user comes into contact with your work. What happens? Is the result good or bad for the user?</p>
<p>Of course, there’s much more nuance to consequentialism once you start to think about the impact to all users, and even more when you consider all decisions in aggregate. Fortunately, there are tools you can use to break the problem down into more manageable pieces; one particularly helpful framework is called the double bottom line.</p>
<h3 id="the-double-bottom-line">The double bottom line</h3>
<p>Business is about one thing: profit. Yield. The bottom line. The phrase is a reference to the final row in financial tables, summing the gains and losses to a single figure. The number goes up in good years, down in bad years. It gets reported by <em>Bloomberg</em> and the <em>Financial Times</em> and <em>The Wall Street Journal</em>. It’s shorthand for brevity. “Tell me, doc, what’s the bottom line?”</p>
<p>In the late 20th century, stakeholders realized that there was more to business than profit. The term “double bottom line” began to appear as early as 1996 in books like <em>New Social Entrepreneurs</em> by Jed Emerson and Fay Twersky. The second bottom line represents the social impact of a business — profit alone is, at best, meaningless; worse, it can be baffling or misinforming.</p>
<p>In a 2004 article in <em>Business Ethics Quarterly</em>, Wayne Norman and Chris MacDonald provided a list of metrics that might add up to the second bottom line <sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn5" id="fnref5">5</a></sup>:</p>
<p><strong>Diversity</strong></p>
<ul>
<li>Existence of equal opportunity policies or programmes;</li>
<li>Percentage of senior executives who are women;</li>
<li>Percentage of staff who are members of visible minorities;</li>
<li>Percentage of staff with disabilities.</li>
</ul>
<p><strong>Unions / Industrial Relations</strong></p>
<ul>
<li>Percentage of employees represented by independent trade union organizations or other bona fide employee representatives;</li>
<li>Percentage of employees covered by collective bargaining agreements;</li>
<li>Number of grievances from unionized employees.</li>
</ul>
<p><strong>Health and Safety</strong></p>
<ul>
<li>Evidence of substantial compliance with International Labor Organization Guidelines for Occupational Health Management Systems;</li>
<li>Number of workplace deaths per year;</li>
<li>Existence of well-being programmes to encourage employees to adopt healthy lifestyles.</li>
<li>Percentage of employees surveyed who agree that their workplace is safe<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn6" id="fnref6">6</a></sup>
The idea is that, by measuring and reporting on these numbers, businesses are made aware of the consequences of workplace policies. By extension, you can measure your design’s second bottom line by identifying metrics that reflect the social impact of your work.</li>
</ul>
<p>Erika Hall refined this approach in “Thinking in Triplicate.” Her writing is some of my favorite when it comes to ethics; I urge you to read the whole article. One of the most memorable lines comes at the beginning:</p>
<blockquote>
<p>A good user experience is only as good as the action it enables. Designing a system that makes it easy to do bad things is bad.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn7" id="fnref7">7</a></sup></p>
</blockquote>
<figure data-type="image"><img src="https://matthewstrom.com/images/cons-2.jpg" alt="" /></figure>
<p>Hall links to a <em>New York Times</em> article on Facebook’s advertising platform. The platform’s features allowed advertisers to target ads in a way that excluded women and minorities — a violation of the Fair Housing Act.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn8" id="fnref8">8</a></sup> Facebook’s intentions were likely not malicious: it allowed advertisers to “target who sees [ads] by selecting from preset lists of demographics, likes, behaviors and interests, while excluding others.” “Pet food companies, for example, could send their ads specifically to people who had indicated an interest in dogs, while excluding cat and bird fanciers.”</p>
<p>But the consequences of this design choice were dire. In addition to enabling housing discrimination, Facebook’s ad targeting has been used to exclude older candidates from job searches;<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn9" id="fnref9">9</a></sup> divide political messaging to maximize anger;<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn10" id="fnref10">10</a></sup> and single out vulnerable teens.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/consequentialism/#fn11" id="fnref11">11</a></sup></p>
<p>Facebook isn’t the only platform that could benefit from understanding the social impact of its products. Every social media app, enterprise SaaS application, cloud technology provider, and e-commerce platform should be measuring and reporting its double bottom line.</p>
<h2 id="problems-with-consequentialism">Problems with consequentialism</h2>
<p>Consequentialism puts a heavy burden on anyone who thinks hard enough about their actions. For example, I’m writing this essay on a Sunday afternoon. I’ve been at it for a few hours. Surely, I could have had a much more positive impact with those few hours than sitting at my computer: I could have volunteered at a local food bank. I could have donated some money to a charity. I could have taken some clothes to Goodwill. Was it immoral for me to spend the time writing?</p>
<p>Another criticism of consequentialism — really, a criticism of all the theories we’ve explored so far — is that it puts too much emphasis on individuals to make positive changes to the world around them. Historically, privileged people — wealthy, land-owning, white, male — have had more power than others. According to most traditional ethical theories, these privileged people have a greater part to play in ethics and morality than people who are oppressed, excluded, and minimized.</p>
<p>In the late 21st century, writers began to explore new ways of framing ethics that considered the relationship between powerful and powerless people. We’ll explore those theories, called care ethics, in the next installment.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Consequences matter. That’s the most intuitive way to think about ethics; it’s amazing that it took us thousands of years to come to the conclusions of Bentham and Mill. Today, consequentialism remains just as popular as it was at the dawn of the industrial era.</p>
<p>But designers aren’t encouraged to consider the consequences of their own decisions. Market incentives like profit, return on investment, and stakeholder value muddy our understanding of the products we create. We can avoid making things worse only by measuring and reporting the ethical outcomes and social impact of design — the double bottom line.</p>
<p>It’s up to us to create things that increase the well-being of our friends, neighbors, family, community, country, and planet.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Jeremy Bentham, <em>The Collected Works of Jeremy Bentham: A Comment on the Commentaries and A Fragment on Government</em>, edited by J. H. Burns and H. L. A. Hart. (Oxford University Press, 1977). <a href="https://matthewstrom.com/ethics/consequentialism/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>James E. Crimmins, <em>Secular Utilitarianism: Social Science and the Critique of Religion in the Thought of Jeremy Bentham</em> (Oxford University Press, 1990). <a href="https://matthewstrom.com/ethics/consequentialism/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>John Stuart Mill. <em>Utilitarianism</em> (Boston, MA: IndyPublish, 2005). <a href="https://matthewstrom.com/ethics/consequentialism/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Walter Sinnott-Armstrong, “Consequentialism,” in <em>The Stanford Encyclopedia of Philosophy</em>, edited by Edward N. Zalta, summer 2019 (Stanford, CA: Metaphysics Research Lab, Stanford University, 2019). <a href="https://matthewstrom.com/ethics/consequentialism/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Astute readers will notice that the original article discussed a triple bottom line, not a double bottom line. The triple-bottom-line framework, designed in 1994 by John Elkington, included sustainability and environmental impact as a third bottom line. However, in 2018, Elkington revisited his original ideas, proposing a “strategic recall,” lamenting that the triple bottom line framework didn’t catalyze the type of change he intended. See Elkington’s article “25 Years Ago I Coined the Phrase “Triple Bottom Line.” Here’s Why It’s Time to Rethink It.” at <em>Harvard Business Review</em>, published June 25, 2018: <a href="https://hbr.org/2018/06/25-years-ago-i-coined-the-phrase-triple-bottom-line-heres-why-im-giving-up-on-it" target="_blank" rel="noopener">https://hbr.org/2018/06/25-years-ago-i-coined-the-phrase-triple-bottom-line-heres-why-im-giving-up-on-it</a> <a href="https://matthewstrom.com/ethics/consequentialism/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Wayne Norman and Chris MacDonald, “Getting to the Bottom of ‘Triple Bottom Line,’” <em>Business Ethics Quarterly</em> 14, no. 2 (April 2004): 243–62. <a href="https://matthewstrom.com/ethics/consequentialism/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>Erika Hall, “Thinking in Triplicate,” Mule Design Studio, Medium.com, published July 16, 2018: <a href="https://medium.com/mule-design/a-three-part-plan-to-save-the-world-98653a20a12f" target="_blank" rel="noopener">https://medium.com/mule-design/a-three-part-plan-to-save-the-world-98653a20a12f</a>. <a href="https://matthewstrom.com/ethics/consequentialism/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn8" class="footnote-item"><p>Charles V. Bagli, “Facebook Vowed to End Discriminatory Housing Ads. Suit Says It Didn’t.” <em>The New York Times</em>, published March 27, 2018: <a href="https://www.nytimes.com/2018/03/27/nyregion/facebook-housing-ads-discrimination-lawsuit.html" target="_blank" rel="noopener">https://www.nytimes.com/2018/03/27/nyregion/facebook-housing-ads-discrimination-lawsuit.html</a>. <a href="https://matthewstrom.com/ethics/consequentialism/#fnref8" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn9" class="footnote-item"><p>Julia Angwin, Noam Scheiber, and Ariana Tobin, “Facebook Job Ads Raise Concerns About Age Discrimination,” <em>The New York Times</em>, published December 20, 2017: <a href="https://www.nytimes.com/2017/12/20/business/facebook-job-ads.html" target="_blank" rel="noopener">https://www.nytimes.com/2017/12/20/business/facebook-job-ads.html</a>. <a href="https://matthewstrom.com/ethics/consequentialism/#fnref9" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn10" class="footnote-item"><p>Dan Keating, Kevin Schaul, and Leslie Shapiro, “The Facebook ads Russians targeted at different groups,” <em>The Washington Post</em>, published November 1, 2017: <a href="https://washingtonpost.com/graphics/2017/business/russian-ads-facebook-targeting/" target="_blank" rel="noopener">https://washingtonpost.com/graphics/2017/business/russian-ads-facebook-targeting/</a>. <a href="https://matthewstrom.com/ethics/consequentialism/#fnref10" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn11" class="footnote-item"><p>Sam Levin, “Facebook told advertisers it can identify teens feeling ‘insecure’ and ‘worthless’,” The Guardian, published May 1, 2017: <a href="https://www.theguardian.com/technology/2017/may/01/facebook-advertising-data-insecure-teens" target="_blank" rel="noopener">https://www.theguardian.com/technology/2017/may/01/facebook-advertising-data-insecure-teens</a>. <a href="https://matthewstrom.com/ethics/consequentialism/#fnref11" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Deontology
2020-04-27T00:00:00Z
https://matthewstrom.com/ethics/deontology/
<p>Deontology was the result of a surge of new energy in philosophy beginning in the 17th century. After the chaos and destruction of the Black Death, Europeans re-evaluated their relationship to the world around them. Scholars like René Descartes and Isaac Newton took on monumental projects to discover the rules that govern nature. Philosophers like David Hume and Immanuel Kant followed in their footsteps, taking a controversial and critical approach to ethics, morals, society, and politics.</p>
<h2 id="what-is-deontology%3F">What is deontology?</h2>
<p>Deontology is an unwieldy word. It comes from two Greek words: deon, meaning duty, and logos, meaning study. Plainly, deontology is the study of duty. What should we do? What actions are good? How do we choose between doing the right thing and doing the wrong thing?</p>
<p><strong>According to deontology, ethics is all about how you act.</strong> Deontologists search for the right set of rules to define and govern moral behavior. Contrast this with virtue ethics, which says that character traits define behavior as ethical or not.</p>
<p>Contrasting deontology with consequentialism is helpful, too. We’ll cover consequentialism in the next installment of this series, but for now, think of it like this: consequentialism takes the view that actions are either good or bad based on the goodness or badness of their outcomes. Deontology says that consequences don’t matter. The deontological view is that logic and reason are all you need to determine whether actions are right or wrong.</p>
<h2 id="a-brief-history-of-deontology">A brief history of deontology</h2>
<p>Until the 17th century, the virtue ethics of Aristotle, Plato, and Socrates dominated moral philosophy. But during the Enlightenment, European philosophers began to explore alternatives. They wanted to give everyday people clear guidelines on how to live their lives. Their new guidelines were founded on logic and reason, not on feelings or beliefs.</p>
<p>Immanuel Kant, born in 1724, was one of the most influential philosophers of the Enlightenment. Although Kant is best known today as a philosopher, his early work focused on physics. He correctly deduced a number of complicated physical phenomena, including the orbital mechanics of the earth and moon, the effects of the earth’s rotation on weather patterns, and how the solar system was formed.</p>
<p>But at age 46, Kant reached a turning point. He read the work of another influential enlightenment philosopher, David Hume, and felt his life change:</p>
<blockquote>
<p>I freely admit that the remembrance of David Hume was the very thing that many years ago first interrupted my dogmatic slumber and gave a completely different direction to my researches in the field of speculative philosophy.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/deontology/#fn1" id="fnref1">1</a></sup></p>
</blockquote>
<figure data-type="image"><img src="https://matthewstrom.com/images/deontology-02.jpg" alt="" /></figure>
<p>An avalanche of generation-defining work followed. Kant wrote essay after essay weighing in on growing debates between German scholars. Two books, <em>Critique of Practical Reason</em> and <em>Critique of Judgement</em>, continued his skeptical analysis of the theories of ethics that had come before. But in <em>Groundwork of the Metaphysic of Morals</em>, Kant introduced his most enduring contribution to ethics: the categorical imperative.</p>
<h2 id="the-categorical-imperative">The categorical imperative</h2>
<p>Kant, a deontologist, argued that ethics is about action. His explanations started from the assumption that anyone could live an ethical life by following the right rules. Kant called rules for action <em>imperatives</em>.</p>
<p>Kant identified two kinds of rules. The first he called the <em>hypothetical imperative</em>. A hypothetical imperative takes the form of “If I want <strong>x</strong>, I’ll do <strong>y</strong>.” Some examples of hypothetical imperatives:</p>
<ul>
<li>If I want tea, I’ll go to the store and buy some.</li>
<li>If I want money, I’ll go to work.</li>
<li>If I want to lose weight, I’ll go to the gym.</li>
</ul>
<p>Kant didn’t believe that this sort of robotic call and response would lead to a good set of ethical guidelines. If we only respond to desires, we’re not really expressing our free will as rational creatures. We should follow the rules of ethics regardless of any preexisting condition.</p>
<p>The second type of imperative, then, would have to be free of any external motivation. He called these rules <em>categorical imperatives</em>. A categorical imperative is a rule for action that can be applied by anyone, anywhere, at any time. Some examples of categorical imperatives:</p>
<ul>
<li>Eat healthy, even if it’s not tasty.</li>
<li>Don’t steal.</li>
<li>Always help those in need.</li>
</ul>
<p>But the genius of Kant’s categorical imperative is not in the definition. Kant outlined a series of steps to find these categorical imperatives in our everyday life. This simple procedure is one of the reasons deontology was so influential, and continues to be relevant today.</p>
<h3 id="how-to-formulate-categorical-imperatives">How to formulate categorical imperatives</h3>
<ol>
<li><strong>Before you act, think about the imperative that guides your decision.</strong> I’m in the kitchen at work. I’m really hungry. I have to go to a meeting, and I’m worried that if I don’t eat I’ll be really unpleasant to my teammates. I see a sandwich in the fridge. There’s no name on it; I suspect it might be a coworker’s, but I’m tempted to eat it anyway. What’s my imperative? “If you need to eat, somebody else’s food is fair game.”</li>
<li><strong>Imagine a world in which everyone followed this rule.</strong> This is a process Kant calls “universalizing the maxim.” I can imagine a workplace in which the fridge is essentially a donation box. But my imperative only works if there is such a thing as “somebody else’s food.” And if the fridge is a free-for-all, we’re in a communist utopia: there’s no such thing as somebody else’s food. My maxim contradicts itself.</li>
<li><strong>Make sure your rule doesn’t infringe on anyone else’s freedom.</strong> Kant believed that we all have a responsibility to preserve each other’s freedom. Refrigerator collectivism means that nobody can bring their own lunch without the possibility of losing it to someone like me. It’s a tragedy of the commons.</li>
</ol>
<p>If you can define a rule that applies to everyone, and if that rule doesn’t violate anyone’s freedom, then congratulations: you’ve found a categorical imperative. Behaving according to this rule, Kant believed, would result in moral behavior.</p>
<h2 id="applying-deontology-to-design">Applying deontology to design</h2>
<p>If deontology is about the rules of moral behavior, then deontological design is about the rules for designing ethically sound experiences for our users. Finding these rules means following the rules of Kant’s categorical imperative.</p>
<p>First, when designing a screen, workflow, experience, or service, think about the design in terms of rules. Imagine designing the process of getting a verification badge on Twitter: what rules define the experience? Today, there’s pressure on Twitter to make verification easier. The rule: “It should be easy to get verified on Twitter.”</p>
<p>Imagine the rule applied universally. It would need to expand to apply to other social media networks: “Signals of trust on social media should be easy to attain.”</p>
<p>YouTube has demonstrated this rule. Until recently, its signal of trust — a checkmark next to a channel’s name — was easy to get. The only condition for verification was subscriber count: If a channel had more than 100,000 subscribers, a checkmark would appear next to their name. More than 160,000 channels have passed that mark.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/deontology/#fn2" id="fnref2">2</a></sup> YouTube’s simple verification criteria meant that all of these channels, no matter who created the content or what those videos contained, carried a signal of trustworthiness.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/deontology-03.jpg" alt="" /></figure>
<p>But verified channels weren’t necessarily trustworthy. In 2017, <a href="https://www.nytimes.com/2017/11/04/business/media/youtube-kids-paw-patrol.html" target="_blank" rel="noopener">A New York Times story</a> detailed disturbing videos designed to appear in YouTube’s algorithmically generated playlists. These videos targeted children by featuring popular cartoon characters:</p>
<blockquote>
<p>“PAW Patrol Babies Pretend to Die Suicide by Annabelle Hypnotized” was a nightmarish imitation of an animated series in which a boy and a pack of rescue dogs protect their community from troubles like runaway kittens and rock slides. In the video… some characters died and one walked off a roof after being hypnotized by a likeness of a doll possessed by a demon.</p>
</blockquote>
<p>Many of the troubling videos were uploaded by verified accounts.</p>
<p>In response to this scandal and others, YouTube decided to revamp its conditions for verification. It introduced two criteria:</p>
<blockquote>
<ul>
<li><strong>Authenticity</strong>: does this channel belong to the real creator, artist, public figure or company it claims to represent?</li>
<li><strong>Prominence</strong>: does this channel represent a well-known or highly searched creator, artist, public figure or company? Is this channel widely recognized outside of YouTube and have a strong presence online? Is this a popular channel that has a very similar name to many other channels?<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/deontology/#fn3" id="fnref3">3</a></sup></li>
</ul>
</blockquote>
<p>Many creators’ verification checkmarks were <a href="https://www.theverge.com/2019/9/19/20873668/youtube-verified-creators-application-artists-musicians-policy-recommendation-search" target="_blank" rel="noopener">slated for removal</a>, prompting a backlash. YouTube reversed course, changing its criteria again. YouTube’s CEO Susan Wojcicki apologized via Twitter: “I’m sorry for the frustration & hurt that we caused with our new approach to verification. While trying to make improvements, we missed the mark. As I write this, we’re working to address your concerns.”</p>
<p>YouTube failed to apply deontological thinking in its decisions around trust and verification. While Twitter’s approach to trust frustrates users, its tightly held criteria and process has ultimately provided a more ethically robust experience.</p>
<h2 id="tools-for-deontological-design">Tools for deontological design</h2>
<p>Design teams have a few tools at their disposal to make decisions with the rules of ethics in mind.</p>
<h3 id="dogfooding">Dogfooding</h3>
<p>Dogfooding — shorthand for the advice “eat your own dog food” — is the practice of using your own products. Microsoft adopted this approach when building Windows NT; early versions were incomplete and prone to crashing, but because the developers relied on it, they quickly found and fixed critical bugs.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/deontology/#fn4" id="fnref4">4</a></sup></p>
<p>Dogfooding also makes ethical bugs visible. How do you think Facebook employees feel about the company’s data policy? How do their feelings change when they’re one of the millions affected by the company’s <a href="https://www.nytimes.com/interactive/2018/06/03/technology/facebook-device-partners-users-friends-data.html" target="_blank" rel="noopener">violation of privacy protection laws</a>?</p>
<p>Using your own products to identify ethical issues reinforces step 2 of the categorical imperative process: what would the world be like if your design framework was practiced by everyone? The easiest way to practice this kind of empathy is on yourself.</p>
<h3 id="premortems">Premortems</h3>
<p>Postmortems are standard practice on engineering teams. When an unexpected problem occurs, a team analyzes the cause of the issue and reports on ways to prevent it from happening again. Postmortems provide accountability and transparency. They build a culture where failure is okay, where learning is more important than blaming.</p>
<p><em>Pre</em>mortems, on the other hand, are less common. In a premortem, a team — engineering, design, or better yet, cross-functional — asks a scary question: “what could go wrong?”</p>
<p>Shannon Vallor, a philosopher at the Markkula Center for Applied Ethics, designed <a href="https://www.scu.edu/ethics-in-technology-practice/ethical-toolkit/" target="_blank" rel="noopener">an ethical toolkit</a> that includes premortems. She suggests teams ask the following questions before beginning work:</p>
<ul>
<li>How could this project fail for ethical reasons?</li>
<li>What would be the most likely combined causes of our ethical failure/disaster?</li>
<li>What blind spots would lead us into failure?</li>
<li>Why would we fail to act?</li>
<li>Why/how would we choose the wrong action?</li>
<li>What systems/processes/checks/failsafes can we put in place to reduce failure risk?</li>
</ul>
<p>Ethical premortems help answer the question central to Kant’s categorical imperative: does this approach to design infringe on anyone’s freedom? It’s vital to understand the ways software could be used for harm before building it.</p>
<h2 id="problems-with-deontology">Problems with deontology</h2>
<p>Kant boldly proclaimed in 1780 that “a conflict of duties is inconceivable.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/deontology/#fn5" id="fnref5">5</a></sup> But a simple illustration can demonstrate that conflicts are common, and that deontology results in counterintuitive behavior.</p>
<p>Say a criminal mastermind has hidden a nuclear bomb underneath Manhattan and threatens to detonate it. You’re an FBI agent investigating the case; you’ve apprehended someone who you believe can tell you the location of the bomb. The detainee is not cooperating. You have to make a choice: should you torture or coerce this witness for the chance of saving millions of lives?</p>
<p>Deontology says that breaking a moral rule — “do not torture people who may be innocent” — is unacceptable, even if the result is catastrophic. Kant is firm on this. “Better the whole people perish”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/deontology/#fn6" id="fnref6">6</a></sup> he says, than an injustice be done. Sometimes, doing the right thing will have tragic results.</p>
<p>Practicing deontology requires steely resolve and a disregard for the consequences. Some of Kant’s colleagues and contemporaries were horrified: moral behavior, they believed, should result in the greatest outcome for the greatest number of people. This approach to ethics is called consequentialism, and it’s the subject of the next essay in this series.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Deontology lets us step away from the subjective judgements of virtue ethics. It moves us towards a more universal and consistent ethical framework.</p>
<p>How does your work reflect the rules of ethical design? Imagine a reality where everyone acts according to those rules. Picture yourself using apps, websites, and services designed by those norms. It’s a practice that dates back to the third century BC, one that is found in almost every religion and culture: Treat others as you would like others to treat you. The golden rule.</p>
<p>Deontological thinking uncovers the rules that govern ethical design. Tools like dogfooding and premortems can help designers avoid causing harm to their users. The approach isn’t without its pitfalls and paradoxes, but the more we think about the guiding principles of ethical design, the better our products will become.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Immanuel Kant, _Prolegomena to Any Future Metaphysics That Will Be Able to Come Forward as Science, With Selections from the Critique of _Pure Reason, edited by Gary Hatfield (Cambridge University Press, 2004). <a href="https://matthewstrom.com/ethics/deontology/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Matthias Funk, “How Many YouTube Channels Are There?,” tubics, published January 31, 2020: <a href="https://www.tubics.com/blog/number-of-youtube-channels" target="_blank" rel="noopener">https://www.tubics.com/blog/number-of-youtube-channels</a>. <a href="https://matthewstrom.com/ethics/deontology/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Jonathan McPhie, “Updates to YouTube’s verification program,” Creator Blog, YouTube, Google, published September 19, 2019: <a href="https://youtube-creators.googleblog.com/2019/09/updates-to-youtubes-verification-program.html" target="_blank" rel="noopener">https://youtube-creators.googleblog.com/2019/09/updates-to-youtubes-verification-program.html</a>. <a href="https://matthewstrom.com/ethics/deontology/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Lee G. Bolman and Terrence E. Deal, <em>Reframing Organizations: Artistry, Choice, and Leadership</em>, Jossey-Bass Business & Management Series (Wiley, 2003). <a href="https://matthewstrom.com/ethics/deontology/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Immanuel Kant. <em>Metaphysical Elements of Justice: Part One of the Metaphysics of Morals</em>, 2nd ed., translated by John Ladd (Indianapolis: Hackett, 1999). <a href="https://matthewstrom.com/ethics/deontology/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Ibid. <a href="https://matthewstrom.com/ethics/deontology/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
How to make big changes one step at a time
2020-04-20T00:00:00Z
https://matthewstrom.com/writing/designing-change/
<figure data-type="image"><img src="https://matthewstrom.com/images/change_1.png" alt="" /></figure>
<p><em>This essay is an adaptation of a talk I gave at Front, a UX and Product Management conference. If you prefer, you can watch the presentation<a href="https://noti.st/mattstrom/BESHjt/designing-change" target="_blank" rel="noopener"> here</a></em>.</p>
<p>Great companies are defined by their ability to change. Apple changed when they re-hired Steve Jobs. Microsoft changed when they embraced open-source software. Amazon changed when they started selling groceries, and then cloud computing, and then original TV shows.</p>
<p>It is easy to imagine these changes as grand strategic moves, carefully planned and executed by a handful of luminaries. But lasting, meaningful change comes from many small, focused improvements over time. With patience, even a single person can make a substantial impact in even the largest organizations.</p>
<h2 id="the-ship-of-theseus">The ship of Theseus</h2>
<p>One of the best illustrations of the power of small, incremental change is a parable called the ship of Theseus. It goes like this:</p>
<p>Centuries ago, a famous ship — sailed by a hero named Theseus in a great battle — was docked in harbor as a monument to naval victories. Over time, the ship’s wood deteriorated, worn away by salt and sea. One by one, each piece of the ship was carefully re-created and replaced as needed.</p>
<p>The ship still serves its purpose as a memorial, but nothing about it is original: Theseus didn’t stand on those exact boards, or steer that exact rudder. But at what point did it stop being original? Was it the first part that was replaced? The 10th? The 100th?</p>
<p>Change is hard to see in the present. Rarely does significant change happen all at once. But continuous change adds up; it tells a story of renewal that only appears in retrospect.</p>
<h2 id="the-first-plank">The first plank</h2>
<p>If you’re thinking about setting out to make a big change — a rebrand, a reorg, or a product pivot — it’s tempting to start by planning the whole thing out. But the ship of Theseus didn’t get changed by plan; it happened plank by plank. Your first step in a journey of change is to simply replace a single plank.</p>
<p>The first plank is important because it creates momentum. It moves the needle. It’s never a triumphant moment, but it’s the only way to begin.</p>
<p>The best first plank is something on the edge. If you start by changing a major part of your organization, strategy, or brand, you’ll set off alarm bells in the institutional immune system you work within. You’ll get a lot of attention, and it won’t necessarily be the good kind. Instead of opening with a bang, pick your first plank to minimize the resources you need.</p>
<p>This is sometimes called a “quick win,” but it likely won’t feel like much of a victory. You won’t have time to reflect on it. Be ready to scale up, and get to work on the second plank.</p>
<h2 id="the-north-star">The North Star</h2>
<p>Just like a lonely plank, a single step has no direction. It’s just a point in space. But take a few steps together — connect two or more points — and you have a direction, a line, a path.</p>
<p>For as long as humans have been exploring, we’ve used the stars to guide us. In modern business parlance, a “North Star metric” is a goal that guides a team’s efforts. Volumes have been written about why North Star metrics are important and how to select them. I particularly like<a href="https://amplitude.com/blog/2018/03/21/product-north-star-metric" target="_blank" rel="noopener"> this post from Amplitude</a>, as it addresses some of the pitfalls that accompany North Star metrics.</p>
<p>But if your North Star is a goal, you’re using it wrong.</p>
<p>Explorers didn’t treat the stars as their <em>goal</em>; they used them as a <em>guide.</em> That is, the stars told them if they were on the right course towards their goal, be it the West Indies or the farthest edges of Polynesia.</p>
<p>Your North Star should be a guide, too. In design projects, we use design principles to tell us if we’re going in the right direction. I’ve written lots about design principles in the past:</p>
<ul>
<li><a href="https://matthewstrom.com/writing/design-principles-workshop/" target="_blank" rel="noopener">The 1-hour design principles workshop</a></li>
<li><a href="https://matthewstrom.com/writing/principles.html" target="_blank" rel="noopener">What makes a good design principle?</a></li>
</ul>
<p>Consistent principles let us know if we’re on the right track and help us course-correct if needed.</p>
<h2 id="the-roadmap">The roadmap</h2>
<p>As you take more steps with confidence, you’ll hear a question from your team and your stakeholders: “So what does the roadmap look like?”</p>
<p>I wrote a response to this question in<a href="https://matthewstrom.com/writing/responsive-roadmaps/" target="_blank" rel="noopener"> Responsive Roadmaps</a>:</p>
<div class="c--bg-gray-1 l--pad-s">
<p>Shane Parrish’s essay “The Map is Not the Territory” begins:</p>
<p><em>The map of reality is not reality. Even the best maps are imperfect. That’s because they are reductions of what they represent.</em></p>
<p>The same is true for product roadmaps. Understanding and applying Parrish’s mental model is the key to designing a more usable, more maintainable, and more accurate roadmap.</p>
</div>
<p>The essay goes on to suggest that instead of drawing out extensively detailed plans for the next quarter, half, year, or decade, you should tell a story. The story is about your goals, and how you’ll accomplish them.</p>
<p>That story, what I call a responsive roadmap, consists of four elements:</p>
<ol>
<li>An ambitious objective that guides all the work your team is doing</li>
<li>Measurable key results that tell you if you’re on the right track</li>
<li>Concrete targets that will move the needle of your key result</li>
<li>Current projects that you have undertaken to reach your next target</li>
</ol>
<h2 id="the-feedback-loop">The feedback loop</h2>
<p>With repetition, the forward momentum of change eventually builds to a speedy pace. And that’s where another mistake of change-making is often made: teams restart their process from a blank slate every quarter, half, or year.</p>
<p>Annual planning kills the engine of change. The boulder rolls back down the hill.</p>
<p>Instead of big planning phases, projects of change require short feedback loops. Follow these three principles:</p>
<ol>
<li>Keep course corrections small</li>
<li>Keep cycles short</li>
<li>Don’t assume your predictions are perfect</li>
</ol>
<p>In the world of product design, we apply these principles by mirroring some of the practices of agile software development:</p>
<ol>
<li>Invest in a design system — this keeps course corrections small</li>
<li>Ship in the smallest increment possible — this keeps cycles short</li>
<li>Get embedded in the team and don’t create a backlog of designs — this helps keep the team honest about the accuracy of their predictions</li>
</ol>
<p>Scientists harness the power of short feedback loops, too. <strong>Kalman filtering,</strong> a simple feedback algorithm invented in the 1950s, enabled the feeble computer aboard the Apollo spacecraft to successfully traverse the 238,856 miles between the earth and the moon.</p>
<p>Kalman filters are so powerful that they’re still used today, on much more advanced hardware, to guide spacecraft to dock with the International Space Station.</p>
<p>Kalman filters are a deep, wooly subject. You can dive down the rabbit hole with excellent explanations like<a href="https://www.bzarg.com/p/how-a-kalman-filter-works-in-pictures/" target="_blank" rel="noopener"> this blog post</a> or this<a href="https://www.youtube.com/watch?v=CaCcOwJPytQ" target="_blank" rel="noopener"> 55-part YouTube series</a>. But there’s a lot on the surface here: apply the three basic principles, and you’ll be able to adapt to uncertainty without sapping the energy of change.</p>
<h2 id="putting-it-all-together">Putting it all together</h2>
<p>Change is never done. Heraclitus said: “Everything changes and nothing stands still.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/designing-change/#fn1" id="fnref1">1</a></sup> David Foster Wallace put a modern spin on this in <em>Brief Interviews with Hideous Men:</em> “Everything takes time. Bees have to move very fast to stay still.”</p>
<p>Trying to corral change, to put reins on it, tame or domesticate it, is a losing prospect. By following a small set of principles, you can work with change, not against it:</p>
<ol>
<li>Start small, and build momentum by showing results</li>
<li>Pick a North Star — not a destination, but a guideline</li>
<li>Plan the short term in detail but acknowledge the uncertainty of the future</li>
<li>Keep feedback loops lightweight and fast</li>
</ol>
<p>By understanding and accepting the impermanence of things, looking for ways to borrow the energy of change, to go along for the ride — that’s how you can be intentional. That’s how you can use change as a tool for accomplishing ambitious goals.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>As quoted by Plato in <em>Cratylus</em>, 401d. <a href="https://matthewstrom.com/writing/designing-change/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Virtue ethics
2020-04-13T00:00:00Z
https://matthewstrom.com/ethics/virtue-ethics/
<p>Virtue ethics was one of the earliest attempts at defining a language and a logic around ethics. The effort to identify and understand virtues began in Ancient Greece and continues to this day.</p>
<h2 id="what-is-a-virtue%3F">What is a virtue?</h2>
<p>The <em>Stanford Encyclopedia of Philosophy</em> defines a virtue as “an excellent trait of character.”</p>
<blockquote>
<p>It is a disposition, well entrenched in its possessor — something that, as we say, goes all the way down, unlike a habit such as being a tea-drinker — to notice, expect, value, feel, desire, choose, act, and react in certain characteristic ways.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/virtue-ethics/#fn1" id="fnref1">1</a></sup></p>
</blockquote>
<p>Leave it to philosophers to use tea-drinking as an example of a habit.</p>
<p>A virtue is a desirable personality trait. Kindness, fairness, patience, honesty, courage, and compassion are all examples of virtues.</p>
<p><strong>Virtue ethics is the belief that well-being comes from having the right personality traits or dispositions.</strong></p>
<p>Virtues are a very intuitive way to think about ethics. You probably feel some sense of right and wrong (unless you’re a psychopath). While we may disagree on the full list of virtues, we can agree that people with personality traits like kindness and compassion tend to improve the lives of others.</p>
<h2 id="a-brief-history-of-virtue-ethics">A brief history of virtue ethics</h2>
<p>Our definition and understanding of virtue hasn’t changed much in the last 2,000 years. To understand what it means to be virtuous, we should start with Socrates.</p>
<p>Virtue comes up a handful of times in Plato’s account of Socrates’ trial. A notable moment occurs when Socrates responds to the accusation that he was corrupting the youth of Athens:</p>
<blockquote>
<p>I do nothing but go about persuading you all, old and young alike, not to take thought for your persons and your properties, but first and chiefly to care about the greatest improvement of the soul. I tell you that virtue is not given by money, but that from virtue come money and every other good of man, public as well as private. This is my teaching, and if this is the doctrine which corrupts the youth, my influence is ruinous indeed.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/virtue-ethics/#fn2" id="fnref2">2</a></sup></p>
</blockquote>
<p>To Socrates, virtue was skill in the art of living. The making of character. Wisdom. You can’t buy virtue; you earn it through self-examination. And living virtuously would lead to wealth, material or otherwise.</p>
<p>Other philosophers — like Plato — attempted to define virtue on their own terms. After Socrates’ death, Plato wrote the <em>Republic</em>, the highlight of his long career as a scholar. In it, he discusses the deep, underlying meaning of ethics. What does it mean to live an ethical life? What is the point?</p>
<p>Plato, along with other early philosophers, used the word <em>eudaimonia</em> to refer to the result of living ethically. Eudaimonia is Greek; it’s typically translated as <em>happiness</em>, or <em>well-being</em>. But eudaimonia has the subtext of prosperity and a meaningful existence. Eudaimonia is the aim of all our thoughts and actions, and virtues like courage, piety, and temperance are the skills we need to achieve that aim.</p>
<p>But eudaimonia doesn’t come easy. To Plato, being truly virtuous required decades of studying, discussing, and practicing philosophy:</p>
<blockquote>
<p>At the age of fifty those who have survived the tests and approved themselves altogether the best in every task and form of knowledge must be brought at last to the goal.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/virtue-ethics/#fn3" id="fnref3">3</a></sup></p>
</blockquote>
<figure data-type="image"><img src="https://matthewstrom.com/images/virtue-02.jpg" alt="" /></figure>
<p>A student of Plato’s named Aristotle disagreed. Instead of going to school for twenty years to learn how to be virtuous, Aristotle insisted that anyone can be virtuous simply by acting in the right way. Virtue, he said, is a frame of mind, a careful balance between extremes.</p>
<p>Aristotle’s books on ethics (the <em>Nicomachean Ethics</em> and the <em>Eudemian Ethics)</em> were the gold standard of moral philosophy from the time they were written in the fourth century BC all the way through the Middle Ages and well into the Renaissance. It wasn’t until the Enlightenment that philosophers took a critical look at virtue ethics and began to form alternative theories. We’ll get to those ideas in future essays.</p>
<h2 id="how-to-apply-virtue-ethics">How to apply virtue ethics</h2>
<p>How do we achieve design eudaimonia? If ethical living requires skills — virtues — like kindness, fairness, patience, and honesty, then ethical design needs its own list of skills and practices. Ethical design needs design principles.</p>
<p>A design principle is a lot like a virtue: it’s a desirable attribute or disposition that leads a designer to make ethical design decisions. Designers have been writing down their principles as long as they have been designing. Dieter Rams’ “Ten principles for good design” is one of the most esteemed sets of design principles:</p>
<ol>
<li>Good design is innovative</li>
<li>Good design makes a product useful</li>
<li>Good design is aesthetic</li>
<li>Good design makes a product understandable</li>
<li>Good design is unobtrusive</li>
<li>Good design is honest</li>
<li>Good design is long-lasting</li>
<li>Good design is thorough down to the last detail</li>
<li>Good design is environmentally-friendly</li>
<li>Good design is as little design as possible<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/virtue-ethics/#fn4" id="fnref4">4</a></sup></li>
</ol>
<p>Rams wrote his principles in search of good design. He believes designers have a responsibility to produce good design, and that codified principles are the tools that will help them get there. In a 1976 speech, he outlined this conviction:</p>
<blockquote>
<p>Ladies and gentlemen, design is a popular subject today. No wonder because, in the face of increasing competition, design is often the only product differentiation that is truly discernible to the buyer. I am convinced that a well-thought-out design is decisive to the quality of a product. A poorly-designed product is not only uglier than a well-designed one but it is of less value and use. Worst of all it might be intrusive….The introduction of good design is needed for a company to be successful. However, our definition of success may be different to yours. Striving for good design is of social importance as it means, amongst other things, absolutely avoiding waste. What is good design? Product design is the total configuration of a product: its form, colour, material and construction. The product must serve its intended purpose efficiently. A designer who wants to achieve good design must not regard himself as an artist who, according to taste and aesthetics, is merely dressing-up products with a last-minute garment. The designer must be the gestaltingenieur or creative engineer. They synthesise the completed product from the various elements that make up its design. Their work is largely rational, meaning that aesthetic decisions are justified by an understanding of the product’s purpose.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/virtue-ethics/#fn5" id="fnref5">5</a></sup></p>
</blockquote>
<figure data-type="image"><img src="https://matthewstrom.com/images/virtue-03.jpg" alt="" /></figure>
<p>Rams’ principles and beliefs were focused on producing physical goods, like radios, clocks, chairs, shelves, and calculators. A modern approach to ethical design needs principles for digital goods, too.</p>
<p>There are lots of great examples of ethical design principles for the digital era. Take Adam Scott’s “<a href="https://ethicalweb.org/" target="_blank" rel="noopener">Principles of Ethical Web Development</a>,” for example:</p>
<ol>
<li>Web applications should work for everyone</li>
<li>Web applications should work everywhere</li>
<li>Web applications should respect a user’s privacy and security</li>
<li>Web developers should be considerate of their peers</li>
</ol>
<h3 id="what-makes-a-good-design-principle%3F">What makes a good design principle?</h3>
<p>While it’s possible to adopt other designers’ principles wholesale, I believe it’s more rewarding to write your own principles based on the work you do and the beliefs you have.</p>
<p>The design principles that work the best have the following traits:</p>
<p><strong>Good design principles are memorable.</strong> You shouldn’t need to refer to a handbook to remember how to make ethical design choices. “Good design is as little design as possible” is the golden standard of a memorable design principle. Keep your principles to 10 words or less if possible.</p>
<p><strong>Good design principles help you say no.</strong> Making ethical decisions requires prioritization and focus. Joshua Porter’s <a href="http://bokardo.com/principles-of-user-interface-design/" target="_blank" rel="noopener">“One primary action per screen”</a> principle is a great example: it gives us permission to make interactions obvious. Ethical design principles are as much about avoiding bad design as they are about producing good design.</p>
<p><strong>Good design principles are specific to your own work.</strong> Lots of principles can be applied universally: to any design, by any designer, at any company. William Lidwell, Kritina Holden, and Jill Butler collected a whopping 125 of these common virtues in <em>Universal Principles of Design</em>. But writing your own principles is an opportunity to get specific. “Good design makes people’s lives better,” for example, is universal and hardly compelling. Yves Béhar, designer of often-lauded (and sometimes-maligned) products like Jawbone’s JAMBOX, the August Smart Lock, and Juicero’s $400 juice press, defined a much better version of this principle in his speech at the 2017 A/D/O festival. In his work with design and artificial intelligence, Béhar believes that “[good] design enhances human ability (without replacing the human).”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/virtue-ethics/#fn6" id="fnref6">6</a></sup></p>
<p><strong>Good design principles are applicable.</strong> Principles should give everyone on the team ideas of how to best practice them, and they shouldn’t be specific to one particular platform or discipline. “Solicit and respect user feedback” is a good example of a specific and applicable principle: whether you’re a product designer, project manager, front-end engineer, or sales rep, you can use this principle to be better connected to the impact of your work.</p>
<p>I’ve created a workshop you can run with your own team in one hour to write your own design principles. The instructions, along with more examples of good design principles, can be found on <a href="https://matthewstrom.com/writing/design-principles-workshop" target="_blank" rel="noopener">my website</a>.</p>
<h2 id="the-problem-with-virtue-ethics">The problem with virtue ethics</h2>
<p>If virtue ethics was perfect, this series would end here. Fortunately for me, there’s plenty more to write.</p>
<p>Philosophers in the 17th and 18th centuries were the first to identify problems with virtue ethics. Writers at the time looked for logical rules that could be applied to everyday life; Isaac Newton’s <em>Principia Mathematica</em> set off a cultural chain reaction with its clear demonstrations of physics and mathematics. Virtue ethics was too hazy for these Enlightenment thinkers.</p>
<p>Emmanuel Kant wrote a series of books starting in 1781 that called into question the validity of virtue ethics (and all other kinds of ethical philosophy). Virtues, he argued, can’t exist without a definition of good and evil; therefore, virtue ethics couldn’t stand on its own in providing rules for ethical behavior.</p>
<p>This critique is the clearest case for other kinds of ethical frameworks. Virtues are hard to define objectively, leaving room for paradoxes. As the <em>Stanford Encyclopedia of Philosophy</em> puts it:</p>
<blockquote>
<p>What does virtue ethics have to say about dilemmas — cases in which, apparently, the requirements of different virtues conflict because they point in opposed directions? Charity prompts me to kill the person who would be better off dead, but justice forbids it. Honesty points to telling the hurtful truth, kindness and compassion to remaining silent or even lying. What shall I do?<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/virtue-ethics/#fn7" id="fnref7">7</a></sup></p>
</blockquote>
<p>Kant and other philosophers during the Enlightenment tried to solve this ambiguity by creating a logical system of ethics. That system, called deontology, is the subject of our next essay.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Virtue ethics is not perfect. It can be a little fuzzy around the edges and requires you to make subjective judgements about what is and is not ethical. But the writings of Plato, Aristotle, and more contemporary philosophers like Michael Slote and Linda Zagzebski make for a great foundation.</p>
<p>Apply virtue ethics to design by crafting clear design principles and sharing them with your colleagues. Share your design principles with users. This keeps you accountable and builds trust. Discuss your principles with other designers and notice how they impact your work. These are key steps in building a conversation and a community around ethical design.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Rosalind Hursthouse and Glen Pettigrove, “Virtue Ethics,” <em>The Stanford Encyclopedia of Philosophy</em>, edited by Edward N. Zalta, Metaphysics Research Lab, Stanford University, winter 2018, accessed February 3, 2020, <a href="https://plato.stanford.edu/archives/win2018/entries/ethics-virtue/" target="_blank" rel="noopener">https://plato.stanford.edu/archives/win2018/entries/ethics-virtue/</a>. <a href="https://matthewstrom.com/ethics/virtue-ethics/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Plato, <em>Apology</em>, translated by Benjamin Jowett, The Internet Classics Archive, Daniel C. Stevenson, Web Atomics, last accessed March 18, 2020: <a href="http://classics.mit.edu/Plato/apology.html" target="_blank" rel="noopener">http://classics.mit.edu/Plato/apology.html</a>. <a href="https://matthewstrom.com/ethics/virtue-ethics/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Plato, <em>Republic</em>, edited and translated by Chris Emlyn-Jones and William Preddy (Cambridge, Massachusetts: Harvard University Press, 2013), 540a. <a href="https://matthewstrom.com/ethics/virtue-ethics/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>“Good design,” Vitsœ, accessed January 31, 2020, <a href="https://www.vitsoe.com/us/about/good-design" target="_blank" rel="noopener">https://www.vitsoe.com/us/about/good-design</a>. <a href="https://matthewstrom.com/ethics/virtue-ethics/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Dieter Rams, “Design by Vitsœ,” speech, Jack Lenor Larsen’s New York showroom, December 1976, last accessed March 19, 2020: <a href="https://www.vitsoe.com/files/assets/1000/17/VITSOE_Dieter_Rams_speech.pdf" target="_blank" rel="noopener">https://www.vitsoe.com/files/assets/1000/17/VITSOE_Dieter_Rams_speech.pdf</a>. <a href="https://matthewstrom.com/ethics/virtue-ethics/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Katharine Schwab, “10 Principles For Design In The Age Of AI,” <em>Fast Company</em>, published January 30, 2017,<a href="https://www.fastcompany.com/3067632/10-principles-for-design-in-the-age-of-ai" target="_blank" rel="noopener"> https://www.fastcompany.com/3067632/10-principles-for-design-in-the-age-of-ai</a>. <a href="https://matthewstrom.com/ethics/virtue-ethics/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>Hursthouse and Pettigrove, “Virtue Ethics.” <a href="https://matthewstrom.com/ethics/virtue-ethics/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The unexamined life
2020-03-30T00:00:00Z
https://matthewstrom.com/ethics/the-unexamined-life/
<h2 id="why-ethics%3F">Why ethics?</h2>
<p>The 2010s were a remarkable decade for technology. Day after day, tech lined the front pages of major newspapers, the chyrons of broadcast news, and the glossy sheets of magazines. And in 2019, the trend took a turn: the stories became about the <em>ethics</em> of technology. Not the ethics of future technology — that’s still the realm of science fiction. Not the regular “ethics of AI” or “ethics of cloning” think pieces. Instead, 2019 saw countless discussions of the ethics of the technology we all use every day:</p>
<ul>
<li>
<p>In January, TechCrunch reported that Facebook was paying teens to install software on their phones that would circumvent built-in security features in order to collect personal data.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/the-unexamined-life/#fn1" id="fnref1">1</a></sup></p>
</li>
<li>
<p>In April, ProPublica reported that TurboTax was using deceptive design and search engine practices to make it extremely difficult to use its government-mandated Free File program.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/the-unexamined-life/#fn2" id="fnref2">2</a></sup></p>
</li>
<li>
<p>In August, Google disclosed a substantial security vulnerability in Apple’s iOS operating system. Apple dismissed the impact of the vulnerability but admitted that an attack utilizing the vulnerability “affected fewer than a dozen websites that focus on content related to the Uighur community.” The Uighurs are an ethnic minority currently subject to immense repression, including surveillance and mass detention, in China.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/the-unexamined-life/#fn3" id="fnref3">3</a></sup></p>
</li>
<li>
<p>In October, Facebook announced Facebook News, a feature of its flagship application that will carry content from what it calls “trusted” sources. Included in those sources is Breitbart, a far-right website that frequently espouses racist and xenophobic viewpoints.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/the-unexamined-life/#fn4" id="fnref4">4</a></sup></p>
</li>
</ul>
<p>These are just samples of the many ways in which new technology leads to new ethical questions. And every time these topics are debated, the design community asks itself: how could a designer have contributed to these questionable outcomes? Just how responsible are the designers for these outcomes? What should a designer do when asked to contribute to an ethically dubious project?</p>
<p>James Cartwright, editor at AIGA’s <em>Eye on Design</em>, summed up the conflict neatly:</p>
<blockquote>
<p>Some of the companies designers are so keen to serve are masking a lack of ethics behind a beautifully polished veneer; a selection of morally questionable actions perpetrated by companies on that wish list include the dissemination of fake news, manufacturing products in factories with non-existent rights and high suicide rates among its workers, and driving up the cost of property rental in cities across the world.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/the-unexamined-life/#fn5" id="fnref5">5</a></sup></p>
</blockquote>
<h2 id="the-role-of-ethics-in-design">The role of ethics in design</h2>
<p>Many authors have discussed the ethics of design.</p>
<p>Lots of articles address why design needs ethics. A great place to start is <a href="https://spotify.design/articles/2019-01-18/designing-for-tomorrow-a-discussion-on-ethical-design/" target="_blank" rel="noopener">Designing for Tomorrow - A Discussion on Ethical Design</a> by Lu Han. Han sets out the case for design’s role in hurting people and its responsibility to prevent further harm. She discusses the incentives that lead to harmful experiences and gives great suggestions for how designers can change the way they work to reduce the harm that software causes.</p>
<p>There are examples of what ethical design looks like. One of my favorites is Trine Falbe’s <a href="https://www.smashingmagazine.com/2018/03/ethical-design-practical-getting-started-guide/" target="_blank" rel="noopener">Ethical Design: The Practical Getting-started Guide</a>. Falbe identifies the results of unethical design — surveillance capitalism and dark patterns, for example — and cites real-world examples of how ethical design leads to better outcomes.</p>
<p>There are even arguments for why designers don’t need ethics. In 2019, Cade Diehm gave a talk called <a href="https://slideslive.com/38919933/will-design-ethics-save-software" target="_blank" rel="noopener">“Will Design Ethics Save Software?”</a> Diehm contends that advocates for ethical design — he gives Spotify as an example — are often the ones that are guilty of unethical practices like making it harder for artists to get paid for their work. Designers, Diehm says, can’t make ethical decisions when the companies they work for are fundamentally unethical. In this case, designers talking about ethics contributes to bad outcomes rather than preventing them:</p>
<blockquote>
<p>If good design is possible without resorting to the tactics of a used-car salesman — and it is — then by Spotify’s own standards they have practiced ethical design. But positioning design ethics as a practice-based framework, this liberates the team from the problems that their work enables, and it’s hard not to be cynical and interpret this as a deflection of deep, systemic problems.</p>
</blockquote>
<p>I provide all these viewpoints to illustrate just how much of a minefield the conversation about ethics in design can be. For every essay about the ways we can purposefully apply ethical frameworks to the practice of design, there are ten news stories about dark patterns, spear phishing, data breaches, and digital addiction.</p>
<p>As you can see, the problem is not that designers aren’t talking about ethics. Ethics is now a common subject at most design conferences: AIGA’s 2020 conference promises to include “a diverse roster of speakers who are shining a light today on the topics and narratives that enable all of us to create better bridges to each other. Together, we’ll explore crucial topics such as Design Ethics, D+I, Automation, Future of Work, Future of Cities, Food, and more.”<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/the-unexamined-life/#fn6" id="fnref6">6</a></sup></p>
<p>The problem is that the community lacks a shared vocabulary. Designers debate “justice,” “equality,” “equity,” and “fairness” without addressing the subtle differences or acknowledging that they are different ideas at all. The lack of common ground results in difficult conversations full of misunderstandings.</p>
<p>I’d like to change that.</p>
<p>In the next four essays, I’ll provide historical context into the main schools of ethics — what philosophers call normative ethical theories.</p>
<p>I’ll also provide examples of how design can be seen through the lens of each theory. I’ll explore the strengths and weaknesses of each, comparing and contrasting the theories; none are perfect, but each is useful in its own way.</p>
<p>Before we dive in, let’s go where it all began: the last days of Socrates.</p>
<h2 id="socrates">Socrates</h2>
<p>Socrates was one of the founders of Western philosophy. He was a scholar, a soldier, a stonemason, and weirdly, not much of a writer. We don’t know much else about Socrates’ life. His teachings come to us through writers like Xenophon and Plato. One of the few biographical details we know about Socrates is how he spent his days: asking Athenians questions, exploring their answers, and attracting groups of people to hear his debates.</p>
<p>Occasionally, Socrates would corner a politician, challenging them to a duel of wits. While Socrates believed that this grandstanding was his duty, the politicians didn’t see it that way; Socrates was making them look bad in front of their constituents. In 399 BC, the Athenians put Socrates on trial for the dubious charges of “moral corruption and impiety.” Plato, a friend and student of Socrates, wrote an account of this trial called <em>Apology of Socrates</em>.</p>
<p>In the <em>Apology</em>, Socrates defends his behavior, but the jury finds him guilty. Before his sentencing, Socrates cheekily explains that no punishment would be appropriate; the jury should really give him a reward for all his teachings and wisdom. Socrates doesn’t even want to settle for an easy punishment like exile:</p>
<blockquote>
<p>Someone will say: Yes, Socrates, but cannot you hold your tongue, and then you may go into a foreign city, and no one will interfere with you? Now I have great difficulty in making you understand my answer to this… if I say that the greatest good of man is daily to converse about virtue… that the life which is unexamined is not worth living — that you are still less likely to believe.<sup class="footnote-ref"><a href="https://matthewstrom.com/ethics/the-unexamined-life/#fn7" id="fnref7">7</a></sup></p>
</blockquote>
<p>Socrates can’t fathom a life without philosophy. He can no more stop challenging the nature of ethics than he can stop breathing. The jury agrees and sentences him to death.</p>
<p>Socrates’ trial, as told by Plato, was the spark that ignited Western philosophy. For thousands of years since Socrates’ death, philosophers have followed in his footsteps, examining themselves and others.</p>
<h2 id="the-way-forward">The way forward</h2>
<p>According to the Oracle at Delphi, Socrates was the wisest man in Greece. In his trial, Socrates describes his disbelief on hearing the oracle’s pronouncement. He asks, “What can the god mean? and what is the interpretation of this riddle? for I know that I have no wisdom, small or great.” One clue might be the inscription above the entrance to the oracle’s shrine: “Know thyself.”</p>
<p>By the end of this series, I hope that you’ll know yourself a little better. At the very least, you’ll be able to apply ethical thinking to your own work and to the work of other designers. And through the common language of philosophy, your conversations will be more informed, more constructive, and more compassionate.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Josh Constine, “Facebook pays teens to install VPN that spies on them,” TechCrunch, published January 29, 2019, <a href="https://techcrunch.com/2019/01/29/facebook-project-atlas" target="_blank" rel="noopener">https://techcrunch.com/2019/01/29/facebook-project-atlas</a>. <a href="https://matthewstrom.com/ethics/the-unexamined-life/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Justin Elliott, “TurboTax Deliberately Hid Its Free File Page From Search Engines,” ProPublica, published April 26, 2019, <a href="https://www.propublica.org/article/turbotax-deliberately-hides-its-free-file-page-from-search-engines" target="_blank" rel="noopener">https://www.propublica.org/article/turbotax-deliberately-hides-its-free-file-page-from-search-engines</a>. <a href="https://matthewstrom.com/ethics/the-unexamined-life/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>John Koetsier, “Apple Hints China Behind ‘Billion Device iPhone Hack’ That Google Reported,” <em>Forbes</em>, September 6, 2019, <a href="https://www.forbes.com/sites/johnkoetsier/2019/09/06/apple-hints-china-behind-billion-device-iphone-hack-that-google-reported/#51b8d07e12c9" target="_blank" rel="noopener">https://www.forbes.com/sites/johnkoetsier/2019/09/06/apple-hints-china-behind-billion-device-iphone-hack-that-google-reported/#51b8d07e12c9</a>. <a href="https://matthewstrom.com/ethics/the-unexamined-life/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Casey Newton, “Facebook’s embrace of Breitbart doesn’t add up,” The Verge, published October 29, 2019: <a href="https://www.theverge.com/interface/2019/10/29/20936441/facebook-news-breitbart-mosseri-trust-political-ads" target="_blank" rel="noopener">https://www.theverge.com/interface/2019/10/29/20936441/facebook-news-breitbart-mosseri-trust-political-ads</a>. <a href="https://matthewstrom.com/ethics/the-unexamined-life/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>James Cartwright. “Should Designers Take Responsibility for the Ethics of Their Clients?” Eye on Design, published February 13, 2017:<a href="https://eyeondesign.aiga.org/designers-should-take-responsibility-for-the-ethics-of-their-clients/" target="_blank" rel="noopener"> https://eyeondesign.aiga.org/designers-should-take-responsibility-for-the-ethics-of-their-clients/</a>. <a href="https://matthewstrom.com/ethics/the-unexamined-life/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>“Theme and Chair,” AIGA Design Conference, AIGA, the professional association for design, last accessed March 19, 2020: <a href="https://designconference.aiga.org/about/" target="_blank" rel="noopener">https://designconference.aiga.org/about/</a>. <a href="https://matthewstrom.com/ethics/the-unexamined-life/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>Plato, <em>Apology</em>, translated by Benjamin Jowett, The Internet Classics Archive, Daniel C. Stevenson, Web Atomics, last accessed March 18, 2020: <a href="http://classics.mit.edu/Plato/apology.html" target="_blank" rel="noopener">http://classics.mit.edu/Plato/apology.html</a>. <a href="https://matthewstrom.com/ethics/the-unexamined-life/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
What is a brand?
2020-03-04T00:00:00Z
https://matthewstrom.com/writing/what-is-a-brand/
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-0.jpg" alt="" /></figure>
<p>A few weeks ago, I jumped into a new job as the head of a design team at a startup called <a href="https://www.simplehealth.com/" target="_blank" rel="noopener">SimpleHealth</a>. One of my first tasks is to kick off a big brand update. Full creative control, clear product/market fit, a long timeline — this is going to be a breeze. Right?</p>
<p>Only, I asked myself a question that — honestly — I don’t think I’ve asked in my 15-year career.</p>
<p><strong>What is a brand?</strong></p>
<p>This is a question that a director of design should be able to answer. I can’t answer it — at least, as I write this sentence, I don’t know the answer. And maybe by the last sentence of this essay, I won’t know the answer, either.</p>
<p>But I think I can boil this question down a bit, to see what a brand really comprises, to understand it more fundamentally.</p>
<h2 id="a-wrong-start">A wrong start</h2>
<p>A brand is a graphic that says “I own this thing.”</p>
<p>That’s not exactly right. But at one point in time, that’s all a brand was. The earliest examples of graphic representations of ownership date back to the ancient Egyptians: Egyptian herders would mark their cattle to deter theft. Marks of provenance extended to other vocations; in Ancient Greece, India, and China, ceramic makers would use everything from their own thumb print to simple symbols to sign their work.</p>
<p>Over time, since the best ceramics came from only a few of the most skilled potters, the potters’ signature became a key signifier of quality. When buying, selling, or trading, these marks were crucial to estimating the value of a pot. Fakes were rampant. <sup class="footnote-ref"><a href="https://matthewstrom.com/writing/what-is-a-brand/#fn1" id="fnref1">1</a></sup></p>
<p>So, a brand is a graphic that says “This thing is of high quality.”</p>
<p>But that’s not quite right, either. At least, not today, because between 600 and 2020 AD we invented advertising. This innovation has changed the definition of brand entirely.</p>
<p>Advertising came of age in the late 19th century out of necessity. As manufacturers made more and more products, and stores increased their shelf space, companies tried new ways of identifying their goods. When imbued with attractive personality traits like thriftiness, cleanliness, youthfulness, and luxury, products stood out and sold better.</p>
<p>In the 20th century, modern psychology and the advertising industry, blending concepts from propaganda, anthropology, and economics, have shaped the brands we are most familiar with. A brand no longer is just an identifier, a sign of ownership, or a marker of quality.</p>
<h2 id="a-better-start">A better start</h2>
<p>A brand is a way to quickly communicate the qualities of a company, product or service.</p>
<p>(A note on “quickly:” there needs to be an adjective in our definition of a brand. A brand isn’t just <em>communication in general,</em> or we’d see billboards filled with 12-point type explaining products in lucid detail. There’s something about a brand that requires brevity, efficiency, and … quickness. It’s probably not the right word. But this feels workable - it’ll do for now.)</p>
<p>Ok, so what qualities does a brand communicate?</p>
<h3 id="1.-what-it-is">1. What it is</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-3.jpg" alt="Apple advertisement from 1976" /><figcaption>Apple advertisement from 1976</figcaption></figure>
<p>The most basic thing a brand should communicate is what, exactly, the company/product/service is. When Apple started its life as a two-man team, it was called “Apple Computer Company,” making it very clear that they sold computers, not fruit. When the company introduced its most revolutionary product to date — the iPhone — it shortened its name to “Apple Inc.”</p>
<h3 id="2.-how-it-works">2. How it works</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-2.jpg" alt="Dove advertisements from 1958 (left) and 1960(right)" /><figcaption>Dove advertisements from 1958 (left) and 1960(right)</figcaption></figure>
<p>When it launched in 1957, Dove sold a soap they called the “beauty soap bar.” Their advertisements carried a single message, spelled out explicitly at the very top: “Dove creams your skin while you bathe.” Then, at the bottom, “Dove is one-quarter cleansing cream.” That was Dove’s brand: it’s a gentler version of soap.</p>
<h3 id="3.-who-it%E2%80%99s-for">3. Who it’s for</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-4.jpg" alt="Lululemon storefront" /><figcaption>Lululemon storefront</figcaption></figure>
<p>Lululemon was founded in 1998, when Yoga was still a nascent phenomenon in the America. Gym clothes were not yoga-friendly; they were loose-fitting and poorly made, causing problems for yoga practitioners who needed to stretch and bend and happy baby pose on their mats. Chip Wilson saw this need, and created a brand that spoke to women who practiced Yoga.</p>
<h3 id="4.-why-it-exists">4. Why it exists</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-5.jpg" alt="Nike shoes, by Kristian Egelund" /><figcaption>Nike shoes, by <a href="https://unsplash.com/@kristianegelund?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">Kristian Egelund</a></figcaption></figure>
<p>Nike is one of the most recognizable brands in the world. But its success depends on the popularity on a bizarre hobby: running. “Run?” I hear myself asking, “for fun?” Nike spends billions of dollars every year convincing people to run — and, by the way, you’ll need some shoes to do that. Running is for gritty, strong, passionate, driven individuals. Nike helps you run.</p>
<hr />
<p>I’ve put these qualities in this order because each one climbs up a rung on the ladder of abstraction. What you sell is much more concrete than why you’re selling it. And how your product works is easier to communicate than who it’s for.</p>
<p>Not all brands climb this ladder to the top. For a brand like WD-40, all four qualities are the same:</p>
<ol>
<li>What is it? A spray that makes things not squeak.</li>
<li>How does it work? Spray it on, things stop squeaking.</li>
<li>Who is it for? People with squeaks.</li>
<li>Why does it exist? To stop things from squeaking.</li>
</ol>
<p>And that works for WD-40. But most companies (and services and products) aren’t WD-40. They need to communicate more.</p>
<p>How can a brand get these messages across?</p>
<h2 id="brand-layers">Brand layers</h2>
<p>How a brand communicates varies widely between companies (and products and services). There’s a similar ladder of abstraction to be climbed here, and it can be seen in the way brands have evolved over the past 100 years.</p>
<h3 id="1.-words">1. Words</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-6.jpg" alt="Apple’s ‘Think Different’ slogan" /><figcaption>Apple’s ‘Think Different’ slogan</figcaption></figure>
<p>Early brands used words exclusively to communicate. Lucky Strike Cigarettes spelled it out in their early ad campaigns: “It’s toasted.” “20,679 physicians say Luckies are less irritating.” It’s “your throat protection — against irritation — against cough.” Words can communicate what, how, and who. The most powerful words — “Think different.” “Just do it.” “Because You’re Worth It.” — can communicate why.</p>
<h3 id="2.-experiences">2. Experiences</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-7.jpg" alt="Design Patent for Coca Cola, from Archives New Zealand" /><figcaption>Design Patent for Coca Cola, from Archives New Zealand</figcaption></figure>
<p>Most of what comes to mind when I think of a brand is in the sensory realm. Colors, fonts, images, logos, videos, sounds, smells, textures, all of these things are used by brands to communicate ideas. In the 1930s and 40s, Coca Cola refined and exploited every sensation — the shape of their glass, the feeling of the carbonation on the tongue, the sound of the bottle opening — to communicate that their beverage was refreshing.</p>
<h3 id="3.-emotions">3. Emotions</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-8.jpg" alt="Spotify playlist covers, from Spotify Design" /><figcaption>Spotify playlist covers, from <a href="https://spotify.design/articles/2020-02-20/designing-for-belonging-why-image-localization-matters/" target="_blank" rel="noopener">Spotify Design</a></figcaption></figure>
<p>More recently, companies have focused on the emotions they want consumers to associate with their products. Spotify’s 2015 rebrand by creative agency Collins was almost exclusively geared towards emotion: the bold colors, stark typography, and use of photography all meant to match moments when listeners “cry, cheer, scream, sing, jump, or get chills," as Collins put it — “burst” with emotion.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/what-is-a-brand/#fn2" id="fnref2">2</a></sup></p>
<hr />
<p>Words are more concrete than experiences which are more concrete than emotions. But the most successful brands work on all three layers.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/brand-1.jpg" alt="" /></figure>
<h2 id="putting-it-all-together">Putting it all together</h2>
<p>A brand is words, experiences, and emotions that quickly communicate what a company is, how the company works, who the company serves, and why the company exists.</p>
<p>It’s a bit clunky. But it encapsulates the breadth of what a brand is, or at least what a brand can be.</p>
<p>As we do the work of updating SimpleHealth’s brand, it might turn out that this framework isn’t very helpful at all. But I think it’s a good place to start.</p>
<hr />
<p>Special thanks to <a href="http://joshpetersel.com/" target="_blank" rel="noopener">Josh Petersel</a> for reviewing an earlier version of this essay.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Khan, S.U. and Mufti,O., “The Hot History and Cold Future of Brands”, Journal of Managerial Sciences, Vol. 1, No. 1, 2007, p. 76 <a href="https://matthewstrom.com/writing/what-is-a-brand/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://www.wearecollins.com/work/spotify/" target="_blank" rel="noopener">https://www.wearecollins.com/work/spotify/</a> <a href="https://matthewstrom.com/writing/what-is-a-brand/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
A brief guide to design feedback
2020-02-20T00:00:00Z
https://matthewstrom.com/writing/critique-vs-review/
<figure data-type="image"><img src="https://matthewstrom.com/images/feedback.jpg" alt="" /></figure>
<p>Design feedback is one of the challenges I return to over and over again. It never seems to get easier, no matter how many times I practice or how many different tactics and frameworks I try.</p>
<p>Recently, I did my first rounds of feedback with a new team. Once again, I was nervous. To try and ease the uncertainty, I wrote a guide to feedback based on my past experience, and shared it with the team. While the feedback session still exhibited some classic speed bumps — prescriptive feedback, uneven participation, ‘can we see a few options,’ — I believe the shared context set good baselines for us to improve on in the future.</p>
<p>So here’s the guide. It’s a work in progress, and I already have a few small tweaks to make based on our first feedback session. But I thought it would be useful to share.</p>
<hr />
<h2 id="purpose">Purpose</h2>
<p>The goal of this document is to establish consistent guidelines for giving and receiving feedback on design, as well as reviewing and approving design as a group.</p>
<p>Please read these guides before attending your first critique or review.</p>
<p>Much of this guide is adapted from <em><a href="https://www.amazon.com/Discussing-Design-Improving-Communication-Collaboration/dp/149190240X" target="_blank" rel="noopener">Discussing Design</a></em> by Adam Connor and Aaron Irizarry.</p>
<hr />
<h2 id="critique">Critique</h2>
<p><strong>The goal of design critique is to drive iteration.</strong> After critique, the design will continue to change.</p>
<p>A critique is effective when:</p>
<ul>
<li>All participants feel engaged in making the design better</li>
<li>The critique-givers are confident they were heard and understood</li>
<li>The critique-receivers are confident they can take action on what they received</li>
</ul>
<p>A critique is ineffective when:</p>
<ul>
<li>Some participants don’t have a chance to contribute, and others feel like they have nothing to contribute</li>
<li>The critique-givers aren’t sure they got their point across</li>
<li>The critique-receivers aren’t sure they understand how to proceed</li>
</ul>
<p>Critiques can be large or small, and they can include everyone from stakeholders and decision-makers to the generally curious.</p>
<h3 id="how-to-receive-critique">How to receive critique</h3>
<p>The key to getting effective critique is creating a shared point of view before asking for input. Establish this baseline by answering the following questions:</p>
<ul>
<li>What problem are we trying to solve?</li>
<li>Who has this problem?</li>
<li>What problems are we not trying to solve?</li>
<li>How will we know we’ve solved the problem?</li>
</ul>
<p>When presenting design, provide context to critique-givers on your decision-making process. Call attention to elements of your design that solve problems, and point out constraints. Remind participants of our design principles and industry best practices. Solicit and answer questions.</p>
<p>Most importantly, listen actively and read with an open mind. Receive critique without judgement, practice empathy, and express gratitude.</p>
<h3 id="how-to-give-critique">How to give critique</h3>
<p>Giving critique is a skill; it begins with the right intentions and takes practice to get right. Great critique helps improve design. Poor critique leads to frustration and confusion.</p>
<p>When looking at a design, start with intentions:</p>
<ul>
<li>It’s natural to have a gut reaction. Maybe it’s “I don’t get it,” maybe it’s “This is so cool!” Hold on to that reaction. Take time to ask yourself: “why am I having this reaction?”</li>
<li>Make sure the recipient is ready for critique. Even feedback with the best intentions can be unhelpful if it’s given at the wrong time. If the designer hasn’t asked for critique, but you still want to share your thoughts, reach out and suggest that you discuss when it’s the right time.</li>
<li>Understand the goals, audience, and constraints of the design. If you can’t find this information, ask questions.</li>
</ul>
<p>To formulate your critique, answer the following questions:</p>
<ol>
<li>What is the objective of this design?</li>
<li>What elements of this design are related to the objective?</li>
<li>Are those elements effective in achieving the objective?</li>
<li>Why or why not?</li>
</ol>
<p>When providing critique, try to share what you think is working with as much enthusiasm as you describe what isn’t working. Avoid the compliment sandwich; be clear, candid, and kind.</p>
<hr />
<h2 id="review">Review</h2>
<p><strong>The goal of design review is to commit to a final design.</strong> If the team commits, no more work is needed. If there are objections, everyone will have clear steps to resolve them.</p>
<p>A review is effective when:</p>
<ul>
<li>The team commits</li>
<li>Designers have the full backing of the stakeholders to proceed</li>
<li>Stakeholders have the time and space to voice any objections</li>
<li>If there are objections,
<ul>
<li>Designers know exactly how to resolve the objections</li>
<li>Stakeholders know when and how their objections will be resolved</li>
</ul>
</li>
</ul>
<p>A review is ineffective when:</p>
<ul>
<li>The team does not commit</li>
<li>Designers don’t feel trusted by their stakeholders
-Stakeholders don’t feel like their objections were taken into account</li>
<li>If there are objections,
<ul>
<li>Designers don’t know how to resolve the objections</li>
<li>Stakeholders don’t know when or if their objections will be resolved</li>
</ul>
</li>
</ul>
<p>Reviews should be small. They should only involve decision-makers or key stakeholders. Reviews are about consent, not consensus.</p>
<p>Design reviews are similar to code reviews: code reviews find bugs, maintain consistency, and raise potential integration issues. Code reviews are an important step in maintaining a fast-moving and collaborative code base. In the same way, design reviews help designers remove blind spots and maintain a consistent quantity and quality of output.</p>
<h3 id="what-is-an-objection%3F">What is an objection?</h3>
<p>An objection is a very specific, very powerful form of feedback. Objections come from asking the question: <strong>Is this safe to try?</strong> An objection should be raised if:</p>
<ul>
<li>The proposal might put the business at risk</li>
<li>The proposal could erode the trust of our patients</li>
<li>This proposal might be harmful to anyone’s health or personal safety</li>
</ul>
<p>This gets at the heart of what makes design reviews so hard: as a stakeholder, you are accountable for the outcomes of the design, even though you are not the person doing the design.</p>
<p>This tension is why we don’t ask “is this the best it could possibly be?” It’s a question breeds skepticism; it comes from a position of doubt. The answer to this question is always “no, it could always be better.” And nobody knows that better than the designer.</p>
<p>Finding “good enough” — a point that is within the safety margins of the project — allows the team to deliver quickly. Fast delivery gives the team time to gather data and solicit customer feedback. This research helps us raise our standards. “Good enough” is a virtuous cycle.</p>
<h3 id="how-to-receive-a-review">How to receive a review</h3>
<p>First, establish a shared understanding with your stakeholders. By the time a review happens, the design has probably gone through many iterations. Recap the history of the design. Explain why decisions were made. Re-state the problem and intended outcomes. Clearly define the audience. Make it obvious exactly what you’re seeking commitment on.</p>
<p>If a stakeholder raises an objection:</p>
<ol>
<li>Take a deep breath. It’s hard to receive directive feedback.</li>
<li>Re-state the objection clearly. Say, “If I’m understand you correctly, your objection is that _____”</li>
<li>If the stakeholder has not provided one, propose a solution. “If we do _____, will that resolve your objection?”</li>
<li>If the stakeholder has provided a solution, but you can think of a more suitable solution, suggest it.</li>
</ol>
<p>If you can’t quickly identify a solution, you may need to spend more time iterating on the design.</p>
<h3 id="how-to-give-a-review">How to give a review</h3>
<p>As in critique, it’s important to understand the context of a design when giving a review. If you don’t have the necessary information to assess the proposed design, ask lots of questions. Make sure to understand:</p>
<ul>
<li>The intended audience</li>
<li>The problem being solved</li>
<li>The constraints and tradeoffs impacting the design</li>
<li>The feedback that went into previous iterations</li>
</ul>
<p>If the design doesn’t reach the level of “good enough”, or if it is not safe to try, raise an objection:</p>
<ol>
<li>Clearly state the way the design fails to meet our standards of quality or safety. Be candid.</li>
<li>Have a solution in mind, but listen to alternative solutions with an open mind.</li>
<li>Give the designer a roadmap to resolving your objection.</li>
</ol>
<p>Objections should be raised with care. Discussing objections requires vulnerability, but addressing them directly is the fastest path to closing feedback loops and committing as a team.</p>
<hr />
<p>This document comes down to a question: how can we building a positive, efficient culture of design feedback?</p>
<p>If you’re doing this in your own work, reach out; let me know what’s worked, and what hasn’t.</p>
Engagement is an antimetric
2020-02-09T00:00:00Z
https://matthewstrom.com/writing/engagement/
<figure data-type="image"><img src="https://matthewstrom.com/images/engagement.jpg" alt="" /></figure>
<p>The attention economy is booming. While advertising, e-commerce, and social media are dominated by monopolies, the market for our attention is flush with competition. New movie studios, VR platforms, streaming services, and merchandisable cinematic universes are launched every day. They win Emmys. They win Oscars. They win Grammys and Golden Globes. But tech’s push into entertainment isn’t about awards. It’s about engagement.</p>
<p>As a word, engagement is meaningless. It’s a stand-in for any number of measurements collected by the tracking technology embedded into every website, app, and TV. For Google, engagement might mean the number of times an ad is seen. To Instagram, engagement is probably a complex formula comprising likes, comments, and follows. Netflix could count the number of hours the average person spends watching <em>Friends</em> as engagement.</p>
<p>A meaningless word, but a meaningful measurement; engagement drives algorithms. So engagement is closely monitored. Right now, product managers, designers, and engineers are planning, building, and shipping to drive more engagement. Those measurements feed the formulae that guide what shows we watch, what ads we see, and what products we buy.</p>
<p>The cycle of engagement feeds itself at a user’s expense. YouTube’s engagement numbers — hours watched, logged-in users — are skyrocketing. Last May, CEO Susan Wojcicki proudly announced that people watch more than 250 million hours of YouTube every day on their TV screens alone.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn1" id="fnref1">1</a></sup> A month later, Kevin Roose reported a story in the <em>New York Times</em> of a college dropout radicalized by YouTube’s recommendation algorithm. He was “pulled into a far-right universe, watching thousands of videos filled with conspiracy theories, misogyny and racism.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn2" id="fnref2">2</a></sup></p>
<p>In 2017, Netflix flexed its muscle as an independent content producer. It debuted award-winning shows like <em>Glow</em>, <em>Dark</em>, <em>13 Reasons Why</em>, <em>Atypical</em>, and <em>Mindhunter</em>. It delivered new seasons of critically acclaimed series like <em>House of Cards</em>, <em>Orange Is the New Black</em>, and <em>Stranger Things</em>. As of April 1st, 2017, Netflix was collecting over 27 million dollars in subscription fees every single day. To grow more, CEO Reed Hastings said, Netflix needed people to sleep less:</p>
<blockquote>
<p>The market is just so vast. You know, think about it, when you watch a show from Netflix and you get addicted to it, you stay up late at night. You really — we’re competing with sleep, on the margin.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn3" id="fnref3">3</a></sup></p>
</blockquote>
<p>Netflix got its wish. An analysis of National Health Interview Survey data from 2010 to 2018 shows that sleep deficiency increased “significantly” — from 30.9% in 2010 to 35.6% in 2018.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn4" id="fnref4">4</a></sup></p>
<p>In 2016, Facebook was caught in its own engagement spiral. A group of small advertisers sued, claiming Facebook had given them misleading video metrics. Indeed, Facebook was overstating the amount of time people spent watching videos on their apps. The magnitude varies widely depending on who’s counting — Facebook says they only inflated numbers by 60% to 80%, while the plaintiffs put the inflation at 150% to 900%. As the lawsuit progressed, internal documents showed that Facebook knew about the reporting “error” and did nothing to fix it.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn5" id="fnref5">5</a></sup> Facebook settled the lawsuit in 2019 for $40 million. Its advertising revenue that year was $16.6 billion.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn6" id="fnref6">6</a></sup></p>
<hr />
<blockquote>
<p>A pattern is a common approach to solving a problem that is proven to work in practice. Conversely, an antipattern is a common approach to solving a problem that leaves us worse off than when we started.
— <em>Scott Ambler, Reuse Patterns and Antipatterns</em><sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn7" id="fnref7">7</a></sup></p>
</blockquote>
<p>An antipattern is a solution to a common problem that seems obvious at first, but turns out to be wrong.</p>
<p>For example: premature optimization is an antipattern. When building a new product, it’s easy to imagine all the potential use cases and future challenges. Solving those problems and preparing your product for success at scale isn’t necessarily a bad thing. But doing too much too soon can slow you down.</p>
<p><strong>An antimetric is a common measurement that leads us to make things worse than they already are.</strong></p>
<p>Engagement is an antimetric. Measuring engagement has led Facebook, Netflix, and YouTube into the moral hazards outlined above. Each risked the health, well-being, and trust of their users and customers to increase engagement. In each case, engagement turned out to be a poor proxy for user value.</p>
<p>Just because someone watches more videos on YouTube doesn’t mean they are getting more value out of their interactions with the website. Just because users scroll further down their newsfeeds doesn’t mean they are making more meaningful connections with their friends and families.</p>
<p>Google wanted people to use Gmail more, so it measured engagement:</p>
<blockquote>
<p>The Gmail team wanted to understand more about the level of engagement of their users. With the reasoning that engaged users should check their email account regularly … our chosen metric was the percentage of active users who visited the product on five or more days during the last week. We also found that this was strongly predictive of longer-term retention, and therefore could be used as a bellwether for that metric.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn8" id="fnref8">8</a></sup></p>
</blockquote>
<p>What Google wanted to measure was long-term retention, a sign that users trust Gmail with their private communication. But long-term retention can’t be measured directly or tracked neatly on a dashboard, so Google measured their users’ habits instead.</p>
<p>An email habit might be a bellwether for Gmail’s retention numbers, but it’s also a predictor of stress and anxiety: a 2015 study showed that reducing email usage reduced stress, and in turn led to greater well-being.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/engagement/#fn9" id="fnref9">9</a></sup> When a measurement is at odds with your users’ happiness, it’s an antimetric.</p>
<hr />
<p>There’s an application that’s been on my phone ever since I first installed it nearly eight years ago. I use it every day, although the company’s metrics probably don’t reflect that. It makes my life better even by sitting, unopened, in a folder. I’ve never paid for it, and it’s never shown me an ad.</p>
<p>It’s called Dark Sky. It’s a weather app.</p>
<p>It works quietly in the background, diligently checking the forecast. Every once in a while — once a week, if I’m lucky — it sends a notification. “Light rain starting in 10 minutes.” I usually don’t even tap on the notification. But I’ll grab an umbrella on my way out the door. “Rain stopping in 5 minutes.” I’ll wait to catch the next train. “Drizzle starting soon!” I’ll hurry up and walk the dog.</p>
<p>Dark Sky has the highest value-to-engagement ratio of any product I’ve ever used. I rely on it. There’s a correlation between that ratio and reliance, and I don’t think it’s a fluke.</p>
<p>When tech companies stop chasing engagement and start focusing on value, we’ll be able to forge a healthy co-existence with our apps, devices, games, and screens. Until then, we’re at the mercy of an antimetric.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Todd Spangler, “YouTube Now Has 2 Billion Monthly Users, Who Watch 250 Million Hours on TV Screens Daily,” <em>Variety</em>, published May 3, 2019, <a href="https://variety.com/2019/digital/news/youtube-2-billion-users-tv-screen-watch-time-hours-1203204267/" target="_blank" rel="noopener">https://variety.com/2019/digital/news/youtube-2-billion-users-tv-screen-watch-time-hours-1203204267/</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Kevin Roose, “The Making of a YouTube Radical,” <em>The New York Times</em>, published June 8, 2019, <a href="https://www.nytimes.com/interactive/2019/06/08/technology/youtube-radical.html" target="_blank" rel="noopener">https://www.nytimes.com/interactive/2019/06/08/technology/youtube-radical.html</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Peter Kafka, “Amazon? HBO? Netflix thinks its real competitor is… sleep,” Vox, published April 17, 2017, <a href="https://www.vox.com/2017/4/17/15334122/netflix-sleep-competitor-amazon-hbo" target="_blank" rel="noopener">https://www.vox.com/2017/4/17/15334122/netflix-sleep-competitor-amazon-hbo</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>Jagdish Khubchandani and James H. Price, “Short Sleep Duration in Working American Adults, 2010–2018,” <em>Journal of Community Health</em>, published September 5, 2019, <a href="https://link.springer.com/article/10.1007/s10900-019-00731-9" target="_blank" rel="noopener">https://link.springer.com/article/10.1007/s10900-019-00731-9</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Suzanne Vranica, “Advertisers Allege Facebook Failed to Disclose Key Metric Error for More Than a Year,” <em>The Wall Street Journal</em>, last updated October 16, 2018, <a href="https://www.wsj.com/articles/advertisers-allege-facebook-failed-to-disclose-key-metric-error-for-more-than-a-year-1539720524" target="_blank" rel="noopener">https://www.wsj.com/articles/advertisers-allege-facebook-failed-to-disclose-key-metric-error-for-more-than-a-year-1539720524</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>“Facebook Reports Second Quarter 2019 Results,” Facebook, published July 24, 2019, <a href="https://investor.fb.com/investor-news/press-release-details/2019/Facebook-Reports-Second-Quarter-2019-Results/default.aspx" target="_blank" rel="noopener">https://investor.fb.com/investor-news/press-release-details/2019/Facebook-Reports-Second-Quarter-2019-Results/default.aspx</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p>Scott Ambler, “Reuse Patterns and Antipatterns,” Dr. Dobb’s, published February 1, 2000, <a href="https://www.drdobbs.com/reuse-patterns-and-antipatterns/184414576?cid=Ambysoft" target="_blank" rel="noopener">https://www.drdobbs.com/reuse-patterns-and-antipatterns/184414576?cid=Ambysoft</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn8" class="footnote-item"><p>Kerry Rodden, Hilary Hutchinson, and Xin Fu, “Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications,” Google, accessed February 5, 2020, <a href="https://storage.googleapis.com/pub-tools-public-publication-data/pdf/36299.pdf" target="_blank" rel="noopener">https://storage.googleapis.com/pub-tools-public-publication-data/pdf/36299.pdf</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref8" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn9" class="footnote-item"><p>Kostadin Kushlev and Elizabeth W. Dunn, “Checking email less frequently reduces stress,” <em>Computers in Human Behavior</em>, Volume 43, February 2015, <a href="https://www.sciencedirect.com/science/article/pii/S0747563214005810" target="_blank" rel="noopener">https://www.sciencedirect.com/science/article/pii/S0747563214005810</a>. <a href="https://matthewstrom.com/writing/engagement/#fnref9" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Breaking looms
2020-02-04T00:00:00Z
https://matthewstrom.com/writing/breaking-looms/
<figure data-type="image"><img src="https://matthewstrom.com/images/looms.jpg" alt="" /></figure>
<p>Let’s talk about Luddites. The actual, real, historical Luddites.</p>
<p>“Luddite” was the label given to a group of English workers’ rights activists in the early 19th century. They owe their name to a man who may never have existed — Ned Ludd. The Luddites were working-class people and artisans. They were reacting to the wave of industrialization that was gathering strength and threatening to overwhelm their way of life; they saw their wages decreasing and their working conditions worsening and they were compelled to pick up pistols and pickaxes and let their countrymen know what was at stake. They chose their targets carefully. Businesses that supported their workers were spared. Businesses that indiscriminately replaced skilled artisans with automated machines were burned to the ground.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/breaking-looms/#fn1" id="fnref1">1</a></sup></p>
<p>Somewhere between then and now “luddite” has become a catchall insult for anyone who irrationally fears new technology. But the capital-L Luddites weren’t irrational, and they didn’t fear technology. They resisted the way technology was used by the bankers and factory owners to increase profit margins to the detriment of skilled laborers.</p>
<p>Design is having a Luddite moment.</p>
<hr />
<p>I’ve been reading (with great joy and keen interest) a sequence of blog posts by <a href="https://frankchimero.com/blog/2020/gardening-vs-architecture/" target="_blank" rel="noopener">Frank Chimero</a>, <a href="https://adactio.com/journal/16369" target="_blank" rel="noopener">Jeremy Keith</a>, <a href="https://daverupert.com/2020/01/the-web-is-industrialized-and-i-helped-industrialize-it/" target="_blank" rel="noopener">Dave Rupert</a>, and <a href="https://bradfrost.com/blog/post/design-systems-agile-and-industrialization/" target="_blank" rel="noopener">Brad Frost</a>. Frank’s essay makes the distinction between gardening and architecture; the former fosters uncertainty to enable surprise, the latter reduces uncertainty to provide predictability. Frank puts modern knowledge work in the “architecture” column — I think he’d include product design as knowledge work.</p>
<p>Jeremy responds, lamenting design systems’ role in the architecturalization of design. The reduction of uncertainty, he says, is in the spirit of efficiency and automation. Why are we so eager to automate away our jobs?</p>
<blockquote>
<p>The usual response to this is the one given to other examples of automation: you’ll be free to spend your time in a more meaningful way. With a design system in place, you’ll be freed from the drudgery of manual labour. Instead, you can spend your time doing more important work … like maintaining the design system.</p>
</blockquote>
<p>Dave picks up this thread:</p>
<blockquote>
<p>This kills me, but it’s true. We’ve industrialized design and are relegated to squeezing efficiencies out of it through our design systems. All CSS changes must now have a business value and user story ticket attached to it. We operate more like <a href="http://bostonreview.net/race/caitlin-c-rosenthal-how-slavery-inspired-modern-business-management" target="_blank" rel="noopener">Taylor and his stopwatch and Gantt and his charts</a>, maximizing effort and impact rather than focusing on the human aspects of product development.</p>
</blockquote>
<p>Brad continues, expanding the discussion to include agile software development:</p>
<blockquote>
<p>If we want to talk about dehumanizing digital work, look no further than Agile. Red lines! Burn rates! Story points! Requirements! Acceptance criteria!</p>
</blockquote>
<p>And later:</p>
<blockquote>
<p>In these structures, people are stripped of their humanity as they’re fed into the machine. It becomes “a developer resource is needed” rather than “Oh, Samantha would be a great fit for this project.” And the effect of all this on individuals is depressing.</p>
</blockquote>
<p>Frank, Jeremy, Dave, and Brad are doing an important job: questioning the tradeoffs we make when we automate our work. What do we stand to gain by participating, as Jeremy says, “in the creation of [our] mechanical successors”?</p>
<hr />
<p>Back to the original Luddites. In 1812, the British military cracked down on the vandalism and violence perpetrated by the movement. Lord Byron, romantic hero and prominent defender of the Luddites, protested the show of force:</p>
<blockquote>
<p>I have been in some of the most oppressed provinces of Turkey; but never, under the most despotic of infidel governments, did I behold such squalid wretchedness as I have seen since my return, in the very heart of a Christian country<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/breaking-looms/#fn2" id="fnref2">2</a></sup></p>
</blockquote>
<p>A show trial of more than 60 men followed. Most were acquitted, but a few of the group’s leaders were convicted, deported, and even executed .<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/breaking-looms/#fn3" id="fnref3">3</a></sup> Lord Byron continued to oppose restrictions on labor protests, but the Luddites soon disappeared into history.</p>
<p>In 1815, Lord Byron had a daughter named Ada. As a teenager, Ada became friends with mathematician Charles Babbage. She went on to apply Babbage’s ideas in one of the most consequential discoveries of the past millennium:</p>
<blockquote>
<p>When she saw some mechanical looms that used punched cards to direct the weaving of beautiful patterns, it reminded her of how Babbage’s engine used punched cards to make calculations, and she developed the historic insight that a calculator could be instructed to handle not just numbers but anything that could be notated in logical symbols, such as music or words or graphics or textile patterns. In other words, she envisioned the modern computer. She also drew up a step-by-step sequence of operations for programming Babbage’s engine to generate a complex series known as Bernoulli numbers. It included subroutines, recursive loops, and a table showing how it would feed into the computer, all of which would be familiar to any C++ coder today. It became the first published software program, earning Ada the title of “the world’s first computer programmer.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/breaking-looms/#fn4" id="fnref4">4</a></sup></p>
</blockquote>
<p>The first software program was written by Ada Lovelace, daughter of Lord Byron, one of the Luddite’s most public advocates. The very jacquard looms that the Luddites fought to destroy were the forerunner to all modern computers.</p>
<hr />
<p>Design systems are used by greedy software companies to fatten their bottom line. UI kits replace skilled designers with cheap commoditized labor.</p>
<p>Agile practices pressure teams to deliver more and faster. Scrum underscores soulless feature factories that suck the joy from the craft of software development.</p>
<p>But progress requires more than breaking looms.</p>
<p>We can create ethical systems based in detailed user research. We can insist on environmental impact statements, diversity and inclusion initiatives, and human rights reports. We can write design principles, document dark patterns, and educate our colleagues about accessibility.</p>
<p>We can pull the weeds at the edges of our systems and feed the roots of our core beliefs.</p>
<p>And ultimately, somewhere in the mess of modern product design, someone will write the first software program. Someone will invent the first computer.</p>
<p>Design’s Ada Lovelace is probably looking at a design system right now.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://thebaffler.com/salvos/a-nod-to-ned-ludd" target="_blank" rel="noopener">https://thebaffler.com/salvos/a-nod-to-ned-ludd</a> <a href="https://matthewstrom.com/writing/breaking-looms/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://api.parliament.uk/historic-hansard/lords/1812/feb/27/frame-work-bill#S1V0021P0_18120227_HOL_7" target="_blank" rel="noopener">https://api.parliament.uk/historic-hansard/lords/1812/feb/27/frame-work-bill#S1V0021P0_18120227_HOL_7</a> <a href="https://matthewstrom.com/writing/breaking-looms/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p><a href="https://web.archive.org/web/20120326170835/http://www.marsdenhistory.co.uk/people/luddites.html" target="_blank" rel="noopener">https://web.archive.org/web/20120326170835/http://www.marsdenhistory.co.uk/people/luddites.html</a> <a href="https://matthewstrom.com/writing/breaking-looms/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p><a href="https://fortune.com/2014/09/18/walter-isaacson-the-women-of-eniac/" target="_blank" rel="noopener">https://fortune.com/2014/09/18/walter-isaacson-the-women-of-eniac/</a> <a href="https://matthewstrom.com/writing/breaking-looms/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
People alignment vs. purpose alignment
2020-01-27T00:00:00Z
https://matthewstrom.com/writing/people-alignment-purpose-alignment/
<figure data-type="image"><img src="https://matthewstrom.com/images/alignment.jpg" alt="" /></figure>
<p>So many words take on different meanings the minute you get to work. Culture no longer means a shared identity in art, music, food, and dance. Engagement no longer means a sustained, meaningful connection.</p>
<p>Other words undergo smaller transformations. The differences in meaning are slight, but they matter. Take alignment, for example: outside of work, only physical things like brakes and paragraphs of text can be aligned. At work, anything can be aligned. People say “I just want to check that we’re aligned,” “Do you have a minute to align,” or “We need alignment before we can take action on this.”</p>
<p>Alignment is frequently listed as one of the keys to a winning business.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/people-alignment-purpose-alignment/#fn1" id="fnref1">1</a></sup> I haven’t encountered an industry where alignment isn’t a daily activity. Like anything taken for granted, it’s worth exploring what’s under the surface of alignment.</p>
<h2 id="the-two-kinds-of-alignment">The two kinds of alignment</h2>
<blockquote>
<p>There is no universal or one-size-fits-all prescription for a winning business. But corporate leaders today seem to agree that strategic alignment is high on the list.</p>
</blockquote>
<p>This quote from the <a href="http://hbr.org/2016/05/a-simple-way-to-test-your-companys-strategic-alignment%5D" target="_blank" rel="noopener">Harvard Business Review</a> uses the word ‘strategic,’ as in strategy, as in plans, not actions. This is an example of one kind of alignment — call it <strong>purpose alignment</strong>.</p>
<p>Your coworker asking you “Are we aligned?” is another kind of alignment: <strong>people alignment</strong>.</p>
<p>The key difference lies in what is being aligned. Purpose alignment happens when a person, place, or process changes to be true to an idea. Some examples of purpose alignment:</p>
<ol>
<li>You read a book on meditation and start doing breathing exercises in the morning.</li>
<li>After seeing the latest wildfires, your brother installs solar panels on his roof to keep his carbon footprint low.</li>
<li>Your company starts focusing on cost reduction and switches to monitoring net revenue per user instead of gross revenue per user.</li>
</ol>
<p>In purpose alignment, there’s an actor (you, your brother, your company), an action (breathing exercises, installing solar panels, net revenue), and an idea (meditation, climate change, cost savings). The action reflects the actor’s belief in the idea.</p>
<p>People alignment happens when one person changes to be true to another person. Some examples of people alignment:</p>
<ol>
<li>Your boss told you to dress more professionally. You start wearing a blazer to work.</li>
<li>You stop going to Chick-fil-A because you’re afraid your coworkers will see you there.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/people-alignment-purpose-alignment/#fn2" id="fnref2">2</a></sup></li>
<li>You want your app to work with screen readers, but you ship it without passing accessibility testing to get a quick win with a stakeholder.</li>
</ol>
<p>In people alignment, there’s an actor (you), an action (wearing a jacket, not eating a chicken sandwich, shipping the feature), and another person’s belief (men’s clothing is more professionally advantageous, eating at Chick-fil-A is anti-LGBTQ, stakeholder happiness comes before accessibility).</p>
<p>In all three of these examples, you might have acted differently absent the other person. Worn clothes you feel comfortable in, eaten a chicken sandwich for lunch, pushed the deadline to improve accessibility. Getting people alignment often requires doing something that does not reflect your own beliefs.</p>
<h2 id="the-good-and-the-bad">The good and the bad</h2>
<p>Both people alignment and purpose alignment have an important role in the work you do. Like anything, neither is strictly good or bad, right or wrong.</p>
<h3 id="the-good-and-the-bad-of-purpose-alignment">The good and the bad of purpose alignment</h3>
<p>Purpose alignment can be a powerful motivator. When you’re acting on your own beliefs, you can endure more resistance and hardship than if you’re simply going through the motions. But purpose alignment finds strength in numbers: when many people are aligned to a purpose, positive effects compound. That’s because purpose alignment is the key ingredient to <em>constructive disagreement</em>.</p>
<p>Constructive disagreement is potent. Jeff Bezos encouraged constructive disagreement in Amazon’s 2016 shareholder letter:</p>
<blockquote>
<p>Use the phrase “disagree and commit.” This phrase will save a lot of time. If you have conviction on a particular direction even though there’s no consensus, it’s helpful to say, “Look, I know we disagree on this but will you gamble with me on it? Disagree and commit?” By the time you’re at this point, no one can know the answer for sure, and you’ll probably get a quick yes.</p>
</blockquote>
<blockquote>
<p>This isn’t one way. If you’re the boss, you should do this too. I disagree and commit all the time. We recently greenlit a particular Amazon Studios original. I told the team my view: debatable whether it would be interesting enough, complicated to produce, the business terms aren’t that good, and we have lots of other opportunities. They had a completely different opinion and wanted to go ahead. I wrote back right away with “I disagree and commit and hope it becomes the most watched thing we’ve ever made.” Consider how much slower this decision cycle would have been if the team had actually had to convince me rather than simply get my commitment.</p>
</blockquote>
<blockquote>
<p>Note what this example is not: it’s not me thinking to myself “well, these guys are wrong and missing the point, but this isn’t worth me chasing.” It’s a genuine disagreement of opinion, a candid expression of my view, a chance for the team to weigh my view, and a quick, sincere commitment to go their way. And given that this team has already brought home 11 Emmys, 6 Golden Globes, and 3 Oscars, I’m just glad they let me in the room at all!</p>
</blockquote>
<p>“Disagree and commit” is only possible if you trust that you and your colleagues share a purpose. Even though Bezos wasn’t aligned with his team’s process or plan, they all wanted their show to succeed.</p>
<p>Without numbers, purpose alignment can be destructive. Groups of people motivated only by their individual beliefs have a difficult time cooperating. Factionalism, partisanship, and tribalism are a result of strict purpose alignment.</p>
<h3 id="the-good-and-the-bad-of-people-alignment">The good and the bad of people alignment</h3>
<p>Being aligned with someone else — regardless of your personal beliefs — requires a leap of faith. This leap of faith can build strong alliances. It can also play a sinister role in office politics.</p>
<p>Getting aligned with the right person at the right time can be rewarding. Cooperating with people who don’t share your beliefs is an underrated skill, one that I am still working to develop. It’s picking your battles; often times it’s better to go along with someone for no other reason than to build or maintain your relationship.</p>
<p>People alignment goes awry when you align with someone who doesn’t value you. Take Lehman Brothers, for example. According to Saj-nicole Joni in a <a href="https://hbr.org/2009/09/lehmans-problem-too-much-align" target="_blank" rel="noopener">2009 article</a>, “Lehman Brothers had one of the strongest cultures of collaboration on Wall Street, right up until its collapse.”</p>
<blockquote>
<p>In the end, it seems that Lehman’s management team became too agreeable — and too loyal, content to follow even when they knew better. In the months and years leading up to the most recent financial crisis, dissent wasn’t an option even for those insiders who had seen a trunk or a tusk (looming distress signals) but were afraid or insufficiently informed to identify the elephant in the room. In Fuld’s view, you were with him or against him, and nobody wanted to be against him. Of course, if you were with him, and if you made it into the top ranks, he took care of you, and you and your family became very wealthy.</p>
</blockquote>
<p>Too much people alignment, absent purpose alignment, can be a critical weakness for any team.</p>
<h2 id="getting-aligned">Getting aligned</h2>
<p>People alignment and purpose alignment ideally happen in tandem. But each have their place in workplace relationships.</p>
<p>When I started writing this, I believed that only purpose alignment mattered. That without staying true to your personal beliefs, it was impossible to do good work. But applying <a href="https://fs.blog/2016/06/value-grey-thinking/" target="_blank" rel="noopener">grey thinking</a>, it’s clear that there are benefits to people alignment in the right circumstances, too.</p>
<p>The most important thing is to recognize the difference between people and purpose alignment, to understand their strengths and weaknesses, and to seek each purposefully.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://hbr.org/2016/05/a-simple-way-to-test-your-companys-strategic-alignment" target="_blank" rel="noopener">https://hbr.org/2016/05/a-simple-way-to-test-your-companys-strategic-alignment</a> <a href="https://matthewstrom.com/writing/people-alignment-purpose-alignment/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Chick-fil-A’s C.E.O., Dan Cathy, has been accused of bigotry for using the company’s charitable wing to fund anti-gay causes. <a href="https://matthewstrom.com/writing/people-alignment-purpose-alignment/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The paradox at the heart of A/B testing
2020-01-09T00:00:00Z
https://matthewstrom.com/writing/ab-testing-paradox/
<figure data-type="image"><img src="https://matthewstrom.com/images/paradox-ab-testing.jpg" alt="" /></figure>
<p>A/B testing began with beer.</p>
<p>At the turn of the 20th century, William Sealy Gosset was exploring new ways of running experiments on his production line. Gosset was trying to improve the quality of Guinness’s signature stout but couldn’t afford to run large-scale experiments on all the variables in play. Fortunately, in addition to being an astute brewer, Gosset was a statistician; he had a hunch there was a way of studying his small snatches of data to uncover new insights.</p>
<p>Gosset took a year off from his work to study alongside another scientist, Karl Pearson. Together, they developed a new way of comparing small data sets to test hypotheses. They published their work in the leading statistics publication at the time, Biometrika. In “The Probable Error of a Mean,” the t-test, a cornerstone of modern statistical analysis, was born.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ab-testing-paradox/#fn1" id="fnref1">1</a></sup></p>
<p>Gosset’s scientific approach was the foundation of a 38-year career with Guinness. He invented more ways of using statistics to make business decisions; founded the statistics department at Guinness; led brewing at Guinness’s newest plant in 1935; and finally, in 1937, became the head of all brewing at Guinness.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ab-testing-paradox/#fn2" id="fnref2">2</a></sup></p>
<p>Since its early days as a tool of science (and beer), statistical decision-making has gone supernova. Today, it is used by every major tech company to make hundreds of thousands of decisions every year. Data-driven tests decide everything from the <a href="https://www.nytimes.com/2014/12/23/upshot/facebook-says-experiments-prove-ads-on-its-site-can-spur-donations.html" target="_blank" rel="noopener">effectiveness of political ads</a> to <a href="https://www.theguardian.com/technology/2014/feb/05/why-google-engineers-designers" target="_blank" rel="noopener">a link’s particular shade of blue</a>. New methods like Fisher testing, multivariate testing, and multi-armed bandit testing are all descendants of Gosset’s early innovations. The most popular of these statistical tests is one of the oldest: A/B testing.</p>
<p>An A/B test is a measurement of what happens when you make a single, small, controlled change. In product design, this means changing something in the interface, like the color of a button or the placement of a headline. To run an A/B test, show an unchanged version of the interface (“A”) to a randomly-selected group of users. Show a changed version (“B”) to another randomly-selected group. Measure the difference in the behavior of the two groups using a t-test, and you can confidently predict how the changed version will perform when shown to all your users.</p>
<p>A/B tests are easy to understand, which explains their popularity in modern software development. But their simplicity is deceptive. The fundamental ideas of A/B tests contain a paradox that calls their value into question.</p>
<h2 id="fredkin%E2%80%99s-paradox">Fredkin’s paradox</h2>
<p>In <em>The Society Of Mind</em>, Marvin Minsky explored a phenomenon that I experience every day as a designer: people often prefer one thing over another, even when they can’t explain their preference.</p>
<blockquote>
<p>We often speak of this with mixtures of defensiveness and pride.<br />“Art for Art’s sake.“<br />“l find it aesthetically pleasing.”<br />“l just like it.”<br />“There’s no accounting for it.“<br />Why do we take refuge in such vague, defiant declarations? ”There’s no accounting for it” sounds like a guilty child who’s been told to keep accounts. And “I just like it" sounds like a person who is hiding reasons too unworthy to admit.</p>
</blockquote>
<p>Minsky recognized that our capriciousness serves a few purposes: We tend to prefer familiar things over unfamiliar. We prefer consistency to avoid distraction. We prefer the convenience of order to the vulnerability of individualism. All of these explanations boil down to one observation, which Minsky attributes to Edward Fredkin:</p>
<blockquote>
<p><strong>Fredkin’s Paradox:</strong> The more equally attractive two alternatives seem, the harder it can be to choose between them—no matter that, to the same degree, the choice can only matter less.</p>
</blockquote>
<p>Fredkin’s Paradox is about equally attractive options. Picking between a blue shirt and a black shirt is hard when they both look good on you. Choices can be hard when the options are extremely similar, too — see the previous link to Google’s infamous “50 shades of blue” experiment. The paradox is that you spend the most time deliberating when your choice makes no difference.</p>
<h2 id="parkinson%E2%80%99s-law-of-triviality">Parkinson’s law of triviality</h2>
<p>In 1955, C. Northcote Parkinson wrote a book called <em>Parkinson’s Law</em>. It’s a satire of government bureaucracy, written when the British Colonial Office was expanding despite the British Empire itself shrinking. In one chapter, Parkinson describes a fictional 11-person meeting with two agenda items: the plans for a nuclear power plant, and the plans for an employee bike shed.</p>
<p>The power plant is estimated to cost $10,000,000. Due to the technical complexity involved, many experts have weighed in. Only two attendees have a full grasp of the budget’s accuracy. These two struggle to discuss the plans, since none of the other attendees can contribute. After a two-minute discussion, the budget is approved.</p>
<p>The group moves on to the bike shed, estimated to cost $2,350. Everyone in the meeting can understand how the bike shed is built. They debate the material the roof is made of — is aluminum too expensive? — and the need for a bike shed at all — what will the employees want next, a garage? — for forty-five minutes. This budget is also approved.</p>
<p>This allegory illustrates what’s called “Parkinson’s law of triviality”:</p>
<blockquote>
<p>The time spent on any item of the agenda will be in inverse proportion to the sum [of money] involved.</p>
</blockquote>
<p>We can generalize Parkinson’s law: <strong>The effort spent discussing a decision will be inversely proportional to the value of making that decision.</strong></p>
<h2 id="putting-it-together%3A-when-a%2Fb-testing-is-the-wrong-tool-for-the-job">Putting it together: when A/B testing is the wrong tool for the job</h2>
<p>When faced with two similar alternatives, Fredkin’s paradox predicts you’ll have a hard time choosing. This is when A/B testing is most appealing: A/B tests settle debates with data instead of deliberation. But our generalization of Parkinson’s law of triviality says that this kind of A/B testing — testing as an alternative to difficult decisions — results in the least value.</p>
<p>Most of the time, A/B testing is worthless. The time spent designing, running, analyzing, and taking action on an A/B test will usually outweigh the value of picking the more desirable option.</p>
<h3 id="alternatives-to-a%2Fb-testing">Alternatives to A/B testing</h3>
<p>Instead of A/B testing, I’ll offer two suggestions. Both are cheaper and more impactful.</p>
<h4 id="alternative-1%3A-observe-five-users">Alternative 1: observe five users</h4>
<p>Tom Landauer and Jakob Nielsen demonstrated in <a href="https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/" target="_blank" rel="noopener">Why You Only Need to Test with 5 Users</a> that insights about design happen logarithmically — that is, the first five users you study will reveal more than 75% of your usability issues. Doing a simple observation study with five users is an affordable way of understanding not just how to improve your design, but also why those improvements work. That knowledge will inform future decisions where a single A/B test can’t.</p>
<h4 id="alternative-2%3A-a-%E2%86%92-b-testing">Alternative 2: A → B testing</h4>
<p>The cheapest way to test a small change is to simply make that change and see what happens. Think of it like a really efficient A/B test: instead of showing a small percentage of visitors the variation and waiting patiently for the results to be statistically significant,<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/ab-testing-paradox/#fn3" id="fnref3">3</a></sup> you’re showing 100% of visitors the variation and getting the results immediately.</p>
<p>A → B testing does not have the statistical rigor that A/B testing claims. But when the changes are small, they can be easily reversed or iterated on. A → B testing embraces the uncertainty of design, and opens the door to faster learning.</p>
<h2 id="when-a%2Fb-testing-is-the-right-tool-for-the-job">When A/B testing is the right tool for the job</h2>
<p>A/B testing is worthless most of the time, but there are a few situations where it can be the right tool to use.</p>
<ol>
<li><strong>When you only have one shot.</strong> Sales, event-based websites and apps, or debuts are not the time to iterate. If you’re working against the clock, an A/B test can allow you to confidently make real-time decisions and resolve usability problems.</li>
<li><strong>When there’s a lot of money on the line.</strong> If Amazon A → B tested the placement of their checkout button, they could lose millions of dollars in a single minute. High-value user behaviors have slim margins of error. They benefit from the risk mitigation that A/B testing provides.</li>
</ol>
<h2 id="conclusion">Conclusion</h2>
<p>If there’s a lot on the line in the form of tight timelines or lots of revenue at stake, A/B testing can be useful. When settling a debate over which color of button is better for your email newsletter, leave A/B testing on the shelf. Don’t get caught by the one-two punch of Fredkin’s paradox and Parkinson’s law of triviality — avoid these counterintuitive tendencies by diversifying your testing toolkit.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>A t test is a statistical method that can be used to show that two sets of data are significantly different. Say you run a small test on your ecommerce website: 1% of users see a green ‘buy now’ button next to each item. You measure two data sets: purchases made by people who see the new button and purchases by people who don’t see the button. Your data shows a slightly higher-than-average purchase rate among people who see the new button. You’d use a t test (probably with Excel or Google Sheets) to determine if the result is a meaningful one with a solid conclusion, or just the result of random fluctuations. <a href="https://www.khanacademy.org/math/ap-statistics/estimating-confidence-ap/one-sample-t-interval-mean/v/introduction-to-t-statistics" target="_blank" rel="noopener">This Khan Academy video</a> is an excellent introduction to t tests. <a href="https://matthewstrom.com/writing/ab-testing-paradox/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Ziliak, S. T. (2008). “Guinnessometrics: The Economic Foundation of ‘Student’s’ t.” Journal of Economic Perspective, 199–216. Retrieved from <a href="https://pubs.aeaweb.org/doi/pdfplus/10.1257/jep.22.4.199" target="_blank" rel="noopener">https://pubs.aeaweb.org/doi/pdfplus/10.1257/jep.22.4.199</a>. <a href="https://matthewstrom.com/writing/ab-testing-paradox/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Statistical significance is the hallmark of the t test. It’s the value that tells you if your results are likely to be an accurate observation instead of a fluke or anomaly. Statistical significance, despite its scientific name, is subject to bias in the form of something called p-hacking. If you’re interested in learning more about p-hacking, <a href="https://journals.plos.org/plosbiology/article?id=10.1371/journal.pbio.1002106" target="_blank" rel="noopener">this paper</a> is a great deep dive. <a href="https://matthewstrom.com/writing/ab-testing-paradox/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
All the books I read in 2019
2019-12-20T00:00:00Z
https://matthewstrom.com/writing/2019-books/
<figure data-type="image"><img src="https://matthewstrom.com/images/books-2019.jpg" alt="" /></figure>
<p>I read 25 books in 2019. That’s slightly more than last year, largely due to my discovery of the Kindle iOS and MacOS apps. The iOS can scroll continuously instead of flipping between discrete pages, which is ideal for the kind of non-fiction books I like to read. I still read on the Kindle itself, but that’s reserved for fiction and text I want to spend a little more time with.</p>
<p>I’ve also started sharing the my thoughts on these books when I finish them. You can see the full list over <a href="https://matthewstrom.com/reading" target="_blank" rel="noopener">here</a>.</p>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="the-fifth-season">The Fifth Season</h2>
<p><span class="c--gray">by N.K. Jemisin</span></p></div><p></p>
<p>I picked up this book after seeing it won the Hugo Award in 2016. I love sci-fi, but had never really gotten into fantasy. This book promised to be a bridge between the two.</p>
<p>Jemisin builds a really fascinating world throughout the book. I enjoyed the way she avoids a lot of typical fantasy tropes, and her storytelling techniques work really well. However, the story suffers from a really common symptom of fantasy: the god-like character who is all powerful and can theoretically solve any crisis instantly without much trouble. This trope makes conflict much less dramatic, and ultimately takes the suspense out of the story.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="discussing-design">Discussing Design</h2>
<p><span class="c--gray">by Adam Connor and Aaron Irizarry</span></p></div><p></p>
<p>This book is a good collection of techniques to improve creative feedback. I’ve used a lot of them since reading it. My favorites:</p>
<ol>
<li><strong>Critique to improve, not critique to approve.</strong> Remind stakeholders that their role isn’t to say ‘yes’ or ‘no,’ rather to give the designer actionable feedback for how to resolve any critical issues.</li>
<li><strong>Incremental vs. iterative</strong> - We often call work iterative when it’s actually incremental. That is: we don’t actually build a full usable version of a product, release it, and then progressively improve it. We start with an unusuable thing, and then slowly build it up until it’s in a largely finished state. Being able to make this distinction helps to set expectations and get the right kind of feedback.</li>
<li><strong><a href="https://en.wikipedia.org/wiki/Six_Thinking_Hats" target="_blank" rel="noopener">Six thinking hats</a></strong> - A good exercise to increase the quality and diversity of feedback is to assign ‘hats’ to participants which guide the kind of feedback they’re expected to give.</li>
</ol>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="21-lessons-for-the-21st-century">21 Lessons for the 21st Century</h2>
<p><span class="c--gray">by Yuval Noah Harari</span></p></div><p></p>
<p>This one wasn’t as good as <em>Sapiens</em>, but was enjoyable nonetheless. Here’s one of my favorite passages:</p>
<blockquote>
<p>Humans were always far better at inventing tools than using them wisely. It is easier to manipulate a river by building a dam than it is to predict all the complex consequences this will have for the wider ecological system. Similarly, it will be easier to redirect the flow of our minds than to divine what that will do to our personal psychology or to our social systems.</p>
</blockquote>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="leviathan-wakes">Leviathan Wakes</h2>
<p><span class="c--gray">by James S. A. Corey</span></p></div><p></p>
<p>I tried to get Sasha to watch the TV show with me, but failed. So I started to read the book instead. I haven’t read any more of the ‘Expanse’ series, so it’s difficult to assess where the hype comes from. In part, I think it’s a blending of genres; there’s the typical science fiction bent, but there’s also a bit of noir, and a dash of post-apocalyptic distopia.</p>
<p>The whole book revolves around a mystery. Oddly, the mystery is solved at the end of the second act. This means the ending of the book feels like a foregone conclusion.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="endurance">Endurance</h2>
<p><span class="c--gray">by Alfred Lansing</span></p></div><p></p>
<p>Shackleton and his team went through an incredible ordeal. It’s impossible to imagine what it’s like to be completely stranded for three years in one of the harshest environments on earth, thousands of miles from the scraps of civilization. Not a single crew member died. How is this possible? Beyond that, the crew kept meticulous notes, even took photos of their ship being crushed by the ice.</p>
<p>An amazing fact: the expedition lasted the length of the first World War. The crew learned about it all retroactively. After all they went through, they returned to a completely different world.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="brave-new-work">Brave New Work</h2>
<p><span class="c--gray">by Aaron Dignan</span></p></div><p></p>
<p>I got the chance to work with Aaron when he was leading a company called Undercurrent. His approach to work was so unique, and so clearly articulated, that I can still detect his impact on the folks he employed, 5 years after Undercurrent ceased to exist.</p>
<p>It was really nice to read all of Aaron’s advice summed up in a simple package. I use a lot of these techniques in my day-to-day: consent-driven decision making, inclusive meetings, and managing in the present. The schools of thought that created these concepts are also fascinating; if you get a chance, do some further reading based on the references in the book.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="exhalation">Exhalation</h2>
<p><span class="c--gray">by Ted Chiang</span></p></div><p></p>
<p>Black Mirror x Borges — great short stories that explore some traditionally sci-fi concepts from more of a prodding, philosophical standpoint. The best part about Chiang’s stories are the feels … instead of being Borges-style think pieces, you get lots of emotional depth. Especially with the parrot.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="trillion-dollar-coach">Trillion Dollar Coach</h2>
<p><span class="c--gray">by Eric Schmidt, Jonathan Rosenberg, and Alan Eagle</span></p></div><p></p>
<p>Bill Campbell was an extraordinary coach. His experience coaching Columbia’s football team clearly influenced his approach to business. But this book isn’t really about Campbell’s coaching style. He cursed a lot, he gave good hugs, and he was a good listener: those are the memorable aspects of Campbell as a coach.</p>
<p>The book is really about the power of networks; Campbell had the good fortune of being connected to the right people at the beginning of Silicon Valley’s meteoric rise. His connections led to relationships with Steve Jobs, Larry Page, Sergey Brin, Eric Schmidt, Marissa Mayer, Sheryl Sandberg, and more. So, the takeaway: be a great coach, but make sure you have the right friends.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="midnight-in-chernobyl">Midnight in Chernobyl</h2>
<p><span class="c--gray">by Adam Higginbotham</span></p></div><p></p>
<p>Nuclear power is one of the cleanest sources of energy on earth. Its potential to save the planet from man-made climate change is enormous. That’s why the Chernobyl disaster is doubly tragic: first, the loss of life and catastrophic damage done to the Pripyat area were entirely preventable with better planning and communication. Second, the psychological impact of the disaster put a complete stop to the development of nuclear energy as a replacement for coal and oil.</p>
<p>Higginbotham does a really good job of illustrating the characters in the story of Chernobyl. Without these characterizations, it’d be difficult to relate to the Soviet planners that were at the center of the mistakes that led to the meltdown.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="einstein">Einstein</h2>
<p><span class="c--gray">by Walter Isaacson</span></p></div><p></p>
<p>In 1905 Einstein had never held an academic position. He published four papers that year: one on the Photoelectric effect (for which he won the Nobel Prize), one on Brownian motion which opened the door for the observation of the atom, one on special relativity which upendended our understanding of space and time, and one on the mass-energy equivalence which demonstrated the famous equation E = mc<sup>2</sup>.</p>
<p>It’s easy to get caught up in the mythos of Einstein, to think of him as the kind of genius that comes along once in a millenium. But the details of Isaacson’s biography paint a picture of the everyday life: family, work, the relatable struggle for recognition and self-fulfilment.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="the-black-swan">The Black Swan</h2>
<p><span class="c--gray">by Nassim Taleb</span></p></div><p></p>
<p>I have a love-hate relationship with Taleb. His writing is dripping with ego. The book might as well be called <em>I Was Right,</em> since that’s the subject most of the time. But I have to hand it to Taleb, the way he tends to be right about things is interesting. I really resonate with the sentiment that people tend to take shortcuts and overlook data when the goal is certainty. Particularly this quote:</p>
<blockquote>
<p>The more information you give someone, the more hypotheses they will formulate along the way, and the worse off they will be. They see more random noise and mistake it for information.</p>
</blockquote>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="thinking%2C-fast-and-slow">Thinking, Fast and Slow</h2>
<p><span class="c--gray">by Daniel Kahneman <span class="book--favorite">★</span></span></p></div><p></p>
<p>It’s hard to overstate the value of understanding bias. This book is a must-read: Kahneman has such a talent for unraveling the counter-intuitive nature of bias, heuristics, and the way people make decisions. His research with Amos Tversky (called <em>prosepect theory</em>) has influenced economics in ways I can’t understand, but the effect is recognizable when you book a hotel online (scarcity bias at play) or check out on Amazon.</p>
<p>The sections of the book on expert intuition were especially relevant at the time I read them, and helped me to write an essay called <a href="https://matthewstrom.com/writing/intuition/" target="_blank" rel="noopener">Intuition vs. Data</a>.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="how-to-do-nothing">How to Do Nothing</h2>
<p><span class="c--gray">by Jenny Odell</span></p></div><p></p>
<p>This book is an expanded version of Odell’s talk/essay <a href="https://medium.com/@the_jennitaur/how-to-do-nothing-57e100f59bbb" target="_blank" rel="noopener">How to Do Nothing</a>. It’s possible to get the gist of the book by reading the talk/essay, so start there if this concept is interesting to you. But there’s a few places in the book that Odell goes deep, and it’s worth a read.</p>
<p>One of my favorite threads throughout the book was the idea of <em>active disengagement.</em> That is, instead of running away from society and living in a mountain cabin off the grid, it is more revolutionary (and much harder) to resist in place. Doing nothing in the middle of the desert is very different than doing nothing in the middle of Times Square.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="pandemic">Pandemic</h2>
<p><span class="c--gray">by A. G. Riddle</span></p></div><p></p>
<p>I picked this up looking for a break after reading a few heavy non-fiction titles. It delivered exactly that: an entertaining read with enough science to keep my brain busy. Specifically, the book includes some ideas from epidemiology, as its heroes have day jobs in agencies like the Centers for Disease Control. The conclusion of the book strays a little bit too far into Dan Brown conspiracy fodder, which means it was ultimately pretty forgettable.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="org-design-for-design-orgs">Org Design for Design Orgs</h2>
<p><span class="c--gray">by Peter Merholz and Kristin Skinner</span></p></div><p></p>
<p>I read this after my design team at Bitly was re-organized into a decentralized structure. I personally preferred being in a centralized org, so I thought I’d try and read a bit to understand why a decentralized org might make sense.</p>
<p>The biggest takeaway from this book is its articulation of the Centralized Partnership model (you can read the chapter on this model on <a href="https://www.oreilly.com/library/view/org-design-for/9781491938393/ch04.html" target="_blank" rel="noopener">O’Reilly’s Website</a>). It’s exactly what I think most design orgs should be: centralized to provide designers with a sense of community and career development, but always partnered with other parts of the organization to deliver business outcomes. Essentially: there is no design in a vacuum.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="articulating-design-decisions">Articulating Design Decisions</h2>
<p><span class="c--gray">by Tom Greever</span></p></div><p></p>
<p>I’m constantly trying to improve the way I work with stakeholders. Feedback is the lifeblood of great design: when you see great design in the world, it’s a product of a group of people that agreed to deliver that design. Seldom is a single designer left alone to make all the decisions.</p>
<p>The author spends a lot of the book setting the scene for a meeting where design is critiqued and feedback is generated. I think that we’re going to quickly lose this model of design feedback. Agile working styles demand that designers deliver faster and faster, so asynchronous feedback will become the new norm. There are a few ideas from the book that can be taken into the new async world, but most will have to be left behind.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="children-of-time">Children of Time</h2>
<p><span class="c--gray">by Adrian Tchaikovksy</span></p></div><p></p>
<p><em>Children of Time</em> is different. It’s definitely sci-fi. It has all the familiar space tropes: laser battles, light-speed travel, planetary crash landings. But its protagonists are spiders. That’s really the only way to begin to explain the different-ness of the book.</p>
<p>The spiders evolve from your garden variety (yow) spiders to extremely evolved intelligent tool-using spiders. Eventually the spiders develop the capacity to reach the upper limits of their atmosphere, building space networks of space stations out of silk. This description captures only one one-hundredth of the book’s plot arc, but I share it only to support my overall review, which is: don’t read this book if you don’t like spiders.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="competing-against-luck">Competing Against Luck</h2>
<p><span class="c--gray">by Clayton M. Christensen, Karen Dillon, Taddy Hall and David S. Duncan</span></p></div><p></p>
<p>This one’s a pretty standard business read; Christiansen (et al, there are lots of co-authors) describes the Jobs to be Done framework, examples of it in action, and ways to implement it in your own work. I picked it up because I’d heard “Jobs to be Done” used all over the place and needed to be able to cut through buzzword bullshit.</p>
<p>The gist is the classic aphorism “People don’t want a quarter-inch drill, they want a quarter-inch hole.” Or, if you prefer business wisdom in meme form:</p>
<figure data-type="image">![](https://miro.medium.com/max/657/1*ZzDRZZItsZO28uteZcN8OQ.png)</figure>
<p>The value of the book might be entirely in some of the more practical advice for finding what your customer’s jobs are. I actually used some of these tools in a recent interview and I think it went over pretty well. All in all, it is a quick read (4 hours), and will probably result in your career being at least $15 more successful.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="rocket-men">Rocket Men</h2>
<p><span class="c--gray">by Robert Kurson</span></p></div><p></p>
<p>The Apollo Program is a fascinating study of organizational design. It started disastrously with Apollo 1’s fatal launchpad fire. Subsequent missions were largely uncrewed, testing components of the lunar flight system. During these early tests, the Soviet space program was advancing much faster than the American’s, putting an immense amount of pressure on NASA to deliver a propaganda victory to the US. NASA was huge, a bureaucracy of epic proportions. And when it came time to plan Apollo 8, NASA’s leaders decided to bet everything they had on a manned orbit of the moon, the first one in history.</p>
<p>The story of Apollo 8’s success is riveting. Kurson does a great job of telling it.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="shanzhai">Shanzhai</h2>
<p><span class="c--gray">by Byung-Chul Han and Philippa Hurd</span></p></div><p></p>
<p>Such a cool thing to read about: concepts that we take for granted like originality, authorship, and duplication are understood entirely different in East Asia. I wonder if it’s possible it is to maintain a truly global marketplace of both ideas and goods when there are some things (like art or literature) which are valued so totally differently by different people. In the west, duplicating something removes all value from the end result, whereas in China a duplicate is often more valuable than the original. Such a completely different way of understanding creativity — do you think it’s possible to adopt this viewpoint as an outsider?</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="the-goal">The Goal</h2>
<p><span class="c--gray">by Eliyahu M. Goldratt and Jeff Cox <span class="book--favorite">★</span></span></p></div><p></p>
<p>This is one of the best business books I’ve read. Granted: I haven’t read a whole lot of business books. But this one is very good nonetheless.</p>
<p>It’s unorthodox: it’s written as a novel. It follows Alex Rogo, a plant manager for a fictional manufacturing conglomerate. Alex’s plant is on the brink of shutting down, and his marriage is in shambles. Through a series of discoveries and experiments, Alex turns the plant around and saves his marriage.</p>
<p>The ideas in the book are an outline of Goldratt’s Theory of Constraints, which is an offshoot and response to Lean Manufacturing and the Toyota Product System. If you don’t already know, I’m really into manufacturing processes; the mental technology created by Henry Ford and Taiichi Ohno have really neat applications in digital product creation. This book was a really neat way to learn about some of those tools and understand them in a real-world (hypothetical) context.</p>
<p>At the end of the book is a more traditional essay that walks through the history of the application of Lean Manufacturing at Hitachi, and discusses how important it is to not simply try to copy the success of other companies by copying their methodologies.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="the-art-of-taking-action">The Art of Taking Action</h2>
<p><span class="c--gray">by Gregg Krech</span></p></div><p></p>
<p>This is a solid, well-organized, somewhat survey-ish collection of essays on what Zen & Buddhism & Eastern philosophy have to say about taking action, being productive in a meaningful and rewarding way. It’s easy to read in chunks (I read it over 6 months).</p>
<p>One of my favorite parts of the book is about using your time wisely. Specifically, when you decide to do (nor not do) something, there’s more than just your own time at stake. Key passage: “Which is longer—15 minutes of waiting for someone who is late, or 15 minutes of keeping others waiting?” That is to say, when you keep someone waiting for 15 minutes, you steal 15 minutes of their time. Apologies if I’m stealing too much of your time with this review.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="radical-candor">Radical Candor</h2>
<p><span class="c--gray">by Kim Malone Scott</span></p></div><p></p>
<p>I read this book because my current manager said it was one of her favorites. She’s a total enigma to me, so I thought reading it would give me some insight into how her brain works.</p>
<p>50% of this book is familiar conventional wisdom type stuff if you’re currently working (or have ever worked) in tech. Management is hard! Maybe have some 1:1s? It’s a roadmap to being a decent manager if you get parachuted into a fully-formed team at a 1k±person org.</p>
<p>25% of the book is good framing for what actually makes a manager effective. These parts I found rather useful. You have to actually, really, truly care about the people you manage before you can be candid with them. Compassion is not the same thing as empathy, and one of the two is far more valuable in a relationship. Sometimes it’s best to be honest with someone even if it will hurt them.</p>
<p>The last 25% of this book is catnip for sociopaths. I usually stick to one color for highlighting (yellow, I think this is an interesting passage) but I brought out a new color for this stuff (red, I vehemently disagree). I worry that assholes of every stripe will over-index on this material. “I regret to say that if you can’t be Radically Candid, being obnoxiously aggressive is the second best thing you can do.” Yes, this is an actual quote from this book.</p>
<p>Kim Scott is infuriating as a character. She name-drops constantly. (paraphrasing) “Oh, this one time my friend Andy Groves said this, which convinced me to work for Sheryl Sandberg instead of working for Larry Page.” I don’t think she ever actually spoke to Steve Jobs, but his name appears more than anyone else in the book. She nostalgically looks back on her first job, running some team at an international diamond syndicate? Weirdly, I can’t relate to that.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="high-output-management">High Output Management</h2>
<p><span class="c--gray">by Andrew S. Grove <span class="book--favorite">★</span></span></p></div><p></p>
<p>I finally finished this after a few years of off-and-on reading. Such a solid book. I found that much of the advice was really befitting a manager-of-managers, which is a very small percentage of people in the workplace. The advice is still solid and applicable nonetheless.</p>
<p>Favorite part: the scorecard at the end! Such a Grove move.</p>
<p>Here’s one of my favorite highlights:</p>
<blockquote>
<p>The idea that planners can be people apart from those implementing the plan simply does not work. Planning cannot be made a separate career but is instead a key managerial activity, one with enormous leverage through its impact on the future performance of an organization.</p>
</blockquote>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="several-short-sentences-about-writing">Several Short Sentences About Writing</h2>
<p><span class="c--gray">by Verlyn Klinkenborg</span></p></div><p></p>
<p>This is a very good book about writing. Not just about the form of writing, or the action of writing. It’s also about why we write, what is so challenging about writing, and what makes good writing good.</p>
<p>After reading the fist half, I found it really hard to write. The book advocates for a style of writing where every single word in every single sentence has a purpose. It is extremely difficult to actually do this.</p>
<p>One of my favorite excerpts:</p>
<blockquote>
<p>The most subversive thing you can do is to write clearly and directly, Asserting the facts as you understand them, Your perceptions as you’ve gathered them.</p>
</blockquote>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="the-square-and-the-tower">The Square and the Tower</h2>
<p><span class="c--gray">by Niall Ferguson</span></p></div><p></p>
<p><em>The Square and the Tower</em> is a history of networks. It begins with the Illuminati and ends with Trump’s election; in between, networks rise and fall in a constant churn. Ferguson combines his own original research with piles of other analyses to paint a picture of the conditions that enable networks or hierarchies to prevail.</p>
<p>It was a little slow getting through the early history of networks, since hierarchies easily prevail when the spread of information can be controlled. I got really into the book as it started covering the 70s in the United States. It turns out Henry Kissinger’s networks were the source of much of the diplomacy happening in that decade; Ferguson’s diagrams of these networks are really neat.</p>
</div>
<hr />
<div class="book">
<div class="l--space-flush">
<h2 id="dare-to-lead">Dare to Lead</h2>
<p><span class="c--gray">by Brené Brown</span></p></div><p></p>
<p>This was another book I read to try and understand my manager’s leadership style. Between this and <em>Radical Candor,</em> I see a pattern.</p>
<p>There’s some good material in <em>Dare to Lead</em>. The best parts delve into the research Brown has done, featuring quotes and case studies of scenarios where “brave” — emotionally-aware —leadership drove positive outcomes.</p>
<p>Other parts of the books are just platitudes. “Rumble with vulnerability,” “embrace the suck,” “learn to rise,” etc are cloying catchphrases, shorthand for more nuanced aspects of emotionally-aware leadership.</p>
<p>The similarities with <em>Radical Candor</em> are most apparent in what I think of as “catnip for sociopaths.” It’s ok, Brown says, to cry at work — so if you make someone cry, maybe you’re just doing a really good job at being emotionally engaged. The paradox is scary: you can cause emotional responses (good and bad) by being emotionally present yourself, or by being completely emotionally removed.</p>
<p>Overall, I think the book isn’t really the best way to get at mindful and compassionate leadership. But it might be worth the short read if you work with any of Brené Brown’s acolytes.</p>
</div>
Product thinking is a lifeline for struggling design systems
2019-12-12T00:00:00Z
https://matthewstrom.com/writing/product-thinking-for-design-systems/
<figure data-type="image"><img src="https://matthewstrom.com/images/product-thinking-1.jpg" alt="" /></figure>
<p>Here’s a common problem: a design team creates a design system. They craft beautiful documentation, crystal-clear guidelines, and meticulously organized files. But the design system never gains traction. Engineers don’t use it, and other designers quickly stop maintaining it. It fails to deliver the outcomes described in myriad case studies, blog posts, and conference talks.</p>
<p>This has happened to me. If you’re a designer, it’s probably happened to you.</p>
<p>The ubiquity of design systems is a double-edged sword. On one hand, designers have many examples to justify the need for a design system. On the other hand, it’s easy to take design systems for granted. Design systems often fail because we — their creators — don’t treat them like products.</p>
<p>Using ideas and tools from product development, we can revive a struggling design system.</p>
<h2 id="idea-1%3A-market-analysis">Idea 1: Market analysis</h2>
<p>When building a new product, product managers often conduct something called market analysis. The goal of market analysis is to understand the opportunity at hand. Market analysis tries to answer the following questions:</p>
<ul>
<li>How many people use products like this today?</li>
<li>How many people could potentially use this product in the future?</li>
<li>What kinds of people use this product?</li>
<li>What are the competitors in this market today?</li>
<li>What will prevent a competitor from entering the market in the future?</li>
</ul>
<p>Doing market analysis helps product makers plan. If the market is large and relatively free of competition, it might make sense to go fast and take risks. If the market is smaller and more crowded, success might follow a slower, more careful path.</p>
<p>Some markets are challenging to analyze. But if you’re working on a struggling design system, market analysis is relatively straightforward. Here are the questions you need to answer:</p>
<h3 id="1.-is-anyone-at-your-company-using-a-competing-design-system%3F">1. Is anyone at your company using a competing design system?</h3>
<p>If your company is small — fewer than 100 people — you can likely answer this question without any research. If your company is larger, do a quick round of investigating. A competing design system might be a formal, previous iteration in Sketch or Figma projects. It might be components from an external library like Material UI or Bootstrap used by developers.</p>
<h3 id="2.-how-many-people-at-your-company-could-benefit-from-using-your-design-system%3F">2. How many people at your company could benefit from using your design system?</h3>
<p>Think big. Design systems aren’t just helpful to designers and developers; product managers, executive stakeholders, marketers, and strategists can all benefit from understanding your product through the lens of a design system. The key concept here is a <em><a href="https://blog.hubspot.com/marketing/total-addressable-market" target="_blank" rel="noopener">total addressable market</a></em> — this is an aspirational number, a long-term horizon for the success of the design system.</p>
<h3 id="3.-what-kinds-of-people-at-your-company-might-use-your-design-system%3F">3. What kinds of people at your company might use your design system?</h3>
<p>Identify the categories of potential users. This is what’s called <em>market segmentation,</em> the process of dividing potential customers into groups. Your market segmentation might comprise front-end developers, designers, and content strategists. If you’re focused more narrowly on developers, your segmentation might consist of web, iOS, and Android developers.</p>
<h3 id="4.-if-anyone-is-using-a-competing-design-system-today%2C-what-is-it%3F-what-does-it-do-well%3F-what-does-it-do-poorly%3F">4. If anyone is using a competing design system today, what is it? What does it do well? What does it do poorly?</h3>
<p>Having a competitor to study is a valuable opportunity. Survey the people at your company who use a design system and ask them about the strengths and weaknesses of the system. This information will not only help you build a better system, but will also define your <em>market position,</em> or the way you present your system as a superior alternative.</p>
<p>A market analysis using these four questions serves as a foundation for the other decisions you’ll make. The size of your market gives you indications of the right effort to put into reviving the system; competitive analysis helps you learn from existing use cases; segmentation allows you to create and position your design system’s components in a consistent manner.</p>
<h2 id="idea-2%3A-jobs-to-be-done">Idea 2: Jobs to be Done</h2>
<p>“Jobs to be Done” is a framework developed by leaders like Tony Ulwick and Clayton Christensen to address a fundamental question in product development: how do you build something that customers want? The Jobs to be Done approach starts with a straightforward mission: build something that helps users achieve a meaningful outcome. The simplest illustration of this approach is a quote popularized by Theodore Levitt: “People don’t want to buy a quarter-inch drill. They want a quarter-inch hole!” Jobs to be Done says that people only buy a drill because it helps them make a hole. “Make a hole” is the job that a customer asks — “hires,” in Jobs-to-be-Done parlance — the drill to do.</p>
<p>What jobs could your design system do for the people who use it (the people you identified in your market analysis)? What do they currently use to do those jobs instead? When working on your design system, write down some of these jobs and consider if your product is going to be hired or not. Here are some examples of jobs your design system might do:</p>
<ul>
<li>Make a date picker appear on the page</li>
<li>Decide which fonts and colors to use</li>
<li>Keep the accessibility of the search page high</li>
</ul>
<p>Think about what a user might reach for to do these jobs. Keep in mind that users sometimes choose to use nothing at all — this is a key concept in Clayton Christensen’s book on Jobs to be Done, <em>Competing Against Luck: The Story of Innovation and Customer Choice</em>. Think of an Egg McMuffin from McDonald’s; not only does it compete against the breakfast burrito from Taco Bell and the donut from Dunkin’, it also has to be more appealing than <em>not eating breakfast at all.</em> In my case, I’d rather not eat.</p>
<p>Nothing at all is usually a design system’s biggest competitor. When an engineer is writing code for a new feature, or when a designer is proposing an update to a workflow, often they’ll start from scratch. Another possible tool to hire is copying and pasting; developers might copy a component from a popular open-source library, whereas designers might see how another designer solved the problem by searching on Dribbble.</p>
<p>For your design system to succeed, it has to be better at users’ jobs than nothing at all, along with any other existing tools, even if they don’t look like design systems at all.</p>
<h2 id="idea-3%3A-data-driven-product-development">Idea 3: Data-driven product development</h2>
<p>Data is the defining tool of modern management. The more data a manager can utilize, the better their decisions are — at least, that’s the theory. In "<a href="https://hbr.org/2012/10/big-data-the-management-revolution" target="_blank" rel="noopener">Big Data: The Management Revolution</a>,” Andrew McAfee and Erik Brynjolfsson write that “data … allows more-accurate predictions, better decisions, and precise interventions, and can enable these things at seemingly limitless scale.” The authors provide examples of what they consider a “fundamental transformation of the economy,” predicting that “almost no sphere of business activity will remain untouched by this movement.”</p>
<p>If this prognosis is correct, we should expect data to drive better outcomes for design systems as well.</p>
<p>To improve your design system, start by collecting baseline data on how many people at your company are using it. You can get lots of insight from a survey: the <a href="https://measuringu.com/seq10/" target="_blank" rel="noopener">Single Ease Question</a> alone can inform your product strategy just as well as more sophisticated survey techniques.</p>
<p>Going further, you can define usability metrics to measure your progress over time. Google’s HEART framework is a great way to track important data related to five high-level attributes:</p>
<h3 id="happiness">Happiness</h3>
<p>How satisfied are your design system’s users? Similar to the single ease question, a simple survey of satisfaction with the design system can give you a consistent way of understanding the very highest level of success.</p>
<h3 id="engagement">Engagement</h3>
<p>How frequently is your design system used? One way to measure engagement is to track the number of times the design system is referenced in your team’s code base. Another engagement metric might be the number of updates done to design system files, tracked via version history in Dropbox or Abstract.</p>
<h3 id="adoption">Adoption</h3>
<p>How many designers, developers, product managers, and content strategists used your design system for the first time this week? If you’ve analyzed the total addressable market for your design system, you should have a good sense of how well you’re doing.</p>
<h3 id="retention">Retention</h3>
<p>Once your design system is adopted, does it tend to stick around? Do your teammates often abandon the system after initial trials? Measuring retention in your design system can be tricky; using the <a href="https://www.figma.com/blog/introducing-design-system-analytics/" target="_blank" rel="noopener">Design System Analytics</a> features in Figma, you might track retention by seeing how often a symbol is detached from its parent. Github or NPM can provide data on how frequently your design system’s code is re-used. Keeping an eye on data like this will tell you how well the system satisfies your team’s Jobs to be Done.</p>
<h3 id="task-success">Task success</h3>
<p>How easy is it to do basic tasks with your design system? If you have online documentation, you can use web analytics tools to measure how long it takes your team to find common components or specifications. Task success is helpful to compare to happiness; it’s possible that you have one or two users who are very content, but most of the team has difficulty using the system.</p>
<p>Identifying and regularly reviewing your design system’s HEART metrics will help you make progress towards your team’s full investment. Gathering this kind of data currently requires some assembly, but with new developments in design system analytics, data about your design system will soon be much easier to track and analyze. And with the competitive nature of the design tool marketplace, I imagine that Figma’s first steps will soon find comparable features in Sketch, Adobe XD, Framer, Abstract, Invision, and Zeplin.</p>
<h2 id="conclusion">Conclusion</h2>
<p>It’s easy to take design systems for granted. The ubiquity and popularity of design systems sometimes dooms them to fail to achieve the outcomes that many designers expect. But by applying product thinking, you can avoid this fate and help your design system take root.</p>
<p>Through the lenses of market analysis, Jobs to be Done, and data-driven decision making, a design system is just like any other product, and just like any other product, it can be tailored to be a success.</p>
Design APIs: the evolution of design systems
2019-11-20T00:00:00Z
https://matthewstrom.com/writing/design-apis/
<figure data-type="image"><img src="https://matthewstrom.com/images/design-apis-02.jpg" alt="" /></figure>
<p>Design systems enable designers and developers to quickly create quality software on a massive scale. As the needs of software-driven businesses grow even larger, design systems are evolving — they are beginning to look and work like APIs.</p>
<p>In software development, “API” stands for “Application Programming Interface.” An API is a reliable way for two or more programs to cooperate. It allows programs to work together despite differences in hardware, language, architecture, or other operating constraints.</p>
<p>APIs power the internet. They are so powerful because they embody a contract: system A promises to act in a predictable way, as long as system B requests that action in an agreed-upon way. Say system A is PayPal and system B is Etsy: PayPal promises to make a transaction between two bank accounts (a buyer’s and a seller’s), as long as Etsy requests that transaction formatted in a secure and trustworthy way with permission from its users.</p>
<p>As long as these contracts are in place, Etsy and PayPal can write and re-write their own systems without needing to check in with each other. They can work independently and efficiently, according to their own needs. A reliable API creates trust and drives cooperation.</p>
<p>The API model is the perfect match for communication between designers and developers.</p>
<nav class="table-of-contents"><ol><li><a href="https://matthewstrom.com/writing/design-apis/#a-pseudo-api">A Pseudo-API</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#design-systems">Design Systems</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#the-problem-with-design-systems-as-apis">The Problem with Design Systems as APIs</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#abstracting-a-design-system-into-a-design-api">Abstracting a Design System Into a Design API</a><ol><li><a href="https://matthewstrom.com/writing/design-apis/#rules-for-making-requests">Rules for Making Requests</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#an-endpoint">An Endpoint</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#example-requests">Example Requests</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#example-responses">Example Responses</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#errors">Errors</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#putting-it-all-together">Putting It All Together</a></li></ol></li><li><a href="https://matthewstrom.com/writing/design-apis/#the-current-state-of-design-apis">The Current State of Design APIs</a><ol><li><a href="https://matthewstrom.com/writing/design-apis/#design-tokens">Design Tokens</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#standard-formats">Standard Formats</a></li></ol></li><li><a href="https://matthewstrom.com/writing/design-apis/#the-future-of-design-apis">The Future of Design APIs</a></li><li><a href="https://matthewstrom.com/writing/design-apis/#conclusion">Conclusion</a></li></ol></nav><h2 id="a-pseudo-api">A Pseudo-API</h2>
<p>If you’re a designer or developer, there’s already an API layer between you and your counterparts. That API might not be well-documented or consistent, but it forms the basis for your communication with each other.</p>
<p>For instance, at Bitly (where I work), designers provide information about design decisions in the form of Sketch files in a tool called Abstract. We’re working with engineers to make sure the format works for everyone as an efficient and accurate way to share specifications.</p>
<p>These standards and informal working agreements look a lot like the beginnings of an API. But our documentation isn’t like a typical API’s documentation (for an example of a well-documented API, see <a href="https://stripe.com/docs/api" target="_blank" rel="noopener">Stripe’s API reference</a>). The design team hasn’t listed any endpoints. There are no sample requests to learn from, or expected return values to test against. Our pseudo-API doesn’t have an uptime guarantee, a service-level agreement, or rate limits. It also doesn’t fail very gracefully. When something goes wrong, no errors are thrown, and nobody’s pager goes off.</p>
<p>A small team can work through this uncertainty without losing much productivity. But as a team grows, it needs a clearer contract between designers and developers.</p>
<h2 id="design-systems">Design Systems</h2>
<p>Design systems have become an essential tool for fast-paced application development teams. A good design system provides some of the documentation developers need in order to get information about what they are building. Like an API, a design system is an abstraction. An API abstracts some of a program’s functionality; a design system abstracts some of the design process.</p>
<p>Companies like Salesforce have led the way in implementing large-scale design systems. Salesforce has thousands of developers and designers working on features across many platforms and applications. To enable this kind of work at scale, the team collaborated to produce a design system called <a href="https://lightningdesignsystem.com/" target="_blank" rel="noopener">Lightning</a>.</p>
<p>Lightning is a contract. On one side, it outlines very specific ways for developers to mark up their code to ensure the user experience is delivered consistently. For instance, a developer agrees that they’ll use a specific style of markup:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slds-button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
<p>In return, Lightning guarantees that this button will have the proper appearance and functionality. It will meet Salesforce’s standards of usability and accessibility.</p>
<p>On the other side of the contract, Lightning specifies rules for creating or modifying design specifications. For instance, a designer agrees to follow guidelines for using toggle switches in forms:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/design-apis-01.png" alt="" /></figure>
<p>In return, Lightning promises that these design decisions will be delivered quickly to end users with fidelity and integrity. The application will continue to meet Salesforce’s standards of performance and reliability.</p>
<h2 id="the-problem-with-design-systems-as-apis">The Problem with Design Systems as APIs</h2>
<p>Lightning works for Salesforce, but it requires a dedicated team of engineers and designers. The design system team is solely responsible for Lightning’s continued performance: they maintain the documentation, educate users, evangelize for adoption across the organization, and monitor how the system is working.</p>
<p>A dedicated design system team is required because a design system is only a low-level abstraction of the design process.</p>
<p>This means the design system’s documentation — the website or wiki or design file that describes it — is its most useful application. For instance, the easiest way to use the colors Lightning provides is to visit <a href="https://www.lightningdesignsystem.com/design-tokens/#category-color" target="_blank" rel="noopener">the ‘Colors’ page on Lightning’s website</a>.</p>
<p>Think of this like a phone book. A phone book is a low-level abstraction of a phone number directory. To find someone’s number, you flip through the pages of the phone book until you find their name. A whole team of people produces the phone book, printing and distributing it on a regular basis to ensure it is up to date.</p>
<p>Adding one level of abstraction to a phone directory means removing the printed book from the equation. Instead of flipping through pages, a user types a name into a search box and instantly sees that person’s phone number. The number can be kept up to date without reprinting a hefty book. Other programs can read this information, too: Integrations to messaging apps might mean the end user never needs to see the phone number at all.</p>
<h2 id="abstracting-a-design-system-into-a-design-api">Abstracting a Design System Into a Design API</h2>
<p>What does a design API look like? Taking cues from other software APIs, a design API has four ingredients:</p>
<ol>
<li>Rules for making requests</li>
<li>A URL called an endpoint that serves as the address for incoming requests</li>
<li>A clear definition of what a properly formatted request looks like</li>
<li>A clear definition of what the API’s response will be under different circumstances</li>
</ol>
<h3 id="rules-for-making-requests">Rules for Making Requests</h3>
<p>There are many different protocols for APIs on the web, like SOAP and REST. Each protocol defines rules for how requests can be made. REST, for instance, defines the “verbs” that a request can include: “POST” adds new data, while “GET” reads existing data. Likewise, our design API needs rules to ensure a user can interact with it in predictable ways.</p>
<p>Additionally, some APIs require users to tie their requests to a specific account. There are many different ways of authenticating requests, from simple password-like tokens to more complicated exchanges like OAuth. Authentication helps an API protect functionality from misuse, accidental or otherwise.</p>
<p>A design API needs rules around what kinds of requests can be made. Is it read only, or can a user update design information via the API, too? What kind of authorization is needed for each kind of request? Defining and providing these rules to users keeps the API running smoothly.</p>
<h3 id="an-endpoint">An Endpoint</h3>
<p>An endpoint is the URL used to make a request to an API. For example, to shorten a link with the Bitly API, you send a request to <code>https://api-ssl.bitly.com/v4/shorten</code>.
Our design API might have an endpoint for system colors, like <code>https://example.com/api/colors</code>. Or an endpoint for a dropdown component: <code>.../components/dropdown</code>.</p>
<h3 id="example-requests">Example Requests</h3>
<p>The most basic request in an API is to simply request to see the information provided by an endpoint. For example, a design API might treat <code>GET https://example.com/api/colors</code> as a complete request, and respond with a list of colors.</p>
<p>More complicated requests involve extra information in the form of what are called query parameters. Query parameters get added to an endpoint’s URL and provide data to the API. An example of a query parameter is <code>?v=uwprhJZHd5Y</code> at the end of <code>https://www.youtube.com/watch?v=uwprhJZHd5Y</code>: the string of letters and numbers tells YouTube which video you’d like to watch.</p>
<p>An example request with query parameters solves a common use case: a web developer needs colors in hex format — <code>#ffffff</code> — while an iOS developer needs them to be formatted as a UIColor — <code>[UIColor colorWithRed:1.00 green:1.00 blue:1.00 alpha:1.0];</code>. Our design API could respond to the requests <code>GET https://example.com/api/colors?format=hex</code> and <code>GET https://example.com/api/colors?format=uicolor</code> with only the correctly-formatted colors.</p>
<h3 id="example-responses">Example Responses</h3>
<p>Example requests give users guidelines for interacting with the API. But that’s only half of the equation: the API needs to talk back.</p>
<p>Consistent and well-structured responses are vital to effective APIs. For instance, if <code>GET .../colors</code> results in a list of hex values, you wouldn’t expect <code>GET .../colors/blue</code> to result in RGB values.</p>
<p>An example response for the <code>GET https://example.com/api/colors</code> action might look like this:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">[</span><br /> <span class="token punctuation">{</span><br /> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"blue"</span><span class="token punctuation">,</span><br /> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"#0000ff"</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span>...<span class="token punctuation">}</span><br /><span class="token punctuation">]</span></code></pre>
<p>Providing this example tells a user to expect the color to be provided in hexadecimal format, along with each color’s name. A developer could use this template to write their own application, knowing that the API will always provide the information in this format.</p>
<h3 id="errors">Errors</h3>
<p>An important but often-overlooked feature of an API is error handling. If a request to the API doesn’t result in the desired action, the API should respond with some information on what went wrong. Some common errors are:</p>
<ul>
<li><strong>Not found:</strong> sent when the request was valid, but there’s nothing available at the specified endpoint.</li>
<li><strong>Server error:</strong> sent when something is wrong with the API itself.</li>
<li><strong>Authentication error:</strong> sent when authentication is required but wasn’t present in the request.</li>
<li><strong>Invalid request:</strong> sent when the user’s request wasn’t correctly formatted.</li>
</ul>
<p>Good error handling in a design API would help the software on the other end know how to proceed. For example, sending the request <code>GET https://example.com/api/colors/fuchsia</code> might return a ’Not Found’ error if fuchsia isn’t a color in the system. The program that made the request might then try something more common, like <code>GET https://example.com/api/colors/purple</code>. If the original request resulted in a ‘Server Error’ instead, the requesting program might wait and try again later.</p>
<h3 id="putting-it-all-together">Putting It All Together</h3>
<p>Combining these components, we get an example of what an API for design might look like.</p>
<hr />
<p><strong>How to use the API</strong></p>
<p>Our API accepts form-encoded request bodies, returns JSON-encoded responses, and uses standard HTTP response codes, authentication, and verbs.</p>
<p><strong>Endpoint</strong></p>
<pre class="language-html"><code class="language-html">https://example.com/api/colors</code></pre>
<p><strong>Example request</strong></p>
<pre class="language-http"><code class="language-http">GET https://example.com/api/colors</code></pre>
<p><strong>Example response</strong></p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">[</span><br /> <span class="token punctuation">{</span><br /> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"blue"</span><span class="token punctuation">,</span><br /> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"#0000ff"</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span>...<span class="token punctuation">}</span><br /><span class="token punctuation">]</span></code></pre>
<hr />
<p>This is a very simple example of how a design API would be able to provide design information to another program.</p>
<h2 id="the-current-state-of-design-apis">The Current State of Design APIs</h2>
<h3 id="design-tokens">Design Tokens</h3>
<p>Some design systems, like Lightning or Shopify’s <a href="https://polaris.shopify.com/" target="_blank" rel="noopener">Polaris</a>, have pioneered the use of design tokens. Design tokens are structured values in a machine-readable file, similar to the response you’d expect from a design API.</p>
<p>Salesforce’s <a href="https://github.com/salesforce-ux/theo" target="_blank" rel="noopener">Theo</a> and Amazon’s <a href="https://amzn.github.io/style-dictionary" target="_blank" rel="noopener">Style Dictionary</a> are leading the way for the creation and distribution of design tokens. Both perform the same basic function: given a single set of design decisions, they generate a wide array of formats suitable to be used directly in a platform or application.</p>
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class="embed-container"><iframe src="https://www.youtube.com/embed/1HREvonfqhY" frameborder="0" allowfullscreen=""></iframe></div>
<p>I recently used Style Dictionary to build a set of design tokens for Bitly. Those tokens are then distributed via NPM, enabling Bitly developers to pull in the latest version of our design decisions without needing to dig into Sketch files or ask on Slack.
Design tokens are a huge step towards a fully developed design API. However, they are generated and distributed in bulk. If you only need one token, you need to import the whole library. That means they’re still a type of phone book, albeit one that is formatted in a way that software can easily read.</p>
<p>Also, design tokens are read-only. Updates to the original values require a completely different set of tools than downloading and using the tokens themselves. This division of labor requires more contributors, leading to the kinds of dedicated teams we see publishing and maintaining design systems today.</p>
<h3 id="standard-formats">Standard Formats</h3>
<p>Every design system has its own way of defining colors, font sizes, spacing, and type styles. For example, Google’s Material Design designates 14 shades of each color, using a numbered system to indicate how dark each shade is. Lightning, on the other hand, uses aliases like $brand-text-link or $color-background to denote how each color should be used.
In <a href="https://jxnblk.com/blog/interoperability/" target="_blank" rel="noopener">“Interoperability,"</a> Brent Jackson describes how this makes software development — specifically, moving from Basscss to Tachyons, both of which are CSS libraries — more difficult:</p>
<blockquote>
<p>The real tragedy here in the divergent naming conventions is that if you’ve started building an application with Basscss, but then want to upgrade to something more fully-featured like Tachyons, you’ll have to do a lot of manual work to migrate. Essentially, HTML templates written with either of these libraries isn’t as portable as if we’d used a standard syntax, for example inline styles.</p>
</blockquote>
<p>Jackson goes on to suggest a <a href="https://styled-system.com/theme-specification/" target="_blank" rel="noopener">standard format</a> for colors, fonts, and sizes.</p>
<p>The emergence of standard formats means that applications can work seamlessly with multiple design systems or migrate from one to another with little effort. Standardization also makes it faster to build new systems. Having a comprehensive template for your design language all but eliminates one of the hardest problems in software development: <a href="https://twitter.com/codinghorror/status/506010907021828096?s=20" target="_blank" rel="noopener">naming</a>.</p>
<p>But an API also reduces the importance of a consistent naming scheme. A well-documented and machine-readable format for design data can be easily transformed into whichever format your application requires.</p>
<h2 id="the-future-of-design-apis">The Future of Design APIs</h2>
<p>The increasing popularity of design tokens and the drive towards a standard format for design systems mean that design APIs are just around the corner. These rich APIs will enable what I call <strong>networked design systems</strong>.</p>
<p>Networked design systems are sets of applications and tools that are capable of communicating with each other about design decisions. Contrast this with the state of the art: the closest we come to networked tools are libraries like AirBnB’s <a href="https://github.com/airbnb/react-sketchapp" target="_blank" rel="noopener">react-sketchapp</a>, which is capable of importing components from an application’s codebase into Sketch. This connection enables designers to use up-to-date components directly from AirBnB’s applications. But it’s a one-way connection; designers can’t push changes back to the components.</p>
<p>New applications like <a href="https://www.modulz.app/" target="_blank" rel="noopener">Modulz</a> promise to go a step further, empowering designers to work directly with application code in a visual medium. Modulz is a part of the “no-code” revolution, a drive to put more of the software creation process directly in the hands of designers, business analysts, product managers, and executives. Design APIs will be crucial to these tools. Instead of a developer updating the CSS, HTML, and JavaScript to reflect the latest design decisions, the design API serves as the connection between a designer (or, heaven help us, a stakeholder or client) and the finished product.</p>
<p>Such a direct connection opens up entirely new ways of building software. Today, design decisions like colors, font sizes, and spacing are ‘baked’ into an application’s code. A developer writes design specifications into the source code, which is then compiled and delivered to an end user. This causes problems when many developers are working on an application: different parts of the codebase are updated at different times, while different design specifications are baked in. The more features an app has, the harder it is to maintain a consistent user experience.</p>
<p>A design API would allow an application’s compiler to request the latest specifications every time it runs, ensuring the result is always up to date. Developers no longer have to bake design decisions into their code. No matter how large the code base, all the design decisions are maintained in a single place and distributed when needed.</p>
<p>Keeping design decisions separated from your application’s code base has another advantage: you can build logic into the API without adding to the complexity of the app itself. By logic, I mean programs that concern the design decisions themselves. These programs can run automatically or at a user’s request via an API endpoint. Accessibility tests could run every night, providing valuable usage guidelines to users who want to adhere to web standards like <a href="https://www.w3.org/TR/WCAG20/" target="_blank" rel="noopener">WCAG</a>. These tests could also run when a user adds a new color or updates an existing one, and the API could reject the request if the new color doesn’t meet accessibility standards.</p>
<h2 id="conclusion">Conclusion</h2>
<p>APIs are a powerful paradigm. Using the groundwork laid by the pioneers of networked programs, designers and developers can evolve their approach and unlock new ways of collaborating. And yet, design APIs don’t seem like a stretch of the imagination. An API-driven approach is the natural extension of the work currently being done on design systems, including tokens and standardization projects.</p>
<p>That’s why I’m so excited about design API-driven tools and frameworks: A fully-networked design system, powered by a design API, gives massive leverage to even the smallest teams. Using a design API, designers and developers can maintain larger and larger codebases, deployed over multiple apps and platforms, without sacrificing quality or consistency. Design concerns like accessibility could be automated and managed by dedicated systems; changes could be tested on the fly, in production, by a single designer.</p>
<p>As design systems evolve into fully-featured design APIs, the future of design is bright.</p>
Making an audio waveform visualizer with vanilla java script
2019-11-12T00:00:00Z
https://matthewstrom.com/writing/waveform-visualizier-javascript/
<p>You can read this article on <a href="https://www.uxbooth.com/articles/what-google-search-shows-us-about-future-of-product-design/" target="_blank" rel="noopener">UX Booth</a>.</p>
Design and machine learning
2019-10-30T00:00:00Z
https://matthewstrom.com/writing/design-and-ml/
<figure data-type="image"><img src="https://matthewstrom.com/images/design-ml-1.jpg" alt="" /></figure>
<p>Machine learning is a powerful tool that drives everything from curated content recommendations to optimized user interfaces. With Apple, Google, Facebook, and Amazon leading the charge, machine learning is becoming deeply integrated into everyday product experiences. This means that digital product designers need to get familiar with machine learning. Wielding machine learning might be a niche design skill today, but soon it will be hard to design without it. Or that’s how the argument usually goes.</p>
<p>Lots of articles do a good job of explaining what machine learning is. Many warn that designers who don’t start learning about ML will be left behind. But I haven’t seen one that has explored what design and machine learning have to offer each other.</p>
<p>Design and machine learning function like a flywheel: when connected, each provides value to the other. Together, they open up new product experiences and business value.</p>
<h2 id="what-can-design-do-for-machine-learning%3F">What can design do for machine learning?</h2>
<h3 id="design-helps-machine-learning-gather-better-data.">Design helps machine learning gather better data.</h3>
<p>Machine learning is a hungry beast. To deliver the best results, learning algorithms need vast amounts of detailed data, clean of any confounding factors or built-in biases.</p>
<p>To provide song recommendations, for example, Spotify’s algorithms need data on how users choose what to listen to. If the app’s browsing interface is difficult to navigate, users will be more likely to listen to the first few songs they see, regardless of their personal taste. So-called “noisy” signals result in less accurate recommendations.</p>
<p>Designers can help create user experiences that eliminate noise in data, leading to more accurate and efficient ML-powered applications.</p>
<h3 id="design-helps-set-expectations-and-establish-trust-with-users.">Design helps set expectations and establish trust with users.</h3>
<p>Twitter uses many, many machine learning algorithms. If you switch to the “top tweets” feed, an algorithm decides what order tweets appear. Algorithms decide when to show you tweets that your friends like, retweet, or reply to. A different set of algorithms chooses trending topics to display in the sidebar.</p>
<p>Often, Twitter users get confused as to why they’re seeing what they’re seeing. Social media marketers write <a href="https://sproutsocial.com/insights/twitter-algorithm/" target="_blank" rel="noopener">long posts</a> on how to take advantage of Twitter’s algorithms. Confusion and ambiguity lead to frustration and distrust.</p>
<p>Designers — specifically, UX writers, the unsung heroes of usability — can add clarity to ML-powered interfaces. When you see a tweet by someone you don’t follow in your timeline, Twitter’s designers have added a bit of text to explain why it’s there: “Matthew liked,” “Raquel replied,” “Freyja retweeted,” and so on. The trends in the sidebar are framed with the heading “Trends for you,” indicating that they are curated.</p>
<p>These design details build trust and understanding among users. Trust is a vital component in how ML achieves its goals. Google’s People + AI initiative has provided detailed guidance for building trust in ML-powered applications:</p>
<blockquote>
<p>Because AI-driven systems are based on probability and uncertainty, the right level of explanation is key to helping users understand how the system works. Once users have clear mental models of the system’s capabilities and limits, they can understand how and when to trust it to help accomplish their goals. In short, explainability and trust are inherently linked.<br />
- <a href="https://pair.withgoogle.com/chapter/explainability-trust/" target="_blank" rel="noopener">Google’s People + AI Guidebook</a></p>
</blockquote>
<h2 id="what-can-machine-learning-do-for-design%3F">What can machine learning do for design?</h2>
<h3 id="machine-learning-answers-questions-about-user-behavior.">Machine learning answers questions about user behavior.</h3>
<p>Designers often have to make assumptions about users when building and iterating on interfaces. The trickiest assumptions usually come in the form of “if a user takes this action, some other behavior will result.” For instance: If a user adds a coupon to their order, they’ll be more likely to complete their checkout. These assumptions have a huge impact on business value, but often come down to tricky statistical analysis and — often, sadly — guesswork.</p>
<p>Machine learning can help simplify this process by making complex models of user behavior that are easy to experiment with. One variation on this technique is called a Bayesian network. Bayesian networks can answer questions like “what will happen if a user takes (or doesn’t take) an action?” Using machine learning like this helps designers make more confident decisions with fewer assumptions.</p>
<h3 id="machine-learning-customizes-interfaces-to-users-needs.">Machine learning customizes interfaces to users needs.</h3>
<p>What if you could design a unique interface for every single user that opened your app? How would you tailor the experience to suit the use case of that person at that exact moment?</p>
<p>It’s strange to think of a designer manually tweaking the locations of buttons and menus for every user to make an app easier to use. But that’s one of the ways Facebook uses ML: in 2018, it began composing the nav bar in its app based on users’ most commonly used features.</p>
<h2 id="the-future-of-ml-and-design">The future of ML and design</h2>
<p>The flywheel of design and machine learning is just getting started. Many designers are still in the process of learning what machine learning is, a task made more difficult by the breakneck speed of new developments in the field. Once machine learning becomes part of the core curriculum for design, the pace of innovation will accelerate.</p>
<p>Imagine Sketch, Figma, or Adobe XD predicting the usability of a mockup based on real user data. Tools like FullStory already capture what users see and do at every step of their session; an ML algorithm could be trained to mimic your users, even when given new screens or workflows.</p>
<p>Alternatively, consider a tool that could generate your app’s UI instantly based on a few high-level parameters. A designer could tweak a few knobs — shorter session length, higher conversion rate on a CTA, etc. — and an algorithm could make adjustments it thinks will accomplish the desired output. This kind of tool could make UI changes on the fly, in production, in response to real user behavior.</p>
<p>This kind of blue-sky thinking is part of the product innovation cycle. Designers are uniquely qualified to push the boundaries of what ML can do, and how algorithms can deliver real value to users as well as businesses.</p>
<h2 id="resources-for-designers">Resources for designers</h2>
<p>If you’d like to learn more about machine learning in general, UX Planet has a<a href="https://uxplanet.org/designer-friendly-resources-to-study-ai-and-machine-learning-1-6106e257faeb" target="_blank" rel="noopener"> great list of resources</a>, including one of my favorite introductions,<a href="http://www.r2d3.us/visual-intro-to-machine-learning-part-1/" target="_blank" rel="noopener"> A Visual Intro to Machine Learning</a>.</p>
<p>For guidelines on how to design with machine learning, start with Google’s<a href="https://pair.withgoogle.com/" target="_blank" rel="noopener"> People + AI Guidebook</a>. It contains tons of detailed guidance on how to utilize the potential of ML & AI in a user-centric way.</p>
<p>If you’re in the Bay Area, there’s even an<a href="https://www.meetup.com/MLUXSF/" target="_blank" rel="noopener"> ML + UX meetup</a>! I recently attended a one-off New York version of this meetup, which is what inspired this post.</p>
Learning how to see
2019-09-24T00:00:00Z
https://matthewstrom.com/writing/learning-how-to-see/
<figure data-type="image"><img src="https://matthewstrom.com/images/seeing-1.png" alt="" /></figure>
<p>This is the Müller-Lyer illusion. You’ve probably seen <sup class="footnote-ref"><a href="https://matthewstrom.com/writing/learning-how-to-see/#fn1" id="fnref1">1</a></sup> it before: it consists of two lines, each with forked ends. The middle portion of the top line looks longer than the middle portion of the bottom line. However, when you measure the length of each middle portion, they are the exact same length.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/seeing-2.png" alt="" /></figure>
<p>There are many illusions like this.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/seeing-5.png" alt="" /></figure>
<p>Are the shapes in this image moving?</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/seeing-6.png" alt="" /></figure>
<p>Is there a spiral in this image?</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/seeing-8.png" alt="" /></figure>
<p>Are there gray dots at the intersections of this grid?</p>
<p>While these pictures are fun to look at, after seeing the first few, you probably aren’t fooled. You’ve learned how to see optical illusions: Even though you see moving shapes, different-sized lines, spirals, and gray dots, you know that none of those things are really there.</p>
<h2 id="the-moon-illusion">The moon illusion</h2>
<p>The previous examples are all pretty contrived. They were designed to take advantage of how your brain perceives light and shadow. But there are other, more subtle examples that you experience every day.</p>
<p>Next time you’re outside at night, take a look at the moon. How big does it look? If the moon is near the horizon, it will look relatively large and close. When it’s high in the night sky, it will look small and far away.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/seeing-4.jpg" alt="Photo by Kym MacKinnon on Unsplash" /><figcaption>Photo by Kym MacKinnon on Unsplash</figcaption></figure>
<p>But no matter where it is in the sky, the moon is always the same apparent size<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/learning-how-to-see/#fn2" id="fnref2">2</a></sup> — if you held a ruler at arms length, it would measure the same throughout the night! You don’t even need ruler to check: take a sheet of paper and roll it up into a narrow tube. Point it at the rising moon and adjust the tube’s size until it’s a little larger than the moon’s diameter. Tape the tube so it stays the same size and look at the moon again a few hours later. You’ll see that it fills the same space.</p>
<p>Today, we have satellites, sophisticated ground-based telescopes, and human expeditions to space to measure the moon’s size. But early astronomers like Copernicus and Newton didn’t have that technology. They had to rely on the naked eye to make accurate estimations of the moon’s size. They used these simple observations to predict the moon’s orbit; learning how to see was a major breakthrough.</p>
<p>If Copernicus and Newton believed their intuition — that the moon’s apparent size changes throughout the night — they would conclude that the moon is closer to the earth at the horizon, and farther at its zenith (the highest point of its arc). Its path through space would be an ellipse:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/learning-to-see-orbit-1.jpg" alt="" /></figure>
<p>However, the moon’s apparent size doesn’t change. This means that the moon is nearly the same distance from the earth throughout its arc. It’s orbit is closer to a circle:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/learning-to-see-orbit-2.jpg" alt="" /></figure>
<p>Knowing that the lunar orbit was circular (and not elliptical, as it first appears) was the key to understanding how the moon interacted with the Earth’s oceans to create the tides. After learning how to see the moon’s orbit, scientists could make accurate forecasts of high and low tide (useful for shipping goods) and create accurate calendars (useful for planning military maneuvers).</p>
<h2 id="how-designers-see">How designers see</h2>
<p>These phenomena show the difference between merely seeing things and knowing how to see things. There are lots of things that you see every day that you merely see; there are some things you’ve learned how to see.</p>
<p>This is how professional creative workers (digital product designers like me, for example) do our jobs. We don’t have a mystical sixth sense, some X-ray vision that allows us to access hidden insights and information. Through thousands of hours of experimentation and study, we’ve learned how to see the kinds of things we are asked to design.</p>
<p>Take websites, for example. The average person sees nearly 100 pages every day<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/learning-how-to-see/#fn3" id="fnref3">3</a></sup>. Despite such familiarity, the average person hasn’t learned how to see websites. Their impressions and beliefs of web design are susceptible to bias, such as <a href="https://en.wikipedia.org/wiki/Banner_blindness" target="_blank" rel="noopener">banner blindness</a>. Banner blindness is the phenomenon where website visitors subconsciously ignore content in certain positions (at the very top or in the rightmost column) or sizes (wide rectangles) because they resemble advertisements.</p>
<p>My experience as the design director of wsj.com taught me how to see websites through the lens of banner blindness. Advertisers often wanted their ad to be placed in a prominent position at the very top of the homepage, assuming that would get the most attention. However, I knew that other, smaller placements further down the page performed better. One treatment in particular, called a membership tile, was our best-performing ad day after day; it was placed near other articles to avoid the banner blindness effect.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/seeing-3.jpg" alt="" /></figure>
<p>Despite my knowledge and experience, and even armed with the data to back up my claims, it was still difficult to convince stakeholders of banner blindness. It was like telling someone that the moon is the same apparent size throughout the night.</p>
<h2 id="how-to-learn-how-to-see">How to learn how to see</h2>
<p>Knowing how to see is a valuable but overlooked skill. No matter what it is you do for a living, learning how to see will improve your ability to make judgements and do impactful work. And it’s really quite simple:</p>
<h3 id="ask-the-stupid-questions.">Ask the stupid questions.</h3>
<p>What we initially think are stupid questions often turn out to be informative and worthwhile. Asking them gives us the opportunity to explore and learn from conventional wisdom, and helps us take nothing for granted.</p>
<p>For example: why are links on the internet usually blue?</p>
<h3 id="seek-multiple-explanations.">Seek multiple explanations.</h3>
<p>It’s tempting to take the first plausible explanation of an observation as the truth. But don’t be content with a single story. By finding other explanations, you’ll either strengthen your initial understanding or discover an even better line of reasoning.</p>
<p>Maybe links are blue because an engineer creating the first web browser thought it should be blue, and that was enough to create a standard. But maybe they’re blue because decades of research has shown that blue is the color that our brains can locate fastest on a colorful page.</p>
<h3 id="challenge-your-own-assumptions.">Challenge your own assumptions.</h3>
<p>The biggest difference between merely seeing from knowing how to see is understanding that our brains can (and often do) deceive us. That means that our assumptions are wrong much of the time. Being willing to be wrong — that is, being humble about our beliefs — makes it easier to replace seeing with knowing.</p>
<p>Originally, links were blue simply because the early developers of browsers thought it looked good<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/learning-how-to-see/#fn4" id="fnref4">4</a></sup>. But accessibility research has shown that blue is, in fact, a good color for links. Joe Clark explains in <em>Building Accessible Websites</em>:</p>
<blockquote>
<p>“Red and green are the colors most affected by color-vision deficiency. Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a color different from others.”</p>
</blockquote>
<p>Links on the internet have remained blue by default, but most designers and developers aren’t just following tradition. They understand the important accessibility concerns of technology, and constantly revisit defaults to create the best experience for the most users.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/seeing-0.jpg" alt="Hilma Af Klint - Albin Dahlström / the Moderna Museet / Stockholm" /><figcaption>Hilma Af Klint - Albin Dahlström / the Moderna Museet / Stockholm</figcaption></figure>
<h2 id="conclusion">Conclusion</h2>
<p>We spend most of our day perceiving taking in far more information than we can reasonably process without some shortcuts. For the majority of what we see, it’s ok to just see, to take things at their face value. But take time to learn how to see some of what you experience. You’ll be able to make better decisions, share deeper insights, and overall, enrich your understanding of the world around you.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>I use the word “seeing” throughout this essay in the sense of “perceiving”; not everyone experiences the world through vision. <a href="https://matthewstrom.com/writing/learning-how-to-see/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>The moon’s apparent size does change very slightly (up to 13%) over the course of a month due to the shape of its orbit. This change is negligible in the course of a single evening. More information can be found <a href="http://homepages.wmich.edu/~korista/moon-illus.html" target="_blank" rel="noopener">at this page</a>. <a href="https://matthewstrom.com/writing/learning-how-to-see/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>This number is surprisingly hard to estimate. The best I could find is this 2010 reference to a Nielsen survey: <a href="https://web.archive.org/web/20100619070613/http://www.visualeconomics.com/how-the-world-spends-its-time-online_2010-06-16/" target="_blank" rel="noopener">https://web.archive.org/web/20100619070613/http://www.visualeconomics.com/how-the-world-spends-its-time-online_2010-06-16/</a> <a href="https://matthewstrom.com/writing/learning-how-to-see/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p><a href="https://www.crazyegg.com/blog/why-hyperlinks-are-blue/" target="_blank" rel="noopener">https://www.crazyegg.com/blog/why-hyperlinks-are-blue/</a> <a href="https://matthewstrom.com/writing/learning-how-to-see/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Intuition vs. data
2019-09-16T00:00:00Z
https://matthewstrom.com/writing/intuition/
<figure data-type="image"><img src="https://matthewstrom.com/images/intuition-1.png" alt="" /></figure>
<p>At a time when data is king, product designers should place more trust in their intuition.</p>
<p>Recently I attended Front, a product management conference in Salt Lake City. There, Maggie Crowley, product manager for a company called <a href="https://www.drift.com/" target="_blank" rel="noopener">Drift</a>, presented a case study in redesigning a complex feature: the chatbot builder. It helped users build their own interactive chatbots without coding or design. The team had been iterating on the design of the chatbot builder for a while, but thought it could be greatly improved by a substantial overhaul. Here’s how she recounts the process of getting buy-in from her stakeholders:</p>
<blockquote>
<p>We had a feeling we could make our builder better. And you can’t really say “I have a feeling.” <strong>No one’s gonna listen to you.</strong> So like every good product manager, I tried to find some data … But unfortunately, I didn’t see anything. Our metrics looked perfectly fine.</p>
</blockquote>
<p>Lacking data, Maggie and her team interviewed users, gathering anecdotes and qualitative insights. They used this research to get the permission needed to redesign the chatbot builder. When they launched, their users were ecstatic. One called the improvements “life-changing.”</p>
<p>At the end of the talk, an audience member asked “How did you know your redesign was better?” Maggie’s response surprised me:</p>
<blockquote>
<p>It came down to a feeling. It was just so stupidly obvious that we needed to make that change.</p>
</blockquote>
<p>Maggie’s story perfectly captures the modern expectation that data drives decision-making. And if Maggie had let that expectation dictate her decision, her team wouldn’t have improved the product. The difference between success and the status quo started with a feeling.</p>
<p>I can relate to Maggie: my stakeholders expect data to compel every design decision I make. Even when the decision is “so stupidly obvious,” we gather data. But our insistence on data-driven design holds us back. It slows down iterations and limits innovation.</p>
<p>Instead of relying on data to guide our decisions, we should be more willing to follow our gut.</p>
<h2 id="the-data-dilemma">The data dilemma</h2>
<p>Data-driven design is not a new concept. Its origins can be traced back to the late 19th century, with the rise of scientific management. Since Fredrick Taylor first used scientific methods to maximize steelworkers’ productivity in 1882, data has been vital to business.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/intuition-3.jpg" alt="" /></figure>
<p>In 2014, Walter Frick summed it up in the <a href="https://hbr.org/2014/05/an-introduction-to-data-driven-decisions-for-managers-who-dont-like-math" target="_blank" rel="noopener">Harvard Business Review</a>:</p>
<blockquote>
<p>Not a week goes by without us publishing something here at HBR about the value of data in business. Big data, small data, internal, external, experimental, observational — everywhere we look, information is being captured, quantified, and used to make business decisions.</p>
</blockquote>
<p>Data brings a feeling of objectivity to decisions. It settles disputes. Data can demystify the past and predict the future. As Wall Street’s quantitative analysts know, the right data in the right hands can make fortunes. But the wrong data, even in the right hands, can be disastrous. And with data it’s hard to tell right from wrong.</p>
<p>For example: We’re in the middle of what scientists call the reproducibility crisis. Psychologists, clinical researchers, economists, and other data-centric academics have discovered that historic standards for proof aren’t rigorous enough. Findings that were once seen as conclusive are now regarded with doubt<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/intuition/#fn1" id="fnref1">1</a></sup>. While it’s unlikely that we’ll have to rewrite everything we know about the world, the replicability crisis tells us that even data can lead us to the wrong conclusions.</p>
<h2 id="the-case-for-intuition">The case for intuition</h2>
<p>If you design — or code, or write strategy, or make decisions of any kind — you probably have some kind of intuition about the work you do. Depending on how much experience you have, that intuition might just be a tiny whisper in a noisy room. But you should still listen to it.</p>
<p>In his book <em>Thinking, Fast and Slow</em>, Daniel Kahneman references Herbert Simon:</p>
<blockquote>
<p>The psychology of accurate intuition involves no magic. Perhaps the best short statement of it is by the great Herbert Simon, who studied chess masters and showed that after thousands of hours of practice they come to see the pieces on the board differently from the rest of us. You can feel Simon’s impatience with the mythologizing of expert intuition when he writes: “The situation has provided a cue; this cue has given the expert access to information stored in memory, and the information provides the answer. Intuition is nothing more and nothing less than recognition.”</p>
</blockquote>
<p>Put another way, intuition is a hint that helps us navigate problems based on experience; it’s a compass needle wiggling towards the north pole. This kind of effortless thinking is what Kahneman calls “System 1” thinking. System 1 operates “automatically and quickly, with little or no effort and no sense of voluntary control.” Even when System 1 is biased (and it often is), it’s a useful tool in decision-making.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/intuition-2.png" alt="" /></figure>
<h2 id="when-to-trust-your-gut">When to trust your gut</h2>
<p>When making a decision, you’ll likely have some intuition about the potential outcome. You’ll have to decide whether or not to gather data to guide your decision-making. Those are the two possible starting points: either you gather data or you don’t. And then there are two outcomes: either you’re right or you’re wrong.</p>
<p>The four possible scenarios are:</p>
<ol>
<li>Trust your intuition → your decision is wrong</li>
<li>Gather data → your decision is wrong</li>
<li>Trust your intuition → your decision is right</li>
<li>Gather data → your decision is right</li>
</ol>
<p>There are lots of variables at play, too. Gathering data is an additional step, and comes at some cost (c), whether it’s in real expense or in the cost of delaying your decision. And while there’s a chance your intuition is right (p<sub>i</sub>), it’s worth considering the likelihood that your data leads you to the correct decision (p<sub>d</sub>). Finally, the value of the decision (v) is important: it can be almost negligible (what color should our company T-shirts be?) or career-defining (at what price should we set our IPO?).</p>
<p>We can put all these variables into an equation:</p>
<svg class="intuition--equation" viewBox="0 0 188 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="g" d="M16.3-5.7c.5 0 .9 0 .9-.5s-.4-.5-.9-.5H3c-.4 0-.8 0-.8.5s.4.5.8.5h13.4z"></path>
<path id="j" d="M6.8-10.6c0-.3 0-1-.6-1-.4 0-.7.4-.6.7v.3l.3 3.9L2.7-9l-.4-.2c-.4 0-.7.4-.7.7 0 .4.3.5.5.6l3.5 1.7-3.4 1.7c-.4.2-.6.3-.6.6s.3.7.7.7l.8-.4 2.8-2-.4 4.1c0 .5.5.7.7.7.3 0 .6-.2.6-.7l-.3-4.2 3.1 2.4.5.1c.3 0 .7-.3.7-.7 0-.3-.3-.5-.6-.6L6.7-6.2l3.5-1.6c.4-.2.6-.3.6-.7s-.4-.7-.7-.7l-.9.5-2.7 2 .3-3.9z"></path>
<use id="l" xlink:href="#a"></use>
<use id="e" xlink:href="#b"></use>
<use id="k" xlink:href="#c"></use>
<path id="d" d="M7.6 6C6.4 4.8 3.3 1.7 3.3-6s3-11 4.2-12.2V-18.5C7-18.6 5-16.7 3.7-14a18.7 18.7 0 0 0-1.6 7.8c0 1.8.2 4.8 1.7 8C5 4.4 7 6.2 7.4 6.2c.1 0 .2 0 .2-.2z"></path>
<path id="i" d="M6.5-6.2a20 20 0 0 0-1.6-8 10.4 10.4 0 0 0-3.6-4.4l-.1.2v.1C2.4-17 5.4-13.9 5.4-6.2c0 7.7-3 10.9-4.2 12.1V6l.1.2c.3 0 2.4-1.8 3.6-4.6C6.2-1 6.5-3.8 6.5-6.2z"></path>
<path id="a" d="M8-7.8c-.3 0-.5 0-.8.3-.1 0-.3.4-.3.7 0 .4.3.7.7.7.5 0 1-.4 1-1.3 0-1-1-1.7-2.4-1.7-2.7 0-5.4 3-5.4 5.9C.8-1.4 2 .2 4 .2 7 .2 8.6-2 8.6-2.3c0 0 0-.2-.2-.2l-.2.2A5.3 5.3 0 0 1 4-.3c-1.4 0-1.9-1.1-1.9-2.2 0-.7.4-2.7 1.1-4.1.5-1 1.7-2.1 3-2.1.2 0 1.4 0 1.8 1z"></path>
<path id="h" d="M10.4-13.8v-.3c0-.2-.2-.2-.2-.2H9.1l-1 .1c-.6 0-.7.1-.7.5 0 .2.1.2.4.2 1 0 1 .2 1 .4v.3l-1.3 5C7.3-8.2 6.8-9 5.7-9 3.3-9 .8-6 .8-3 .8-1 2 .3 3.4.3c1.2 0 2.1-.9 2.7-1.6C6.3 0 7.3.2 8 .2S9-.2 9.4-.9l.6-2c0-.2 0-.2-.2-.2s-.2 0-.3.4C9.2-1.5 8.8-.2 8-.2c-.6 0-.7-.5-.7-1l.2-1 2.9-11.6zM6.2-2.5c0 .4 0 .4-.4.8C5.4-1 4.5-.2 3.5-.2c-.9 0-1.3-.8-1.3-2 0-1.1.6-3.4 1-4.3.7-1.5 1.7-2.2 2.5-2.2C7-8.7 7.3-7 7.3-6.8v.3l-1 4z"></path>
<path id="f" d="M5.8-3h-.2c-.1 0-.2 0-.3.4C4.8-.8 4-.2 3.3-.2c-.3 0-.6 0-.6-.7 0-.5.3-1.2.5-1.8l1.4-3.8c.1-.2.3-.6.3-1 0-.8-.7-1.6-1.7-1.6C1.3-9.1.6-6.1.6-6c0 .1 0 .2.2.2S1-5.8 1-6c.6-2 1.4-2.7 2-2.7.2 0 .6 0 .6.7 0 .5-.3 1.2-.4 1.7L1.8-2.5l-.2 1c0 1 .6 1.7 1.6 1.7 1.9 0 2.6-3 2.6-3.2zm-.1-9.9c0-.3-.3-.7-.7-.7-.5 0-1 .5-1 1s.4.7.6.7c.6 0 1-.5 1-1z"></path>
<path id="b" d="M.9 2.6c-.2.6-.2.8-1 .8-.3 0-.5 0-.5.4 0 0 0 .2.2.2h3.6c.2 0 .4 0 .4-.4 0-.2-.1-.2-.5-.2-1 0-1-.1-1-.3 0-.2 1-3.8 1-4.3.3.6.8 1.4 2 1.4 2.3 0 4.8-3 4.8-6 0-2-1.1-3.3-2.6-3.3-1.4 0-2.5 1.3-2.7 1.6-.2-1-1-1.6-1.8-1.6-.6 0-1 .3-1.5 1L.7-6c0 .1 0 .2.2.2s.2 0 .3-.5c.3-1.2.7-2.4 1.5-2.4.5 0 .7.3.7 1 0 .4 0 .7-.2 1L1 2.6zm3.6-9c.1-.6.7-1.2 1-1.5.2-.2 1-.8 1.7-.8 1 0 1.3 1 1.3 2s-.5 3.3-1 4.4C6.8-1.2 6-.3 5-.3 3.6-.2 3.4-2 3.4-2v-.3l1-4z"></path>
<path id="c" d="M9.4-7.7c0-1.3-.6-1.4-.8-1.4-.5 0-1 .5-1 .9 0 .2.2.4.3.5.2.2.7.7.7 1.8C8.6-5 7.4-.2 5-.2c-1.2 0-1.5-1-1.5-1.8 0-1 .5-2.5 1-4 .4-.8.5-1 .5-1.5 0-.8-.7-1.6-1.7-1.6-2 0-2.7 3-2.7 3.1 0 .1 0 .2.2.2S1-5.8 1-6c.6-2 1.4-2.7 2-2.7.2 0 .6 0 .6.7a6 6 0 0 1-.5 1.9c-1 2.6-1 3.3-1 3.8 0 .4 0 1.3.7 1.9.7.6 1.7.6 2 .6 3.4 0 4.5-6.8 4.5-8z"></path>
</defs>
<g fill="currentColor" transform="matrix(1.13 0 0 1.13 -64 -61.1)">
<use x="56.4" y="72.4" xlink:href="#d"></use>
<use x="65.2" y="72.4" xlink:href="#e"></use>
<use x="77.3" y="77.4" xlink:href="#f"></use>
<use x="90.2" y="72.4" xlink:href="#g"></use>
<use x="114.9" y="72.4" xlink:href="#e"></use>
<use x="127.1" y="78.2" xlink:href="#h"></use>
<use x="138.1" y="72.4" xlink:href="#i"></use>
<use x="152.3" y="72.4" xlink:href="#j"></use>
<use x="170.2" y="72.4" xlink:href="#k"></use>
<use x="188.3" y="72.4" xlink:href="#g"></use>
<use x="213" y="72.4" xlink:href="#l"></use>
</g>
</svg>
<p>If the result of this equation is a <strong>positive number</strong>, follow your intuition. If the result is a <strong>negative number</strong>, gather data before deciding. Use the calculator below to experiment with different variables to see how they impact the value of intuition.</p>
<script src="https://matthewstrom.com/js/intuition.js"></script>
<div class="intuition--container">
<div class="intuition--results l--space-flush">
<div class="intuition--label">Value of intuition</div>
<div class="intuition--value t--size-xxl">100.00</div>
</div>
<div class="intuition--slider l--space-flush">
<div class="intuition--header">Likelihood that your intuition is correct (p<sub>i</sub>)</div>
<input class="intuition--slider" type="range" value="0.5" min="0" max="1" step="0.01" id="intuition" />
<div class="intuition--labels">
<div class="intuition--label">0%</div>
<div class="intuition--label">50%</div>
<div class="intuition--label">100%</div>
</div>
</div>
<div class="intuition--slider l--space-flush">
<div class="intuition--header">Likelihood that the data is correct (p<sub>d</sub>)</div>
<input class="intuition--slider" type="range" value="0.5" min="0" max="1" step="0.01" id="data" />
<div class="intuition--labels">
<div class="intuition--label">0%</div>
<div class="intuition--label">50%</div>
<div class="intuition--label">100%</div>
</div>
</div>
<div class="intuition--slider l--space-flush">
<div class="intuition--header">Value of being correct (v)</div>
<input class="intuition--slider" type="range" value="2" min="0" max="4" id="correct" />
<div class="intuition--labels intuition--rotated">
<div class="intuition--label">$1</div>
<div class="intuition--label">$10</div>
<div class="intuition--label">$100</div>
<div class="intuition--label">$1,000</div>
<div class="intuition--label">$10,000</div>
</div>
</div>
<div class="slider l--space-flush">
<div class="intuition--header">Cost of gathering data (c)</div>
<input class="intuition--slider" type="range" value="2" min="0" max="4" id="cost" />
<div class="intuition--labels intuition--rotated">
<div class="intuition--label"><span>$1</span></div>
<div class="intuition--label"><span>$10</span></div>
<div class="intuition--label"><span>$100</span></div>
<div class="intuition--label"><span>$1,000</span></div>
<div class="intuition--label"><span>$10,000</span></div>
</div>
</div>
</div>
<p>Of course, you can’t know the exact chance that your intuition is right, or how likely the data is to be right. But just by estimating the difference — that is, how much more confidence you gain by gathering data — you can get a good sense of whether you should go with your gut.</p>
<h2 id="a-real-world-application">A real-world application</h2>
<p>Let’s revisit Maggie’s decision to redesign Drift’s chatbot builder. The cost of gathering data was high since the team would be starting from scratch. The change was “stupidly obvious,” meaning there was a very small difference between an intuition-based approach and a data-based one. The value of the decision was substantial: a successful redesign would mean a real increase in engagement. Here’s what that looks like:</p>
<ul>
<li>Very small difference in likelihood of being correct between intuition and data (p<sub>i</sub> ≈ p<sub>d</sub>)</li>
<li>High decision value</li>
<li>High cost of gathering data</li>
</ul>
<p>Because the large positive cost of gathering data outweighs the small product of the first two terms, Maggie was right to go with her gut.</p>
<p>So when should you trust your intuition?</p>
<ul>
<li>When gathering data won’t greatly increase your odds of being right, and</li>
<li>When your decision doesn’t high stakes, and</li>
<li>When the cost of gathering data is high.</li>
</ul>
<p>It can be hard to know when these conditions are present. But when you can identify them, trust your intuition.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://journals.plos.org/plosbiology/article?id=10.1371/journal.pbio.1002106" target="_blank" rel="noopener">https://journals.plos.org/plosbiology/article?id=10.1371/journal.pbio.1002106</a> <a href="https://matthewstrom.com/writing/intuition/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
What google search shows us about the future of product design
2019-09-10T00:00:00Z
https://matthewstrom.com/writing/google-search/
<p>You can read this article on <a href="https://www.uxbooth.com/articles/what-google-search-shows-us-about-future-of-product-design/" target="_blank" rel="noopener">UX Booth</a>.</p>
Using Netlify to build an email sign-up widget
2019-08-02T00:00:00Z
https://matthewstrom.com/writing/netlify-email/
<p>You can read this article on <a href="https://css-tricks.com/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget/" target="_blank" rel="noopener">CSS Tricks</a>.</p>
The management strategy that saved Apollo 11
2019-07-23T00:00:00Z
https://matthewstrom.com/writing/distributed-decision-making/
<figure data-type="image"><img src="https://matthewstrom.com/images/distributed-0.jpg" alt="" /></figure>
<p>13 minutes from landing the Eagle on the surface of the moon, Buzz Aldrin and Neil Armstrong had a problem. Their guidance computer was showing a cryptic alarm, flashing the number 1202. With the mission (and their lives) in danger, the astronauts had to make a decision: continue or abort?</p>
<p>6 months of intense training, billions of dollars in taxpayer money, and the greatest technological innovations in history all led up to this moment. None of that mattered now. In this moment, the difference between success and failure was a simple rule of management: make decisions at the lowest level possible.</p>
<h2 id="the-chain-of-command">The chain of command</h2>
<p>Neil Armstrong was the commander of Apollo 11, responsible for making decisions aboard the lunar lander. During the landing, He and Buzz Aldrin (who was piloting the lander) were in direct communication with the Capsule Communicator in Houston, Charles Duke. When the alarm appeared, Armstrong and Aldrin nervously called out to Duke<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/distributed-decision-making/#fn1" id="fnref1">1</a></sup>:</p>
<div class="t--family-mono">
<span class="t--size-s c--gray">(06:38:26)</span> Armstrong: PROGRAM ALARM.<br />
<span class="t--size-s c--gray">(06:38:30)</span> Armstrong: It's a 1202.<br />
<span class="t--size-s c--gray">(06:38:32)</span> Aldrin: 1202.<br />
<span class="t--size-s c--gray">(06:38:48)</span> Armstrong: Give us a reading on the 1202 program alarm.<br />
<span class="t--size-s c--gray">(06:38:53)</span> Duke: Roger. We got - We're GO on that alarm<br />
<span class="t--size-s c--gray">(06:38:59)</span> Armstrong: Roger.<br />
</div>
<p>Duke’s call of “we’re go” was a blessing to continue with the mission. But Duke didn’t make that decision himself. Neither did the flight director for Apollo 11, Gene Krantz. Neither did Steve Bales, the man in the control room responsible for the guidance computer. The decision to either continue or abort passed quickly down the chain of command, from Duke to Krantz to Bales, and finally to Jack Garman, a 23-year-old NASA computer engineer.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/distributed-1.jpg" alt="Jack Garman is second from the left (wearing a coat)" /><figcaption>Jack Garman is second from the left (wearing a coat)</figcaption></figure>
<p>Garman was the right person to make the call. During a simulation two weeks before the mission, Garman’s supervisor Steve Bales had run into a similar scenario: an unknown computer error during descent. But in this simulation, he called for the mission to be aborted. Bales describes the result:</p>
<blockquote>
<p>At the debriefing, we got into a big argument. The simulation supervisor said ‘I don’t think you should have called that abort.’ … [Flight director Gene Krantz] came to me and said 'Steve, I want you to have a new mission ruleset that covers unexpected alarms.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/distributed-decision-making/#fn2" id="fnref2">2</a></sup></p>
</blockquote>
<p>With so little time remaining until launch, Bales entrusted the task to Jack Garman. Garman studied every possible computer error and wrote a plan for handling each.</p>
<p>So as Eagle plummeted towards the moon, the 1202 error was relayed through mission control, from Duke to Krantz to Bales, and then on to Garman. He replied immediately:</p>
<p>“It’s an executive overflow, if it doesn’t happen again, we’re fine.”</p>
<p>Back up the chain, “go” was echoed by Bales, Krantz, and finally Duke, telling the astronauts that they could safely continue their landing.</p>
<h2 id="from-the-ground-up">From the ground up</h2>
<p>Five men could have made a decision faster than the time it took to reach Garman. Each of them, without thinking, passed their responsibility down the chain.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/distributed-3.jpg" alt="From left to right: Chris Kraft, Gene Kranz, Glynn Lunney, Gerry Griffin, John Aaron, Ed Fendell, Jerry Bostick, Jim Lovell, Gene Cernan, Charlie Duke, Steve Bales." /><figcaption>From left to right: Chris Kraft, <strong>Gene Kranz</strong>, Glynn Lunney, Gerry Griffin, John Aaron, Ed Fendell, Jerry Bostick, Jim Lovell, Gene Cernan, <strong>Charlie Duke</strong>, <strong>Steve Bales</strong>.</figcaption></figure>
<p>These decisions made the first moon landing possible. But to the people that made them, it was second nature. Guidance officer Steve Bales explained it this way:</p>
<blockquote>
<p>“We didn’t make decisions at the highest level possible. We shoved them down to the <strong>lowest level.</strong> Now, the flight director, for instance, had to understand the inputs he was getting. But everyone had their piece of the pie, and we didn’t try to share it too much. We didn’t have time. Make the decisions at the lowest level, where people know what they’re doing and what they’re talking about, rather than elevating everything to the top. Let’s build this thing from the ground up.”</p>
</blockquote>
<p>This style of decision-making is the complete opposite of management in modern organizations. In today’s companies, decisions are made at the highest level; by the board, the c-suite, senior vice presidents, etc. Leaders with great decision-making abilities are sought after. Entire classes at the most selective business schools are taught on how to make decisions.</p>
<p>But in 1969, the people in charge of Apollo 11 trusted a 23-year-old engineer in a back room of mission control to make one of the most consequential decisions of this decade-defining mission. And they did so in seconds, without deliberating or debating.</p>
<h2 id="to-the-moon">To the moon</h2>
<p>Next time you’re faced with a decision, ask yourself: how can this decision be made on the lowest level? Have you given your team the authority to decide? If you haven’t, why not? If they’re not able to make good decisions, you’ve missed an opportunity to be a leader. Empower, enable, and entrust them. Take it from NASA: the ability to delegate quickly and decisively was the key to landing men on the moon.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/distributed-2.jpg" alt="New York City welcomed the Apollo 11 crew with a ticker tape parade down Broadway and Park Avenue" /><figcaption>New York City welcomed the Apollo 11 crew with a ticker tape parade down Broadway and Park Avenue</figcaption></figure>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Read the time stamps: this whole exchange happens in 43 seconds. This is even more impressive when you take into account the physical signal delay: messages take a little more than a second to go from the earth to the moon. <a href="https://matthewstrom.com/writing/distributed-decision-making/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>From episode 2 of BBC’s 13 Minutes to the Moon, <em><a href="https://www.bbc.co.uk/programmes/w3csz4dk" target="_blank" rel="noopener">Kids in Control</a></em> <a href="https://matthewstrom.com/writing/distributed-decision-making/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The Role of Doubt in Design
2019-07-17T00:00:00Z
https://matthewstrom.com/writing/doubt/
<figure data-type="image"><img src="https://matthewstrom.com/images/doubt.png" alt="" /></figure>
<p>At a recent happy hour, I struck up a conversation with a product manager. I told him I was a product designer, and he asked “one of the good ones, or one of the bad ones?” A designer on his team — a “bad one” — asked too many questions. Questions like “Why are we building this now?” “Are we sure this is the right problem to solve?” “Why don’t we approach the problem in a different way?”</p>
<p>I immediately recognized this type of designer, because sometimes, that’s exactly who I am. A question machine. A doubter.</p>
<p>While it’s important to <a href="https://matthewstrom.com/writing/optimize-for-learning/" target="_blank" rel="noopener">acknowledge uncertainty</a>, doubt isn’t always the right mindset. Sometimes it’s ok to ask questions, but most times, it’s your job to have answers. So how do you know when — and more importantly, <em>how</em> — to express doubt?</p>
<h2 id="don%E2%80%99t-be-a-question-machine">Don’t be a question machine</h2>
<p>It’s hard to know when it’s appropriate to express your doubts. Here are a few questions that help might help:</p>
<ol>
<li><strong>Are there lots of unknowns?</strong> If you’ve already gathered lots of data, research, or understanding, your colleagues will expect you to have answers.</li>
<li><strong>Is there time to explore?</strong> If you need to move fast, it might be better to go with your gut feelings.</li>
<li><strong>Is there a lot at stake?</strong> Sometimes, being wrong isn’t that bad. If the stakes are low, just ship the dang thing.</li>
</ol>
<p>If there are a lot of unknowns, if you have time and energy, and if there’s a lot to be gained, doubt can be a powerful tool. But even when it’s appropriate to doubt, be careful not to fall into the role of a question machine. Expressing doubt with question after question can come across the wrong way: at worst, your doubt might be taken personally, especially if you question someone else’s decision or idea. Instead, try to doubt constructively.</p>
<p>Constructive doubt creates curiosity. It compels exploration. It’s easy to tell if you’re on the right path: constructive doubt means you don’t care who’s right.</p>
<h2 id="how-to-doubt-constructively">How to doubt constructively</h2>
<h3 id="use-the-socratic-method">Use the Socratic method</h3>
<p>The Socratic method is a form of constructive dialogue pioneered by (you guessed it) Socrates. Socrates was fond of insisting that he knew nothing. When asked a question, he would often answer indirectly, in the form of another question. Socrates’ questions were constructive: they would guide the original question-asker to the right answer.</p>
<p>When formulating your own questions, focus on where your doubt can be most constructive.</p>
<table>
<thead>
<tr>
<th>Observation</th>
<th>Questions to ask</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unclear Ideas or Expression</td>
<td>Can you put that another way? <br /> Can you provide an example?</td>
</tr>
<tr>
<td>Unaligned Purpose</td>
<td>What are our goals?<br />What do you want to happen?</td>
</tr>
<tr>
<td>Implicit or Faulty Assumptions</td>
<td>What are we assuming here?<br />Is that assumption well founded?</td>
</tr>
<tr>
<td>Uncertain Factual Basis</td>
<td>What it the evidence for this?<br />What is the evidence against this?</td>
</tr>
<tr>
<td>Narrow Viewpoint or Perspective</td>
<td>What additional viewpoints should we consider?<br />Who would disagree?</td>
</tr>
<tr>
<td>Unexplored Implications</td>
<td>What is the worst that could happen?<br />What is the best we can expect to happen?</td>
</tr>
<tr>
<td>Unanswered Questions</td>
<td>How can we find out?<br />Can we break this into simpler questions?</td>
</tr>
<tr>
<td>Unclear Concepts</td>
<td>What is the main idea we are exploring?<br />How would you define … ?</td>
</tr>
<tr>
<td>Unexplored Inferences</td>
<td>What ambiguities do you see?<br />How can we resolve those ambiguities?</td>
</tr>
</tbody>
</table>
<p>Make sure your questions come from a sincere curiosity. Avoid these kinds of questions:</p>
<ul>
<li>A <strong>leading question</strong> that suggests a particular answer or contains information the inquisitor seeks to have confirmed</li>
<li>A <strong>suggestive question</strong> that implies that a certain answer should be given in response</li>
<li>A <strong>loaded question</strong> that contains a controversial assumption</li>
<li>A question based on a <strong>false dichotomy</strong> — that is, assuming there are only two answers (yes or no) when there, in fact, are many more</li>
</ul>
<h3 id="use-the-scientific-method">Use the Scientific method</h3>
<p>Building on Socrates’ philosophy of knowing nothing, scientists in the 13th, 14th, and 15th centuries formulated processes of making and investigating observations about the world. What we today call the scientific method is really a whole family of ideas, each based on the following structure:</p>
<ol>
<li><strong>Ask a question</strong> <br />
Just as in the Socratic method, a good question is the first step to constructive doubt.</li>
<li><strong>Make a hypothesis</strong> <br />
A hypothesis is a guess that can be proven true or false.</li>
<li><strong>Test your hypothesis</strong> <br />
Commit to proving your hypothesis either true or false.</li>
<li><strong>Repeat steps 2 & 3</strong></li>
</ol>
<p>While this process seems completely obvious to us now, it sparked a revolution in early modern science. The major innovation was the inclusion of hypotheses and tests; it isn’t enough to simply ask questions.</p>
<p>Here’s how to apply the scientific method to design: before asking a question, formulate a plan to answer the question. Then, explain the plan. For instance, instead of asking “Why are we building this right now?” pick your favorite prioritization framework and offer to help the team organize their roadmap.</p>
<h2 id="stay-curious">Stay curious</h2>
<p>It’s easy to question others’ ideas and plans, and I often express doubt at the wrong time. But as Richard Feynman<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/doubt/#fn1" id="fnref1">1</a></sup> said, doubt is the key to progress:</p>
<blockquote>
<p>“It is imperative in science to doubt. To make progress in understanding we must remain modest and allow that we do not know. You investigate for curiosity … it is not that you are finding out the truth, but that you are finding out that this or that is more or less likely.”<br />
— Richard Feynman, <em>The Relation of Science and Religion</em></p>
</blockquote>
<p>Doubting is good! At its best, doubt doesn’t increase uncertainty, or cast an idea in a negative light. It’s a way to express curiosity. Curiosity leads to understanding. That’s the key. The more we can contribute to the collective curiosity of our peers, the more we can be seen as the “good” designers.</p>
<hr />
<p><em>As usual, a very heartfelt thanks to <a href="http://joshpetersel.com/" target="_blank" rel="noopener">Josh Petersel</a> for reviewing a draft of this essay</em></p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Disclaimer: Richard Feynman was a colossal misogynist. I have a hard time separating this fact from his contributions to science. <a href="https://matthewstrom.com/writing/doubt/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Delight comes last
2019-06-23T00:00:00Z
https://matthewstrom.com/writing/delight-comes-last/
<p>Paul Adams put it bluntly:</p>
<blockquote>
<p>“Grid, font, colour, and aesthetic style are irrelevant if [outcomes] haven’t been resolved first … [but] sometimes it’s just more fun to draw nice pictures and bury oneself in pixels than deal with complicated business decisions and people with different opinions.” <br />
— Paul Adams, <em><a href="https://www.intercom.com/blog/the-dribbblisation-of-design/" target="_blank" rel="noopener">The dribbblisation of design</a></em></p>
</blockquote>
<p>This is called attribute substitution: when faced with a hard problem (complicated business decisions), we subconsciously substitute it with an easier problem (fonts and colors) and solve that problem instead.</p>
<p>Delight — creating an emotional impression through animation, copy, and illustration — is a common substitution for harder problems like accessibility and usability. More and more, designers and their stakeholders are focusing on delight as shorthand for success at the expense of basic utility.</p>
<p>To reverse this trend, we have to understand why delight is an easier problem than usability. With this knowledge, we can work to build better products by putting delight last.</p>
<h2 id="three-hierarchies">Three hierarchies</h2>
<p>All problems in digital product design can be organized into a hierarchy, with hard problems at the bottom and easy problems at the top. This mental model was explored by Abraham Maslow in 1943, and it is the key to understanding our bias.</p>
<h3 id="maslow%E2%80%99s-hierarchy">Maslow’s Hierarchy</h3>
<p>In <em>A Theory of Human Motivation</em>, Maslow described a hierarchy of needs that explain human behavior and motivation. Maslow’s hierarchy of needs comprised the following categories, from lowest to highest:</p>
<ol>
<li><strong>Physiological needs:</strong> the most fundamental needs required for survival. Examples: food, water, sleep, and sex.</li>
<li><strong>Safety needs:</strong> needs associated with basic psychological well being. Examples: safety from physical harm, safety from emotional harm, and financial safety.</li>
<li><strong>Social Belonging:</strong> needs for community and emotional connection with others. These include friendships, intimate relationships, and family.</li>
<li><strong>Self-esteem:</strong> needs that provide personal fulfillment and a feeling of respect. Includes recognition, attention, and acceptance.</li>
</ol>
<figure data-type="image"><img src="https://matthewstrom.com/images/delight-1.jpg" alt="Maslow’s Hierarchy of Needs" /><figcaption>Maslow’s Hierarchy of Needs</figcaption></figure>
<p>According to the theory, people are motivated by the needs one degree above their current level of fulfillment. People only seek higher-order needs — for community, for respect, for acceptance — if their lower-order needs are satisfied.</p>
<p>The theory has its critics, but it continues to resonate to this day.</p>
<blockquote>
<p>“The continued resonance of Maslow’s theory in popular imagination, however unscientific it may seem, is possibly the single most telling evidence of its significance: it explains human nature as something that most humans immediately recognize in themselves and others.” <br />
— Uriel Abulof, <em><a href="https://link.springer.com/article/10.1007%2Fs12115-017-0198-6" target="_blank" rel="noopener">Why We Need Maslow in the Twenty-First Century</a></em></p>
</blockquote>
<h3 id="walter%E2%80%99s-hierarchy">Walter’s Hierarchy</h3>
<p>In 2011, Aaron Walter published <em>Designing for Emotion</em>. In the book, Walter adapted Maslow’s hierarchy of needs to describe the needs of the users of digital products. Walter’s hierarchy of needs was as follows:</p>
<ol>
<li><strong>Functional:</strong> users should be able to complete tasks.</li>
<li><strong>Reliable:</strong> the product shouldn’t “drop out intermittently, or [be] otherwise unreliable.”</li>
<li><strong>Usable:</strong> users should be able to “learn to perform basic tasks quickly.”</li>
<li><strong>Pleasurable:</strong> using a product should “put a smile on your face.”</li>
</ol>
<figure data-type="image"><img src="https://matthewstrom.com/images/delight-2.jpg" alt="Walter’s Hierarchy of Needs" /><figcaption>Walter’s Hierarchy of Needs</figcaption></figure>
<p>Walter argued that, in 2011, most products were content to be merely usable. More websites and applications should “transcend usability to create truly extraordinary experiences.”</p>
<h3 id="str%C3%B6m%E2%80%99s-hierarchy-(that%E2%80%99s-me)">Ström’s Hierarchy (that’s me)</h3>
<p>In the 8 years since Walter published his hierarchy, the technology that powers websites and applications has matured considerably. Twitter retired the<a href="https://www.theatlantic.com/technology/archive/2015/01/the-story-behind-twitters-fail-whale/384313/" target="_blank" rel="noopener"> fail whale</a>. Facebook introduced the Timeline. Google Docs works even if you’re not connected to the internet. Walter’s hierarchy needs a few updates:</p>
<ol>
<li><strong>Functionality:</strong> a user should be able to reliably complete tasks. This encompasses reliability and usability; these qualities are table stakes.</li>
<li><strong>Efficiency:</strong> a user should be more productive by using the product. A hammer is functional. A nail gun is efficient.</li>
<li><strong>Delight:</strong> a user should have a feeling of fulfillment, enjoyment, joy, or surprise while using the product.</li>
</ol>
<figure data-type="image"><img src="https://matthewstrom.com/images/delight-3.jpg" alt="Ström’s Hierarchy of Needs" /><figcaption>Ström’s Hierarchy of Needs</figcaption></figure>
<p>The key to the product needs hierarchy is one that Walter only mentions tangentially: your product has to satisfy the needs at each level <strong>before moving on to the next</strong>. A product can’t be efficient if it isn’t functional. A product can’t be delightful if it isn’t efficient <em>and</em> functional.</p>
<h2 id="usable-%3D-edible">Usable = Edible</h2>
<p>Walter draws an analogy between using software and eating food:</p>
<blockquote>
<p>Think back to the best meal you’ve ever had. Not a good meal, I mean a mind-blowing, palate-challenging, fall-in-love-with-food-again, great meal … Did you once think about the meal’s nutritional value? <br />
— Aaron Walter, <em>Designing for Emotion</em></p>
</blockquote>
<p>We shouldn’t settle for building software that is merely usable, just as chefs shouldn’t settle for cooking food that is merely edible.</p>
<p>But there is a dark side to the analogy. The most memorable aspects of a meal are those that cause an emotional reaction: the flavor, the texture, the visual presentation. The details of the ingredients and processes that produced your meal aren’t as memorable. In fact, the restaurant works hard to hide all those things back in the kitchen.</p>
<p>I’ve tasted great steak. I can easily remember how good it made me feel. So when I try to cook a steak, it’s obvious when the flavor and texture aren’t right. But it’s not obvious <em>why</em> it’s not right: I don’t have the same effortless recall of the temperature the steak is best cooked at, or the right questions to ask my butcher, or the right salt to season with.</p>
<p>Great products are not remembered for how usable and efficient they are. When a product satisfies our need for functionality and efficiency, we remember the emotional impression we get when using them. Then, as designers or stakeholders, we try to recreate that emotional resonance. But we don’t remember the more fundamental elements: familiar patterns, solid information architecture, reactive and responsive inputs.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/delight-0.jpg" alt="The Iceberg of Product Design Needs" /><figcaption>The Iceberg of Product Design Needs</figcaption></figure>
<h2 id="fight-the-bias">Fight the bias</h2>
<p>It’s hard to avoid the attribute substitution bias because it happens almost instantly. When editing, I often find myself correcting punctuation and grammar instead of actually reading what I wrote. When designing, I sometimes build components and styles before putting together user flows and journey maps. This looks like procrastination. But it’s an attempt to avoid the harder problems with more unknowns in favor of easier, more familiar challenges.</p>
<p>Designing for delight is the same.</p>
<p>To get to the harder problems<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/delight-comes-last/#fn1" id="fnref1">1</a></sup> of efficiency and usability, we have to go out and look for those qualities in the products we use every day. The easier it is to remember what makes Google so usable, the easier it will be to work on our own app’s search function.</p>
<p>Ultimately, fighting bias takes awareness and focus. Knowing, as G.I. Joe says, is half the battle.</p>
<hr />
<p><em>Thanks to <a href="http://joshpetersel.com/" target="_blank" rel="noopener">Josh Petersel</a>, <a href="https://twitter.com/loganalexander" target="_blank" rel="noopener">Logan Alexander</a>, and <a href="http://www.timcasasola.com/" target="_blank" rel="noopener">Tim Casasola</a> for help with earlier drafts of this essay. Also, special thanks to <a href="http://www.iamlizzie.com/" target="_blank" rel="noopener">Lizzie May</a> for reviewing the iceberg illustration.</em></p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Josh asked: “Is it always true that efficiency and usability are the hard problems, and delight the easy one? What about the products that are lightning fast and effective but nobody wants them? What do you make of Amazon discontinuing the Dash button, which let you re-order a household supply you’re running low on by just clicking a button – no need to visit a website, or even open an internet-navigating device?”</p>
<p>I guess there’s an even harder problem beneath functionality: market fit. <a href="https://matthewstrom.com/writing/delight-comes-last/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The inevitable same-ification of the internet
2019-05-31T00:00:00Z
https://matthewstrom.com/writing/sameification/
<p>Last month, Facebook revealed a major redesign of all its apps across web and mobile. Reactions from design twitter were mixed, but there was one thing everyone agreed on: it looked familiar.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/same-1.png" alt="Facebook’s 2019 Redesign, compared to Twitter by Alex Muench" /><figcaption>Facebook’s 2019 Redesign, compared to Twitter by <a href="https://twitter.com/alexmuench/status/1123522519821058049?s=20" target="_blank" rel="noopener">Alex Muench</a></figcaption></figure>
<p>A few folks correctly noted that even Twitter’s most recent redesign looked eerily similar to Google Plus circa 2013:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/same-2.png" alt="Google Plus’s 2013 Redesign" /><figcaption>Google Plus’s 2013 Redesign</figcaption></figure>
<p>Going deeper, Google’s 2013 redesign of Google Plus took a lot of cues from Pinterest’s design at the time:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/same-3.png" alt="Pinterest in 2013" /><figcaption>Pinterest in 2013</figcaption></figure>
<p>What’s going on here? Why do all websites look the same?</p>
<p>The question gets debated in the design discourse every few years. Here are some plausible answers:</p>
<ul>
<li><strong>Designers are lazy</strong>. In late 2018, Boris Müller wrote<a href="https://medium.com/s/story/on-the-visual-weariness-of-the-web-8af1c969ce73" target="_blank" rel="noopener"> Why Do All Websites Look the Same?</a> “In the age of mobile-first, generic, framework-driven development, nobody seems to bother with the visual and contextual integrity of a web page.”</li>
<li><strong>Websites are a commodity</strong>. In 2015, Travis Gertz wrote one of my favorite essays in this genre,<a href="https://louderthanten.com/coax/design-machines" target="_blank" rel="noopener"> Design Machines</a>. “Squarespace doesn’t care about content. Its entire business model relies on the fact that you can paste any ’ol passage of slop into their system and it will look acceptable.”</li>
<li><strong>Violating learned patterns hurts user experience.</strong> A 2017 article by Aurora Harley,<a href="https://www.nngroup.com/articles/practiced-patterns-mistakes/" target="_blank" rel="noopener"> Variations on Practiced Patterns Cause Mistakes</a>, states: “Past experiences and repeated practice inform user expectations. Deviations from a learned routine lead to user errors.”</li>
</ul>
<p>I agree with all of these arguments. But I’d like to offer another explanation for the same-ification of the internet, one that speaks to a fundamental truth about the way we make design decisions.</p>
<h2 id="the-principle-of-minimum-differentiation">The principle of minimum differentiation</h2>
<p>In 1929, the economist Harold Hotelling published a paper in <em>The Economic Journal</em> titled “<a href="http://www.math.toronto.edu/mccann/assignments/477/Hotelling29.pdf" target="_blank" rel="noopener">Stability in Competition</a>.” The paper describes a strange phenomenon: “an undue tendency for competitors to imitate each other in quality of goods, in location, and in other essential ways.”</p>
<p>90 years later, it’s easy to see: compare McDonalds and Burger King, Pepsi and Coke, or CVS and Walgreens. But it was noticeable even in 1929, when stores opened across the street from one another selling nearly identical goods at a nearly identical price point.</p>
<p>Hotelling’s paper shows that the convergence of competition to nearly-identical products is not just a coincidence: it is inevitable. It seems irrational, but the math is sound. This is an <em>emergent</em> phenomenon: it’s not written into the rules. Businesses don’t need to coordinate with each other. Over time, as each business pursues its own success according to the same rules, clusters form.</p>
<p>For a deeper explanation, check out this 4-minute video:</p>
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class="embed-container"><iframe src="https://www.youtube-nocookie.com/embed/jILgxeNBK_8" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0" allowfullscreen=""></iframe></div>
<h2 id="minimum-differentiation-in-software">Minimum differentiation in software</h2>
<p>Ice cream stands on the beach are one thing. Applications — especially ones as large and multifaceted as Facebook and Twitter — don’t fit perfectly into Hotelling’s simplified model of the world. But minimum differentiation factors into all the explanations for same-ness:</p>
<ul>
<li><strong>Designers aren’t lazy, just productive.</strong> Lazy is the wrong word. When stakeholders set overly ambitious targets and fill backlogs with competing priorities, it’s understandable that designers do <em>the minimum required effort</em> to succeed.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/sameification/#fn1" id="fnref1">1</a></sup></li>
<li><strong>Websites aren’t a commodity, but the technology that powers them is.</strong> With the rapid proliferation of SaaS tools for customer support, user experience, analytics, and eCommerce, anyone can (and does) build a digital product. Product owners tend to make the <em>minimum investment</em> for functionality, meaning <em>minimum risk</em>.</li>
<li><strong>Relying on established patterns doesn’t equal stagnation.</strong> <a href="https://www.nngroup.com/videos/jakobs-law-internet-ux/" target="_blank" rel="noopener">Jakob’s law</a> says that your users spend most of their time on other sites. Following this, you can improve your site’s usability by making it look like other websites. <em>Minimizing pattern variation</em> increases task success rate.</li>
</ul>
<p>These behaviors come from many product makers making perfectly rational decisions. Some even set out to differentiate themselves, only to find their end of the beach getting more crowded. Take Snapchat, for instance: the app launched its “stories” feature in 2013. At the time, Snapchat was new and different (whether or not the UI and UX is good or bad is still hotly debated<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/sameification/#fn2" id="fnref2">2</a></sup>). In 2016, Instagram launched its own version of stories.</p>
<p>Instagram CEO Kevin Systrom put it in no uncertain terms: “[Snapchat] deserves all the credit.” Other platforms followed. In 2019, Instagram, Facebook, and WhatsApp each count more than 500 million people posting or viewing stories every day.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/sameification/#fn3" id="fnref3">3</a></sup></p>
<h2 id="conclusion">Conclusion</h2>
<figure data-type="image"><img src="https://matthewstrom.com/images/same-4.jpg" alt="Photo by James Wainscoat on Unsplash" /><figcaption>Photo by <a href="https://unsplash.com/photos/b7MZ6iGIoSI" target="_blank" rel="noopener">James Wainscoat on Unsplash</a></figcaption></figure>
<p>Convergence is not the sign of a broken system, or a symptom of a more insidious disease. It is an emergent phenomenon that arises from a few simple rules.</p>
<p>It’s similar to another emergent phenomenon: a murmuration of starlings. Each bird follows three rules:</p>
<ol>
<li><strong>Separation</strong>: Don’t crowd other birds.</li>
<li><strong>Cohesion</strong>: Move towards the center of nearby groups of birds.</li>
<li><strong>Alignment</strong>: Try to match the direction and speed of nearby birds.</li>
</ol>
<p>The birds don’t communicate directly with each other, but they still form a cohesive and ever-evolving flock. Seen from afar, it’s almost as if they are a single organism.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/sameification/#fn4" id="fnref4">4</a></sup></p>
<p>If Hotelling is right, even if they try to differentiate themselves, all websites will eventually flock together.</p>
<hr />
<p><em>Special thanks to <a href="http://joshpetersel.com/" target="_blank" rel="noopener">Josh Petersel</a> and <a href="http://jfrancisayres.com/" target="_blank" rel="noopener">James Ayres</a> for contributing to early drafts of this essay.</em></p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Oddly, this mindset is seen as a <a href="https://dev.to/drm317/the-lazy-developer-5goe" target="_blank" rel="noopener">positive one for developers to have</a>. <a href="https://matthewstrom.com/writing/sameification/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>“<a href="https://www.figma.com/blog/did-snapchat-succeed-because-of-its-controversial-ui/" target="_blank" rel="noopener">Snapchat’s usability sucks</a>.” <a href="https://matthewstrom.com/writing/sameification/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p><a href="https://techcrunch.com/2019/04/24/facebook-stories-500-million/" target="_blank" rel="noopener">https://techcrunch.com/2019/04/24/facebook-stories-500-million/</a> <a href="https://matthewstrom.com/writing/sameification/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>The study of murmurations intersects with computer science in some <a href="https://en.wikipedia.org/wiki/Boids" target="_blank" rel="noopener">really neat ways</a>. <a href="https://matthewstrom.com/writing/sameification/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Responsive roadmaps
2019-05-08T00:00:00Z
https://matthewstrom.com/writing/responsive-roadmaps/
<p>Shane Parrish’s essay <a href="https://fs.blog/2015/11/map-and-territory/" target="_blank" rel="noopener"><em>The Map is Not the Territory</em></a> begins:</p>
<blockquote>
<p>The map of reality is not reality. Even the best maps are imperfect. That’s because they are reductions of what they represent.</p>
</blockquote>
<p>The same is true for product roadmaps. Understanding and applying Parrish’s mental model is the key to designing a more usable, more maintainable, and more accurate roadmap.</p>
<h2 id="what-maps-miss">What maps miss</h2>
<p>Returning to Parish’s quote: “[Maps are] reductions of what they represent.” Map makers have choices when reducing the information they are representing. Take a map of the earth’s surface, for example:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/maps-0.jpg" alt="The Mercator Projection" /><figcaption>The Mercator Projection</figcaption></figure>
<p><strong>The Mercator projection</strong> keeps information about straight lines of travel, but reduces information about areas of land. As a result, the map works great for ocean navigation, but grossly distorts the actual size of the continents<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/responsive-roadmaps/#fn1" id="fnref1">1</a></sup>.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/maps-1.jpg" alt="The Robinson Projection" /><figcaption>The Robinson Projection</figcaption></figure>
<p><strong>The Robinson projection</strong> keeps information about the general shape, size, and location of the continents, but reduces the accuracy of measurements over long distances. This results in a map that’s great for teaching children about geography, but would be useless as a navigational aid.</p>
<p>Product roadmaps are reductions, too. Roadmaps reduce product strategy down to a very digestible (and very power-pointable) format. In doing so, roadmap-makers ask questions: who will be using this map? Is it for education, or navigation? Which information should be preserved, and which can be distorted?</p>
<h2 id="what-traditional-roadmaps-miss">What traditional roadmaps miss</h2>
<figure data-type="image"><img src="https://matthewstrom.com/images/maps-2.jpg" alt="A modern roadmap in Gantt chart format" /><figcaption>A modern roadmap in Gantt chart format</figcaption></figure>
<p>Most modern product roadmaps look like this: One axis is time, the other is goals. Each goal is painted across a span of time, representing when the goal is to be achieved.</p>
<p>This format, called a Gantt chart, was invented more than 100 years ago. By visualizing complicated processes over long periods of time, Gantt charts enabled factory managers to identify and eliminate inefficiency.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/maps-3.jpg" alt="How a Gantt chart looked 100 years ago" /><figcaption>How a Gantt chart looked 100 years ago</figcaption></figure>
<p>The measurement-driven approach to work (sometimes called <em>scientific management</em> or <em>Taylorism</em>) was a major innovation during the second industrial revolution. Precise planning and management enabled workers to understand and control the intricacies of mass manufacturing.</p>
<p>Over the past century, the nature of work has changed for most people. Instead of overseeing assembly lines of human-operated machines with interchangeable parts, most managers oversee cross-functional teams comprising knowledge workers and specialized technicians.</p>
<p>But we still use Gantt charts. We think our roadmap looks like this:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/maps-4.jpg" alt="A tidy (but naive) roadmap" /><figcaption>A tidy (but naive) roadmap</figcaption></figure>
<p>When in reality, it looks like this:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/maps-5.jpg" alt="An ugly (but realistic) roadmap" /><figcaption>An ugly (but realistic) roadmap</figcaption></figure>
<p>Gantt charts make sense of complicated processes. But software development isn’t merely complicated. It is complex, unpredictable, and at times chaotic. Traditional roadmaps can’t make sense of complexity.</p>
<p>Gantt charts visualize output. But software teams don’t succeed on output alone; our work is no longer about our output in widgets-per-day; we now drive <em>outcomes,</em> real impact to our customers’ lives. Traditional roadmaps can’t visualize outcomes.</p>
<p>Instead of trying to precisely predict the order and magnitude of our output, let’s draw a <strong>responsive roadmap</strong><sup class="footnote-ref"><a href="https://matthewstrom.com/writing/responsive-roadmaps/#fn2" id="fnref2">2</a></sup> that visualizes the process of turning uncertainty and complexity into outcomes and output.</p>
<h1 id="what-is-a-responsive-roadmap%3F">What is a responsive roadmap?</h1>
<p>A responsive roadmap is a <strong>story of how a team will accomplish their goals.</strong> Any team can create, publish, and maintain their own roadmap.</p>
<p>A responsive roadmap consists of four elements:</p>
<ol>
<li><strong>An ambitious objective</strong> that guides all the work your team is doing,</li>
<li><strong>Measurable key results</strong> that tell you if you’re on the right track,</li>
<li><strong>Concrete targets</strong> that will move the needle of your key result, and</li>
<li><strong>Current projects</strong> that you have undertaken to reach your next target.</li>
</ol>
<figure data-type="image"><img src="https://matthewstrom.com/images/maps-6.png" alt="A responsive roadmap" /><figcaption>A responsive roadmap</figcaption></figure>
<p>Your responsive roadmap is a snapshot of your current work, as well as a model of how you’ll process uncertainty over time.</p>
<p>A responsive roadmap is not a sequence. The team can work on a task, condition, key result, and objective simultaneously. For instance:</p>
<p><strong>Objective:</strong> Make our checkout flow feel instantaneous<br />
<strong>Key Result</strong>: 99% of checkout sessions last less than 5 seconds<br />
<strong>Target</strong>: Billing details form should load in 100ms<br />
<strong>Project</strong>: Remove jQuery<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/responsive-roadmaps/#fn3" id="fnref3">3</a></sup> dependency</p>
<p>Each step in a responsive roadmap includes an increasing amount of uncertainty. As you move from projects out to missions, exactly how and when you’ll achieve that goal become fuzzier.</p>
<p>In our example, I can say with a high degree of certainty exactly how I’ll remove our jQuery dependency, and that it’ll take a few hours.</p>
<p>The team’s next target, loading the billing details form quickly, will probably involve a few more projects, but we can’t say for certain if it’ll take a few days or a few weeks.</p>
<p>We’ll need to plan a few more targets to get to a 5-second checkout process, but we’ll be learning a lot before we accomplish the desired result. Along the way, another team might help us by improving our design system, so our plans will need to change. Knowing what we don’t know, it’s in our best interest to not spend too much time planning that far out.</p>
<p>Finally, we’ll only have an instantaneous-feeling checkout flow if we do everything else right. If we commit to that mission and use it to align the rest of our work, we can continuously make progress and report back.</p>
<h2 id="how-to-create-and-publish-a-responsive-roadmap">How to create and publish a responsive roadmap</h2>
<p>Creating a responsive roadmap doesn’t require fancy software. All you need is:</p>
<ul>
<li><strong>An accessible record of your roadmap</strong> - Google Docs, Confluence, or Miro work great.</li>
<li><strong>A short recurring meeting to update your roadmap</strong> - an hour every month should be sufficient. If you’re working in sprints, time your roadmap meeting with your working rhythm.</li>
</ul>
<p>During your first few meetings, walk through the following statements in order:</p>
<ol>
<li><strong>We know what our objective is.</strong> <br />
If false, spend the meeting defining objectives. If true, continue →</li>
<li><strong>We have a measurable key result that will tell us if we’re on the right track.</strong> <br />
If false, spend the meeting defining key results. If true, continue →</li>
<li><strong>We have a concrete target that will move the needle of our key result.</strong> <br />
If false, spend the meeting defining targets. If true, continue →</li>
<li><strong>Everyone has a project to work on to get to our next project.</strong> <br />
If false, spend the meeting defining projects. If true, the meeting is over!</li>
</ol>
<figure data-type="image"><img src="https://matthewstrom.com/images/maps-7.png" alt="How to build a responsive roadmap" /><figcaption>How to build a responsive roadmap</figcaption></figure>
<p>After you’ve written down your first objective, key results, targets, and projects, you’re ready to publish your roadmap. If you’re using a cloud-based tool, make a short, easy-to-remember link to your roadmap. If you’re working offline, use something ephemeral like a whiteboard or large post-it.</p>
<p>After you’ve published your roadmap for the first time, keeping it up-to-date is simple. At your regular roadmap meeting, run the previous statement in reverse order:</p>
<ol>
<li><strong>We know what projects we’ll work on next.</strong> <br />
If false, define more projects to hit your next target. If true, continue →</li>
<li><strong>We know what target we’ll work on next to move the needle of our key result.</strong> <br />
If false, define the next target for the team. If true, continue →</li>
<li><strong>Once we achieve our current key result, we know what key result we’ll seek next.</strong> <br />
If false, define the next key result. If true, continue →</li>
<li><strong>Once we accomplish our current objective, we know what objective we’ll focus on next.</strong> <br />
If false, define your next objective. If true, congratulations! You’ve planned all you need to plan.</li>
</ol>
<p>Add your changes do the document, and you’re up-to-date!</p>
<p>In this mindset, the team is always working one level of uncertainty ahead. Practically, teams will spend almost all of their time defining projects. But when the team closes in on a target condition, key result, or objective, they’ll be prepared to transition seamlessly to the next.</p>
<p>Crucially, continuous integration removes the need for onerous quarterly roadmap planning. At any time, any member of the organization can look at the responsive roadmap to get see what the team is working on now, where they’re headed, what results they are driving, and their high-level initiative.</p>
<h2 id="how-to-use-a-responsive-roadmap-to-align">How to use a responsive roadmap to align</h2>
<p>Different levels of your responsive roadmap are useful for coordinating at the various levels of your organization.</p>
<ul>
<li><strong>Objectives</strong> are useful for connecting your work to a high-level organization vision, your so-called “north star.”</li>
<li><strong>Key Results,</strong> when written well, coordinate your work with the strategic initiatives of executive stakeholders. Key results create accountability without succumbing to <a href="https://en.wikipedia.org/wiki/Goodhart%27s_law" target="_blank" rel="noopener">Goodhart’s law</a>.</li>
<li><strong>Targets</strong> create alignment across functional groups: at Bitly, they tell marketing and sales teams know what to expect from feature teams. Targets also map neatly to what agile software development calls an epic.</li>
<li><strong>Projects</strong> align teammates day-to-day. Projects also map to what agile software development calls stories…They answer the question “what are you working on?” with a pull request (just check Jira!) rather than a synchronous status meeting.</li>
</ul>
<h3 id="what-about-deadlines%3F">What about deadlines?</h3>
<p>Due to its complexity, software development is <a href="https://erikbern.com/2019/04/15/why-software-projects-take-longer-than-you-think-a-statistical-model.html" target="_blank" rel="noopener">notoriously difficult to estimate</a>. But businesses need deadlines to plan many vital functions — it’s a good thing that I get my paycheck reliably on the first and fifteenth of the month. This is one of the most challenging parts of planning software development. We know our estimates are bad, but we have to make them anyway.</p>
<p>Avoid putting deadlines on Objectives and Key Results. Most teams just can’t know if they’ll strike gold and surpass their goal quickly or get stuck in a quagmire of technical debt and shifting requirements. Constant learning and re-evaluating is part of great teamwork, and deadlines tend to put a damper on experimentation and innovation.</p>
<p>Instead, put your <em>targets</em> on a calendar. Since these targets will likely be a few cycles out (weeks to months), teams will have enough time to coordinate go-to-market and customer support plans.</p>
<h2 id="all-maps-are-wrong%2C-but-some-are-useful">All maps are wrong, but some are useful</h2>
<p>The statistician George Box said that “all [statistical] models are wrong but some are useful.” The same is true for maps. All maps are right in some regard (the Mercator projection’s straight lines across the Atlantic ocean), but wrong in others (the Mercator projection’s continents).</p>
<p>Traditional project roadmaps are right about our knowledge in a moment of time. They are good records of our beliefs about the correct sequence and magnitude of our work. But these roadmaps are wrong about the reality of work, and almost every roadmap I’ve ever used goes out the window as soon as the work starts. No battle plan ever survives contact with the enemy.</p>
<p>Responsive roadmaps are right about the nature of work: it is full of uncertainty and subject to change. They are wrong about what we’ll be doing in the future; the farther out we look, the less accurate a responsive roadmap is. That tradeoff affords us time to focus in the present on delivering at the highest level of quality.</p>
<hr />
<p><em>Special thanks to <a href="https://twitter.com/lauradhahn" target="_blank" rel="noopener">Laura Hahn</a> and <a href="http://joshpetersel.com/" target="_blank" rel="noopener">Josh Petersel</a> for contributing to early drafts of this essay.</em></p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>My favorite tool for un-learning the biases of the Mercator Projection is the website <a href="https://thetruesize.com/#?borders=1~!MTY5MjMxNzk.MjI1MTQwMQ*MzM0ODUzMjI(NDAwNjgwNw~!CONTIGUOUS_US*MTAwMjQwNzU.MjUwMjM1MTc(MTc1)MA~!IN*NTI2NDA1MQ.Nzg2MzQyMQ)MQ~!CN*OTkyMTY5Nw.NzMxNDcwNQ(MjI1)Mg" target="_blank" rel="noopener">The True Size Of</a>. The default view — showing that the area of China, India, and the contiguous US all fit within the landmass of Africa — is stunning. <a href="https://matthewstrom.com/writing/responsive-roadmaps/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>This is a reference to the<a href="https://www.responsive.org/manifesto" target="_blank" rel="noopener"> Responsive Manifesto</a>, an attempt to describe modern organizational tensions. <a href="https://matthewstrom.com/writing/responsive-roadmaps/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>jQuery is a third-party javascript library that used to be essential in web applications. <a href="https://matthewstrom.com/writing/responsive-roadmaps/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The slippery slope of in product messaging
2019-03-10T00:00:00Z
https://matthewstrom.com/writing/wayfinding/
<p><strong>In-product education</strong> is a pattern that has emerged from the overlap between user experience design, marketing strategy, and product management. A brief definition: in-product education markets a product to someone who already uses that product. Think of the messages you get from a chatbot, the guided tours you see when you sign up for a new account, or the webinars you get invited to on becoming a pro user. That’s in-product education.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wayfinding-1.jpg" alt="Dropbox onboarding image by Useronboard.com" /><figcaption>Dropbox onboarding image by <a href="https://www.useronboard.com/how-dropbox-onboards-new-users" target="_blank" rel="noopener">Useronboard.com</a></figcaption></figure>
<p>Recently, there’s been an explosion of products and services in the in-product education space. New tools promise to enhance your application’s user experience and drive business value. It’s true that in-product education can improve key metrics in the short term. But in the long run, investment in in-product education can limit user experience.</p>
<p>To see why, let’s compare applications to airports.</p>
<h2 id="airports-and-applications">Airports and Applications</h2>
<p>The user experience concerns of airports and applications are similar. Travelers pass through airports with a to-do list: locate their gate, eat lunch, use the restroom, retrieve their bags, go through customs, charge their phone. App users have a to-do list, too: they need to update their profile, read their email, create a new blog post, or file their taxes. But sometimes users can’t find the path to accomplishing their tasks. This is a problem for airports, too.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wayfinding-4.jpg" alt="Airport signage photo by George Kourounis on Unsplash" /><figcaption>Airport signage photo by <a href="https://unsplash.com/photos/UxAXiKklRLg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">George Kourounis on Unsplash</a></figcaption></figure>
<p>For an airport, lost passengers = lost revenue. If your passengers can’t find the food court, they won’t spend money. If they can’t find their gate, they’ll miss their flight. If they can’t find the trash bins, your janitorial fees are higher. Airports solve this problem by placing easy-to-read wayfinding signs in busy areas. For an airport, an investment in good wayfinding signs is a no-brainer.</p>
<p>This is the argument for in-product education: lost users = lost revenue. For example, gmail tells new users where to find their inbox, so they’ll know where to go to read their email. But we makers of software have an opportunity that airport makers don’t. We can move the food court.</p>
<h2 id="opportunity-cost">Opportunity cost</h2>
<p>Once the foundation is set, an airport’s developer can’t re-design the building. The cost of new signs is almost zero compared to the cost of moving terminals and amenities around. If travelers are getting lost, add more signs. It’s a no-brainer.</p>
<p>When an app’s users can’t find their way, the builders have more options. Incremental user experience changes are quick and cheap. But in-product education can also be cheap.</p>
<p>Products like AppCues and Intercom have changed the cost structure of in-product education. Developers don’t have to build in-app education themselves; they can install a library and hand control to the marketing team.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wayfinding-5.png" alt="An example of what you can build with AppCues, from the AppCues blog" /><figcaption>An example of what you can build with AppCues, from the <a href="https://www.appcues.com/blog/how-amplitude-bypassed-engineering-bottlenecks-by-using-appcues" target="_blank" rel="noopener">AppCues blog</a></figcaption></figure>
<p>With plug-and-play libraries, in-product education is an attractive option. But there’s a hidden cost to using in-product education: the opportunity cost. And that’s where the slippery slope starts.</p>
<p>When teams use these tools to point their users in the right direction, they don’t learn why the users get lost in the first place. If the underlying problems are never resolved, the way-finding signs can become a permanent fixture in the landscape. This cycle causes the user experience to get more and more complex over time.</p>
<h2 id="norman-doors-and-epipens">Norman Doors and EpiPens</h2>
<p>Norman doors are an example of this complexity spiral. You might not have heard the term, but I’m sure that you have experienced a Norman door. This is a Norman door:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wayfinding-2.jpg" alt="An example of a Norman door, by Cameron Moll" /><figcaption>An example of a Norman door, by <a href="https://twitter.com/cameronmoll/status/1016726780240060416" target="_blank" rel="noopener">Cameron Moll</a></figcaption></figure>
<p>In an <a href="https://99percentinvisible.org/article/norman-doors-dont-know-whether-push-pull-blame-design/" target="_blank" rel="noopener">article and video,</a> 99% Invisible describes Norman doors:</p>
<blockquote>
<p>A so-called “Norman Door” has design elements that give you the wrong usability signals to the point that special signage is needed to clarify how they work. Without signs, a user is left guessing about whether to push or pull, creating needless frustration.</p>
</blockquote>
<p>Norman doors don’t happen by accident. A designer has to realize that people are failing to use the door correctly, and add a sign. Despite the fact that good door designs are everywhere, Norman doors still persist. Don’t let your app be a Norman door.</p>
<hr />
<p>A more alarming example is the EpiPen. Unlike most insulin pens and regular syringes, the original EpiPen’s cap and needle were on opposite ends. In an <a href="https://medium.com/@joyclee/the-role-of-metaphor-in-design-cd6d8f04daab" target="_blank" rel="noopener">in-depth article,</a> Joyce Lee describes the crisis that result from this design: “[Between 1994 and 2007,] There were over 15,000 unintentional injections with the EpiPen reported.”</p>
<p>To fix the problem with accidental injections, Mylan (the maker of the EpiPen) added text to the needle end of the pen.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wayfinding-3.jpg" alt="The updated EpiPen design" /><figcaption>The updated EpiPen design</figcaption></figure>
<p><a href="https://www.ncbi.nlm.nih.gov/pubmed/25850463" target="_blank" rel="noopener">According to one study</a>, the updated pen had a <strong>success rate of just 67%.</strong> ProPublica writes:</p>
<blockquote>
<p>That same study compared the EpiPen to another epinephrine auto-injector, the Auvi-Q … The Auvi-Q is designed with the cap and needle on the same end – and had a success rate of over 90 percent.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/wayfinding/#fn1" id="fnref1">1</a></sup></p>
</blockquote>
<p>Don’t let your app be an EpiPen.</p>
<h2 id="conclusion">Conclusion</h2>
<p>If you are considering using in-product education to guide your users, try instead to solve the underlying problem. If you are introducing a new product or feature, let users explore at their own pace. Make functionality obvious. Use what you learn to avoid usability issues in the future. Build robust feedback loops, and let users tell you when they run into problems. Don’t trade the chance to develop a core competency for a short-term budget win. In the words of Don Norman, namesake of the Norman door:</p>
<p>“Any time you see signs or labels added to a device, it is an indication of bad design.”</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://www.propublica.org/article/if-it-needs-a-sign-its-probably-bad-design" target="_blank" rel="noopener">https://www.propublica.org/article/if-it-needs-a-sign-its-probably-bad-design</a> <a href="https://matthewstrom.com/writing/wayfinding/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Switching to variable fonts
2019-03-03T00:00:00Z
https://matthewstrom.com/writing/variable-fonts/
<p>Ever since I first learned about variable fonts, I’ve wanted to use them in my own work. After learning that <a href="https://github.com/adobe-fonts/source-serif-pro" target="_blank" rel="noopener">Source Serif</a> and <a href="https://rsms.me/inter/" target="_blank" rel="noopener">Inter</a> both had variable versions, I started switching this site over to use them. Here’s how I implemented the change, and what I learned along the way.</p>
<h2 id="what-are-variable-fonts%3F">What are variable fonts?</h2>
<p>Variable fonts are a new<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/variable-fonts/#fn1" id="fnref1">1</a></sup> type of font file. Instead of requiring individual files for bold and light weights, or regular or italic variations, you only need a single variable file.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/variable-1.gif" alt="A responsive lettering example, courtesy of Erik van Blokland." /><figcaption>A responsive lettering example, courtesy of Erik van Blokland.</figcaption></figure>
<p>Why use variable fonts? In addition to technical simplicity (1 font file instead of multiple), variable fonts tend to come in smaller files than their more traditional cousins. Smaller files mean faster load times. Faster load times mean a better internet.</p>
<h2 id="how-i-implemented-variable-fonts">How I implemented variable fonts</h2>
<p>I started with Clearleft’s <a href="https://medium.com/clear-left-thinking/how-to-use-variable-fonts-in-the-real-world-e6d73065a604" target="_blank" rel="noopener">case study of implementing variable fonts</a>. The instructions they provide are incredibly detailed and useful, so I won’t try to re-create them here.</p>
<p>Before I switched to variable fonts, I was loading Source Serif in Roman and Italic at a two different weights. I used typekit’s CSS-only loader, as it was super-speedy compared to the javascript equivalent. To get those two fonts from Typekit’s server took 4 requests, bringing the page to a total of 8 requests<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/variable-fonts/#fn2" id="fnref2">2</a></sup>.</p>
<table class="table--responsive l--mar-top-m l--mar-btm-m">
<colgroup></colgroup>
<colgroup span="5"></colgroup>
<thead>
<tr>
<th class="table--header-empty"></th>
<th class="t--align-right table--group-start">First Byte</th>
<th class="t--align-right">Start Render</th>
<th class="t--align-right">Requests</th>
<th class="t--align-right">Bytes in</th>
<th class="t--align-right table--group-end">Speed Index</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Typekit fonts</th>
<td data-label="First Byte" class="t--align-right t--numbers-tabular table--group-start">0.21s</td>
<td data-label="Start Render" class="t--align-right t--numbers-tabular">0.80s</td>
<td data-label="Requests" class="t--align-right t--numbers-tabular">8</td>
<td data-label="Bytes In" class="t--align-right t--numbers-tabular">80 KB</td>
<td data-label="Speed Index" class="t--align-right t--numbers-tabular table--group-end">0.82s</td>
</tr>
</tbody>
</table>
<p>My initial attempt at including a variable version of Source Serif, along with introducing Inter, resulted in a surprisingly substantial <em>increase</em> in most metrics.</p>
<table class="table--responsive l--mar-top-m l--mar-btm-m">
<colgroup></colgroup>
<colgroup span="5"></colgroup>
<thead>
<tr>
<th class="table--header-empty"></th>
<th class="t--align-right table--group-start">First Byte</th>
<th class="t--align-right">Start Render</th>
<th class="t--align-right">Requests</th>
<th class="t--align-right">Bytes in</th>
<th class="t--align-right table--group-end">Speed Index</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Typekit</th>
<td data-label="First Byte" class="t--align-right t--numbers-tabular table--group-start">0.21s</td>
<td data-label="Start Render" class="t--align-right t--numbers-tabular">0.80s</td>
<td data-label="Requests" class="t--align-right t--numbers-tabular">8</td>
<td data-label="Bytes In" class="t--align-right t--numbers-tabular">80 KB</td>
<td data-label="Speed Index" class="t--align-right t--numbers-tabular table--group-end">0.82s</td>
</tr>
<tr>
<th scope="row">Variable</th>
<td data-label="First Byte" class="t--align-right t--numbers-tabular table--group-start">0.22s</td>
<td data-label="Start Render" class="t--align-right t--numbers-tabular">
<span class="c--green t--size-s">(-0.1)</span> 0.70s</td>
<td data-label="Requests" class="t--align-right t--numbers-tabular">
<span class="c--green t--size-s">(-2)</span> 6</td>
<td data-label="Bytes In" class="t--align-right t--numbers-tabular">
<span class="c--red t--size-s">(+464)</span> 544 KB</td>
<td data-label="Speed Index" class="t--align-right t--numbers-tabular table--group-end">
<span class="c--red t--size-s">(+0.19)</span> 1.12s</td>
</tr>
</tbody>
</table>
<p>Looking into this, I realized that the variable font files were huge: Inter weighs in at 387kb, making up most of the difference. What happened? I thought variable fonts were supposed to be small?</p>
<p>It turns out that the variable font files I was using include a <em>massive</em> amount of characters: Diacritics for many languages, Cyrillic characters, Greek characters, and so on. I didn’t need most of those; I write in english, and system fonts can support automatic translations.</p>
<p>So I used a tool called <a href="https://github.com/filamentgroup/glyphhanger" target="_blank" rel="noopener">glyphhanger</a> to subset my fonts to just latin characters, removing most of the characters I wouldn’t need. In the case of Inter, this resulted in a 300kb reduction — that’s a <em>78% reduction.</em></p>
<p>With the new subset fonts, my numbers were looking much better:</p>
<table class="table--responsive l--mar-top-m l--mar-btm-m">
<colgroup></colgroup>
<colgroup span="5"></colgroup>
<thead>
<tr>
<th class="table--header-empty"></th>
<th class="t--align-right table--group-start">First Byte</th>
<th class="t--align-right">Start Render</th>
<th class="t--align-right">Requests</th>
<th class="t--align-right">Bytes In</th>
<th class="t--align-right table--group-end">Speed Index</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Typekit</th>
<td data-label="First Byte" class="t--align-right t--numbers-tabular table--group-start">0.21s</td>
<td data-label="Start Render" class="t--align-right t--numbers-tabular">0.80s</td>
<td data-label="Requests" class="t--align-right t--numbers-tabular">8</td>
<td data-label="Bytes In" class="t--align-right t--numbers-tabular">80 KB</td>
<td data-label="Speed Index" class="t--align-right t--numbers-tabular table--group-end">0.82s</td>
</tr>
<tr>
<th scope="row">Variable (subset)</th>
<td data-label="First Byte" class="t--align-right t--numbers-tabular table--group-start">0.21s</td>
<td data-label="Start Render" class="t--align-right t--numbers-tabular">
<span class="c--green t--size-s">(-0.2) </span>0.60s</td>
<td data-label="Requests" class="t--align-right t--numbers-tabular">
<span class="c--green t--size-s">(-2) </span>6</td>
<td data-label="Bytes In" class="t--align-right t--numbers-tabular">
<span class="c--red t--size-s">(+82) </span>162 KB</td>
<td data-label="Speed Index" class="t--align-right t--numbers-tabular table--group-end">
<span class="c--green t--size-s">(-0.17) </span>0.65s</td>
</tr>
</tbody>
</table>
<p>Fanstastic! The upsides were great:</p>
<ul>
<li><strong>1 new font</strong>, Inter (previously I was relying on system fonts for sans serif)</li>
<li>Access to the <strong>full spectrum of font weights</strong> (previously I only had regular and bold)</li>
<li>A Speed Index improvement of <strong>21%</strong></li>
</ul>
<p>And there was only one downside:</p>
<ul>
<li>The site downloads an extra 82kb on initial load :(</li>
</ul>
<p>But wait! Because I am serving the fonts myself, I have better control over caching. Before I made this update, I was relying on Typekit’s caching instructions, which only kept the css for a maximum of 10 minutes. Now, 100% of my static assets are cached for more than a week. This means return visitors will experience better performance.</p>
<h2 id="what-i-learned">What I learned</h2>
<p>Wrapping it all up:</p>
<ol>
<li><strong>Variable font support is approaching critical levels for wide adoption</strong> Almost all modern browsers support variable fonts, accounting for <a href="https://caniuse.com/#search=variable%20fonts" target="_blank" rel="noopener">79% of internet users</a>.</li>
<li><strong>There are high-quality variable fonts that you can download and use today</strong> Nick Sherman has created a <a href="https://v-fonts.com/" target="_blank" rel="noopener">variable font repository</a> if you’d like to browse and try what’s available.</li>
<li><strong>Variable fonts can improve performance if you subset carefully</strong> - While it’s not 100% out-of-the-box, there ar easy-to-use subsetting tools like <a href="https://github.com/filamentgroup/glyphhanger" target="_blank" rel="noopener">glyphanger</a> and <a href="https://github.com/fonttools/fonttools" target="_blank" rel="noopener">fonttools</a> that can help you over the finish line.</li>
</ol>
<p>Next time you’re booting up a project, give variable fonts a try.</p>
<h4 id="a-note-on-fallback-fonts">A note on fallback fonts</h4>
<p>Astute readers will note that I chose not to implement fallback fonts for older browsers. The reason for this is twofold: first, I’m lazy. I wanted to ship this update without getting in the weeds. Second, I don’t care if my site doesn’t look identical in all browsers ever. I am confident that it’ll look good in whatever fonts match my detailed <a href="https://gist.github.com/don1138/5761014" target="_blank" rel="noopener">system font stacks</a>.</p>
<hr />
<h2 id="update%3A-safari-12-bug">Update: Safari 12 bug</h2>
<p>When I originall published this post, I was experiencing a weird bug: in Safari, all instances of Inter were rendering in italic. No matter what I did, I couldn’t force Safari to use the normal (upright) version of Inter. I reached out for help:</p>
<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">For some strange reason, Inter shows up in italic on Safari, despite specifying `font-style: normal` in the font-face declaration. Any ideas why? <a href="https://twitter.com/rsms?ref_src=twsrc%5Etfw">@rsms</a> (2/2)</p>— Matthew Ström (@ilikescience) <a href="https://twitter.com/ilikescience/status/1102259490576052225?ref_src=twsrc%5Etfw">March 3, 2019</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><br />
<p>My question was almost immediately answered by the creator of Inter, <a href="https://rsms.me/" target="_blank" rel="noopener">Rasmus Andersson</a>:</p>
<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">This is a known bug in Safari with variable fonts. You either need to use the single-axis variable fonts with Safari, or explicitly set the “slnt” axis position to 0 for :root and 1 for em, i, etc.</p>— Rasmus Andersson (@rsms) <a href="https://twitter.com/rsms/status/1102265361360052224?ref_src=twsrc%5Etfw">March 3, 2019</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">Unless you need the intermediate italic grades, I’d recommend using the single-axis version of Inter. Should speed up your page loads in common cases as well (ie when no text is italic.)</p>— Rasmus Andersson (@rsms) <a href="https://twitter.com/rsms/status/1102267548530176000?ref_src=twsrc%5Etfw">March 3, 2019</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <br />
<p>And that’s exactly what I did: I replaced the single Inter font file with two files: one for the italic variant and one for the normal variant. As predicted, this fixed the bug. Hooray! Here’s the performance breakdown on a page that uses the same fonts as before (ie no italic sans-serif):</p>
<table class="table--responsive l--mar-top-m l--mar-btm-m">
<colgroup></colgroup>
<colgroup span="5"></colgroup>
<thead>
<tr>
<th class="table--header-empty"></th>
<th class="t--align-right table--group-start">First Byte</th>
<th class="t--align-right">Start Render</th>
<th class="t--align-right">Requests</th>
<th class="t--align-right">Bytes In</th>
<th class="t--align-right table--group-end">Speed Index</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Typekit</th>
<td data-label="First Byte" class="t--align-right t--numbers-tabular table--group-start">0.21s</td>
<td data-label="Start Render" class="t--align-right t--numbers-tabular">0.80s</td>
<td data-label="Requests" class="t--align-right t--numbers-tabular">8</td>
<td data-label="Bytes In" class="t--align-right t--numbers-tabular">80 KB</td>
<td data-label="Speed Index" class="t--align-right t--numbers-tabular table--group-end">0.82s</td>
</tr>
<tr>
<th scope="row">Variable (subset)</th>
<td data-label="First Byte" class="t--align-right t--numbers-tabular table--group-start">0.21s</td>
<td data-label="Start Render" class="t--align-right t--numbers-tabular">
<span class="c--green t--size-s">(-0.2) </span>0.60s</td>
<td data-label="Requests" class="t--align-right t--numbers-tabular">
<span class="c--green t--size-s">(-2) </span>6</td>
<td data-label="Bytes In" class="t--align-right t--numbers-tabular">
<span class="c--red t--size-s">(+82) </span>162 KB</td>
<td data-label="Speed Index" class="t--align-right t--numbers-tabular table--group-end">
<span class="c--green t--size-s">(-0.17) </span>0.65s</td>
</tr>
<tr>
<th scope="row">Variable (single-axis)</th>
<td data-label="First Byte" class="t--align-right t--numbers-tabular table--group-start">0.20s</td>
<td data-label="Start Render" class="t--align-right t--numbers-tabular">
<span class="c--green t--size-s">(-0.2) </span>0.60s</td>
<td data-label="Requests" class="t--align-right t--numbers-tabular">
<span class="c--green t--size-s">(-2) </span>6</td>
<td data-label="Bytes In" class="t--align-right t--numbers-tabular">
<span class="c--red t--size-s">(+97) </span>179 KB</td>
<td data-label="Speed Index" class="t--align-right t--numbers-tabular table--group-end">
<span class="c--green t--size-s">(-0.22) </span>0.60s</td>
</tr>
</tbody>
</table>
<p>I’m loading even more data than with the single-axis font (why? I honestly have no idea), but see a net decrease in speed index due to faster rendering. I’ll be exploring this in more detail in the future, but for now, it’s a great start.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>To say that variable fonts are new is slightly misleading. The concept of variable fonts has been around since the <a href="https://eyeondesign.aiga.org/parametric-and-variable-typeface-systems-shape-shifters-for-letterforms/" target="_blank" rel="noopener">1970’s</a>, and the technology to implement variable fonts on the web is <a href="https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369" target="_blank" rel="noopener">at least three years old</a>. Until recently, browsers have been slow to support variable fonts. As of February 2019, however, <a href="https://caniuse.com/#search=variable%20fonts" target="_blank" rel="noopener">79% of internet users</a> benefit from websitses that use variable fonts. <a href="https://matthewstrom.com/writing/variable-fonts/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>I used <a href="https://www.webpagetest.org/" target="_blank" rel="noopener">https://www.webpagetest.org/</a> for all of these measurements. Each result is the average of 3 runs. <a href="https://matthewstrom.com/writing/variable-fonts/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Compounding design, expiring design
2019-02-24T00:00:00Z
https://matthewstrom.com/writing/compounding-design/
<p>I recently read <a href="https://fs.blog/2019/02/compounding-knowledge/" target="_blank" rel="noopener">an essay on ‘compounding knowledge.’</a>. Warren Buffet has used compounding knowledge to become the most successful investor of all time:</p>
<blockquote>
<p>While most of us focus on consuming information that we won’t care about next month, let alone next year, Buffett focused on knowledge and companies that change very, very slowly or not at all.</p>
</blockquote>
<p>Compounding knowledge builds on itself, like a snowball rolling downhill. Most importantly, compounding knowledge becomes more useful over time.</p>
<p>The opposite of compounding knowledge is ‘expiring knowledge’:</p>
<blockquote>
<p>…lacking details and nuance, it’s easily digestible … it’s commonly telling you what happened, not why it happened or under what conditions it might happen again … it won’t be relevant in a month or a year.</p>
</blockquote>
<p>I think the same concept can be applied to design.</p>
<h2 id="what-is-compounding-design%3F">What is compounding design?</h2>
<p>Compounding design, like compounding knowledge, stays relevant over a long period of time. It might be domain-specific, but it isn’t limited to a single application. Compounding design often is more about the process than the results.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/compounding-1.png" alt="Extreme programming planning/feedback loops, from Hugh Dubberly’s ‘How Do You Design?’" /><figcaption>Extreme programming planning/feedback loops, from Hugh Dubberly’s ‘How Do You Design?’</figcaption></figure>
<p><a href="https://matthewstrom.com/writing/principles" target="_blank" rel="noopener">Design principles</a> are compounding design. Design principles create positive feedback loops, improving design that comes after them. They benefit both the designer (providing constraints to speed up decision-making) and the audience (providing consistency).</p>
<p>Design systems are another example of compounding design. They help designers, engineers, and end users by creating a consistent foundation for rapid iteration and improvement. Well built and carefully maintained design systems can influence a product for years. <a href="https://material.io/" target="_blank" rel="noopener">Material Design</a>, love it or hate it, is a great instance of compounding design.</p>
<h2 id="what-is-expiring-design%3F">What is expiring design?</h2>
<p>Expiring design is immediately useful, but quickly loses value. It captures the state of a problem at a precise moment in time. Expiring design, unlike expiring knowledge, is very detailed. It is single-use.</p>
<p>You can recognize expiring design by its filename. ‘Layout2_revision3_final’ is an expiring design.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/compounding-2.png" alt="Redlines, by Jazzmenn M" /><figcaption>Redlines, by <a href="https://www.behance.net/gallery/53174717/UX-Redline-website-compenents" target="_blank" rel="noopener">Jazzmenn M</a></figcaption></figure>
<p>Redline mockups are an example of expiring design. Redlines are used to communicate specifications to a developer. They pack a lot of information into a single piece of design, but they are time and labor intensive. A redline mockup expires every time a change is made.</p>
<h2 id="the-expiring-%E2%86%94-compounding-spectrum">The expiring ↔ compounding spectrum</h2>
<p>Expiring and compounding design aren’t yin and yang. All design falls somewhere on the spectrum. Most design is in the middle.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/compounding-3.jpg" alt="All of design falls somewhere in this spectrum" /><figcaption>All of design falls somewhere in this spectrum</figcaption></figure>
<p>Just because a design is compounding instead of expiring doesn’t mean it’s fundamentally better or more useful. Sometimes it is best to design something you know will be quickly out-of-date.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/compounding-4.jpg" alt="The value of design changes over time depending on whether it is expiring or compounding" /><figcaption>The value of design changes over time depending on whether it is expiring or compounding</figcaption></figure>
<p>I’ll give you and example: redline mockups are expiring design, since they lose their value over time. A tool like <a href="https://zeplin.io/" target="_blank" rel="noopener">Zeplin</a>, on the other hand, enables compounding design. Zeplin empowers engineers to get the information they need without a designer creating redline mockups. Zeplin syncs design files automatically, and is always up-to-date.</p>
<p>If you only need to tell a developer the size of one button on one screen, and if the developer is working on the button right now, an redline mockup is the right choice.</p>
<p>If you are planning an upcoming project and know you’ll need a tight communication loop between designers and developers around visual specifications, Zeplin is a better fit.</p>
<h2 id="know-thyself">Know thyself</h2>
<p>The key takeaway: all design is somewhere on the expiring ↔ compounding spectrum. <a href="https://www.youtube.com/watch?v=nRSYU4YSISA" target="_blank" rel="noopener">There are advantages to both</a>. When making decisions, it’s only important to know what kind of design fits your needs. Avoid choosing an expiring design when a compounding one is a better fit, and vice versa.</p>
Optimize for learning
2019-02-16T00:00:00Z
https://matthewstrom.com/writing/optimize-for-learning/
<figure data-type="image"><img src="https://matthewstrom.com/images/learning-0.jpg" alt="" /></figure>
<p>Modern software development encourages us to build without learning.</p>
<p>Here’s an example: I’m a designer. My team expects me to know the right way to design things. But I don’t always know the right way to design things.</p>
<p>It’s hard for me to say “I don’t know the right way to design this” because it makes me vulnerable. It feels bad, like I’m saying “I don’t know how to do my job.” So I often say “I know the right way to design this” when I don’t know.</p>
<p>I make my best guess at the right design. The team builds what I design, but they don’t know that I’m just guessing. Maybe I was right, maybe I was wrong. We move fast, so there isn’t time to discuss the unknowns. There’s nothing to validate or invalidate. Nothing is recorded or reviewed. No new knowledge is gained.</p>
<p>We build without learning because we are optimizing for speed. What if we reversed this? What if we optimize for learning?</p>
<hr />
<p>Here’s how we can optimize for learning:</p>
<ol>
<li>If I don’t know the right way to design something, I say “I don’t know the right way to design this.”</li>
<li>My team supports me: we commit to learning the right way to design it.</li>
<li>We identify incremental experiments to reduce the unknowns.</li>
<li>We write and validate or invalidate hypotheses as we go.</li>
<li>We regularly record and share what we learn. We grow our knowledge base.</li>
<li>Repeat × ∞</li>
</ol>
<p>For instance, when a product manager asks “How do we increase conversions of free users into paying users?” I say “I don’t know. Let’s find out.” The team writes a hypothesis, then builds and delivers an update to the product.</p>
<p>Maybe the features are unclear, so we make the pricing page easier to read.</p>
<p>Maybe the upgrade form is too complicated, so we make more fields optional.</p>
<p>Maybe free users don’t see the value of upgrading, so we introduce a free trial.</p>
<p>At each stage, the team might succeed in increasing conversions. But even if we don’t, we’ve learned more about the users and the product. By reviewing what we learn, we write better hypotheses. Better hypotheses lead to more knowledge. Learning compounds.</p>
<hr />
<p>Optimizing for learning requires embracing unknowns. It forces exploration, and rewards risk-taking. When new knowledge is shared, each new iteration is safer, more confident, and even more educational.</p>
<p>Designers don’t have to know the right way to design everything. When we don’t know, we should openly commit to learning. Next time you don’t know the answer, try this:</p>
<p>“I don’t know. Let’s find out.”</p>
<hr />
<p>Special thanks to <a href="http://joshpetersel.com/" target="_blank" rel="noopener">Josh Petersel</a>, <a href="https://twitter.com/lauradhahn" target="_blank" rel="noopener">Laura Hahn</a>, and <a href="https://twitter.com/__J_A_M_E_S" target="_blank" rel="noopener">James Ayres</a> for their feedback on early versions of this essay.</p>
How to take your team's creative pulse
2019-02-10T00:00:00Z
https://matthewstrom.com/writing/pulse-check/
<figure data-type="image"><img src="https://matthewstrom.com/images/pulse-0.jpg" alt="" /></figure>
<p>“Could we explore other options?”</p>
<p>If you’ve been to a design review, you’ve probably heard this question. When I hear it, my heart breaks. It says that our team is out of alignment: the work I’m sharing isn’t meeting everyone’s expectations.</p>
<p>I’d like to share a workshop that I use to help teams overcome the pain of mismatched creative expectations. Using this format, I recently had 7 teammates share their thoughts on 25 different pieces of design. The results, both quantitative and qualitative, tell us a lot. We’re learning where we’re aligned, and where we need to find better common ground.</p>
<p>I hope that this format helps your team avoid the friction of creative imbalance, too.</p>
<nav class="table-of-contents"><ol><li><a href="https://matthewstrom.com/writing/pulse-check/#planning">Planning</a><ol><li><a href="https://matthewstrom.com/writing/pulse-check/#decide-who-should-attend">Decide who should attend</a><ol><li><a href="https://matthewstrom.com/writing/pulse-check/#a-note-about-remote-teams">A note about remote teams</a></li></ol></li><li><a href="https://matthewstrom.com/writing/pulse-check/#decide-what-you-need-to-align-on">Decide what you need to align on</a></li><li><a href="https://matthewstrom.com/writing/pulse-check/#gather-your-materials">Gather your materials</a><ol><li><a href="https://matthewstrom.com/writing/pulse-check/#how-to-use-the-scorecard-template">How to use the scorecard template</a></li></ol></li><li><a href="https://matthewstrom.com/writing/pulse-check/#set-roles">Set Roles</a></li></ol></li><li><a href="https://matthewstrom.com/writing/pulse-check/#the-workshop">The Workshop</a><ol><li><a href="https://matthewstrom.com/writing/pulse-check/#check-in-round%3A-5-minutes">Check-in round: 5 minutes</a></li><li><a href="https://matthewstrom.com/writing/pulse-check/#align%3A-10-minutes">Align: 10 minutes</a></li><li><a href="https://matthewstrom.com/writing/pulse-check/#react%3A-20-seconds-per-image">React: 20 seconds per image</a></li><li><a href="https://matthewstrom.com/writing/pulse-check/#discuss%3A-10-minutes">Discuss: 10 minutes</a></li><li><a href="https://matthewstrom.com/writing/pulse-check/#check-out-round%3A-5-minutes">Check-out round: 5 minutes</a></li></ol></li><li><a href="https://matthewstrom.com/writing/pulse-check/#the-results">The Results</a><ol><li><a href="https://matthewstrom.com/writing/pulse-check/#how-to-read-the-scores">How to read the scores</a></li><li><a href="https://matthewstrom.com/writing/pulse-check/#how-to-share-the-scores">How to share the scores</a></li></ol></li><li><a href="https://matthewstrom.com/writing/pulse-check/#conclusion">Conclusion</a></li></ol></nav><h2 id="planning">Planning</h2>
<h3 id="decide-who-should-attend">Decide who should attend</h3>
<p>Invite at least five teammates to the workshop. If you feel comfortable as a facilitator, invite as many as ten. Larger groups are less likely to be aligned, but the more participants there are, the more the group will learn.</p>
<p>Be inclusive of all roles and responsibilities. Invite collaborators and colleagues that you interact with every day, regardless of their contributions to the team’s creative output.</p>
<h4 id="a-note-about-remote-teams">A note about remote teams</h4>
<p>You don’t need your team to be in the same room to run this workshop. If some (or all!) of your team is remote, use real-time feedback tools like Slack, Google Docs, and Zoom/Hangouts/Bluejeans/etc.</p>
<h3 id="decide-what-you-need-to-align-on">Decide what you need to align on</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/pulse-1.png" alt="The Likert scale" /><figcaption>The Likert scale</figcaption></figure>
<p>During the workshop, you’ll poll the group using the Likert scale. The Likert scale is a rating from 1 to 5 in response to a statement. A rating of 1 means 'I strongly disagree with this statement," a rating of 5 means “I strongly agree with this statement,” and 2 to 4 correspond with the degrees between.</p>
<p>Pick one to three statements that address your team’s needs. Are you working on a marketing team? Choose statements about the company’s brand. A product team? Your statements might be about accessibility, complexity, or usability.</p>
<p>In Bitly’s most recent pulse check, we responded to the following statements:</p>
<ol style="list-style-type: lower-alpha">
<li>I like this image.</li>
<li>This image reflects Bitly's current brand.</li>
<li>This image is what Bitly should look like in the future.</li>
</ol>
<h3 id="gather-your-materials">Gather your materials</h3>
<p>A week before the workshop, ask everyone to send you a few images they like. Here’s what I include in my email to participants:</p>
<blockquote>
<p><strong>What I need from you:</strong> Please send me (don’t reply all!) what you’d like the group to see. Take a screenshot — it can be a picture of software, of a website, a doodle of your own, or just a picture of words you like. The more varied, the better.</p>
</blockquote>
<p>Make sure the participants don’t see each other’s images before the workshop.</p>
<p>It’s possible to get through 20 images in 30 minutes, so aim to have a representative sample from your group. Use your judgement as a facilitator to decide what images will result in the best reactions. Include pieces that you think will result in strong agreement or disagreement with the statements. A 1 or a 5 rating says much more than a 2, 3, or 4.</p>
<p>Assemble the images into a slide deck using Google Slides, Powerpoint, or Keynote. Use the first slide to remind the team of the statements you’ll be voting on. The rest of the presentation should be the images you collected, one per slide. Here’s a link to a Google Slides template you can use with your own presentation:</p>
<figure data-type="image"><a href="https://docs.google.com/presentation/d/1FJGyO15xiX53JEUCKOduT3vWkymU-mtxVqerGW3grCY/edit?usp=sharing" target="_blank" rel="noopener"><img src="https://matthewstrom.com/images/pulse-2.png" alt="Pulse Check Presentation Template" /></a><figcaption>Pulse Check Presentation Template</figcaption></figure>
<p>Next, create a score sheet to record the group’s responses. If the workshop is happening in person, you can print out cards, but if you’re working on a remote team, you’ll need to have a scoresheet that everyone can access digitally. My go-to is Google Sheets, since it enables participants to work in real-time on the same page.</p>
<figure data-type="image"><a href="https://docs.google.com/spreadsheets/d/1bxufFbEb5t_j-nAuZ5EJCzVFhM7_zJiI2EJOof2t2oM/edit?usp=sharing" target="_blank" rel="noopener"><img src="https://matthewstrom.com/images/pulse-3.png" alt="Pulse Check Scorecard Template" /></a><figcaption>Pulse Check Scorecard Template</figcaption></figure>
<h4 id="how-to-use-the-scorecard-template">How to use the scorecard template</h4>
<p>The rows of the <a href="https://docs.google.com/spreadsheets/d/1bxufFbEb5t_j-nAuZ5EJCzVFhM7_zJiI2EJOof2t2oM/edit?usp=sharing" target="_blank" rel="noopener">scorecard template</a> correspond to participants (P1, P2, P3), and the columns correspond to images (I1, I2, I3). Each column has three sections, one for each statement (a, b, and c).</p>
<table class="table--bordered table--responsive l--mar-top-m l--mar-btm-m">
<colgroup></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="3"></colgroup>
<thead>
<tr>
<th class="table--header-empty" rowspan="2"></th>
<th class="t--align-center table--group-start table--group-end" colspan="3" scope="colgroup">I1</th>
<th class="t--align-center table--group-start table--group-end" colspan="3" scope="colgroup">I2</th>
<th class="t--align-center table--group-start table--group-end" colspan="3" scope="colgroup">I3</th>
</tr>
<tr>
<th class="t--align-right t--numbers-tabular table--group-start" scope="col">a</th>
<th class="t--align-right t--numbers-tabular" scope="col">b</th>
<th class="t--align-right t--numbers-tabular table--group-end" scope="col">c</th>
<th class="t--align-right t--numbers-tabular table--group-start" scope="col">a</th>
<th class="t--align-right t--numbers-tabular" scope="col">b</th>
<th class="t--align-right t--numbers-tabular table--group-end" scope="col">c</th>
<th class="t--align-right t--numbers-tabular table--group-start" scope="col">a</th>
<th class="t--align-right t--numbers-tabular" scope="col">b</th>
<th class="t--align-right t--numbers-tabular table--group-end" scope="col">c</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">P1</th>
<td data-label="Image 1 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 1 · Statement b"> </td>
<td data-label="Image 1 · Statement c" class="t--align-center table--group-end"> </td>
<td data-label="Image 2 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 2 · Statement b"> </td>
<td data-label="Image 2 · Statement c" class="t--align-center table--group-end"> </td>
<td data-label="Image 3 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 3 · Statement b"> </td>
<td data-label="Image 3 · Statement c" class="t--align-center table--group-end"> </td>
</tr>
<tr>
<th scope="row">P2</th>
<td data-label="Image 1 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 1 · Statement b"> </td>
<td data-label="Image 1 · Statement c" class="t--align-center table--group-end"> </td>
<td data-label="Image 2 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 2 · Statement b"> </td>
<td data-label="Image 2 · Statement c" class="t--align-center table--group-end"> </td>
<td data-label="Image 3 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 3 · Statement b"> </td>
<td data-label="Image 3 · Statement c" class="t--align-center table--group-end"> </td>
</tr>
<tr>
<th scope="row">P3</th>
<td data-label="Image 1 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 1 · Statement b"> </td>
<td data-label="Image 1 · Statement c" class="t--align-center table--group-end"> </td>
<td data-label="Image 2 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 2 · Statement b"> </td>
<td data-label="Image 2 · Statement c" class="t--align-center table--group-end"> </td>
<td data-label="Image 3 · Statement a" class="t--align-center table--group-start"> </td>
<td data-label="Image 3 · Statement b"> </td>
<td data-label="Image 3 · Statement c" class="t--align-center table--group-end"> </td>
</tr>
</tbody>
</table>
<p>Each participant should select a row, and record their ratings (1, 2, 3, 4, or 5) in the cell corresponding to each statement. This can be a little confusing at first, but my team picked up on it quickly.</p>
<h3 id="set-roles">Set Roles</h3>
<p>There are two assigned roles for this workshop:</p>
<p><strong>The facilitator:</strong> A good facilitator should do three things:</p>
<ol>
<li><strong>Set expectations:</strong> The facilitator should share the ground rules and desired outcome of the workshop with the team well before it starts.</li>
<li><strong>Watch the clock:</strong> Just like in the NFL, clock management wins championships. It’s a big challenge, but well-timed workshops are a thing of beauty.</li>
<li><strong>Keep everyone safe:</strong> It takes a lot of candor and vulnerability for a group to work well together. The facilitator should pay close attention to group dynamics, and work hard to ensure everyone feels comfortable contributing.</li>
</ol>
<p><strong>The scribe:</strong> The scribe’s responsibility is to record any decisions that the team makes. This may seem like a trivial task, but good notes help maintain team alignment after the workshop is over.</p>
<p>To make sure the meeting is as inclusive as possible, set these roles beforehand. Be especially mindful of who fills the scribe role. Some tips from <a href="https://matthewstrom.com/writing/inclusive-meetings" target="_blank" rel="noopener">How to Have More Inclusive Meetings</a>:</p>
<blockquote>
<p>Ask for volunteers from the group before reaching out directly. Keep a mental note of who has taken notes at previous meetings, and distribute the role as much as possible. Don’t let note-taking become one person’s job.</p>
</blockquote>
<hr />
<h2 id="the-workshop">The Workshop</h2>
<table class="table--responsive">
<thead>
<tr>
<th>Activity</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Activity">Check-in</td>
<td data-label="Time">5 minutes</td>
</tr>
<tr>
<td data-label="Activity">Review the rules</td>
<td data-label="Time">5 minutes</td>
</tr>
<tr>
<td data-label="Activity">Vote</td>
<td data-label="Time">20 seconds per slide</td>
</tr>
<tr>
<td data-label="Activity">Discuss</td>
<td data-label="Time">10 minutes</td>
</tr>
<tr>
<td data-label="Activity">Check Out</td>
<td data-label="Time">5 minutes</td>
</tr>
</tbody>
</table>
<h3 id="check-in-round%3A-5-minutes">Check-in round: 5 minutes</h3>
<p>A check-in round is a turn-based exercise to improve the group’s focus and empathy. The facilitator starts by giving the group a personal status update. Then, the person to the left of the facilitator gives their personal status, and so on, until everyone’s checked in.</p>
<p>It’s tempting to just say “I’m good” and move on, but the check-in round is an opportunity to express a little bit of vulnerability in order to create psychological safety. Daniel Coyle, in The Culture Code, sums it up nicely:</p>
<p>Vulnerability doesn’t come after trust — it precedes it. Leaping into the unknown, when done alongside others, causes the solid ground of trust to materialize beneath our feet.</p>
<p>A good check-in round establishes a baseline of trust, and enables the kind of candor required to write great design principles.</p>
<h3 id="align%3A-10-minutes">Align: 10 minutes</h3>
<p>Now’s the time for the facilitator to give their overview of the desired outcome. The group reviews the rules, asking any process questions. The facilitator should also make sure everyone knows how to use the scorecards.</p>
<p>The goal of this phase is to make sure everybody is working towards the same outcome, and has a feeling of common understanding.</p>
<h3 id="react%3A-20-seconds-per-image">React: 20 seconds per image</h3>
<p>The facilitator then moves through each image, giving the group 20 seconds to silently vote on each image. It’s important to move as quickly as possible. This exercise is meant to be a gauge of the group’s initial reactions, so the faster they vote the better.</p>
<h3 id="discuss%3A-10-minutes">Discuss: 10 minutes</h3>
<p>After voting, the group will likely have a lot of thoughts. It’s important to give everyone time to de-pressurize and discuss what their impressions were overall. Some good discussion questions to kick off with:</p>
<ol>
<li>Was there anything that surprised you about your responses?</li>
<li>Were there any themes you saw throughout the images?</li>
<li>What was your favorite image?</li>
</ol>
<p>The facilitator should guide the discussion to make sure everyone has a chance to contribute.</p>
<h3 id="check-out-round%3A-5-minutes">Check-out round: 5 minutes</h3>
<p>To finish the workshop, each participant give a quick personal status, echoing the check-in round. If time is short, it’s tempting to skip the check-out round, but checking out is just as important as checking in. Instead of the team filtering out one by one, or the facilitator banging a proverbial gavel, the team gets to close the meeting out as a group.</p>
<hr />
<h2 id="the-results">The Results</h2>
<p>After a period of intense focus, the team will have recorded detailed reactions to 20 or so images. After hearing the group’s immediate impressions, it’s up to the facilitator to analyze and share the results.</p>
<h3 id="how-to-read-the-scores">How to read the scores</h3>
<p>You should analyze each statement’s ratings for each of the images individually. For each statement, calculate the <strong>Highest rating,</strong> <strong>Lowest Rating,</strong> <strong>Average rating,</strong> and <strong>Variance.</strong></p>
<p>Here’s a few results from Bitly’s most recent pulse check. The statements we rated were:</p>
<ol style="list-style-type: lower-alpha">
<li>I like this image.</li>
<li>This image reflects Bitly's current brand.</li>
<li>This image is what Bitly should look like in the future.</li>
</ol>
<table class="table--bordered table--responsive l--mar-top-m l--mar-btm-m">
<colgroup></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="3"></colgroup>
<thead>
<tr>
<th class="table--header-empty" rowspan="2"></th>
<th class="t--align-center table--group-start table--group-end" colspan="3" scope="colgroup">I1</th>
<th class="t--align-center table--group-start table--group-end" colspan="3" scope="colgroup">I2</th>
<th class="t--align-center table--group-start table--group-end" colspan="3" scope="colgroup">I3</th>
</tr>
<tr>
<th class="t--align-right t--numbers-tabular table--group-start" scope="col">a</th>
<th class="t--align-right t--numbers-tabular" scope="col">b</th>
<th class="t--align-right t--numbers-tabular table--group-end" scope="col">c</th>
<th class="t--align-right t--numbers-tabular table--group-start" scope="col">a</th>
<th class="t--align-right t--numbers-tabular" scope="col">b</th>
<th class="t--align-right t--numbers-tabular table--group-end" scope="col">c</th>
<th class="t--align-right t--numbers-tabular table--group-start" scope="col">a</th>
<th class="t--align-right t--numbers-tabular" scope="col">b</th>
<th class="t--align-right t--numbers-tabular table--group-end" scope="col">c</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">P1</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">2</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">2</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">3</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">2</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2</td>
</tr>
<tr>
<th scope="row">P2</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">3</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">2</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">4</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">3</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">1</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2</td>
</tr>
<tr>
<th scope="row">P3</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">2</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">1</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">3</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">4</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">1</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2</td>
</tr>
<tr>
<th scope="row">P4</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">1</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">1</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">4</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">4</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">2</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1</td>
</tr>
<tr>
<th scope="row">P5</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">1</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">3</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">3</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">3</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2</td>
</tr>
<tr>
<th scope="row">P6</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">5</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">2</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">4</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">3</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">1</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1</td>
</tr>
<tr>
<th scope="row">P7</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">1</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">3</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">3</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">2</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">3</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">2</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Highest Rating</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">5.0</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">2.0</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">4.0</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">4.0</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">4.0</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">4.0</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">3.0</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5.0</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2.0</td>
</tr>
<tr>
<th scope="row">Lowest Rating</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">1.0</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">1.0</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1.0</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">3.0</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">2.0</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2.0</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">1.0</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5.0</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1.0</td>
</tr>
<tr>
<th scope="row">Average Rating</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">3.3</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">1.4</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">2.0</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">3.9</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">3.0</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">3.1</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">1.7</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">5.0</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1.4</td>
</tr>
<tr>
<th scope="row">Variance</th>
<td data-label="Image 1 · Statement a" class="t--align-right t--numbers-tabular table--group-start">1.9</td>
<td data-label="Image 1 · Statement b" class="t--align-right t--numbers-tabular">0.3</td>
<td data-label="Image 1 · Statement c" class="t--align-right t--numbers-tabular table--group-end">1.3</td>
<td data-label="Image 2 · Statement a" class="t--align-right t--numbers-tabular table--group-start">0.1</td>
<td data-label="Image 2 · Statement b" class="t--align-right t--numbers-tabular">0.7</td>
<td data-label="Image 2 · Statement c" class="t--align-right t--numbers-tabular table--group-end">0.5</td>
<td data-label="Image 3 · Statement a" class="t--align-right t--numbers-tabular table--group-start">0.6</td>
<td data-label="Image 3 · Statement b" class="t--align-right t--numbers-tabular">0.0</td>
<td data-label="Image 3 · Statement c" class="t--align-right t--numbers-tabular table--group-end">0.3</td>
</tr>
</tfoot>
</table>
<p>The key to reading this result is to look for extremes. For instance, image one (I1) had the highest variance. Our team wasn’t aligned on statement a (“I like this”) or c (“This image is what Bitly should look like in the future”). This is a good image to follow up on: why did the team rate it so differently?</p>
<p>Image two (I2) had low variation, and generally high ratings across the board. This is a good image to return to frequently, a way of reminding the team of what we all agree on.</p>
<p>Image three (I3) had low variance, too, but bounced from high ratings to low ratings. This shows even higher alignment, at more extreme scores.</p>
<h3 id="how-to-share-the-scores">How to share the scores</h3>
<p>The facilitator should send out an email after the exercise with a summary of the data, as well as a brief analysis. Here’s an example of the data summary from Bitly’s most recent pulse check:</p>
<div style="background: rgba(0, 0, 0, 0.025); padding: 0.5em 1em; margin: 2em 0">
<p><strong>a. “I like this”</strong></p>
<ol>
<li>On average, images 16 and 19 scored highest at an even 4.</li>
<li>On average, image 13 scored the lowest. Tied for second are images 12 and 23.</li>
<li>We largely agreed on images 1, 11, and 15 — all of them ranked either 4 or 3.</li>
<li>We disagreed on images 7, 9, 14, 21, 23, and 24 — all of them ranged from 1 to 5.</li>
</ol>
</div>
<p>And here’s part of the analysis I wrote to accompany the data:</p>
<div style="background: rgba(0, 0, 0, 0.025); padding: 0.5em 1em; margin: 2em 0">
<p><strong>We can agree on important things.</strong> We ranked four images very similarly for “this aligns with bitly’s brand” and three for “this is what Bitly should be in the future.” This means that while we might have different personal tastes, we can align around the Bitly brand.</p>
</div>
<p>If you’re the facilitator, be mindful of bias: try to be as informative as possible without judging the team. Teams that aren’t very aligned need as much information as possible to guide them. Teams that are highly aligned need to pay more attention to the details to avoid complacency.</p>
<p>I also like to turn my analysis email into a google doc, so that it is easier to find at a later date.</p>
<hr />
<h2 id="conclusion">Conclusion</h2>
<p>I’ve run this workshop dozens of times in various iterations with different teams on different projects. It turns a difficult conversation about group dynamics into a simple exercise with a low barrier to entry. Since the workshop itself takes only about 30 minutes, it can easily be run on a regular, reoccurring basis.</p>
<p>These quick exercises are invaluable. They add up quickly, compounding and supporting overall culture. You can use them to bring together diverse, cross-functional, and broadly-defined teams.</p>
<p>I hope you find this workshop useful. If you use it, let me know! I’d love to hear how your team experiences creative alignment.</p>
All the books I read in 2018
2019-01-20T00:00:00Z
https://matthewstrom.com/writing/2018-books/
<p>I read 20-ish books in 2018. I think this is a personal record, and I owe it largely to a group of friends called the “Asynchronous Book Club,” or ABC for short. To wrap up the year, and to help my poor swiss-cheese memory, I’d like to share a quick comment on each in case you’re interested in picking up a new book.</p>
<nav class="table-of-contents"><ol><li><a href="https://matthewstrom.com/writing/2018-books/#dreaming-the-beatles%3A-the-love-story-of-one-band-and-the-whole-world">Dreaming the Beatles: The Love Story of One Band and the Whole World</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#i-am-a-strange-loop">I Am A Strange Loop</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#%E2%98%85-why-buddhism-is-true">★ Why Buddhism is True</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#the-foundation-trilogy">The Foundation Trilogy</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#enlightenment-now">Enlightenment Now</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#1491%3A-new-revelations-of-the-americas-before-columbus">1491: New Revelations of the Americas Before Columbus</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#the-culture-code">The Culture Code</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#bad-blood%3A-secrets-and-lies-in-a-silicon-valley-startup">Bad Blood: Secrets and Lies in a Silicon Valley Startup</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#on-grand-strategy">On Grand Strategy</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#s.p.q.r.%3A-a-history-of-ancient-rome">S.P.Q.R.: A History of Ancient Rome</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#why-we-sleep%3A-unlocking-the-power-of-sleep-and-dreams">Why We Sleep: Unlocking the Power of Sleep and Dreams</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#the-2020-commission-report-on-the-north-korean-nuclear-attacks-against-the-united-states%3A-a-speculative-novel">The 2020 Commission Report on the North Korean Nuclear Attacks Against the United States: A Speculative Novel</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#the-wizard-and-the-prophet%3A-two-remarkable-scientists-and-their-dueling-visions-to-shape-tomorrow%E2%80%99s-world">The Wizard and the Prophet: Two Remarkable Scientists and Their Dueling Visions to Shape Tomorrow’s World</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#thinking-in-bets%3A-making-smarter-decisions-when-you-don%E2%80%99t-have-all-the-facts">Thinking in Bets: Making Smarter Decisions When You Don’t Have All the Facts</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#%E2%98%85-how-to-cook-your-life%3A-from-the-zen-kitchen-to-enlightenment">★ How to Cook Your Life: From the Zen Kitchen to Enlightenment</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#ball-lightning">Ball Lightning</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#%E2%98%85-a-people%E2%80%99s-history-of-the-united-states">★ A People’s History of the United States</a></li><li><a href="https://matthewstrom.com/writing/2018-books/#predictably-irrational">Predictably Irrational</a></li></ol></nav><hr />
<h2 id="dreaming-the-beatles%3A-the-love-story-of-one-band-and-the-whole-world">Dreaming the Beatles: The Love Story of One Band and the Whole World</h2>
<p>Rob Sheffield • <a href="https://amzn.to/2VP6S5z" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>I’ve consumed a lot of Beatles-related media, and this book is the closest to a relatable version of the Story as I’ve found. It does an especially good job of proving the Beatles relevant to 2018.</p>
<p>Ancillary benefit: it’s just really good music writing. We’ve all read a lot of bad music writing in our lives, so you understand why this is a big deal.</p>
<hr />
<h2 id="i-am-a-strange-loop">I Am A Strange Loop</h2>
<p>Douglas R. Hofstadter • <a href="https://amzn.to/2SVw6NR" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>Classic Hofstadter: ideas in mathematics and philosophy applied to fundamental existential questions. Unfortunately, this book reads (ironically) like stream-of-consciousness riffing, and doesn’t ever really pay off some of the broad-reaching abstractions he dreams up.</p>
<p>My favorite parts were the sections on self-reference. This is where I got really excited about the idea of “I,” where I felt like Hofstadter had something unique going on. When we say “I’m hungry,” who is doing the talking? Who is the sentence about? Can those two people be the same person? Looking at these questions through the lens of Russel’s dismantling of Principia Mathematica was really cool.</p>
<p>By the end, I was putting my head down and reading through to get it over with. I’d definitely recommend keeping the book on your shelf, but don’t put too much into it.</p>
<hr />
<h2 id="%E2%98%85-why-buddhism-is-true">★ Why Buddhism is True</h2>
<p>Robert Wright • <a href="https://amzn.to/2SVw6NR" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>This was one of my favorite reads in a long time. In it, Wright connects some of the ideas and practices of modern/secular/Western Buddhism to the science of well-being. His writing is straightforward and crystal-clear. He connects his ideas to his own meditation practice, which in turn helped me continue my own practice.</p>
<p>The downside to Wright’s version of Buddhism is that it is narrow and personalized to the author’s experience as a Westerner. To me, part of the appeal of Buddhism is in its mystery, the fundamentally non-intuitive parts, the deftness with which it transcends Western logic and orderliness.</p>
<hr />
<h2 id="the-foundation-trilogy">The Foundation Trilogy</h2>
<p>Isaac Asimov • <a href="https://amzn.to/2DbLS1x" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>It won the Hugo Award for “Best All-Time Series” in 1966, so I figured I’d give it a read. Boy howdy, is it a good science fiction.</p>
<p>If you’ve read <em>Three Body Problem</em>, you’ll get a lot of the same themes: lots of logic twists and loops, lots of time and space covered. The characters that Asimov creates are super-neat, though; they have a lot of depth to them, even when he spins one up for a chapter or two.</p>
<p>You can sense the author’s interest in the series waxing and waning throughout, but even at it’s most “etc etc stuff happened etc etc” it’s a nice read. When it really clips, it’s un-put-down-able.</p>
<hr />
<h2 id="enlightenment-now">Enlightenment Now</h2>
<p>Steven Pinker • <a href="https://amzn.to/2CpflmO" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>I picked this up because of Bill Gates’ glowing review.</p>
<p>The first quarter of the book builds up a very thorough arsenal of data to demonstrate that despite common attitudes, the world has been getting better and better since the enlightenment. I have some major problems with the “today is the best day that has ever passed” arguments, but it’s nice to know that there are some good trends going on.</p>
<p>I found everything after page 100 a total bore. Pinker spends the last half of the book on humanism and other philosophical realms, making an impassioned — but pretty basic — case for optimism. I can only take so much glad-handing before I need a reality check from continental existentialist.</p>
<hr />
<h2 id="1491%3A-new-revelations-of-the-americas-before-columbus">1491: New Revelations of the Americas Before Columbus</h2>
<p>Charles Mann • <a href="https://amzn.to/2RNlmne" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>I really enjoyed this book. I gave it a shot after doing half of “Enlightenment Now” and half of “Skin in the Game;” both extremely self-aggrandizing and dripping with ego. 1491 is neither of those things. Mann does an admirable job of telling a wide array of stories about the pre-Columbus Americas. He puts his ideas into historic and contemporary context, and doesn’t condescend or ignore the lay reader. His theories about Indians (I still have a hard time with the fact that he insists on calling them Indians) are extremely novel (to me), but don’t seem extreme. Overall, solid historic non-fiction.</p>
<hr />
<h2 id="the-culture-code">The Culture Code</h2>
<p>Daniel Coyle • <a href="https://amzn.to/2W65dso" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>Sorry to disappoint, this is not in any way related to Dan Brown’s seminal 2003 masterwork <em>The Da Vinci Code</em>.</p>
<p>Instead, it’s a solid survey of how culture factors into a team’s performance.
Nothing really earth-shattering; just a straightforward, real-world discussion of why team culture matters. Coyle spends each section on a few of the usual suspects — Navy SEALS, jewel thieves, Tony Hsieh — and breaks down different aspects (performance, creativity, how many catchphrases they use) of each team.</p>
<p>While there’s a bit of survivorship bias going on here (somehow the Dutch East Indies Company never makes it into these books), there were some really nice actionable takeaways.</p>
<p>Highly recommended for management buddies.</p>
<hr />
<h2 id="bad-blood%3A-secrets-and-lies-in-a-silicon-valley-startup">Bad Blood: Secrets and Lies in a Silicon Valley Startup</h2>
<p>John Carreyrou • <a href="https://amzn.to/2VWLKub" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>This one’s a really good page-turner. It follows the course of Theranos from being a twinkle in Elizabeth Holmes’ eye all the way up to early 2018. It is <strong>amazing</strong> just how much deception and fraud was going on at the highest levels of this company, and how so many people were willing to turn a blind eye to it. Carreyrou’s writing is super straightforward, and while he is a player in the story, he comes across pretty impartial in the whole matter.</p>
<p>Bonus: you’ll get the Taylor Swift song stuck in your head every time you read.</p>
<hr />
<h2 id="on-grand-strategy">On Grand Strategy</h2>
<p>John Lewis Gaddis • <a href="https://amzn.to/2VXvg4Y" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>I honestly can’t remember why I picked this up: maybe an Amazon recommendation, maybe a reference somewhere in management book recommendations. I read it in the middle of my tenure at The Wall Street Journal, probably hoping to pick up some tips for navigating complex political workplaces.</p>
<p>Gaddis spins a series of essays on ‘grand’ strategy, specifically western white male strategy (with occasional references to Sun Tzu). His writing tends towards stream-of-consciousness, and tends to harp on the same few themes of realism and focus. This isn’t a strong recommendation, unless you really need more motivation to read Machiavelli.</p>
<hr />
<h2 id="s.p.q.r.%3A-a-history-of-ancient-rome">S.P.Q.R.: A History of Ancient Rome</h2>
<p>Mary Beard • <a href="https://amzn.to/2W543gS" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>What really got to me as I was finishing the book is that, over the course of 1000 years, Roman culture changed surprisingly little. Despite evolving from a representative(ish) republic to a full-blown autocratic empire, attitudes about slavery, religion, civil liberties, voting, etc. hardly changed at all. I’m sure there are things that did change, but I imagine a Roman in 200CE could probably hop in a time machine and get along just pretty well in 700BCE. I think of going back just 150 years — in 1868, the American Civil War had just ended and reconstruction was in full effect — and even as a white male of European descent, I don’t think I’d be able to fit in.</p>
<p>After 200CE, things get pretty wild in Rome and everything changes quickly. But there are lots of other examples from this time period and before of huge cultures staying stable over a millennium: Egypt, China, and Japan, to name a few off the top of my head. Crazy to think that at one point in time, you could say “oh man my great great great great gramma really liked this song too” or “my family has lived on this block for 500 years.”</p>
<hr />
<h2 id="why-we-sleep%3A-unlocking-the-power-of-sleep-and-dreams">Why We Sleep: Unlocking the Power of Sleep and Dreams</h2>
<p>Matthew Walker • <a href="https://amzn.to/2FEEwW6" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>In case you don’t wanna read it, I’ll summarize: if you’re not sleeping at least 8 hours every single night, you will die a painful death at a young age.</p>
<p>If you’re still interested, <em>Why We Sleep</em> is a solid pop science book by a respectable sleep scientist. It cites a lot of original research, as well as state-of-the-art science. Sleep, it turns out, is really good for you, and for some dumb reason we don’t get enough of it. Walker also delves into the science of dreams, which I found particularly fascinating.</p>
<p>While it offers only a few practical tips (only take melatonin for jet lag, avoid LEDs, 65ºF is the ideal bedroom temperature), I came away with an increased appreciation for the sleep I do manage to get.</p>
<p>One small bone to pick: Walker puts down insufficient sleep as the primary cause for many health issues. He uses age as the main dimension to which sleep correlates, but doesn’t really address how race, gender, or socioeconomic factors correlate to sleep. I’d put good money on the rich and privileged getting more sleep than the poor and oppressed. Privilege means access to better nutrition and healthcare, and in turn means longer and healthier life. While Walker claims that the studies were balanced, I imagine that sleep inequality would be extremely challenging to isolate. I’d love to hear more about this, but it gets glossed over.</p>
<hr />
<h2 id="the-2020-commission-report-on-the-north-korean-nuclear-attacks-against-the-united-states%3A-a-speculative-novel">The 2020 Commission Report on the North Korean Nuclear Attacks Against the United States: A Speculative Novel</h2>
<p>Jeffrey Lewis • <a href="https://amzn.to/2VXibZi" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>Hoo boy. I haven’t read much speculative fiction — the <em>Earthseed</em> Series is probably as close as I’ve come lately — but I picked this up on a strong recommendation from <em>Sourdough</em> author Robin Sloan.</p>
<p>The 2020 Report is formatted as a congressional report following … you guessed it … a nuclear strike against the US by North Korea. The actions that it describes are simultaneously absurd and realistic: for instance, the president’s tweets are a major macguffin. Something about the matter-of-factness of the writing, combined with the ludicrous characters involved, really shook me.</p>
<p>The book itself is a quick read. I blew through it in a week or so of intense reading; it’s quite a page-turner. Highly recommended if you enjoy staring deep into the existential dread of the Trump presidency.</p>
<hr />
<h2 id="the-wizard-and-the-prophet%3A-two-remarkable-scientists-and-their-dueling-visions-to-shape-tomorrow%E2%80%99s-world">The Wizard and the Prophet: Two Remarkable Scientists and Their Dueling Visions to Shape Tomorrow’s World</h2>
<p>Charles C. Mann • <a href="https://amzn.to/2CucEjY" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>This is a meaty, mealy book on the origins of the modern ecological and environmental movement. Mann dives deep on two scientists — Norman Borlaug and William Vogt — who kicked off two very different approaches to the growing population of humans and our impact on the planet. Borlaug, the titular Wizard, espouses technology as the path to a sustaining and supporting continued exponential growth. Vogt, as the Prophet, advocates for restraint and responsible consumption. Both men made a significant impact on humans’ relationship with the environment during their lifetime; Borlaug won the Nobel prize for his work engineering high-yield wheat, and Vogt more or less invented environmentalism.</p>
<p>I found Mann’s dichotomy false, though. One can believe technology can sustain growth while simultaneously advocating for restraint in consumption. The wizard vs. prophet debate is easily won: why not both?</p>
<p>Also, while Vogt had a significant influence over policies of conservation in the late 20th century, Borlaug literally saved hundreds of millions of lives. Hybrid wheat and rice made Mexico, India, Pakistan, and others significantly less reliant on imported food, creating stronger, more independent economies in those nations. <a href="https://cl.ly/2ec80cf5b74e" target="_blank" rel="noopener">This chart</a> says a lot — grain yield in India and Mexico hockey sticks in the 1960s, more than tripling by 2000. Mann egregiously overstates Vogt’s contributions as compared to Borlaug’s. Maybe I’m a biased Wizard here, but Vogt’s stance on population control also get underplayed, and they stray a bit too far into some of the nastier trends in 20th century nation-building.</p>
<p>Overall, solid historical non-fiction. I give it a B.</p>
<hr />
<h2 id="thinking-in-bets%3A-making-smarter-decisions-when-you-don%E2%80%99t-have-all-the-facts">Thinking in Bets: Making Smarter Decisions When You Don’t Have All the Facts</h2>
<p>Annie Duke • <a href="https://amzn.to/2SYv5EC" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>I bought this book in a stupor after finishing another. That’s the best and worst part about the Kindle: I end up buying a book when I’ve just finished another, purely out of despair and loss aversion.</p>
<p>I didn’t think this book would be good, even after reading the first few chapters. Annie Duke is an academic-turned-poker-champion; she’s won a few big tournaments, but now makes her living on the speaking circuit. I’m pretty skeptical of anyone who makes a living telling people what they think, so I was mostly reading it out of a desire to not waste 10 bucks.</p>
<p>I was pleasantly surprised by the core material of the book. It boils down to this: the quality of your decisions and the quality of the results of your choices are not perfectly correlated. You can make a great decision that turns out poorly, or a poor decision that turns out favorably. Learning the difference between poor decisions and poor outcomes is the key to improving your decision making skills.</p>
<p>This core is well-supported by lots of allusions to sports and betting, which I found entertaining enough to carry my attention. If you can get this one on sale, used, or from a library, it’s worth it. Otherwise, no real mind-blowing wisdom here.</p>
<hr />
<h2 id="%E2%98%85-how-to-cook-your-life%3A-from-the-zen-kitchen-to-enlightenment">★ How to Cook Your Life: From the Zen Kitchen to Enlightenment</h2>
<p>Dōgen Zenji and Kōshō Uchiyama • <a href="https://amzn.to/2DdTyAu" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>I’m going to do a poor job of representing what this book is really about. On its face, the book is about cooking. Specifically, the first half is an instruction manual written by Dōgen about how to be the cook in a buddhist monastery in the 13th century. The second half was written by Kōshō Uchiyama in the 20th century, reflecting on Dōgen’s instructions, and interpreting them as guidance for life in general.</p>
<p>As far as Zen goes, this book is a great introduction to some of the everyday teachings and cultural elements of practice. Buddhism is a religion, and so there’s a lot of theology interwoven throughout the text. I personally don’t know much about the theistic parts of Buddhism, and was able to follow along, so I figure most readers will be ok with those elements. There’s clearly a lot lost in translation between Japanese and English, but the translator does a good job of providing tons of footnotes to pull back the curtain and address the difficulty of keeping the text faithful.</p>
<p>As cheesy as it sounds, this book was enlightening. Sort of in a literal way — I feel a bit lighter after reading it. The practice of Big Mind, Parental Mind, Joyful Mind is a really straightforward platform for mindfulness, and the writing of Dōgen really sticks with me. Highly recommend.</p>
<hr />
<h2 id="ball-lightning">Ball Lightning</h2>
<p>Cixin Liu • <a href="https://amzn.to/2SYo3Q2" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p><em>Three-Body Problem</em> was one of my favorite reads of 2017. The scope of the trilogy, the twists and turns of logic and narrative, the unique perspective of the author; <em>Three-Body Problem</em> had everything I love in hard science fiction. I went into <em>Ball Lightning</em> expecting the same experience, or maybe something close to it. I was a little disappointed.</p>
<p>What I like most about hard sci-fi is that it doesn’t lean on suspension of disbelief as much as other genres of sci-fi and fantasy. <em>Ball Lightning</em> has a lot of hand-waving moments that skirt the constraints of reality, making it harder for to be invests in the characters or the world Cixin builds.</p>
<hr />
<h2 id="%E2%98%85-a-people%E2%80%99s-history-of-the-united-states">★ A People’s History of the United States</h2>
<p>Howard Zinn • <a href="https://amzn.to/2W53vaQ" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>This is an important book. I was raised in the US, learning US history; after reading <em>A People’s History,</em> I’m stunned at how much I missed. Zinn starts with the arrival of Europeans in North America, and (in the edition I read) ends with 9/11. Between those two moments are many, many stories of people who don’t get a voice in schoolbook history, including Native Americans, African slaves, laborers, and women.</p>
<p><em>A People’s History</em> is not a complete history. Zinn is very up front about that. It’s also a very involved read; it’s more like a textbook than your average historic non-fiction best-seller. But if you’re interested in American history at all, it’s worth the investment.</p>
<hr />
<h2 id="predictably-irrational">Predictably Irrational</h2>
<p>Dan Ariely • <a href="https://amzn.to/2W5wA5V" target="_blank" rel="noopener">Buy it on Amazon</a></p>
<p>I stayed away from economics in school, assuming it was a boring version of applied mathematics (I snobbishly saw physics as the more interesting version). In the past few years, I’ve changed my mind: economics is incredibly interesting. I regret not realizing this earlier.</p>
<p><em>Predictably Irrational</em> does a great job of making economics — specifically, behavioral economics — accessible to folks like me. Ariely has curated a series of essays on the surprising ways in which we often defy logic when making decisions in our everyday life. From dating, to buying coffee, to going on a diet, it turns out humans frequently behave in ways that are counter to the neat logic of supply and demand.</p>
<p>Reading this book, I found myself taking a lot of the conclusions for granted. Of course we aren’t reasonable about what we eat, or who we’re friends with, or what we throw away. My enjoyment of this book was based not in these observations, but in the way Ariely connects them in a surprisingly consistent framework.</p>
Inclusive design on the Tokyo subway
2019-01-13T00:00:00Z
https://matthewstrom.com/writing/inclusive-subway-design/
<p>For the past two weeks, I’ve been exploring Tokyo. Until the last few days of 2018, I had never been to Tokyo — or, for that matter, any city as large as Tokyo. And while I have many many great memories of the city, I’m particularly eager to share my impressions of the Tokyo subway<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/inclusive-subway-design/#fn1" id="fnref1">1</a></sup>.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-1.jpg" alt="Subway map by Jug Cerovic" /><figcaption>Subway map by Jug Cerovic</figcaption></figure>
<p>Tokyo’s subway system is incredibly extensive: multiple private and public companies operate hundreds of stops between more than 15 separate lines. The largest of these stops, Shinjuku Station, ties multiple subway lines to commuter rail and bus, all underneath a massive shopping district. Despite having fewer lines and less track than the NYC Subway, the Tokyo system serves 1 billion more passengers per year — a total of 2.7 billion passengers annually<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/inclusive-subway-design/#fn2" id="fnref2">2</a></sup>.</p>
<p>I’m no public transit pro. Despite riding the New York City subway daily for half a decade, I still get lost from time to time. But despite the stunning complexity of the Tokyo subway, I felt comfortable and confident riding throughout the city. With the exception of one service outage, I didn’t get lost. I spent hours on trains during my stay, plenty of time to consider and document the system. My takeaway: inclusive design underlies every aspect of the Tokyo subway system.</p>
<h2 id="but-first%2C-a-note-on-inclusive-design">But first, a note on inclusive design</h2>
<p><em>Inclusivity</em> is often used interchangeably with <em>accessibility</em> in discussions of design. There are many ways to split those hairs, but for this post I’ll define inclusive design as follows:</p>
<blockquote>
<p>Inclusive design is the practice of creating systems to be as fair as possible by removing any barrier that might prevent a person from getting the most benefit possible.</p>
</blockquote>
<p>The differences between <em>accessible</em> and <em>inclusive</em> design is in equity: accessible design gives all people <em>some</em> value, inclusive design gives all people <em>all</em> value.</p>
<p>Now, back to the subway,</p>
<h2 id="language">Language</h2>
<p>In the Tokyo subway, everything is in both Japanese and English, from signs to ticket machines to announcements. This is great for English- or Japanese-speakers, but the system is navigable even without an understanding of either language.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-2.jpg" alt="The display inside the train when arriving at Shibuya station" /><figcaption>The display inside the train when arriving at Shibuya station</figcaption></figure>
<p>This is because:</p>
<ul>
<li>Each line has a distinct color. The Ginza line, for instance, is orange. Even trains that share tracks don’t share colors like in New York (looking at you NQRW).</li>
<li>Each station has a unique letter and number combination. The Shibuya stop on the Ginza line is G01. Next is G02 (Omote-sando), G03 (Gaiemmae), and so on. Without knowing the station name or its location, any rider can find their stop and know how far it will be.</li>
</ul>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-3.jpg" alt="The sign inside the Shimbashi station" /><figcaption>The sign inside the Shimbashi station</figcaption></figure>
<ul>
<li>Before the train departs, a jingle plays. Each station has its own unique song; for a sampling of these jingles, watch <a href="https://www.youtube.com/watch?v=-GF_dku3Mgo" target="_blank" rel="noopener">this video</a>. Riders with visual impairments can find the right train or station, <em>even without speaking the language.</em></li>
<li>Platforms and trains carry the color of the line they are on. For instance, the JR platforms in Shinjuku station serve the Yamanote line (green), Chuo line (red), and Sobu line (yellow). This means riders of the Yamonote line can follow green signs to the green platform and take the green train.</li>
</ul>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-4.jpg" alt="The JR Yamanote train by Abezori2525 - Own work, CC BY-SA 4.0" /><figcaption>The JR Yamanote train by Abezori2525 - Own work, CC BY-SA 4.0</figcaption></figure>
<p>Letters, numbers, colors, and sounds all add up to a clear system of navigation for all riders, regardless of the language they speak.</p>
<h2 id="navigation">Navigation</h2>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-5.jpg" alt="Shinjuku station" /><figcaption>Shinjuku station</figcaption></figure>
<p>This is Shinjuku station, the world’s busiest transport hub. In 2007, 3.64 million people used the trains here every single day. I spent a few days coming and going from this station; believe it or not, it’s even more complicated in person.</p>
<p>Once again, Tokyo has made a chaotic hive of activity easy to navigate. There are signs <em>everywhere</em>. Signs tell you which platforms are where, signs point out exits and nearby landmarks, signs indicate bathrooms and ATMs. Many signs tell you exactly how far (in meters) a platform or exit is. There are signs on poles, signs on the ceiling, and signs on the floor. You are never out of view of a sign.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-6.jpg" alt="Signs inside of Shibuya station" /><figcaption>Signs inside of Shibuya station</figcaption></figure>
<p>This may not contribute to the aesthetic value of the environment, but holy smokes does it make navigation easier. Using Google maps, I could enter via the New South Exit, go to Platform 3, and catch my train without much mental overhead.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-7.jpg" alt="Signs on the JR platform at Shibuya" /><figcaption>Signs on the JR platform at Shibuya</figcaption></figure>
<p>Besides the abundant signage, each car on each train is numbered. Riders can use the car numbers to navigate complex stations, aided by illustrations onboard the train. On each platform are signs indicating where each car will stop. Lines form at these markers, making for an extremely orderly boarding process.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-8.jpg" alt="A diagram displayed inside the subway car on arrival" /><figcaption>A diagram displayed inside the subway car on arrival</figcaption></figure>
<h2 id="conclusion">Conclusion</h2>
<p>Given its scale and complexity, along with my own general anxiety, I worried about taking the subway. As a tourist, the language barrier alone could have made it impossible. But the unsung, unseen designers of the system have made it possible for anyone to travel through Tokyo with ease, regardless of mental, physical, or cultural differences. As I come back to work in 2019, I am inspired to make my own design more inclusive.</p>
<hr />
<h2 id="postscript%3A-more-inclusive-cities">Postscript: more inclusive cities</h2>
<p>The Tokyo subway system is impressively-designed for its complexity. But why is it so complex in the first place?</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/subway-9.jpg" alt="A comparison of the city grids of Tokyo (left) and New York City (right)" /><figcaption>A comparison of the city grids of Tokyo (left) and New York City (right)</figcaption></figure>
<p>Take a look at the street grid of Tokyo (left). The complex shape of the Tokyo subway mirrors the irregularity of the city itself. New York City (right) is more grid-like, allowing its subways to run in neater parallel and perpendicular lines.</p>
<p>It’s possible for tourists to navigate Tokyo’s underground, but above ground can a be different story. Addresses in Japan look like this:</p>
<p><strong>3 Chome-7 Nishishinjuku, Shinjuku-ku, Tōkyō-to</strong></p>
<p>This means that the building at this address (the Park Hyatt) is the 3rd building, in the 7th neighborhood, in the district of Nishishinjuku, in the ward of Shinjuku, in Tokyo. Without knowing the detailed geography of each ward, it’s impossible to navigate using addresses alone.</p>
<p>Compare to the address of the Park Hyatt in New York:</p>
<p><strong>153 W 57th St, New York</strong></p>
<p>This means that the building is one block west of 6th Avenue on 57th Street.</p>
<p>Streets in New York work much like the Tokyo subway stops: 58th Street is north of 57th, 7th Avenue is west of 6th Avenue, and if you know this you can navigate by coordinates without needing to know much else.</p>
<p>This is to say: inclusive design matters at every layer of a system. Whether it’s the literal layers of a city’s streets and subways, or the figurative layers of software’s code and design, inclusion isn’t a given. Creators have to make inclusion a deliberate priority in order for users to benefit.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>There are a few different ways to define the Tokyo subway system. For this post I’m including the Tokyo Metro, Toei Line, and the JR-operated Yamanote, Saikyō, and Shōnan-Shinjuku lines. <a href="https://matthewstrom.com/writing/inclusive-subway-design/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://en.wikipedia.org/wiki/List_of_metro_systems" target="_blank" rel="noopener">https://en.wikipedia.org/wiki/List_of_metro_systems</a> <a href="https://matthewstrom.com/writing/inclusive-subway-design/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
How to have more inclusive meetings
2018-12-27T00:00:00Z
https://matthewstrom.com/writing/inclusive-meetings/
<figure data-type="image"><img src="https://matthewstrom.com/images/meetings-0.png" alt="Illustration by Icon8" /><figcaption>Illustration by Icon8</figcaption></figure>
<p>Like most people, I have a complex relationship with meetings. At my agency job, the vast differences in time zones between the team made meetings impossible. At The Wall Street Journal, I spent at least 80% of my day in meetings. I’ve facilitated my share of week-long workshops and 5-minute standups.</p>
<p>While lots of aspects of meetings can’t be controlled — outcomes depend on participants — it is possible to control how inclusive a meeting is. Inclusive meetings aren’t guaranteed to be more productive, but they’ll create an environment where everyone can contribute in a safe way.</p>
<p>I’ve seen inclusive meetings have a positive impact on company culture in ever team I’ve been on. I’d like to share a few ways you can make your meetings more inclusive, too.</p>
<nav class="table-of-contents"><ol><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#for-facilitators-and-organizers">For facilitators and organizers</a><ol><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#share-a-time-boxed-agenda">Share a time-boxed agenda</a></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#check-in-and-check-out">Check in and check out</a></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#use-technology-to-include">Use technology to include</a></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#make-sure-there-are-notes">Make sure there are notes</a></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#ask-for-feedback">Ask for feedback</a></li></ol></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#for-participants">For participants</a><ol><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#buy-a-good-webcam">Buy a good webcam</a></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#volunteer-to-take-notes-for-the-group">Volunteer to take notes for the group</a></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#ask-questions">Ask questions</a></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#give-feedback">Give feedback</a></li></ol></li><li><a href="https://matthewstrom.com/writing/inclusive-meetings/#for-everyone">For everyone</a></li></ol></nav><h2 id="for-facilitators-and-organizers">For facilitators and organizers</h2>
<h3 id="share-a-time-boxed-agenda">Share a time-boxed agenda</h3>
<p>I have 6 non-scrum (ie, not standup, planning, grooming, and retro) meetings this week. One of them has a standing agenda, and the other five lack an agenda altogether. This makes me very itchy.</p>
<p>An agenda helps participants prepare for your meeting. While some people feel comfortable with spontaneity, others (like me!) struggle with not knowing whether we’ll be an active participant or just an observer. Even with an agenda, meetings can be a source of anxiety.</p>
<p>Time-boxing your agenda — that is, listing out how much time each item should take — also helps you prepare as the facilitator. With an un-timed agenda, it’s easy to think that each item should take roughly the same amount of time, but this is almost never the case. Write out the timing for your agenda, and you’ll be much better prepared to lead the group and get everything accomplished</p>
<h3 id="check-in-and-check-out">Check in and check out</h3>
<p>I’ve mentioned check-in and check-out rounds in previous posts, so I won’t belabor the point. If you’d like to read more about check-in and check-out rounds, here are a few great posts:</p>
<p><a href="https://medium.com/range/check-in-rounds-a7737012fed5" target="_blank" rel="noopener">Check-in rounds - How the start of a meeting can be the beginning of so much more</a></p>
<p><a href="https://blog.medium.com/check-in-rounds-a-cultural-ritual-at-medium-367fbcf15050" target="_blank" rel="noopener">Check-in Rounds: A Cultural Ritual at Medium</a></p>
<h3 id="use-technology-to-include">Use technology to include</h3>
<p>I’m in very few meetings that don’t need a Google Hangout, Zoom, or equivalent. While screens can be a drag on meetings (more on that later), we can also use them to our advantage.</p>
<p><strong>Google Slides + Automatic Captions</strong></p>
<p>This is one of the biggest game-changers for presentations. Google Slides now has an ‘Captions’ option that will automatically transcribe your voice into on-screen captions. It’s amazingly accurate, and pretty seamless; if anything, it encourages you to slow down a little bit.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/meetings-2.png" alt="Google Slides’ new Captions feature automatically transcribes the speaker’s voice." /><figcaption>Google Slides’ new Captions feature automatically transcribes the speaker’s voice.</figcaption></figure>
<p><strong>Realtime Board</strong></p>
<p>A collaborative multi-player canvas can do wonders to capture complex interactions in a meeting. I’ve used <a href="https://realtimeboard.com/" target="_blank" rel="noopener">Realtime Board</a> and similar tools to do dot voting, sticky notes, group theming, and design reviews.</p>
<p><strong>Cameras on</strong></p>
<p>Sometimes, in meetings with remote participants, participants will turn their cameras off or just dial in via phone. This makes it very hard to know when someone’s trying to speak, necessitating strong facilitation, or constant interruptions. When the meeting starts, ask everyone to turn their cameras on — seeing faces has a positive effect on the empathy felt for the speaker.</p>
<h3 id="make-sure-there-are-notes">Make sure there are notes</h3>
<p>Notes are a record of your meeting. They help everyone remember what was discussed, and how it was discussed. I personally have a Swiss cheese memory, and struggle to remember what I ate for lunch most days; notes help me immensely.</p>
<p>However, taking notes can exclude the note taker. It can be difficult to take useful notes and contribute to a conversation.</p>
<p>That’s why I see notes as a facilitator’s responsibility. If you’re organizing or facilitating a meeting, it’s up to you to make sure that notes are taken and shared with the group afterwards. Appoint a note-taker ahead of time, and follow up after the meeting to make sure the notes are useful to the group.</p>
<p><strong>Be very mindful of how you appoint a note taker.</strong> Ask for volunteers from the group before reaching out directly. Keep a mental note of who has taken notes at previous meetings, and distribute the role as much as possible. Don’t let note-taking become one person’s job.</p>
<p>A bonus effect is that appointing a note taker allows the rest of the participants to focus on being present and contributing, rather than idly recording the meeting itself.</p>
<h3 id="ask-for-feedback">Ask for feedback</h3>
<p>One of the biggest inequalities in meetings — between the organizer and the participants — is the hardest to bridge. I’ve found a lot of benefit in asking meeting participants to provide structured feedback for me to improve my facilitation.</p>
<p>Of course, use a feedback channel appropriate to the meeting. Daily 5-minute standups don’t need a detailed survey. An experiment I’ve been wanting to try is to use the little devices you see at airports — the red and green frowny and smiley faces — to get gut-check feedback at the end of a quick meeting.</p>
<p>On the other end of the scale, I recently facilitated an intense, day-long meeting for a group. Afterwards, I had a colleague on the People team send out an anonymous survey to collect 2½ points of structured feedback:</p>
<ol>
<li>Did you like the format of today’s meeting?
<ul>
<li>Why or why not?</li>
</ul>
</li>
<li>Do you feel like your voice was heard?</li>
</ol>
<p>At the end of the survey, there was a space for open-ended thoughts on how we can improve meetings in the future.</p>
<p>Asking for feedback not only helps you improve your own meetings, but encourages all the participants to reflect on how to hold more inclusive meetings as well.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/meetings-1.png" alt="Illustration by Icon8" /><figcaption>Illustration by Icon8</figcaption></figure>
<h2 id="for-participants">For participants</h2>
<h3 id="buy-a-good-webcam">Buy a good webcam</h3>
<p>A good webcam goes a long way to improving your ability to participate in remote meetings. My favorite is the <a href="https://www.amazon.com/Logitech-Widescreen-Calling-Recording-Desktop/dp/B006JH8T3S" target="_blank" rel="noopener">Logitech C920</a> — it has a wider angle, higher dynamic range, and a better microphone than most built-in webcams, meaning your colleagues will see and hear you much more clearly.</p>
<h3 id="volunteer-to-take-notes-for-the-group">Volunteer to take notes for the group</h3>
<p>Even if your facilitator hasn’t appointed a note-taker, a great way to enhance your meetings is to volunteer to take notes. As I mentioned above, it’ll help your colleagues focus more on the meeting at hand. It’ll also help you be more mindful of the meeting’s process; you can use what you observe and learn to improve your own facilitation. If you find your self the de facto note taker at all meetings, ask a colleague to step in for a turn.</p>
<h3 id="ask-questions">Ask questions</h3>
<p>Questions can help you split the difference between being an over-active participant and a passive observer. Good, directed questions will encourage participation in the group, and can make space for quieter voices. If I notice that Taylor hasn’t been talking much, it’s very easy to ask “Taylor, what do you think?” Even if Taylor agrees with the group and has nothing else to add, it’s important to include their voice (literally and figuratively).</p>
<h3 id="give-feedback">Give feedback</h3>
<p>Most people who run bad meetings don’t know they’re running bad meetings. Unfortunatlely, those who run bad meetings are also probably not going to ask for feedback. Therefore, if you want to provide suggestions for improvement, you’re in a bit of a bind.</p>
<p>If you’d like to encourage a colleague to make their meetings more inclusive, ask them if they have 5 minutes to talk. Then:</p>
<ol>
<li><strong>Give concrete examples</strong> of moments where you felt excluded, or noticed other participants being excluded.</li>
<li><strong>Tell them how being excluded felt.</strong> Offer suggestions of how to be more inclusive in the future.</li>
<li><strong>Turn the conversation over to them.</strong> Ask them if they have any ideas for more inclusive meetings.</li>
</ol>
<h2 id="for-everyone">For everyone</h2>
<p>Meetings are the common denominator at every company I’ve ever worked at or with. Everyone — from the tenured CEO to the newest hire — has meetings. Building a practice of inclusive meetings in your organization has a powerful, lasting, and positive impact on the health of your culture.</p>
Who are design systems for?
2018-12-14T00:00:00Z
https://matthewstrom.com/writing/who-are-design-systems-for/
<p>I’ve spent the past few days feeling an immense amount of FOMO. A major design conference called Clarity happened here in New York, and my twitter feed has been full of pictures and quotes from the very talented and articulate speakers. Lesson learned: go to more conferences. To help process some of my regret, I want to pick out a particular thread that I saw frequently amplified and repeated by the attendees of the conference: not the Why, What, or How of design systems, but the Who.</p>
<p>Who are design systems for?</p>
<h2 id="design-systems-are-for-designers">Design systems are for designers</h2>
<p><a href="https://twitter.com/lauradhahn" target="_blank" rel="noopener">Laura Hahn</a> recently said something that I think is an important — and unspoken — truth in product design. It went something like this:</p>
<blockquote>
<p>“The worst use of your time is in Sketch, especially if you start with File → New.”</p>
</blockquote>
<p>There’s a whole essay (or a book) in that one statement, which I’ll patiently wait for Laura to write. For now, I’ll only add that this is why design systems are for designers.</p>
<p>A common set of guidelines, principles, components, sketch files, abstract libraries, data sets, plugins, and integrations means less time in Sketch, Figma, XD, Studio, and Framer.</p>
<p>Less time in design tools can mean one of two things:</p>
<ol>
<li>Ship more, faster</li>
<li>Ship less, better</li>
</ol>
<p>Depending on the needs of your team, both outcomes can be valuable. Both are only possible with a design system.</p>
<h2 id="design-systems-are-for-developers">Design systems are for developers</h2>
<p>Straight from <a href="https://twitter.com/danmall" target="_blank" rel="noopener">Dan Mall</a>’s presentation at Clarity:</p>
<figure data-type="image"><img src="https://pbs.twimg.com/media/DuOuaMFWoAAHIcv.jpg" alt="‘Design systems are for developers.’ - photo by Nelly Hempel" /><figcaption>‘Design systems are for developers.’ - photo by <a href="https://twitter.com/Hejnelly_" target="_blank" rel="noopener">Nelly Hempel</a></figcaption></figure>
<p>By many measures, one of the most successful design systems is <a href="https://getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a>.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/who-are-design-systems-for/#fn1" id="fnref1">1</a></sup> It’s so ubiquitous that there is an entire canon of blog posts on why not to use it. It is first and foremost a coding framework — good design is just one feature, not the whole product. It has been successful (and so long-lived) because it <strong>makes developers’ jobs easier</strong>.</p>
<p>Design systems have three benefits for developers:</p>
<p><strong>Efficiency</strong>: Design systems enable developers to re-use the code that delivers the most common front-end components in their application.</p>
<p><strong>Quality</strong>: Design systems provide parity between the plan and the final product, making QA checks faster and more successful</p>
<p><strong>Simplicity</strong>: Design systems handle the complexity of delivering code by organizing and abstracting low-level problems. It’s much easier to work with syntactically simple code like <code>{Button}</code> than the underlying HTML, CSS, and JS.</p>
<h2 id="design-systems-are-for-users">Design systems are for users</h2>
<p>Another picture from <a href="https://twitter.com/adekunleoduye" target="_blank" rel="noopener">Adekunle Oduye</a>’s presentation at Clarity:</p>
<figure data-type="image"><img src="https://pbs.twimg.com/media/DuKOjHmX4AExTeq?format=jpg&name=small" alt="‘A design system doesn’t exist until it’s in code’ - photo by Nicolette Tran " /><figcaption>‘A design system doesn’t exist until it’s in code’ - photo by <a href="https://twitter.com/designicolette" target="_blank" rel="noopener">Nicolette Tran</a> </figcaption></figure>
<p><a href="https://twitter.com/nrrrdcore" target="_blank" rel="noopener">Julie Horvath</a> takes this one step further:</p>
<blockquote>
<p>“A design system doesn’t exist until it’s in production.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/who-are-design-systems-for/#fn2" id="fnref2">2</a></sup></p>
</blockquote>
<p>Ultimately, the users of our applications are the ones who decide whether our design system is a success or a failure. All of the design consistency and developer efficiency in the world doesn’t matter if the end product can’t keep you employed.</p>
<p>Unfortunately, this means that sometimes, design systems aren’t the solution. Theodore Levitt’s famous quote serves us well:</p>
<blockquote>
<p>“People don’t want to buy a quarter-inch drill, they want a quarter-inch hole.”</p>
</blockquote>
<p>Design systems are toolboxes, full of drills and saws and hammers and wrenches. When building your own, make sure you don’t forget that they’re just tools.</p>
<h2 id="design-systems-are-for-the-children">Design systems are for the children</h2>
<div>
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class="embed-container"><iframe src="https://www.youtube.com/embed/XuxXSw_4R_c" frameborder="0" allowfullscreen=""></iframe></div>
</div>
<p>ODB said it best.</p>
<h2 id="design-systems-are-for-everybody">Design systems are for everybody</h2>
<p>To end on a serious note: design systems often fail to include many of the people who would benefit from them. When working on design systems, thinking about design systems, or writing about design systems, try to expand your understand of who will benefit. Consider the end users first, and figure out the rest as you go.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Material design has taken top billing in recent years, but Bootstrap has probably been used by more engineers. <a href="https://matthewstrom.com/writing/who-are-design-systems-for/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://twitter.com/keymholio/status/1073051533644890113" target="_blank" rel="noopener">https://twitter.com/keymholio/status/1073051533644890113</a> <a href="https://matthewstrom.com/writing/who-are-design-systems-for/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The design system you already have
2018-11-21T00:00:00Z
https://matthewstrom.com/writing/the-design-system-you-already-have/
<p>With beautiful design systems like <a href="https://polaris.shopify.com/" target="_blank" rel="noopener">Polaris</a>, <a href="https://www.lightningdesignsystem.com/" target="_blank" rel="noopener">Lightning</a>, and <a href="https://www.carbondesignsystem.com/" target="_blank" rel="noopener">Carbon</a> for inspiration, it’s tempting to open up a Sketch file and start your own. A fresh start: all the freedom in the world. Finally, a great-looking date picker.</p>
<p>But wait! <strong>You already have a design system.</strong></p>
<p>If you look close enough at your production code, you’ll see the tell-tale signs. Your engineering friends can point out the components (what you might call molecules or atoms) and variables (design tokens). Ask the engineers how and why they wrote the code: you’ll hear many of the same concepts that designers use when creating a design system.</p>
<p>This underwhelming realization is what I like to call a Black Triangle moment, after <a href="http://rampantgames.com/blog/?p=7745" target="_blank" rel="noopener">Jay Barnson’s story of building games</a>:</p>
<div style="background: rgba(0, 0, 0, 0.075); padding: 1.25em; margin: 3em 0">
<p><span style="color: #333; float: left; font-size: 2.5em; line-height: 1; margin-right: 10px;">▲</span> In October of 1994, I’d just started as an honest-to-goodness videogame programmer at a small startup called SingleTrac which later went on to fame and glory (but unfortunately not much in the way of fortune) with such titles as <strong>Warhawk</strong>, the <strong>Twisted Metal</strong> series, and the <strong>Jet Moto</strong> series. But at the time, the company was less than 20 employees in size and had only been officially in business for about a month. It was sometime in my first week possibly my first or second day. In the main engineering room, there was a whoop and cry of success.</p>
<p>Our company financial controller and acting HR lady, Jen, came in to see what incredible things the engineers and artists had come up with. Everyone was staring at a television set hooked up to a development box for the Sony Playstation. There, on the screen, against a single-color background, was a black triangle.</p>
<p>“It’s a black triangle,” she said in an amused but sarcastic voice. One of the engine programmers tried to explain, but she shook her head and went back to her office. I could almost hear her thoughts… “We’ve got ten months to deliver two games to Sony, and they are cheering over a black triangle? <em>THAT</em> took them nearly a month to develop?”</p>
<p>What she later came to realize (and explain to others) was that the black triangle was a pioneer. It wasn’t just that we’d managed to get a triangle onto the screen. That could be done in about a day. It was the journey the triangle had taken to get up on the screen. It had passed through our new modeling tools, through two different intermediate converter programs, had been loaded up as a complete database, and been rendered through a fairly complex scene hierarchy, fully textured and lit (though there were no lights, so the triangle came out looking black). The black triangle demonstrated that the foundation was finally complete the core of a fairly complex system was completed, and we were now ready to put it to work doing cool stuff. By the end of the day, we had complete models on the screen, manipulating them with the controllers. Within a week, we had an environment to move the model through.</p>
<p>- <a href="http://rampantgames.com/blog/?p=7745" target="_blank" rel="noopener">Jay Barnson</a></p>
</div>
<p>Your design system probably doesn’t look as clean and user-friendly as <a href="https://atlassian.design/" target="_blank" rel="noopener">Atlassian’s Design System</a>, or as thoughtful and extensible as <a href="https://material.io/" target="_blank" rel="noopener">Material</a>. But if you’ve used Gmail lately, you know the truth: not even Google’s design system looks as good as Material.</p>
<p>Instead of drawing a whole new set of components, start with the components you already have in production. Document them meticulously. Create a single source of truth for design, warts and all. Work with engineering to automate the process of deploying components — even if you don’t change the design at all.</p>
<p>Build your own Black Triangle, then move on to the cool stuff.</p>
We'll fix it later
2018-11-21T00:00:00Z
https://matthewstrom.com/writing/fix-it-later/
<p>I recently read a fantastic essay by <a href="https://twitter.com/alexislloyd" target="_blank" rel="noopener">Alexis Lloyd</a> titled <a href="https://www.cogandsprocket.io/2018/12/02/design-process-for-the-messy-in-between/" target="_blank" rel="noopener">“Design process for the messy in-between.”</a> Towards the end of the essay, Alexis suggests that not everything has to be perfect the first time:</p>
<blockquote>
<p>Constraints mean that we almost always have to pick things that aren’t going to get as much love and attention as we would ideally like. Can a feature be removed for launch, or is there a scaled-down MVP of that feature that will suffice for now? Which user group has to have their needs deeply met for success? Can other groups’ needs come later? It’s hard not to want everything to be perfect, but knowing what truly has to be perfect can help in focusing limited resources on the right things.</p>
</blockquote>
<p>This approach — being mindful about the flexible standards of ‘ready to ship’ — is one I champion. But in many teams, it’s met with resignation. Product managers, stakeholders, designers, and engineers are skeptical. The most common response to “We’ll fix it later” is “We probably won’t.”</p>
<p>I have a hard time overcoming these doubts. Why do teams (especially long-tenured ones) bristle at the ship-then-improve approach? Why don’t stakeholders believe us when we say that this is the right way to build?</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/fix-0.jpg" alt="A bowl in the wabi-sabi style, celebrating imperfection" /><figcaption>A bowl in the wabi-sabi style, celebrating imperfection</figcaption></figure>
<h2 id="it%E2%80%99s-hard-to-love-imperfection">It’s hard to love imperfection</h2>
<p>I don’t think that the skeptics are wrong. There’s something really uncomfortable about admitting the shortcomings of your own work. As much as I want everyone (especially myself) to spend years in meditation on the impermanent nature of reality, spiritual enlightenment isn’t a requirement for building software.</p>
<p>Besides, skepticism often comes from experience. We’ve all felt the frustration and humiliation of hearing “I’ll get back to you,” but never getting another reply. Teams are asked to compromise daily; promises of “we’ll fix it later” sound really hollow.</p>
<p>I think we all need help getting comfortable with the uncertainty of building software.</p>
<h2 id="words-matter">Words matter</h2>
<p>I’ve always disliked the phrase ‘Minimum Viable Product.’ The word ‘minimum’ is easy to misinterpret as ‘the least effort’. ‘Viable’ is another low bar: viable things aren’t often desirable, and vice versa. I don’t think I’ve ever gotten a user excited by giving them something and calling it a Minimum Viable Product. I don’t think I’d be sad if I never heard ‘MVP’ again.</p>
<p>Why don’t we talk about efficiency? Let’s amplify ‘clever’ and ‘economical’ ideas. Be crafty, focused, and precise. Share the story of Bill Atkinson reporting to his manager that he wrote <a href="http://www.folklore.org/StoryView.py?project=Macintosh&story=Negative_2000_Lines_Of_Code.txt" target="_blank" rel="noopener">-2000 Lines of Code</a>. Welcome constraints, and celebrate the tiny patches as much as (if not more than) the marquee releases.</p>
<h2 id="don%E2%80%99t-just-make-it-safe-to-fail-%E2%80%94-make-it-easy-to-succeed%2C-too">Don’t just make it safe to fail — make it easy to succeed, too</h2>
<p>Practically, this adds up to a lot of communication. But this doesn’t have to be hard if you share your goals in the simplest way possilble.</p>
<p>Don’t communicate your goals with high-fidelity mock-ups of what you think your product will look like. These are time-consuming to update and give a false sense of progress. Instead, <strong>abstract your product down to the simplest representation possible.</strong> Try boxes and arrows.</p>
<p>Don’t communicate your goals with detailed long-term roadmaps. The far future is going to change constantly as you work. Instead, <strong>reduce the detail in your plans as they get farther ahead</strong>, only defining the very near future in full.</p>
<p>Don’t commit to features. Features are solutions to problems, but they’re seldom the only solution. Instead, <strong>commit to solving the underlying problem</strong>; if the ‘not-quite-perfect’ result (fewer new features, or none at all) solves the problem, you’ve still succeeded.</p>
<p>Don’t set goals that can’t be measured. When your goals require subjective judgement, you put a lot of responsibility and pressure on one or two key stakeholders to tell you if you’ve succeeded or not. Instead <strong>federate the measurement of success</strong> with frameworks like OKRs and jobs-to-be-done.</p>
<h2 id="conclusion">Conclusion</h2>
<p>It’s hard to welcome imperfection into the high-stakes design and development process. Product creators experience the pain of removing features, changing priorities, and reducing scope on a daily basis. By focusing on better goal-setting and communication, we can make it much easier to live with the ever-present uncertainty of building digital products.</p>
<p>How do you handle uncertainty? How does your team respond to shifting priorities and goals? As always, let me know via <a href="https://twitter.com/ilikescience" target="_blank" rel="noopener">Twitter</a>.</p>
Just-in-time design
2018-11-12T00:00:00Z
https://matthewstrom.com/writing/just-in-time-design/
<figure data-type="image"><img src="https://matthewstrom.com/images/jit-0.jpg" alt="photo by Tools for motivation" /><figcaption>photo by <a href="https://unsplash.com/photos/dcSLXvvaLXM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">Tools for motivation</a></figcaption></figure>
<p>There is a disconnect between product design and product engineering.</p>
<p>Three factors contribute to this disconnect:</p>
<ol>
<li><strong>Products get shipped faster every day</strong>. DevOps teams automate huge amounts of the delivery process, enabling engineering teams to ship code many times every day.</li>
<li><strong>Designers have access to more information than ever before</strong>. UX research, product analytics, and tight-knit product teams provide torrents of data. Designers are always learning, and their designs evolve to reflect their understanding.</li>
<li><strong>Implementing a design hasn’t changed much.</strong> The design implementation process hasn’t changed much since the days of slicing PSDs. Design systems are beginning to automate some of the work, but turning mockups into code is slow. Waterfall (or other forms of one-step-at-a-time development) is still the standard practice for this transition.</li>
</ol>
<p>In response to this disconnect, designers are often working at least one sprint ahead of engineers. While one sprint might not seem like much of a lag, a typical product team learns a lot after the design hand-off.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/jit-1.jpg" alt="The traditional process of delivering design" /><figcaption>The traditional process of delivering design</figcaption></figure>
<p>After seeing the final designs:</p>
<ul>
<li>The engineering team discusses the work every day in stand-ups.</li>
<li>The product team provides feedback and refines metrics and goals.</li>
<li>UX research shares insights into user’s real-world experience.</li>
</ul>
<p>To stay one sprint ahead, design can’t deliver on this knowledge until the next sprint. It all starts to be reminiscent of the <a href="https://www.youtube.com/watch?v=mhVbLJvYP8s" target="_blank" rel="noopener">“Pre-taped Call-in Show”</a> from Mr. Show.</p>
<p>Instead of working ahead, we should finish designing as close to the end of a sprint as possible: just-in-time design.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/jit-2.jpg" alt="Delivering design just in time" /><figcaption>Delivering design just in time</figcaption></figure>
<h2 id="just-in-time-manufacturing">Just-in-time manufacturing</h2>
<p>Just-in-time design takes its name from <a href="https://en.wikipedia.org/wiki/Just-in-time_manufacturing" target="_blank" rel="noopener">Just-in-time manufacturing</a> (abbreviated JIT). JIT is a way of moving materials through a production process in which each step starts as soon as the necessary components arrive. Parts continue down the line only when needed. Extra inventory is wasteful, and workers put an extreme focus on quality.</p>
<p>JIT originated in Japan to maximize the output of a small amount of factories and resources. Along with then-novel practices like <a href="https://en.wikipedia.org/wiki/Kanban" target="_blank" rel="noopener">kanban</a> and <a href="https://en.wikipedia.org/wiki/Kaizen" target="_blank" rel="noopener">kaizen</a>, JIT helped Japan rebuild their industrial manufacturing capacity after World War II. This method has gone on to influence American companies like Dell, Harley Davidson, and General Electric.</p>
<p>We can apply JIT to design by following some of the key principles outlined by Mehran Sepehri in <em><a href="https://www.amazon.com/Just-Time-Not-Japan-Implementation/dp/0935406786/ref=sr_1_2?s=books&ie=UTF8&qid=1542072278&sr=1-2&keywords=Just-in-time%2C+not+just+Japan" target="_blank" rel="noopener">Just in Time, Not Just in Japan</a>.</em></p>
<h3 id="housekeeping%3A-physical-organization-and-discipline">Housekeeping: physical organization and discipline</h3>
<p><strong>Invest in a design system</strong>. Organized and reusable design elements benefits just-in-time design in two ways:</p>
<ol>
<li>Breaking designs down into independent components makes it easier to ship in smaller increments.</li>
<li>A shared set of design tools enables engineers to ship faster and opens the way to automation.</li>
</ol>
<h3 id="lot-sizes-of-one%3A-the-ultimate-lot-size-and-flexibility">Lot sizes of one: the ultimate lot size and flexibility</h3>
<p><strong>Ship in the smallest increment possible.</strong> The “lot size” in manufacturing refers to the number of parts that get delivered as a group. For just-in-time design, delivering in smaller batches make it much easier to see the impact of each change.</p>
<p>Delivering in smaller increments also makes the feedback loops more forgiving. If one design doesn’t achieve the desired outcome, the next design is adjusted and improved.</p>
<p>Faster feedback cycles provide real-world insights on a regular basis. For instance, if a big redesign takes 6 months and only shipped when it’s 100% ready, the team is waiting 6 months to find out if their designs were effective. If the team breaks the work into 6 parts and delivers one part a month, they learn much sooner if their designs are effective and can adjust as they go.</p>
<h3 id="streamlining-movements%3A-smoothing-materials-handling">Streamlining movements: smoothing materials handling</h3>
<p><strong>Get embedded in the team.</strong> Designers should use sprint planning, grooming, standup, and retro as opportunities to provide design to — and recieve feedback from — the rest of the team. Designs can take the form of written or verbal descriptions, not just wireframes and high-fidelity mockups.</p>
<p><strong>Use a handoff tool.</strong> Tools like Zeplin, Abstract, or Invision Inspect make it much easier for designs to flow from designers to engineers — no matter what <a href="https://twitter.com/brad_frost/status/1049765406150483969" target="_blank" rel="noopener">Dan Mall says</a>.</p>
<h3 id="pull-system-%E2%80%94-signal-%5Bkanban%5D-replenishment%2Fresupply-systems.">Pull system — signal [kanban] replenishment/resupply systems.</h3>
<p><strong>Only design what’s needed.</strong> Use constant communication between engineering and product partners to understand what your collaborators will need next. Then, plan on delivering <em>only what is needed</em>, and nothing more. Use the agile process — grooming, planning, and retro — to find any shortfalls or excesses.</p>
<p><strong>Avoid creating a backlog of designs.</strong> Designs don’t age well. In the time between finishing design and shipping code, it’s likely that you’ll learn something new that changes your understanding. If you’re producing more design than can be implemented, focus more on the quality of each design.</p>
<h2 id="conclusion">Conclusion</h2>
<p>The disconnect between designers and engineers is a common source of frustration in any product-focused company.</p>
<p>Continuously delivering small iterations based on the team’s needs can transform the product development process. This approach shifts the focus away from highly-produced, out-of-date, difficult-to-maintain design, opening up the process to tighter collaboration and a higher standard of quality.</p>
<hr />
<p>Special thanks to <a href="https://www.linkedin.com/in/danalcalde" target="_blank" rel="noopener">Dan Alcalde</a> and <a href="https://mobile.twitter.com/adellecharles" target="_blank" rel="noopener">Adelle Charles</a> for contributing to this essay.</p>
Research, empathy, simplicity, speed
2018-10-17T00:00:00Z
https://matthewstrom.com/writing/research-simplicity-empathy-speed/
<figure data-type="image"><img src="https://matthewstrom.com/images/recipe-0.jpg" alt="photo by Toa Heftiba" /><figcaption>photo by <a href="https://unsplash.com/photos/oQvESMKUkzM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">Toa Heftiba</a></figcaption></figure>
<p>Earlier today, I read a thought-provoking tweet from <a href="https://maedastudio.com/" target="_blank" rel="noopener">John Maeda</a>:</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">"Salt Fat Acid Heat" as the perfect set of ingredients for a meal makes me wonder what a similar set of essential ingredients might be for digital products. <a href="https://t.co/z1w1PUyQsD">https://t.co/z1w1PUyQsD</a></p>— John Maeda (@johnmaeda) <a href="https://twitter.com/johnmaeda/status/1052630849898913800?ref_src=twsrc%5Etfw">October 17, 2018</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br />
<p>John refers to Samin Nosrat’s fantastic cookbook, <a href="https://www.saltfatacidheat.com/" target="_blank" rel="noopener"><em>Salt Fat Acid Heat</em></a>, and poses a fantastic question: as Nosrat provides a simple list of essential ingredients for any great meal, can we describe a simple list of essential components for digital products?</p>
<p>Here are four elements that I believe are the foundation of great digital products: <strong>Research, Empathy, Simplicity</strong> and <strong>Speed.</strong></p>
<h2 id="research">Research</h2>
<p>Research answers a vital question: “What do our users want?” Market research, qualitative user research, usability research, quantitative research and analysis; these are all flavors that can fuel a great product.</p>
<p><strong>Too much research</strong> results in analysis paralysis. Signals get lost in the noise, and the team works in fits and starts.</p>
<p><strong>Not enough research</strong> results in overconfidence based in subjective judgement. Without research, it is difficult to respond to change.</p>
<h2 id="empathy">Empathy</h2>
<p>Empathy is commitment to delivering what users want. It’s important to have empathy when building products; it helps you focus on what gives users value, not just on what gives your business value.</p>
<p><strong>Too much empathy</strong> results in overfitting. Users needs change quickly, and are extremely varied at a microscopic level.</p>
<p><strong>Not enough empathy</strong> means high churn. If your product doesn’t help your users, they’ll find one that does.</p>
<h2 id="simplicity">Simplicity</h2>
<p>Simplicity means focusing on doing less, but better. Simpler processes increase the efficiency of the team, and simpler interfaces are more accessible to users.</p>
<p><strong>Too much simplicity</strong> will undervalue your product. It’s hard to get users excited when their first impression is, “that’s all?”</p>
<p><strong>Not enough simplicity</strong> will make your product hard to use. Even extremely sophisticated products can benefit from a simple interface — spreadsheets are my favorite example of this phenomenon.</p>
<h2 id="speed">Speed</h2>
<p>Speed means delivering your product at the right time. Shipping regular, incremental, valuable updates will keep users engaged. Timely feedback can add immense value to any product.</p>
<p><strong>Too much speed</strong> can exhaust your users and your team alike. Snapchat’s <a href="https://www.theverge.com/2018/1/5/16854242/snap-evan-spiegel-redesign-cheetah-corporate-structure" target="_blank" rel="noopener">“Cheetah” initiative</a> was an impressive feat of reinvention, but is now seen as a critical mistake.</p>
<p><strong>Not enough speed</strong> makes it hard to take risks and explore new ideas. If you’re make large, infrequent changes, bugs stay around for longer, and user feedback stays on the backlog.</p>
<h2 id="a-perfect-blend">A perfect blend</h2>
<p>Salt, fat, acid, and heat are four fundamental elements of great food. Even if you aren’t a Michelin-star chef, or an award-winning cookbook author, you can cook great food if you balance those elements.</p>
<p>Research, empathy, simplicity, and speed are four fundamental elements of great digital products. You may not be Google or Facebook, but you can still deliver great products if you find the right balance between those elements.</p>
Designing with code
2018-08-31T00:00:00Z
https://matthewstrom.com/writing/designing-with-code/
<figure data-type="image"><img src="https://matthewstrom.com/images/code-0.jpg" alt="" /></figure>
<p>We’re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there’s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience.</p>
<p>One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with design-developer handoff documents; Framer’s new Framer X can render interactive React components directly into its workspace. These examples are just a hint of what’s to come.</p>
<p>For designers like me who enjoy coding, this revolution was inevitable. My own work is shaped by my knowledge of CSS, HTML, and Javascript. But for me — and many other designers — design usually comes before code. Rarely (if ever) does it happen the other way around.</p>
<p>Recently I’ve had a few opportunities to use code to create design. In two of my bigger projects at The Wall Street Journal, writing code has led to new ideas. Problems that typically plague early designs — e.g. “how does this look with real content?” — are easy to solve. By exploring visual ideas directly in code, I’ve started to see the amazing potential of code as a design tool.</p>
<h1 id="case-1%3A-wsj.-magazine">Case 1: WSJ. Magazine</h1>
<p>I started at The Wall Street Journal in August of 2017. One of the first projects I began was the re-design of the WSJ. Magazine homepage.</p>
<p>WSJ. Magazine is a premium fashion, art, and lifestyle magazine. The content is first-rate: regular features on film and tv celebrities, the biggest names in fashion and art, and trend-setting food and culture. Until this re-design, the magazine had no presence of its own online.</p>
<h2 id="designing%2C-the-old-way">Designing, the old way</h2>
<p>As my initial ideas took shape in Sketch, I was using a mouse pointer to draw rectangles full of text and images. Pixel perfection was easy and rewarding, and I had the luxury of millions of tiny adjustments. I fussed over whether 10 pixels is too much space for a gutter, or if 14-point type is too small for a byline. I did designer stuff.</p>
<p>I filled the whole page with these small, rectangular pieces. Everything was aligned to a grid. I was subconsciously selecting photography and headlines that suited my very space-conscious tendencies, and ignoring the content that upset the balance.</p>
<p>This way of designing should be familiar to anyone who’s used Sketch, Adobe Illustrator, Photoshop, or even newer products like Inivision Studio or Framer. It’s the status quo of product design.</p>
<h2 id="breaking-the-grid">Breaking the grid</h2>
<p>One weekend, I decided it’d be fun to prototype my design ideas in code (and it was!). The symbol system I’d set up in Sketch was starting to slow under the weight of all the content, and I figured a browser might perform better. Also, I’d been wanting to try out the new css grid specifications, and hone my growing experience with flexbox.</p>
<p>After a few hours, things were <em>almost</em> perfect. I put my computer down, intending to come back later to put the finishing touches on the prototype.</p>
<p>The next time I opened the project, I was struck by how much better the page looked in its unfinished state. I was seeing it through a traditional design lens: because it didn’t match the Sketch file, it was incomplete.</p>
<p>The areas for the stories didn’t adhere to a strict grid. There was asymmetrical and unusual space around the elements, and a ragged edge was drawing my focus. But the more time I spent with the code, the more ways I found to experiment. Eventually, rather than fiddling with the exact pixels, I was taking screen shots from my browser and pasting them back into Sketch.</p>
<h2 id="happy-accidents">Happy accidents</h2>
<p>In my inexperience, I neglected to write media queries to indicate how the page should adapt to small screens. As a result, stories overflowed the edge of the browser, requiring a user to swipe across the page to see more content.</p>
<p>Bob Ross was right: we don’t make mistakes, we have happy accidents.</p>
<p>This “accident” felt exciting and new. In Sketch, I work with static screens full of an infinite canvas, so overflow just doesn’t happen — everything is always on the virtual table. However, swiping left and right is a comfortable navigation pattern on small touchscreen devices (thanks Tinder), especially if content is obviously falling out of frame. Without seeing this happen in a browser on my phone, I might never have thought to try it.</p>
<h1 id="case-2%3A-a-new-homepage-for-wsj.com">Case 2: A new homepage for WSJ.com</h1>
<p>The homepage of WSJ.com is one of the most important parts of the Wall Street Journal’s web product. It’s hard to overstate this: in an average month, the WSJ.com homepage is seen tens of millions of times by millions of people. Over the summer of 2018, I began to completely re-build the design language of the WSJ.com homepage. Naturally, I felt overwhelmed. Where should I start?</p>
<p>In taking stock of the work to be done, I realized that one component — the story card that links to each article — accounts for 80% of the page. With that in mind, I set out to create a simple, flexible system that could unify the 100+ stories on the homepage.</p>
<h2 id="background%3A-story-cards">Background: Story cards</h2>
<p>The current WSJ.com homepage was built in 2014. During that project, the engineering team decided to take a risk on a new piece of technology from Facebook called React. Building with React meant having extremely configurable components; stories could be displayed in a huge variety of ways, depending on a host of variables.</p>
<p>As new card configurations were designed and developed, they were named and categorized; “LS-LEAD” was followed by “LS-LEAD-NO-IMAGE” and “LS-LEAD-ALT,” and layouts like “SPOTLIGHT-SEVEN” were built with these components.</p>
<p>As more layers were built up on top of the story cards, the low-level concepts — headline size, media position, timestamps and related stories — were abstracted away in favor of coarser, bigger-picture changes. Editors could make major changes to the layout of the page by updating 1 value instead of 100.</p>
<h2 id="taking-it-down-to-the-studs">Taking it down to the studs</h2>
<p>Right away, I again found Sketch to be lacking. In preparing for user testing, I spent more time copying and pasting content than actually designing. Ideally, I wanted to provide a list of stories to my designs, and have the page rendered with the content of those stories, with as little tweaking as possible.</p>
<p>So again, one weekend, I rolled up my sleeves and built (from scratch!) a terribly inefficient application that would render a version of the WSJ homepage in HTML and CSS.</p>
<p>In the process, I exposed the low-level configurations of individual story cards. Tweaking them was <strong>fun.</strong> It was <strong>unpredictable.</strong> It was everything that pixel perfection in Sketch was not.</p>
<p>I could send a story into a component with some options like this:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"headline"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"size"</span><span class="token operator">:</span> <span class="token string">"l"</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token property">"byline"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> <span class="token property">"media"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> <span class="token property">"bullets"</span><span class="token operator">:</span> <span class="token boolean">false</span><br /><span class="token punctuation">}</span></code></pre>
<p>But if I changed those parameters slightly, I could render a completely different variation in less than 60 seconds.</p>
<h2 id="design-by-multiplication">Design by multiplication</h2>
<p>In my simple prototype, there are <strong>26 configurable features</strong> for each article card. That means, for just one story, there are <strong>well over 1,000,000 possible cards</strong> (truly, closer to 60 million)! Managing this system in Sketch would be an unmaintainable nightmare.</p>
<p>But in code, this component is roughly 300 lines between CSS and HTML. A tiny bit of NodeJS fills in the cards with live data from the WSJ.com home page. I can make small changes to parts of the component and see how the system reacts in a matter of seconds. This multiplicative process means that small changes have a huge output, making my designs much more comprehensive in the process.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/designing-with-code/#fn1" id="fnref1">1</a></sup></p>
<h1 id="conclusion">Conclusion</h1>
<p>As new design software begins to emerge, code will be a central part of the tools available to designers. But don’t wait for a Framer X invite — or whatever new beta program comes next. You can get started using code as a design tool now. Here’s some recommendations for ways to start exploring:</p>
<ul>
<li>Wes Bos has some <a href="https://wesbos.com/courses/" target="_blank" rel="noopener">fantastic courses</a> on CSS and Javascript, including an intro to React and Node. His classes revolve around fun projects, and his style of teaching is highly entertaining.</li>
<li>Daniel Schiffman has a <a href="https://shiffman.net/videos/" target="_blank" rel="noopener">ton of great videos</a> on creative coding. The way he demonstrates his process — thinking through problems and working out solutions — and revels in what he makes is earnest and delightful.</li>
<li><a href="https://www.codecademy.com/learn/paths/web-development" target="_blank" rel="noopener">Codecademy</a> has very thorough courses and interactive lessons. I’ve occasionally gone back and done their intro series on Javascript just to brush up.</li>
</ul>
<p>There’s also a vibrant community of engineers and designers on twitter who have inspired me to use code as a design tool. If you find yourself coding to design, feel free to say hi; I’m <a href="https://twitter.com/ilikescience" target="_blank" rel="noopener">@ilikescience</a>.</p>
<hr />
<p>Update 12/22/19: Some images have been removed at the request of Dow Jones.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>I want to dig into this process more in a future essay, but for now I’d suggest reading Jon Gold’s excellent <a href="https://jon.gold/2016/06/declarative-design-tools/" target="_blank" rel="noopener">Declarative Design Tools</a> <a href="https://matthewstrom.com/writing/designing-with-code/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
The 1-hour design principles workshop
2018-08-19T00:00:00Z
https://matthewstrom.com/writing/design-principles-workshop/
<p>Design principles are a valuable tool for any team that works together towards a shared outcome. Written well, design principles can create alignment, speed up decision-making, and increase the quality of the team’s output.</p>
<p>Lately, I’ve worked with two of my teams to write design principles. Turns out writing down design principles is easy<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-principles-workshop/#fn1" id="fnref1">1</a></sup>; <em>agreeing on principles as a team</em> is much harder. In earlier writing, I missed an important quality of good design principles:</p>
<blockquote>
<p><strong>Good design principles are written as a team.</strong></p>
</blockquote>
<p>I learned this lesson the hard way. If you bring fully-formed principles to your team to adopt, you’re missing an important opportunity to align with your teammates.</p>
<p>Based on this experience, I’ve designed a workshop to enable teams to collaboratively write design principles.</p>
<nav class="table-of-contents"><ol><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#planning">Planning</a><ol><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#1.-decide-who-should-attend">1. Decide who should attend</a><ol><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#a-note-about-remote-teams">A note about remote teams</a></li></ol></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#2.-gather-your-materials">2. Gather your materials</a></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#3.-set-roles">3. Set roles</a></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#4.-get-prepared">4. Get prepared</a></li></ol></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#the-workshop">The Workshop</a><ol><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#check-in-round%3A-5-minutes">Check-in round: 5 minutes</a></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#align%3A-10-minutes">Align: 10 minutes</a></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#diverge-%26-write%3A-15-minutes">Diverge & Write: 15 minutes</a></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#converge-%26-theme%3A-15-minutes">Converge & Theme: 15 minutes</a></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#vote%3A-10-minutes">Vote: 10 minutes</a></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#check-out-round%3A-5-minutes">Check-out round: 5 minutes</a></li></ol></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#the-results">The Results</a></li><li><a href="https://matthewstrom.com/writing/design-principles-workshop/#conclusion">Conclusion</a></li></ol></nav><h2 id="planning">Planning</h2>
<h3 id="1.-decide-who-should-attend">1. Decide who should attend</h3>
<p>Here’s a great parable that was told to me by Marina, program manager and scrum master extraordinaire:</p>
<blockquote>
<p>Pig and a Chicken are walking down the road.
Chicken says: “Hey Pig, I was thinking we should open a restaurant!” Pig replies: “Hm, maybe, what would we call it?”
Chicken responds: “How about ‘bacon-n-eggs’?”
Pig thinks for a moment and says: "No thanks. I’d be committed, but you’d only be involved.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-principles-workshop/#fn2" id="fnref2">2</a></sup></p>
</blockquote>
<p>We use the chicken and pig parable to describe two kinds of team members: ones who contribute as consultants and experts, and ones who are accountable for outcomes. Chickens are trusted collaborators, but pigs are the ones with skin in the game.</p>
<p>Writing design principles is a job for the pigs. Include those who are directly affected by the outcomes of your work, and alignment and shared values will be much easier to attain.</p>
<h4 id="a-note-about-remote-teams">A note about remote teams</h4>
<p>You don’t need your team to be in the same room to run this workshop. If some (or all!) of your team is remote, use real-time feedback tools like Slack, Google Docs, and Zoom/Hangouts/Bluejeans/etc. in the place of writing, sharing, and voting on principles.</p>
<h3 id="2.-gather-your-materials">2. Gather your materials</h3>
<p>You’ll need your standard design thinking toolkit for this workshop:</p>
<ul>
<li><strong>Tons of post-its:</strong> As a team of 8, we used more than 100 post-its. Seriously, bring a lot.</li>
<li><strong>Dot stickers:</strong> Multiply the number of attendees by the number of principles you want to write, and bring that many + 10. For instance: a group of 8 writing 5 principles would need ( 8 x 5 ) + 10 = 50 dots.</li>
<li><strong>Large-tipped markers:<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-principles-workshop/#fn3" id="fnref3">3</a></sup></strong> Bring one for each attendee.</li>
</ul>
<h3 id="3.-set-roles">3. Set roles</h3>
<p>There are two assigned roles for this workshop:</p>
<ul>
<li><strong>The facilitator:</strong> A good facilitator should do three things:
<ol>
<li><strong>Set expectations:</strong> The facilitator should share the ground rules and desired outcome of the workshop with the team well before it starts.</li>
<li><strong>Watch the clock:</strong> Just like in the NFL, clock management wins championships. It’s a big challenge, but well-timed workshops are a thing of beauty.</li>
<li><strong>Keep everyone safe:</strong> It takes a lot of candor and vulnerability to share a design principle with the group. The facilitator should pay close attention to group dynamics, and work hard to ensure everyone feels comfortable contributing.</li>
</ol>
</li>
<li><strong>The scribe:</strong> The scribe’s responsibility is to record the decisions that the team makes. This may seem like a trivial task, but good notes help maintain team alignment after the workshop is over.</li>
</ul>
<h3 id="4.-get-prepared">4. Get prepared</h3>
<p>Before the workshop, the facilitator should prepare an overview of the task at hand. Be prepared to answer questions like, “What is a design principle,” “Who uses design principles,” and “What makes a good design principle.”</p>
<p>I have my own set of guidelines, but I encourage you to find the right guidelines for your team: some do better with little guidance, some thrive with constraints. Here’s the template of the presentation I’ve given during the “align” phase of the workshop:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/workshop-0.png" alt="My design principles workshop slides" /><figcaption><a href="https://docs.google.com/presentation/d/1bYjUdM_-k0Brthj85Tk3N-iureZVoXgXsCodIH1B6R0/edit?usp=sharing" target="_blank" rel="noopener">My design principles workshop slides</a></figcaption></figure>
<p>Feel free to copy it and make it your own!</p>
<p>If you have a co-located team, make sure to book a quiet conference room with lots of space. Spend 10 minutes setting up the room: get water and coffee, and if you’re feeling ambitious, bring some snacks.</p>
<hr />
<h2 id="the-workshop">The Workshop</h2>
<table class="table--responsive">
<thead>
<tr>
<th>Activity</th>
<th>Time (in minutes)</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Activity">Check-in</td>
<td data-label="Time (in minutes)">5</td>
</tr>
<tr>
<td data-label="Activity">Align</td>
<td data-label="Time (in minutes)">10</td>
</tr>
<tr>
<td data-label="Activity">Diverge & Write</td>
<td data-label="Time (in minutes)">15</td>
</tr>
<tr>
<td data-label="Activity">Converge & Theme</td>
<td data-label="Time (in minutes)">15</td>
</tr>
<tr>
<td data-label="Activity">Vote</td>
<td data-label="Time (in minutes)">10</td>
</tr>
<tr>
<td data-label="Activity">Check Out</td>
<td data-label="Time (in minutes)">5</td>
</tr>
</tbody>
</table>
<p>When the team arrives, quickly review the agenda and nicely ask insist that everyone put their phones and/or laptops out of sight.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-principles-workshop/#fn4" id="fnref4">4</a></sup> Then, kick of the check-in round.</p>
<h3 id="check-in-round%3A-5-minutes">Check-in round: 5 minutes</h3>
<p>A check-in round is a simple turn-based exercise in getting everyone on the same wavelength. The facilitator starts by giving the group a personal status update. After that, the person to the left of the facilitator gives their personal status, and so on, until everyone’s checked in.</p>
<p>It’s tempting to just say “I’m good” and move on, but the check-in round is an opportunity to express a little bit of vulnerability in order to create psychological safety. Daniel Coyle, in <em>The Culture Code,</em> sums it up nicely:</p>
<blockquote>
<p>Vulnerability doesn’t come after trust — it precedes it. Leaping into the unknown, when done alongside others, causes the solid ground of trust to materialize beneath our feet.</p>
</blockquote>
<p>A good check-in round establishes a baseline of trust, and enables the kind of candor required to write great design principles.</p>
<h3 id="align%3A-10-minutes">Align: 10 minutes</h3>
<p>Now’s the time for the facilitator to give their overview of the desired outcome. The facilitator moves quickly through any material they have, leaving time for the participants to ask any questions they have.</p>
<p>The goal of the “alignment” phase is to make sure everybody is working towards the same outcome, and has a feeling of common understanding.</p>
<h3 id="diverge-%26-write%3A-15-minutes">Diverge & Write: 15 minutes</h3>
<p>The facilitator sets a timer for 15 minutes, and the participants get to writing. Participants should write one principle per sticky note, and keep writing for the whole 15 minutes.</p>
<p>Some tips I find useful:</p>
<ul>
<li>If you get stuck, just write down the first thing that comes to mind and crumple it up. Post-it notes are cheap.</li>
<li>Put on some thinking music. My favorite music to get a room in sync is Steve Reich’s <a href="https://open.spotify.com/album/1w9O7mS9WEp5xlZUpYbDt9" target="_blank" rel="noopener">Music for 18 Musicians</a>. Classical music (Ravel is my favorite) works too. Keep the volume down, and respect people’s preferences if they’d rather work silently.</li>
<li>If you’re facilitating, keep an eye out for anyone who isn’t writing. Quietly ask them if they need any help, and give them guidance. It’s important that everyone contribute, even if they’re not 100% confident in their own ideas.</li>
</ul>
<p>At the end of 15 minutes, the facilitator calls ‘markers down.’</p>
<h3 id="converge-%26-theme%3A-15-minutes">Converge & Theme: 15 minutes</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/workshop-3.jpg" alt="The WSJ Design team at a recent design sprint" /><figcaption>The WSJ Design team at a recent design sprint</figcaption></figure>
<p>Next, the participants take turns reading their principles aloud and sticking them on the walls.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-principles-workshop/#fn5" id="fnref5">5</a></sup> The writer chooses where to stick their principles, but the facilitator should guide them to stick similar principles in tight clusters.</p>
<p>For instance, in a workshop I recently facilitated, these principles were in a cluster:</p>
<ul>
<li>Keep language friendly & empathetic</li>
<li>Friendly over corporate</li>
<li>Hugs over orders</li>
<li>[drawing of a butterfly]</li>
<li>[drawing of a smiling face]</li>
<li>Clean, but cheerful</li>
</ul>
<p>If you have lots of participants, you can save time by reading and theming only <em>unique</em> principles; a writer can choose to skip reading a principle that’s already been shared.</p>
<p>At the end of the theming phase, the group should have heard all the principles. The facilitator should take a minute and put a blank post-it next to each cluster to collect votes.</p>
<h3 id="vote%3A-10-minutes">Vote: 10 minutes</h3>
<p>The facilitator then gives each participant voting dots. Everyone spends 10 minutes putting dots on the sticky note next to the clusters they feel are the best principles for the team.</p>
<p>Voters are allowed to use multiple votes on any given cluster; I’ve seen people use three or four votes on a cluster they feel strongly about.</p>
<p>At the end of 10 minutes, the facilitator should quickly read out the results; at this point, everyone should be able to see where the votes are, so there’s no need to do a detailed tally.</p>
<h3 id="check-out-round%3A-5-minutes">Check-out round: 5 minutes</h3>
<p>To finish the workshop, each participant give a quick personal status, echoing the check-in round. If time is short, it’s tempting to skip the check-out round, but checking out is just as important as checking in. Instead of the team filtering out one by one, or the facilitator banging a proverbial gavel, the team gets to close the meeting out as a group.</p>
<hr />
<h2 id="the-results">The Results</h2>
<p>After an hour of intense collaboration, the team will have written a ton of design principles, grouped them into themes, and rated them. What the team does next is up to them.</p>
<p>In the case of the Wall Street Journal Editorial Tools team, I (the facilitator) translated the principles into a spreadsheet, themed them by color, and highlighted the principles with the most votes.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/workshop-1.png" alt="The group’s design principles, themed by color" /><figcaption>The group’s design principles, themed by color</figcaption></figure>
<p>Then, I edited the highest voted principles to better capture their theme, then published them in a series of posters.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/workshop-2.jpg" alt="The final design principles" /><figcaption>The final design principles</figcaption></figure>
<p>This is just one way of publishing design principles; you could keep them in a team wiki, print them on notebooks, or make laptop stickers. The important thing is to make them as visible as possible; the more the team (and collaborators from other teams) see the principles, the more deeply embedded they’ll become.</p>
<hr />
<h2 id="conclusion">Conclusion</h2>
<p>Since writing design principles as a team, we’ve been able to more quickly make difficult decisions, as well as stay aligned across a number of simultaneous projects. There’s been some re-interpretation of our original thinking along the way, but since the workshop was only an hour, it doesn’t feel like sacrilege to tweak as we go.</p>
<p>The team-authored principles are a huge upgrade over those I wrote alone: not only are they adopted on a much deeper level, but I’ve also been challenged to consider how our product looks from my teammate’s perspective.</p>
<p>Even if you don’t end up using the principles day-to-day, the process of articulating values as a team is a huge investment in the realtionships your teammates have.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>You can read more about good design principles <a href="https://matthewstrom.com/writing/principles.html" target="_blank" rel="noopener">here</a>. <a href="https://matthewstrom.com/writing/design-principles-workshop/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>While the parable of Chicken and Pig is no longer part of <a href="https://www.scrum.org/resources/chickens-and-pigs" target="_blank" rel="noopener">official scrum lore</a>, I still find it a useful metaphor. If you’re a vegan, just substitute a pea plant for the chicken and a carrot for the pig. <a href="https://matthewstrom.com/writing/design-principles-workshop/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>The larger the marker, the more articulate you have to be. Chisel-tip sharpies are my secret weapon in fighting long-windedness. <a href="https://matthewstrom.com/writing/design-principles-workshop/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>There will be some exceptions here (scribe, remote folks, etc). However, the fewer screens in the room, the better. <a href="https://matthewstrom.com/writing/design-principles-workshop/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p>Remote folks can read their principles out, and guide someone in the room to re-write and stick their principles up. <a href="https://matthewstrom.com/writing/design-principles-workshop/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
My management philosophy
2018-06-10T00:00:00Z
https://matthewstrom.com/writing/management-philosophy/
<p>After reading <a href="https://larahogan.me/blog/management-expectations/" target="_blank" rel="noopener">Lara Hogan’s post</a> and getting some inspiration from my own manager, I thought it’d be good to write up my management philosophy. This reflects my approach at this moment in time — I’m still pretty new to management, and will be revisiting this over time.</p>
<hr />
<h2 id="my-philosophy">My Philosophy</h2>
<p>I believe in servant leadership. If I do my job well, the people I manage will excel in their role and grow in their career.</p>
<p>I also believe that everyone defines success differently. I’m always seeking to tune and improve my management practices to best support those that I coach.</p>
<h3 id="what-i-expect-of-those-who-report-to-me">What I expect of those who report to me</h3>
<ul>
<li>
<p>Come to our 1-on-1 with your full attention, and be as candid as you can.</p>
</li>
<li>
<p>Build relationships across teams. Your connections with your peers in other parts of the organization will help you excel.</p>
</li>
<li>
<p>Stay curious. Use our resources (in-house training, education budget, etc) to grow your skills.</p>
</li>
<li>
<p>Share your work. Regularly seek feedback from other designers, and post to public channels when it’s appropriate.</p>
</li>
</ul>
<h3 id="what-my-reports-can-expect-from-me">What my reports can expect from me</h3>
<ul>
<li>
<p>A weekly 1-on-1, with my undivided attention. I prefer to use 1-on-1s as an opportunity for you to share thoughts with me, or solicit my contributions if you choose.</p>
</li>
<li>
<p>Regular skip-level 1-on-1s with my manager. The cadence will depend on their availability, and I’ll make sure any exceptions are accommodated.</p>
</li>
<li>
<p>360 reviews every four months. In addition to the company-mandated annual review, I’ll regularly share feedback from myself, your peers, and your stakeholders on how you’re performing.</p>
</li>
<li>
<p>Respect for work/life balance. I won’t send you messages (Slack or email) outside of working hours. If the need arises, I’ll make it clear why the circumstances are unusual.</p>
</li>
</ul>
Agile & anxiety
2018-05-14T00:00:00Z
https://matthewstrom.com/writing/agile-anxiety/
<figure data-type="image"><img src="https://matthewstrom.com/images/anxiety-1.jpg" alt="" /></figure>
<p><strong>Managing anxiety is a big part of my life.</strong></p>
<p>I have generalized anxiety:<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/agile-anxiety/#fn1" id="fnref1">1</a></sup> I constantly feel that <em>something</em> will go wrong at any moment. Often, I can’t even identify what I’m anxious about.</p>
<p>Work is a significant contributor to my anxiety. When I’m at work (and often when I’m not), I enumerate my fears: stakeholder pressure, user feedback, organizational tensions, the list can go on forever.</p>
<p>Lately, I’ve been exploring how designers can work more closely with agile software development teams, and I’ve found something fascinating: agile methodologies mirror strategies for managing anxiety. I’d like to share some of my observations, as well as advice for others who deal with generalized anxiety at work.</p>
<h4 id="side-note%3A-isn%E2%80%99t-agile-for-engineers%3F">Side note: isn’t agile for engineers?</h4>
<p>If you’re reading this, you’ve probably heard of agile software development.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/agile-anxiety/#fn2" id="fnref2">2</a></sup> Our engineering teams work in agile ways, and I’ve been impressed by their commitment to constant improvement.</p>
<p>To make our product development process more efficient, I encourage designers to get embedded with engineering teams: attending planning, standup, and retro enables tighter collaboration.</p>
<p>Based on this close embedding, we’ve also started applying agile principles to our day-to-day design process: continuous delivery, self-organization, and reflection, to name a few. I’m really optimistic about what it will do for our impact on product outcomes.</p>
<p>So how have agile principles helped me manage my anxiety?</p>
<h3 id="agile-reduces-work-in-progress">Agile reduces work in progress</h3>
<p>A work-in-progress limit is often used in agile software development.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/agile-anxiety/#fn3" id="fnref3">3</a></sup> By enforcing a ceiling on the responsibilities any member of your team has, you reduce multitasking, and increase productivity.</p>
<p>Limiting multitasking and context-switching has had other benefits, too. The less I am accountable for at any given moment, the easier it is for me to manage my anxiety. I can quickly check in to all of my responsibilities, and remind myself that everything’s ok.</p>
<p>Additionally, WIP limits make it easier to do deep, focused work. This is kind of like the runner’s high of product design — I do my best work when I’m “in the zone.”</p>
<h3 id="agile-values-transparency">Agile values transparency</h3>
<p>Although the original <a href="http://agilemanifesto.org/" target="_blank" rel="noopener">Agile Manifesto</a> and <a href="http://agilemanifesto.org/principles.html" target="_blank" rel="noopener">supporting principles</a> don’t specifically use the word “transparency,” they get close on this specific note:</p>
<blockquote>
<p>Business people and developers must work together daily throughout the project.</p>
</blockquote>
<p><strong>Standups</strong> (daily check-ins between the working team) provide opportunities to share progress and ask for help. <strong>Sprint reviews</strong> (celebrations of the team’s accomplishments) shine a light on what’s been done. <strong>Retrospectives</strong> (regular conversations around how to improve working processes) are a safe forum for introspection.</p>
<p>All of these things together comprise a support network for the team: anxiety is much easier to manage when you can ask for help when you’re feeling overwhelmed.</p>
<h3 id="agile-focuses-on-the-present">Agile focuses on the present</h3>
<p>One of the biggest sources of my anxiety is the vast expanse of the future. Given enough time, <em>anything</em> can go wrong. This is one of the places where agile methods excel: they focus work only on the present challenges, and embrace the uncertainty of the future.</p>
<p>Our teams work in two-week sprints. Because we’re only focused on delivering within the next few weeks, long-term projects must be broken down into smaller tasks. The “but what if” is handled in one of the principles of agile:</p>
<blockquote>
<p>Welcome changing requirements, even late in development. Agile processes harness change for the customer’s competitive advantage.</p>
</blockquote>
<p><em>Accepting & acknowledging</em> uncertainty is a big part of managing anxiety. Having this mentality reflected in the team’s working relationships makes it easier to practice.</p>
<h2 id="agile-for-the-anxious">Agile for the anxious</h2>
<p>Agile software development creates a supportive environment for people with anxiety. How do we take advantage of this?</p>
<h3 id="go-to-standup">Go to Standup</h3>
<p>In some ways, standup is like micro-group-therapy. If well-facilitated, it’s an opportunity to check in with responsibilities. Good standups enable me to safely raise concerns, and encourage the team to acknowledge and resolve conflicts.</p>
<p>Standup is sort like meditation for your whole team: regular practice provides focus, making the management of uncertainty a group exercise instead of a solo sport.</p>
<h3 id="turn-off-notifications">Turn off notifications</h3>
<p>The agile process gives you permission to focus. Regularly scheduled, highly structured touch points (planning, standup, retro) mean that you’ll seldom encounter ad-hoc feedback or requests.</p>
<p>I’ve started keeping my phone on ‘do not disturb’ mode for most of the day, and disabling email notifications on my laptop. Initially, this caused me <em>more</em> anxiety: I worried that I was failing to respond to important communication. Eventually, I found that this wasn’t the case. I still have to process emails and slack messages at some point, but I find that most timely requests get resolved naturally.</p>
<h3 id="trust-your-team">Trust your team</h3>
<p>Literature about the agile process uses lots of phrases like “distributed authority,” “self-organization,” and “autonomy.” A major part of the framework is spreading out responsibility as much as possible, and making it easy for the team to quickly flex in support of changes.</p>
<p>Agile software development works best when everyone adopts the distributive approach. It’s been difficult for me to delegate and distribute my work, but as I do, I’ve become far less anxious and more effective at managing a design team.</p>
<h4 id="how-does-your-process-help-with-anxiety%3F">How does your process help with anxiety?</h4>
<p>Have you found processes or workflows that help you manage anxiety? Has your team had any discussions about how you work together to handle uncertainty?</p>
<p>You can reach out on <a href="https://twitter.com/ilikescience" target="_blank" rel="noopener">twitter</a>, or email me at matthew.strom@wsj.com.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://adaa.org/about-adaa/press-room/facts-statistics" target="_blank" rel="noopener">18% of Americans have Generalized Anxiety Disorder</a>, so it’s highly likely that some of you can relate. <a href="https://matthewstrom.com/writing/agile-anxiety/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>If you haven’t, there’s plenty of <a href="https://www.agilealliance.org/agile101/" target="_blank" rel="noopener">great introductions</a> to the framework. <a href="https://matthewstrom.com/writing/agile-anxiety/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>NB: Technically, WIP limits come from kanban. Hopefully the agile wonks out there will excuse the equivalence. <a href="https://matthewstrom.com/writing/agile-anxiety/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Crystal ball 1-on-1s
2018-03-25T00:00:00Z
https://matthewstrom.com/writing/crystal-ball/
<figure data-type="image"><img src="https://matthewstrom.com/images/crystal-1.jpg" alt="" /></figure>
<p>1-on-1s are my favorite management tool. Not only for managing direct reports; sideways and upwards management need 1-on-1s, too. Here’s my general definition for a 1-on-1:</p>
<ol>
<li><strong>Reoccuring</strong> - Whether it’s weekly, bi-weekly, or monthly, set a cadence and stick with it.</li>
<li><strong>Informal</strong> - Don’t bring a strict agenda; try to spend the time actively engaged.</li>
<li><strong>Focused</strong> - Don’t bring your laptop. Set your phone on ‘do not disturb.’ Get out of the office, if possible.</li>
</ol>
<p>If you’re unfamiliar with 1-on-1s, there are a ton of great intros<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/crystal-ball/#fn1" id="fnref1">1</a></sup>. So instead of rehashing the whys and hows, I’d like to share a question I’ve been asking at my 1-on-1’s lately:</p>
<blockquote>
<p>Look into a crystal ball and see us at our next 1-on-1. You just told me you had a really great week<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/crystal-ball/#fn2" id="fnref2">2</a></sup>. What was great about it?</p>
</blockquote>
<p>There’s a few things that I like about this question.</p>
<h4 id="self-actualization">Self-Actualization</h4>
<p>It can be hard to help your reports, colleagues, or managers with the things that are frustrating them or keeping them from getting work done. The crystal ball is an opportunity to imagine that any blockers — too many meetings, needy stakeholders, organizational uncertainty — don’t exist. Sometimes, that’s enough to see a way through.</p>
<p>I have a friend who talks about “the future, where everything’s better,” which is a clever way to dispel skepticism. Sure, it’s fiction, but it gives everyone permission to ditch the drag of current problems.</p>
<h4 id="serendipity">Serendipity</h4>
<p>The crystal ball question is open ended. The answer can be simple: “I got a lot of sleep.” It can be complex: “I finally figured out how to delegate!<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/crystal-ball/#fn3" id="fnref3">3</a></sup>” By focusing on the future (where everything’s better), you open the conversation to a huge number of possible topics. The answer can kick off your 1-on-1, or provide a nice tag on the conversation.</p>
<h4 id="continuity">Continuity</h4>
<p>No matter the answer, make sure to follow up on it between now and your next 1-on-1. Connecting your conversations allows for short 1-on-1s (mine are usually 30 minutes), while still producing meaningful outcomes.</p>
<h3 id="ask-away">Ask away</h3>
<p>Give the crystal ball question a shot, and tell me what you think. Do you have any go-to tools for 1-on-1s? Any do’s or don’ts? Share 'em with me on <a href="https://twitter.com/ilikescience" target="_blank" rel="noopener">twitter</a>. ✌️</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Start here, with <a href="https://baremetrics.com/blog/startup-guide-to-1-on-1" target="_blank" rel="noopener">Josh Pigford’s great overview</a>. <a href="https://matthewstrom.com/writing/crystal-ball/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>I usually do my 1-on-1s weekly, so if you’re on a different cadence, substitute that period here. <a href="https://matthewstrom.com/writing/crystal-ball/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Real talk, this is my answer most of the time. <a href="https://matthewstrom.com/writing/crystal-ball/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Really bad design exercises
2018-02-19T00:00:00Z
https://matthewstrom.com/writing/design-exercises/
<figure data-type="image"><img src="https://matthewstrom.com/images/exercise-0.png" alt="" /></figure>
<p>As we at the Wall Street Journal kick off a new round of hiring<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-exercises/#fn1" id="fnref1">1</a></sup>, I’m reminded of my least favorite practice in design hiring: the Exercise. Why do we put ourselves through it? Why do we put each other through it? What could we possibly gain from it? I’d like to hazard an answer these questions. I also have a strange idea of how to improve the exercise — more on that in a bit.</p>
<h3 id="what-is-the-exercise%3F">What is the Exercise?</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/exercise-1.png" alt="Pretty much every design hiring process" /><figcaption>Pretty much every design hiring process</figcaption></figure>
<p>The Exercise is one step in most organizations’ design hiring process. It happens somewhere between interviews and a hiring decision. It usually comes in one of three flavors:</p>
<ul>
<li><strong>“Fix our product”</strong> - A designer asks the candidate to do their work for them.</li>
<li><strong>“Fix someone else’s product”</strong> - The candidate is asked to redesign a portion of an existing product. Since it’s someone else’s product, the candidate has no context or insight into why the product works the way it does. <a href="https://twitter.com/alex_barashkov" target="_blank" rel="noopener">Alex Barashkov</a> provided <a href="https://medium.com/pixelpoint/why-i-hate-your-fake-redesign-177a626d7f95" target="_blank" rel="noopener">a strongly-worded send up</a> on the shortcomings of such redesigns.</li>
<li><strong>“Design an imaginary product”</strong> - The candidate is given a hypothetical brief, and designs a product from scratch. This has been my preferred Exercise in the past, but it has some major shortcomings.</li>
</ul>
<p>Exercises can have a few different formats, too:</p>
<ul>
<li><strong>Take-home</strong> - The candidate is given a brief, then produces work on their own time, at their own pace. Sometimes, the brief suggests a given amount of time, but if the candidate is anything like me, they’ll spend <em>way</em> more time on it than suggested.</li>
<li><strong>Solo Whiteboard</strong> - The candidate is given a brief, then has to immediately produce work. A whiteboard is provided, along with one or two colors of markers. This format was adopted from engineering hiring practices, where it is loathed.</li>
<li><strong>Collaborative Whiteboard</strong> - The candidate shares a whiteboard and a few markers with other designers from the company. Together, they’re expected to produce some work. The candidate is usually not clear on who’s who, and has to quickly work out team dynamics in addition to drawing/talking.</li>
</ul>
<h3 id="why-do-companies-run-the-exercise%3F">Why do companies run the Exercise?</h3>
<p>Portfolios and résumés aren’t enough: to make a good hiring decision, we need to see <em>how a candidate works</em>.</p>
<p>Engineers have tackled this problem with whiteboards (and, before those existed, pens and paper) for decades<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-exercises/#fn2" id="fnref2">2</a></sup>. Engineers have also engineered the heck out of hiring. They’ve scaled organizations quickly and found great talent (they’ve also produced some epic monocultures, but that’s a different essay). My hunch is that design hiring has adopted a lot of engineering practices over the last few years, but we’re still trying to figure out what works and what doesn’t.</p>
<h3 id="what-do-we-have-to-gain-from-the-exercise%3F">What do we have to gain from the Exercise?</h3>
<p>During most of the hiring process, we talk about the inputs in outputs of work: past experience, portfolio highlights, etc. With a well-run design exercise, we can really dig into the <em>process</em> of design.</p>
<p>In exercises I’ve been a part of, things really click when the interviewer-interviewee relationship starts to blur. The good ones are improvisational; they engage the problem-solving parts of the brain. The active context of the Exercise can be a valuable look into day-to-day design thinking. Plus, it can be fun.</p>
<h3 id="why-doesn%E2%80%99t-the-exercise-work%3F">Why doesn’t The Exercise work?</h3>
<figure data-type="image"><img src="https://cdn-images-1.medium.com/max/1600/1*-wt7e0RgYOfAAUo8ODULWA.png" alt="Comic by Andrew Hwang" /><figcaption>Comic by <a href="https://medium.com/facebook-design/a-guide-to-interviewing-for-product-design-internships-d719dd4c146c" target="_blank" rel="noopener">Andrew Hwang</a></figcaption></figure>
<p>The exercise usually fails to simulate real design work.</p>
<p>In the case of take-home exercises, everyone misses out on the unpredictable nature of day-to-day design work. With whiteboarding, we simulate a bizarre world where all design happens on whiteboards. No matter what, asking a candidate to solve problems out of context is setting them up for failure.</p>
<p>Also, if you’re drawing on a whiteboard, you probably have your back to the person judging you. This isn’t comfortable for anybody.</p>
<h3 id="so-what%3F">So what?</h3>
<p>Should we care that design exercises don’t simulate real design? Probably not. However, we should <em>stop pretending that they do.</em> Nobody does their best work in contrived circumstances.</p>
<hr />
<p>So now, my really strange idea for better design exercises: instead of asking a candidate to design the best version of something, ask them to design the worst version of something.</p>
<p>Tentatively, let’s call it a Bad Design Exercise. This is an awful name, but I think it is fitting with the spirit of this essay.</p>
<p>I think we can learn a lot about good design by thinking about bad design. To wit, a real-life Bad Design Exercise:</p>
<h2 id="really-bad-rubik%E2%80%99s-cubes">Really Bad Rubik’s Cubes</h2>
<p>By looking at some real-life “bad” Rubik’s Cubes, we can learn a lot about the designers that made them.</p>
<h3 id="exhibit-a%3A-7x7-cube">Exhibit A: 7x7 Cube</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/exercise-3.jpg" alt="7x7 cube from Alacube" /><figcaption>7x7 cube from <a href="https://albacube.com/products/7x7-rubiks-cube-linglong-69mm-shengshou-albacub" target="_blank" rel="noopener">Alacube</a></figcaption></figure>
<p>I can’t solve a regular Rubik’s Cube. To me, this Rubik’s Cube puts the allure of success even further out of reach.</p>
<p><strong>Why is it bad?</strong> If all Rubik’s Cubes were this complicated, very few people would ever pick one up.</p>
<p><strong>What can we learn?</strong> If you’ve never seen these higher-order versions, you think of the Rubik’s Cube as a classic symbol of a hard puzzle to solve. But we take that — and lots of design — for granted. The 7x7 cube is a good example of seeing the core identifying element of a thing, and taking that one (or four) steps further.</p>
<h3 id="exhibit-b%3A-1x1-cube">Exhibit B: 1x1 Cube</h3>
<figure data-type="image"><img src="https://matthewstrom.com/images/exercise-4.jpg" alt="1x1 cube from Jaco Haasbroek" /><figcaption>1x1 cube from <a href="https://www.flickr.com/photos/jacohaasbroek/" target="_blank" rel="noopener">Jaco Haasbroek</a></figcaption></figure>
<p>I Googled this thinking it was a ridiculous idea, but lo and behold, you can buy it. I can’t figure out if it’s always solved, or unsolvable.</p>
<p><strong>Why is it bad?</strong> It takes all of the function out of the puzzle.</p>
<p><strong>What can we learn?</strong> Often, we learn by subtracting. A good designer will know when to stop, and when to keep reducing. In this case, the designer knew what they were doing: it’s obviously a Rubik’s Cube, and obviously a really bad one.</p>
<h3 id="exhibit-c%3A-color-changing-stickers">Exhibit C: Color-changing stickers</h3>
<figure class="l--mar-top-m">
<div style="width:100%;height:0;padding-bottom:56%;position:relative;">
<iframe src="https://giphy.com/embed/6GFdlN4tynnWLAfLtW" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe>
</div>
<figcaption class="c--gray l--mar-btm-m">Lenticular Rubik's Cube, solved by YouTube user <a href="https://www.youtube.com/watch?v=Ixz5w_Pm5Js">RedKB</a></figcaption>
</figure>
<p>This cube’s stickers are <a href="https://en.wikipedia.org/wiki/Lenticular_printing" target="_blank" rel="noopener">lenticular lenses</a>. Depending on what angle you view it from, the stickers appear one of two different colors.</p>
<p><strong>Why is it bad?</strong> Technically, you can solve it. But you’ll never get all the stickers right at all angles.</p>
<p><strong>What can we learn?</strong> This cube isn’t harder, mechanically speaking, than the regular 3x3. However, it undermines a key assumption of Rubik’s Cubes: that all faces of the cube are one and only one color. When designing, it’s important to question even the most basic assumptions.</p>
<hr />
<h2 id="how-to-successfully-run-a-bad-design-exercise">How to successfully run a Bad Design Exercise</h2>
<p>A successful design exercise accomplishes three things. It:</p>
<ol>
<li><strong>Gives the candidate a platform to comfortably express themselves</strong></li>
<li><strong>Gives the reviewer an opportunity to ask questions about the candidate’s process</strong></li>
<li><strong>Involves as little work as possible</strong></li>
</ol>
<p>To do all these things, a design exercise might look like this:</p>
<h3 id="step-1%3A-briefing">Step 1: Briefing</h3>
<p>Set aside time to walk a candidate through the exercise. Share a written brief with them before this meeting, and encourage them to ask questions. Clearly communicate your expectations. Maybe send them this essay, too.</p>
<h3 id="step-2%3A-time-box">Step 2: Time Box</h3>
<p>Explicitly limit the time the candidate can work on the exercise. In the past, I’ve done this by bookending the working time with the briefing and the review. Allow the candidate to work alone, uninterrupted, and make sure they have access to their preferred tools.</p>
<h3 id="step-3%3A-review">Step 3: Review</h3>
<p>How do you conduct design reviews with your team?<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/design-exercises/#fn3" id="fnref3">3</a></sup> Run the same process with the candidate. Invite team members to participate, and use this review time as an opportunity to share your process with the candidate.</p>
<h3 id="step-%E2%88%9E%3A-have-fun%2C-embrace-the-bad">Step ∞: Have Fun, Embrace the Bad</h3>
<p>It might seem impossible, but design exercises <em>can</em> be fun. Talking about bad design reduces the you vs. them friction of the interview process. And don’t take the work too seriously; pressure and stress shut conversations and candidates down.</p>
<hr />
<p><strong>In conclusion,</strong> design exercises can be really awful, if you let them. Improving the exercise will save time and emotional energy on both the candidate and the hiring manager side. Better conversations about design can increase the likelihood of hiring the right candidate, and maybe even convince the right hire to join.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>You should come work for us! <a href="https://dowjones.jobs/design-technology/new-jobs/" target="_blank" rel="noopener">Here are our current openings</a>. <a href="https://matthewstrom.com/writing/design-exercises/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://www.forbes.com/sites/vivekravisankar/2015/05/04/the-rise-and-looming-fall-of-the-engineering-whiteboard-interview/#318ca8161c82" target="_blank" rel="noopener">https://www.forbes.com/sites/vivekravisankar/2015/05/04/the-rise-and-looming-fall-of-the-engineering-whiteboard-interview/#318ca8161c82</a> <a href="https://matthewstrom.com/writing/design-exercises/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>If you don’t have a formal design review process, I have <a href="https://matthewstrom.com/writing/feedback-revisited.html" target="_blank" rel="noopener">some suggestions</a>. <a href="https://matthewstrom.com/writing/design-exercises/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Flight crews don't decide where to fly
2018-02-11T00:00:00Z
https://matthewstrom.com/writing/crews/
<figure data-type="image"><img src="https://matthewstrom.com/images/crews-1.jpg" alt="Airbus A320 - Photo from Wikimedia" /><figcaption>Airbus A320 - Photo from Wikimedia</figcaption></figure>
<p>When an Airbus A320 takes off, there are typically 10 people who are operating it. Between the pilots and cabin crew, their responsibilities include:</p>
<ul>
<li>Understanding how the plane workss</li>
<li>Monitoring the flight’s progress</li>
<li>Evaluating the weather conditions</li>
<li>Communicating with operators on the ground</li>
<li>Communicating with other planes</li>
<li>Educating 100 passengers on safety procedures</li>
<li>Keeping the passengers comfortable</li>
<li>Feeding the passengers on time</li>
<li>Resolving conflicts</li>
<li>Responding to changes in schedule</li>
</ul>
<p>On most flights, this crew is working together for the first time. A given flight’s crew usually didn’t train together. Often, they don’t see the exact plane they need to operate until they step aboard.</p>
<p>In 2017, there were <strong>37,000,000</strong> commercial flights. That year, there were only <strong>151</strong> safety incidents, none of them fatal. That’s a <strong>99.9996%</strong> percent safety record.</p>
<p>How does a group of people who have never met fly 100 people in a 600-metric-ton metal tube across the world so safely?</p>
<p>My best guess:</p>
<ol>
<li>Every Pilot/Co-Pilot/Crew member has the same responsibilities flight-to-flight</li>
<li>Every Airbus A320 is the same</li>
<li><strong>Nobody has to decide where to fly</strong></li>
</ol>
<h2 id="what-if-crews-had-to-decide-where-to-go%3F">What if crews had to decide where to go?</h2>
<p>The pilot has called a meeting of the crew. The crew discusses various possible destinations. Sure, all the passengers bought tickets to Cleveland, but wouldn’t we make more money if we flew a shorter route instead? The lead crew member has hung a poster in the crew room that says “Move Fast and Break Things,” so they also discuss flying at supersonic speed to Mars. The co-pilot has conducted a survey that says, on average, their passengers would prefer to fly to Fiji. Being equitable, the Pilot puts it to a vote, and Mars wins. Since the plane can’t actually fly to Mars, they agree to research spaceplanes in Q2 instead of flying anywhere.</p>
<p>The crew has made a bold bet on the future of aviation, but has failed to actually fly the plane. The moral?</p>
<h2 id="work-on-teams-like-crews-fly-planes">Work on teams like crews fly planes</h2>
<p>When you work on a team, whether it’s Agile or Scrum, in a <a href="https://en.wikipedia.org/wiki/Holacracy" target="_blank" rel="noopener">Holocracy</a> or <a href="https://www.strategy-business.com/article/00344" target="_blank" rel="noopener">Teal Org</a>, or none of the above, your responsibilities include:</p>
<ul>
<li>Understanding how the team works</li>
<li>Monitoring the team’s progress</li>
<li>Evaluating the current business goals</li>
<li>Communicating outward to the organization</li>
<li>Communicating across to other teams</li>
<li>Educating stakeholders on how the team works</li>
<li>Keeping stakeholders up-to-date</li>
<li>Including stakeholders at the right time</li>
<li>Resolving conflicts</li>
<li>Responding to changing priorities</li>
</ul>
<p>To work productively, make sure you don’t have to decide where to go. Work with stakeholders to set missions, KPIs, OKRs, milestones, or just plain old goals <em>before</em> the team steps foot onto the proverbial plane. In-flight, try to avoid re-evaluating the goal. Land the plane safely with a solid report-out and retrospective, before asking where to go next. Try to make switching teams between projects seamless.</p>
<p>The above advice works for big initiatives, 2-week sprints, and 30-minute meetings — <strong>especially</strong> 30-minute meetings.</p>
<hr />
<p>This idea was brought up by my friends <a href="https://twitter.com/dbbradle" target="_blank" rel="noopener">Derrick</a> and <a href="https://twitter.com/thisisdara" target="_blank" rel="noopener">Dara</a> in a recent conversation on teamwork. Thanks, friends, for the inspiration.</p>
Why the web will win
2018-01-06T00:00:00Z
https://matthewstrom.com/writing/web-platform/
<p>197 billion apps were downloaded in 2017<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn1" id="fnref1">1</a></sup>: that’s almost 26 per human being on the planet Earth. 6 apps per second. In the 10 years since Apple opened the App Store, app downloads have doubled, on average, every two years.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn2" id="fnref2">2</a></sup></p>
<p>Given the numbers, it’s not surprising that many veterans of the web platform have declared it as second-rate:</p>
<blockquote>
<p>I feel it’s time to revisit the web vs. native debate, and concede defeat — or, at least, concede that the web cannot, and should not, compete with native when it comes to complex, app-like structures.<br />
– <em>Peter-Paul Koch, 2015</em><sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn3" id="fnref3">3</a></sup></p>
</blockquote>
<blockquote>
<p>Websites are just services, and what you see in a browser tab is merely one possible interface to that service. The best possible interface to that service is often, if not usually, going to be a native app, not a web app.<br />
– <em>John Gruber, 2013</em><sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn4" id="fnref4">4</a></sup></p>
</blockquote>
<p>To Mr. Gruber’s credit, things were looking pretty grim for the web platform in 2013. But the web did what the web does: it grew. Looking ahead, it’s clear to me that the web is, and will continue to be, the platform of record. The web will win.</p>
<hr />
<h2 id="the-web-has-already-won">The web has already won</h2>
<p>The web is designed to be open-source, and therefore it is designed to last.</p>
<p>Tim Berners-Lee’s 1989 proposal for the World Wide Web wasn’t the most technically sophisticated vision of the early internet, nor was it the most popular at the time. However, in 1993, Berners-Lee and CERN open-sourced all of the technology associated with the World Wide Web.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn5" id="fnref5">5</a></sup> The open nature of the World Wide Web meant it could be implemented by anyone, anywhere, on any computer.</p>
<p>The web platform as we know it today — HTML, JavaScript, and CSS — has existed since 1996 and the release of Internet Explorer 3. In the 22 years since, Facebook, Google, Amazon<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn6" id="fnref6">6</a></sup>, and Alibaba all launched first on the web platform.</p>
<p>Since then, other platforms have come and gone. Blackberry once controlled 50% of the smartphone market — now, it has just 0.048%.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn7" id="fnref7">7</a></sup> Windows Mobile accounted for 23% of smartphone sales in 2004. By 2017, it had dropped to 0.3%.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn8" id="fnref8">8</a></sup> All the while, the largest companies in the world continued to invest in the web.</p>
<p>This level of investment is only possible because of the web’s open-source nature. Collaboration between major companies shapes the web today:</p>
<ul>
<li>Google and Apple are the two largest contributors to <strong>WebKit</strong>, the foundation of Safari.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn9" id="fnref9">9</a></sup></li>
<li>Google Chrome is built on <strong>Blink</strong>, itself an offshoot of WebKit.</li>
<li><strong>V8</strong>, Chrome’s JavaScript rendering engine, also powers <strong>Node.js</strong>, which is quickly becoming lingua franca for server-side applications.</li>
<li><strong>React</strong>, Facebook’s JavaScript interface builder, has contributors and users at Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, and more.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn10" id="fnref10">10</a></sup></li>
</ul>
<p>All of these frameworks are open source. Hundreds of thousands of developers, from thousands of companies, collaborate on and contribute to the ongoing development of the bedrock of the web platform.</p>
<h2 id="the-next-billion-users">The next billion users</h2>
<p>In 2015, there were 3 billion internet users. In 2020, that number is projected to reach 4.1 billion.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn11" id="fnref11">11</a></sup> Each of those 1.1 billion people will have access to the web platform, no matter what device or operating system they use.</p>
<p>Google and Facebook pour resources into connecting new users to the web. Facebook alone claims to have put 40 million new users on the web in the last 5 years, through their Internet.org initiative.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn12" id="fnref12">12</a></sup> Google’s Project Loon goes further, putting flocks of balloons into the stratosphere to broadcast the internet anywhere on earth. While initially dismissed as mad science, Project Loon recently proved itself a viable technology by providing internet access to 100,000 Puerto Ricans after Hurricane Maria destroyed the island’s data infrastructure.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn13" id="fnref13">13</a></sup></p>
<p>Providing rich experiences to new internet users through the web platform has proven valuable to the world’s largest companies:</p>
<ul>
<li>Alibaba <strong>increased conversions from web 76%</strong> by building a web app. Their monthly active users subsequently increased 14% on iOS and 30% on Android.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn14" id="fnref14">14</a></sup></li>
<li>Twitter now sends all of its mobile web traffic through a web app called Twitter Lite. Twitter Lite weighs in at <strong>600KB</strong>, compared to the 23MB load of the native Android app. Its introduction came with a <strong>65% increase in pages-per-session</strong>, along with a <strong>75% increase in tweets sent.</strong><sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn15" id="fnref15">15</a></sup></li>
<li>Uber launched m.uber, a fully-featured progressive web app, in 2017. It allows a user to book a ride, regardless of location, network speed, or device. The initial app load is just <strong>50kb,</strong> making it significantly smaller and faster than the native equivalents.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn16" id="fnref16">16</a></sup></li>
<li>Starbucks launched a web app to enable mobile ordering on any device. Users can now find local stores, create and customize food and drink orders, and complete the checkout process from the web platform. The progressive web app uses <strong>99.84% less data</strong> — 233kb, compared to the 148mb iOS app<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn17" id="fnref17">17</a></sup>.</li>
</ul>
<p>For these companies, optimizing for new internet users by building on the web platform has paid significant dividends.</p>
<h2 id="the-next-big-platform">The next big platform</h2>
<p>Back to John Gruber’s argument: “The best possible interface [is] going to be a native app.” In 2013, that might have been true; in 2018, it’s questionable. The web platform has quietly evolved to match, if not surpass, the capabilities of native apps.</p>
<p><strong>Progressive Web Apps</strong> are one of the most exciting developments of the web platform in the last 10 years.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn18" id="fnref18">18</a></sup> PWAs work with low internet connectivity, or no internet connectivity at all. They have access to device hardware like the camera and accelerometer, enabling native functionality. Some platforms — notably Android — make no distinction between native apps and PWAs.</p>
<p><strong>WebGL</strong> is a web API that allows developers to render 2d and 3d graphics without any additional plugins. With WebGL 1.0 implemented in every major browser, web apps can use the same hardware as native apps to create rich visual experiences. Autodesk recently ported all of their flagship applications to web apps using WebGL, including industry standard AutoCAD.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn19" id="fnref19">19</a></sup> Figma, a new design application, runs entirely in the browser. It performs equally to or better than its competitors, Sketch, Illustrator, and Adobe XD.</p>
<p><strong>WebAssembly</strong> is a relatively new concept, but it promises to revolutionize how web applications are built. In a nutshell, WebAssembly allows developers to run code in an extremely high-performance and high-security environment, all inside a browser<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn20" id="fnref20">20</a></sup>. Additionally, code written in C++ can be efficiently and automatically translated into WebAssembly; apps written for native platforms can be easily converted and distributed on the web platform.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn21" id="fnref21">21</a></sup></p>
<p><strong>Payment Request API</strong> is a new specification with a bold mission: <em>eliminate checkout forms<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn22" id="fnref22">22</a></sup>.</em> The Payment Request API hooks into platform payment systems — think Apple Pay and Google Wallet/Android Pay — and securely handles the exchange of credentials.</p>
<p><strong>React Native and Electron</strong> are two examples of how web platform technology is invading other platforms:</p>
<ul>
<li>React Native is an extension of Facebook’s React library. It allows developers to write a single code base (in Javascript), and compile to other native platforms (like Objective C and Java).<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn23" id="fnref23">23</a></sup> In addition to making it easy to write the same code for both iOS and Android, the newer React Native Web library introduces the idea of a single code base for <em>every</em> platform, including the web<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn24" id="fnref24">24</a></sup>.</li>
<li>Electron, on the other hand, runs web platform code <em>inside</em> desktop platforms, hooking into low-level functionality to run efficiently.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/web-platform/#fn25" id="fnref25">25</a></sup></li>
</ul>
<hr />
<h2 id="the-web-is-dead%2C-long-live-the-web">The web is dead, long live the web</h2>
<p>The first 22 years of the web platform were revolutionary. The open, accessible, and feature-rich applications that exist on the platform continue to drive the global economy. The next 5 years look like they’ll be filled with more innovation and growth than ever.</p>
<p>The web will be the platform of the Next Big Thing. Not just as the distribution network many see it as today; the web platform will deliver the most innovative experiences. They’ll be innovative not just for how they use new technology, but also because of how easy it will be for new users to experience.</p>
<p>The web is alive, and better than ever.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://www.statista.com/statistics/271644/worldwide-free-and-paid-mobile-app-store-downloads/" target="_blank" rel="noopener">https://www.statista.com/statistics/271644/worldwide-free-and-paid-mobile-app-store-downloads/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store/" target="_blank" rel="noopener">https://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p><a href="https://www.quirksmode.org/blog/archives/2015/05/web_vs_native_l.html" target="_blank" rel="noopener">https://www.quirksmode.org/blog/archives/2015/05/web_vs_native_l.html</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p><a href="https://daringfireball.net/2013/04/web_apps_native_apps" target="_blank" rel="noopener">https://daringfireball.net/2013/04/web_apps_native_apps</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p><a href="https://www.inverse.com/article/14959-celebrating-23-years-of-the-www-how-tim-berners-lee-open-sourced-the-internet" target="_blank" rel="noopener">https://www.inverse.com/article/14959-celebrating-23-years-of-the-www-how-tim-berners-lee-open-sourced-the-internet</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p>Amazon, in fact, existed before CSS (but not Javascript). <a href="https://matthewstrom.com/writing/web-platform/#fnref6" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p><a href="http://nymag.com/selectall/2017/02/blackberrys-global-market-share-is-now-0-0.html" target="_blank" rel="noopener">http://nymag.com/selectall/2017/02/blackberrys-global-market-share-is-now-0-0.html</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref7" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn8" class="footnote-item"><p><a href="https://adtmag.com/articles/2017/02/16/windows-mobile.aspx" target="_blank" rel="noopener">https://adtmag.com/articles/2017/02/16/windows-mobile.aspx</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref8" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn9" class="footnote-item"><p><a href="http://appleinsider.com/articles/13/02/11/apple-google-nearly-tied-as-top-contributors-to-webkit-as-adoption-expands" target="_blank" rel="noopener">http://appleinsider.com/articles/13/02/11/apple-google-nearly-tied-as-top-contributors-to-webkit-as-adoption-expands</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref9" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn10" class="footnote-item"><p><a href="https://github.com/facebook/react/wiki/Sites-Using-React" target="_blank" rel="noopener">https://github.com/facebook/react/wiki/Sites-Using-React</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref10" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn11" class="footnote-item"><p><a href="https://www.huffingtonpost.com/john-garrity/internet-user-growth-over_b_10603196.html" target="_blank" rel="noopener">https://www.huffingtonpost.com/john-garrity/internet-user-growth-over_b_10603196.html</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref11" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn12" class="footnote-item"><p><a href="https://techcrunch.com/2016/11/02/omnipresent/" target="_blank" rel="noopener">https://techcrunch.com/2016/11/02/omnipresent/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref12" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn13" class="footnote-item"><p><a href="https://www.engadget.com/2017/11/09/project-loon-delivers-internet-100-000-people-puerto-rico/" target="_blank" rel="noopener">https://www.engadget.com/2017/11/09/project-loon-delivers-internet-100-000-people-puerto-rico/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref13" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn14" class="footnote-item"><p><a href="https://developers.google.com/web/showcase/2016/alibaba" target="_blank" rel="noopener">https://developers.google.com/web/showcase/2016/alibaba</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref14" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn15" class="footnote-item"><p><a href="https://developers.google.com/web/showcase/2017/twitter" target="_blank" rel="noopener">https://developers.google.com/web/showcase/2017/twitter</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref15" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn16" class="footnote-item"><p><a href="https://eng.uber.com/m-uber/" target="_blank" rel="noopener">https://eng.uber.com/m-uber/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref16" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn17" class="footnote-item"><p><a href="https://formidable.com/work/starbucks-progressive-web-app/" target="_blank" rel="noopener">https://formidable.com/work/starbucks-progressive-web-app/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref17" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn18" class="footnote-item"><p>To learn more about progressive web apps, Check out this <a href="https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/" target="_blank" rel="noopener">excellent Smashing Magazine essay</a>. <a href="https://matthewstrom.com/writing/web-platform/#fnref18" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn19" class="footnote-item"><p><a href="https://www.3dcadworld.com/autodesk-fusion-360-the-future-of-cad-part-1/" target="_blank" rel="noopener">https://www.3dcadworld.com/autodesk-fusion-360-the-future-of-cad-part-1/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref19" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn20" class="footnote-item"><p>A great intro to WebAssembly is <a href="https://blog.mozilla.org/blog/2017/11/13/webassembly-in-browsers/" target="_blank" rel="noopener">this post by Mozilla</a>, which coincidentally marks a big milestone in the technology’s development. <a href="https://matthewstrom.com/writing/web-platform/#fnref20" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn21" class="footnote-item"><p>Figma switched to WebAssembly to compile their C++ code, resulting in a <a href="https://blog.figma.com/webassembly-cut-figmas-load-time-by-3x-76f3f2395164" target="_blank" rel="noopener">3x performance improvement</a>. <a href="https://matthewstrom.com/writing/web-platform/#fnref21" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn22" class="footnote-item"><p><a href="https://developers.google.com/web/fundamentals/payments/" target="_blank" rel="noopener">https://developers.google.com/web/fundamentals/payments/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref22" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn23" class="footnote-item"><p><a href="https://facebook.github.io/react-native/" target="_blank" rel="noopener">https://facebook.github.io/react-native/</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref23" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn24" class="footnote-item"><p><a href="https://github.com/necolas/react-native-web" target="_blank" rel="noopener">https://github.com/necolas/react-native-web</a> <a href="https://matthewstrom.com/writing/web-platform/#fnref24" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn25" class="footnote-item"><p>In fact, modern code editors — the tools developers are using to write all other applications — are being built on the web platform. See <a href="https://atom.io/" target="_blank" rel="noopener">Atom</a> and <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VS Code</a>. <a href="https://matthewstrom.com/writing/web-platform/#fnref25" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
My favorite job interview question
2017-12-28T00:00:00Z
https://matthewstrom.com/writing/interview/
<p>I like job interviews.</p>
<p>I participated in a lot of job interviews in 2017. I interviewed extensively before starting at SoundCloud, and then again on my way to my current position at The Wall Street Journal.</p>
<p>Sometimes, interviews are full of fascinating cultural signals. Most times, interviews are full of tired and cliche questions.</p>
<p>For example, “What’s your greatest weakness?” This is the Monopoly of questions: everyone knows the rules, and nobody likes playing. The interviewee is expected to come up with an insightful comment about their own shortcomings, without revealing any of their <em>actual</em> shortcomings. The interviewer is saying nothing about the company’s values — except that the company doesn’t value originality<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/interview/#fn1" id="fnref1">1</a></sup>.</p>
<p>It’s a lose-lose question.</p>
<p>Prompting introspection is a really powerful interview tactic, but “what’s your greatest weakness” is the worst way to go about it. Instead, try this prompt:</p>
<blockquote>
<p>Tell me about a time that you were wrong.</p>
</blockquote>
<p>You’ll send strong cultural signals to the applicant. You’ll allows the applicant to pack meaningful personal information into their answer. It’s easy to understand, and works for every level of every position.</p>
<h2 id="what-the-prompt-tells-an-applicant-about-the-organization">What the prompt tells an applicant about the organization</h2>
<p>Most interviews waste a lot of time talking about getting things right. “You should come work for us because we get things right.” “You should hire me because I get things right.” “How will you make the company get things right more often?” And so on.</p>
<p>Being right is great, but it’s boring. Being right doesn’t lead to self-reflection or growth. Being right is often misattributed. Being right is expected.</p>
<p>By asking about a time the candidate was wrong, you make an important acknowledgement: being wrong happens. You also show that you value balance, reflection, honesty, candor, and humility.</p>
<p>When you give the prompt, your posture while listening to the answer can communicate a lot. Try to listen actively: you’ll signal your interest in learning from getting it wrong, too.</p>
<h2 id="what-the-answer-tells-the-interviewer-about-the-candidate">What the answer tells the interviewer about the candidate</h2>
<p>Recognizing that you were wrong is hard. To actually talk to another person about what you got wrong is emotionally challenging. Give the candidate some time with this prompt, and you’ll learn a lot about them.</p>
<p>Some possible scenarios:</p>
<ul>
<li><strong>The candidate answers quickly and thoroughly.</strong> This might mean that they’ve spent time understanding their experience. They’re comfortable acknowledging where they fell short. Either that, or they read this essay and had time to prepare<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/interview/#fn2" id="fnref2">2</a></sup>.</li>
<li><strong>The candidate works through their answer slowly, with some effort.</strong> Being open to introspection with a stranger is a positive trait. How the candidate works through the answer says a lot: they might talk candidly, or might be sheepish. They may collect a few related experiences, or go deep on one. This process is a good preview of how they’ll handle communication challenges in their role.</li>
<li><strong>The candidate doesn’t have an answer right away.</strong> Some people expend all their mental energy simply showing up to a job interview. It’s a stressful experience, and they might not have the space for emotional candor. Encourage them to follow up later in an email. Depending on the team and the role, face-to-face candor might never be a factor.</li>
<li><strong>The candidate doesn’t get things wrong.</strong> Don’t hire this person.</li>
</ul>
<p>The content of the candidate’s answer signals a lot, too. The contrast between the risk involved (were there negative repercussions?) and the candidate’s certainty about their decision at the time (were they surprised when they were wrong?) is particuarly interesting.</p>
<ul>
<li><strong>Low risk, low certainty:</strong> “I picked the wrong socks for this interview” is a good joke, and hopefully it’s followed by a better answer.</li>
<li><strong>Low risk, high certainty:</strong> “I thought the CEO would like an update every day.” It’s good to acknowledge that being certain and being right are separate things, but low-risk mistakes are common and easily brushed off.</li>
<li><strong>High risk, low certainty:</strong> “We were on deadline and I decided to cut corners.” Situational pressures are going to exist in every role in every organization. Understanding how a candidate will respond to them is valuable.</li>
<li><strong>High risk, high certainty:</strong> “I decided to ship because I thought we were ready.” This is my favorite kind of answer. You’ll never hire someone who doesn’t make mistakes. Try to hire someone who will take responsibility for mistakes, no matter how high the stakes are.</li>
</ul>
<h2 id="how-to-use-this-prompt">How to use this prompt</h2>
<p>I follow this prompt with “ok, now tell me about a time you were right.” This gives the candidate time to recover after the emotional effort required for good introspection. The response also tends to be much more genuine and less self-aggrandizing when framed with the previous prompt.</p>
<p>Similarly, I like to put this prompt earlier in the interview. The conversation that follows tends to be more candid, and more natural. “Tell me about a time you were wrong” defuses a great deal of the tension of the typical job interview. Instead of feeling pressure to convey merit through past accomplishments (a relatively low-value indicator of future performance), the candidate has the opportunity to demonstrate strong communication skills (a high-value indicator of future performance).</p>
<h3 id="acknowledgements">Acknowledgements</h3>
<p>Thanks to <a href="http://joshpetersel.com/" target="_blank" rel="noopener">Josh Petersel</a> for providing feedback and edits on an earlier version of this essay.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>From Josh’s excellent feedback: “The greatest weakness question is far inferior because … it attributes fault to the interviewee as a person. Personal faults are much more difficult to respond to than situational faults.” <a href="https://matthewstrom.com/writing/interview/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Preparation isn’t a bad thing. Depending on the candidate, preparation may be the only way they’ll feel confident enough to walk into the room in the first place. While improvising and problem-solving on the fly are valuable skills, interviews aren’t the best place to test for them; try an on-site collaborative exercise, instead. <a href="https://matthewstrom.com/writing/interview/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Changing all the fonts on WSJ.com
2017-12-11T00:00:00Z
https://matthewstrom.com/writing/wsjfonts/
<p>“Change the fonts.” It’s a simple mission statement.</p>
<p>In reality, changing the fonts on <a href="https://wsj.com/" target="_blank" rel="noopener">wsj.com</a> has involved years of coordination and planning between nearly every team at the Wall Street Journal. In the past month, the last few coordinated steps were executed with an incredible amount of patience and skill, and no shortage of white knuckles.</p>
<h3 id="why-change-the-fonts%3F">Why change the fonts?</h3>
<p>The Wall Street Journal has a long history of quality typography. There’s a well of design wisdom behind the paper’s current look, as the evolution of news design is encoded in each page.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wsjfonts-0.png" alt="The paper in 1889 and 2017" /><figcaption>The paper in 1889 and 2017</figcaption></figure>
<p>Each typeface currently used in print was designed specifically for the needs of the Journal’s format and printing process. Those typefaces are:</p>
<p><strong>Escrow</strong><br />
Designed by Cyrus Highsmith in 2002. Escrow epitomizes what the news looks like: loud and authoritative. As a Scotch, expresses the legacy of the Journal.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wsjfonts-1.png" alt="Escrow" /><figcaption>Escrow</figcaption></figure>
<p><strong>Exchange</strong><br />
Designed by Tobias Frere-Jones in 2002. Exchange welds the stability of Ionic slab serifs together with notes from Bell Gothic’s practical legibility.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wsjfonts-2.png" alt="Exchange" /><figcaption>Exchange</figcaption></figure>
<p><strong>Retina</strong><br />
Designed by Tobias Frere-Jones in 2000. Retina takes clarity to the extreme. It was designed around the print process, allowing space for ink to bleed into newsprint.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wsjfonts-3.png" alt="Retina" /><figcaption>Retina</figcaption></figure>
<p>While these typefaces are central to the brand of the Journal, digital channels are a significantly more complicated environment. Legal and technical hurdles meant that, until recently, we lacked the ability to use these typefaces on the web.</p>
<p>It took the time, patience, passion, attention, hard work, and cooperation of many, many people throughout the organization, and as of December 11, 2017, most of wsj.com is rendered in Escrow, Exchange, and Retina.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wsjfonts-4.png" alt="Updated fonts on the homepage" /><figcaption>Updated fonts on the homepage</figcaption></figure>
<p>Here’s some things I’ve learned in the process:</p>
<h3 id="the-hard-thing-about-easy-things">The hard thing about easy things</h3>
<p>The hardware and software that renders wsj.com is fascinating. My back-of-the-envelope calculation says that in the time you’ve been reading this essay, more than 10,000 people will have visited our site; each of them expects a nice-looking page to load quickly and work perfectly.</p>
<p>Depending on what page it serves, our web platform might rely on any number of separate applications, all of which are continuously deployed and deeply intertwined.</p>
<p>Editors and contributors are publishing and updating stories every minute, of every day, of every month of the year.</p>
<p>Our readers are in every corner of the globe, on every imaginable combination of internet connection and hardware quality.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wsjfonts-5.png" alt="Re-painting the plane (photo by Deniz Altindas)" /><figcaption>Re-painting the plane (photo by Deniz Altindas)</figcaption></figure>
<p>To make a coordinated change between all the machines that make wsj.com go, the engineering team had to pull off an incredibly difficult feat. The best analogy I can come up with is that it is like putting a new coat of paint on a fully-loaded 747 in flight over the Pacific.</p>
<h3 id="the-spreadsheet">The spreadsheet</h3>
<p>The tentpole of communication during this process was a humble spreadsheet. No sophisticated style guide or design system, no handoff software like Zeplin or InVision (though, we use all those things at times). A humble spreadsheet.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/wsjfonts-6.png" alt="The spreadsheet" /><figcaption>The spreadsheet</figcaption></figure>
<p>I love spreadsheets. Reactions to a tweet espousing my love for spreadsheets tell me that other designers love spreadsheets, too.</p>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">my favorite design tool is a spreadsheet</p>— Matthew Ström (@ilikescience) <a href="https://twitter.com/ilikescience/status/933038098920935424?ref_src=twsrc%5Etfw">November 21, 2017</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>Spreadsheets work so well because they <strong>map</strong> information. In this case, the map showed where we were today, where we wanted to go, and provided exact instructions for how to get there.</p>
<p>Because Google Sheets can be collaborative, designers from across the organization can use them simultaneously with developers, sharing a simple, common language.</p>
<h2 id="getting-90%25-of-the-way-there">Getting 90% of the way there</h2>
<p>To get the new fonts into an article page exactly how I think it should look, I could spend all day in Sketch moving text boxes inside a big rectangle. I get to nudge pixels until everything is just so, save a PDF, and preserve that perfection for all eternity. Then just attach it to a JIRA ticket, and move onto the next one.</p>
<p>Websites don’t actually work like this.</p>
<p>There are many, many shortcomings in the design tools we use; not that designers don’t have enough control, but that they have <em>too much.</em> The web platform is messy, and often out of our control. Our tools trick us into thinking we have agency.</p>
<p>To avoid this trap, in working with the web design team, I encouraged everyone to just account for 90% of the changes. The last 10% was such an unknown, and so liable to change, that it would be best to simply let it wait.</p>
<p>90% is a totally arbitrary number. By choosing this goal we acknowledge that shipping anything is better than not shipping the perfect thing.</p>
<h2 id="acknowledgements">Acknowledgements</h2>
<p>To say this was a team effort would be to imply that there was such thing as a solo effort at The Wall Street Journal. Nothing here happens without the hard work of many people. Here’s some of the folks that made this particular project a success:</p>
<p>Head of Design <strong>Che Douglas</strong> held the vision, fought the hard fights, and made it possible for us to implement these typefaces.</p>
<p>Fellow Design and UX Directors <strong>Thomas Williams, Bonnie Jarvie, and Fernando Turch</strong> coordinated and collaborated with the design team to maintain the strength of the brand across all our products.</p>
<p>Product Designers <strong>Brian Feeney, Cory Etzkorn, Lee Yon, Adele Morgan</strong> and Studio Manager <strong>Jillian Breitfeller</strong> put many, many hours into the endless details of the changeover.</p>
<p>Program Manager <strong>Tania Feliz</strong> and Product Managers <strong>Marta Jakubanis, Delia Casa, Neesha Patel, Tyler Chance, and Sarah Pesin</strong> managed the chaos of such a complicated project, facilitating communication and ultimately guaranteeing our success.</p>
<p>The graphics team, <strong>Shazna Nessa, Dov Friedman, Elliot Bentley, Gabriel Gianordoli, Laura Holder, Tonia Cowan, Tyler Paige, Erik Brynildsen, and Tynan Debold,</strong> worked on our data visualization and graphics language to make the shift together with the product team.</p>
<p>Engineering leads <strong>Vishaal Patil, Morgan Vo, Ryan Yun, and Christian Sherland,</strong> along with the entire engineering team, worked with such supreme grace under pressure — I’m fortunate to work with such a collaborative and patient group.</p>
<p>Finally, many more people contributed to this feat, all of who I hope I have properly thanked in the many internal emails and slack messages that we’ve exchanged over the past few months.</p>
What makes a good design principle?
2017-11-14T00:00:00Z
https://matthewstrom.com/writing/principles/
<p>Like many design teams, the Wall Street Journal team has been thinking through our design principles. Writing design principles comes pretty naturally (especially if you read this <a href="https://principles.adactio.com/" target="_blank" rel="noopener">excellent list by Jeremy Keith</a>). As we collaborate, we end up with a lot of candidates. However, it’s unclear what exactly a <em>good</em> design principle is.</p>
<p>To that end, here’s a set of criteria I’ve been working with:</p>
<h3 id="good-design-principles-are-memorable.">Good design principles are memorable.</h3>
<p>What good is a design principle if it’s hard to internalize?</p>
<p>✓ <strong>“Good design is as little design as possible”</strong> - <a href="https://www.vitsoe.com/us/about/good-design" target="_blank" rel="noopener">Dieter Rams</a><br />
✕ <strong>“Design with an intention to conserve effort and produce as little material output as is necessary to accomplish your goals”</strong> - Go home, drunk Dieter Rams</p>
<h3 id="good-design-principles-help-you-say-no.">Good design principles help you say no.</h3>
<p>You should be able to use your design principles to prioritize and focus.</p>
<p>✓ <strong>“One primary action per screen”</strong> - <a href="http://bokardo.com/principles-of-user-interface-design/" target="_blank" rel="noopener">Joshua Porter</a><br />
✕ <strong>“Keep the number of actions per screen to a minimum”</strong> - It’s hard to say ‘no’ to a vague measure like ‘a minimum.’</p>
<h3 id="good-design-principles-aren%E2%80%99t-truisms.">Good design principles aren’t truisms.</h3>
<p>A good test of truism is the <strong>reversibility test.</strong><sup class="footnote-ref"><a href="https://matthewstrom.com/writing/principles/#fn1" id="fnref1">1</a></sup> A principle passes the test if the opposite of that principle is something a reasonable person might believe.</p>
<p>✓ <strong>“Don’t solve every edge case”</strong> - Look at the opposite: “Solve every edge case.” It’s reasonable for a design organization to take this opposite approach.<br />
✕ <strong>“Make users happy”</strong> - The opposite is: “Make users unhappy.” Nobody in their right mind would think that was a good design principle; thus, “Make users happy” is a truism.</p>
<h3 id="good-design-principles-are-applicable.">Good design principles are applicable.</h3>
<p>They should give everyone on the team ideas of how to best practice them, and they shouldn’t be specific to one particular platform or discipline.</p>
<p>✓ <strong>“Solicit and respect user feedback”</strong> - For any given product (native, web, off-platform) or discipline (ui, ux), it’s possible to get user feedback.<br />
✕ <strong>“Use an 8 pixel grid”</strong> - this is only applicable to screens, and only applicable to ui, and it’s not immediately obvious what exactly an 8-pixel grid is.</p>
<h2 id="a-shortcut-to-good-principles%3A-even-over-statements">A shortcut to good principles: Even Over statements</h2>
<p>Some years ago, I was introduced to the <a href="http://futureofwork.nobl.io/future-of-work/how-to-distill-a-strategy-into-simple-rules-of-thumb-for-busy-teams" target="_blank" rel="noopener">Even Over</a> statement by some close friends and collaborators<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/principles/#fn2" id="fnref2">2</a></sup>. Even Over statements are constructed as follows:</p>
<p><strong>(Choice A) even over (Choice B)</strong></p>
<p>“Tastiness even over healthiness” is an example of an Even Over statement that might help you choose what to eat.</p>
<p>“Durability even over style” is an Even Over statement that might help you shop at Ikea.</p>
<p>Both of these Even Over statements pass the <strong>truism test</strong>. Lots of folks choose their furniture based on style, not durability (and pay more for it!); even more folks choose healthiness over tastiness.</p>
<p>Some general design principles that are formatted as Even Over statements:</p>
<ul>
<li>Accessibility even over aesthetics</li>
<li>Platform conventions even over cross-platform consistency</li>
<li>User preference even over business preference</li>
</ul>
<p>As we continue to refine our principles at WSJ, I hope to use Even Over statements, along with the criteria above, as tools to quickly get to a working foundation.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>The reversibility test has been shared and adapted by many folks, so credit goes to <a href="https://twitter.com/Cennydd/status/809553086322737152" target="_blank" rel="noopener">Jared Spool, Cennydd Bowles, and Jeremy Keith</a>. <a href="https://matthewstrom.com/writing/principles/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Jordan Husney recently wrote <a href="https://focus.parabol.co/strategic-prioritization-using-even-over-statements-fb63e78e7b4d" target="_blank" rel="noopener">an excellent blog post</a> about using Even Over statements to prioritize product work. <a href="https://matthewstrom.com/writing/principles/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
How to get the best design feedback from your team
2017-04-13T00:00:00Z
https://matthewstrom.com/writing/feedback-revisited/
<p>In 2015, I wrote out my <a href="https://planetary.io/blog/towards-better-creative-feedback" target="_blank" rel="noopener">thoughts on creative feedback</a>. Here’s that article in list format:</p>
<ol>
<li>Feedback should be concise</li>
<li>Feedback should be action-oriented</li>
<li>Feedback should have a consistent format</li>
</ol>
<p>At the time, the Planetary design team was growing. We were grappling with one of the challenges every design team faces: how do we get good feedback?</p>
<p>Two years on, I’ve revisited that article many times, each time appending and amending my own mental notes. Looking ahead to even more growth, it’s the right time to do a proper update.</p>
<p>Let’s look at the original theses.</p>
<h2 id="1.-feedback-should-be-concise">1. Feedback should be concise</h2>
<p>Do I still think feedback should be concise? <strong>Yes</strong>.</p>
<p>Concise feedback is the key to making small, quick iterations. The faster the turnaround on design feedback, the more velocity the design team has.</p>
<h2 id="2.-feedback-should-be-action-oriented">2. Feedback should be action-oriented</h2>
<p>Do I still think feedback should be action-oriented? <strong>No</strong>.</p>
<p>It’s good to give actionable feedback, but it’s easy to over-emphasize the outcome. Prescriptive feedback sets unrealistic expectations, and is very frustrating to receive.</p>
<h2 id="3.-feedback-should-have-a-consistent-format">3. Feedback should have a consistent format</h2>
<p>Do I still think feedback should have a consistent format? <strong>Yes</strong>.</p>
<p>Consistent formatting means less ambiguity. It makes feedback easier to give, and it makes feedback easier to process.</p>
<p>However, The format I described was a bit <em>too</em> consistent, and created a steep learning curve. More feedback is always better, and a good format should encourage participation.</p>
<h2 id="formatting-feedback%3A-it%E2%80%99s-all-about-the-process">Formatting feedback: it’s all about the process</h2>
<p>My original framework for design feedback used a narrowly-defined template. In practice, such a specific and consistent format proved very unwieldy.</p>
<p>A person giving feedback is dealing with a lot of pressure, and the way they give feedback can change dynamically. What is their experience? How much sleep did they had last night? What did they eat for breakfast? Did they eat breakfast at all?</p>
<p>Asking someone to avoid words that come naturally to them discourages feedback. Giving someone a vocabulary bank means there’s less room for new ideas. All in all, <strong>imposing restrictions on language prevents fair participation</strong>.</p>
<p>Instead of standardizing our feedback <em>language</em>, the Planetary design team standardized our feedback <em>process</em>. It has four parts:</p>
<ol>
<li><strong>Check in,</strong></li>
<li><strong>Ask questions,</strong></li>
<li><strong>Share reactions,</strong></li>
<li><strong>Capture and share feedback.</strong></li>
</ol>
<h3 id="a-note-on-timeboxing-and-bikeshedding">A note on timeboxing and bikeshedding</h3>
<p><strong>Timeboxing</strong> is a powerful tool in the feedback process. Timeboxing means “setting aside a fixed amount of time.” It eliminates the greatest threat to good feedback: bikeshedding. Also, it sounds cool.</p>
<p><strong>Bikeshedding</strong> is the enemy of good feedback. It’s a reference to <a href="https://css-tricks.com/what-is-bikeshedding/" target="_blank" rel="noopener">Parkinson’s Law of Triviality</a><sup class="footnote-ref"><a href="https://matthewstrom.com/writing/feedback-revisited/#fn1" id="fnref1">1</a></sup>. In short, bikeshedding is spending time discussing (usually, arguing about) minor issues. Bikeshedding saps momentum and distracts from deeper issues.</p>
<p>By timeboxing feedback sessions, we’ve been able to set the team’s expectations for how deep to dive. With practice, and a careful eye for bikeshedding, we can capture meaningful feedback from the whole team in 15 minutes.</p>
<h2 id="preparation">Preparation</h2>
<p>While it’s sometimes useful to ask for spontaneous and immediate feedback, it’s also important to do some preparation if you can.</p>
<p>Before you ask your team for feedback, make sure you give the feedback-givers time to prepare. Ask for participation from key stakeholders. Schedule feedback sessions in advance, giving everyone time to review the material. Provide context, and make sure your team knows what you expect from them.</p>
<p>At Planetary, we have a standard template that we use for design reviews. It helps us paste in links to the design, questions for the reviewers, and any necessary context.</p>
<h2 id="step-one%3A-check-in">Step one: check in</h2>
<p>Empathy is like a superpower. If you understand how someone is feeling, you stand a much better chance of understanding their feedback. To give everyone a chance to understand your state of mind, <strong>check in</strong> before you gather or give feedback.</p>
<p>Here’s how we check in: each person, in turn, states anything that is influencing their mindset. This can be “I’m really hungry,” to “I’m distracted by an email I just got,” to “I’m excited about showing you our progress.” It’s also ok to say “no distractions.”</p>
<p>We usually check in popcorn-style, with each person calling out the next.</p>
<h2 id="step-two%3A-ask-questions">Step two: ask questions</h2>
<p>A common roadblock in the feedback process is a lack of information. It’s tough to give good feedback if you don’t have a good handle on what you’re looking at: how did the design come to be? Why is it blue? What does ‘lorem ipsum’ mean?</p>
<p>It’s important for the person asking for feedback to provide context up-front<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/feedback-revisited/#fn2" id="fnref2">2</a></sup>. But it’s also good to give the feedback-givers a chance to <strong>ask questions</strong>. This way, the team shares responsibility for gathering information. By asking questions, the team helps each other understand what’s in front of them.</p>
<p>Here’s how we ask questions: each person, in turn, asks as many questions as they’d like. The person requesting feedback gets a chance to respond, and then it’s on to the next person. We minimize back-and-forth, and put the kibosh on cross talk.</p>
<h3 id="a-note-on-sneaky-feedback">A note on sneaky feedback</h3>
<p>It’s tempting to try and sneak feedback into a question. For example, “Why didn’t you use Helvetica?” instead of “Why did you choose that font?” Take a second to think through your motivation in asking it: are you interested in the answer? With practice, you can keep your questions focused on clarifying and understanding.</p>
<h2 id="step-three%3A-share-reactions">Step three: share reactions</h2>
<p>Next, it’s time to gather feedback. This is where things get complicated, where empathy and transparency can make or break the process.</p>
<p>If you’re giving feedback, think about your feedback as a <strong>reaction</strong>. In short, a reaction is a personal response. It usually contains the words “I,” “me,” or “my.” It’s usually based on an impression or subjective interpretation. A reaction is easiest to define by way of example:</p>
<p><strong>A reaction</strong>: This layout feels really cramped to me.<br />
<strong>Not a reaction</strong>: Add more whitespace.</p>
<p>Focusing on subjective feedback is good because … well, almost all feedback is subjective. Even feedback that seems objective — “these two blues don’t match” — comes with some assumptions that probably weren’t discussed beforehand — that the blues are supposed to match.</p>
<p>Not only is objective feedback rare, it also is less valuable. Any group of people has a wealth of experience, expertise, and viewpoints. Getting subjective reactions to your work delivers much more information than if the same group made objective observations.</p>
<p>Thinking of feedback as a reaction also opens the door to feedback like, “I really like this.” This is a great reaction, both to give and to receive.</p>
<h2 id="step-three-and-a-half%3A-say-thank-you-%F0%9F%99%8F">Step three and a half: say thank you 🙏</h2>
<p>“Thank you for that feedback” is the best way to respond to any feedback, positive or negative. It keeps the conversation going, avoids conflict, and builds gratitude and empathy.</p>
<h3 id="a-note-on-feelings">A note on feelings</h3>
<p>I used to have a hard time hearing feedback based on feelings. In my previous essay on feedback, I went as far to ban the word “feels” from the feedback lexicon. This was a big mistake.</p>
<p>Feelings are the most easily-accessed source of feedback. A gut reaction — a very strong, immediate type of feeling — is a great thing to share<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/feedback-revisited/#fn3" id="fnref3">3</a></sup>.</p>
<h2 id="step-four%3A-capture-and-share-feedback">Step four: capture and share feedback</h2>
<p>While it’s the last step in the process (and the easiest), capturing and sharing feedback is crucial. Without a record, most feedback gets lost, mis-translated, or worse: ignored.</p>
<p>You can <strong>capture feedback</strong> in any number of ways. Record a video or phone call, write notes in a notebook or google doc, annotate an image on InVision, or run the feedback process in Slack. Capturing feedback makes it easier to recall later, even if you don’t refer to the notes later.</p>
<p><strong>Sharing feedback</strong> is all about keeping expectations and understanding consistent. Keep your notes or recordings in a public place (one that your teammates have access to), and everybody benefits. This also fights the Fear Of Missing Out; If I can’t be present during a feedback session, I can always catch up later.</p>
<h2 id="conclusion%3A-practice-makes-perfect">Conclusion: practice makes perfect</h2>
<p>The feedback process is a design tool, like Sketch or Micron pens. The best part about the feedback process is that it is, by nature, a team activity. Anyone can take part, and everyone benefits.</p>
<p>Like any tool, the feedback process gets better with practice. At Planetary, we’ve been running short feedback cycles for 6 months or so, and we’re still working to improve (this article is part of that work).</p>
<p>Overall, shifting focus away from the <em>language</em> of feedback and towards the <em>process</em> of feedback has allowed us to be more inclusive, work faster, and design better.</p>
<p>I hope you adapt this process to gather your own design feedback, and share what you learn.</p>
<h3 id="special-thanks">Special Thanks</h3>
<p>A lot of this process was shaped by my work with friends and colleagues at <a href="http://theready.com/" target="_blank" rel="noopener">The Ready,</a> <a href="http://aug.co/" target="_blank" rel="noopener">August</a>, <a href="http://www.themedian.co/" target="_blank" rel="noopener">Median</a>, and <a href="https://www.parabol.co/" target="_blank" rel="noopener">Parabol</a>. Each of those companies works hard to improve the way companies work, and I’ve learned a lot from them.</p>
<p>Additionally, this essay benefited greatly from the feedback of <a href="https://medium.com/@endtwist" target="_blank" rel="noopener">Joshua</a>, <a href="https://medium.com/@joshpetersel" target="_blank" rel="noopener">Josh</a>, Vince, and <a href="https://medium.com/@summerdove" target="_blank" rel="noopener">Keni</a>. Thanks!</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>As with most good metaphors, this one involves a nuclear power plant. <a href="https://matthewstrom.com/writing/feedback-revisited/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>See the section on preparation. <a href="https://matthewstrom.com/writing/feedback-revisited/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Gut reactions should be clearly communicated as such, as they are good things to revisit from time to time. <a href="https://matthewstrom.com/writing/feedback-revisited/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Making WSJ.com more accessible
2016-08-03T00:00:00Z
https://matthewstrom.com/writing/wsj-accessibility/
<p>As I write this, the WSJ.com team is launching a brand new homepage experience for small screens.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/wsj-accessibility/#fn1" id="fnref1">1</a></sup> It’s one of our biggest subscription-drivers, a page that hundreds of thousands of people see every day. The new experience builds on the award-winning design of the WSJ iOS and Android apps. It’s curated specifically for mobile reading by an amazing editorial team.</p>
<p>It’s also our first step towards making WSJ.com more accessible to all of our users.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/accessibility-2.jpg" alt="The WSJ.com mobile homepage before and after the re-design" /><figcaption>The WSJ.com mobile homepage before and after the re-design</figcaption></figure>
<p>For many products — especially media platforms — accessibility is a bullet point on a QA checklist. I want to set a much higher bar for our products. Over the past 6 months, I’ve collaborated closely with designers, product managers, engineers, and journalists to focus on <strong>leading the media industry in accessibility standards.</strong> The new mobile homepage is proof of our team’s dedication to that mission.</p>
<p>As we continue our pursuit of accessibility across all of WSJ.com, I’d like to share the work we’ve done to get here.</p>
<h2 id="defining-accessibility">Defining accessibility</h2>
<p>Last November, I set out to write accessibility guidelines for the WSJ.com team. I wanted to tackle the hardest question first: what does accessibility mean? After lots of writing and editing, I had the following:</p>
<div style="background: rgba(255, 255, 0, 0.1); padding: 0.5em 1em; margin-bottom: 1em">
<h3 id="what-is-accessibility%3F">What is accessibility?</h3>
<p><strong>Accessibility</strong> is the word we use when describing a broad set of guidelines and principles that make our products <em>easy to use.</em></p>
<h3 id="why-is-accessibility-important%3F">Why is accessibility important?</h3>
<p>Many of our members have visual, hearing, motor, or cognitive disabilities. It is our goal to provide the same value to them as any other member.</p>
<p>However, <strong>accessibility is for everybody.</strong> Here are some examples of <em>situational</em> disabilities:</p>
<ul>
<li>Visual: Reading a story outside in bright sunlight that makes it difficult to read small text</li>
<li>Hearing: Watching a video in a loud place that makes it difficult to hear audio</li>
<li>Motor: Wearing winter gloves that make it difficult to use a touchscreen accurately</li>
<li>Cognitive: Listening to a podcast while cooking, making it difficult to pay attention</li>
</ul>
<p>By adhering to and maintaining these principles and guidelines, we can make our products better for all our users.</p>
</div>
<p>Defining accessibility this way helps us understand just how vital it is to our products. You can read a public version of our guidelines <a href="https://matthewstrom.com/pages/wsj-accessibility-guidelines" target="_blank" rel="noopener">here</a>.</p>
<h2 id="partnering-with-engineering">Partnering with engineering</h2>
<p>Designing for accessibility is only one part of the process. <em>Building accessible products</em> requires a close collaboration between engineers and designers.</p>
<p>For example, many of our users navigate the site without a mouse. Instead, they use a keyboard, joystick, or sip and puff technology. To these users, <strong>focus states</strong> are vital — imagine using a mouse without an onscreen pointer! Our designers specified meaningful focus states for all elements (not just buttons), and engineering ensured focus states are always present<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/wsj-accessibility/#fn2" id="fnref2">2</a></sup>. During the build and QA phases, automated tests make sure we didn’t miss anything. Close collaboration allows us to build things the right way.</p>
<h2 id="advocating-for-accessibility">Advocating for accessibility</h2>
<p>In addition to pursuing collaboration with engineering, it’s important to communicate the importance of accessibility to your stakeholders. These stakeholders can be leaders inside your company, groups of users, or valuable contributors outside the organization.</p>
<p>On the WSJ design team, we use <a href="https://matthewstrom.com/writing/principles.html" target="_blank" rel="noopener">design principles</a> to communicate our values. At the time I’m writing this, two of our six principles address accessibility:</p>
<blockquote>
<p><strong>Enable Users</strong><br />
Everything that we design should enable users to access, connect with, and contribute to the content produced by The Wall Street Journal.</p>
</blockquote>
<blockquote>
<p><strong>Design for Everybody</strong><br />
Apply accessibility and inclusivity principles at every step of the process. Design not only for the users we have today, but for the users we want to have in the future.</p>
</blockquote>
<p>By publishing and sharing these principles, we help others see the value of accessibility in the same way we do.</p>
<h2 id="the-result">The result</h2>
<p>Our work has paid off. The previous mobile homepage scored an embarrassing 39 points on Google’s Lighthouse accessibility audit.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/accessibility-3.png" alt="Google Lighthouse accessibility audit on May 20th, 2018" /><figcaption>Google Lighthouse accessibility audit on May 20th, 2018</figcaption></figure>
<p>At this moment, our new mobile homepage is at an <strong>82</strong> 🎉 <sup class="footnote-ref"><a href="https://matthewstrom.com/writing/wsj-accessibility/#fn3" id="fnref3">3</a></sup></p>
<figure data-type="image"><img src="https://matthewstrom.com/images/accessibility-4.png" alt="Google Lighthouse accessibility audit on June 3rd, 2018" /><figcaption>Google Lighthouse accessibility audit on June 3rd, 2018</figcaption></figure>
<p>We still have some work to do on this page to push the score even higher. Getting a score of 100 isn’t our goal, however, and we’ll never be able to ace every metric of accessibility. Instead, as we continue on to other parts of WSJ.com, I’m keeping a simpler mission in mind: make our products easy to use for everybody.</p>
<h4 id="acknowledgements">Acknowledgements</h4>
<p>Everything we do at The Wall Street Journal is a collaboration. I want to give a special thanks to Ryan Yun, who really made accessibility a priority in building this page. Many more people contributed, and continue to contribute, to this project and many others:</p>
<ul>
<li>Delia, product manager for WSJ.com’s core curation products</li>
<li>Our WSJ.com frontend team - Vishaal, Morgan, Vasudha, Adam, Christian, Surya, Doug, and Tania</li>
<li>The mobile team, including Jason, Mike, Janit, Amit, and Jordan.</li>
<li>Our editorial partners - Jenn, Lydia, and Meg</li>
<li>My design leadership peers, Bonnie, Thomas, and Fernando</li>
<li>The SEO and Revenue team - Rich, Chris, Gio, Johnny, Lee, Bhupendra, Marcin, Dominique, Anna, and Marish</li>
<li>Our product leadership, Katharine, Rajiv, and Che</li>
</ul>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Update: we’re live! Visit <a href="https://wsj.com/" target="_blank" rel="noopener">https://wsj.com</a> on your phone to see the result of our hard work. <a href="https://matthewstrom.com/writing/wsj-accessibility/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>My advice is to simply leave default focus states intact as much as possible. <a href="https://a11yproject.com/posts/never-remove-css-outlines/" target="_blank" rel="noopener">Here’s some more advice</a> from the a11y project. <a href="https://matthewstrom.com/writing/wsj-accessibility/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>With a product as dynamic as WSJ.com, our accessibility scores fluctuate constantly. One of the biggest challenges we face is maintaining a high standard, regardless of our ever-evolving editorial and advertising strategies. <a href="https://matthewstrom.com/writing/wsj-accessibility/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Design better data tables
2016-08-03T00:00:00Z
https://matthewstrom.com/writing/tables/
<p><strong>Poor tables.</strong> Where did they go wrong?</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tables-0.png" alt="Table tetris" /><figcaption>Table tetris</figcaption></figure>
<p>After being the bread and butter of the web for most of its early history, tables were cast aside by many designers for newer, trendier layouts. But while they might be making fewer appearances on the web these days, data tables still collect and organize much of the information we interact with on a day-to-day basis.</p>
<p>For instance, there’s what I consider to be the mother of all tables: The United States’ “Harmonized Tariff Schedule,” a table that stretches over 3,550 pages and lists every single good that can be imported into the US, including such thrilling entries as “Men’s or boys’ overcoats, carcoats, capes, cloaks, anoraks (including ski-jackets), windbreakers and similar articles (including padded, sleeveless jackets).”</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tables-1.png" alt="What is a carcoat, anyway?" /><figcaption>What is a carcoat, anyway?</figcaption></figure>
<p>The ire raised by data tables is due, no doubt, to just how awful they can look when they’re not well designed. The design of a table is its linchpin: if it’s done right, it makes complex data easy to scan and compare. If it’s done wrong, it can render information completelyincomprehensible.</p>
<p>So let’s do it right, right?</p>
<h2 id="know-your-numerals">Know your numerals</h2>
<p>Not all numbers were created equal. I’m not talking about π and ∞ (though I often do, at parties); I’m talking about numbers that are either <em>tabular</em> or <em>oldstyle</em>, either <em>lining</em> or <em>proportional</em>.</p>
<p>Here’s a quick illustration of the difference between <em>oldstyle</em> and <em>lining</em> figures.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tables-2.png" alt="Oldstyle vs. lining figures" /><figcaption>Oldstyle vs. lining figures</figcaption></figure>
<p>Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining figures are more uniform, and reinforce the grid-like structure of the table.</p>
<p>The difference between <em>proportional</em> and <em>tabular</em> figures is not quite so obvious:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tables-3.png" alt="Proportional vs. tabular figures" /><figcaption>Proportional vs. tabular figures</figcaption></figure>
<p>Proportional figures are designed to match the color — that is, the general sizing and spacing — of the typeface. Tabular figures, on the other hand, are all identically-sized, so that columns of numbers line up properly. While the difference may not seem great on the scale of one or two lines, using tabular figures makes scanning large tables significantly easier and less error-prone.</p>
<h3 id="a-technical-note-on-using-tabular-lining-figures">A technical note on using tabular lining figures</h3>
<p>When designing, you’ll need to do a bit of work to ensure the numerals you’re using are the correct ones (tabular lining figures aren’t typically the default). Adobe Products have an “opentype” panel that can be used to set the figures properly, and CSS provides a <a href="https://css-tricks.com/almanac/properties/f/font-feature-settings/" target="_blank" rel="noopener">slightly-cryptic syntax </a>for enabling this feature. Beyond that, some basic googling should lead you down the right path.</p>
<p>But now for the bad news: not all typefaces have true tabular lining figures available. The <a href="https://www.myfonts.com/fonts/fontfont/ff-meta/" target="_blank" rel="noopener">ones that do tend to be pretty expensive</a>. There are a few exceptions: The excellent <a href="https://fonts.google.com/specimen/Work+Sans" target="_blank" rel="noopener">Work Sans</a> is a free typeface that has true tabular lining figures.</p>
<p>If you can’t find a suitable typeface that has tabular lining figures, a good fallback is monospace fonts— while they tend to have a more “source code” look, they’ll always be well-suited to displaying numbers in tables. Additionally, the new Apple system default typeface San Francisco has excellent tabular lining figures and looks great at small sizes.</p>
<h2 id="alignment-matters">Alignment Matters</h2>
<p>3½ simple rules to follow:</p>
<p><strong>1. Numerical data is right-aligned</strong><br />
<strong>2. Textual data is left-aligned</strong><br />
<strong>3. Headers are aligned with their data</strong><br />
<strong>3½. Don’t use center alignment.</strong></p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tables-4.png" alt="List of U.S. states by historical population — Wikipedia" /><figcaption>List of U.S. states by historical population — Wikipedia</figcaption></figure>
<p>Numerical data is read right-to-left; that is, we compare numbers by first looking at their ones digit, then their tens, then their hundreds, and so on. This is also how most people learn arithmetic — start on the right and move left, carrying digits as you go.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/tables/#fn1" id="fnref1">1</a></sup> Therefore, tables should keep numerical data right-aligned.</p>
<p>Textual data is read (in English) from left-to-right. Comparing textual elements is typically done by sorting into alphabetical order: if two entries start with the same letter, the second letter is used, and so on. Trying to quickly scan text can be infuriating if it’s not left-aligned.</p>
<p>Headers, generally, should carry whatever alignment their data has.This keeps the vertical lines of the table clean, and provides consistency and context.</p>
<p>Center alignment causes the lines of the table to become “ragged,” which makes it much harder to scan entries, often necessitating extra dividers and graphical elements.</p>
<h3 id="consistent-significant-figures-%3D-better-alignment">Consistent Significant Figures = Better alignment</h3>
<p>One easy way to keep your tables properly aligned is to keep the same number of significant figures — usually the number of digits after the decimal — consistent within each column. Significant figures is a whole rabbit hole ofa topic, so I’ll keep my advice here brief: the fewer sig figs you can get by with, the better.</p>
<h2 id="fewer%2C-clearer-labels">Fewer, Clearer Labels</h2>
<p>Providing labels to accompany your data is crucial. These pieces of accompanying context allow a data table to be read by a wider audience, in a broader set of circumstances.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tables-5.png" alt="Mississippi River Flood Stage Forecast - NOAA" /><figcaption>Mississippi River Flood Stage Forecast - NOAA</figcaption></figure>
<h3 id="title">Title</h3>
<p>It might sound like conventional wisdom, but giving your data table a clear and succinct title is as important as any other design decision you make. With a good title, tables are portable: they can be used in a number of different contexts, as well as cited from external sources.</p>
<h3 id="units">Units</h3>
<p>The most common label used in tables is the unit of measurement for the data; often, it’s repeated along with every single data point. Instead of repeating the label, only include it with the first data point in each column.</p>
<h3 id="headers">Headers</h3>
<p>Keep headers as short as possible; the design of the data table should be focused around the data itself, and long header labels can occupy a lot of visual space.</p>
<h2 id="as-little-ink-as-possible">As little ink as possible</h2>
<p>When deciding how to style the graphic elements of a table, the goal should always be to reduce the table’s footprint without losing structural fidelity.One of the ways you can accomplish this is by using as little “ink” as possible — that is, whenever possible, choose not to style an element.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tables-6.png" alt="2016 National League Batting Statistics - BaseballReference" /><figcaption>2016 National League Batting Statistics - BaseballReference</figcaption></figure>
<h3 id="rules">Rules</h3>
<p>If you’ve properly aligned the data points in your table, rules become redundant. The primary benefit they provide is in allowing you to reduce the space between elements, while still being able to differentiate between elements. Even when used, rules should be extremely light to not interfere with quick scanning.</p>
<p>Horizontal rules are the most useful, as they allow you to significantly reduce the vertical space occupied by long tables, making faster work of comparing lots of values or seeing trends over time.</p>
<p>One unsubstantiated opinion I have about rules is that <strong>zebra striping is bad</strong>. Really, really bad.Take it or leave it.</p>
<h3 id="backgrounds">Backgrounds</h3>
<p>Backgrounds are most useful when indicating differences in the domain of data: switching between single values and sums or averages, for example. Highlighting values, providing additional context to data, or indicating changes in values from previous periods can be done without backgrounds, using graphical elements like ✻, † (one of my faves), or ▵.</p>
<p>Additionally, tables should be monochromatic. Using colors to provide organizational context or added meaning increases the likelihood of misinterpretation or error, and causes usability problems for those with impaired vision.</p>
<h2 id="in-conclusion">In conclusion</h2>
<p>Tables might be <a href="https://medium.com/mission-log/well-designed-interfaces-look-boring-568faa4559e0#.e6301amez" target="_blank" rel="noopener">boring</a>, but they are such a major element of any data-rich document that they’re worth every ounce of design thinking we can apply to them. By designing more efficient, clearer, and easier-to-use tables, you can vastly improve the often-painful experience of analyzing and understanding large sets of data.</p>
<h3 id="further-reading-%26-inspiration">Further Reading & Inspiration</h3>
<p><a href="http://fivethirtyeight.com/features/the-rise-and-rise-of-nneka-ogwumike/" target="_blank" rel="noopener">FiveThirtyEight</a> has always been a great source of inspiration— they set their numerical data in a typeface called <a href="https://www.myfonts.com/fonts/tipografiaramis/decima-mono/" target="_blank" rel="noopener">Decima Mono</a>, which is specifically designed to fit lots of data in a small space.</p>
<p><a href="http://practicaltypography.com/" target="_blank" rel="noopener">Butterick’s Practical Typography</a> is my go-to for all things typographical, and the kind of reference you keep multiple copies of — it’s so practical!</p>
<p>Lastly, no article on data design would be complete without an <a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00041I" target="_blank" rel="noopener">Edward Tufte</a> shoutout. His insightful writing on design is indispensable.</p>
<hr />
<p>Special thanks to <a href="https://medium.com/u/40a07ef54f77" target="_blank" rel="noopener">kontur</a>, <a href="https://medium.com/u/98d7858573d" target="_blank" rel="noopener">Nathan D Huening</a>, <a href="https://medium.com/u/aae529a3f8b0" target="_blank" rel="noopener">Robin Rendle</a>, <a href="https://medium.com/u/ed2d267a9408" target="_blank" rel="noopener">Scott Dawson</a>, <a href="https://medium.com/u/529ce6387b3b" target="_blank" rel="noopener">Karen Bachmann</a>, and <a href="https://medium.com/u/4e07ae4204f0" target="_blank" rel="noopener">Kelly Jepsen</a> for catching errors in this story.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>For other interesting approaches to arithmetic, check out how Japanese children use a <a href="https://www.youtube.com/watch?v=Px_hvzYS3_Y" target="_blank" rel="noopener">Soroban</a> or how <a href="https://www.khanacademy.org/math/arithmetic/multiplication-division/lattice-multiplication/v/lattice-multiplication" target="_blank" rel="noopener">lattice multiplication</a> works. <a href="https://matthewstrom.com/writing/tables/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Datum ipsum
2016-07-27T00:00:00Z
https://matthewstrom.com/writing/datum-ipsum/
<p><em>tl;dr — I’ve created a tool called <a href="http://datumipsum.com/" target="_blank" rel="noopener">Datum Ipsum</a> to enable designers to use realistic data when mocking up data visualizations. Also, this is a written version of a talk I gave at Data Viz Camp 2016 in NYC. The slides for that talk are <a href="https://slides.com/matthewstrom/datumipsum" target="_blank" rel="noopener">here</a>.</em></p>
<p><strong>In my career as a designer</strong>, both at <a href="http://planetary.io/" target="_blank" rel="noopener">Planetary</a> and in my freelance work, I’ve constantly struggled with designing real-time data visualizations. You know the kind: dashboards, analytics, reporting tools — anything that displays data on an ongoing basis. Designers at publications like the <a href="http://www.nytimes.com/section/upshot" target="_blank" rel="noopener">New York Times</a>, <a href="http://www.theguardian.com/society/ng-interactive/2016/may/25/opioid-epidemic-overdose-deaths-map" target="_blank" rel="noopener">Guardian</a>, <a href="http://graphics.wsj.com/3d-nasdaq/" target="_blank" rel="noopener">Wall Street Journal</a>, and <a href="http://blogs.ft.com/ftdata/2016/07/24/tour-de-france-2016-froome-sky-dominate-mountains-cavendish-sprinting-supremacy/" target="_blank" rel="noopener">Financial Times</a><em>(paywall)</em> have been pushing the envelope of design in data-first journalism and reporting, but applying the same principals to dynamic data sets is challenging. Though these visualizations are incredibly valuable to the people who rely on them every day, they’re some of the trickiest to get right.</p>
<p>My hunch is that no amount of aesthetic theory or design experience matters if a designer doesn’t understand the data. The real problem, then, is that …</p>
<h3 id="real-data-is-hard-to-understand.">Real data is hard to understand.</h3>
<p>This fact has a lot to do with the lack of overlap between design and statistics — designers are often the ones who avoided taking statistics class and opted instead to spend their time in studios and darkrooms. But even a background in statistics can’t change the reality that humans simply struggle with data. A few reasons for this:</p>
<h4 id="real-data-isn%E2%80%99t-intuitive">Real data isn’t intuitive</h4>
<p>Our brains are really good at finding patterns. It’s one of the things that makes design so rewarding — looking at orderly shapes and patterns feels good. So when we look at data, we look for and often find patterns, even if those patterns are misleading or downright wrong.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-1.png" alt="Sprurious correlations are all too easy to find." /><figcaption>Sprurious correlations are all too easy to find.</figcaption></figure>
<p>In addition to finding meaning where there is none, the patterns that <em>are</em> meaningful are often incomprehensible. Take the <a href="https://en.wikipedia.org/wiki/Birthday_problem" target="_blank" rel="noopener">Birthday Problem</a>, for example: in a group of people, what are the odds that two have the same birthday? For a group of 367 people, we can assume that there’s a 100% chance that two have the same birthday. What are the odds with a group of 70 people?</p>
<p>The surprising answer is <strong>99.9%</strong>. Beyond that, for 23 people, there’s a 50/50 chance that two share a birthday. There’s certainly a pattern here, but it’s impossible to discern without analysis.</p>
<h4 id="real-data-is-hard-to-fake">Real data is hard to fake</h4>
<p>Try as we might, trying to fake data is a lost cause. One illustration of this is called the <a href="https://en.wikipedia.org/wiki/Gambler's_fallacy" target="_blank" rel="noopener">Gambler’s Fallacy</a>, and it’s easiest to illustrate with a <a href="http://codepen.io/ilikescience/full/xOAQBo/" target="_blank" rel="noopener">demo</a>. We’re going to flip 20 coins (virtually); but before we do, enter in what you think the outcome will be — select either “Heads” or “Tails” in each row on the left, then click “flip!” to see how you fare.</p>
<p>What you’ll (probably) see is that your guess on the left alternates from heads to tails often, with few streaks, but the result on the right has streaks. Your guess likely has close to 10 heads and 10 tails, but rarely does the actual result come up an even 10 and 10. These differences are attributable to our assumptions about probability (that a coin flip has a 50/50 outcome) being applied to a larger problem (20 actual coin flips).</p>
<p>There’s even a simple statistical property (called <a href="https://en.wikipedia.org/wiki/Benford's_law" target="_blank" rel="noopener">Benford’s Law</a>) that can be used to identify faked data sets. In short, in any large enough data set, patterns emerge in the first digits of each data point: more numbers will start with the digit “1” than any other number. This pattern is so pervasive and counterintuitive that it is often used to prove — in court — that data has been falsified.</p>
<h4 id="real-data-is-unpredictable">Real data is unpredictable</h4>
<p>Part of what makes data so tricky to work with is that our assumptions about the shape, domain, resolution, and volatility of a set of data are only just that: assumptions.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-2.png" alt="This type of result would have never shown up in a mockup." /><figcaption>This type of result would have never shown up in a mockup.</figcaption></figure>
<p>Even with the most reliable sets of data — say, an atomic clock — there’s always the possibility of error states or the occasional act of god. These one-in-a-million events are when great data visualization really shines: instead of breaking down in the face of anomaly, they highlight the rarity of the situation and respond appropriately.</p>
<p>But when we’re designing visualizations, how can we predict the unpredictable? It’s almost like something out of a <a href="https://en.wikipedia.org/wiki/The_Library_of_Babel" target="_blank" rel="noopener">Borges story</a>; outliers aren’t really outliers if we’re expecting them.</p>
<h3 id="why-not-design-with-real-data%3F">Why not design with real data?</h3>
<p>Real data sets of all shapes and sizes are easy to come by if you know where to look. There’s a slew of <a href="http://github.com/datasets" target="_blank" rel="noopener">large, well-formatted data sets on GitHub</a>, collected and maintained by the (excellently-named) <a href="https://okfn.org/" target="_blank" rel="noopener">Open Knowledge</a> group. From financial data to global temperature indexes, these data sets can easily provide a reality check for your designs.</p>
<p>Unfortunately, my experience working with historical data sets fails to overcome some of the fundamental challenges of designing robust visualizations. Here’s why:</p>
<ol>
<li><strong>It’s too hard to fine-tune.</strong> The time series of S&P 500 financials over the past 100 years probably isn’t going to fit your visualization domain and fidelity right out of the box. The benefit of having lots of data to work with becomes a curse when you’re trying to normalize lots of values.</li>
<li><strong>It’s too easy to pick and choose.</strong> I find myself discarding data when it doesn’t come out quite like I expect it to. Instead of taking the harder route of improving the visualization to handle the data at hand, I’ll just select “better” data.</li>
</ol>
<h3 id="let%E2%80%99s-use-placeholder-data-instead.">Let’s use placeholder data instead.</h3>
<p>Placeholder data is a lot like placeholder text. It’s a design tool meant to ensure the final product — in our case, a real-time data visualization — matches our mockups. It’s useful in all the same ways placeholder text is useful:</p>
<ol>
<li>Placeholder data allows a designer to test her assumptions about the product.</li>
<li>Placeholder data makes decision-making much easier by providing realistic constraints.</li>
<li>Placeholder data sets realistic expectations for clients and stakeholders.</li>
</ol>
<h4 id="what-does-placeholder-data-look-like%3F">What does placeholder data look like?</h4>
<p>Just as with placeholder text, we can achieve varying degrees of placeholder data realism by choosing our parameters very carefully. When mocking up a page layout, I can choose the classic placeholder text “lorem ipsum dolor sit amet …” to help pick the right typeface, leading, measure, etc. A placeholder data version of “lorem ipsum” might look just like random numbers, a sort of meaningless pattern that looks like real data if you aren’t looking too hard.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-3.png" alt="A graph of javascript’s Math.random() function" /><figcaption>A graph of javascript’s Math.random() function</figcaption></figure>
<p>I’ve often run into trouble using “lorem ipsum,” though, and you probably have, too: it is too obviously fake. Clients have questioned my sanity, when all their mockups look like they’ve been done in latin. And in making decisions with nonsense text, I sometimes run into problems down the line when the real text goes in.</p>
<p>Instead of using “lorem ipsum,” I’ve started to use real text from various sources. If the final text will be highly technical in nature, I can pull from scientific papers in the public domain. If it’s meant to be exciting, Jules Verne serves as a good placeholder. Choosing the qualities of my placeholder text helps me make better decisions, and sets better expectations with my clients.</p>
<p>How do we apply this concept to data? Can we create “flavored” placeholder data, without losing the benefit of randomness and unpredictability?</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-4.png" alt="A 2-dimensional graph of the Perlin Noise function" /><figcaption>A 2-dimensional graph of the Perlin Noise function</figcaption></figure>
<h3 id="perlin-noise-(or%2C-a-better-kind-of-random)">Perlin Noise (or, a better kind of random)</h3>
<p>In 1983, a computer scientist named <a href="https://en.wikipedia.org/wiki/Ken_Perlin" target="_blank" rel="noopener">Ken Perlin</a> was working on a very similar problem: how can a computer generate random images that don’t look like they were generated by a computer? While working on a movie titled <em><a href="https://en.wikipedia.org/wiki/Tron" target="_blank" rel="noopener">Tron</a></em> (the one without Daft Punk), Perlin developed an algorithm to draw textures that he could apply to the computer-generated images in the film to make them appear more realistic. And while the CGI in <em>Tron</em> looks laughably primitive compared to what we see in theaters today, at the time Perlin’s work was revolutionary. In 1997, he won an Academy Award for the algorithm, which by then was referred to as “Perlin Noise.” The award read:</p>
<blockquote>
<p>“The development of Perlin Noise has allowed computer graphics artists to better represent the complexity of natural phenomena in visual effects for the motion picture industry.”</p>
</blockquote>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-5.jpeg" alt="Perlin Noise" /><figcaption>Perlin Noise</figcaption></figure>
<p>This is an image of Perlin Noise. The technical description of the algorithm isn’t important for this post, so let’s just leave it at “random vector fields.”<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/datum-ipsum/#fn1" id="fnref1">1</a></sup></p>
<p>If we draw a line across this image, and track the color values as we go — “high” for white, “low” for black — we get a nice-looking smooth graph of the Perlin Noise field; its peaks and valleys are flattened out to a simple two-dimensional line.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-6.png" alt="A line-graph of perlin noise" /><figcaption>A line-graph of perlin noise</figcaption></figure>
<p>Drawing lines across the noise field is akin to taking a walk with a FitBit and watching the elevation change as you go; a short walk might only have a few elevation changes, while longer walks have many more ups and downs.</p>
<h3 id="putting-perlin-noise-into-practice">Putting Perlin Noise Into Practice</h3>
<p>One nice thing about this sort of data is that it can be added together to make more varied graphs. For instance, if we add up a few different walks across the noise field, we get a line that has short rises and falls, a plateau here and there, and the occasional rapid change.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-7.png" alt="Summing different walks across the perlin noise function" /><figcaption>Summing different walks across the perlin noise function</figcaption></figure>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-8.png" alt="The result of many walks looks much more interesting than a single walk" /><figcaption>The result of many walks looks much more interesting than a single walk</figcaption></figure>
<p>Additionally, adding these graphs of Perlin Noise together with very basic functions like sine waves can generate data that resembles real-world patterns. For instance, a graph of the daily active users of a website follows a cycle; during the daytime, there are lots of users on the site, and in the late evening and early morning there are typically not as many. Combing a cyclical wave (in this case, a sine wave) with one of our noise graphs gives us a very realistic simulation of a website’s traffic!</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-9.png" alt="Combining simple functions with perlin noise" /><figcaption>Combining simple functions with perlin noise</figcaption></figure>
<p>Combining graphs of simple functions with Perlin Noise has a nearly infinite number of possible permutations, making it an incredibly effective tool for mocking up real-time data visualizations. In practice, Planetary uses this method to test our software platforms, like this one, which visualizes the performance of a publication’s stories in near-real time:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/datum-10.png" alt="Note: for the sake of example, I’ve pulled headlines from The Daily Beast. All of the data is 100% fake." /><figcaption>Note: for the sake of example, I’ve pulled headlines from The Daily Beast. All of the data is 100% fake.</figcaption></figure>
<p>To make these noise functions accessible and easy to generate, I’ve created a tool called <a href="http://datumipsum.com/" target="_blank" rel="noopener">Datum Ipsum</a>. Just like you might use placeholder text to mock up websites and apps, my hope is that you’ll use realistic placeholder data when creating data visualizations.</p>
<p>By using realistic placeholder data, you can make your designs more robust and free from bias. In putting constraints on the source material you work from, you’ll be challenged to solve problems that typically arise only after real data is available. With tools like Datum Ipsum, you can create tools that handle the unpredictable, difficult-to-understand nature of data in real time.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>If you’d like to learn more about Perlin Noise and its uses, I’d highly recommend <a href="https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD" target="_blank" rel="noopener">Daniel Schiffman’s Youtube series on the subject</a>. <a href="https://matthewstrom.com/writing/datum-ipsum/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Tiny data visualizations
2016-02-08T00:00:00Z
https://matthewstrom.com/writing/tiny-data-viz/
<p><em>This is a direct translation of a talk I gave at the NYC D3.js meetup in January of 2016. If you’d like to see a video of the talk, you can check it out on <a href="https://www.youtube.com/watch?v=Gtlb8VIszrU" target="_blank" rel="noopener">YouTube</a></em>.</p>
<p>Have you seen <a href="http://www.nytimes.com/interactive/2016/01/28/upshot/donald-trump-twitter-insults.html" target="_blank" rel="noopener">this comprehensive list of Donald Trump’s insults</a>? Or maybe <a href="http://projects.fivethirtyeight.com/election-2016/primary-forecast/new-hampshire-republican/" target="_blank" rel="noopener">this detailed rundown of the 2016 Primaries</a>? Data is a big deal in the newsroom right now, and in 2016, we’ll likely see data take on an even bigger role in reporting feature stories.</p>
<p>The New York Times is just one example of an organization increasingly banking on data-driven reporting: in the Politics section of nytimes.com there is a blog called <a href="http://www.nytimes.com/upshot/" target="_blank" rel="noopener">The Upshot</a> that consistently uses analysis of detailed data sets to reveal surprising insights about news events on the front page. They typically include charts and diagrams to bolster their reporting: large, interactive explorations that are driving more and more traffic for the paper every day.</p>
<p>The Upshot, FiveThirtyEight and Buzzfeed, all of these publications are treating data visualization the same way that financial papers like the Wall Street Journal treat them: alongside the story, illustrating the story, but not integral to the story itself.</p>
<p>So what does data look like when it’s used as part of the story itself? How can we treat it as we treat verbs and nouns, integrated into, instead of apart from, the story?</p>
<h2 id="enter-sparklines">Enter Sparklines</h2>
<blockquote>
<p>A sparkline is a small intense, simple, word-sized graphic with typographic resolution. Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather sparkline graphics can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic. Data graphics should have the resolution of typography. – Edward Tufte, Beautiful Evidence, 46–63</p>
</blockquote>
<p>Edward Tufte describes sparklines in his book <em>Beautiful Evidence</em> as being word-sized graphics. “Typographic Resolution” is his key identifier of a sparkline, and he goes back to this distinction repeatedly without quite defining it. So what does “Typographic Resolution” mean?</p>
<p>Emojis are one example of word-sized graphics that we use every day: these pieces of design have typographic resolution, as they sit directly with the text to add meaning or change context. Emojis can turn “thanks 😀” into “thanks 😕”; a lot of meaning is imparted with a very small symbol.</p>
<h2 id="sparklines-in-practice">Sparklines in practice</h2>
<p>Let’s look at a data table that might benefit from sparklines.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tinydata-1.png" alt="A basic data table" /><figcaption>A basic data table</figcaption></figure>
<p>This is a typographic table: just numbers and letters, spelling out the top 10 index funds over the past 4 years. We can add a small chart to each line with the historic trends for that fund.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tinydata-2.png" alt="A basic data table with added sparklines" /><figcaption>A basic data table with added sparklines</figcaption></figure>
<p>This adds 120 more data points to each line, demonstrating the volatility of each fund, as well as demonstrating the forces of market cohesion and highlighting market-wide events.</p>
<p>In fact, we can make this chart far more compact by eliminating the numbers on the right, replacing milestones with historic trends. Some audiences might not need to quantify the specific returns of the funds, and for them, we can add data and reduce complexity.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tinydata-3.png" alt="A basic data table with columns replaced by sparklines" /><figcaption>A basic data table with columns replaced by sparklines</figcaption></figure>
<p>For the right audience, this compact display of data is just as easy to parse as the original. It might be argued that it’s easier, in fact: the lines resonate aesthetically with our natural instinct to find patterns, using multiple mental modes to add additional dimensions to the data.</p>
<h2 id="designing-charts-to-be-tiny">Designing Charts to be Tiny</h2>
<p>Simply taking normal-sized charts and sizing them down doesn’t accomplish the kind of efficiency of space we’re looking for with our new visualizations. In order to succeed, charts have to be designed with their size in mind.</p>
<p>That can look something like this:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tinydata-4.png" alt="A sparkline in practice" /><figcaption>A sparkline in practice</figcaption></figure>
<p>This is a proprietary platform that Planetary designed for The Daily Beast. It displays information about system-wide averages, local maximum and minimum, and current state into a small visualization that accompanies each report.</p>
<p>This approach also applies to paragraph-level charts. This is an example of how we might take a story about market performance and integrate charts into it:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tinydata-5.png" alt="Source: http://www.nytimes.com/2016/01/05/business/international/stocks-asia-markets-china.html" /><figcaption>Source: http://www.nytimes.com/2016/01/05/business/international/stocks-asia-markets-china.html</figcaption></figure>
<p>These charts are designed with tininess in mind. They don’t include text or axes. They use very few colors or patterns. They focus on one piece of information and don’t try to draw correlations or associations. This simplicity allows them to add value without adding noise.</p>
<h2 id="tools-to-make-tiny-charts">Tools to make tiny charts</h2>
<p>There are a number of tools available to designers and developers that make it easy to embed tiny charts into paragraphs of text:</p>
<p><strong>1. D3.js</strong></p>
<p>A developer named Tom Noda has written up a <a href="http://www.tnoda.com/blog/2013-12-19" target="_blank" rel="noopener">great tutorial for rendering small charts in D3</a>. He deftly addresses some of the technical challenges, such as smoothing and asynchronous datafetching.</p>
<p><strong>2. FF Chartwell</strong></p>
<p>While we don’t normally think of fonts as software, they are actually complex pieces of code, capable of really interesting applications.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/tinydata-6.png" alt="FF Chartwell" /><figcaption>FF Chartwell</figcaption></figure>
<p><a href="https://www.fontshop.com/families/ff-chartwell" target="_blank" rel="noopener">FF Chartwell</a>, a font originally published by FontFont, can parse numbers into a variety of different visualizations. It uses the inherent qualities of the text — color, style, and size — to style the charts and graphs. And because it’s a font, it can be embedded into web pages and rendered alongside other text; this takes advantage of the optimizations done by browsers when rendering text. It’s nothing short of black magic.</p>
<p><strong>In Conclusion</strong></p>
<p>We see the value of data visualization more and more each day, as large and interactive charts are published alongside stories in major publications. Newsrooms that explore the realm of word-sized charts, making data a central and essential component to stories, will stand apart; the next frontier of data is integration with the text of our stories.</p>
Mind the gap: designing graphs with missing data
2015-12-12T00:00:00Z
https://matthewstrom.com/writing/gap/
<p>Data-driven interfaces are on the rise. Financial District CEOs want to see a birds-eye view of their bottom line as much as Silicon Valley Co-founders want to watch their growth hackers hack. Each user has their own hopes and fears about data, but there’s one thing nobody wants to see: a blank space.</p>
<p>Unfortunately, errors happen. No database is perfect, and as designers and product owners, we have to prepare for the worst. So let’s look at a (real-world!) example from some recent work at <a href="http://planetary.io/" target="_blank" rel="noopener">Planetary</a>:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/gap-1.png" alt="A line graph with missing data" /><figcaption>A line graph with missing data</figcaption></figure>
<p>In this graph, the values for December 6th, 9th, 13th, and 14th are missing. What are the possible ways of handling this?</p>
<p>The first answer, of course, is “make sure the data is there.” But as I mentioned, there are likely going to be cases where we have to handle missing data — changes in the vendor APIs, hardware issues, acts of god — so let’s analyze a few solutions.</p>
<h2 id="solution-1%3A-do-nothing">Solution 1: do nothing</h2>
<p>This is what we’re currently doing. If we don’t have the data, we’re simply not drawing that portion of the graph.</p>
<p><strong>Pros:</strong></p>
<ul>
<li><strong>It’s not misleading</strong>: we don’t have this data, so we don’t display anything.</li>
<li><strong>It’s technically simple</strong>: we don’t have any other design or development concerns: no need to distinguish between “we have data for these days” and “we don’t have data for these other days.”</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li><strong>It lacks information</strong>: a user has no idea what’s going on here. If asked what this graph means, all they can say is “well, there are gaps in the graph.”</li>
<li><strong>It doesn’t look good</strong>: while missing data is not, by default, a reason to panic, having gap-filled graphs might inspire stress in our users.</li>
</ul>
<h2 id="solution-2%3A-fill-in-the-gaps">Solution 2: fill in the gaps</h2>
<p>Here’s what it would look like if we simply filled in the gaps by connecting the dates that we <em>do</em> have:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/gap-2.png" alt="A line graph with gaps filled in" /><figcaption>A line graph with gaps filled in</figcaption></figure>
<p><strong>Pros:</strong></p>
<ul>
<li><strong>It looks good</strong>: It makes it much easier to track the trends in the data that we do have — there was a big increase in the middle of the time period, and that’s easier to understand this way.</li>
<li><strong>It’s technically simple</strong>: Again, no tricks in design or development: if anything, this solution is slightly easier than not showing data we don’t have.</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li><strong>It’s misleading</strong>: By drawing a line between December 5th and 7th, we’re implying what the data was for December 6th. While training and close inspection might lead a user to doubt the interpolation, it’s a little too easy to take the smooth line for granted. Was December 6th lower than the 5th? Higher than the 7th? Showing the line here might lead to inaccurate conclusions.</li>
<li><strong>It lacks information</strong>: even though we’ve connected the dots, we can’t display anything for the most recent two days because we don’t have any points to extend the line. Again, we can’t give a user any idea of what happened these days.</li>
</ul>
<h2 id="solution-3%3A-error-states">Solution 3: error states</h2>
<p>What if we shaded in the regions for which we didn’t have data with some informative error state?</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/gap-3.png" alt="A line graph with error states where data is missing" /><figcaption>A line graph with error states where data is missing</figcaption></figure>
<p><strong>Pros:</strong></p>
<ul>
<li><strong>It’s not misleading</strong>: While we don’t have data for those days, we do have some information about <em>why</em> — for the yellow regions, we couldn’t collect the data. For the gray region, we haven’t tried to collect yet. There are a number of different reasons why we don’t have data, and we can provide that to the user.</li>
<li><strong>It has lots of information</strong>: This approach allows a user to answer questions not only about the data, but about the state of the application. It’s the most informative of the solutions.</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li><strong>It’s technically complex</strong>: Implementing this solution is tricky, as it requires a number of steps to record the error state and then display the error state. In addition, a key needs to be present for this to be useful to untrained users.</li>
<li><strong>It might not look good</strong>: I say “might” because it really only gets ugly if we have lots of error states. Seeing lots of these errors could be anxiety-inducing for the user, even if the problem is on our end as the product manager.</li>
</ul>
<h2 id="conclusion">Conclusion</h2>
<p>As an advocate of user needs even over technical requirements, I prefer solution 3. But I’ve employed all three of these approaches in products, and each can be useful depending on the circumstance.</p>
<p>I’m curious to hear how others have addressed this problem. Opinions? Alternative solutions? I’m all ears.</p>
Goldilocks your graphs
2015-11-11T00:00:00Z
https://matthewstrom.com/writing/goldilocks/
<p>Data visualization is everywhere. From analytics platforms to infographics, across newsrooms and social media channels, there are vast swaths of the internet devoted to delivering data in non-tabular format. There are entire blogs devoted to the subject, such as the ubiquitous <a href="http://fivethirtyeight.com/" target="_blank" rel="noopener">Five Thirty Eight</a> and the up-and-coming <a href="http://poly-graph.co/" target="_blank" rel="noopener">Polygraph</a>. With such an immense interest in seeing and understanding complex data, designers are constantly challenged to produce images that both catch a viewer’s eye and accurately depict the information at hand.</p>
<p>With such a high demand, there are (inevitably) a great number of approaches being employed; some to great success, others to embarrassing failure. It’s possible, then, to learn from these approaches to create data visualizations that are good-looking <strong>and</strong> informative.</p>
<ol>
<li><strong>Label everything in plain english.</strong> By “plain english,” I mean “words that you speak out loud regularly.” Depending on where you work, you might say phrases like “regular spectral density potential” regularly — so instead think of words your <em>audience</em> speaks out loud regularly.</li>
<li><strong>Show highs and lows, let the viewer fill in the rest.</strong> Most graphs fall victim to “too many axes” syndrome: lots and lots of grid lines dividing up the space, ostensibly to give the viewer a hand in judging the data. However, humans are pretty good at spatial estimation, so only plot the maximum and minimum on each axis.</li>
<li><strong>Give your graph a title.</strong> For such a seemingly obvious component, the title is often forgotten. What do you want your viewer to get out of a graph? If you answer this question in a title above the graph, you’ll provide the viewer with vital context and a good sense of what they’re looking at.</li>
</ol>
<p>Let’s say I’m preparing a graph for a client who makes pizzas. They’re interested to see how their pizza production rates have fluctuated over the last four months. Here are a few examples of how these three guidelines can be applied (or not).</p>
<h2 id="too-cold%3A-the-power-point-approach">Too cold: the Power Point approach</h2>
<p>In every board room in the world, there’s a laser pointer landing on a graph that looks like this:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/goldilocks-1.png" alt="A graph with too much ink" /><figcaption>A graph with too much ink</figcaption></figure>
<p>This graph has everything: big numbers, lots of lines, overly redundant labeling. There’s no way you could misinterpret this!</p>
<p><strong>Is everything labeled in plain english?</strong> Well, it’s labeled. But isn’t “July first” much easier to say than “seven-one-twenty-fifteen?”</p>
<p><strong>Are the highs and lows shown?</strong> This is an example of over-labeling. We’re only looking at four months here — no need for all the lines.</p>
<p><strong>Does the graph have a title?</strong> It does! But it’s a little too literal.</p>
<h2 id="too-hot%3A-the-dribbble-approach">Too hot: the Dribbble approach</h2>
<p>If you look at the front page of <a href="http://dribbble.com/" target="_blank" rel="noopener">Dribbble</a>, chances are there’s some sort of data visualization being done. And more often than not, it looks something like this:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/goldilocks-2.png" alt="A graph with too much style" /><figcaption>A graph with too much style</figcaption></figure>
<p>Of course, there are good examples of data viz on Dribbble and other showcase sites, but in many cases, the design is being done from a strictly aesthetic point.</p>
<p><strong>Is everything labeled in plain english?</strong> Nope. Nothing is labeled.</p>
<p><strong>Are the highs and lows shown?</strong> No! I have no sense of scale.</p>
<p><strong>Does the graph have a title?</strong> Kind of. But it’s not very descriptive.</p>
<h2 id="just-right%3A-the-goldilocks-approach">Just right: the goldilocks approach</h2>
<p>Let’s split the difference between these two. We’ll show what’s necessary to preserve the aesthetic qualities, but label clearly and simply to ensure accuracy:</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/goldilocks-3.png" alt="A graph with the right balance between style and information" /><figcaption>A graph with the right balance between style and information</figcaption></figure>
<p>Much better.</p>
<p><strong>Is everything labeled in plain english?</strong> Yes. We’re really clear about the time scale, as well as the domain and purpose of the graph.</p>
<p><strong>Are the highs and lows shown?</strong> They are! Also, the extra zeros on the numbers are truncated to save some space.</p>
<p><strong>Does the graph have a title?</strong> It does; “…last 4 months” spells out the time frame in a much simpler manner than “7/1/2015 to 10/31/2015.”</p>
<h2 id="conclusion">Conclusion</h2>
<p>These examples and guidelines are a (biased) set of tools for making good-looking and useful graphs. There are a huge number of topics I’ve glossed over, each of which holds innumerable hints on properly visualizing data; for more information, read the works of <a href="http://www.edwardtufte.com/tufte/" target="_blank" rel="noopener">Edward Tufte</a>, a critic of poor data visualization and a proponent of the just-right approach.</p>
<p>Lastly, no approach is successful without constant improvement and experimentation. Edit frequently and update your methods constantly. By refining and revisiting, you’ll find the happy medium between overwrought powerpoint and abstract art doodle.</p>
Well-designed interfaces look boring
2015-07-15T00:00:00Z
https://matthewstrom.com/writing/boring/
<p><a href="http://www.internetworldstats.com/stats.htm" target="_blank" rel="noopener">3 billion people used the internet for the first time in the past decade</a>. Can you imagine what that was like? When I began using the internet, the web was <a href="https://web.archive.org/web/19990429060923/http://www.altavista.com/" target="_blank" rel="noopener">pretty</a><a href="https://web.archive.org/web/19990208021547/http://www.yahoo.com/" target="_blank" rel="noopener"> much</a><a href="https://web.archive.org/web/19990208004515/http://google.com/" target="_blank" rel="noopener"> just</a><a href="https://web.archive.org/web/19990208005331/http://microsoft.com/" target="_blank" rel="noopener"> text</a>. Interface design required finagling websites from knots of spreadsheet-like tables, and even the most sophisticated designs couldn’t do much more than blink and display images. Now, <a href="http://www.statista.com/statistics/218532/global-smartphone-penetration-since-2008/" target="_blank" rel="noopener">37% of the world has the internet literally at their fingertips</a>, allowing them to manage their finances and healthcare, communicate in real-time using pictures and videos, and purchase everything from hamburgers to houses. Complex functions require complex interfaces; so how has interface design changed to accommodate?</p>
<p>Well, in many ways, it’s gotten boring.</p>
<h2 id="information-rules-supreme">Information rules supreme</h2>
<p>In 1990, a group of researches concluded that “<a href="http://web.iaincirebon.ac.id/ebook/indrya/bandura/inovasi/CohenLevinthalASQ.pdf" target="_blank" rel="noopener">Absorptive Capacity</a>” — “the ability … to recognize the value of new, external information, assimilate it, and apply it to commercial ends” — would become one of the most important factors in a company’s success. Their paper has since been cited by 26,347 others, and 25 years later, the <a href="http://www.bloomberg.com/visual-data/industries/detail/it-services" target="_blank" rel="noopener">$890B IT services industry</a> is fitting proof of this prediction’s accuracy. But our brains change at a pace much slower than the rate at which technology <a href="https://www.youtube.com/watch?v=MRG8eq7miUE" target="_blank" rel="noopener">advances</a>. So how do we use new technology to even our odds? Let’s look at one of the most commercially successful business interfaces of the last 25 years: the Bloomberg Terminal.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/boring-1.jpeg" alt="The Bloomberg Terminal" /><figcaption>The Bloomberg Terminal</figcaption></figure>
<p>This monstrous pile of letters and numbers nets Bloomberg roughly <a href="https://en.wikipedia.org/wiki/Bloomberg_Terminal" target="_blank" rel="noopener">6.3 billion dollars a year</a>. Friends who have used it rave about its ability to quickly visualize a vast amount of information; a <a href="http://www.onlineeconomy.org/wp-content/uploads/2012/11/niehaus.png" target="_blank" rel="noopener">specialized keyboard</a> allows users to command financial data with speed and accuracy. It is ugly as can be, but it is brilliantly <em>designed</em>: There is a deliberate hierarchy, an accurate color scheme, concise and useful charts, and clearly-labeled tools throughout.</p>
<p>Perhaps more importantly, it’s <em>boring</em>. There’s no thinking “outside the box.” No Jony-Ive-slinging-superlatives-in-a-black-t-shirt materials. No cleverly branded names, no breath-taking or game-changing, and certainly nothing even close to “intuitive.” Just data. This aspect — the lack of design-award aspiration — means that there’s little between the user and the information they’re assimilating. These terminals often span <a href="https://upload.wikimedia.org/wikipedia/commons/c/c7/2012_Bloomberg_Terminal_by_jm3_-_Creative_Commons_licensed.jpg" target="_blank" rel="noopener">4 or more crowded screens</a>: no whitespace means more information. Despite its steep learning curve (or, perhaps, because of it), its charts and graphs are *lingua franca *of the financial industry. Its closest competitor, Reuter’s Eikon system, is only marginally less ugly, maintaining the same density and resistance to interface metaphors.</p>
<figure data-type="image"><img src="https://matthewstrom.com/images/boring-2.png" alt="Eikon Explorer, a competitor to the Bloomberg Terminal" /><figcaption>Eikon Explorer, a competitor to the Bloomberg Terminal</figcaption></figure>
<h2 id="autonomous-cars-look-boring%2C-too">Autonomous cars look boring, too</h2>
<p>Of course, the design of the Bloomberg Terminal is unknown — and not at all important — to most people. However, one of the most of the exciting recent developments in tech is helping us master an interface familiar to <a href="http://www.statista.com/topics/1197/car-drivers/" target="_blank" rel="noopener">210 million people in the US alone</a>:<a href="https://medium.com/backchannel/the-view-from-the-front-seat-of-the-google-self-driving-car-46fc9f3e6088" target="_blank" rel="noopener"> cars</a>. With new technology aiding computer-driven vehicles (in fact, <a href="http://www.iata.org/pressroom/pr/Pages/2013-12-30-01.aspx" target="_blank" rel="noopener">8 million people a day</a> fly in planes that are <a href="http://www.nytimes.com/2015/04/07/science/planes-without-pilots.html" target="_blank" rel="noopener">almost entirely autonomous</a>), it’s becoming increasingly clear that we’ll stop driving cars soon. There will be no gear shifting, no turn signaling, no braking or accelerating, and no windshield wiping. So what sort of interface is best for an autonomous car?</p>
<p>There is a rich history of “interface design” for the <a href="http://i.dailymail.co.uk/i/pix/2008/10/31/article-0-024EB01E000005DC-608_634x611.jpg" target="_blank" rel="noopener">complex information once required to drive cars</a>. But in a self-driving car, this information is redundant, and so is that interface. Google has kept the dashboard out of the <a href="https://www.google.com/search?q=google+self+driving+car+dashboard&es_sm=91&source=lnms&tbm=isch&sa=X&ei=CbtsVa7HEoq1sQTd0YDQBw&ved=0CAcQ_AUoAQ&biw=1440&bih=801#tbm=isch&q=google+self+driving+car&imgrc=ggA7JEnwM8rCHM%3A;mlzsmKx-W_6ARM;http%3A%2F%2Fcdn.slashgear.com%2Fwp-content%2Fuploads%2F2014%2F05%2FSelf-Driving-Car-795x420.jpg;http%3A%2F%2Fwww.slashgear.com%2Fgoogle-self-driving-car-loses-controls-for-pod-pilot-27330823%2F;795;420" target="_blank" rel="noopener">pictures of its driverless car</a>, but why? One possibility is that the car’s dashboard is <a href="http://www.theverge.com/2015/7/13/8955621/google-self-driving-car-pictures-interior" target="_blank" rel="noopener">shockingly absent of controls</a>. It’s not sleek and sexy, or full of fancy gauges and real-time readouts; it’s just an empty space, which is going to be a jarring experience for most people.</p>
<p>As an interface designer, I’m <em>disappointed</em>. Growing up, I watched countless movies and TV shows that portrayed interfaces as beautiful holograms spinning in the air, manipulated in space by flicks and swishes, surrounded by rainbow-splashed screens full of shapes and numbers. But as we see new technology accomplishing wonderfully complicated things beyond our imagination, like <a href="http://www.amazon.com/b?node=8037720011" target="_blank" rel="noopener">air-lifting goods directly to our doorstep</a> and <a href="http://lifehacker.com/how-the-new-google-photos-makes-your-picture-library-aw-1708189976" target="_blank" rel="noopener">storing, tagging, and organizing all of our photos forever</a>, we’re having to come to terms with <a href="http://payload145.cargocollective.com/1/0/2995/5219578/oblivion_1080p_rip_137_905.JPG" target="_blank" rel="noopener">fantasy</a> vs. <a href="http://cdn.slashgear.com/wp-content/uploads/2014/09/apple-watch-hands-on-sg22-600x312.jpg" target="_blank" rel="noopener">reality</a>.</p>
<h2 id="let-go-of-shiny-things">Let go of shiny things</h2>
<p>Computers are starting to outpace the computational abilities of our brains, and fine-grained controls in interfaces are becoming overwhelming. The more we can do with a tool, the more the interface has to get out of the way. Sometimes, we can do so much with a tool, that we <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/what-is-watson.html" target="_blank" rel="noopener">need the help of artificial intelligence to unlock its full potential</a>. This isn’t just a <em>simplification</em> of interface; it’s a complete shift in how we design our digital tools.</p>
<p>The trend in interface design — away from the <a href="http://cdn.ubergizmo.com/photos/razrv3x.jpg" target="_blank" rel="noopener">shiny and complex</a>, towards the <a href="https://9to5mac.files.wordpress.com/2014/03/messages.png" target="_blank" rel="noopener">simple and boring</a> — is only beginning.In my experience, it’s inevitable. <strong>Boring works.</strong> In the past year, I’ve started countless projects with richly detailed interfaces, only to have users tell me they prefer simpler and more functional versions. In the world of product design, the user is always right. As the next 3 billion internet users come online, the interfaces that are the least noticeable will be the most widely adopted — even if that means there’s no noticeable interface at all. For the interface designer, that means we’ll ultimately have to take the Futurama-coined adage to heart: <a href="https://www.youtube.com/watch?v=edCqF_NtpOQ" target="_blank" rel="noopener">“When you do things right, people won’t be sure you’ve done anything at all.”</a></p>
<p><em>Special thanks to <a href="http://joshpetersel.com/" target="_blank" rel="noopener">Josh Petersel</a> for looking at drafts of this piece. Thanks Josh!</em></p>
Towards better creative feedback
2015-01-07T00:00:00Z
https://matthewstrom.com/writing/feedback/
<p>Creative work — be it designing, writing, coding, or managing — is a collaborative practice. At least two parties are always involved: The maker (a designer, developer, or manager) on one end, and the audience on the other.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/feedback/#fn1" id="fnref1">1</a></sup> Feedback between the maker and the audience is absolutely critical to the success of the work: makers demonstrate their skill and expertise by facilitating focused feedback, and clients & stakeholders build great relationships with creatives by providing high-quality feedback.</p>
<p>In my experience as both a maker and an audience member, I’ve developed a few ground rules that have helped me provide and receive great feedback. At Planetary, we use this approach every day to build better products:<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/feedback/#fn2" id="fnref2">2</a></sup></p>
<h2 id="what-makes-feedback-good%3F">What makes feedback good?</h2>
<p>We use two questions to determine if feedback is good or not:</p>
<p><strong>Is it clear & concise?</strong> Feedback should be terse. If you’re trying to articulate something, and are uncertain about it, it’s okay to say so, but be very certain of what you’re uncertain about, and use as few words as possible.</p>
<h4 id="examples">Examples</h4>
<p>✓ The color of this element is too bright.<br />
✗ There’s something about the way this moves that reminds me of some sort of animal.</p>
<p><strong>Is it action-oriented?</strong> Always give feedback with action in mind. You don’t always have to boss the maker around, but always give feedback that can be acted upon.</p>
<h4 id="examples-2">Examples</h4>
<p>✓ This text isn’t the same size as the other text on the page.<br />
✗ I don’t like the way this layout feels.<sup class="footnote-ref"><a href="https://matthewstrom.com/writing/feedback/#fn3" id="fnref3">3</a></sup></p>
<h2 id="what-good-feedback-looks-like---feedback-map">What good feedback looks like - feedback MAP</h2>
<p>In addition to overall quality, it’s important that feedback has a consistent structure. Consistency helps to create and maintained a shared language, and keeps translation errors to a minimum.</p>
<p>I suggest each piece of feedback have three main components: <strong>Matter, Attribute, and Process.</strong></p>
<h3 id="matter">Matter</h3>
<p>This is the subject of your feedback. Often times, feedback is dead on arrival because it’s not about anything in particular. I’ve seen (and, at times, given) feedback that is just a suggestion to the maker “Make this bigger.” “Change this picture.” This isn’t actually feedback! This is telling the maker how to do their job. And nobody likes being told how to do their job.</p>
<p>Be specific as specific as possible! When you say “the logo,” which logo do you mean — the one on the front page? Or the one on page 17? When you say “the colors,” which colors exactly are you referring to?</p>
<h3 id="attribute">Attribute</h3>
<p>This is a quality of the matter you’re focusing on. It’s usually some visual quality, but it can have analogues in the other senses: loud, soft, fast, slow, crisp, soft. You can answer the question “How?” with the attribute. It <em>describes</em> the Matter.</p>
<p>This is where you get to use fancy words. Again, be specific, but the more descriptive you can be, the better.</p>
<h3 id="process">Process</h3>
<p>This is the process by which the Matter and Attribute occur. Think of it as the “Why” or “When” in our equation. This is probably the most complex aspect of feedback, because sometimes it’s just taken for granted: The process is “Why? Because I looked at it,” or, “When? When I went to the website.” But sometimes it’s more involved in that. And that’s when we start using words like “User Experience.” If your feedback comes from a specific process, try to elucidate that. And again — <strong>be specific</strong>.</p>
<h4 id="examples-3">Examples</h4>
<p><span class="feedback-example">The loading time <em>(Matter)</em> is slow <em>(Attribute)</em> when the user clicks “Submit.” <em>(Process)</em></span></p>
<p><span class="feedback-example">The outline of the logo <em>(Matter)</em> looks too thick <em>(Attribute)</em> when printed at small sizes. <em>(Process)</em></span></p>
<p><span class="feedback-example">The model in the stock photo on our homepage <em>(Matter)</em> looks very sad <em>(Attribute)</em> and causes our users to feel sad. <em>(Process)</em></span></p>
<h2 id="capturing-feedback">Capturing Feedback</h2>
<p>Sometimes, simply writing down a sentence of feedback or two will suffice. But often, it’s hard-to-impossible to describe a particular piece of matter, a quality, or a process. In those cases, you can use an image! There are great tools to capture images, even giving you the chance to add some text or a drawing to the image.</p>
<h3 id="take-a-screenshot">Take a screenshot</h3>
<p>This is the most basic way to get an image of the thing you’re providing feedback on.</p>
<p><strong>On Mac OS X,</strong> you can save an image of the whole screen by pressing <code>command + shift + 3.</code> To save just a portion of the screen, use <code>command + shift + 4.</code></p>
<p><strong>On Windows,</strong> you can copy an image of your screen to the clipboard using the <code>PrtScn</code> (print screen) key. Once copied, simply paste the image into a document in the Paint application, and save it.</p>
<h3 id="make-an-annotated-screenshot">Make an annotated screenshot</h3>
<p>There are tools to help you add information to your screenshots. This will allow you to be more specific, and save your thoughts together in a single place.</p>
<p><a href="https://evernote.com/skitch/" target="_blank" rel="noopener">Skitch</a>, from the makers of Evernote, helps you add information to screenshots in the form of drawings, shapes and text.</p>
<p><a href="https://redpen.io/" target="_blank" rel="noopener">RedPen</a> is an online, cross-platform tool that organizes comments and tracks the progress of documents and images — think of it like “track changes” for creative work.</p>
<h3 id="record-a-moving-image">Record a moving image</h3>
<p>Sometimes, a screenshot can’t capture the Matter you’re trying to address: if it’s an interaction or an animation, it helps to be able to record a movie or animated GIF.</p>
<p><a href="http://www.cockos.com/licecap/" target="_blank" rel="noopener">LICEcap</a> is a tool I use almost every single day. You simply drag the window over the area of the screen you’d like to capture, and hit record. The program will generate an easy-to-share image file of the movie that can be viewed in any web browser.</p>
<p><strong>Quicktime Player</strong> comes installed on every Mac, and can be used to capture short movies. Open the app, and select <em>File > New Screen Recording</em> from the menu bar. From there, hit the record button, and you’re set! You can even add audio commentary, which can be absolutely invaluable to the feedback process.</p>
<h3 id="conclusion">Conclusion</h3>
<p>Facilitating efficient feedback between makers and clients/collaborators can mean the difference between a painful, failure and an inspired success. By dedicating yourself to providing or facilitating concise, action-oriented feedback, and by agreeing on a common structure with which to build that feedback, you — as a maker, or as a client — can become a more efficient and successful partner in the creative process.</p>
<hr />
<section class="footnotes l--space-compact">
<div class="t--weight-bold l--pad-btm-s">Footnotes & References</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>The audience can be the client for whom the work is done, or it can be the users of the product designed, or it can be the stakeholders or investors who will fund further development. <a href="https://matthewstrom.com/writing/feedback/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>This is not a one-size-fits-all solution! Use it as a starting point to find your own method of soliciting feedback. <a href="https://matthewstrom.com/writing/feedback/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>A note on feelings: I have banned the phrase “this feels …” from my feedback vocabulary. It’s often a crutch of feedback, and a pretty crummy one at that. I tell my collaborators “This doesn’t feel! <strong>YOU FEEL</strong>! Tell me how you feel!” They think this is pretty funny. <a href="https://matthewstrom.com/writing/feedback/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Asymmetrical symmetry
2014-05-16T00:00:00Z
https://matthewstrom.com/writing/go/
<p><a href="http://en.wikipedia.org/wiki/Go_(game)" target="_blank" rel="noopener">Go</a> intrigues me. It is lauded in most circles as the thinking man’s chess, a game played by luminaries for 2500 years. It is used in movies and TV shows to hint at the ideas of Zen and east Asian religion. I have never successfully played a complete game, though I enjoy reading about the culture that surrounds it.</p>
<p>Recently, reading about the design of the Go board itself, I learned that each board is not perfectly square. Instead, its sides have a ratio of 15:14 — imperceptibly rectangular. This means that when seated next to it, the board <em>appears</em> square due to the foreshortening effect of perspective.</p>
<p>In addition, the stones are each slightly larger than a single square of the 19x19 grid, a fact that only becomes apparent as the board becomes full. Near the end of a game, stones must be placed very carefully, as to not displace other stones. As the game comes to a conclusion, the stones squeeze each other in a very literal manner.</p>
<p>Black stones are slightly larger than their white counterparts. This is to account for the visual illusion that occurs between the stones: white pieces <em>appear</em> larger than black ones. This discrepancy is eliminated by the difference in sizes. In Japan, the stones are traditionally convex on both sides, making each piece wobble at the slightest disturbance.</p>
<p>The math of Go is asymmetrical, too: the grid is 19x19. 19 is an indivisible (prime) number, so the board cannot be split into smaller equal components. The number of total points — 19 times 19, or 361 — is odd, so there are 181 black stones and 180 white stones.</p>
<p>The game only has 2 rules. But when played by experienced players, games stretch on for hours, often pivoted around a single point on the board. It is so complex a game that, despite its place in finitude (there is no element of chance, so theoretically, perfect play is possible), no computer has so far reliably bested its champions.</p>
<hr />
<p>The lesson I draw from these observations is that disharmony and harmony are inextricably linked. One causes the other. Or, perhaps it would be better to say that one <strong>necessitates</strong> the other. In my work, I strive for mathematical precision, perfect adherence to grid systems and type scales, color theory and compositional structures. This quest for rigor often results in chaos.</p>
<p>Instead, I should open the door to chaos and imperfection; maybe the result will be much closer to the elegance I strive for.</p>
Make it 'til you make it
2014-05-15T00:00:00Z
https://matthewstrom.com/writing/make-it/
<p>In 2009, back when I was the creative director of a music magazine, I sat on a panel of music industry professionals. The audience was mostly comprised of bands and curious non-music-industry people, so when it came to the Q&A part of the evening, the questions were predictable. One of the less surprising questions was: “I’m in a band. How do we get booked for bigger shows?”</p>
<p>The answer — from the owner and booking manager of a concert venue — caught me off guard: “Don’t play bad shows.” He went on to explain that, if you’re just starting to play shows, you have to pick your battles: only perform when you’re sure there’s going to be a big audience and a good stage to play on. Only play when you’re sure you’re going to get paid. In other words: play it safe.</p>
<p>At the time, this was the opposite of my thinking. I challenged his answer: “You have to take risks sometimes. If you wait for the sure success, you might miss a good opportunity. You might play a few bad shows, but it’ll pay off.” We sparred a bit, and eventually moved on to other questions. I was sure I was right: failure is worth the risk.</p>
<p>In starting a few companies over the past 5 years, I think back to this one brief moment often, and more and more I’m convinced that the venue owner had a great point. When your record is 0-0, a loss means much more. In the realm of business, having a track record of success — even a short one — can make a big difference. In a <a href="https://matthewstrom.com/blog/what-happens-when-things-go-wrong" target="_blank" rel="noopener">previous note</a>, I mentioned that failure-worship has gone a bit too far, and it becomes more and more apparent every day.</p>
<p>When looking for success, patience is undervalued. The “stay hungry” motto is a rallying cry to the fail-fast set, and the perception is that the number lines on your CV are in some way translatable to ability, experience, or success. My point is this: fewer victories with fewer defeats is no better or worse than greater victories with greater defeats. Define success on your own terms, and don’t let the pace of the rising stars in headline-writing startups dictate your path.</p>
Better problem solving: unask the question
2014-05-13T00:00:00Z
https://matthewstrom.com/writing/unask/
<p>When faced with a challenging problem, it’s important to have a reliable and re-usable plan of attack. As I put a great amount of faith in hard science, my go-to problem-solving method is typically what’s called “hypothesis testing” — that is, the typical “scientific method” we all learn in grade school.</p>
<p><strong>It goes like this:</strong></p>
<ol>
<li>With a particular question in mind, make an hypothesis based on observation.</li>
<li>Design a test, and predict the outcome based on your hypothesis.</li>
<li>Perform the test, and based on the outcome, evaluate whether the hypothesis was correct or not.</li>
</ol>
<p>Practically, this comes down to taking a guess at the solution, then devising and conducting a test which will prove your guess right or wrong. Here’s an example:</p>
<ol>
<li>You’re wondering why your fish is looking a little green-in-the-gills lately (the question), and you think it’s because the food you’re feeding her is not satisfying her nutritional needs (the hypothesis).</li>
<li>So, you buy different kinds of fish food. You try feeding your fish different foods on different days of the week (the test). You go through great lengths to isolate the conditions: feeding time is at 8am every day, you serve the food in identical quantities, from an unmarked container.</li>
<li>The new foods don’t seem to make any difference — your fish is still sick (the outcome). So, you conclude that your hypothesis is not true (the conclusion).</li>
</ol>
<p>You’ve done some science! Your rigorous methods have gotten you a little closer to a healthier fish. And in a logically sound way, to boot!</p>
<p>Not so fast.</p>
<h3 id="true%2C-false%2C-etc.">True, False, etc.</h3>
<p>We westerners, raised on a hardy diet of European thinking, tend to think of a yes or no question like “Is my fish food making my fish sick?” as having two possible states: True, and False. This is called binary logic: everything is ‘yes’ or ‘no,’ ‘true’ or ‘false,’ ‘0’ or ‘1’. Very intuitive.</p>
<p>However, there are systems in which a yes or no question has more than two possible answers. One of these systems is Buddhism, and one of the other possible answers is “無” (anglicized as wú). 無 means, in many cases, “neither true nor false.” This Zen <a href="http://en.wikipedia.org/wiki/K%C5%8Dan" target="_blank" rel="noopener">kōan</a> is what you might call its ‘debut’:</p>
<p>A monk asked Zhaozhou Congshen, a Chinese Zen master (known as Jōshū in Japanese), “Has a dog Buddha-nature or not?” Zhaozhou answered, “Wú”.</p>
<p>In this case, “wú” is often interpreted to mean “you’ve asked an unanswerable question.”
Douglas Hofstadter, in one of my favorite books, Gödel, Escher, Bach, calls this “unasking the question.” The Zen master is trying to tell the monk that Buddha nature doesn’t apply to dogs. Some writers take Jōshū’s answer to mean that there is no such thing as Buddha-nature! Either way, this is an answer that is neither ‘yes’ nor ‘no.’</p>
<h3 id="the-answer-is-there-is-no-answer">The answer is there is no answer</h3>
<p>In our scientific method example, this is relevant because it means we have to accept the possibility of a new outcome: Our hypothesis may be true, it may be false, or it may be 無. The answer could be that there is in fact no way to answer the question — our fish isn’t really sick, and our whole quest to revive her is errant.</p>
<p>This <a href="http://en.wikipedia.org/wiki/Many-valued_logic" target="_blank" rel="noopener">many-valued logic</a> is important in my daily life, as the following example might show:</p>
<p>A client asks me, “Do I need to re-design my logo?” A “yes” would come with a lot of “buts”, and so might not really be a “yes.” A “no” implies that their current logo is fine — most of the time, if this question comes up, the current logo is NOT fine.</p>
<p>So what is the answer? A big fat 無.</p>
<p>There are lots of things a company can do to strengthen or change their identity, from copy changes in their email newsletter to new products and services, all of which doesn’t require an ounce of effort when it comes to logos.</p>
<h3 id="the-least-satisfying-solution">The least satisfying solution</h3>
<p>Nobody wants to hear they’ve asked the wrong question. It might be hard to communicate this idea to people who are used to simple, binary logic. But in questioning the premise of any problem, you open up a path to a solution that might not have existed before.</p>
<p>無 is a powerful tool in solving complex problems. It requires a bit of mental exercise, but can make your approach to tricky situations more like that of a Zen master.</p>
Taking credit for success
2014-05-08T00:00:00Z
https://matthewstrom.com/writing/success/
<p><a href="https://matthewstrom.com/writing/what-happens-when-things-go-wrong" target="_blank" rel="noopener">Failure sucks</a>. From its economic realities to its ego-deflating self-esteem sap, failure slows you down and holds you back. And while it would be nice to live in a world where failure rarely happens, our reality is the opposite; success is the exception. Success is hard to come by, and often passes by unnoticed. Therefore, it is impossible to overemphasize the importance of <strong>recognizing and taking credit for success</strong>.</p>
<h3 id="the-starving-artist">The starving artist</h3>
<p>We’ve all heard these stories: many of the artists we now consider to be masters were not fully appreciated during their lifetimes. It is a narrative told both to romanticize and to rationalize failure. <em>“It’s okay if no one appreciates your work today; time will tell if your legacy survives.”</em> While there is an optimistic tone to it, this narrative generally stinks. When it comes to success, the only person whose opinion truly matters is your own.</p>
<h3 id="smelling-the-roses">Smelling the roses</h3>
<p>I often let the future overwhelm the present. I very seldom appreciate what is happening in the moment, because I’m too busy planning for and worrying about about what’s going to happen down the line. It’s a habit I have developed to avoid dwelling on the problems of the present — which is not so bad on its surface. But this habit also means I do not allow myself to appreciate the good things about the present, including the ways in which I have succeeded. There’s no feeling of accomplishment and no opportunity to celebrate; I’m always looking ahead to the next challenge.</p>
<h3 id="claiming-victory">Claiming victory</h3>
<p>Defining, achieving and acknowledging success are essential for sustaining you and your business.</p>
<p>When starting something new, write down what exactly constitutes success for you. If you are learning a new language, success might be having a conversation with a native speaker. If you are an entrepreneur, success might be a profitable exit, or it might simply be recognition in the media. Whatever it might be, keep that definition of success in mind as your efforts continue.</p>
<p>When you finally achieve whatever it is you wrote down, take the day off. Wallow in your success. Give yourself a pat on the back. Call your mom. For a brief moment, be content, and get a good night’s sleep.</p>
<p>If you cannot give yourself credit for your own successes, you will find it hard to accept the credit others give you. And worse, it will be harder to envision and strive for future success.</p>
What happens when things go wrong
2014-05-06T00:00:00Z
https://matthewstrom.com/writing/wrong/
<p>The rise of the startup economy – and the abundance of millennial entrepreneurial wisdom it has produced – means you can hardly go a day without seeing Samuel Becket’s words writ large:</p>
<blockquote>
<p>“Ever tried. Ever failed. No matter. <strong>Try again. Fail again. Fail better.</strong>”</p>
</blockquote>
<p>In celebrating failure, it seems that these commentaries posit failure to be <em>okay</em>. I think this is the wrong conclusion to draw; I would argue instead that failure is <em>inevitable</em>. Everyone fails. Rather than wearing failure as a badge of honor (looking at you, Silicon Valley), here is how I have come to experience, and understand, failure:</p>
<h3 id="admit-defeat">Admit defeat</h3>
<p>Assuming responsibility for a failure is never easy. It is important to know, however, that it is never not your fault. Fault is a complex equation. Whether your failure was a direct result of your own actions or not, it is vital to be accountable for the outcome of everything you do. The people I admire are really, really good at taking responsibility for their actions. I aspire to be so willing to admit defeat.</p>
<h3 id="take-time-to-reflect">Take time to reflect</h3>
<p>Retrospect is invaluable, but only possible when you take time to process your experience. When you fail, stop yourself from rushing back into the fold. Take a look at things from multiple angles. Get all your navel-gazing in at once. Reflection and introspection can be intuitive processes, but are too often overwhelmed by in the desire to failure behind you.</p>
<h3 id="define-success">Define success</h3>
<p>Roughly estimating, I would say 50 percent of my failures were guaranteed from the start. Taking the time at the beginning of a new project to define success and think about what is needed to achieve that success can make all the difference.</p>
<h3 id="remember-your-failures">Remember your failures</h3>
<p>Memories of failure are anything but pleasant: gut-wrenching, embarrassing, awkward, and self-esteem rattling. At the risk of cheesiness, however, I would argue that preserving memories of failure makes success that much sweeter. Seriously. To have tried and failed is to be that much more appreciative of your accomplishments. Do not underestimate the future motivational potential of each failure.</p>
<hr />
<p>Failure sucks. It’s not pretty, it’s not glorious, and no amount of cheerleading will change that. But it is, in my opinion, one of the greatest motivators of success.</p>
<p>So try again, fail again, fail better, <strong>and succeed</strong>.</p>
Practice makes perfect
2014-04-09T00:00:00Z
https://matthewstrom.com/writing/practice/
<figure data-type="image"><img src="https://matthewstrom.com/images/practice-1.jpg" alt="Professional baker/member of my band Jake at a band retreat recently, practicing." /><figcaption>Professional baker/member of my band Jake at a band retreat recently, practicing.</figcaption></figure>
<p><em>Editor’s note: I think this falls under the heading of ‘conventional wisdom.’ In addition, I’m walking a fine line between ‘self-help’ and ‘beating a dead horse.’ Perhaps poorly. Bear with me.</em></p>
<p>I do a lot of programming. Sometimes I do it for work, sometimes I do it for fun, but all in all I’m looking at code for about 75% of my waking hours. If there’s one thing that guides developers in their work, it’s this almighty principal:</p>
<h3 id="don%E2%80%99t-repeat-yourself.">Don’t Repeat Yourself.</h3>
<p>DRY, as it’s often abbreviated, is something that transcends every coding language, every discipline, and every project. I’d wager it’s the best way to gauge a developer’s skill: how well does he/she handle repetitive tasks? I’d place my observations of really good programmers close to the realm of religious experience; the code they write is efficient, extensible, and most impressive of all, elegant.</p>
<p><strong>I find myself doing a lot of repeating.</strong> I feel guilty every time I have to slog through a repetitive task because I lack the knowledge to attain the almighty DRY. But today, writing out a piece of code that I’ve probably written 100 times prior, I figured I’d take a time out to consider the pros and cons of repetition. And at the end of it, I really wanted to make a point. That point:</p>
<h3 id="don%E2%80%99t-repeat-yourself.-2"><s>Don’t</s> Repeat Yourself.</h3>
<p>Because repeating yourself is the best way to learn how things work. I think the drive to avoid repetition minimizes the fact that repetition creates opportunities for improvement. Obviously, there are different types of repetition, and DRY still reigns almighty in the code I write, but the point stands: Repeat yourself often. Do things twice. Finish a task, then start from scratch. Practice.</p>
Be curious
2014-01-28T00:00:00Z
https://matthewstrom.com/writing/curiosity/
<figure data-type="image"><img src="https://matthewstrom.com/images/curious-1.jpg" alt="This mural was somewhere on Houston in Manhattan — I took the picture out of sheer curiosity." /><figcaption>This mural was somewhere on Houston in Manhattan — I took the picture out of sheer curiosity.</figcaption></figure>
<p>A lot can (and has been) said about <a href="http://en.wikipedia.org/wiki/Aaron_Swartz" target="_blank" rel="noopener">Aaron Swartz</a>, and if you haven’t heard any of it I suggest you take a second and familiarize yourself. I recently read a quote of his, and if only one thing endures of Aaron Swartz’ legacy, I hope it’s this:</p>
<blockquote>
<p>“Be curious. Read widely. Try new things. I think a lot of what people call intelligence just boils down to curiosity.”</p>
</blockquote>
<p>I couldn’t agree more. I hope I don’t come off as self-important when I say that people often consider me an intelligent guy; but I honestly think it just comes down to the fact that I have an insatiable urge to learn new things, coupled with the inability to put something down once I’ve picked it up. It’s how I procrastinate — and I procrastinate <strong>a lot</strong>. I certainly wouldn’t claim to be an expert on any subject, and I really didn’t take formal education very seriously. I’m just curious, to a fault.</p>
<p>But this post isn’t about me. It’s about a few of my friends that I think exemplify the spirit of curiosity, and the ways they inspire me to be more curious.</p>
<h2 id="curiosity%2C-curiosidad%2C-%E5%A5%BD%E5%A5%87%E5%BF%83">Curiosity, curiosidad, 好奇心</h2>
<p>My friend <a href="http://loganalexander.net/" target="_blank" rel="noopener">Logan</a> is a great example of someone who is consistently exploring. In conversations lately, he’s mentioned his goal for 2014: learn Spanish <strong>and</strong> Japanese. This isn’t unusual — I think learning new languages is probably the most popular form of self-improvement. What makes Logan different, however, is his curiosity about the culture behind the language, and his willingness to see that curiosity through to exploration. He’s travelled in Japan and South America, and upon returning from those trips brought with him ideas and customs that resonate with his personality.</p>
<p>In his case, Logan’s curiosity about culture deepens his personality, and impresses on the people around him a sense of adventure through firsthand knowledge of far-away places.</p>
<h2 id="show-me-style">Show me style</h2>
<p>Another friend, <a href="http://susannahlohr.com/" target="_blank" rel="noopener">Susie</a>, exudes curiosity in every conversation she has. She’s a great friend in the sense that she’s always asking questions, and expresses genuine interest in your answers. And there’s few areas that she shows more interest in than style/fashion; she’s pioneered a blog called <a href="http://showmefibres.com/" target="_blank" rel="noopener">Fibres</a>, which consists of conversations between her and (for the moment) her friends about their personal style. Her questions, coupled with her conversational candor and genuine curiosity, elicit some really great answers from the interviewees. For her, curiosity isn’t about just the trends or what the big names are wearing — it’s about people, and the best way to explore style is through the people that make it stylish.</p>
<p>For Susie, a curiosity about why people choose their look results in the impression of being extremely knowledgeable about fashion and style. Granted, she has a stellar fashion sense herself, but I really think it’s her curiosity that shines.</p>
<h2 id="how-to-make-the-world-a-better-place-(ready-or-not)">How to make the world a better place (ready or not)</h2>
<p>Finally, <a href="http://www.joshpetersel.com/blog/" target="_blank" rel="noopener">Josh</a> is one of my closest friends. I’ve worked with Josh for years, on a multitude of projects from <a href="http://braindrain.co/wp-content/uploads/2012/01/IMG_0176.jpg" target="_blank" rel="noopener">serious</a> to <a href="http://mothafuckincheese.ytmnd.com/" target="_blank" rel="noopener">silly</a>. One thing that has always stuck with me in my interactions with Josh is how curious he is about improving the things around him. He’s actually been writing at least once a week for about 7 years, often at length, on ways to improve everything from <a href="http://www.joshpetersel.com/blog/credit-card-design/" target="_blank" rel="noopener">credit cards</a> to <a href="http://www.joshpetersel.com/blog/soup-bowl-design/" target="_blank" rel="noopener">soup bowls</a>. It’s my opinion that this curiosity is what has led him to a successful jaunt through some of the toughest business school programs in the country. His drive to understand what makes things tick doesn’t necessarily come from some high-minded desire to make the lives of others drastically better (correct me if I’m wrong, dude); it seems to come from a simple but indelible curiosity.</p>
<p>Josh’s curiosity might come from a place entirely unique to him, but in many cases the products of his passion have benefitted many people around him — including myself.</p>
<h2 id="and-now%2C-some-bad-news">And now, some bad news</h2>
<p>Curiosity isn’t the answer to all of life’s problems. Just being curious only gets you started; it requires a lot of sweat to chase your curiosities down. Sometimes, I mistakenly attribute to curiosity my idle floundering, reading blogs and staring at ‘inspiration’ websites. It’s pretty easy to pat yourself on the back after doing very little in the name of curiosity. So, pursue curiosity fervently, not idly. Use it to fuel passion. But don’t accept it as a substitute for determination and hard work.</p>
<hr />
<p><strong>In conclusion,</strong> ‘be curious’ will always be the first piece of advice I give anyone. It should be the starting point of any journey, the seed of any experiment, the foundation of any project. The advice comes with an addendum , though: ‘… and do something about it’. Be curious, and do something about it.</p>
<p>Thanks, Aaron.</p>
Working to work
2014-01-18T00:00:00Z
https://matthewstrom.com/writing/working/
<figure data-type="image"><img src="https://matthewstrom.com/images/working-1.jpg" alt="Despite the fact that I build websites for a living, I do a significant amount of work in my notebooks." /><figcaption>Despite the fact that I build websites for a living, I do a significant amount of work in my notebooks.</figcaption></figure>
<p>Quick quiz: what does a web developer do for a living? If you said ‘make websites, duh,’ you’re <em>technically</em> correct (<a href="https://www.youtube.com/watch?v=hou0lU8WMgo" target="_blank" rel="noopener">the best kind of correct</a>). And you’re in good company; I’d wager 99% of the people I meet at bars and coffee shops have that in mind when I tell them I’m a web developer. But my answer to the question — and, by extension, the question “yeah, but what do you <em>actually</em> do,” — has very little to do with making websites. Making websites often seems like an afterthought in my field. This may seem surprising, so let me offer a quote from one of my heroes, Carl Sagan:</p>
<blockquote>
<p>“If you wish to make an apple pie from scratch, you must first invent the universe.”</p>
</blockquote>
<p>I’ll walk you through some of the work that goes into working, when it comes to being a web developer. And for time’s sake, we’ll skip a few steps after creating the universe.</p>
<h2 id="learning-stuff">Learning stuff</h2>
<p>This one should be fairly obvious, so I won’t dwell on it. Web developers spend an awful lot of time learning. Many go to school for years and years to get a degree, many teach themselves on nights and weekends, but none can ever <strong>stop</strong> learning. The development world is changing every day, and in order to make a living, one has to stay sharp and keep up with the ever-quickening pace of web development. While it’s important to learn from each project, there’s tons of required education that happens outside of paying jobs. It can be exhausting.</p>
<h2 id="getting-a-job">Getting a job</h2>
<p>Ok, this one’s obvious too. All the knowledge and skill in the world doesn’t mean a thing if you can’t convince someone to hire you. For some developers, this means a full-time gig — interviews, resumés, call-backs, and the lot. But many (myself included) are freelancers; this means constantly meeting potential clients, following up, negotiating rates, marketing through social media, blogs, speaking gigs, and networks, among many other time-consuming activities. No actual development happens throughout all of this — just lots and lots of organizational effort. All that work, just to keep a steady paycheck!</p>
<h2 id="writing-contracts">Writing contracts</h2>
<p>This is where things get hairy. Many developers, designers, and self-employed people of all walks put in a lot of time structuring complex contracts in order to confidently do their work. And, for the most part, these people have little to no experience with the theory or practice of law. It’s never a matter of pulling one over on your client — just making sure you’re protecting yourself and your work. It’s anxiety-inducing, and not a lot of fun, but absolutely necessary.</p>
<h2 id="organizing-projects">Organizing projects</h2>
<p>Unfortunately, being creatively-minded often comes with an aversion to organization. There’s a quote I like:</p>
<blockquote>
<p>“If a cluttered desk is a sign of a cluttered mind, of what, then, is an empty desk a sign?”</p>
</blockquote>
<p>The internet attributes this to Albert Einstein, but I’m skeptical. Regardless, maintaining multiple simultaneous projects requires a lot of organizational effort. There’s all sorts of software that I’ve tried, many lauded ‘get things done’ techniques, and at the end of the day I often feel just as disorganized as when I started. There’s a reason agencies have full-time project managers: it’s a vital part of the creative profession, and one that requires a lot of time and concentration.</p>
<h2 id="building-tools">Building tools</h2>
<p>I spend a lot of time building tools for myself. These are pieces of code, spreadsheets, applications, folder structures, and notes I use to make some of the tasks common to every project easier. It’s a time investment aimed at eliminating some of the mundane processes I find myself repeating over and over. On some projects, I’ve spent more time prepping my tools than actually doing the project itself. And these tools change over time, as new methodologies are discovered, and as the languages I use become more complex. Sometimes I’ll use a tool once, then immediately discover a more efficient solution. Sometimes, I’ll never use a tool I’ve built. But the benefits far outweigh the costs, so I have no plans to abandon this approach.</p>
<hr />
<p>Hopefully this is an insightful glance into just how much I do outside of simply ‘making websites.’ There’s plenty more, but I think this is a sufficient vignette. The bottom line is this: <strong>There’s a vast amount of work that goes into every project I undertake that never sees the light of day.</strong> And while I happily let most of the iceberg go unseen, I want to encourage you to look a little harder at the websites you visit every day: maybe you’ll start to see some blood, sweat, and tears underneath.</p>
A website to call my own
2013-12-02T00:00:00Z
https://matthewstrom.com/writing/website/
<figure data-type="image"><img src="https://matthewstrom.com/images/website-1.jpg" alt="Most of this site was built at my favorite coffee shop of late, Sump." /><figcaption>Most of this site was built at my favorite coffee shop of late, Sump.</figcaption></figure>
<p>I make a living designing and developing, among many many other things, websites. So, for the past few years, I’ve had the embarrassing task of explaining something to all my clients and — worse, if you can believe it — my friends: I didn’t have a website of my own. The cobbler’s children had no shoes; the barber’s hair was long and shaggy. <a href="http://i3.kym-cdn.com/photos/images/newsfeed/000/581/296/c09.jpg" target="_blank" rel="noopener">Such shame.</a></p>
<p>Tired of making excuses, I finally did something about it! I grabbed hold of my bootstraps, and pulled like hell. Here I am. Internet, hear me roar.</p>
<p>By way of introduction, <strong>here’s what makes this website tick</strong>:</p>
<h2 id="kirby">Kirby</h2>
<p>The text you’re seeing now is stored on my server in plain-old text files, and served up by a content management system called <a href="http://getkirby.com/" target="_blank" rel="noopener">Kirby</a>. I could rave on and on about Kirby, but I’ll keep this short: it’s written in PHP, and is just my cup of tea. I recommend it on the regular.</p>
<h2 id="markdown">Markdown</h2>
<p><a href="http://daringfireball.net/projects/markdown/" target="_blank" rel="noopener">Markdown</a> allows writers to infuse bits of design — stuff like headers, links, images, lists — into their workflow, without needing toolbars and fancy word processors and never-quite-perfectly-functional online WYSIWYG editors. It makes writing for the web a breeze. Kirby automatically turns Markdown into HTML, so it’s the perfect combo of control and efficiency.</p>
<h2 id="less">LESS</h2>
<p>There’s <a href="https://www.google.com/search?q=less+vs+sass&oq=less+vs+sass" target="_blank" rel="noopener">volumes and volumes</a> of arguments about css preprocessors <a href="http://lesscss.org/" target="_blank" rel="noopener">LESS</a> and <a href="http://sass-lang.com/" target="_blank" rel="noopener">SASS</a>. When I started working on this site, I used LESS exclusively; now I use both pretty evenly. CSS preprocessors are absolutely indispensable, so if you’re not familiar, I suggest you jump on board.</p>
<h2 id="photoshop"><s>Photoshop</s></h2>
<p>I designed this sucker right in the browser. It probably shows: very few superfluous design elements, very content-centric. While skipping the static design phase tends to push my designs towards a minimal/typographic homogeny, the workflow minimizes project-crushing scrutiny. Topics for another day, for certain.</p>
<h2 id="maison-neue">Maison Neue</h2>
<p>Lastly, I feel the need to express my love for the typeface this site is set in. It’s called Maison Neue, and it’s from a foundry called <a href="http://www.milieugrotesque.com/" target="_blank" rel="noopener">Milieu Grotesque</a>. I absolutely love the trend web type is following at the moment — that is, ‘hybrid’ sans-serifs a la <a href="http://www.colophon-foundry.org/fonts/apercu/about-font" target="_blank" rel="noopener">Aperçu</a> — but needed to find a face that wasn’t quite as over-used as the aforementioned. Maison Neue is a superfamily, and contains another recent favorite of mine: monospaced variants.</p>
<hr />
<p><strong>In conclusion</strong>, I’ve striven to keep the number of tools involved to a minimum, the amount of design to it’s essential least, and the amount of content to what could be easily digested in less than 5 minutes. I’ll be improving it constantly, and doing lots behind the scenes. For now, however, I’m proud to say, after years of building them for other people, I finally have a website to call my own.</p>