THE OMNI SHOW

Andrew J. Mason: You are listening to The Omni Show where we connect with the amazing community surrounding the Omni Group's award-winning products. My name's Andrew J. Mason, and today we learn how Charlie Brewer uses OmniGraffle. Well, welcome to everyone to another episode of The Omni Show. My name's Andrew J. Mason. Hope everybody is doing well. Today we have Charlie Brewer. Charlie's the co-author of Designing Interfaces from O'Reilly. He's a director of user experience in product design with over 25 years of experience in designing and launching B2B and B2C digital products. Charlie, thank you so much for joining us today.

Charlie Brewer: Well, thank you. Thank you for having me and thank you for that kind introduction. Very happy to speak to you today.

Andrew J. Mason: Well, let's dive right in, Charlie, I'm really intrigued by, and I'm sure our audience is as well, how somebody ends up being a product designer with over 25 years of experience. In internet years 25 is quite a long time, so having that career trajectory for such a long time it's a really specific path. Walk us down the road. How did you end up doing what you're doing today?

Charlie Brewer: Certainly, certainly. Well, I'm lucky enough to have been a user experience designer, design leader, software product guy for over two decades now, but this is not my first career. I am a proud liberal arts graduate. I am rooted in the world of ideas and culture and humanity and why we make tools and create things. Now, that sounds rather grand, but I am focused on the human side of technology. I think that's a much clearer way of expressing it. And in particular, what is the experience of humans using the software and the hardware that dominates our world so much? But to answer your question about how did I get into this, my first career was actually teaching. I was an instructor and later a lecturer at university for English as a second language. Learning languages is something that I would like to be better at, but I certainly enjoyed helping students learn English. And there's a lot going on in what do we need to do to help people acquire skills or achieve their goals and structure the presentation of information and practice so that they can achieve what they want to do, which is either to speak or read or understand or interact. I ended up, or found myself, teaching both English as a second language and also running the computer aided language learning laboratory at a science and technology university in the Middle East. I was there for a number of years. And this was at the dawn of the multimedia age, we were starting to get the first CD-ROMs and this whole new world opened up of taking us beyond the text-based language practice activities that we had into a whole world where there was a picture and sound and video and audio, and most importantly interactivity where you could interact with the computer. And I had this huge brain explosion where I realized we can now put the entire classroom experience, including feedback, in the computer. I knew right then that I wanted to design that experience. All teachers create lesson plans and they think about what they want the students to experience, learners to experience in the classroom, if you will. And that just transferred to me at least right away to let's orchestrate, create curate experiences on the computer for users so that they can have the outcomes that we want. This also coincided with the birth of the World Wide Web. I know I'm dating myself here. But at the time it seemed like a different kind of venue or media. It was interesting, we can now use our computers to sort of read things and interact with things. But the transition to digital design was learning about a new job that was becoming popular in San Francisco where I had come from and that the companies and agencies were employing information architects to figure out how to organize websites and how to make the navigation easy to use or have it make sense from the user's point of view. And when I started reading about this and when I read one of the first major books in the field, the Polar Bear book, as I call it, Information Architecture for the World Wide Web from O'Reilly, went through that and I said, this is the job for me. This is what I really want to do. Came back to San Francisco, went to school at San Francisco State University and was lucky enough to get a job as an information architect at a digital design agency, back sort of that first big explosion of the web. And I'll wrap up my story by saying working at an agency I had the chance to sort of really both do and learn because there were very few schools at the time. But, what we now call user experience design was learning about the importance of usability and how the brain is understanding what it's seeing, not only information architecture, how we structure information spaces, but then interaction design, like how do we engineer a back and forth interaction between the human and the computer, usability testing and finding out can people use what we're designing. And ultimately where I'm very focused now is let's try to go out and understand and research our users and what problems they may have and can we think of solutions for them that make their lives easier and that even as a startup founder and veteran, can we build a company or build a product to meet those needs. And I've been working in the field ever since.

Andrew J. Mason: I'm actually feeling maybe two things simultaneously. Number one is this wave of nostalgia. I transferred over to a Macintosh software relatively late in the game, so my nostalgia includes Microsoft Encarta and Windows 95 and that startup sound and just everything that kind of surrounded that area. As well as this emergence of a career path that wasn't even there to begin with. And then when you hear about it, just this activation of like, "Yes, that's what I want to do." The same sort of thing happened with podcasts. Steve Jobs holds up an iPhone and says, "Hey, podcasting is a thing now." And here we are.

