Chicago Camps

Billy Carlson at UX Camp Winter Home Edition 2021 (Video)

Revisiting Wireframes — Techniques & Principles for the Whole Team

Billy Carlson presented “Revisiting Wireframes — Techniques & Principles for the Whole Team” at UX Camp Winter 2021. Enjoy!

Billy Carlson

Design Education, Balsamiq

As a designer, Billy is his happiest when designing for a greater purpose. Whether it’s creating ways for users to enjoy their experience more seamlessly or complete a task more efficiently, he always places the people at the center of what he creates. He currently works as a Design Educator at Balsamiq, a design software company, where he helps designers and product folks learn best practices of all phases of UI and digital product design. Previously, he led large UX teams at various corporations’ internal design groups, such as Threadless, where he led the design and development of several mobile applications, the design of the Artist Shops program, and facilitated partnerships.

Billy’s passion for making started at an early age, but it wasn’t until college that he became fascinated by all forms of design. He prides himself in bringing the creative community together and does so by hosting creative events in partnership with local design groups, as well as mentoring young designers by facilitating portfolio reviews and project critiques. He is also an Adjunct Lecturer at Northwestern University’s Segal Design Institute.

​​​The following transcript very likely contains typographical errors. Please forgive any mistakes!

And thanks everyone for joining my session. Again, my name’s Billy Carlson, I am a design educator at this wonderful software company called Passaic. We make a tool called Balsam wireframes. I’m sure most of you’ve heard of it, maybe not, but I think you have. Alright, let’s get started. So I am gonna learn how to use the tools really quick… Okay, so I can use my keyboard. Alright, so my agenda today is to hopefully talk about why I think the wire frames still matter, and I’m gonna dive into tips for wire printing Tips For Getting Started, ideation and communication, iteration and hand off, and I’m gonna discuss our framework that we’ve developed for what we call successful warrior accessible wire framing process, and I hope that we have some time for Q and A, ’cause that’s pretty much my favorite part, so… Why do wire frames still matter? I think they’re really important. One of the things that I see a lot, and I think I get sent to me a lot because of where I work, is these articles about why our frames are irrelevant… What do you think… Wire frames are useless. Wireframes are debt.

Stop making wire frames. Right. And I think when I read these articles, I understand their perspective, ’cause they’re talking about these really high fidelity, almost looking like an actual mock-up high fidelity mockup or actual website design, and not what I think of wire framing, which is a collaborative process in sketching and a lot lower fidelity. So the reason why I think wire frames overall still matter though, it’s because making software is a team sport and not everyone can do something like this, right. We aren’t any more the crafts people sitting behind our desk making these really awesome high fidelity, beautiful looking designs and then passing them over to the development team to make them… Right, we need to collaborate together a lot more for a long time, these are what our tools looked like, especially to outsiders, I remember the first time I ever used Photoshop, I was so daunted by all of this, I was probably somewhere over in here trying to figure out how to use this thing, and it was very intimidating and it was not approachable, and I think when we are as designers trying to solve a problem, we need to think really people first, and when I think of wire framing…

I know we can’t do this now, but when I think of wire framing, this is what I think, I think of people staying at a white or visualizing what they think the idea to… Their idea for this solution is right, and not this, this is… To me, the antithesis, I’ve dealt with this a lot. I’ve sadly probably have done this to people in meetings before, where I know there’s some sort of problem out there, but what I do is I go right for the highly polished, really visual mock-up, and then I just go to my meeting and then I present it on my laptop, like Mr. Cool designer. And that doesn’t really invite feedback, and I think that’s where wireframes really thrive as they invite feedback… I just wanna make sure. Okay. And they also invite participation, anyone can make wire frame, so I wanna make sure that I check on Samoa, I wasn’t sure I got a little notification that mime like wasn’t working. It is. Sorry, so this is why I love wire framing though, because it is for everybody, anyone can make these… The whole point of them is to get together in sketch ideas.

