Visual Design becomes Language

I’ve recently become captivated by a specific power of new visual design tools such as Figma and Miro to help very different kinds of minds brainstorm, visualize a company or project and communicate clearly. Somehow visual brainstorming seems to provide an “overview effect” for all stakeholders.

I’ve been working in the “design thinking and visual collaboration in the enterprise space” for a while but these tools can be used for anything: for planning a party, a camping trip, a community garden, a personal website or blog. There’s something about new tools making it easier to speak together visually that is a delight. And there’s something special about being in the “meta space” -> not literally the technical layout and design space (as Figma leans towards) but in the larger creative ideation space of the major ideas (as Miro leans towards).

When a team sits around a table (real or virtual), and arranges post-it notes or more complex infographics, charts, timelines, visually relating things to each other, draw images, arrows, lines and words they’re doing some kind of tangible ideation that seems deeper, more powerful than other approaches.

In fact the group product vision sketches I’ve participated in end up being incredibly durable. Often end up as a kind of “pitch deck for ourselves” — (and often end up as a pitch deck for others too). This act seems to be very different than simply adding more bullet points to a long and tedious google document. There’s something alive, memorable, and unifying here.

At the same time I have to admit don’t entirely “get” why playing with post-it notes is so powerful, so I want to explore possible reasons, and try to provide examples to make this more concrete.

1. We love to work together

First of all at an abstract level, for us as individuals it is important to live a life with meaning, to have a feeling of understanding of what one is doing, and how our own actions are durable, fit together with a broader world trajectory.

But a single person by themselves is not even a human in many senses of the word. A few people together - sharing work, sharing points of view, navigating and negotiating and working to see and comprehend each other, to reach consensus - seems to better fit many of the qualities we call ‘human’. We are a highly social species that is happiest with a shared purpose and sense of accomplishment.

We rise to be human by our connections. We exist in a shared reality, connected into clusters mediated only by our contact points, guttural utterances, wild gestures, scratches on the cave wall.

2. We love to communicate visually

In our post-scarcity world, where artifacts are infinitely reproducible, we can only persuade, can only signal quality, focus and intent with our aesthetics. And as consumers we are experts at picking apart the slightest defect in a design layout; poor cropping, kerning, font choices, color choices. We instantly categorize what we see into a rich design meaning that we’ve spent our whole lives learning.

Our minds perform a calculus, incorporating the pitch bending, the subtle humor; a fresh style with a backwards reference, a Shepard Fairey print or a retro 1920’s bauhaus or satirical brutalist reference. Visual media is music; producing the full scalp frisson of a satori moment when done well (or an assault on the senses when done poorly).

This visual grammar up until now has been spoken only by a high priesthood of design. We were (in the past) either domain experts, often working alone in actual hands on labor of crafting a visual representation, or (mostly) were simply consumers regurgitating what others created.

Today there’s an expectation of a new literacy. Looking online you’ll see an endless series of course on graphics design. This overlaps with production management, design thinking, art and aesthetics. It’s worth looking at Google Material Design, and Tufte, and online design courseware, SlideShare, Powerpoint, all tools that are part of the arsenal of visual persuasion.

What’s novel is there is a new accessibility. Today a team (of non visual people) working together can generate a kind of infographic view; that is somewhere between a laundry list of deliverables, and a vision document. We can take what we used to do (post it notes on a wall) and migrate it to a more durable digital version.

Of course perhaps at some point we may suffer infographic fatigue in the same way we suffered power-point fatigue, but right now it seems delightful.

Ivan Cash “infographic of infographics”. Wired Magazine says “AN INFOGRAPHIC, OR information graphic, is designed to convey a huge set of data in a fraction of the time that it takes to wade through a dense, numbers-heavy paragraph. The best ones are also entertaining. According to Stew Langille, the CEO of data visualization start-up Visual.ly, the pageview for a newspaper infographic is about 30 times that of a text-based article.”

3. Boundaries and hierarchies are blurring

