Tent Talks Featuring Billy Carlson, Leon Barnard, and Michael Angeles: Let’s Talk About Wireframing

[00:00:36] Chicago Camps: In your newly released book, Wireframing for Everyone, who is your core audience and what are some key insights you hope readers will take away?

[00:00:44] Billy Carlson: We pitched this book and wrote it as a, what I would call, what we called new and non- designers. And we really focused on product people, product teams, people that really have limited resources of design.

[00:00:58] So we were thinking of product managers, even developers and entrepreneurs. And teaching them how to visualize concepts that are coming from the business. That’s what we were hoping to do. And then the key insights is we really think it follows like the UX design process, human- centered design where we use wireframes as a way to visualize these processes, but we show them the importance of speaking to people, visualizing your ideas, iteration, testing, presentations.

[00:01:26] There’s a lot in there, so hopefully, they get a very high level of view of what design is and how it should impact their business. In my experience, product people also have a line of opinions, but maybe don’t know how or what we do exactly. So maybe even showing them these low fidelity ways that they can generate ideas and they don’t have to think of the final decision, but you can visualize the problem that you’re trying to solve in a low fidelity way is really impactful and helps us out a lot.

[00:01:55] We all use digital product, not just the product team at a company that doesn’t have a really high end design group. Everyone has opinions, this I think helps a lot in showing them a way that they can work that will be really successful I think.

[00:02:07] Chicago Camps: How does the process of wireframing help non- designers better understand the process of UI design and UX design?

[00:02:14] Michael Angeles: I think when we were talking about doing this book, at the time we were having a lot of discussions about what we were hearing from people, and it seemed to us that a lot of people were moving to design hastily.

[00:02:27] And spending a lot less time on the early stages of ideation or idea generation than we’re used to. And what we were thinking is valuable is for non-designers to learn is how to use wireframing or any sort of low fidelity based process so that they can explore and test more ideas early in the process and just make it a regular part of how they problem solve.

[00:02:51] So that generative and reductive part is what we think has been the most valuable part of describing how wireframes works. And wireframes just tend to be really easy to make. And then also that sort of low fidelity nature makes it easy to discard ideas so that the bad ones don’t make it so far and that you can combine all of these ideas to find the best ones.

[00:03:14] We walk through the process in a way that encourages non-designers to use wireframes to, to do this and gather feedback early and often. I just remember early in my career, I remember reading books like Robin Williams “Non-designers Design Book” and “Don’t Make Me Think” and they were the kinds of books that distilled this sort of this idea of how to design in this digestible way.

[00:03:37] And that’s what we’re going for with talking through the process. And just giving people the tools just to do, to understand how to create the basic visualization of the idea is the baseline. And then from there, as you mature, it’s just understanding the process. A lot of which we borrowed from other disciplines in art studio and architecture, early stage ideation is generally similar from all these other projects, like sketching, Buxton’s sketching book has great examples of how people do that in industrial design and so we lean into those ideas and transfer it into wireframing.

[00:04:13] Chicago Camps: What are some of the misconceptions about wireframing and how do you address them in your book?

[00:04:17] Leon Barnard: Talking about Visio back in the old days, that was really exciting that you had this tool that was multi- purpose for flow charts and diagrams and stuff like that.

[00:04:26] You can have just wireframe stencils. So you’re like, wow, I can make wireframes with a digital tool and it was exciting. It was fun. It was cool. And then Balsamiq came along and it’s, wow, there’s this tool. It’s just for wireframing. Look how easy it is for me to create a digital wireframe. And then now here we are 15 years later, and there’s so many tools that allow you to do so many cool UX and UI things.

[00:04:47] Back in the day, we were designing with Photoshop. There for so long UX designers were using tools that were not designed for UX designers. And so it was always cool when a new tool came along that had designers in mind. And so I think one of the common misconceptions is that we just keep progressing towards better and better UX tools.

[00:05:08] But I think that focuses too much on the tools. I think all of us would agree that it’s really all about the techniques. And so just because there’s a tool that allows you to make an interactive prototype or make an app, while not having to write any code doesn’t mean that’s an evolution of the process.