Again, it’s kind of hard to do that now. I wanted to make a quick Wilson that just like figma, people can go into bosom and collaborate on wire frames just the same way. So quick, only plug I’ll do. So one of the things I really like about wire frames is that I think that they are in the center of the artifact landscape sweet spot, if you think of design artifacts, the details, the more effort it takes, the harder it is to update… Wire frames are great because they have just amount of detail to get your idea across, but nothing more, so you can make a lot more wire frames for a lot less effort and iterate a lot faster, which is great. So one of the other things I really like about wire frames is it totally works for every different… Every kind of design process. So if you’re on a design team that works really closely together with everyone from product to dev and stakeholders, you can just walk up to a white board and sketch out their ideas together like we showed it, and that’s enough… That’s a great wire frame to move forward and build from, but if you work for a bigger company or a larger team, you might have to make something on the right, which is just as easy to make, but you’re gonna share it with more people, and that’s what I really like about wireframes can communicate lots of different ways, one…

Another thing that is great about wire frames is that they support both the divergent or creative thinking and convergent or refining processes, so this isn’t really as true for high fidelity tools where it takes a lot of effort to create something and prevents you from exploring many ideas right, we’ve had those sketch files that have tons and tons of versions on them, but they all almost look the same or not going broaden up, and the reason is making big changes in those high fidelity tools is really hard, so iteration doesn’t happen as easily. Alright, so now I’m gonna start talking about wire framing tips for getting started, so like the very beginning of the design phase before you start doing any of that interface were… So tip number one when you start wire framing is set the stage, so then he’s trying to define the context before you start designing, so defined before you design, if you dive right in, when you start making your hypodermic, there’s a good chance you’re gonna be solving the wrong problem. And that’s a really hard thing to fix. So the design process always sort of looks like this, I showed this a lot, to explain what design feels like in the beginning of the process…

That’s fine, and this is where you have to live for a while, it’s not gonna be a straight line from, Oh, I have this awesome idea to Here’s the final design and it works for everybody, it’s gonna be kind of a mess and you have to sort of embrace that you have to go through the steps of research and prototyping and iterating and talking with people and all that uncertainty to develop patterns, to develop insights, which then leads to the clarity and focus and a really good design. One of the things that we do at voltaic is something called live wire framing session. So our tool, voltaic wire frames is available to… And any non-profit, we call them do-gooder, and if anyone’s doing good, they can get our tool for free, and what we do is we take time to meet with them and we basically offer up the education education team’s time. And we meet with them to discuss with their project is, and every single one of these, when we start helping them design, the first thing that we do is we take time to go through who the users are and what they’re trying to do, so that’s pretty simple but we just wanna make sure that we can verbalize it and talk to it like, okay, there’s six different user types and these are their goals, and we write it down right in the wire from document, so it’s always there and it’s always sort of trying to keep us focused on who we’re designing for and what do they need to do, so this step tip to follow really closely to the previous one where we visualize these connections, so once you understand the users and these goals, the users and their goals, it’s really important to visualize it, so you can talk about it and show people…

So this is a great way to do that. Creating user flows is my favorite way, why our flows are very similar as well, but you’re just walking and thinking through the exact process of what we need to happen for that user to complete their goal. And one of my favorite things, and this is why I try to do this for every one of my projects, is that I don’t forget to design any screens then, or any models or anything… I’m gonna remember everything I need to do, and I’m also gonna make sure that it’s easy to do. And I could find it out in this process, if this gets too big and there’s too many steps, or maybe you have to take a step back and see if I can design it a different way. Alright, so now I’m gonna talk about tips for ideation and communication, which is sort of the core of what people think UX design is, or design in general is. So tip number three is, I really want people to become explorers or really push this when they’re working on projects with their team, everyone has to understand there’s an element of unknown, and we need to really dive into that and embrace it.

It’s important. So this is a popular famous Internet, I’ve seen this all in line from De trainers, so we worked with this designer named Jess Eddie, who wrote this great article for Balsam and some updated it and I loved… I loved her typography. So that’s why I like using this one. Excuse me, but what I really like about this is that the image on the left side really show is like, Okay, I have tunnel vision, I know exactly where I’m going. You could easily miss the best solution, you’re just gonna be focused on that one idea, and this happens so many times, this is pretty much how we’re trying to step out, if I’ve done this way too much in teams, and if you just show him this chart and be like, if we need to really broaden our scope, we need to go really wide here, and then we can find out where to refine to and then we’ll start doing that, ’cause this is what real creative exploration looks like. It requires you to go broad, here’s just an example of that. We’ve done this before, we’re trying to design like what does it look like, this welcome message to get people to action and come up with eight…

