DU017 – Prototype or Protohype?

Prototyping is the process you go through to get design in front of real users.

Paper prototyping, Axure mockups, Invision, Sketch – there are a hundred ways to get an output you can use in user research. But which is best and what should you use when? There’s only one way to find out..

Season 0 - Getting Untangled
Season 0 - Getting Untangled
DU017 - Prototype or Protohype?

Prototyping is the process you go through to get the design in front of real users.

Paper prototyping, Axure mockups, Invision, Sketch – there are a hundred ways to get an output you can use in user research. But which is best and what should you use when? There’s only one way to find out..


Episode – DU017 Prototype or Protohype. Hosts: Chris Mears and Carla Lindarte

00:17 Chris: Hello and welcome to Design Untangled with me, Chris Mears and over there is Carla Lindarte. How’s it going?

00:23 Carla: Hello? You just said with me, Chris Mears? Yeah. You are always with you.

00:27 Chris: Yeah, that’s very true. But I am not going to change the intro cause I paid $9 for that intro as well for a scriptwriter.

00:35 Carla: That’s all right. Oh nine dollars. That’s quite good value.

00:41 Chris: Yeah, well that’s a short speech isn’t it? And quite crap as well.

00:45 Carla: Oh, you so mean.

00:47 Chris:: Only to myself. How’s the bank holiday, been?

00:52 Carla: It has been really, really good, very productive. Lots and lots of things to do, so I am very tired right now. But yeah, but committed to this.

01:03 Chris: Yeah, of course we can technically say that this isn’t going out late even though it is like two hours before Monday finishes. But you know, still claim it, I think.

01:14  Carla: Anyway.

01:15  Chris: No, we’re not anyway, I haven’t finished talking about my bank holiday. So I went on a steam train today, which is quite cool.

01:22  Carla: A steam train? Do they still exist?

01:23  Chris: Yeah, it was like a heritage throwaway thing up, near where I live in Epping. And they maintain this bit of the track where the central line used to run. So they just have like two or three stops and you can just ride it up and down.

01:38 Carla: Oh, that’s pretty cool. That’s much better than my, my um, bank holiday. I was just in Ikea since nine thirty. If you go before 10:00 am they give you a free hot drink. So you can have as many coffees as you want. If you arrived to Ikea before 10:00 am.

01:58 Chris: Yeah. Well you need quite a lot of coffee to get around there, do not you? I am surprised you’ve even made it out this early to be honest.

02:05 Carla: Yeah, it was good. Great experience.

02:09 Chris: All right, so what are we talking about on the podcast today?
02:13 Carla: So we are talking about prototyping. Do you know what a prototype is, Chris? 02:19 Chris: No I do not. Do you want to tell me?
02:21 Carla: No, I have no idea either. So I do not know what we’re doing today.
02:24 Chris: Okay. Might as well play the out tray music.

02:28 Carla: A prototype, in my opinion is, and I think could be anyone’s opinion. It just an early concept. It is a testable item. Whatever that is, whether it is a piece of paper, or a digital product, or a concept, or a process is something that you test before you actually, pilot and then launch. So it is a way of learning early whether or not you are making the right overall decisions. Do you agree?

03:01 Chris: Yeah, kind of. I think it can also be used as a sort of stimulus material as well. So as a way of giving people or users something to think about whilst you are doing more exploratory style research or I do not think it always necessarily has to be a view of what the end goal is necessarily.

03:23 Carla: Yeah, that’s true. It is not the end view obviously, but at least you know, a flavor or what that it could be. I agree.

03:33 Chris: Good. So there4 is a couple of different types of prototypes. I think the most common sort of two sets are paper and then digital prototypes, but there4 is also service prototypes as well, which we’ll touch on a bit later. Paper prototypes are really sketches of an interface usually on paper and they can be used just to show people get their faults. They’re definitely not usability level prototypes, but you often have the researcher or UX done, whoever’s running the research, acting essentially as the computer. So you might show someone a dialogue box sketched out on a piece of paper and you ask them what they would press, they click okay. You then act as the computer and show them the next paper view of the UI after that. So it is quite a low cost and fast way of pulling together what an interface might look like.

04:40 Carla: I agree. There are various types as well. You could do it just with a piece of paper at some people if you are more talented with crafts and stuff. I have been in projects, for example in Australia there was a girl who was really good at making them. She actually created the devices and then a way of slipping through the pieces of paper which represented the screen, which were really cool. I might maybe share some of the photos with the people in the notes. So actually very good. They’re more kind of high quality pair of paper prototypes. The idea of it is just to, get some of your initial thoughts. Be more tangible and shared with either users or stakeholders to get their initial opinion of what they think about that. I wouldn’t use paper prototype to kind of prove or these prove an actual proposition or a completely new product. I would just use it to actually learn more about the users and learn more about, whether or not you are heading towards the right direction.