We operate in many different domains— but these boundaries seem to be blurring. Roughly speaking:

  1. Work and play. As our tools become more expressive work arguably becomes more creative and “playful”, allowing more of our whimsy, identity, exploration and risk without consequence. For work there are rewards for seeing through noise to clarity, to reach the next challenge, and for play there is a similar infinite game of play itself; to simply continue playing.
  2. Personally and professionally. We seek to persuade ourselves and our peers, and in doing so we reach for richer tools to pitch evocative compelling narratives. There’s a rehearsal quality to work we do for ourselves; as if we play-test ideas on ourselves and then share it with others. Here our jostling is more clear; we want to show up as respectful but also as valuable while not overbearing contributors.
  3. Passive versus Active. A real shift is occurring from being merely passive consumers of rich media to actively engaging, actively creating rich media, sharing, drawing, sketching, making our own power-points, art. A whole generation has grown up with the idea of getting up in front of a bunch of people at a bar and not doing karaoke but instead presenting a pitch deck.
  4. Textual and Visual. As creative tools become more accessible, there’s a gravitation towards visual media. The “tone” of exclusivity and value lingers and visual media is somehow seen as more authoritative or valued. The same three items represented as three colorful icons is somehow more persuasive than the same three items in a bullet list. We are a species with visual wetware, with dedicated neurons that delight in seeing shapes, patterns and colors, that grasps hungrily at visual representation like grasping at a fresh piece of fruit spied underneath a leaf.
  5. Solitary versus Group. Another blurring seems to be simply the ability to collaborate as groups. Where work was simply hard to overlap on — where there was only room for one mind at a time — now tools simply allow that return to group barn-raising that we seem to have evolved around.

4. Process is valuable

It isn’t just that the products of these tools are valuable, such as producing beautiful visualizations, but that the process is valuable, the act of being able to work together over time is making us more invested in each other.

Real-time collaboration is special, and very human. These tools are not merely helping us get stuff done, but they are also changing us, bringing us back to a way of living that we used to take for granted. We exist in backdrop of change; in a burgeoning work-remote culture, with radically new challenges but also with radically new capabilities. It’s worth celebrating where our tools are succeeding. The real promise of these new tools may be to let us collaborate and work together in real-time in a virtually embodied way, beyond words, together.

5. Communicating is hard

  1. Communication. How do teams make up out of radically different members communicate? How does a team specifically and technically plan work, set timelines, deliverables. How are stakeholders able to participate and have unique contributions heard?
  2. Persistence of Vision. How do teams have persistence of vision? How does a team stay attached to a vision in a fickle world with constantly changing goals and pressures? What does it take to form a vision that is so clear that everybody can refer to it as a “single source of truth” in a durable way?
  3. Defending the Vision. How does a team kill bad ideas or avoid a “fits and starts” problem where they get excited for a while but then fade as their energy is exhausted? Having a persistent vision means also knowing when to hold onto a vision, or when to “change loops” -> to move to a next vision.
  4. Unknown unknowns. And specifically how does a team do new things? New things are especially hard to do; with unknowns and unknown unknowns — sometimes with unknowns that nobody in the world has ever encountered.

The process of working together can itself be divided up into a few pieces:

  1. Hearing -> making sure all stake holders have a voice.
  2. Speaking -> gracefully participating.
  3. Comprehension -> understanding a project; projects can be complex!
  4. Integration -> synthesizing many points of view.
  5. Durability -> holding a durable record after an intense design collaboration.

Typically large human works are so complex that they require both specialization and organization to be accomplished. It can’t be simply done by people wandering around and picking up a piece that they see in front of them. For example here are three typical development patterns:

  1. Waterfall Model. Often used in formal hierarchies with a clear division of labor. In a typical video game development cycle for example a designers will (often in prose or even just verbally) describe the experience they want to see. This typically goes to storyboarding, where visual sketches are produced. Producers then attempt to formally capture the vision, producing documents, timelines and often a kind of “Design Bible” that is a single source of truth. Then typically an engineering team builds a game authoring framework that lets a team of level builders arrange virtual objects into game levels. Separately modelers and artists embellish the blocked out interactive experience with art assets. Here the flow is a pyramid; it comes from a few minds to many, with clear divisions of labor. There is some back-propagation with artists and engineers providing domain specific expertise to better inform the game mechanics.
  2. Design Charrettes . Another pattern is to try identify the stakeholders, and then bring them together in some kind of design retreat for a few days while they attempt to search, or exhaust, the design space of ideas; (hopefully capturing all the edges). This often is a sticky post-it note kind of affair; with whiteboards, coffee and long hours. It can be exhausting but exhilarating. There’s typically often a facilitated process, and the facilitators often translate the scrawls and sketches into a compelling visual representation.
  3. Consensus Building. Typically here an initial proposal is circulated with a request for comment. Comments are collected, collated and iterated upon until the vision stabilizes. Often there’s some form of shallow simulation or model to “play test” the idea; even if it is just an economic model. We often see this in state and local government.

