In 2016 a bunch of us gathered together with folks from IXDA SF to reminisce and record our collective history from the beginnings of the dot com boom and bust cycle. It was fun to catch up with folks and share our various origin stories. I had forgotten about this until I was hunting for IXD history stories.
The video is long – my interview starts around 34 minutes in.
UX01 from IxDA San Francisco on Vimeo.
[February 2021] I wrote this short piece in graduate school—my first year—when I thought I would still be a graphic designer when I finished school. I think much of this came to pass in terms of technology as a tool—although the typesetters, film separators and other craftsmen probably wouldn’t agree. We also had no idea what was going to happen a decade or two later where the threat of technology hasn’t passed at all as we have seen with the rise of extremism amplified through social platforms
The increasing availability of technology to artists has made many artists worried. In the field of Graphic Design, professional designers worry that computers will enable the client to do their own design work thereby putting the designer out of work. This creates the notion that the machine will turn every man into an artist. Initially, as computers are cheaper and able to do more, this seems to be happening. Having seen the ease with which art and design is produced, clients are acquiring their own computers and are designating their secretaries “in-house†designers. These actions are threatening to the graphic designer – especially the bad and mediocre ones. They are being replaced by untrained non artists who may or may not be producing better work.
Eventually this trend will pass. Clients and designers alike will realize that although they can create with ease and speed, the inherent artistic talents and creativity of the graphic designer are missing. “Although we can call the computer “the ultimate machine  it is a device that is capable of making decisions only on the basis of tests and if/or questions, not conceptual or creative considerations. Like photography, it is both a tool and a medium.It is capable of linking the concept of information and art together, bringing into range completely new aspects of image processing, simulation, control, fabrication, and interaction.â€[1] In other words, a computer, like any other tool, doesn’t make a bad designer good. It just makes him fast. The great designers will become even better given the complexities and choices that the new technology offers and this in turn is passed on to the client. This phase will weed out the bad designers and will show clients the creative possibilities that happen when great designers and computers are combined.
Technology, initially will have a negative impact, but ultimately it will become a positive force in the art and design world as artists realize the creative potential that is available through the union of art and technology. It is going to open up a whole new way of creating and experiencing art.
Originally written Fall 1992
[1]Lovejoy, Margot, “Art, Technology, and Postmodernism: Paradigms, Parallels and Paradoxes,†Art Journal, Fall 1990, 261.
If you are looking for ways to put your User Experience Design skills to use this summer consider reaching out and volunteering for one of the various Civil Rights organizations fighting for racial equality and civil rights for all people.Â
Black Visions Collective
NAACP
Color of Change
Southern Poverty Law Center
ACLU (American Civil Liberties Union)
North Star Health Collective
Community Justice Exchange
GLAAD
ADL
There are many others both national and local where your talents could be useful.Â
If you are looking for articles, books and other resources here’s a good list to start:
https://docs.google.com/document/d/1RyNfs7R3UO1nYxPh3MStwR9sWayF6MgL0qog_WCEOps/edit?usp=sharing
Includes a good list of social media accounts to follow.
Stay safe, stay healthy and watch out for each other.
*full disclosure: I am a consulting designer at the ADL in their Center for Technology and Society.
In my piece, Using Mapping to Scope a System, I covered the process of using Mind Maps, Cluster Maps and Concept Maps/Models to help you scope the boundaries of a system and to identify what all the actors, elements and actions might be within the boundaries of the system.
In this piece I am going to talk about a suite of models that can help us understand what’s happening within the system. These are Stock/Flow Diagrams, Connection Circles, and Feedback Loops and I want to walk through how you construct these models so that you can start to understand the relationships and influences between elements within the system. The models will help us identify where those influences create behavioral reinforcing or balancing loops and will visualize positive and negative outcomes or directions happening within the system.
Understanding these connections and interactions can help us identify places and opportunities we can leverage to make changes that might affect the state or outcome of the system we are working with.
When I first started learning about these more specific types of system models, I had a hard time grasping how to read them, what they were for or even why would we do them. Now that I’ve been teaching this for a few years, I have started to integrate these into modeling projects I am doing for clients and find them helpful to get my head around the topic or software I am working with, especially if I am trying to understand the complexity from different angles.
Often the models are done to inform ourselves in order to make sense of what’s happening. But they can also be used to help mediate conversations and to clarify points of view and understanding about how things are working and where we need to put our attention. This series of models dives deeper into those interconnections and influences.
A stock flow diagram shows interdependencies and feedback within a system by identifying major accumulations and the elements and actions that increase and decrease those accumulations over time.
Anything within the system that can be accumulated is a Stock. This might be things like posts or articles read or page views or time on site or a thousand other things we see in digital experiences. It can also be an abstract concept like happiness or love. Generally stocks are Nouns which can be both concrete and abstract. To best identify which stocks to include in a diagram, we need to analyze the critical behaviors of the system. We might do this through Concept Models to understand relationships or Behavior Over Time graphs to see changes over time.
In the model, we represent the stock with by a box.
A stock may have an input flow (increase) or an output flow (decrease) or both. A flow can have multiple influences and can have stacked influences, i.e. one element can influence another which then can influence the flow to increase or decrease.
The Flows in and out are represented by an arrow into the Stock and an arrow out of the Stock. On each arrow there is a round circle with a lever on top. This symbol represents the levers that turn up or turn down the flow in and out of the stock. Like the hot and cold controls of a faucet.
The elements that influence the flow, Connectors, indicate that changes in one element cause changes in another element. Conceptually, these increase or decrease the flow. (Stocks can only be affected through flows, therefore you should not attach a connector directly to a stock.)
Using the example of Reputation in social experiences, if we write this out in a narrative form it reads something like this: An increase in posts, likes, quality, reposts, can increase (the input flow) a person’s online reputation within the system (the stock). An increase in self-promotion, ads, spam, or trolls in the comments, as well as a decrease of posts or decrease in quality of those posts, can decrease (the output flow) a person’s reputation within the system (the stock).
Writing it out can help clarify how this idea of reputation works but it is hard to visualize these influences in text and it’s a mouthful to describe. Frankly, my eyes glaze over a bit when trying to read it and understand what is happening. We can draw it out and visually understand the ins and outs and influences to the stock, reputation. See the two examples below.
Once you have done a simple stock flow diagram about an area in a system, you can start to identify other stocks in the overall larger system. Analyzing these in the same way, we can look at how these may be interconnected and influence each other. We may start to see the emergence of some feedback loops which we can further deconstruct through the process of making a Connection Circle.
More resources for understanding stock flow diagrams –
https://thesystemsthinker.com/step-by-step-stocks-and-flows-improving-the-rigor-of-your-thinking/
https://thesystemsthinker.com/systems-thinking-tools-a-users-reference-guide/
Using what we learned from making our Cluster Map and Concept Model, we can list out the actors of the system and the actions we have observed or understand to be true. Making a Connection Circle helps us tease out interconnections and to see which of those elements have some sort of effect on another element. We can use this to help identify feedback loops and then we can then dig in further to understand where we might find points of leverage to effect change within the system.
Making a Connection Circle step by step:
Identifying the elements
Documenting relationships
Showing increases and decreases because of relationships
Identifying Feedback loops
Working through both the Stock Flows of a system and reframing the information into a Connection Circle, lets you deconstruct and analyze the elements that could be important to pay attention to. You don’t necessarily need to do both, but it doesn’t hurt to look at the information through a different lens.
More information for making and understanding Connection Circles:
https://thesystemsthinker.com/learning-about-connection-circles/
To better understand the system, the delays, the changes over time and the causes of those changes, look at the feedback or causal loops emerging from your analysis. There are two types of feedback loops we see. Balancing and Reinforcing feedback loops and these can be either positive or negative. Don’t be fooled by their names though, a reinforcing loop isn’t necessarily positive—often referred to as a vicious loop. On the other hand, it can also be called a virtuous loop when the results are what you intended. What this means is that the behavior of one element influences another and that in turn comes back to influence the first in the same direction – growing or decreasing. The loops either keep the system in equilibrium or causes stocks to rise or fall steadily. The loop doesn’t always tell you what elements in the system are stocks though, so it’s important to work through stock flow diagrams as well to give you a more complete picture of what is happening.
Loops are either one or the other, reinforcing or balancing, but not both. If you feel like you are seeing both in a single loop, then more deconstruction and analysis needs to happen to tease out which parts are really the balancing loop and which parts are the reinforcing loop. A good rule of thumb to assess whether a causal loop is reinforcing versus balancing is to count the number of opposite directions (o / – ) or same direction (s / + ) indicated by the cause and effect. An odd number of o’s indicates a balancing loop and an even number or zero indicates a reinforcing loop. Think of driving and making a U turn. An odd number of U turns will have you driving the same direction as before and an even number changes the direction (analogy from the systems thinker.com Systems Thinking User’s Reference Guide).
In our social Good Online Reputation example, more shares of fake news on Facebook means more people will see it. The more people who see it, the more shares there will be. It’s a spiraling loop that reinforces itself. To keep this loop in some sort of equilibrium, an even amount of people would need to stop sharing than those who do, to balance it out.
Another example can be seen in climate change. The more C02 in the atmosphere, the greater the greenhouse gasses affect warming in the polar ice caps. The more the polar ice caps warm, the faster they melt, leading more sun being absorbed which leads to more melting. For a long time there were enough delays in the system, that people had a hard time understanding the cause and effect of greenhouse gasses to climate change, but as the loop has reinforced itself, with more people, more gasses, the speed of climate change has increased dramatically and the lengths of the delays has decreased.
Once you have an understanding of the various positive and negative feedback loops in the system, you can analyze where there might be delays in the loop (time delays between an action and when the effect of that action can be seen in the system) and what impact those delays have. What’s been happening? Why is this happening? When is it happening? How can we improve the performance? These are all questions that we can start to uncover as we analyze these dynamic relationships.
Gaining further clarity will also come from analysis using Behavior Over Time graphs to help define and understand the cause, effect and delays within the system over some time duration.
More resources for making and understanding Feedback loops –
https://thesystemsthinker.com/fine-tuning-your-causal-loop-diagrams-part-i/
https://thesystemsthinker.com/fine-tuning-your-causal-loop-diagrams-part-ii/
Each of these types of models can help you gain perspective into the workings of complex systems. By visualizing the different aspects and their effects on each other, you can gain a greater understanding of potential issues as well as opportunities for making improvements. You will understand which parts of the system influence and have effects on other parts of the system and whether that causes the system to expand/grow or contract/shrink towards it’s inherent goal or whether it is maintaining some sort of equilibrium. As you explore each type of model to triangulate an understanding of the system you can see that no single model tells the whole story but each leads us down the path to see and understand the bigger picture from a variety of perspectives.
Maps and models help us see and visualize all sorts of concepts. To get our hands and heads around a topic or a complex system as well as ideas and simple systems. We can model conceptual ideas, real ecosystems, objects and interactions. To help understand the boundaries of a topic or the landscape of a system we make models to visualize the unseen. When you just start out, it’s good to make diagrams and maps that explore those boundaries and to capture all the potential elements, actors, agents, and components, found within a system or a topic.
Here are three types of maps that can help your get started when trying to get your arms around what a topic or system boundary should be. The mind map, the cluster map and the concept map are three great starter maps and each informs the next to help you understand a topic or system. By making these diagrams we can determine what is in or out, what elements or actors we need to pay attention to and we can start to see relationships between the concepts of a topic or system. These diagrams won’t explain causes and effects or WHERE you need to pay attention in order to make transformation (that’s another series of models) but they will give you a sense of the actors, elements, components, and the scope to then move to the next level of understanding.
Start with the mind map to capture everything you can think of related to the topic or idea, then move to a cluster map to help organize the ideas into meaningful groupings and start fleshing out relationships and then to do a concept map to help further understand the relationships between the ideas, actors and elements, and to refine the important threads in the system or topic.
Many people have experience making mind maps and this is one of the easiest to get your head around. We do them when we brainstorm and its a good way to try and pull out of our heads and our research absolutely everything we can think of about a topic. It also allows us to free associate and to rabbit hole without negative consequences. Mind maps are good thinking tools for ourselves and our teams. It’s important to start quickly and be free with your thinking without censorship.
Making a mind map involves placing your central idea or topic in the center of the paper and writing down everything you can that comes to mind from that central topic. List the subtopics around the main topic and use these to stimulate your brainstorming down that subtopic. Moving out from the center, write down ideas and related words one after the other in a train of thought until it is exhausted. Place a circle or oval around each idea and connect the terms with a line. This isn’t required but I find it easier to follow the paths when the terms are separated from the connecting lines with a bounding shape.
The key to mind maps is that each arm off the center radiates out, getting farther and farther away from the central topic. Most ideas won’t connect from one leg of the diagram to another leg of the diagram but will be discrete trains of thoughts and in many cases, the outer ideas and concepts have absolutely nothing to do with the starting idea or with the concepts or ideas at the end of the other arms. That’s ok. Along the outer edges are the places you may find new ideas or elements or actors you may not have realized could be relevant to consider.
Questions to ask yourself as you move down an idea path include what, where, when, why, how and who, as related to the central topic.
The key with Mind Maps is to go back and layer in new ideas and connections to create a richer landscape if concepts. This will take a few passes to capture everything.
Other great resources for understanding Mind maps: https://www.informationtamers.com/WikIT/index.php?title=How_to_make_a_mind_map
A deeper look at how to make mind maps: http://www.fastefoundation.org/publications/mind_mapping.pdf
The cluster map helps you organize your concepts into groupings and to start to see relationships between those clusters and your central topic. Visually, the cluster map looks similar to the mind map, but the difference between the two is that the content in a cluster map is all related to the central idea and is organized around sub-topics. The cluster map forces you to group ideas and terms together that are related along each arm of the diagram. Additionally, concepts may be connected across the radiating arms.
A cluster map can be made to help organize ideas, actors, agents, elements or components seen in a system or simply to help organizing ideas for a talk, essay or other writings. It is a visual outline with no hierarchy yet. The cluster map can aid you or your team in determining which areas are important to understand or drill deeper into and can provide the first stage of thinking about a system’s architecture.
Making the cluster map starts the same way as the mind map. Put your main idea in the center of your page. Around the idea, place the next closely related sub-topics exploring elements, agents, actors, nodes, components. Thinking about each of these sub-ideas, brainstorm all the related ideas and place them on the map going out from the central idea. Tease out non-obvious parts of the system and draw connections and relationships between the elements. If some words are related to others or are parallel, place these on the same level out from the center. As you move further out from the center, your ideas and topic may be several levels out from the sub-topics or main idea but unlike the mind map, they are all still related to the central concept.
Make your cluster map after you make the mind map, and use the mind map as a reference to make sure you capture all the related ideas. Once you have exhausted all the topics, components and elements, look at where there might be relationships across clusters and draw those connecting lines.
The final map may look more like a network map, depending on how related sub-topics are, than a mind map which may look more random and less organized.
Other great resources for understanding Cluster maps: https://en.wikipedia.org/wiki/Cluster_diagram
The concept map, takes the elements, agents, actors and components fleshed out in the cluster map and organizes the ideas into a meaningful order that clearly articulates relationships between each item.
A concept map looks at the elements, agents, actors and components as nouns and the way they are related or connected as the verbs.
A well done concept map can be “read†across, down and diagonally in the form of a sentences or a story that explains a train of concepts and their relationships to each other and the whole.
To start a concept map, place the main idea at the top left of your page. Working to the right, look at what that item contains, what it uses, how it is related to, or is part of the next item. The verbs that generally show up in a concept map may include things like — which includes, is part of, can be, is, enabled by, with, should be, defined by, with the help of, contains, have, use, behaving as, represented by, to, called, a type of, etc.
Using the cluster map as a guide for related items, work your way across exploring and completing a single coherent idea. Then from each of those main concepts (noun), work down or diagonally creating new ideas, exploring the nouns from your cluster map and the verbs that join them together.
Each idea, agent, actor, component or element is placed in an oval. The ovals are connected by lines and the verbs sit on the lines between the concepts, connecting them and giving them context.
The concept map shows relationships between these ideas and between the threads through the connections and can help you or your team understand all the factors in play within a system. When determining where to pay attention, what things to build or where to make change, having an understanding of these relationships can help prioritize or group priorities together. Because the concepts are related and connected, we can see what might happen if an element or actor is changed or is missing.
Other great resources for understanding Concept maps: http://www.dubberly.com/concept-maps/creating-concept-maps.html
Mapping is a powerful tool that can be done by anyone and are great tools for brainstorming, coming to group consensus and for developing an agreed upon vocabulary. Starting with Mind maps to inform a Cluster map which then informs a Concept map is a great way to understand the scope of a system. These three kinds of maps can help a group determine the priority of importance for an element, actor or other component, and give form to a system so that it can be talked about, discussed and analyzed together.
This piece previously published on medium
The past two falls have found me teaching the basic Interaction Design Foundations course at CCA. It’s great fun and we get into the basics of task flows, wireframes, information architecture, concept modeling, components and micro-interactions and finally game design to push the idea of design, test, iterate, test all wrapped up in fun.
General
(Required text)
Communicating Design, ch 4, 5, 6, 7
Dan Brown
Design of Everyday Things, ch 1
Don Norman, Expanded edition
Scent of Information
Jared Spool
http://www.uis.edu/webservices/wp-content/uploads/sites/8/2013/02/Designing_for_Scent.pdf
Microinteractions in User Experience
https://www.nngroup.com/articles/microinteractions/
Atomic Design, ch 2
Brad Frost
Information Architecture
How to Make Sense of Any Mess,
Abby Covert,
http://www.howtomakesenseofanymess.com
Information Architecture for the WWW, ch 2, 3
Morville, Rosenfeld, Arango
Hats, Design Quarterly
Richard Saul Wurman
http://walkerquarterly.s3.amazonaws.com/DQ-145_Hats.pdf
Card Sorting
Card Sorting, ch. 1, 8 – 9
Donna Spencer
Card Sorting
http://designresearchtechniques.com/casestudies/card-sorting/
The definitive guide to Card Sorting
http://boxesandarrows.com/card-sorting-a-definitive-guide/
Analyzing Card Sorts with a spreadsheet
http://boxesandarrows.com/analyzing-card-sort-results-with-a-spreadsheet-template/
Dancing with Cards https://www.uxmatters.com/mt/archives/2010/09/dancing-with-the-cards-quick-and-dirty-analysis-of-card-sorting-data.php
Concept Modeling
How to Make a Concept Model
http://boxesandarrows.com/how-to-make-a-concept-model/
A Visual Vocabulary for Concept Models
https://medium.com/@cwodtke/a-visual-vocabulary-for-concept-models-f771b2b2e9
Concept map worksheet
http://library.ac4d.com/d/AC4D_designlibrary_worksheet_ConceptMap.pdf
Storyboards & Scenarios
Step by step guide on making storyboards and scenarios from the Austin Center 4 Design.
http://library.ac4d.com/d/AC4D_designlibrary_Scenarios_Usecases_wireframes_critique.pdf
Storyboarding How to
http://library.ac4d.com/d/AC4D_designlibrary_worksheet_Storyboarding.pdf
Scenarios worksheet
http://library.ac4d.com/d/AC4D_designlibrary_worksheet_Scenarios.pdf
User Research
Interviewing Users, ch 2, 3
Steve Portigal
The 3 phases of user research in product design†@FieldGuideApp https://medium.com/@FieldGuideApp/the-3-phases-of-user-research-in-product-design-1db8539f2477
Usability Pocket Guide
Dana Chisnell, et al
Prototyping
Paper Prototyping, ch. 12
Carolyn Snyder
Creating Paper Prototypes
https://medium.com/digital-experience-design/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f
Foam Core Construction
Rolf A. Faste, Faste foundation
http://www.fastefoundation.org/resources/foamcore_construction.pdf
Game Design
Game Design Workshop, ch 3, 4, 5, 9, 10
Tracy Fullerton
Challenges for Game Designers, ch 4, 5, 6
Brenda Brathwaite and Ian Schreiber
Loops and Arcs
http://www.lostgarden.com/2012/04/loops-and-arcs.html
Moving from management back into the role of an individual contributor — especially if you go out as a freelancer or consultant — can be as overwhelming and confusing as moving into leadership from an individual contributor role. Some of the reasons are similar but some are very different.
When I left my management job and entered consulting, I suddenly felt like a fish out of water. I thought that I had no idea how to do the work anymore — the tools had changed, the expectations were different and I was on my own in a way that I hadn’t been in more than a decade.
I knew what the work needed to look like at the end. I knew how to give advice and art direct, but I had forgotten the skills for making — actually I had forgotten the skills for getting started on a new project too. I also wasn’t sure how to collaborate with other designers anymore — that give and take in brainstorming and sharing files back and forth as you are making and refining. Presenting work-in-progress to clients also was a skill I had lost along the way of sitting in meetings and protecting my teams from irrelevant bureaucracy within the large organization.
Additionally, once I started consulting, not every job was big enough for me to have a support team, which meant I had to do all the design work myself. My very first project I knew what should be done and what I wanted for the end result in terms of deliverables and metrics for my client but I didn’t have the faintest clue how to start. I felt like I had lost my chops and that I had been bypassed by all the younger designers. I was overwhelmed with major imposter syndrome.
I eventually muddled may way through that project successfully and now nine years later I am equally at home doing hands-on design work as well as leading a team and even advising team members from other design firms that we sometimes collaborate with on big projects. I am happy to say that I can jump right into a problem, whiteboard with a team and then go make the things that need making so we can continue to have productive conversations and solve the big hairy problems. No more paralysis, no more fear, and no more worrying about what tool the cool kids are using because I am master of some, good enough with others and know when to pass. I have found a nice equilibrium between hands-on and managing from project to project.
So what are the lessons I learned from this experience?
If you are a manager, make sure you always have your hands in designing something. This is where personal projects come in handy. Use these to learn any new tools and to stay nimble.
This is a no brainer (pun intended). But is easier said than done. In my last management position I was up a couple of levels from the day to day work. Therefore I was in a lot of planning and administrative meetings and wasn’t directly involved in the product design sessions. That’s the work my managers led. This was one of my biggest mistakes in terms of letting that go out of fear of stepping on my manager’s toes. I recommend that you work closely with your managers and make sure you are invited to key brainstorm sessions, that you participate and lead them when it makes sense. Have special sessions with your management team to spread the ideas and cross-pollinate throughout your organization. This will keep you involved across teams, and again, keep you nimble.
Be responsible for something beyond the team itself. Designing a team is hard work and takes care and feeding but that work is undervalued in many organizations. Make sure you are presenting design work. When I became a manager, I had to work hard to remember to delegate. Then I delegated everything, moved up the ladder and suddenly I wasn’t doing the work anymore. I wasn’t presenting the work either and people forgot I was a designer or they had never actually seen me in that role.
In the large organization, especially when there are 360 reviews up and down the chain and sideways throughout the division, it is important that people know your strengths and value to the organization. If you end up just doing administrative work, this will bite you later, even if that administrative work is important and clears the way for your teams to do great work.
Much of my time in my last in-house role was spent building an organization and hiring and then doing the protection game for those teams. Although my first year was spent doing hands-on design and some product management work, by the time my team grew and we were deep into product and platforms, I wasn’t doing that kind of work anymore so there were whole levels within the organization who had never seen me in that previous role. I wasn’t viewed as a designer and I wasn’t valued for my design expertise and experience. I was also too naive and unskilled in managing up to know how to do the self-promotion I needed to make sure people understood the value I brought to the company.
Make sure you stay up to date with the software. Sounds extraneous, especially when you get to the point of doing strategy and higher level work. When I began consulting, I was pretty good with some software but I’ve had to play catch-up with the exploding array of tools for prototyping and as clients have rolled out specific software for their internal teams, I’ve had to learn those tools as well so we can share files. If you keep up while you are managing, then there is smaller gap if you shift roles.
Over my career, across all the various roles I have had, I can say without a doubt that solving problems for customers is the thing that keeps me going, along with mentoring and growing younger designers. As a manager and leader within a multi-level organization, I worked hard to mentor my managers and many of the individual designers across my teams.
I forgot about me though in the process and never really had a mentor inside the corporation (at least at my last job). I suffer from being an introvert and have typical female behavior where I wait for someone to recognize my strengths and contributions rather than exhibiting the toot-your-own-horn or the ask-for-guidance-to-level-up behavior we see so often with men. So I floundered a bit. I tried to be the mentor I wished I had but did a lousy job for myself and my long-term career at that corporation.
In hindsight, I would have done things differently. After nine years consulting, I am not afraid of anyone anymore when it comes to the job and asserting myself and the value of what I bring to the table. The CEOs that I work with don’t always know what they are doing any more than I do but we all figure it out quickly together. They have different strengths than me and that’s something I have tapped into where it matters for mentorship. Several startup founders I’ve worked with have been great coaches and mentors to me over the years. Mentors can be found in the most unlikely places if you look hard enough and remember that one person isn’t necessarily going to be everything you need to grow and get ahead. They say it takes a village to raise a child. It can take a small village to grow professionally — tap into your network and learn from everyone.
Hopefully these lessons that I have learned the hard way will help you in your professional career and help make your transitions between management and individual contributor smooth regardless of which way you are moving.
(See So You Think You Want to be a Manager for the other direction).
As part of my classes that I teach at CCA, interaction design patterns come up. Sometimes in their simple form of elements as captured in a style guide and sometimes in the context of the complete design and development toolkit like we are seeing today. I try to give my students a bit of history about this so that they understand that there was a time when these things didn’t exist, a time when we were all making it up as we went along, every time we designed a screen. Every time. And developers were doing the same, until usable and adopted code component libraries came along.
As part of my overview, I made this timeline trying to capture some key points:
and at that point the die was cast and the number of books and websites collecting, curating, and debating patterns exploded and evolved into what we see today; a well defined library organized from it’s basic elements to components to templates with designs and code all bundled together.
We talked about this concept back in 2004, 2005, 2006 when we released the public library, but as a large enterprise with fractured responsibilities we weren’t able to pull it off.
In today’s world we have a precedent set by Google’s Material Design as they tried to wrangle some sense into their suite of offerings across a myriad of devices, the excellent teachings and materials from Nathan Curtis, of EightShapes, who breaks it down in easy-to-implement strategies for teams, the great insight from Brad Frost and his Atomic Design methodology and internal teams who have the support of their large organizations working top down and bottom up to create and publicize their toolkits, some which use Frost’s approach and others that build up from the ubiquitous code kit, bootstrap.
The companies today who share their libraries have a vested interest in the cohesive user experience of their ecosystem, of which many parts and plug-ins and add-ons are built by third parties. The investment in a cohesive and seamless user experience with consistent user interface patterns of interaction from part-to-part or within related systems is critical to their success and making sure this is extended out to their partners and developer helps wrangle what previously had been a mess for the end users to wade through.
I recently read an article on Medium about the evolution of design toolkits. The author, Christian Beck, does a great job showcasing several current examples and pointing out that the Material Design kit was the first instance of a mature system, and he references Atomic Design and gives great tips for teams currently wrangling with developing, designing and/or maintaining a toolkit.
In the middle of the piece though, he has a section about the history of patterns. He references Alexander, then Tidwell and then he makes a leap to Frost. Skipping 10 years of fits and starts and breakthroughs and blood, sweat and tears of what in hindsight might be called change management for how we approach and document front end design within the digital industry.
During those missing 10 years (see above) we toiled and wrote and shared and evangelized and refactored and gave workshops and lectures and were told the idea of toolkits for designers was not relevant and boring and only developers did that or geeked out interaction designers. We worked to prove the ROI of these efforts and efficiencies to ramp-up time and build time and eventually we saw an evolution in the mind-sets of our colleagues and our bosses. But without this work, no one today would be so easily accepting of the need for a robust style guide that contains interactions and code.
Today we wonder how you could work (particularly in the enterprise with hundreds of scattered designers) without one.
As a person who has created a lot of different types of social experiences over the years and who has written about social experiences (Designing Social Interfaces from O’Reilly Media), I have accounts all over the internet and my phone is littered with social apps that I tried a couple of times and abandoned.
I try every application I hear about and I use most of the big ones (Facebook, instagram, flickr, goodreads, medium, twitter (1, 2, 3), google+ (yes I actually use google+ for collections), linkedin, pinterest, even etsy)
Most of these experiences trade in the currency of content. You read content, you consume content, you share content, you collect content. For some of us, we even create content. It’s the digital equivalent of filling the house up like a packrat or hoarder.
Talking with students the other night about metaphors for social experiences, they commented how much they liked Snapchat because of its ephemeral qualities. They made the case that it was like talking on a telephone to a friend or having a conversation in person. You will remember the conversation, you might remember exact words, but when you each go your separate ways, a record of that interaction isn’t saved to be reviewed or commented on later. You can’t go back to the stack of phone calls and look back a week or two or 10 and rehash it and remix it and comment on it again or share it with others.
I have had less experience with the more ephemeral experiences. The communication apps I use like Slack, Messenger and iMessage keep records of your conversations (I can go back years and re-read everything unless I delete it) and while the conversation may feel temporal the record of it is not.
Experiences with social activity streams keep revamping their algorithms so in some of these cases it almost feels ephemeral. They make it near impossible to go back to something again and revisit it or comment on it unless it suddenly pops back up, like a bad memory, because someone else made a comment or some action. But that’s not the same because if you look really, really hard you can find it again. It’s like trying to find that letter in the stack that you know you saw a week ago but now there is a week of mail and printouts from the computer on top of it — but it’s there and with a bit of perseverance you will find it again.
The idea of ephemeral experiences online is more a mirror of real experiences in the offline world and it seems to me that more and more of this newer generation is truly appreciating that perspective and gravitating to those apps. Things like Snapchat aren’t just popular because their parents aren’t on them — although that doesn’t hurt their adoption—they are popular because the footprint is light, the digital clutter is minimized. It’s a “leave no trace†philosophy.
Like a person feeling weighed down by clutter and stuff in my house, I am feeling the weight of my online presence. There are collections to curate and pins and boards to refine and add to, pictures to post and articles to write and comment on or forward on to everyone I know on every platform. I am overwhelmed by the need to feed the machines and to prove that I exist.
If I disappear off Facebook for a week my mother worries.
The ebb and flow of participation mirrors the ebb and flow of real life and making time for the online me versus the offline me can be as onerous as making plans with 6 people for dinner. It’s complicated and overwhelming and someone has to take charge and no one will be satisfied.
The tools that allow consolidation — post to Instagram and it tweets and posts to Fickr and Facebook all at the same time — allow that presence and vitality to be perceived by others but it’s still like an albatross around my neck.
It seems, so far, beyond Snapchat which has both a discovery aspect and a private circles of people who know each other aspect, the other ephemeral apps and experiences promote anonymity and for many of these they have devolved to mean spirited content and commentary rather than contributions that just expire but are still tied to a real person with a real identity.
I sometimes go out to make photographs and end up just wandering around looking. never making an image on film or sensor, never capturing the moment except in my mind. Those days are freeing and nurturing because I don’t have to manage the artifacts, the stream, the curation, the legacy and it’s wonderful. I just have memories of a beautiful experience.
I hope that there are online social experiences in the works that can capture that same feeling, that freedom from the baggage and footprint, that would welcome me — an oldie but goodie in internet years — because no one I know is active on Snapchat even as we also crave and need this freedom from digital permanence now more than ever.
I am currently teaching systems design at California College of Arts and we have been talking about the social architecture for social interfaces. Key to the foundation for social experiences is online identity and understanding the spectrum of ways that people can and want to represent themselves online. As designers we can give people the right tools to manage identity by understanding their needs and the various context’s within which they may be participating.
With the rise of fake news and the vitriol surrounding discussions on sites like twitter, reddit, Facebook—heck, pretty much everywhere — online identity and the pros and cons of real names versus pseudonyms versus total anonymity is even more important to understand as a designer than ever before.
That there are real life consequences to having a real name out there associated with political or social opinions — that never really go away — is something that I think many of us designing these systems hadn’t really thought deeply about before. We thought that owning your words, owning your reputation was incentive enough, along with social norms and a good community set of standards and moderation tools, for most people to behave in a civil manner.
Unfortunately, as the country has gotten more divided, even normally civil people, have erupted and lashed out, made threats (idle and real) and generally used the fact that even though they may be using their real name, they can still hide behind their computer screen.
On the other side though, the person receiving those threats (idle or otherwise) can’t know that this person is really hiding and using this computer-as-mediation to express their deep true opinions in ways that they would never do if they were standing next to that person. As someone who uses my real name on most social sites, I have had to leave occasionally because of death threats, wishes for death and general other bad behavior launched at me, that up until the last couple of years, I had never really experienced before.
For some, this type of behavior is not new. Whenever someone “otherâ€â€Šâ€” be it because of gender, race or sexual orientation or even their opinion — is in a community where a majority set of privileged people feel they own the experience, the backlash of those people feeling threatened in their privilege, will and does surface. One only needs to look at the treatment of women in the gaming communities to see what I mean.
Many of the experiences I had heard about before were in more insulated communities and often were layered under the guise of pseudonyms or anonymous trolls. What’s happening now feels bigger and more widespread. These behaviors are coming out of the darkness for all of us to see. And of course this exposes my latent privilege of working in tech and being white despite being. And despite being a woman, I hadn’t seen it much before because I hadn’t really looked.
So what are we supposed to do about this. For some experiences, offering the ability to create pseudonyms totally divorced from our real name and real life can make the difference. There will still be bad actors but the ease with which they can make connections to real addresses or family members lessens.
We can start by making sure that people are allowed to represent themselves in the best way possible for them — perhaps they are best known through a pseudonym in the context of certain topics — and that is how they identify online. That should be an option allowed for participation. Over the years, as activity has migrated from blogs to more mediated spaces like Facebook, which requires real names [which many still work around, my dog has a profile, showing that until someone complains the process for new accounts isn’t too strict], many of voices have disappeared because their online identity (with major reputation attached to that identity) was a pseudonym. Frankly, the internet is a sadder place with out these voices.
The ability to be totally anonymous should also an option. We know what happens here — lots of trolls, lots of fake accounts — but there can also be lots of safety for those marginalized while giving them the opportunity to have their voices heard.
As I have been thinking out this more and more, one of the things that I think is missing entirely, is a more human/e way of moderating and governing our social spaces. We — as in the tech industry — have made so many improvements with artificial intelligence and algorithms that we have forgotten that there are real people behind both sides of these encounters and that not all issues can be solved with technology. Sometimes it takes a person to really see the bad actor — especially if that bad actor is technically following the rules.
I feel like in many of the stories I read about the wrong person being thrown off a service, or being “Timed Outâ€, they are mostly because technology was making the decisions and not real people. Escalation is possible in many cases, but why should they have to work so hard, when they weren’t the one in the wrong? Why should it take escalation for the problem to be recognized and addressed?
I see many companies — especially smaller ones — who go through their checklist — and generally just abdicate the identity issue to Facebook or Google — without offering more appropriate options for identity. It also seems that because of taking the FB or Google shortcut, they then don’t offer or build in the checks and balances on the moderation/norms/standards side of things to keep things civil. In an early adopter community this generally isn’t needed because of self-selection, friends of friends type of growth that generally happens. But once out of that phase, there should already be the tools and people in place — over more sexy new features — so that as growth happens and the cultural makeup of the service changes, the community can survive for the long term.
I’d like to see UX designers working with social features really dig into the online identity spectrum and really understand all the pros and cons of each possible approach and the issues on both sides. [read more details about it here and here. Teams need to understand their target user — not just the early adopters — and those user’s concerns in context about how they are represented and how they are protected [read more about online harassment here] before just settling on the easiest solution. I am trying to raise the ethical issues, the pros and cons for each option with the next generation as I teach. But in the meantime, the rest of us need to step up.
We’ve been talking about these issues for some time now [a rape in cyberspace from 1993] [a list apart article from 2006] and we are still debating the pros and cons of real vs. pseudonym vs. anonymous presentations of online identity. With the rise of police states across the world and newly emboldened online bad behavior, it’s imperative that we offer better choices for our users that allow both participation and accountability while still offering some semblance of privacy as well as safety through more robust moderation tools.
You can also find me on medium.com and at tangible-ux.com
I have been working on this book material for awhile – I started writing the book about a year after we did our talk at the IA Summit and then it stalled as I began working on my Dr. Leslie book and then began teaching at CCA.
So to force myself to continue and to get feedback I am going to start posting sections here on my site (in a new area called the UX of Sales) and on Medium.
Enjoy.
In the spring I will be teaching the Systems class at CCA for the third time. I will be integrating systems which covers systems, mapping, information architecture with social interface design thinking as well since so much of developing a social design with reputation, identity, privacy, engagement and activities is essentially systems thinking. So while the mechanics are going to be basic systems, the perspective and content will be social interface focused. Additionally, there is a section on wayfinding and deeper dives into Information – IA, data modeling and content modeling.
Here is the reading list (google doc) that I have evolved over the last three years.
There will be readings assigned during the class from books and articles. The following resources are potential readings and good additions to your library.
REQUIRED BOOKS
Thinking with Systems: A Primer
Donella Meadows
How to Make Sense of Any Mess
Abby Covert
This book is available 100% as an online website at:
http://makesenseofanymess.com
Other readings will be assigned during the course as appropriate to the topic being discussed.
OTHER BOOKS & ARTICLES that may be assigned
The Systems Thinker, ch 3,4, 6, 7
Albert Rutherford
Think In Systems
Zoe McKey
Tools for Systems Thinkers – 12 Archetypes
https://medium.com/disruptive-design/tools-for-systems-thinkers-the-12-recurring-systems-archetypes-2e2c8ae8fc99
Systems Thinker
https://thesystemsthinker.com/wp-content/uploads/2016/01/PG01E-System-Archetypes-at-a-Glance.pdf
Systems and Us
https://systemsandus.com/archetypes/
Using Mapping to Scope a System
https://medium.com/tangible-ux/using-mapping-to-scope-a-system-b467564a80e2
Waters Foundation
http://www.watersfoundation.org/webed/mod6/index.html
The Fifth Discipline, Chapter 3
Peter Senge
Mapping Experiences, Chapters 2, 3, 11, 13
James Kalbach
Systems Thinking for Social Change, Chapter 4
David Stroh
Ambient Findability, Chapter 2
Peter Morville
Mind mapping
Rolf Faste
http://www.fastefoundation.org/publications/mind_mapping.pdf
Ultimate book of Mind Maps, ch 1, 4
Tony Buzan
Wayfinding Handbook, ch 2.2, 3
David Gibson
3 Placemaking Lessons from the Magic Kingdom by Jorge Arango
https://uxdesign.cc/3-placemaking-lessons-from-the-magic-kingdom-4263deb29b2f#.rafk8vrc0
The History of Information Architecture by Andreas Resmini
http://journalofia.org/volume3/issue2/03-resmini/
The System of Information Architecture
Peter Morville
Journal of Information Architecture
Designing Social Interfaces, Chapters 1, 2, 4, 14
Erin Malone and Christian Crumlish
Neighborhoods and Subcultures in Social Design; Welcome Area; Who You Are Versus Who You Present Yourself to Be Online
Erin Malone
http://www.emdezine.com/neighborhoods-and-subcultures-in-social-design/
http://www.emdezine.com/welcome-area/
http://www.emdezine.com/who-you-are-versus-who-you-present-yourself-to-be-online/
Anti-social media, Introduction
Siva Vaidhyanathan
Tripartite Identity
Randall F Farmer
http://habitatchronicles.com/2008/10/the-tripartite-identity-pattern/
Pixels And Place, Chapter 8
Kate O’Neill
Grouped, ch 2 & 3
Paul Adams
Some Obvious Things About Internet Reputation Systems
Tom Slee
http://tomslee.net/2013/09/some-obvious-things-about-internet-reputation-systems.html
Web Reputation Systems in the Real World
Randy Farmer
https://www.linkedin.com/pulse/20140619171137-8919-web-reputation-systems-and-the-real-world
15 Ways to Change Behavior – BJ Fogg
http://www.behaviorgrid.org/
Systems games + other games we play
Systems Thinking Design Pack – exercises for the classroom
Institute of Play
http://www.instituteofplay.org/work/projects/q-design-packs/q-systems-thinking-design-pack/
http://www.instituteofplay.org/
http://www.instituteofplay.org/work/projects/systems-thinking-games/
Games and exercises for the classroom
Creative Learning Exchange
http://www.clexchange.org/
Pandemic, Â Forbidden Island & Forbidden Desert
by Matt Leacock
Social Mania
by Erin Malone & Christian Crumlish
Videos
Systems Class Videos – a series of how-to’s and explainers
https://www.youtube.com/watch?v=rDxOyJxgJeA&list=PLADcUFruM-1Am0FfOp9c0l8pRpOx_ZKsV
The Invisible Gorilla
http://www.theinvisiblegorilla.com/gorilla_experiment.html
TED Talk Make Data More Human
http://www.ted.com/talks/jer_thorp_make_data_more_human
I am thick in the middle of research for my book and I am having a blast. The rabbit trails that I find myself traversing is reinvigorating my love of the trivia and interesting things you can find on the internet and in the library. That serendipitous wandering that I used to do when the internet was new and less curated. I have also found myself actually walking into my local and the main San Francisco Library after many years of just grabbing things online.
Begriffen… (1528) – page from the Grabhorn Collection in the SF Public Library
By the way, if you are in San Francisco and haven’t been there yet, the main SF Library is fantastic. It houses the Grabhorn Collection (http://sfpl.org/index.php?pg=2000006101) which was started by Robert Grabhorn and according to the library website “it had grown to include almost every typeface, printer and publisher of note from the past five hundred years. The collection is particularly strong in early type specimens and the work of sixteenth century French and Italian masters. Also of note are fine press editions of twentieth century letterpress printers, including printers’ ephemera. The collection supports the study of printing, papermaking and bookbinding with a large reference collection of books, pamphlets, and periodicals.â€
More info about the collection.
The latest rabbit trail had me spending time at the Letterform Archive (http://letterformarchive.org/), a new graphic arts archive that was created last year out of Rob Saunder’s personal collection, into a non-profit repository of graphic arts, printing, typography and other related ephemera. They are also allied with Cooper Union for a post graduate certificate and workshops on type design.
I have been there several times and am always amazed that they let you actually touch and hold and page through their materials. If you ever wanted to see the original of the famous Bodoni “Manuale Tipografico†or hold copies of the early 20th century periodical from Germany, Gebrauchsgrahik, as I did yesterday, or see a wealth of cool posters, then this is the place to come.
I spent an hour and a half looking at copies of Gebrauchsgraphik from 1927 to 1934 and was immediately transported into the past and experiencing the birth of modernist graphic design. There were feature articles on Herbert Bayer and the Bauhaus, on poster design from France and Germany, features on A.M. Cassandre, work by E. McKnight Kauffer, Georg Trump, Lucien Bernhard andothers from the turn of the century;Â cover designs by Joseph Binder, Piet Schwarz, Herbert Matter the great swiss poster designer.
Once the magazine became international in 1927, volume 4, there are articles in English and German and we see the work of Dutch, Belgian, Swiss, British and American designers. There were showcases of the best advertising happening in the US from the Art Director’s Awards in New York City in 1930 and 1931. In those advertising pieces, you can see the beginnings of change from the old-school turn of the century style type and images and compositions to the new avant garde, asymmetric layouts and sans serif fonts being used. It’s fascinating to review and the era reminds me so much of the layers of change we ourselves have been through in the last 20 years of web design improvements.
I highly recommend visiting the space if you have any interest in any of these topics, they will give you an overview of the collection and leave you to peruse some of the favorites. If you have a specific interest, you can request to see that material and spend your whole time looking at one thing or one group of things (books, periodicals, posters, ephemera). They block appointments out in 1 1/2 hour blocks. They are located in the Potrero Hill area of San Francisco.
I expect that during this research process I will be meandering into other interesting places and will share them as I discover them.
Last semester I taught a class. This semester, I have embarked again on the journey that is “writing a bookâ€. I have picked back up, the project I started in 2004, which was a remix of my thesis project from graduate school—a book version with narrative and history about Dr. Robert L. Leslie and the Composing Room which published PM and AD Magazines. All aspects of this subject are important influences and drivers in the emergence of modernist graphic design in this country.
But this post isn’t about the book per se.
This post is about the discovery and the revelation of the lie we have all been promised with the digital age and how things would be safe forever from rot, from fire, from decay.
When I worked on my thesis project, I did the final thesis as an interactive piece in Hypercard. A piece of software that isn’t runnable on any modern system 20+ years later. The discs with my thesis are just pieces of plastic to add to the landfill.
I digitized video from a VHS tape, which I am having digitized again because I can’t open the original Premiere 5.1 files on any of the 5 modern apple machines that I currently own. I still have an old 8600 packed away somewhere that I kept just in case—but I have no idea how to go forward from an old format in a piece of software that is still being made but doesn’t open old versions.
I am having that VHS tape and the cassette tapes professionally digitized now, because I don’t own a VHS player anymore and I am afraid the tape is so old it might break in a consumer player. I hope the tape doesn’t disappear along the way. Once I get those digitized files, I am not sure what to do with the discs or how long they will last.
My text files from grad school are just bits on a CD. A CD which I can’t actually open on 4 out of the 5 machines because no one makes computers with CD’s anymore. I had to go out and buy a portable CD drive just to see what was on these discs. I had to go buy a portable cassette player to hear the audio tapes that I had made when I interviewed the designer Hans Barschel as part of my thesis work. The text files I made of notes and designer biographies and other related aspects of the project were made in long defunct programs like MacWrite and Quark Express.
My writing work from my initial book efforts 10 years ago were all done in Microsoft word and I can happily say that those files opened seamlessly and were effortlessly updated to the newer version. I never thought I would say this but Yay! Microsoft.
As I have been working on the research for this project, I am thankful for the analog world of the time. I have found magazine articles, books, photographs, letters and all sorts of ephemera including the full run of the magazines, lovingly saved in archives around the country. They aren’t reliant on changing technology to view and are accessible if you can get there in person—although more and more of these libraries are digitizing their collections—which I worry about. My photocopies of articles I made 20 years ago are more accessible than the original writing work I made at the time.
I am simultaneously distraught at the loss and resigned to just letting it go.
I am saddened that our children and theirs won’t have access to the riches of photographic memories and textual artifacts like we have from our ancestors because of the effervescent quality and short shelf life of the digital “revolution†and the need for ever-changing, always improving software and platforms which ultimately render the things we save into pixie dust.
Combine an Interaction Design program, with a crash course in visual design, mix it up with how visual design principles, practices and approaches intersect and influence designing the full user experience and you get the class I am teaching. We are doing a crash course in the basics – gestalt principles, typography basics, type history, wireframing basics, prototyping basics, color theory and application. Later in the semester we are doing a full brand personality – brand development module, creating style tiles and a web style guide, data visualizations and dashboards and then designing mobile and web. It’s a great refresher for me to pull together everything I know in this space from my graphic design degrees and from my practical work experience the last 20+ years and try to distill it all down into a semester. It’s an exercise in simplicity design.
I am posting my presentations after each week’s module. Follow along if you will.