05:53 Chris: I think they’re really useful in the earliest stages of your Fulton design process because they’re quick to create. That’s not say, that you shouldn’t put thought into them as well, because you are obviously going in there to try and prove or disprove some sort of assumption or hypothesis that you’ve got. They’re quite nice to just sort of have as a visual thing that’s stuck on the wall or whatever. So it helps bring the team along on the design journey as well, which is another benefit often over essentially a digital prototype I would say, which is hidden on some file system somewhere.

06:30 Carla: I actually have a friend, her name is, Deanna Mondo. She’s actually very good at prototyping concepts of like experiences as well with paper, and clay, and playdough as well. So she’s actually, she’s a UX designer and safety and race efficiency. Recently my friend, she saw me, she showed me some pictures of a workshop of how to move away from decks and presentations when you tried to sell an idea and do something a bit more interactive. So she uses lights and she uses different things. So it is quite interesting to experiment with all the materials that, are outside of paper, to try and bring your ideas to live. And if you are passionate about that section a very good, the initial state of desire, which is that, when you kind of coming up with concepts and testing and getting people’s opinions of why you think it is actually a good stage in the process for you to do that.

07:33 Chris: I think that leads on a little bit to the whole, was going to talk about a bit later, but maybe we’ll just talk about it now. Which is the service prototypes. Which is something maybe you haven’t thought about necessarily yet. But particularly in government when you are designing services, it goes beyond just kind of mocking up a screen and seeing how it goes down. It is the entire experience someone might have. So calling the call center or going into a particular branch or whatever. So there4 is lots of different kind of things you have to do to be able to prototype that service. So you might be, your prototype might actually be a call center script or something of that nature. And I do not think there4 is, I haven’t seen at least a kind of one size fits all way of prototyping services. I think it is very much a case by case basis. And you do have to think outside the box a little bit, work out ways you can test some of your ideas about how that service might work.

08:36 Carla: Actually in the company I work for now, they use, sometimes like landing pages, especially for internal services. So they create a landing page for a product, a service, right. And that talks about all the different things that this service does. And before they actually cray, the service actually tests the appetite for people to actually sign up for it. And I’ve been reading and listening about how to prototype services because currently I am trying to do that at work. I cannot really talk about it, but the idea is to help create a completely new service that, but before we actually changed the whole process of how we operate currently, we need to see whether or not it is going to work. So creating what we call like fake landing pages, which is not necessarily a fake landing page.

09:30 Chris: It is just the page to summarizes the key features of your product or the key touch points of your service and then see if people would sign up for it or not. That’s another way of doing it, of running, for example at work campaigns as well, to see if people be interested in certain service that you do or trying to offer. As you mentioned, like run in a script for a call center for a week that is different to the service. The script that you currently have, so there are many different ways depending on the service. And then you can use any, even creating videos as well. One designer I know was talking to me about, creating a video for a future app that is not just going to be an app but a complete service for a retail client. So they actually creating that video that shows the entire service offering, to test it with people. So that’s another way of doing it.

10:33 Chris: Thinking back to some of the work I’ve done, probably cannot go into specifics, but one of the prototypes for the service involved, someone joining this Porto essentially and then, and member of staff, like a customer service person would then video call them and then actually engage them and then the whole world can chat. So the sessions ended up being a mixture of kind of your more traditional digital prototypes in [inaudible 00:11:02] or whatever. And then it will say involved a prototype of a video welcome call as well. So that was quite interesting.

11:12 Carla: That is pretty cool. Yeah, I mean storyboarding as well. Which is kind of a way that you can prototype, an end to end journey, but then if you come up with a storyboard and just print out all the different stages that our user persona is going through and then you have a group of people talking. I mean do you kind of tell them to story of what this person is actually doing and getting their feedback as you go through? That could be another way. I’ve actually used that in the past with the retail clients and it is actually quite good because then you kind of make it as a story that you tell to people. You stop in points of the story and then you get people talking about it. It is better when you have a group of people because it kind of creates more conversation. Do you know, you ask people about whether or not they think that scenario is realistic or whether or not how much they will pay for that particular surveys, et cetera. And then you can gather insights in the context of a particular journey.

12:14 Chris: Yeah. I think the point here, right, is prototype is a very broad term. It is easy to think of it as your standard cure or envision mockup that you really need to think about what are you trying to test because ultimately it is a way of testing something and that can be multiple different approaches to get those answers. It doesn’t always necessarily mean headphones on an 18 hours straight of [inaudible 12:42] Do not be constrained by thinking that it is just a prototype. There really are many different avenues you can explore to get answers to your design questions.