In the above we see specialization of roles. There are many different stakeholders such as:

  1. Domain specialists -> those who have special insights into the issues.
  2. Leadership -> typically funders or people driving the work.
  3. Facilitation -> creative facilitation to simply help people share effectively.
  4. Design ->typically sitting between form and function of a product.
  5. Architecture -> focused on specifying the implementation of product.
  6. Production -> typically producers ‘own’ the deliverable process
  7. Labor -> the people who actually do the hands on work

This is where we get to the crux of the question. Different stakeholders have radically different ways of communicating. They speak very different languages. They often literally cannot hear each other; and they don’t even know that they can’t hear each other. Words elide past. There is also a “time versus size” challenge gradient: our minds simply are often unable to comprehend big issues fast enough to navigate them.

What we do is we endlessly make documents, diagrams, and charts of various kinds to capture and share and establish a common vision. Today we tend to work virtually, even when we’re working together. We’re using a whole generation of new “taken for granted” corporate appliances: slack, google docs, power points, zoom — and more recently Figma, Miro and many other similar tools.

The challenge circles back to the core issue that defines our humanity — how to speak together — in a timely manner so as not to fumble opportunity. How to move from being individuals to being groups.

6. New tools can help

Our tools all service both tangible and intangible roles such as team bonding, social signaling, recipe memorialization, digital twins of real world systems, brainstorming, schedule planning and so on.

Figma and Miro specifically however have unique new contributions to make.

Figma is somewhat like a multiplayer game for corporations. It has templates that allow users to layout a user interface, place text, place images, to design a billboard, to paint a picture of a timeline, to capture a mood board of photographs for visual reference. It tends to be more focused on technical design: the actual translation of a user experience to a product front end. It’s a powerful tool, with fine grained style and layout controls — and with some incredible engineering behind it (written in WASM for example). Figma has also just released Figjam which aims at the design space that Miro seeks to capture.

Miro is similar to Figma but it targets a more abstract space of “design intent” rather than “design realism”. So much of what we do as groups is more about capturing a consensus agreement on a vision overall. Miro lets you stick a bunch of virtual post-it notes to a virtual wall, and it also provides many templates for common tasks such as kanban, or user journey stories and other kinds of documents that are common in businesses.

But there’s more to both of these tools — and here’s why I specifically feel these tools are special and worth looking at more closely:

  1. Participatory. With both Figma and Miro you can bring stakeholders to the table and (with the right creative facilitation) the participants can engage in a kind of real-time barn-raising. While arguably a group mind isn’t always as fast as a solitary genius, it allows for parallelization, many minds can work together over a longer period of time, synthesize more points of view. In doing so we exercise a much needed sense of group participation. It becomes in some senses not about the product, but about the dance itself. Even if these tools were not actually used to sketch out product, simply having a place where people can play together would probably make a difference to a companies success.
  2. Tangible Objects. Part of what makes visual design so gratifying is that it is like seizing a treasure from a dream and making it real. Iconography seems to capture the locus of an idea; to make it real — give it substance. Words also can capture an idea; yet as we shift to more visual representations (say a flowchart or a diagram or even a post-it note) somehow the idea seems to be more graspable, more real. Part of this is a trick of the mind. Humans love feeling that there is a tactile something. The ephemeral world of ideas can be frustrating because ideas keep slipping around and falling off the table. There’s something primally, unconsciously, deeply satisfying about bright colors, shapes that feel durable even if that is an illusion. It is a clever game like mechanic and like most game mechanics it is subconscious — underneath the actual utility or value. Part of this is that our brains have significant wetware dedicated to the segmentation and manipulation of physical artifacts.
  3. Atomicity. We love to feel like we understand the scope or boundaries of a space. When an idea is presented in a visual form, in a card like layout, it comes across as a kind of conceptual gestalt. Three items represented with three graphical icons feels more durable than the same three items as bullet points. In a sense this is part of a visual fatigue that we’ve had with power-points and pitch decks.
  4. Constrained. Miro in particular takes away many powers, forcing one to stay focused on a more abstract realm. It turns out there is significant design thinking to be done entirely independently of the actual product. Miro tends to be “right sized” for early design ideation — it becomes a visual grammar letting participants discuss the right story or meta design.
  5. Aesthetics. Both Figma and Miro go for a minimalist and somewhat neutral affect. They’re simply nice to use. This is useful in reducing the visual noise as well. All instruments have a voicing of some kind and while these tools will probably heavily shape a generation of products, it remains to be seen if we will see a “Miro” look or a “Figma” look.
  6. Design Drift. There’s a need for a single source of truth. Text documents are terrible at this. One is never sure what is going on. Versioning and version history are part of this, and they are helpful, but part of this is simply being able to look at the current view and simply “see” what the current vision is.
  7. Golden Halo effect. There’s a way that successful teams are similar to the successful technologies they use. Call it a golden halo effect or a virtuous circle effect. Figma itself as an organization has successfully executed repeatedly in a highly competitive space; breaking free of “loops” that often trap ventures in diminishing returns. Simply using tools made by smart people, who have insight into group process, makes one more likely to succeed. Using git makes us smarter, using slack makes us smarter — other people have worked hard to understand how we work together and provided scaffolding that while arguably constraining our degrees of freedom also helps us make more progress in a specific direction.
  8. Gaps. Notably in visual design what occurs is a gap tooth effect. Gaps in design intent jump out visually. Simply laying out information in say a SWOT analysis lends itself to wanting to fill in an empty quadrant; the mind of the observer is less likely to elide over a missing topic. Pure text is less likely to produce this kind of heightened awareness.