[00:05:25] Doesn’t mean that you don’t have to do low fidelity design or discovery or go through the early phases and doing divergent thinking. That’s one of the things that we really try to address that wireframing is not this old technique that’s replaced with something newer, the way you might use to write code on punch cards.

[00:05:43] It’s actually more like sketching. Nobody’s saying let’s get rid of sketching. And so really wireframing is just a better way of sketching user interfaces because it’s faster, it’s more convenient. And so we try to get people out of thinking about this idea of things being deliverables or getting too caught up on tools.

[00:06:01] But really think about where are you in the process and what do you need to be talking about? What conversations do you need to be having at what point in the process.

[00:06:09] Chicago Camps: What are the most essential skills someone needs to effectively create and utilize wireframes?

[00:06:14] Billy Carlson: I’m going to use some of my experience teaching also, but you need to be fearless because you deal with a lot of people who aren’t used to visualizing ideas.

[00:06:23] And they feel like they can’t, I can’t draw, I can’t draw a stick figure. No one needs you to draw anything but boxes and some boxes and some squiggly lines. So you need to like allow people to try things and fail and look stupid. For some reason people think that it’s difficult to do.

[00:06:40] It’s really not hard to do wireframes. So we try to really push that in the book. Think of all the times you’ve received a requirements doc or an Excel file that has as a user and it’s 300 rows. I’m like, could you just maybe sketch that for me? And if you want to use this Excel doc or your requirements doc annotated, but we don’t, it’s so much easier to explain what you want.

[00:07:03] So we can get people to get rid of that fear of taking that first step. I think that’s a big part of it. And that starts early on in adulthood. As a kid you don’t care at all. And it’s something we teach in design classes in school and universities. As a kid, you didn’t care as an adult.

[00:07:19] You should still not care. It’s not a big deal. Jump in.

[00:07:23] Michael Angeles: Wireframes. They don’t necessarily require any specialized skill to make them. It’s just, your job is to be really familiar with the design process and to use the wireframes to elicit feedback and to continually iterate and to get more feedback and use the tool and no matter what is, whether it’s like render sketches, you’re basically the champion of the process and that’s the skill set is to understand the process.

[00:07:49] But the making of the things requires very little skill at all. Which is very different from sketching, there may be a few shapes that you need to make a sketch, but feel it’s harder when it’s a sketch. So wireframes remove that barrier.

[00:08:03] Leon Barnard: We have two chapters in the book that we feel like covers everything you need to know. One is called From Ideas to Interfaces. And so it teaches you the very basics about controls, patterns, templates, the things you need to learn the basics about UI design. And then the one after that is about design principles. And so you learn a little bit about hierarchy and things like that to make your wireframes a little bit more; to add some UX and UI principles into them.

[00:08:29] But that’s only two out of seven chapters. And we feel like that’s enough for non-designers. We spent a lot of time deciding which ones to focus on because we decided in advance you don’t need to learn all of them and it’s not the job of this book to teach you all of them. So we try to simplify very carefully the four that we decided were the most important and the easiest to learn.

[00:08:51] Chicago Camps: How has wireframing evolved over the years and where do you see it going in the future, especially with the advancement of technology such as AR, VR, AI, and now spatial computing?

[00:09:02] Billy Carlson: I think it’s so interesting, especially the new spatial computing and the, where vision was going to go, where my new ski goggles are going to take me, but. I don’t think wireframing has evolved. It’s interesting because when I was thinking of this and I’ve taken LinkedIn learning courses on AR and VR and how to design for them and they wireframe in VR and game design, it’s called “gray boxing.”

[00:09:27] And I was like, whoa, totally mind blown and it makes sense, but I didn’t know that it was a different terminology, but low fidelity is how a wireframe, the literal term at least in my mind is sculpture where you’re creating a wireframe of what you’re going to put the clay around. So that was, that’s just for every creative process there is a low fidelity getting, and as a younger person, I went to art school. Every oil painting starts with charcoal. On canvas, you draw in charcoal and it’s literally line drawings. And then you start painting and you’re blocking it in. So I don’t think that’ll change just because we have new technology.

