Rapid Prototyping in the Design Process
Casey Hald presented “Rapid Prototyping in the Design Process” at UX Camp Winter 2021. Enjoy!
UX Design, Experian
Casey has been doing web design and user experience since 2008. He’s worked extensively on enterprise software—developing rapid prototypes and conducting usability sessions to determine usability for designs.
Casey has worn multiple hats in his career, mostly pertaining to workflow design and front-end development. On the side, I mostly play the roll as a front-end developer for designers. Full-time—however—my passion is user experience and workflow design for enterprise software.
The following transcript very likely contains typographical errors. Please forgive any mistakes!
Hi. First off, thanks for joining today and listening to my talk at the end of my presentation, you will take away several tools that you’ve either never heard of before, or learn some refresher that you may have forgotten. I apologize if my cat says Hi, every once in a while, I’ve tried shutting doors and it usually doesn’t end well, so it’s our apartment and I’m definitely paying for it. Anyway, I’m very excited to be talking about this subject, it’s a personal passion of mine. I’m gonna be talking about what rapid prototyping is in the context of product design and enterprise software development. Ultimately, I want you to rethink what it means to create a prototype and why we spend time testing workflows for user experience in the first place. Since I have only 30 minutes with you today, I’m not gonna be going into talking about any particular tool or process, just basically the process of prototyping in general, so design a scene as Pixel, Perfect creations that we understandably tie our own egos too. We become defensive about our designs, by default, we don’t like criticism, and we especially don’t like starting over when something doesn’t work right.
We spend time in energy crafting our designs, sometimes needing to alter and sometimes destroy those designs based on usability tests and workflows, we don’t foresee… Like Dr. Ian Malcolm said, and Jurassic Park, your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should, it’s difficult to let your creations go, it’s also difficult to make sweeping changes to an already established design when user testing calls for it. By the end of this talk, I want you to consider the benefits of creating something that might end up in the garbage for fun, so we’ll be covering these subjects today… Who am I? Fine Art for the trash, what is rapid prototyping? What we need to create a prototype, and then I’ll be providing some additional resources that I myself use personally.
Okay, so who am I? My name is Casey Hall, and I’ve been doing UX design for about seven years now, and have worked in tech a little over 11 years. Yes, that is me. With the light saber, I won’t go into how much of a Star Wars fan I am, all I’m gonna say is that in the beginning of 2020, my wife and I got your long passes to Disneyland so we could experience galaxies edge and then the pandemic hit on the right, I think I was making a trip to Target or something. I don’t remember… This whole years have been like a blur, one case, he feels like a kid again, and the other case is tired of cost playing a motor combat character. So a little bit about me. When I was in high school, I was part of the video production and Technology Club. My friends and I went from metal heads playing in a garage to computer nerds, spent most of our evenings landing and building computers. I also created MySpace pages for my friends bands, and was one of the few high schoolers who knew their way around Photoshop. Soon after graduating high school, I went to college to figure out if I wanted to either draw video game characters like every video game nerd who just graduated high school wanted to do or get into web design, I made money much faster in web design, and of course, I was broke.
So the rest is pretty much history. I’ve worked in many roles in my career within tech, I’ve worked as a web designer in the late 2000s, and then got hired in the middle college at an agency where I did both design and front of development. I moved on from there to build enterprise applications as an information architect at another company, and then landed a role as a product designer for NASDAQ, which I worked for about five years, five or six years. Currently, I’m working at experience as a You designer and engineer. As a UX engineer, my duties don’t just start and end with prototypes, I spent a lot of time talking, I help conduct user interviews to determine the usability of a design and make quick changes to make sure the product ultimately works well for the end user, so that’s me in a nutshell. Alright, fine art for the trash.
So even though I worked in tech most of my life, I’ve always had a fascination for film and television, I also love to draw, when I started going to college, I originally wanted to pursue drawing and art, and of course, video game design, like every other 20-year old, I took some fine art and life drawing classes, but I wasn’t sure where I wanted to take those skills ultimately, sometime around 2012-2013, when I was working as an information architect, I decided to explore the world of art again, this time around storyboarding and concept design, so I attended a few courses at the concept design Academy of Pasadena while taking online classes at the Norman School of Art and Design in LA, which I have a couple of friends who are teachers there, and to see if it’s sparked something to see if I became curious about something other than information architecture.
So I went and tried it out, diving back into the world of art was refreshing to say the least. Drawing isn’t easy. In fact, it is incredibly difficult. These are a few pieces of homework that I created during my studies during that time.
So one instructor who influenced me the most was a man named John was… His job at Disney was to create production paintings and storyboards for months at a time. For projects that may or may not see the light of day, he taught us that through his career, discovered he didn’t need to create giant elaborate paintings, every time he wanted to illustrate an idea in three days, he taught us how to create an impactful image with nothing but Sharpie charcoal and thumbnail sized canvases.
He taught us that he would spend months on a painting only to throw it away after portraying an idea to the animators and Director, he couldn’t take that work home with him, he couldn’t even store it in his warehouse. It was all eventually made… To end up in the garbage. Think about that for a second.
Now, imagine spending months of your time creating sets of oil paintings, putting your heart and soul into it to portray an image or show or a movie that may just be discarded once the director likes the idea and runs with it, or changes their minds. It made me think of my own career path with some of the designs that we get, and how tied and defensive we get with our creations. He gave us an example of the movie, The Emperor’s New Groove, if you guys remember that. I think it was like late 90s or early 2000s, he was contracted by Disney to portray scenes as if it were a drama like The Lion King, he created dozens of paintings to establish a look and feel for the movie, and ultimately it didn’t end up becoming a drama at all that a comedy like it is today. Now, even though I didn’t ultimately change my career path, I did take away some concepts that I used today for user experience design and prototyping ideas in general.
So I encourage everyone to experience learnings outside your career path, you never know what you’ll take away from your studies, in other fields. And by the way, those are some of his amazing paintings, and I got to see them in person, so they’re huge. Gorgeous.
So how does my brief studies and art relate to rapid prototyping or tech at all, for that matter.
I could spend it up with this sentence, It wasn’t the art itself that was important, it was the ideas that spark from the medium that mattered. John taught us that ultimately, if you spend months at a time on a production painting, sometimes you can get away with a crackling of the same concept and still successfully pitching idea or image to a director. The medium you use to illustrate your idea is expendable, which like design can ultimately be the case, it’s the fundamentals that matter, not the medium itself. I can spin up all these debates that people talk about on Twitter about if designers should code or use this tool or that tool, and ultimately it really doesn’t matter. I learn that in order for your art to be successful, you need to separate yourself from your work and give it freely to criticism in conversation to ultimately sell a concept or idea, if you successfully sold the idea to the director, then your work mattered. So let’s talk about rapid prototyping, so rapid prototyping has become a buzz word that’s been passed around the UX and design community, right? When we think of design, we think of pixel perfect work that takes time to create an inter…
Sure, we can create a prototype of our Pixel Perfect designs and spend countless hours making sure it looks and it works great, but what happens when it requires sweeping changes, it sucks to throw away work, especially if you’ve spent weeks or months on it… After Prototyping allows you to test workflows without having the anxiety of having to penal potentially throw away your beautiful design work. Here is the literal definition of record prototyping, if you look it up on Google.
Rapid prototyping is the fast fabrication of a physical part model or assembly using 3D computer-aided design, also known as CAD. The creation of a partner model or assembly is usually completed using additive manufacturing or more commonly known, it has 3D printing, so if you look it up, it has nothing to do with our field at all, in fact, it has to do with 3D printing and engineering. The
Whole process of rocker prototyping is to be able to test an idea quickly and cheaply, one of the most famous prototypes in recent memory itself became a marketable product, Google wanted to test the idea of VR for their mobile platform, so what better medium than cardboard to test the usability of a potential product, it was created by David cause and Dania Henry French Google engineers at the Google Cultural Institute in Paris, and their 20% innovation time off. So through March 2017, over 16 million cardboard-enabled app downloads were made by November 2019, over 15 million viewer units had shipped… After the success of cardboard, Google developed and enhanced VR platform daydream, which was launched in 2016.
Going back to this sentence again, it didn’t matter that David and Damian created a prototype in cardboard to test a theory, the idea that came from their prototype span a successful product.
Even the prototype itself became a market… A product, marketable product, if you look at their store today, they still sell the cardboard prototype and it’s become a success. So with what we learned so far about the idea behind rapid prototyping, let’s redefine it to suit us as designers for user experience.
Okay, rapid prototyping. Rapid prototyping is the fast fabrication of a prototype using any means at your disposal to test the theory with users, most common prototypes are assembled in pen and paper to illustrate an idea, however, more high fidelity prototypes, Maines of code or in a slide show format. So what do we need? We need a problem statement first. Cool, now that we’ve defined what rapid prototyping is, how do we get started before we can get to… Started building a rapid prototype, we first need to define a problem statement, we need a problem to solve first before we start creating things, is also sometimes known as user stories, so you’ll hear this at work, your problem statement should be no longer than a single sentence that contains nothing about technology, nor should it contain any business lingo, which we get all the time.
A perfect problem statement could be something like as a credit analyst, and of course, I’m speaking as an employee of Experian, as a credit analyst, I need to quickly determine if my customer qualifies for low… That’s perfect, simple.
A bad example would be this, we need to fix our step early out, so more users recognize there is a score at the final step of the workflow. So there are a couple of problems with this. Right, this is bad because it solves the problem before you even get a chance to be creative, you don’t wanna lead assumptions, which a problem seem like this does… What if we don’t need a step or lay out… Do they even need to score necessarily, make sure you’re looking through the perspective of the user’s core issue.
Next, we need a sketching session.
So one of the things I learned in concept design for entertainment, that before you dive into a high fidelity piece of art, you must sketch your ideas out first in small thumbnails, sketching in a thumbnail allows you to get a high-level view of your idea almost as if you were zoomed out, this makes the drawing process less intimidating and allows you to see the full picture before you commit to a high fidelity version.
Once again, drawing is scary, right, drying in small thumbnail though actually uses drawing in anxiety, and this is why artists do this, you’re able to make more bigger ideas when you draw in small thumbnails, you can get a very zoomed out view of the environment that you want and you’re able to do the whole thing with very small hand movements, so the same idea applies to a sketching session with our field. In your session, you should invite your design team, as well as some people outside of design, such as product owners or even better, the user, the solution is targeted for. Sometimes you can actually do that, you can call them up if you have a good relationship with your customers, and we’ve learned that more times or not, they’re very enthusiastic about participating in product development, so try it out. In fact, over 80% of our participants are excited to participate in further research activities such as sketching workshops and Usability sessions, so don’t be shy, reach out to them and they might actually be interested. The most common sketch session we do are called design studios, and this is once again another debatable method, but this is just what we personally call it.
So a design studio is a mini workshop that typically lasts for about an hour, depending on how many participants you have, in the session, so it’s like three to five, you can get away with an hour, anything more than that, you gotta stretch it out to maybe an hour and a half, two hours. Everyone gets an opportunity to sketch for about 10 minutes and present in five minutes for two rounds. In
The second round, everyone makes a new drawing based on what they learned from the first round, so you get 10 minutes to draw, in five minutes to basically talk about your drawing and present it. So what’s great about this is by the end of the session, you collect everyone sketches, and now you should have plenty of ideas to go off for building your new prototype, and that’s another anxiety-inducing thing, is having to start from applying campus… Right, nobody wants to start from a blank, either sketch file or figma or… We know is even Photoshop. And that’s terrible. So this gives you a bunch of material to go ahead and get started with making your prototype or in code, whatever works for you. So this activity for me personally, has become my favorite part of the job, and I just took a picture of folding my paper in quadrants so you have thumbnails and you can tell everyone to do that, and more often than not, they’ll give you way more ideas and if you just gave them a big piece of paper with no quadrants at all, the other thing we need is a prototyping tool box, alright, now we need a way to build our prototype, there are literally dozens of tools now that you can learn to build a working prototype for testing purposes, with new tools seemingly coming out every couple of months, it seems like…
You can look at this list here. The great thing about joining the UX design field during 2020 on is that we have so many choices of tools and they’re all… It doesn’t matter which one you use, they all serve a awesome purpose for creating prototypes.
But all of these tools have some kind of learning curve, of course, I myself have used Principal for high fidelity prototypes that require animation, so if I wanna create a mobile app that has swiping animations that have pop-ups and toolbars and all sorts of things, I’ll… I’ll use something like Principal.
Stigma has a prototyping feature built into it, so not only do you get to build your static screens, but you can make what designers are calling workflow spaghetti, so you can connect a piece of spaghetti to different campuses to create a connection. All of these tools are gonna work, right, they’re all gonna be great, they’ll just have their own learning curve to them.
The trick is finding a tool that works, that you can use quickly, that is also iterative and works well for your team, that’s the key goal here you want a tool that everyone can use, that everyone agrees is useful, and don’t force them into a pigeon-hole, it don’t tell them, Oh, we’re all gonna use this because of x situation as your team… What do they prefer? You may even be surprised, you may have a team full of Sigma designers and now they wanna play with code, encourage that encourage creativity, it spawns innovation, and that’s ultimately what we wanna do as designers. So the trick is to find a tool that your team agrees with, so it doesn’t matter which one of these you choose, including if you decide to prototype in the browser with code, being able to test your hypothesis is the point.
So here’s a great example of workflow spaghetti with some of these tools, so most of these tools use the system workflow pattern, which allows you to connect changing events, and it looks like this if you’re a Wasim out, so to avoid making something too complex, segment out your interactions into separate prototypes and connect them by drawing a system workflow chart instead, that way it’s easier to make more changes down the line, you should use a tool that works best for your team. So for this example, do you see that this particular designer has made this app too large in this particular prototyping program, and so when he’s doing out, now it’s become really hard to iterate it, you can’t just make one little change and then reconnect it. It may affect the entire chain, so the idea here is if you’re gonna have a header prototype, a body prototype workflow within that body and then a footer, you don’t want them all in the same file, you want them in separate files, and then you can use a program, I myself use a program called Radio, which is free draw IO, you can create a system workflow chart and then with a network flowchart, you can tell which file is connected to which part of the workflow, and that makes it way easier to iterate and to manage in the future.
So once again, you should use a tool you feel works best for your team, not what Twitter tells you you to use, don’t listen to Twitter for this kind of design advice, Listen to your team. So here’s some useful resources that I myself have used to create rapid prototypes, so the design team over at Evernote has created a fantastic library that’s updated fairly regularly. I’ve used this library almost every time I needed to create something quick and dirty to test in front of users, so you can get a bunch of free icons here, they update it, I think monthly, I could be wrong, but every time I look at it, there’s usually something new, they have inspiration libraries, they have illustrations you can use to quickly snag and put into your prototype test in front of a user and see if it works, there’s all sorts of great resources here, and I go to this resource at least once a week, so I would definitely check this out. If you wanna create a rapid prototype.
Another great resource to use as a reference to create prototypes is material from Google. Our team liked it so much that we adopted Angular completely, just so we can use material for all of our prototypes and designs.
So when I started at Experian, we wanted to basically play with material ’cause we saw some of the competitive companies were using it as well, and we liked it so much that we just adopted it entirely in adopted Angular, so now every time we send designs over to the engineering team, more often than not, we can just send them a theme file, they can update it with their build and matches with our prototypes are prototyping, builds and we interchange code and it’s become a really useful workflow for us, another great resource to use as a reference to create quick prototypes is… Well, I just mentioned material, I’m reading over my lines again.
So there are plenty of other patterns just like material like tail and CSS as well. If you look it up, tailend alongside, I think view, which is another framework, tailwind gives you all the different components like what you see here, different tool bars, patterns, buttons, quickly snag it, put it together with your prototype and then connect it with whatever tool you decide to use for your team. And then from here, you can see that material also has a resource for figma, and I’m sure all of you have heard of figma now at some point, which has become a super popular tool for designers
Because of its ease of use and because that they have adopted the community aspect as opposed to just designing as an individual, so now designing has become more of a team exercise, your different designers can come into your Himal, you can see that you can actually see their cursor, and you guys can actually co-design and build rapid prototypes. In real time, which I don’t think any other program before figma has actually attempted that, so sketch is a lot like Photoshop, you’re designing things individually, and then this allows you to co-design, so the screenshot here, I took material. And of course, with figma as well, they have a lot of community resources, so you can look up a plugins, and you can look up material, you can look up tailwind, and you’ll get a wide variety of patterns to use for your prototypes. So even if you don’t code, there are plenty of fig resources that contain material components that you can use to quickly create prototypes to test, so even though I’ve mentioned frameworks, you don’t necessarily even need to use them to create a quick prototype.
It’s basically catered for… If your team is comfortable with code or if they’re curious about code, you never know, you may have designers that are curious about coding, and you should encourage that, and you should encourage anything that allows them to innovate. Right.
If your team has all… If your team all has coding skills, great, go with HTML JS, if most of them are comfortable with just figma or sketch, then that’s the way to go. The medium, like I mentioned before, medium doesn’t matter, and I’ve actually ended four minutes sooner than I thought I would, so…
Thank you for listening.