Charlie Brewer: I've been extraordinarily lucky to be in a position both geographically, San Francisco in my view is sort of the birthplace of this new form of digital design, which of course is all over the world now, and was in a position to learn by doing and all of the skills and overcoming all the challenges that everybody is dealing with and still is to this day. Now we've got this new set of umbrella terms, UX, user experience design became a preferred term. We're seeing also product design now. Of course the field is now full of specializations, so it's continuing to grow and mature.

Andrew J. Mason: It's really, really neat knowing that you were kind of at the epicenter of this whole thing once it exploded and just getting to see the ramification splinter out to the rest of the world as people realize that this is a needed skillset. Do you happen to have any recollection as to your first interaction with the Omni Group or OmniGraffle, the software? What are your thoughts surrounding that?

Charlie Brewer: Well, when I first started working, I was using a different tool, but it was one that was available. It's called Inspiration. In fact, I think it's still around. But it wasn't sold as a writing tool and you can both write a text outline and then have it flip over to a visual mode and you can see it represented as a concept map. And that was my original site mapping, flow diagramming tool. But it had some limitations. I was thinking, gosh, it would be really great if there were something that were visual and vector based where the boxes would stay connected to each other if I were to move them around, a dedicated tool. And as a Mac user I was very excited to at some point hear about OmniGraffle and I sort like, "Oh, fantastic, a dedicated diagramming tool for Mac." And I began using it and I continued to use it today.

Andrew J. Mason: Charlie, what examples might you have of how your usage and OmniGraffle plays out? What specifically are you able to accomplish using that software?

Charlie Brewer: So there's two ways. When we're designing software, invariably we get use cases of user stories that are written out. And what I do is I read those stories and then in my mind or on a piece of paper, I begin to sketch the steps, like steps on a game board, but they're actually screens, "Okay, what's the journey through this?" And I like to create my flow diagram first and I set it up where I'm walking through in my mind but then I'm making the boxes on the diagram and the paths and maybe some dotted lines where maybe if you you're signed in or not, so there's some statefulness. But ultimately I end up with, I can say that in this diagram I've identified every screen that I need to then make as a wire frame to cover off on the use cases or the use cases that I'm using. So I use it as basically to tell me how many wire frames do I need to make and what are the different states I need to account for.

Andrew J. Mason: It's really specific usage. It's very interesting.

Charlie Brewer: Maybe I'm an anachronism, but I like to figure it out that way and it's like, "Well, I need to make 12 wire frames and so I need a couple of days to do that," or so on. The second way I use it is for site maps and for that you can really add a lot of value by number one kind of showing the default organization scheme for the entire information space, which in some way will map to at least one of the navigation methods for the information space. But there's sort of a cannon structure like, "Oh, as content comes in these are the buckets it's going to go into." Then later you can talk about how people are going to move around in that. But on top of that, you can then begin to use color and symbols and diagrams to basically document at a glance, here's the different page templates that might be used for this versus that piece of information. You can indicate what is available now, and then there's places in the structure where information will come in the future. So you're also kind of doing a bit of time traveling where you can say, "Here's what we have now, here's where it's going to grow or subtract. Here are the ways into the system. Here are the ways out of the system or information space. And here are the preferred paths that we want people to take. Here's responsible for that." So you start layering on tons and tons of really valuable metadata where people can sort of see at a glance different aspects of the whole thing, and I find that incredibly useful. So, I tend to layer in systems of symbols, colors, where people can start to get a sense for how the whole thing operates, and that's very useful. And it's kind of a summative document, you can build this up over time. But, it's also really helpful when you're sort of introducing a larger team to the project. You can say, "Here is the whole thing and let me walk you through it." And it's a way to communicate a large amount of information quickly and efficiently.

Andrew J. Mason: Charlie, what advice might you have for somebody that is interested in your career path today? I've heard you talk about wire framing and diagramming and next steps, and there's just so many directions to take this thing. Any good first moves for somebody that's like, "I want to take an initial step, but I don't know where to begin?"