Come up with 10… Something that I like to do a lot is in the beginning of this creative phase is do something called How might restatement or really workshop these ideas, and because the language that you use when you’re trying to come up with new ideas for a product are really important and this is a framing exercise, and it really helps way more than you think. So some examples of how might we are… How might we make sign up the best part of our onboarding experience, or how might we make our employees take productive and healthy when working from home? Excuse me. So what I like about these though, is it really steps you back from focusing exactly on maybe the digital screen and on the person who you’re trying to fix, the person you’re trying to create fixes for it, right? So why it’s a really great statement is because you know how a means it’s possible… Might means there’s gonna be a lot of solutions. And we need that. We’re gonna do this together. So when you create how might we statements, it’s actually a really powerful way to get over and together and broaden your scope, it’s really popular and design thinking workshops, and I think it’s really relevant here, another thing I like to do that…

This is really simple, and that’s really fun, is play crazy at… So it’s a really simple game, you get a piece of paper, you get your group together, you can do this remote or whatever, make 8 squares, and then each square you get 30 seconds to sort of design a solution to the problem. So this is an example of me doing it for redesigning Paloma, wire framing desktop editor. Okay, so what I did at first was the first one that pinhead was, What if it looked like old school ADP… That’s where I started my design career. Those are the tools I use, and then I was like, Ah, I would be really interesting if… What if everything was floating on your desktop and there was panels everywhere… More like a modern application. And then I was like, Oh yeah, what if… It’s like Microsoft Word. So what I liked about doing this here is I come up with an idea, only up 30 seconds, I sketch as best I can and I have to name it, and then what I started doing further was giving myself prompts, prompts are a really great way to push your ideas even further, if you go online, there’s a lot of websites and material to help you with prompts, and I suggest if you’re gonna be doing this, create your own prompts that are relevant to your company, they’re really helpful.

I like using stuff like this sharpen design, and there’s other sites out there that are great, but it just helps you sort of reframe what you’re trying to do, and it helps open up to way more ideas. Tip number four share on finished work. I think this is where wireframes thrive over high fidelity artifacts because for hi panel, there’s just too many dependencies and it kinda looks weird, but wire frames really thrive in this incomplete state or they’re not quite done and they’re sort of open for communication or for conversation, so in this example here, Xi intentionally left the left side, the right side of the screen, blank. I could have put something there. What I was really thinking was, maybe it’s a countdown for the week, or it’s a calendar or something, but if I were to put something there, people were responded only to that and maybe not have come up with their own idea, so if you leave blank spots in a wire frame, you’re inviting conversation, you’re saying, I want you to participate with me in this design process, and here’s just another example, designing a layout and then throwing in really big question marks and saying What or it could be, and adding this conditional language to really help bring people in with you.

It really helps a lot in making the design not just by one person, So tip number five, be deliberate about details, you know, it’s really easy to get hung up on details, especially as a designer, ’cause that’s part of our job is it really focused on that. And I’m saying not to include details and you doing just understand what details are saying to your audience… Right. Good design artifacts are really easy to iterate on, but they’re detailed enough to get your ideas across, and that’s what we wanna be to focus on, so if you look at these two examples, they have totally different purposes, the one on the right is, is this a good layout, I’m sorry, the one on the left is saying, is this a good land… It’s all scribble. It’s very low fidelity, it’s like the 10000 foot view of like, Is this how we want our product page, the work… Now, the one on the right is the same, but it just has a lot more detail, so there’s a lot more feedback I’m gonna get… I’m gonna get feedback on the sizing of the typography, the placement a lot more than the one on the left, so the one the left says, Okay, I did 30 layouts.

