Smart Prototyping

Matias Pietila at UXDX Community: Helsinki. Video: https://youtu.be/ictkod9h0Io

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

How I gave up opposing prototyping

[00:00:09] My name is Matias Pietilä. It's great to be here. Truth be told, I'm not really sure why I came, but it's always nice to see a full house of people. We had this briefing mail saying that please wear your nice socks, so I've mostly been observing people's socks and trying to understand what kind of people they are based on that. But still, it would be nice to understand which of you are designers. Okay. And who are developers? All right. And business people? Okay. And something else? Okay, great.

[00:00:47] Great to be here. I'm about to tell you about prototyping and how to do it smartly. If you see anything interesting there, you can take photos and feel free to share them online. Actually, I would like to ask if somebody uses Twitter, if you could take a photo of me being here and post it to Twitter, so then I can retweet it and show it to my boss so I can say that it was working time that I was here. That would be useful. The hashtag is in the corner, so it's kind of hard to see, but it is UXDX Europe.

[00:01:26] The topic would be smart prototyping, or how I gave up opposing it and rather became a fan. My history, like I described, was that I was the only, the first designer in the company, and I kind of thought that it's more valuable if I can quickly create value and minimize the documentation. And prototypes are not really a minimal way of documenting anything, so I used to be against them. But since then I've learnt the value that they bring, and today I'm preaching another kind of message. Okay, since I actually have it, showing a hashtag just in case you want to use it.

[00:02:15] All right, so I come from a company called Qvik. Does anybody know Qvik? Okay, some people do. I'm not going to talk more about the company, but we do mobile applications. We've been doing that since 2008. We're one of the leading agencies that does iOS and Android development and design in Finland. Since then we've also been expanding to other domains, but still mobile is what we are known for, and we're doing well with that area.

[00:02:50] My original goal was to do minimum viable documentation, kind of not even possibly drawing the picture-perfect mock-up of every screen at all, but rather just communicating the idea and then sitting next to the developer and together tweaking the details so it works, and not really wasting time drawing something that will be thrown away anyway. So when people were pitching the idea of doing more prototyping, I was kind of against that. I had been doing prototypes with Keynote and only truffle[?] and HTML mock-ups and that kind of thing, and they felt kind of limiting and cheesy, slow to build and hard to maintain. So I was opposing the idea.

[00:03:31] But now I see that things have changed and it's a really good idea to use prototypes. I think one of the reasons what has changed is that business owners have become smarter, so we're actually using prototypes for validating the concept and the product at earlier phases, rather than just, you know, we've already made up our mind what they're going to build anyway, so now just test the UI. So that is a kind of prototyping.

[00:03:57] Another thing is the tools have improved. It's much more flexible nowadays to do new prototypes, and — okay, not that way — so that makes you more effective. And the last point is also the operational model. At least in our company, it used to be that we were working at our own office serving multiple clients from there, and nowadays we rather have our designers as team members in our clients' teams, giving them better access to end users and stakeholders, and also more time to actually build these prototypes. So there are multiple factors in play here.

Three reasons to prototype

[00:04:34] So why should we be prototyping? I think one reason is to validate the concept, that it is actually worth building and solves a real problem. Another thing is then validating the user interface, that it works, that usability is there. And the last thing is about optimizing the user experience, all the eye candy, UI magic, doing all those cool animations. That's something that you want to use prototyping tools for.

[00:05:07] So if you are like a startup person and like this kind of jargon, it's worth understanding if you are at the early phase of problem-solution fit, or if you are towards product-market fit, or if you have a scaling phase. Depending on that, you want to build likely different kinds of prototypes, because then you have different kinds of needs.

Validating the concept

[00:05:28] Okay, let's first take a look at the first kind of prototyping, which is the concept. Some points to bear in mind here: the reason to do this is that you can communicate the concept effectively and you can get useful feedback, because people are talking about the same thing, something tangible that you can give people to feel. And they can also be useful for internal marketing. But it's good to understand that depending on your goal you should be selecting your fidelity level, and the fidelity level should define the tool you are using. So we don't just start with a certain tool, but first understand what you are doing and why.

[00:06:09] Also good to remember is that concept validation is different than usability testing. So when you are testing these kinds of prototypes, you shouldn't be doing usability tests, but rather more like a problem interview kind of thing. It's a term by Ash Maurya that I kind of like as an idea, that you're not validating a solution but rather showing if there is a real problem, and you won't understand that otherwise.

[00:06:38] Some examples. A really, really simple thing, this is actually like a web form. We had this client who is a doctor who had a hypothesis — hypotheses, hmm, hypothesis, hypothesis, okay, that kind of thing — anyway, about a kind of algorithm that lets him understand if people are having sleep apnea. He could have built an app, but he rather just ordered a prototype from us. Actually he never understood we didn't make a real app, he thought it was a real app. But anyway, we spent less than a day creating a prototype that he can use and validate his idea. We were able to program the simple algorithm inside the prototype, and now he can test if it works and doesn't have to really invest too much.

