ADDC 2018 - John Sundell: Prototype Everything

[Music] hi everybody hola buenos dias who's ready for the boat party yeah all right but before we do that we're gonna talk about prototyping and I'm really really excited about this my name is John I'm a developer I do some blogging I do podcasting and I do a bunch of other things as well and as I work on many of these different styles of projects I've learned how to use prototypes in many many different shapes and forms in order to kind of learn things quicker to be able to get a feel for a project in a different way and in order to better communicate with other people that I work with so today I hope to present some of the kind of learnings that I've learned from using prototypes over many different years to show you some tips and tricks and some examples of prototypes that I've used in the past so when you hear the word prototyping depending on kind of who you are and what you work with you probably get some kind of different idea of what prototyping means to you for example if you're a developer you're probably thinking about kind of code related prototyping tools with things like pseudocode or using more interactive programming environments such as swift playgrounds or some kind of ripple depending on which language you use or you might be thinking about kind of web-based tools that enable you to get a more quicker feedback loop in order to kind of create something faster for multiple platforms with things like framer and react native but you if you're a designer on the other hand and yeah this is what designers look like to me they all paint with acrylic paint and they all wear Baskar site I don't know if you're a designer you're probably thinking about different kind of things you might be keep thinking about sketching out the UI and sketch or Maya or prototyping motion using After Effects or you might be thinking about these kind of platforms and tools that enable you to take some of your static images and kind of share them as interactive prototypes with things like envision and Flint oh so we can already see here that depending on who we are and what we work with we probably have very different ideas when it comes to prototyping we can also see that we usually tend to do prototyping in isolation designers they do design prototyping Bella purrs they do code prototyping so how can we miss this mash this up more together and how can we work with prototyping in our day to day lives that's kind of what I want to talk about today so I want to talk about different prototyping techniques that I've used and also how we can use those techniques to establish prototyping workflows and kind of integrate it into the work that we do but first things first I think one important question to think about first is kind of why do we want to do prototyping in the first place why is it so valuable why do I like it like why do why do we use prototyping because I think it's easy to look at prototyping as something kind of optional something that you do if you have time something that you might skip because it's not very valuable something that doesn't it doesn't get included in the estimate or the budget and some people might even consider prototyping to be a complete waste of time you know why should I write code or do designs that we're just gonna throw away why not just work on the app directly and that's a that's a good thing to ask yourself and second if you work with clients which I do I hear this a lot from people who do consulting work and a freelancing work is that you know what the client doesn't want to pay for prototypes right the client only wants to pay for production code they don't want to pay for prototypes or unit tests or things like that right so I work with clients and my time is definitely limited just like everyone else's the hour there are only 24 hours per day so how come I use prototyping so much well for me kind of prototyping is kind of an extension or a continued evolution of kind of how software development has changed during like the last decade or so so for those of you who were in the industry like ten years ago or something like that you probably remember doing kind of work in this style that we've later come to named waterfall right where in case you don't remember or in case you weren't there back then the idea kind of behind waterfall I mean we didn't call it like that back then it was just normal work but the idea was that we make some kind of specification in the beginning of a project we decide what it is that we want to build and then we build it basically we iterate and we keep building it until we're done and we ship the product now this approach here had some big big drawbacks because as our projects grew more complex and as like apps became like more of a thing and we did more rapid developments having this big plan from the beginning was not very realistic because our product keeps changing and evolving as we learn more about it and as we want to tweak things and this kind of approach didn't soothe that way of working so during these last couple of years I mean many many teams around the world have instead started using this agile approach or agile ish you might call it scrum you might call it Kanban or something in between maybe scrum or fall I don't know but the idea is that you more have a iteration cycle a feedback loop where you plan some things you do that work you build the app then you incorporate feedback into your work and then you make a new plan maybe every week maybe every two week etc and I think this is how most of us work today and of course at some point we also have to ship things but you know we'll figure that out later right how to ship and how to monetize that they'll come later so I think that prototyping fits very very nicely into this workflow because what I usually do is that when I get a plan and when I formed the plan together with a client or with some friends that I'm building something with the first thing I do is not to start coding or start designing instead I start prototyping in order to learn more about the problem that I'm facing and in order to kind of more cheaply and quickly validate my ideas and validate the kind of approach that I'm planning on taking so today I want to talk about prototyping from kind of four different perspectives and four different topics so today we're going to go through these emojis and see what lies beneath them and we're gonna start by talking about constraints now constraints is probably something that most developers and designers associate with layouts right ask kind of we get more and more devices we need to build these constraint based layouts and we need to like make them scale but that's not what I'm talking about here okay this is not gonna be prototyping using layout constraints so don't worry we're not gonna go deep into that instead the context of which I'm talking about constraints here is the context of rules that define the boundaries of a prod of a project or a prototype in this case so having good constraints and a deciding of good can't kind of parameters for a project or for a prototype can be really really essential so I want to show you an app that I'm currently working on if the clicker works there you go and this app is one of the clients that I work with it's called multi mates it's a Norwegian start-up and they're trying to make corporate training a little bit more fun so when you work in a big company like a big bank or a big retail chain you get lots and lots of information sent to you with PDFs and email and we're trying to wrap all of that up into a fun to use app where you can take different courses in order to learn more about your company its products and things like that but one big challenge that we had building this app was that we got a lot of feedback from users that who worked in big big companies where this list of courses would grow very very long it would be a lot of material and they didn't really know which of these courses that was relevant to them so we started thinking is there a way that we can display more details in this ListView is there a way to kind of add more context so that users can more decide what they want to open well there were so many different ways we could do it you know we could add things to the list we can add popovers we could add alerts we can have swipeable things so this was a great use case for a prototype to try out many different ideas to see which way we wanted to go but before we started coding and deciding then we decided on some constraints what were some of the constraints we wanted to add to this prototyping project well the first one was that we wanted to decide a clear goal we want to make sure that we have a good goal which is in this case to prototype a way to display course details in the overview there's a clear goal that we want to achieve the next constraint is about time we didn't have five weeks to prototype this so we decided that we want to do it all in one day and that way we could focus a lot more we knew we had limited time which also could influence what kind of solutions we wanted to go for and last but not least was we decided a constraint on how we wanted to build this we didn't want to spend a lot of time building new UI stuff and inventing lots of new paradigms because we just had one day right so we decided that we're just gonna use system components in order to build this prototype so these constraints I think are really important because it gives us focus and it enables us to kind of have a good set of parameters in the team of what we're prototyping but equally important to adding constraints is also removing constraints I think as humans or people we put a lot of kind of pressure on ourselves when we make a new project it needs to be super original it needs to be amazing or it needs to be like be something really valuable that no one has seen before so removing some of this pressure and these constraints can really help us get more creative so one thing that we did that we decided that we don't need to find a way to display all the course metadata we only need to solve one problem at a time and secondly is that we don't need to invent a brand new way of displaying details in this list view we can just use system components and it's fine if it works the same way as some other app or some other thing that we've seen before so with prototypes we kept good doing at this for a couple of hours and eventually we found a solution that we really liked and it looked like this like this so we added this popover which is a system control on iOS and we also reused the logo view that we had from the ListView and we could just bring in and we decided that the best piece of information for us to bring up was the description because that gave enough context for people to actually see more details about this course now the cool thing was that because we prototype this in such a quick and easy manner we actually had lots of time left so we could actually continue iterating on this prototype and add more things to it we could add tags we could add a like button we could add more resizable controls and things like that but I think the cool thing and the key thing is that because we decided on these constraints early on it took kind of the pressure off we could make something simple in the beginning and iterate on that during the day and this is actually what we ended up shipping at the end of that day so we actually built design and prototype this feature in one day in the end which i think is pretty cool so constraints can really help with focus and it's a great tool to give yourself more time for prototyping by setting limits we all have really busy schedules we some of us work for clients that pay for every hour that we work when some people have deadlines we need to make sure that we can fit this into our busy schedule and setting limits on what we're kind of doing with prototyping can be a great way of doing that it also gives us more focus because you have a more clear objective and we're solving one problem at a time and finally it makes it a lot easier to be creative by removing some of this pressure to always create something extraordinary something advanced something complicated and focusing on the simple solution so that's constraints next I want to talk about MVPs now when you hear the letter combination MVP I bet that most of you if not all of you think about Minimum Viable products right and that's what we use a lot we're building apps or building products we want to find a way to take our really ambitious project our really ambitious idea and distill it to something simpler that we can actually ship in order to get feedback early and improve on it now there are some pros and cons with this way of working of course the the big big advantage is that we get feedback earlier in the process so we can incorporate that we can iterate and we can also avoid the risk of kind of building something that users don't want but the big disadvantage of MVPs is that we might ship something too early where we don't provide enough value for users so our app simply gets ignored and this again is something where I think prototypes can be a great great solution so when I talk about MVPs I actually don't talk about Minimum Viable products I talk about you probably guessed it Minimum Viable prototypes so what our Minimum Viable prototypes and what do I mean well it's a way to kind of take a prototype idea and do the very minimal effort in order to have something that we can test and we can use and we can get a feel for it and in many ways we can actually do these prototypes without writing a single line of code and without even opening sketch or Photoshop so let's look at another example in this case we want to prototype a way to navigate in an app now navigation is something that is becoming more and more tricky as apps become more complex as they gain more features and as kind of different user journeys and different things kind of go in between and become complex it's also something that we really want to get right because if we start building in the app and then later change our navigation we might need to refactor a whole bunch of code and we might need to redo a lot of our designs which can really end up costing a lot of time and money so this is an again a great case for a prototype so let's say we're building an app for a store this store it has four different sections it has a section for the featured products in the store a section for the catalogue where the user can browse all the products a for you section where we use this new cool machine learning to actually bring people some great recommendations and then we have a search engine as well so when you see this kind of list of top-level features you might think to yourself well this is easy we don't need to do any prototyping I know how the navigation is going to work we're just gonna create a tab bar right you take these four items and we all put them in the tab bar tab bars are great I love tab bars they're beautiful and easy to use but the problem here is that users they don't think about our apps as this blocks of features when a user has a task that they want to perform a destination they want to reach they're more thinking about that than which feature they're actually using so for example if users want to find the items on sale where should they go should they go to feature should they go to for you should they just search for sales how should it work it's not so clear anymore it's a bit more ambiguous so to prototype things like this is a great way to use this viable prototypes and one tool that I love to use for this kind of stuff is actually HTML now before you boo me off stage because I know that a lot of mobile developers don't really like HTML and don't really like web development I'm not talking about Web Apps I'm just talking about HTML as a format and as a format HTML has some really nice characteristics when it comes to prototyping first of all it's all about defining a structure it's all about defining a hierarchy that we can navigate through and secondly it's extremely easy to render we don't need to write any UI code at all we can take any HTML file we can put it in any web browser on the planet and it will show a UI it's almost like magic and magic is great when we want to create prototypes quickly so how can we use HTML to prototype navigation well what we're going to do is we're going to take one part of this app we're gonna take the featured section we're gonna create a tree from it so we're not going to care so much whether the navigation is like modal presentation or if it pushes a new screen onto the stack we're just gonna make a structure out of the different user journeys so you can go into featured you're going to news and can there find sales and that was what one of our users was looking for or you can go into editorial you can find fashion and deed these different things so now let's create an interesting HTML structure to actually represent this tree we're gonna start by entering dark mode okay so we're gonna have a little bit of code here but it's HTML so I think it's fine and what we're gonna do is we're going to create these unordered lists and in each item in each list item we're gonna put an anchor tag a link to another HTML page so this is going to be the initial entry point where we have all of our top-level features and each one points to another HTML file and then for each of these features we're gonna do the same thing we're gonna create another HTML file in this case featured dot HTML and then we create a link to editorial and a link to news and so forth and so we go now if we take then this this these different HTML files from our in our file system and we open them in a web-browser we're going to see this it doesn't look pretty we're not testing the UI here at all we're not prototyping the animations at all instead we're just prototyping the structure we're prototyping the navigation and the user journeys so now we can take this HTML prototype that we built in just a couple of minutes and we can give it to someone for example we can you know find our friend in the accounting departments or we can grab someone from the streets I've actually done that and we can ask them to perform a certain task for example can you please find sales here in this structure so this person is going to go and they're gonna start clicking around maybe they are lucky and they find feature directly they go into editorial hmm not quite what I was looking for and then they go back to news and they finally find sales that they were looking for and I think this can be a really great way to make sense of a structure or make sense of like a navigation tree and may get a better feel for which user journeys are easy to perform which ones are hard to perform and which ones do we might want to bring up a level in order to make them easier to find so Minimum Viable prototypes can be a great great option if you just want to do something quick and dirty in order to figure something out so it can be a great way to test out an idea or a new feature without doing much if any design or coding we didn't open up Android studio or Xcode or Photoshop or sketch here we just wrote HTML and HTML can be a great tool for just that but you can also do many other things you can draw by hand it's old-school but it works you can use mind mapping for example if I am starting a new app project I always create a mind map of the different classes and the different kind of code structures that I'm going to use and that way I can identify we're dependencies or weird kind of relationship between objects before I've even started coding it saves me so much time and pain of having to refactor that later and finally one thing that is really important to remember I think is that it's completely ok to throw away your work I probably throw away like 90% of all the code I writes because I do a lot of prototyping and do writing throwaway code or doing throwaway designs is a hundred percent okay and it can be very liberating if you're not caring so much about following all the rules or or architectural patterns or whatever you can do a lot of things you can get very creative and that's MVPs now let's talk about modularity so for modularity I want to talk about it from two different perspectives we're here for both code and design so I want to talk about both of these two things we're gonna start with modularity from a code perspective and how that can I'd it kind of helped us when it comes to prototyping so when you prototype you usually want to create something new you have a new feature you want to try out a new idea a new pattern something new UI maybe and we saw before with MVPs Minimum Viable prototypes that we can do that sometimes without a lot of dependencies without a lot of code and things like that but of course that's not always true sometimes we need a whole bunch of things in order to actually be able to prototype we might want to bring in our image loading code from our app we might want to use our login system or you might wanna use our search algorithms or our view code or our themes or our styles and being able to bring in some of these things in order to not have to write them again in the prototype can really help us save time and make it more feasible to create a good prototype because a problem is if we want to take just a few of these things and use them in a prototype it's not very easy if our architecture kind of looks like this if all of these things just float around in one big blob in the app it's not very hard to pull out one of these things it's kind of like pulling one kind of strain of spaghetti out from a spaghetti bowl it's not very easy it would be a lot nicer if we could just cherry pick a few of these different things pull them out and actually bundle them together with some custom code and some custom designs to actually form a prototype well that's easier said than done right well just take some of your code take some of your image and pull it out right how hard can it be it can be really really difficult but I've done this now many many times in big apps like Spotify where I used to work and small projects and and small teams that I worked with as well so I want to give you my top four tips when it comes to creating better modularity and pulling things out from a big codebase so number one thing is to use frameworks and you might call them libraries or modules or packages depending on kind of which language you work with so here goes the four tips for modularizing and the first one is kind of how you identify code that can be easily modularized and one way I do that is that I look at multiple classes that share the same prefix so for example if I have a class that deals with the user and then I have a user manager and a user cache and a user loader I could probably take those four things and form user kits or a user framework out of them and that way whenever I build a prototype that needs to deal with users I can just you reuse that code I don't have to rewrite it from scratch another thing to look out for here is to look for code that performs a dedicated task for example if you have login code or caching code or image loading data loading things like that those are usually ideal candidates because they perform a single dedicated task that can perform it in isolation one thing that can usually be a breaking point is that if you have these hard dependencies between multiple types it's important to establish really clear api's between them and to use interfaces to make it more dynamic and easy to code with and one big big thing that can be a big problem is if you're using global States for example Singleton's or other form of global state that you share and moving that out of your classes and out of these code can really help you modular ice it and finally I think it's important to define an API entry point for your module so if you've used any type of SDKs like analytics SDKs or crash reporting as the case they usually have like one class that you can just instantiate and it just works and that would be a really great way if we could structure our API like that too because if we do it's going to be much easier to use in our production code and it's gonna be much easier to use in a prototype as well so that's some tips for code modularity now let's talk about UI so here I've created an app this app is for showing lists of recipes and in this case we have some tasty spicy chicken soup really really nice now when we build this view here or this the cell or whatever we call it usually it's pretty straightforward when we have something like this to kind of create a mental model for it you know in for example sketch and Photoshop and in the code we might name things something like this we have an image view we have a title label and we have a detail label right it's very straightforward I think most of us in this room has done this like a hundred times you know especially for this kind of stuff after all most apps that we make are lists of things so it's very straightforward but once we start iterating on this and add new features we're going to run into some interesting challenges so for example let's say that we want to add a social element to this app because all apps needs social elements right so we add this social bar at the bottom where you can see who of your friends have recommended this recipe for you and while we're at it let's also throw in a favorite feature as well so that users can favorite their favorite recipes and show them in another list all right so that's cool we have these new features everything's good but then we want to prototype something new let's say that I have an idea that this this social element here isn't really working out we're looking at the analytics and people are not really using it so we want to replace it with a recommendations bar instead where the user can see some recommendations for related recipes and of course because I'm Swedish I'm putting meatballs in there you know it's of course and it's hard-coded even so for every recipe recommended is meatballs so but this kind of awkward or hard to do because our whole code that we have is assuming that this bottom bar here is a social view but it's not a social view anymore it's now our recommendations view so our code becomes kind of awkward we probably have to make lots of if statements and hacks we have to mess up our sketch file and I know designers really don't like when I mess up their sketch files so you know everyone kind of gets frustrated by this so how are some of the ways that we can actually address this problem one way I like to do that is to instead of creating these very concrete naming and concrete's views in this in this list list view is to instead create these slots where we're not trying to make this view completely super dynamic we're not making it render anything but instead we're keeping the layouts we're keeping the structure but we're just removing everything that makes it hard coded so we're no longer have an image view we have a prefix view we're no longer the favorite button we have an action view and instead of the social bar at the bottom we have a bottom view now what's really great about this from a prototyping perspective is that it becomes very very easy to prototype a new feature if we wanted to make the recommendations view we can just put it in the bottom view slot we don't need to mess up our code we don't need to mess up our designs we can do it in a much much more modular atomic fashion and the good thing is that we can also reuse our UI code a lot more if we follow this approach for example if we want to make like a social feature 2.0 and make like a more rich view for showing our friends and their favorite food we can do that using the structure this is the exact same UI that we use for the recipe but we can now use it also to render a friend and it's all because we have modularized our UI in both our design and in our code as well so modularity can be really powerful it's makes it so that we can build apps more as separate building blocks and it makes creating prototypes a lot more easy and a lot more fun our UI can also be created in a much much more modular fashion as well using this kind of sloth based designs we can make things more dynamic without making them more complicated we're not trying to build us a silver bullets view here we're still making something that has a strict layout and a predictable behavior but we're just adding the slots to enable us to put any content in there and finally modularity also give us some really nice other side effects like making it a lot easier to test our code because it's more modular and doesn't make assumptions about everything else we can reuse a lot more code when we're building new features and we can reuse our designs as well and that's modularity and for the final topic I want to talk about creating tools now most people in this room here probably don't see themselves as tools developers or designers you're probably not creating your own design tools or your own developer tools every single day and I'm not trying to convince you to do that either but sometimes creating custom tools for yourself can be really really powerful and really help you with prototyping so the whole idea is to lower the barrier of entry for prototyping again we usually have very limited time when we're going to create a prototype so we don't want to spend the whole time setting things up you know fiddle around with colors or margins or setting up the architecture setting up the class structure we want to do things quick and easy now one tool that I use a lot when prototyping is Swift playgrounds I'm an iOS developer and playgrounds in Xcode enable you to run your code continuously you can immediately see the result it's awesome for prototyping things like algorithms or trying out new ideas trying out new UI and things like that but when creating a playground you need to perform a couple of different steps well first of all you need to open Xcode you need to go to the menu to select File new playground you have to pick a template you have to pick a destination and then finally you can start coding and a lot of times when I want a prototype I just want to get right in there and even though this just takes like 30 seconds to 1 minute it kind of is a mental barrier which makes me sometimes well no I don't really want to do this right now maybe I'll prototype tomorrow instead and then my idea might get lost so what I did was that I created a tool for myself to automate this process so now I can go to my command line and I can just type playground and when I do a playground opens like that and I can just start coding immediately I can create a new prototype view and I can see how it looks and it all just works now this is something that I wrote as an automation script in bash and when you can start prototyping it's any time you'll do it more often I can tell you because this tool creates a playground on my desktop with a date and I have one of these now I've had this tool for about a year and I probably have about 365 of these playgrounds on my desktop so you'll do it a lot more often if the barrier for entry is lowered however I understand that most many people in this audience will not be so comfortable with creating their own tools in things like bash or programming or scripting and things like that and it's fine bass is just one tool to use in order to create command line scripts but you can use so many other forms of automation as well you can do everything from write in any programming language that you want if you want to use Kotlin if you want to use Java that's fine but you can also do a lot of things that require no coding at all you can use sketch symbols to more automate your setup of your UI or Photoshop actions if you do things repeatedly and only if you use a Mac you've got the Automator app that can let you create automation in a very nice UI and if your iOS user and I was 12 we're gonna get a revamp of the work flow app which enables us to integrate with Siri and create really cool automation as well so I think this is a great opportunity to kind of lower the barrier for entry for prototyping and for exploring new ideas so creating tools that's all about reducing the need for setup and boilerplates when creating a new prototype automation is such a great way to get rid of tasks that are boring and repetitive and error-prone things that makes us say nah I'm not a prototype today I'm gonna do it tomorrow because he's gonna lower the barrier for entry and finally anyone can create tools and automation you don't have to be a command-line expert you don't even have to be a programmer there are so many tools out there that you can use to create automation for yourself to solve some of your problems and to get rid of these bottlenecks without writing a single line of code so to summarize today we've talked about adding and removing constraints in order to get more focus when prototyping to remove this pressure of creating something extraordinary every time and focusing on solving one problem with one prototype we've talked about MVPs Minimum Viable prototypes and how we can create prototypes using tools like HTML or mind mapping or drawing by hand that don't require a lot of work and a lot of code in order to validate an idea we've talked about how modularity both in our code and in our UI and our designs can really help us in order to better be able to prototype quickly and easier and finally how we can create our own tools in order to automate the process and be able to prototype a lot more often so now at this point you're probably thinking two things the first one is where's the boat party right and the second one might be how can I use prototyping in my team and in my projects that's a really good question and my suggestion would just be to prototype its prototype prototyping it doesn't get more meta than that because I really think that you can prototype everything thank you very much you can find me online I'm at Johnson Dell on Twitter I also run a weekly Swift blog and podcast at Swift bison delcom and you can find me and my good friend gear ambo talk about Apple news on stacktrace podcast FM if you have questions we want to talk about talking me about prototyping tell me your ideas or hear about your ways of doing that I would love to do that I'll be around the whole evening tonight I'll be at the boat party and I'll be also here the whole day tomorrow as well thank you so much [Applause]

Channel: App Design & Development Conference - ADDC

Views: 2,516

Keywords: prototyping, mobile prototyping, mobile development, addc, mobile ux, John Sundell

Id: vmZ8XrmFvYc

Length: 35min 56sec (2156 seconds)

Published: Sat Jul 28 2018