[00:10:04] You still need to quickly get whatever’s vision is in your head in a way that you can visualize it. There might be different ways that if you’re using these things you can create low fidelity using like Oculus stuff. There’s stuff that will probably be better. It’s not great right now.

[00:10:19] Michael Angeles: I don’t necessarily think that it’s going to manifest itself in the way that we are seeing things being experimented with now with ChatGPT or Midjourney and all these kinds of things. I don’t think it’s necessarily going to be prompt space. It’s going to be more embedded in the tools but I’m not sure exactly how. We’ve had discussions about what we think could happen in our tool, but it’s not necessarily going to translate for everybody about how they use AI because the prompt to generate something is I think the model that everyone is latching onto.

[00:10:52] So it’s create a e commerce flow, check out flow for a used clothing store or something that’s a model for kickstarting something. That’s not necessarily how I think it’s going to be interesting. That’s just one way that AI might help to use previous information. So I think there’s a lot of possibilities, but we’re talking about it in a sort of more embedded place right now in our internal discussions.

[00:11:20] Chicago Camps: What is the most challenging aspect of teaching wireframing, especially to an audience of non-designers?

[00:11:26] Leon Barnard: I think the most challenging thing is to get non-designers to understand what Designers actually do because if you give them a design tool, they will try to play the role of a designer, which immediately comes to mind this idea of designing something, making something that looks nice, but it’s harder to teach the process of how do you get to that thing and getting them to focus on asking the right questions and keeping the user in mind.

[00:11:55] And not getting so hung up on what are the cool things that this tool can do, but what answers do I need at this point? So it’s really a mindset. It’s saying wireframing is just one tool, one technique that you have in your tool belt where you can mix and match with a wireframing tool and a Word doc and sketching and a Mural board or whatever.

[00:12:16] Just this idea that low fidelity is this phase where kind of anything is possible and you need to generate a lot of ideas in order to get to the good ideas. And so you give somebody a powerful tool and they’re like, look what I can build with it. And immediately they want to make something.

[00:12:30] And that’s done all the time where people build a product that it doesn’t have a product market fit, or it’s not what people actually want and they get so hung up on, isn’t it cool that I can make this thing and, really the hard part is teaching people to sit with that uncomfortability, that uncertainty and say, let’s generate possibilities here, let’s not get hung up on, features of tools.

[00:12:52] Let’s talk about where we’re at in the process and what questions we need to answer. And it’s hard to teach because it has to be intuitive and it’s very fuzzy. I think that’s what a good designer does they’re good at embracing that discomfort and that’s really what a good designer can add to your team is asking those questions and getting you in that creative mindset. That’s what you want to replicate when you’re a non designer trying to step in the shoes of a designer.

[00:13:17] Chicago Camps: Can you talk about some of the best practices for collaborating on wireframes within a team?

[00:13:22] Michael Angeles: One of the chapters that Leon took on was software development process being like a relay race where you have to communicate and practice handoffs by learning what the downstream role needs to do their job.

[00:13:35] They have to wireframe for the next step in mind, and it’s not hard actually. You just need to have explicit conversations about it and not work in silos. The way we work internally is that we tend to use wireframes as the part of the process that we communicate around. We don’t really get to it until a lot of discussions have happened deeply in discovery.

[00:13:56] So a lot of work is being done way, way ahead of getting to anything visual.

[00:14:02] Leon Barnard: No matter what tools or techniques you have, it’s not going to work if you don’t have good communication. And so you can’t ignore that part of it, that you have to have a good working relationship and good software comes from good relationships, good communication.

[00:14:17] It’s a people challenge as much as a technology and a tool challenge. So you have to work on those things at the same time. You can’t just assume that finding the right tool or doing design in a certain way is going to give you a good product. You have to work at the people level and think about the people that you’re working with and build relationships, which is also a weird thing to write about in a design book.

[00:14:42] Billy Carlson: Invite participation in the process of wireframing too, because you can explain this is not a design practice. We’re visualizing our ideas so that we’re all on the same page to increase that communication and awareness.