Charlie Brewer: Well, I would say that almost everyone has the instinct to draw or sketch a diagram. It seems to be something we do very naturally. Often when we're designing software or trying to map out an organization almost anything in the real world where the relationships are invisible, it makes a ton of sense and it's so helpful to convert that into a diagram where we're trying to make the abstract visible, and I think that's just something in human nature, but this is why we have whiteboards everywhere, this is why people sketch and doodle. I would tell all of our listeners that if you are having trouble or if you are challenged, A, just understanding the concepts that you're wrestling with, or if you are trying to figure out how to communicate a complicated system or thought or concept or just to make it clear, then diagram it. I would say that's one of the very first things that people do, and I would urge everyone to take advantage of it. These days if we're a knowledge worker we are dealing with complicated abstract information and one of the very best things you can do to help yourself think and to help other people think and to be sure that you're talking about the same thing in the same way is to make it visible.

Andrew J. Mason: Man, that so rings true with me. I don't know if anybody out there listening what your experience level is. I've found it whenever you're in a room with a bunch of people trying to level set an expectation and being able to put it externally out there so we can all look at the problem or the thing to fix or the thing to plan for, and even if it's not the right thing, at least people can have a conversation about it now. It's this level setting that says, "No, that's not what I meant. I meant more of this." Just getting handles around it is so helpful. Talk to me, Charlie, about anything that you've spent energy on in the past in this area that had you to do it again, "I wouldn't spend energy there at this time around. Maybe other people do it this way, I decided to do it this way, but as of right now, I'm saying don't waste your time there?"

Charlie Brewer: I've noticed whether we're working on just a quick fix to an existing piece of software or if we're designing something new from the ground up, I've found that if the team does not take the time at the beginning to sketch out the base assumptions, and this can take the form of, "Who are we designing for? What's the situation, what's the context, what's the problem they have, what are we trying to achieve for them and as a business?" And if you don't take a few minutes to sketch this out and or say singly as a designer or together with the designer with the team to say, "Here's what I'm thinking" and to sketch that out very quickly. If you don't do that, invariably I've found that you end up failing to think through all the edge cases that basically, I don't want to say blows up in your face later, although that's happened, but you don't get the full picture and inevitably those few minutes spent at the whiteboard or sketching something or bringing a diagram, a flow diagram or concept map, bringing that to the team invariably gets other people thinking in particular the engineers or the marketers to say, "Oh, you know what, have we thought about X, Y, and Z?" And "Oh, by the way, we need to link into that. Oh, thank you very much. Okay, I'll take care of that." I'm a big believer in almost kind of the film production. I know I'm going to make myself very unpopular by saying this, but I'm a big fan of in film it's pre-production, then you go shoot, and then afterwards you clean everything up and put in all the special effects. But if you don't plan what you're going to do, invariably everything collapses into a big mess. So whether it's five minutes or whether it's five weeks of intensive research, I'm a big believer in getting everybody clear on who's the audience, what's the problem, what are we trying to achieve and doing that visually. And so I find diagramming to be really central to that. Anyway, that's my big speech.

Andrew J. Mason: I've got to see some nodding heads right now as listeners are listening to you share this. How many times have we been in a situation where there was just a lack of complete question asking where there were assumptions made, everybody assumed that things were going to play out a certain way, and then later on down the road, "I thought... But, didn't you..." Just those questions that start to emerge because we didn't have a full complete conversation from the get go. My gosh.

Charlie Brewer: Not to hammer on about this, but to me personally I just find it really frustrating for myself or for my team or designers on my team if they jump in and yes, we're making progress, I'm making screens, but then say the engineers or someone else comes back and says, "Well, what about the error state for this? Where do the validation messages appear?" Or potentially it's like, well, if they're this kind of user with this thing, there's this other widget or this other set of screens, and it's like, "Oh, well, I didn't think about that." And maybe you are happy dealing with it that way, but it's also possible that you can run up against deadlines and faced with, "Oh, well actually we've still got some missing pieces." And I'm all for iteration, and it's okay if you come at building out the experience and slices or you shave away at the use cases until you're done, but it's always great to know how big the elephant is before you start to eat it.

Andrew J. Mason: Man, not to belabor, but yeah how many times have those conversations happened where it's like, "Ph, it's a beautiful house, but we forgot the plumbing, so we're going to have to undo a few things here to get this thing rolling." Wasn't on my list, but I'd love to ask you this question.

Charlie Brewer: Sure.

Andrew J. Mason: Did OmniGraffle play a role at all for your authoring of the Designing Interfaces book from O'Reilly? Really cool book. Would love to know more about that process.