7. There may be only a few new core patterns

Visual design language is a catch all phrase. But it may not be as overwhelming as it seems.

It’s worth at least enumerating the specific kinds of visual documents that people often produce (often with a creative facilitator as part of the process):

  1. There’s a concept of a “team alignment map” which is simply a kind of visual grid where stakeholders respond to a few simple questions about their product, such as what is good, what is bad, what is missing. Effectively sparking thought and a form of structured brainstorming. We see this in meeting reflections as well (what did you learn?, what was surprising?, what should we fix?, what did you not get?).
  2. Similarly there are many kinds of four-quadrant maps. SWOT analysis is one, but often any two axes can be arranged into quadrants. For example say “public versus private” and “free versus commercial” and then various market opportunities can be mapped against that.
  3. Rose, Thorn and Bud is another form of brainstorming; often used to elicit critical inspection of an idea before the team is too invested in it.
  4. Customer Journey maps are a formal way of walking through a customer experience; this can be a customer acquisition experience, or the experience a person has using a product — which pages they go to — what they click on — what constitutes a success or failure.
  5. Concept Maps. We often tend to layout ideas based on some kind of prototypical core, with other contributing concepts around it, or with a drill down on specific aspects. There’s quite a bit of formal social science behind these models of how we think (see George Lakoff) and these are a primary pattern.
  6. Timelines and Gantts. There are many flavors of these. Even just breaking deliverables into R1/R2/R3 helps focus. Notably if a given deliverable has to move from say R1 to R2 it can be done without feeling like it is “lost”.
  7. Flow Charts.
  8. Dot Voting.
  9. Kanban.
  10. PI Planning (Kanban backlog review proces)
  11. Bulls Eye Diagrams. Here there’s an idea of centrality, and sticking post it notes on a bulls-eye to help identify what is most critical.
  12. Parking Lot. This is a technique to take ideas off the table while reducing the anxiety or feeling that the idea will be lost.
  13. User Interface Flow Diagrams.
  14. User Interface Layouts.

Create say a visual collage of where you want to be in the next five to ten years, or the parts of a project you want to see realized in some granular detail. Try do this in a slightly compelling way, pretend you’re pitching for funding even!

In particular I challenge you to try do this with friends; to spend an hour with a group of friends and see if you can break down an idea into parts, that makes that idea more tangible and more real to you.

If you’re willing, then what I’d like to do is collect and share examples of this kind of thinking (again only if you are willing to share) and explore the strengths and weaknesses of tools like this, and how they help or hinder us actually do what we want to do with our lives.

SFO Hacker Dad Artist Canuck @mozilla formerly at @parcinc @meedan @makerlab