This is when we’re gonna move forward with the one on the right says, We like this layout, now, is this the right copy? Is this the right content? Another really good tip for using detail is to zoom in, so this is like the screenshot of that dashboard from the previous slide, and instead of designing this widget for every one of those 12 modules, I just designed one, and then what if I design three different versions of that one. So zooming in and saying, This is the big picture, the most important part of this page is this module, what if it looks like this, what if it looks like that? So your save time designing, and then you also save time iterating and you’re using detailed deliberately to sort of move the process along, and remember detail is gonna direct focus, so I intentionally… We intentionally left the left side of the screen blank here so that we would not get any feedback on it, you can’t really do that with a high phenolic design, I’d probably just look really weird, but with wire frames, it just seems to work fine because of the sketchy nature. I’m gonna get feedback where I want it, which is this green, this right side, extra column, and this is where I wanna direct all the feedback, so if I remove everything, I’m gonna exactly get what I want.

So tip number six, leverage design systems, I feel like this is pretty obvious, but I hope people always remember to design with your framework in mind and you can really use wire frames effectively for the whole team, if you just create a simple mapping between your design system and then simple wire frame, so they don’t ever need to be perfect, they don’t need to look exactly the same, but it does is it allows anyone to really quickly wire frame or you can get together as a team in a small meeting, wire frame something up really quick and then it can go jump right into code, and that’s really powerful. Okay, so I’m gonna talk about tips for iteration and hand up. So this is moving into the getting it built phase, which is really important, and it might be even more important than design, because this is what people are actually getting used. So tip number seven design for the feedback you want, always consider your audience when you’re designing, ’cause at one point you’re gonna be presenting or handing this off, and whoever is gonna be reviewing it, you really wanna know what you want from them, what feedback you want…

’cause if you’re not careful, you’re gonna get feedback on things that you don’t really care about, like we talked about before, so remember, high detail, ease, high feedback. If you’re ready for that high feedback, that’s fine, this is… We’re gonna get, if you’re not ready yet, keep it really sketchy and brought the one image, the wire frames on the left, I’m trying to demonstrate how I would create this wide experience… Responsive for this site, right? And the one the right, if I’m not ready for it, I’m just focusing on layout, I shouldn’t add all this content because I’m gonna get feedback on why are those numbers there, why is the search term there? We always, as designers, deal with this, so if we try to remember before we present, what feedback am I looking for and design towards that, we’re gonna get way better feedback. This is just another example. The wire frame on the left is… Is this the right layout? And then the wire frame on the right says, Okay, we chose this style of a lay out, and now here’s me learning all of our content. Does it work? So the feedback on the left is, do we wanna have this much space for imagery, do we want this feature text this big, and it’s a lot bigger, broader thinking, and then the one on the right is a lot more narrow…

A lot more detailed. Tip number eight working code, and this isn’t specifically about wire framing, but it’s a really good way to be scrappy, I’m not gonna really… I don’t really wanna chime in and the beti designer should code, but I think you should understand as a designer how things are built at the very minimum, understanding how an application or a website is made or really help… One of the things I like to do a lot is hack things together, so I don’t wanna spend time creating wire frames, if I can just make my example right in the code, or I can create a really hack together code using Bootstrap or another framework, just to show my team, This is what I’m thinking, this doesn’t really work so well on big new projects, but it works really well when you’re trying to fix some existing features or you’re in the refining process and you’re trying to enhance what’s going out there. So this is an example of me updating our Baltimore fame Academy site and saying, What if we have images to preview the articles, and I just went into code out of the image and I took a screenshot, I wouldn’t show this screenshot, but I just wanna demonstrate to you…

Tip number nine, you used the least effort method, and this is kind of a general tip, but it’s all about prioritizing results, so whatever the output is, is way more important than the input going too deep and design and focusing on creating artifacts can have diminishing returns. If you don’t need to do it, remember that there’s incremental value in adding more and more to wire frames, so one of our things we say is Be economical, if you can use screenshots to augment your wire frames, do that, don’t try to recreate things that already exist. We call these hybrid designs, and I use this all the time, take a screenshot layer on the new stuff on top and then get your feedback… Right. Don’t create already exist. And then the final tip for this section is user word, so maybe you don’t need to design anything at all, maybe you can start content first because you already have an established designed and you’re trying to revamp it, so this is an image from Shams at the beginning of the conference here. So I interviewed she for the series at Walsall Balsam design, the process behind… When we talk about designing products, and one of the things he said he does is something called Zero fidelity design, where he basically writes everything out in a Google Doc and sort of add these little fake interaction points, and he gets everything he needs to know from his users from this document, you don’t need to create anything visual, if you can do it with words, if that’s what the main interaction of the site is, so…