[00:07:27] Also, this startup called Sol, we helped them back in the day, back when chat UIs were a thing, to help build this kind of virtual chat thing that lets you talk with like a business coach to develop yourself as a better person. It's something that would have been hard to really implement. We were also kind of assuming that you wouldn't be able to even prototype it well enough, but it turns out that we were able to do a pretty convincing thing in a prototyping tool that kind of feels like a real tool. And quickly they were able to use this as some mechanism for getting funding, and then the real thing was built based on that. Nowadays I would not instruct anybody to do it like this. Nowadays there are good platforms for actual prototyping chat UIs, but back then they were not around yet.

[00:08:28] Another thing that you often want to do when doing prototypes — this is from a hackathon last year — is you want to have this kind of fake navigation element so that you go to different user stories or different scenarios. So you've built something that you can then easily navigate with, that kind of thing. In this case you see that it's stupidly polished for being a concept prototype, because sometimes you also want to sell an idea and you want to make it look nice, and nice looking helps you better secure a deal for you. But in real life, if you were just about to test an assumption, you likely wouldn't want to polish it that much.

[00:09:12] And sometimes you don't even want to build anything. In one case last year we did this kind of fake product. It had three main concepts and we wanted to compare if any of them would be relevant and how they are prioritized between people. So we did this kind of fake emails and they were sent to thousands of people, and then there was this try now call-to-action button at the bottom, and that took you to like a landing page with a way to sign up. We had some stupid questions there just to make the form long enough so it would be tedious to fill it, so people who actually do it are valuable and really interesting. And then we were measuring how people were clicking through the email button and how many actually ended up filling the form and how these different concepts were doing there. And in the end we decided that we shouldn't build anything. So it was a quick experiment, but it was a success in that sense, that we actually learned quickly.

Validating the user interface

[00:10:14] Okay, that's the kind of first level of prototyping. Then there is the maybe more traditional one, where you validate the usability of a user interface. It's good to remember that you can do very interactive and realistic prototypes if you want to invest time in that, and in mobile context it's very, very useful to have something you can feel in your hand as opposed to just seeing some kind of wireframe on your computer screen.

[00:10:44] Depending on the tool, you can also use real data and branching logic and some if-else statements and that kind of thing, that actually save you time. You don't have to draw every single screen and sketch, but rather you have some logic there. It also may help developers later on to understand the logic, so we can use the same logic on a studio level.

[00:11:05] Also, really important to minimize waste is not to prototype anything stupid. There was once a prototyping tool on its Facebook page, somebody was asking, can you prototype the iOS keyboard with this tool? And yeah, you can, but that's stupid. I mean, the iOS keyboard has been built already, so you don't have to recreate that. So try to focus on something you're actually testing.

[00:11:29] Also, when it comes to visual design, you'll likely want to minimize that to some extent, because maintaining all the different visual styles can be time-consuming. So you rather want to make something that looks good enough that people will believe it and people will understand it, but you don't have to really polish every detail.

[00:11:51] Here for example, it's an example how we used to do with Tallink Silja a couple of years ago, with this kind of cruise program things. It was built in Axure, and you can see that it's visually glitchy and basically it has mistakes, but you can now quickly click through different states there and try out different scenarios. So we were able to use this tool and go talk to people on board and do some quick testing, and we didn't have to worry about the looks too much.

[00:12:25] Also for VR, the train company: we are currently building the new ticket vending machine for them, and for them we also built some ugly screens. We were actually comparing two different approaches to the ticket buying process. One is the more traditional wizard kind of mode where you go step by step, and the other one is this default summary mode where you first see everything, but this is pre-selected, and then you can edit the selections. Typically, if you don't want to change anything, if you're just buying the ticket to the next departing train, you can just press done and pay it. So it likely should be more efficient for that kind of usage.

[00:13:16] So we quickly prototyped them both, we were able to test these things. In the end we decided that we want to go with the more traditional wizard model, but what we did is that actually behind the scenes it works like a summary model, in a sense that it does pre-select you the next train, and you can just skip to the payment and be done with it. But if you are a more normal user it kind of guides you step by step. So we kind of took the best of both worlds. Being able to quickly prototype them was a good way to be able to make an informed decision on this. And in the end it kind of ended up looking nice, or it doesn't have to be ugly anyway.

Optimizing the user experience

[00:14:05] Okay, the last reason for prototyping is optimizing the user experience. Now, when it comes to animation and nice things, like we mostly all know nowadays, it's not just skin deep, there is a reason why you want to make cool, nice things. If you think of animations and motion design, it serves three different functions.