12:53 Carla: Yeah, definitely. I mean, and it is so valuable like having any way to visualize, or make it, basically when you are looking for a prototype is the tangibility of your ideas. So yes, there is a lot of talk about what we want to do. Yes. A lot of talk about we want these solutions to do this and that, but it is just until you prototype that people start realizing what it is.

13:16 Chris: There is also the question around what fidelity prototype you should use. Paper is obviously on the lower end of that and you can then move up to basically fully formed interfaces at the other end of the scale. I would say the latter. You are properly fairly sure about what design direction you are going in. You are looking to pick up more usability points and refine the design. Whereas when you are on the low fidelity and you are still in exploratory mode, you want to iterate quickly and test out new, different ideas very rapidly. So I think those kinds of questions come into play when deciding what fidelity you want to take forward into your user testing.

14:00 Carla: Yeah, I mean, talk about digital prototypes. In the days of balsamic when we, you and I used to you balsamic use some because I am sure you used balsamic one day. Then it is evolved so much now that obviously you can create a whole, very interactive app experience with things like Flinto or Principal or things like that. Tools that are very easy to use and actually can have all these interactions embedded into the user interface so you can easily drag and drop, a swipe or whatever interaction you want and it is in your prototype. I guess the reason never a, what’s the best tool of war still I guess I think in my mind I think is all about you feel comfortable with if, if you see that happened to me ones, I mean I do join a team and everyone is using Sketch and yes I am saying you have to kind of pick up on the new self work and try to learn it.

15:06 Carla: But then if you have a delivery, um, and you know that you won’t be able to pick up, pick it out and learn it and do it as quickly to deliver something. Just do it in the two that you used to. I mean I wouldn’t really recommend balsamic anymore, but then if you, if you can use Axure, or you can use Envision or you can use something like that. I mean just go for it. And do it and then try if you working within a team, but everyone is just in Sketch, try to learn it later on. Do not focus too much about the tool. I mean I worked with a lot of UX designers. They were always asking, what is the best tool or what is the best tool? And to me it is just whatever you are comfortable with and I do think is very important that a tool encourages collaboration. So it is easy for multiple people to work on it. Is it easy for clients or stakeholders to give feedback as well? And then there was a lot of tools out there that allow you to do that.

16:04 Chris: I think it depends. Like you are saying a bit on skillset as well. So stuff like Sketch I know is good for people with a bit more of a UI focus. So they can do their design and they want easy ways to get those designed into prototype straight away. But if you are not so UI focused, you are more of a pure UX designer, then that’s fine. And use whatever you need to get that experience happening. So I’d say more in the latter camp. So I often work with UI designers who use Sketch and they will export stuff into a way that means I can get into whatever tool I happen to be using to create the lab prototype. Say as Carla says, do what you are most comfortable with. There4 is always a way to create something useful and testable. Do not get too hung up on the latest fad or software cause chances are it’ll be out of date in the next year and there’ll be some new thing. Just make sure that it gets you the answers you need in the lab or in your user testing rounds.

17:08 Carla: Exactly. I mean, I know Envision are doing very cool stuff. Before I left Sapient, I knew about this new envision studio tool, which basically replays I as far as I remember, replaces like Photoshop or Sketch for visual designers and you can actually do a prototype and then you can actually explore everything so the developers can get or, um, or the access they need. And so it is quite cool solution. I am not sure how realistic it is cause there is a quick, very cool video on their website. I haven’t used it myself but I mean it is good to kind of keep active with the tools but um, I mean UX designer or UI designer is not the tool they use. It is just about who you are and how much you can actually achieve with whatever tool you are using. I still think though that Axial is such a good tool.

18:02 Carla: Maybe you might call me old fashioned, but I think Axure is for me one of the best tools because you know, you can have teams working together with projects, you can do interactions, you can actually do prototyping, in much better ways than inVision. Axure will be more static. It allows you to do more. And I also like the adaptive views function, which is for websites. So it allows you to do all the different, the three or four, breakpoints in one. So it is quite a good and powerful tool for me. And also it allows you to export all the specific patients as well. If you wanted to have documentation that this day, they say you do not need the documentation, but then you still have offshore development teams that might need some function expects. So I mean I still love Axure, maybe and they not pay and they’re not paying us for this by the way.

19:04 Chris: Yeah, they should. It is cause I am going to agree with you. I haven’t, I still use it. I haven’t found a situation where it is feature set has not allowed me to do what I want to do. So until that happens, I am not really inclined to spend too much time looking down other avenues, then they’d be better stuff out there. But it works for me. I am comfortable with it. I’ve even been able to create complete in-store, like ePOS systems with it, which would run on a tablet. So, far I would say I am sticking with Axure, but I know there4 is Sketch fans out there and Envision fans and that. So cool. Do whatever works for you that I am going to stick with my dusty old Actuere for the moment personally.