Charlie Brewer: In me connecting to O'Reilly Publishing, no. But I'm happy to tell you about the story of how that came to be. But I will just very quickly, O'Reilly publishes the famous animal cover books, that they're one of the great specialty publishers that cover publish extensively on design and also coding and many other things. I was lucky enough through my network to be connected to O'Reilly when the call went out that we are looking for authors. So my co-author, Aynne Valencia, and I were connected to O'Reilly and we took on the third edition. Actually, OmniGraffle did play a role in that because as authors, we have to produce our own diagrams and in trying to illustrate the abstract patterns in design, such as various forms of navigation paths or various sequences of screens or sequences of actions that are a common design pattern for handling common cases, well the best way to visualize that is with diagrams, flow diagrams. And I produced my diagrams for the book in OmniGraffle.

Andrew J. Mason: That is so cool to know that it had a role in that process. Thank you for sharing that story, by the way. Charlie, what makes you passionate about great design, getting people on the same page? If you're in this career path for over 25 years, you don't stick around unless it's something you really enjoy doing. What is it about that process that you really enjoy?

Charlie Brewer: Well, I think ultimately it's a real interest in people and how we can play a part in making life better for people, how we can help people be more effective, earn more money, achieve a better quality of life, and generally reap the benefits of technology and interacting with software. It's everywhere. It dominates our lives. Unfortunately, it's the source of a great deal of pain and frustration. And I feel strongly that we owe it to each other to consider who's using it and why and what their situation is cognitively, physically, geographically, culturally, so that, from almost a moral standpoint, that we meet them where they are rather than forcing them to jump through hoops to basically use something that doesn't make sense from their point of view. My passion is let's use design, let's make design increase the net happiness and wealth in the world that comes from taking advantage and using technology to reduce the suffering and frustration that we introduce with our products. I know that sounds kind of preachy, but ultimately that's quite motivates me. In the years that I've been designing software I'm sorry to say that we keep making the same errors and we keep launching and putting forward things that either consciously or unconsciously have bad effects and bad impact. Now, I'm not saying it has to be perfect, but there is a tried and true and confirmed user-centered stance and there's a care and a professionalism to user-centered design, to user experience design, to product design, to software, that is a real thing that produces positive outcomes, and so I continue to try to spread the word. There are a lot of aspects to design, visual, interactive, copy, content. There's so much in there. My champion, I would say, that resonates most closely with me is what Steve Jobs said once and he said, "Design is not how it looks. Design is how it works." Let me put it this way, I come from that school and I absolutely feel that if we bring in other talented designers to bring... Other as identity branding, visual video, we can all bring it together. My concern is, are we all trying to bring all of those aspects together to create an experience that's easy to learn and easy to use and bring delight?

Andrew J. Mason: Can I just say how grateful I am to hear you share a bad slice of it? It's been a really interesting experience sometimes to hear designers, developers, the user has a bad experience and the tendency is to blame the user, it's just a really interesting-

Charlie Brewer: And users blame themselves. And more and more I have an issue with creating that kind of experience in people at the scale of millions. We should use all the tools and best practices and care that we can bring to the situation, and that can be a lot or it can be a little, I understand sometimes you've got to get stuff done, but I feel we owe it to our users and our craft that we at least cover off on like, "Okay, I'm going to pay attention to this."

Andrew J. Mason: Some really great food for thought here. Thank you for spending your time with us, Charlie. If folks are interested and connecting with you, seeing what you're up to and finding out more about what you're doing, maybe even checking out Designing Interfaces, how can they do that?

Charlie Brewer: Certainly, I'm not particularly active on social media, but I'm on LinkedIn, my tag is thecharbrew all one word. I'm on Twitter as charbrew @charbrew, all one word. And then I have a small personal website where you can find me at charliebrewer.com, C-H-A-R-L-I-Ebrewer.com.

Andrew J. Mason: That's perfect, and we'll have links to all of those in the show notes as well. Charlie, this has been so cool. Thank you so much for joining us. We've been honored to have you today.

Charlie Brewer: Well, thank you for having me. I enjoyed talking with you.

Andrew J. Mason: Hey, and thank all of you for listening today too. You can find us on Mastodon at The Omni Show, at omnigroup.com. You can also find out everything that's happening with the Omni Group at omnigroup.com/blog.