hey welcome to day 14 of playbook my name is Nick Horeb I'm the founder of playbook and also our other software company called harvest profit and so today I'm going to make a real quick video showing you some of the prototyping tools and a figma I'm showing you some of the design work that we have put together for playbook and then also show you where a little bit of our design work is lacking and where we need to do some work on refining some of the little details in the design that tend to make a big difference when it comes to building a great UI so here's an example of when you first log into a your PlayBook account you're going to see a list of processes that are underway and you will be able to view each one of the processes you will be able to view each one of the tasks within the process but one of the key features here is just you know getting the work done and so getting turning that process you know taking off the tasks in the process and so here's an example of the process that has a number of tasks and then it has a decision point if you go down one path it has these set of tasks or on the it's kind of a boolean if this then if this then that so then if you go down path number two it has these tasks so let's say we want to look at task number four we want to see what the details on that task are so I'm going to build a prototype in figma here and so I'm gonna click this element this is the expand element then if we drag this button all the way over to selecting this screen and so this would show us the details of the task and then if we want to we can either we can update it here this is a example of a checklist a you know adding a attachment so these are really highly flexible past where you can put in different things like uploading files multiple choices some some pretty some pretty cool different components all actually might as well just show you those while we're here so here's the different components that you can build a task in playbook so you can have you can build a different drop this is what the when the admin creates the task what they see and this is what the user would see when they create the task and so we have this is an example of a short paragraph you know a short answer a multiple choice you can create a drop-down here's a decision here's a time a date a linear scale so if you want to say what does you know what's the cleanliness of this office scale of one to ten you can select that or if you're you may be looking maybe your property manager looking at a tenant moving out you can say what's the the plan leanness of the bathroom the cleanliness of the of the kitchen of the bedrooms and then also this this really highly flexible checks checkbox grid so you can specify different rows and different columns so given that we work with farming you could say all right go take a look at this field you know a field of wheat and see if it looks like there's any issues with fertilizer chemical and so you can build out a really highly flexible check box grid now those are really the main components here in in play-doh so I'm going to go back to building this prototype so if now if I click the expand task it says me to this screen then I also want to be able to close this and so then it just takes me back to that screen so really simple example of prototyping and so I'll play this really powerful set of software this figma is the fact that they can do this all on the web is is awfully impressive more than happy with figma and I actually look forward to the point where we add another editor to our account to to play to be able to pay them so here we go and click on expand the task we now see the new tab we see the details of this task and we go back to this screen so it shows you know this one doesn't necessarily have any animation but there's a lot of advanced prototyping features there the one thing that we would want to do here is we would want to and really the weakness in our design it's a little bit of the victim of movie too fast is being able to do things like click hover States we should really have more states here within this design so when you're hovering you know like here we have a when you activate this activate process you can select from a bunch of different process templates you know we should have mouse hovers and just different states in the design and so we will likely be adding those but with you know probably or thirteen fourteen percent done with this project here we do have to move a little bit fast and so that might be something that falls to the wayside another thing to note I'm not quite sold on these progress bars here I just don't think they match our design so will likely be changing those so I'll go back to a figment or design and so they get to the prototype then you just click prototype and it brings you right to those prototyping features pretty pretty awesome you know you can have you can have the different hover actions when the mouse enters when it leaves just really a amazingly flexible set of sort of prototyping tools you can do some of this in sketch you know there's envision there's origami there's a lot of different tools but for us to have this right in the web multi-user access both design and prototyping it's just a win for us so more than happy with figma hopefully zoom out I was just going to show you the different screens that we have so here's all the different screens that we've designed for for PlayBook so far there likely needs to be probably at least two or three times as many of these to handle the different states hover States mouse overs just a lot of the different highlights bells and whistles that really make a design first-class so today just want to show you figmas prototyping being able to just click on an element and select the action and select the next screen to me as a yeah I found it shockingly simple for somebody who hadn't done anything with prototyping as of three or four days ago so with that said check out figma it's great hope you get some value out of these videos we'd love for you to subscribe accept notifications we're moving along here pretty quick and I'll provide you another update tomorrow so thanks for watching day 14 and we will hopefully see you along on our journey thank you

Day 14: Starting a Software Company in 100 Days – Prototyping with Figma

Leave a Reply

Your email address will not be published. Required fields are marked *