19:53 Carla: I do not do prototyping anymore, but when I used to do prototyping I really loved, Axure it was the best tool. Yeah. But sometimes I have to say as well that if you have a front- end developer in your team and you have actually access to their apps is even much better to have a developer because they are able to build something so quickly. They’re already got some frameworks that they can use a like a responsive framework. And it is just much easier. Sometimes if you have the luxury of working with developers all the time and then you just focus on the interaction, and focus on the design, and focus on the copy and the content, rather than focusing on the dynamic panels of Axure, that sometimes could there be very painful.

20:48 Chris: [inaudible 00:20:48] And in government, they have got a fairly robust framework and pattern library. So it is very easy and simple for front-end developers or anyone who knows a bit of code to pull together a prototype quite quickly. But when you are looking at app interactions maybe or stuff that’s slightly more complicated than the stuff that they would do on Gov.uk, Which is essentially forms by and large, then yeah, it is definitely worth having some development resource available if you can.

21:20 Carla: I remember I did a project once and I, before I worked for a developer, I was wasting so much time doing prototypes and once he joined the team, it was amazing that we could build things so quickly. That’s, you know, sometimes it is just worth doing it and you just focus on the important stuff and testing it and put it in front of users and stuff like that. You’ve got to love prototypes.

21:44 Chris: Yeah, I have done a lot of prototypes. I think it is one of those things that it is not about the tool as with nice things in UX, it is about choosing the right level of prototype or the right type of prototype to answer your design questions. That would be my little Chris quote that you can take away and stick in your pocket.

22:05 Carla: Oh, you know what else? I think Keynote is also very good prototyping tool. They have got very like cool interactions and you can easily put together Keynote and PowerPoint. PowerPoint if you do not have access to Keynote. And you can do a lot of interactions and there4 is a lot of tutorials, online actually on YouTube on how to use Keynote for simple, interactions and prototypes. So just do that as well if you do not have access to anything else, because you can put them together very quickly.

22:38 Chris: Does Google like you plugging Apple and Microsoft products?

22:41Carla: Yeah.

22:42 Chris: I noticed you didn’t mention Google slides there?

22:45 Carla: I’ve kind of moved away from Keynote because my whole life I’ve been using PowerPoint and Keynote. And Slides is a little bit different even though you can do a lot of stuff with it. And still I am still learning it. I feel if I have to say. And also the fact that you have to use, everything like Sheets and Docs and everything for work. I kind of, I was used to using Google docs and stuff like that for my personal stuff and now I’ll have to use it for work. And then you have all the tabs open, which is a bit annoying because you have to navigate through tabs. Yeah. Anyway, so it is a bit of a difference. It is a bit of a cultural shock, but going through it right now,

23:33 Chris: I am sure you’ll get there eventually. Yeah. So have we got anything else that I think we do, do we? Just do what you want, basically.

23:41 Carla: No, just do what you want and if you have any questions, any feedback, any criticism, anything, you want to say to us? Please do it, on our channels. Do we do not have to call out the channels anymore?

23:57 Chris: Well we do because we haven’t paid anyone to save them. That’d be another nine dollars down the drain.

Carla: Oh No. Well I have to say that, I do have a Mac at work, but still getting used to it.

24:02 Carla: Okay. So there you go. You go for it.

24:04 Chris: All right. Twitter @DesignUntangled. Individually @Chris_,Mears_UX and @CarlaLindarte. On the web www.designuntangled.co.uk. If you fancy leaving us a review on iTunes, that would be sweet. Even if it is a crap one. And do not forget to subscribe as well because then you will get all the latest episodes hot off the press. And I can also mention the thing that I teased last time, which was our new partnership we’re doing on the UXMentor.Me Slack channel a which is with UX for Change, which is an organization that kind of helps charities tap into UX and design resource to solve problems. So a very good cause and we’re offering after event support on the Slack channel for that. So you do not just go to the event and then leave and then that’s it and it is going to be ongoing and hopefully that’ll help charities connect with even more UX’s across the globe then helps solve some problems for good social good guys. That’s my little announcement.

25:14 Carla: That’s really good. All right, Chris, I’ll see you very soon and please, any, I am just going to say this any, ideas for future podcasts. Please let us know. Or you can use the Slack channel or any other channels that Chris has mentioned. If you have anything specific you want to learn about, please let us know. We do not know the answers, which I am sure we won’t. We’ll try to find them.

25:40 Chris: Yup. All right. You’ve got responsibility of pressing the outro button this time, so see you later.

25:46 Carla: See you later.