Check out that video. It’s really good one. Thanks for doing that with me. She… Alright, and then my final tip is Ship it, make sure you ship the thing, I think that designers need to have more responsibility for making sure that whatever their design and gets implemented, it’s really easy to put this on a PM and development team, but I think us as designers can really help make it easy to get things built if we just approach it the right way, so one of the things, the first thing I always think of is trivial, I think we all do when we think of unrealistic designs, because they look so good and we wanna make them to get whatever job we want in our portfolio, but they’re not really reasonable. When I see this, I think they look cool, but I think that they would be really, really, really difficult to build. In any mobile operating system, we would have to rewrite the operating system for this stuff to work. So that’s my point. Another thing is, always try to provide a path to Version 3. So when you’re creating wireframes, you’re creating something, you’re usually creating almost like the ultimate version, and once you start iterating on it, you have to start to think about, Okay, now how am I gonna get this bill? What is a good experience for the users? From V-1 all the way to my preferred version V3, and you can easily do that if you’re planning ahead, you can say, Alright for this, we can launch with just the table or we should add search and the actions on the table pretty soon, ’cause that’s gonna help them, but we can launch with just the table and it’ll save a lot of time, and you can do this really easily with…

I used to do this with Agile stories or in Pivotal, I’d say Here, this is what I’m thinking for V1, this is the story to add on to B2 and B3 and so on. Another great tip is to have a backup plan, so you wanna design your ultimate version, it’s great, but building software is actually really hard and there’s always a lot of hiccups and things happen. So plan for that. I love this awesome module and it’s very visual and they really help my users, but we maybe can’t have time, we won’t have time to build that, so this table work just as well, and we could just launch with that. So think about the team as you’re trying to design, alright, so that’s all my tips, I’ll review them again after I show you our successful framework, so I’m gonna stop this and change it to a video… Give me a second. And there’s probably gonna

Be a OEE. I arterio the gray. Better in… You use guys that help you design MeToo a parrot video sound is so… Why it’s hard to hear you. Is there a way to turn down to a video volume, I think we’re all having trouble hearing you…

Oh sorry, I don’t know how to do that ’cause it’s not in the setting or… Sorry, everyone, I’ll just be quiet and you could see this on video since there’s only two more.

I’ll share that video with everyone, you can see, I’ll put that in the… I will put that in the Slack channel, my apologies. But I am wrapping up my talk, so what we think about this successful framework, what you can see is

It’s a great checklist for not just team wire framing, but like a great design process when you’re working on a product, right?

So for the whole product you build, you can ask, Did we make sure we demonstrated an understanding of the problem the users are having, do we focus on their user needs, did we thoroughly explore solutions before we settled on this to be focused on functionality and not appearance and I… We validate the solutions with the users and team members, and then for the actual artifact of wire framing to our wire frames follow UI design patterns. Did they invite discussion? Incorporate ideas from others communicate clearly and not… Show more details than necessary. So the themes that we covered today, which we call the wire framing mindset are, don’t design for your portfolio, forget about done. The goal of this whole thing is a shared understanding, the right tool for the job is way better than one to older them all, people not pixels make successful products, focus on what you don’t know and be scrappy. And that’s it.

Thank you for your time. I think I just made it. You could find out a lot of this info on voltaic dot com, learn, and you can contact me.

Chicago Sponsors Camps

  • Rosenfeld Media
  • Simplecast
  • Lead Honestly
  • Columbia College Chciago

Code of Conduct

All attendees, speakers, sponsors and volunteers at our conference are required to agree with the following code of conduct. Organizers will enforce this code throughout the event. We are expecting cooperation from all participants to help ensuring a safe environment for everybody.

The Short Version
Full Version

Our conference is dedicated to providing a harassment-free conference experience for everyone, regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices. We do not tolerate harassment of conference participants in any form. Sexual language and imagery is not appropriate for any conference venue, including talks, workshops, parties, Twitter and other online media. Conference participants violating these rules may be sanctioned or expelled from the conference without a refund at the discretion of the conference organizers.