[00:14:31] One is that we can enhance usability by guiding your attention to what is important or what we want to attract, so there can be some kind of pulsating, nicely moving thing that makes you focus on it. It can also be that we enhance usability by creating a clear spatial model of how things are connected, and by animating between these states we then make it easier for you to understand where I am now, where am I going. And the last point is this psychological effect where you rather get users to feel good by making something that is nice and moving and tangible and all this. There's a whole book about this stuff that I recommend to everybody who's interested, you know, Don Norman[?].

[00:15:22] The basic idea of prototypes is that they are disposable. You should be willing to throw them away. That's why I always love when I get to have this kind of talk, when I can recycle my old prototypes. You know, they have been thrown away already, but here they are again. So some random things that have been done in random tools. Some of them ended up developed like that, some didn't. And the mold[?] thing, actually I haven't been involved in the design at all, I just made that for fun to test out this tool.

[00:15:53] There is also this commercial reason why you want to do nice-looking stuff, because if you first prototype it nicely and let me show that to the PO, the PO is kind of committed to that level of wow already, and then if you deliver something worse he starts asking, like, why didn't you build it nicely like I already saw? Because people like — you know, it's harder to give up something that you've already kind of had than to never have had it at all. So that way you can kind of trick the PO to raise the bar a bit and do something cool.

How prototyping goes wrong

[00:16:38] But yeah, a word of warning. So if you're not careful you might end up screwing up many things. You can waste time by recreating things that already exist. You can waste time by creating a prototype that is hard to maintain, and then, instead of adding value to your product, you just end up wasting your time maintaining that prototype. You need to learn when to give up and start over, instead of always trying to add all the new functionality in the same prototype.

[00:17:05] You can also waste time by creating something that would be trivial to develop for real. Sometimes the real tool for prototyping is actually writing code and not just using prototyping tools. I see that there is kind of a tendency that people are becoming more siloed now with these tools, that designers build prototypes in their world and developers then code them, but sometimes it would actually be useful to have developers more involved there and let them build the prototype.

[00:17:40] Also, sometimes you see people limiting their design based on what their prototyping tool can do. So if you're using InVision and you cannot do side swiping, then you end up doing a design with no side swiping, which is kind of stupid. Or it might be that you use Framer with virtually a ton of cool effects and then you end up creating something mega complex that nobody can ever implement. So it may look cool in your demo, but the worst that can happen is that your PO already gets fixated on that effect and then you can't pull it off, so then you are out of luck. All in all, if you fail to communicate the role of the prototype, that way you end up getting unnecessary or distracting feedback, so it's another way of waste.

Tools

[00:18:28] So some quick comments about the tools. All in all, I think that whatever the tool is, a good tool is something that makes simple things easy and complex things possible. And Flinto is my current favorite tool. It kind of fits those needs. You can quickly create like InVision-style screen-based prototypes, but also you can really animate them piece by piece and do some cool micro interactions with that. The limitations are that it's hard to share. It's an iOS-only solution and you actually have to install the app and then get the file in the app, so it's not something you can just share a link to a business stakeholder on an Android phone. Also, sometimes it just breaks when you use Sketch symbols and plugins and all that.

[00:19:25] Principle is a similar kind of tool that lets you do nice mobile stuff, really cool micro interaction things. It's somewhat more limited in some effects than Flinto, then again it has better support for scrolling. So again, you kind of have to know what you're doing to choose the correct tool. Also there it's hard to share, because it's app based.

[00:19:52] Then there's this good old Axure, that many people think has already kind of lost its role in the scene. It's more web oriented, but it's still surprisingly powerful. It lets you do almost anything. You cannot get that kind of high fidelity output because it's web-based, but still it's really worth considering, and it's easy to also create this kind of static links that you can just know that they will always work, because it's web-based, and you can flexibly manipulate the links that you are sharing.

[00:20:28] And then there are others. I didn't mention now InVision, because I'm not a huge fan of that. I think it's kind of limited and I'm surprised by its popularity, but nothing bad against that either, it's useful sometimes. And this whole scene is changing so fast. I mean, we are all now waiting for this InVision Studio that will come soon. And this kind of reminds me, because three and a half years ago was the first time I did some kind of presentation about prototyping, back then I was already like a believer, and back then I was telling that Pixate will be coming soon, and then a year later it was killed. So these things are changing real quickly, so it'll be nice to see what happens next. But yeah, I'm really looking forward to InVision Studio and to see what they come up with.

Recap

[00:21:28] But yeah, so to recap why you should be prototyping. First point is that you can validate the concept, you can ensure that you actually have your problem-solution fit. The other point is that you can validate the user interface and you can test the usability, and you need to, or you want to, pay attention to the fidelity level and make smart decisions like how much you want to prototype. And the last one is then optimizing the user experience, making all the mouth-watering effects. There you want to really collaborate with developers and together understand how to implement those things. But it's typically better to be able to show your idea than just to try to explain it. It's more likely it will be correctly understood. Yeah, that was that. We still have some time for comments and questions. Thanks.