Detailed Notes
One of the most valuable tools you can utilize in the journey of becoming a better developer is the clickable demo. This episode of our developer series delves deep into the importance of prototypes, wireframes, and proof of concept demonstrations, especially in the critical phases of requirements and design. Let’s explore how clickable demos can bridge the gap between your vision and your customer’s expectations, ensuring that both parties are aligned before any significant code is written.
Read more ... https://develpreneur.com/the-power-of-clickable-demos-in-the-software-development-lifecycle
Stay Connected: Join the Developreneur Community
We invite you to join our community and share your coding journey with us. Whether you’re a seasoned developer or just starting, there’s always room to learn and grow together. Contact us at [email protected] with your questions, feedback, or suggestions for future episodes. Together, let’s continue exploring the exciting world of software development.
Additional Resources * Building Out Your Application From a Demo (https://develpreneur.com/building-out-your-application-from-a-demo/)
* How to Create an Effective Clickable Demo (https://develpreneur.com/create-effective-clickable-demo/)
* Successful Presentation Tips for Developers: Effective Demo Strategies (https://develpreneur.com/successful-presentation-tips-for-developers-effective-demo-strategies/)
* Transform Your Projects: The Ultimate Guide to Effective User Stories (https://develpreneur.com/transform-your-projects-the-ultimate-guide-to-effective-user-stories/)
Transcript Text
[Music] there we go it's been a great day and yet I was able actually hit the record button which is always in itself a little bit of a challenge hello everybody and let's talk about this episode last time if you remember last time in the Cliffhanger we were talking about one of the things that we threw out there and I don't know if it was beforehand or not we're talking about like mockups clickable demos and wireframes and I think that's probably in general that's not a bad way to not a bad topic uh I think you I try to remember how we got to it was there something specific you remember talking about the requirements um and actually you know writing like how to get the requirements and that and then it it to me that was kind of like part of the next progression was wireframes mockups you know at what point do you do them how in- depth do you do them at what stage those kind of things okay let's uh yeah let's see what we can do we'll like Dive Right into this and see where we go with this because we do such a good job normally and so mockups clickable demos and wireframes I'll actually B I think uh let me uh because what was it uh let's see so the episodes we ended up with last time was unpacking the Psychopaths the scenarios basically the uh not so happy paths and then transitioning your project um talking about user stories which is where through the discussion we had started to talk about which got us talking about the mockups and wi frames you know kind of the stuff that we're getting ready to do right now on one of our projects but it just kind of seem like the next progression to that conation yeah I think that that makes sense we can we can talk about that and but basically how to how to do them what to what to you know what kind of things you look for and stuff like that a little bit of like okay if somebody says Hey I want a clickable demo or I want a mockup or I want wireframes it's like what what are you looking at in those kinds of things and so we'll see where we can go with it and I'm sure you'll figure out how we can use that for testing because that's what you do well hello and welcome back we are continuing the developer Journey this season uh we are developing where we are building better developers you're here you are becoming a better developer trust me just go with it you are becoming a better developer veler and honestly you are we all are because the more we we talk about it the more we bounce our ideas off each other the more we get exposure to different ways that people solve these problems or even ways people solve problems that we've solved but do it in a different context all of that is a way for us to grow as a developer my name is Rob Broadhead I am one of the founders of develop andur and also a founder of RB Consulting where we do we do uh Boutique cons in basically and it's about simplification Automation and integration it's how to take whatever it is that you've got help you figure out what you've got through like an IT audit or something along those lines and then help you figure out how to make it better through simplification Automation and integration I will go ahead and start in the good thing bad thing kind of stuff um let's see which I probably shouldn't put myself on the hot seat right now but I'm going to so uh let's a good thing yeah this is great we're talking about this just a second go before we hit record uh good thing is going along and picked up a new customer this week uh the bad thing is sometimes you pick up a new customer that's like shortterm and it's a lot of hours that you weren't expecting you were supposed to work you had all these you had this nice plan of like this is how my week's going to go this is what I'm going to get done these are all the things that are going to that I'm going to be focused on and you crumble that up and throw it over your shoulder because now you've got all this other stuff that came out of nowhere so it's a it is a bless blessing and a curse in itself one person who is always a blessing and never a curse is on the other side of this and this will be Michael you can go ahead and introduce yourself hey everyone my name is Michael M I'm one of the co-founders of building better developers otherwise known as develop andur and I'm also the founder of Envision QA where we help you evaluate patient or Elevate patient care with customized clinical software if you're looking to streamline workflows enhan Diagnostics and improve patient outcomes and QA can help uh we with Invision QA you can trust that your software meets the highest standards allowing you to focus on what truly matters your PA patients so well-being Imaging you know seamless operations we help you with all of that so if you need it give us a call good and bad this week uh good I'm finally getting caught up from the bad which was a week of Madness with um my wife's uh had a slight injury that we're trying to figure out how to uh get some care for um flip side of that it we are starting to make progress but uh kind of fell a little behind on things but getting caught back up and things are starting to at least come together in some shape or form all right so this episode we're sort of still in the uh we've talked about Psychopaths we've talked about requirements and all that kind of good stuff if you wonder about that go ahead and go back and catch up on those episodes this episode we're sort of continuing the talking through some of the major portions of the sdlc and we're sort of in that dis it's really in the requirements design kind of area we're going to talk about mockups or clickable demos or sort of like prototyping or proof of concept there's there's a lot of different ways that you can essentially move from a design and a requirement into a position where you are not just reading something you know providing something on a document or something like that but you're actually showing your user your customer what's going on and the and this is sort of where we got into this uh was the idea of instead of telling somebody it is a lot ever it's a lot better sometimes to show them when we talked about Gathering requirements that was one of the things they can tell you what they do but it's going to be so much more informative if they show you what they do this is where you have things like like mockups and clickable demos and things of that nature that are going to give you the same kind of value instead of writing out like a you know you can write flowcharts and you can do user stories there's all these things you can do that are all very useful tools for talking to your customer and and getting essentially getting the vision that you have this is you maybe as a collective development team or the implementers the vision that you have of what this is going to be and try to line that up with the vision of what the customer or the enduser has of what this should be because there can be a very big disconnect and one of the best ways to to start talking about those and bring them together is to put it in front of everybody and go there that thing right there I like it I don't like it it needs more buttons it needs less buttons it needs emojis whatever it is that it needs you can talk through that because now you have something that is concrete it's not some sort of a theal theoretical thing or you know or a sentence that somebody could read something into it is a hard piece of you know development software something along those lines so that that's where the value of a de of like for example a clickable demo is let's talk about what what do you want to actually do what is your focus when you're building something like that because I'm you I mentioned that the goal really the why is to get everybody on the same page and so you may ask which would be a fair question which is why we've got this episode and this is the topic what is it that I need to include in my clickable demo because it you know just a page and some stuff you can click on doesn't really do it so what should I be looking for what are some things that I should keep in mind while I'm building out this you know whether it's a prototype a demo wireframes things like that the thing I found that is the most critical piece of building out a good particularly early on a good clickable demo or wireframes is to look at the essentially the high-risk items what are the things that are most likely to cause confusion within like say for example the requirements and the user stories and by this I mean there's going to be things like things where there are going to be assumptions made things like hey a user is going to be on a page okay let's talk about that user bit let's have a a demo that basically says well we have to register a user or we have to create a user and then the user logs in and then they navigate to this page or it'll be things like the user has a dashboard see that kind of stuff all the time the user goes to their homepage well what the heck does that look like so you start putting stuff together to say okay here's what we envision the homepage to look like look at look through your requirements and essentially if particularly if you've built requirements in some sort of an interb phase where you're going through and you're Gathering and you've got some back and forth and you've got some questions that have been asked along the way where it wasn't maybe in the first you know the first past these things aren't obvious and so you ask some questions and you get an answer those are probably going to be some of the areas where there's more likely some sort of Disconnect or you know maybe there's some assumptions made or something like that if as you're looking through through your requirements you see where there is room for interpretation uh this happens all the time and is a great these are sort of those key words that you're going to look for maybe are things like you know I want a professional design or I want something that is you know functional over pretty or I don't need a lot of bells and whistles there's these generic types of phrases and so that's what you want to attack as part of your demo is you want to make sure first and foremost that you're you're looking at the requirements that you know and that you've got some way to say this is how we're going to progress through the the requirements now you may even do it on a like a user Story by user story basis so your clickable demo may actually be a series of clickable demos that is walking through user stories those are often if nothing else a great wireframe to work from is whatever the steps are the journey for each user story if you cover those in your demo then what you get to is you get to say here's the steps which you have that because you have a user story we all can read these are the steps but now you get to see those and see what does that look like what does the screen look like what are the navigational places that you're going to have what does it look like to gather that kind of information and it's sometimes it's going to be things like the user enters profile information and they don't really say what is profile information and if you ask them they say well you know typical profile information okay we're going to going to put you know first name last name email address some stuff like that and just say okay this is what it looks like so high what I call high risk items the areas where there is a potential for miscommunication or assumptions are the places you really want to focus on in your clickable demo and when you do it that's really where you know as you're talking through as you are demonstrating as you're presenting the clickable demo part of that script should call out those kinds of things while you're doing it so it would be things like here's the here we have a user logging in they are using their email address as their ID and they're using a password and it may be stuff that is part of this demo that you say are we going to you know are we going to have user this gets a little bit of requirements and stuff like that but it's like is the user ID going to be an email address are they guaranteed to have an email address should they use a phone number instead should they use do we need to think about mult Factor authentication I know we're back on picking on logins because there's a billion questions related to that but that goes right into like I don't know how many times I've gotten stuck on and then I'm gonna because I'm almost getting stuck on this platform but I'm gonna jump off in a second and give it to Mike the homepage the landing page is what happens once you log in what does that look like and so a lot of times I that is where you're going to go and a lot of times like I said I've gotten into clickable demos and we did not get past the homepage because we spent so much time talking through all of those pieces we're like okay we're going to schedule a follow-up to actually talk about other features so hit those kinds of things the things where there is generic terms and stuff that you know they they've got some Vision but they just can't get something out you know out of their head on paper give them now something by saying here's like almost like here's a blank slate here's a page what would you like to see here what I would like to see here is some inter some interaction from Michael and see what are your thoughts on this and or taking it a different direction if there's something else you wanted to tackle on the on this front sure so you've done a really good job of explaining what a clickable demo is and walking through the requirements and trying to present something to the end user to give them an idea of what this is going to look like this is either going to be a new application a rebuild of an existing application something brand new anything could even be a new feature added to the existing system what you didn't touch on and I want to expand into this a little bit is for those of you that may be this may be a New Concept to you building mockups wireframes yes clickable demos doesn't necessarily mean that you have to jump right in and start writing code one of the fastest ways to build a clickable demo is to throw something into PowerPoint do a bunch of screenshots of existing systems cut and paste everywhere and set it up in such a way where if you have to click a button that essentially takes you to the next screen or the popup of what it is you're doing there's absolutely no code behind the scenes it's literally a bunch of screen mockups for most of the application typically depending upon how advanced you go with the essential uh mockup design don't get too far in the Weeds on branding initially the main focus of these clickable demos is to get it in front of the users to see how the application would function how this feature works now that may include branding but branding should be at this stage very low on your to-do list you're mainly looking to get what is going to be on the screen essentially a wireframe kind of mock up your input Fields buttons that need to be clicked menu options and you literally if you're using PowerPoint it's literally copy paste create a new screen do some mockups literally do unless you have a massive application this should only take you a couple hours so you literally could throw something together in a very short period of time to get in front of your customers and get immediate feedback that's one of the beauties of this now if you need something a little more in depth and PowerPoint really isn't the direction you want to go there are things out there like miral and figma where you can actually go build uh designs that are a little more elaborate you can actually add some scripting to it uh they've got more wire mockups for mobile for web applications for desktop applications so there's a little more predefined there for these type of wireframes and mockups in addition to that there are other tools like just in mind that actually give you even more features where you can actually deploy these in a environment like like Expo to a remote user you can put it together send it out and let them play with it and then get their feedback in addition to that so now you kind of have all these tools to just get you there without writing code the nice thing about those last few features is at that point you can actually start polishing it a little bit given that a lot of these tools have custom models that you can drop in oh you need a login page okay here's the what the page looks like drag over some icons you can almost make it look like a live application downside to that if it goes off so well they may want it like oh it's done give it to me tomorrow no this is just a mockup it's a prototype if you do want to jump into the full demo the actually writing like a kitchen sync mockup application sometimes you need to go that direction sometimes you're building something that is either so cutting edge bleeding edge or just hasn't been done before you kind of have to see if it will even work so sometimes you kind of have to do a proof of concept in the process of of doing a mockup or wireframe because you're not entirely sure that what you're proposing can actually be done so you might accidentally be saying yes we can do this and then you find out that technology wise or platform Wise It's not a feature that can actually be implemented so you're going to avoid the headache of committing something uh committing to do something that you just can't do or that the platform or features can't do and in that case then you can pivot quickly before you even get into the full design implement ation so that's a little bit going from you know the wire mockups to the actual design the flip side of that I will say is if you're building any type of wireframe or mockup we've talked about doing G repositories doing source code repositories kitchen SYNC apps in the past episodes this is a cool and critical area that if you start doing lots of clickable demos lots of wireframes lotss of mockups take a lot of those components and drop them into your kitchen sink app or into your GitHub libraries so that you have this library of tools that you can use to quickly build mockups going forward for future customers or even hand it off to a development team and say here this is what it looks like build it so these are some very cool and very key areas to take you from that requirement section to get getting something in front of the end user that will give you more feedback get the conversation going more but also tell you if you're on the right track and if you're not where do you need to Pivot and where do you need to correct course so I guess there's a couple things that you that those are all great points and I think a couple things that to sort of follow up to keep in mind as you're doing this is initially one of the first things Michael mentioned was you don't need code there's a lot of ways to go through this which is a I'm glad he brought that up because I didn't I didn't mention it at all and those are great ways to quickly go through a some sort of a mockup or or clickable demo now one of the things with these when you're doing something like this you actually want to put as minimal amount of code as possible into it because the whole idea is it may change dramatically so while you may want to be you know going through and doing all this really nice cool stuff and building out CSS libraries and all these you react controls and crap like that don't resist the urge because it may be totally not used it may be something that you put something together and it gets thrown out completely now if you have to build particularly in a proof of concept kind of thing if there's if there's a solution that you need to build to a problem because you're trying to prove that there is the problem is solvable effectively then you do want to have some way to take that code it may be oneandone or throwaway code but you also want to be able to have it to build it in a way that will allow you to then take that and translate that into whatever the actual you know the actual thing is that you're going to be building down the road now one other thing I'd like to bring up as part of this is while code is not very useful in in a general sense in this case one of the things that can be useful is the data that you use like for example Michael mentioned you can take you can take screenshots and you can just throw some stuff in things like that if you can take screenshots that include data that is valid or relatable to the customer that makes a huge difference the kinds of things now sometimes you're like oh it's uh if it's like a CRM it's a customer relationship management kind of app then it's just you know you can do Joe customer and one 123 Main Street or something like that and that sometimes works but if if you're in a a specialty kind of thing for example if you're doing uh like a financial application or you're doing an EMR or you're doing uh an insurance or real estate or it's something where there is a specialty in there where it's some sort of a I don't want to say it's quite Niche because things like real estate are huge but they have their own language where there are professionals that you get in there and there is a I call it a mindset as as well as a language or terms that they use then you want to make sure that what they see in the demo makes sense to them so if you see it like I have been in situations like you have like the equivalent let's say like you have an EMR and you're just showing a a it's just a click roll demo and it's a it's a mocked up patient record and you suddenly and you have like values that like the blood pressure is completely jacked up I've had conversation had stuff where it gets off the rails because they're like that person's dead you would never have that patient it's like I know pretend pretend it's a different value you know it's that kind of stuff so make sure that you don't have your presentation the details of the presentation override the demo side of it because there is remember this goes back to what is it you're trying to get out of them you're trying to get them from them some specifics but really more a general are we on the right track and there's going to be like I said there's gonna be sort of those risk items and you want to make sure that you get what you need about those risk items if you allow it to if you do it in a way that confuses them or distracts them from the things that you want to want them to focus on then that can cause a lot of problems now the I sort of I guess I'll wrap my wrapping thought on that is that Michael talked about design there is I've I I personally go back and forth on this all the time there is the part of that would argue black and white simple like just squares and just nothing pretty but and sometimes that's very useful that's really good but I've also had situations where people are so lost because they have that completed thing in their head seeing the we'll call it the very ugly because that's lack of it's good as you can describe it the very ugly presentation of just pure functional throws them off I've had situations where it's just like they're they're like well how much you can we use this color can we change this can we put an icon here and they get into the design and it just becomes you know it becomes one of these things that it's like the you're lost in another area so uh parting thoughts on that yeah so one of the biggest problems with doing wif frames and mockup Rob really touched on is is scope creep or feature creep because as you're as I was trying to walk through using the tools you want to avoid like The Styling keep that out black and White's great I'm glad you mentioned that the other thing too is sometimes like if you have an iPad or a tablet with um paint Microsoft Paint on it that you can just quickly sit there and just draw what it may look like to in front of the user say here's an idea of what I've had there's more times than I can remember that I just flip open my iPad open up my draw tool and I just start drawing what I think it's going to look like now my drawing skills suck there I'm nowhere near as good as my daughter and I think if your daughter still draws she she could like put us all to shame but sometimes even the worst oblong looking door for a box is more than enough detail to get your point across to the user the point here in this topic that we're talking about is speed you want to get this concept in front of the users as fast as possible because it's going to change a lot a lot rapid fire communication back and forth through this period will save you a lot of time headaches and energy later when you start actually getting to the design and actually writing the code that being said I think it's time to wrap this one up as we we have I think given you enough of a you know clickable demo of an episode that maybe we've given you some ideas hopefully some things to think about the next time you're getting into uh whether it is a full-blown clickable demo or whether it's something where you're just like on a you could even be on a Sprint and you need to present something and it's just the words words are not enough it's a picture is worth a thousand words so hopefully you've got something you can think about next time through through to really help you even on a small scale do a demo proof of concept or something of that nature one of the things you can always do is you can send us an email at info@ developer.com you can contact us on our contact form at developer.com you can leave comments you can have there's so many different ways we're on X we are you can subscribe to us on YouTube on the podcast wherever you get Podcast leave us comments there recommendations suggestions and everything else you have because while we are moving into a new season very soon and we sort of already have an overarching overarching topic and you know epic that we're going to go through during that season we're always we're always looking for more feedback and where you want us to go and maybe some specific things that we can cover that we'll be able to work in along that ways that being said we will wrap this one up we'll let you get back to it so go out there and have yourself a great day a great week and we will talk to you next time bonus material because it got hopefully just as a reminder got edited out while Micha was doing it is sometimes you should make sure that you put do not disturb on if you're doing something where you've got potential requirements or sounds coming through and notifications and crap like that because I have professionally something going on in the background and there's like fires going on and stuff like that and I'm not directly a part of it but because people are yelling fire fire fire in the background my alerts are going off so professional tip their Pro tip try to always remember to do your do not disturb something that's more appropo to the actual topic do you want to throw any kind of bonus material out yeah just uh to reh highlight some of the things I talked about in the actual podcast section is you know look at your tools look at like PowerPoint for quick presentations throw up look at paint notepads something to quickly draw into use drawing tools use things like Miro figma uh Justin mind there's tons of prototype tools out there uh marcket that will let you quickly just drag and drop screens and throw it out there if you're a Mac User um oh shoot I the name of it just es xcode uh you can do that with xcode you you can throw screens together you don't have to actually add code but just throw a mockup together get something out there the faster you get feedback the faster you can get make sure that you're on the right track and you're not going off the rails and I think that's the key is find something there are a lot of tools out there that will help you quickly mock something up it will actually look pretty good uh yes you can get in that trap where it's like it looks too good but most of them it's going to be something that's going to make it look professional it's going to be the kind of stuff you're looking for to to not be necessarily too flashy but also to not be you know too ugly and a lot of times there are ways that you can export That Into You know some sort of an HTML or css or something like that whether it's something more high-end and and costly like you may run into like you know some of the Adobe products and things like that that can help you really design something pretty slick um but there are a lot you I'm just looking like thinking Michael mentioned figma gets used a lot I know a lot of people very comfortable with that these days uh if you want to go back sort of more old school uh there's there is the adob Envision has used quite a bit uh a lot of the tools that are uh app related tools like you can do stuff sort of in Android Studio you can do stuff in xcode that'll sort of mirror what your your deployment environment is going to look like uh there's school there's tools called sketch there's balsamic which has been used uh many times in the past you can even go to things that are more um that are really more like your your old school like Vio or something like that that are really really more like a flow kind of tool but you can get away with putting you know some nice pretty boxes up honestly one of the best ways to do it is just jump into PowerPoint you can throw some boxes up you can you can throw uh screen captures and things like that and like Michael said it's really easy just to walk through your path and you just click you'll click on a thing but all it's doing is it's actually just going to the next page so I'm gonna click right now and we're going to go on to the next one except for Michael's got something to say yeah so one additional thing that we didn't touch on is after you go through this process make sure and I mean in quotes make sure you go back and update your requirements to match whatever the heck you decide you don't want to have requirements that say one thing and your design says something else if those two don't match when you hand it off to the developers you're going to have that tree swing model headache that you don't want and if you didn't hear that make sure that your requirements sync up after you have these kinds of meetings I don't know how many times I've had people have had these great documents and then they almost throw those away and they don't get updated and you lose stuff and you end up with like well just look at all those do the mockups that we had or here's a whole here's hours and hours of recorded meetings that you can use to figure out what we actually decide like you should almost have like a secretary to make sure that any feedback that comes from that make sure that that gets incorporated into some sort of a you know decision thing that gets pushed back into requirements so that that does translate forward that being said now once again I can press click click we're going to go on to the next screen or slide or whatever it happens to be but guess what we're still going to be on that slide as well go out there and have your goodself a good one leave us comments and all that kind of goodness and we will talk to you again next time [Music]
Transcript Segments
[Music]
there we go it's been a great day and
yet I was able actually hit the record
button which is always in itself a
little bit of a challenge hello
everybody and let's talk about this
episode last
time if you remember last time in the
Cliffhanger we were talking about one of
the things that we threw out there and I
don't know if it
was beforehand or not we're talking
about like mockups clickable demos and
wireframes and I think that's probably
in general that's not a bad way to not a
bad topic uh I think you I try to
remember how we got to it was there
something specific you
remember talking about the
requirements um and actually you know
writing like how to get the requirements
and that and then it it to me that was
kind of like part of the next
progression was wireframes mockups you
know at what point do you do them how
in- depth do you do them at what stage
those kind of things okay let's uh yeah
let's see what we can do we'll like Dive
Right into this and see where we go with
this because we do such a good job
normally and so mockups clickable demos
and wireframes I'll
actually B I think uh let me uh because
what was it
uh let's see so the episodes we ended up
with last time was unpacking the
Psychopaths the scenarios basically the
uh not so happy paths and then
transitioning your project um talking
about user stories which is where
through the discussion we had started to
talk about which got us talking about
the mockups and wi frames you know kind
of the stuff that we're getting ready to
do right now on one of our projects but
it just kind of seem like the next
progression to that
conation yeah I think that that makes
sense we can we can talk about that and
but basically how
to how to do them what to what to you
know what kind of things you look for
and stuff like that a little bit of like
okay if somebody says Hey I want a
clickable demo or I want a mockup or I
want wireframes it's like what what are
you looking at in those kinds of things
and so we'll see where we can go with it
and I'm sure you'll figure out how we
can use that for testing because that's
what you do well hello and welcome back
we are continuing the developer Journey
this season uh we are developing where
we are building better developers you're
here you are becoming a better developer
trust me just go with it you are
becoming a better developer veler and
honestly you are we all are because the
more we we talk about it the more we
bounce our ideas off each other the more
we get exposure to different ways that
people solve these problems or even ways
people solve problems that we've solved
but do it in a different context all of
that is a way for us to grow as a
developer my name is Rob Broadhead I am
one of the founders of develop andur and
also a founder of RB Consulting where we
do we do uh Boutique cons in basically
and it's about simplification Automation
and integration it's how to take
whatever it is that you've got help you
figure out what you've got through like
an IT audit or something along those
lines and then help you figure out how
to make it better through simplification
Automation and
integration I will go ahead and start in
the good thing bad thing kind of stuff
um let's see which I probably shouldn't
put myself on the hot seat right now but
I'm going to so uh let's a good thing
yeah this is great we're talking about
this just a second go before we hit
record uh good thing is going along and
picked up a new customer this week uh
the bad thing is sometimes you pick up a
new customer that's like shortterm and
it's a lot of hours that you weren't
expecting you were supposed to work you
had all these you had this nice plan of
like this is how my week's going to go
this is what I'm going to get done these
are all the things that are going to
that I'm going to be focused on and you
crumble that up and throw it over your
shoulder because now you've got all this
other stuff that came out of nowhere so
it's a it is a bless blessing and a
curse in
itself one person who is always a
blessing and never a curse is on the
other side of this and this will be
Michael you can go ahead and introduce
yourself hey everyone my name is Michael
M I'm one of the co-founders of building
better developers otherwise known as
develop andur and I'm also the founder
of Envision QA where we help you
evaluate patient or Elevate patient care
with customized clinical software if
you're looking to streamline workflows
enhan Diagnostics and improve patient
outcomes and QA can help uh we with
Invision QA you can trust that your
software meets the highest standards
allowing you to focus on what truly
matters your PA patients so well-being
Imaging you know seamless operations we
help you with all of that so if you need
it give us a call good and bad this week
uh good I'm finally getting caught up
from the bad which was a week of Madness
with um my wife's uh had a slight injury
that we're trying to figure out how to
uh get some care for um flip side of
that it we are starting to make progress
but uh kind of fell a little behind on
things but getting caught back up and
things are starting to at least come
together in some shape or
form all right so this episode we're
sort of still in the uh we've talked
about Psychopaths we've talked about
requirements and all that kind of good
stuff if you wonder about that go ahead
and go back and catch up on those
episodes this episode we're sort of
continuing the talking through some of
the major portions of the
sdlc and we're sort of in that dis it's
really in the requirements design kind
of area we're going to talk about
mockups or clickable demos or sort of
like prototyping or proof of concept
there's there's a lot of different ways
that you can essentially move from a
design and a requirement into a position
where you are not just reading something
you know providing something on a
document or something like that but
you're actually showing your user your
customer what's going on and the and
this is sort of where we got into this
uh was the idea of instead of telling
somebody it is a lot ever it's a lot
better sometimes to show them when we
talked about Gathering requirements that
was one of the things they can tell you
what they do but it's going to be so
much more informative if they show you
what they do this is where you have
things like like mockups and clickable
demos and things of that nature that are
going to give you the same kind of value
instead of writing out like a you know
you can write flowcharts and you can do
user stories there's all these things
you can do that are all very useful
tools for talking to your customer and
and
getting essentially getting the vision
that you have this is you maybe as a
collective development team or the
implementers the vision that you have of
what this is going to be and try to line
that up with the vision of what the
customer or the enduser has of what this
should be because there can be a very
big disconnect and one of the best ways
to to start talking about those and
bring them together is to put it in
front of everybody and go there that
thing right there I like it I don't like
it it needs more buttons it needs less
buttons it needs emojis whatever it is
that it needs you can talk through that
because now you have something that is
concrete it's not some sort of a theal
theoretical thing or you know or a
sentence that somebody could read
something into it is a hard piece of you
know development software something
along those lines so that that's where
the value of a de of like for example a
clickable demo
is let's talk about what what do you
want to actually do what is your focus
when you're building something like that
because I'm you I mentioned that the
goal really the why is to get everybody
on the same page and so you may ask
which would be a fair question which is
why we've got this episode and this is
the topic what is it that I need to
include in my clickable demo because it
you know just a page and some stuff you
can click on doesn't really do it so
what should I be looking for what are
some things that I should keep in mind
while I'm building out this you know
whether it's a prototype a demo
wireframes things like that the thing I
found that is the most critical piece of
building out a good particularly early
on a good clickable demo or wireframes
is to look at the essentially the
high-risk items what are the things that
are most likely to cause confusion
within like say for example the
requirements and the user stories and by
this I mean there's going to be things
like things where there are going to be
assumptions made things like hey a user
is going to be on a page okay let's talk
about that user bit let's have a a demo
that basically says well we have to
register a user or we have to create a
user and then the user logs in and then
they navigate to this page or it'll be
things like the user has a dashboard see
that kind of stuff all the time the user
goes to their homepage well what the
heck does that look like so you start
putting stuff together to say okay
here's what we envision the homepage to
look like look at look through your
requirements and essentially if
particularly if you've built
requirements in some sort of an interb
phase where you're going through and
you're Gathering and you've got some
back and forth and you've got some
questions that have been asked along the
way where it wasn't maybe in the first
you know the first past these things
aren't obvious and so you ask some
questions and you get an answer those
are probably going to be some of the
areas where there's more likely some
sort of Disconnect or you know maybe
there's some assumptions made or
something like that if as you're looking
through through your requirements you
see where there is room for
interpretation uh this happens all the
time and is a great these are sort of
those key words that you're going to
look for maybe are things like you know
I want a professional design or I want
something that is you know functional
over pretty or I don't need a lot of
bells and whistles there's these generic
types of phrases and so that's what you
want to attack as part of your demo is
you want to make sure first and foremost
that you're you're looking at the
requirements that you know and that
you've got some way to say this is how
we're going to progress through the the
requirements now you may even do it on a
like a user Story by user story basis so
your clickable demo may actually be a
series of clickable demos that is
walking through user stories those are
often if nothing else a great wireframe
to work from is whatever the steps are
the journey for each user story if you
cover those in your demo then what you
get to is you get to say here's the
steps which you have that because you
have a user story we all can read these
are the steps but now you get to see
those and see what does that look like
what does the screen look like what are
the navigational places that you're
going to have what does it look like to
gather that kind of
information and it's sometimes it's
going to be things like the user enters
profile information and they don't
really say what is profile information
and if you ask them they say well you
know typical profile information okay
we're going to going to put you know
first name last name email address some
stuff like that and just say okay this
is what it looks like so high what I
call high risk items the areas where
there is a potential for
miscommunication or
assumptions are the places you really
want to focus on in your clickable demo
and when you do it that's really where
you know as you're talking through as
you are demonstrating as you're
presenting the clickable demo part of
that script should call out
those kinds of things while you're doing
it so it would be things like here's the
here we have a user logging in they are
using their email address as their ID
and they're using a password and it may
be stuff that is part of this demo that
you say are we going to you know are we
going to have user this gets a little
bit of requirements and stuff like that
but it's like is the user ID going to be
an email address are they guaranteed to
have an email address should they use a
phone number instead should they use do
we need to think about mult Factor
authentication I know we're back on
picking on logins because there's a
billion questions related to that but
that goes right into like I don't know
how many times I've gotten stuck on and
then I'm gonna because I'm almost
getting stuck on this platform but I'm
gonna jump off in a second and give it
to Mike the homepage the landing page is
what happens once you log in what does
that look like and so a lot of times I
that is where you're going to go and a
lot of times like I said I've gotten
into clickable demos and we did not get
past the homepage because we spent so
much time talking through all of those
pieces we're like okay we're going to
schedule a follow-up to actually talk
about other features so hit those kinds
of things the things where there is
generic terms and stuff that you
know they they've got some Vision but
they just can't get something out you
know out of their head on paper give
them now something by saying here's like
almost like here's a blank slate here's
a page what would you like to see here
what I would like to see here is some
inter some interaction from Michael and
see what are your thoughts on this and
or taking it a different direction if
there's something else you wanted to
tackle on the on this front sure so
you've done a really good job of
explaining what a clickable demo is and
walking through the requirements and
trying to present something to the end
user to give them an idea of what this
is going to look like this is either
going to be a new application a rebuild
of an existing application something
brand new anything could even be a new
feature added to the existing system
what you didn't touch on and I want to
expand into this a little bit is for
those of you that may be this may be a
New Concept to you building mockups
wireframes yes clickable demos doesn't
necessarily mean that you have to jump
right in and start writing code one of
the fastest ways to build a clickable
demo is to throw something into
PowerPoint do a bunch of screenshots of
existing systems cut and paste
everywhere and set it up in such a way
where if you have to click a button that
essentially takes you to the next screen
or the popup of what it is you're doing
there's absolutely no code behind the
scenes it's literally a bunch of screen
mockups for most of the application
typically depending upon how advanced
you go with the essential uh mockup
design don't get too far in the Weeds on
branding initially the main focus of
these clickable demos is to get it in
front of the users to see how the
application would function how this
feature works now that may include
branding but branding should be at this
stage very low on your to-do list you're
mainly looking to get what is going to
be on the screen essentially a
wireframe kind of mock up your input
Fields buttons that need to be clicked
menu options and you literally if you're
using PowerPoint it's literally copy
paste create a new screen do some
mockups literally do unless you have a
massive application this should only
take you a couple hours so you literally
could throw something together in a very
short period of time to get in front of
your customers and get immediate
feedback that's one of the beauties of
this now if you need something a little
more in depth and PowerPoint really
isn't the direction you want to go there
are things out there like miral and
figma where you can actually go build uh
designs that are a little more elaborate
you can actually add some scripting to
it uh they've got more wire mockups for
mobile for web applications for desktop
applications so there's a little more
predefined there for these type of
wireframes and mockups in addition to
that there are other tools like just in
mind that actually give you even more
features where you can actually deploy
these in a environment like like Expo to
a remote user you can put it together
send it out and let them play with it
and then get their feedback in addition
to that so now you kind of have all
these tools to just get you there
without writing
code the nice thing about those last few
features is at that point you can
actually start polishing it a little bit
given that a lot of these tools have
custom models that you can drop in oh
you need a login page okay here's the
what the page looks like drag over some
icons you can almost make it look like a
live application downside to that if it
goes off so well they may want it like
oh it's done give it to me tomorrow no
this is just a mockup it's a
prototype if you do want to jump into
the full demo the actually writing like
a kitchen sync mockup
application sometimes you need to go
that direction sometimes you're building
something that is either so cutting edge
bleeding edge or just hasn't been done
before you kind of have to see if it
will even work so sometimes you kind of
have to do a proof of concept in the
process of of doing a mockup or
wireframe because you're not entirely
sure that what you're proposing can
actually be done so you might
accidentally be saying yes we can do
this and then you find out that
technology wise or platform Wise It's
not a feature that can actually be
implemented so you're going to avoid the
headache of committing something uh
committing to do something that you just
can't do or that the platform or
features can't do and in that case then
you can pivot quickly before you even
get into the full design implement ation
so that's a little bit going from you
know the wire mockups to the actual
design the flip side of that I will say
is if you're building any type of
wireframe or mockup we've talked about
doing G repositories doing source code
repositories kitchen SYNC apps in the
past episodes this is a cool and
critical area that if you start doing
lots of clickable demos lots of
wireframes lotss of mockups take a lot
of those components and drop them into
your kitchen sink app or into your
GitHub libraries so that you have this
library of tools that you can use to
quickly build mockups going forward for
future customers or even hand it off to
a development team and say here this is
what it looks like build it so these are
some very cool and very key areas to
take you from that requirement section
to get getting something in front of the
end user that will give you more
feedback get the conversation going more
but also tell you if you're on the right
track and if you're not where do you
need to Pivot and where do you need to
correct
course so I guess there's a couple
things that you that those are all great
points and I think a couple things that
to sort of follow up to keep in mind as
you're doing this is initially one of
the first things Michael mentioned was
you don't need code there's a lot of
ways to go through this which is a I'm
glad he brought that up because I didn't
I didn't mention it at all and those are
great ways to quickly go through a some
sort of a mockup or or clickable demo
now one of the things with these when
you're doing something like this you
actually want to put as minimal amount
of code as possible into it because the
whole idea is it may change dramatically
so while you may want to be you know
going through and doing all this really
nice cool stuff and building out CSS
libraries and all these you react
controls and crap like that don't resist
the urge because it may be totally not
used it may be something that you put
something together and it gets thrown
out completely now if you have to build
particularly in a proof of concept kind
of thing if there's if there's a
solution that you need to build to a
problem because you're trying to prove
that there is the problem is solvable
effectively then you do want to have
some way to take that code it may
be oneandone or throwaway code but you
also want to be able to have it to build
it in a way that will allow you to then
take that and translate that into
whatever the actual you know the actual
thing is that you're going to be
building down the road now one other
thing I'd like to bring up as part of
this is while code is not very useful in
in a general sense in this case one of
the things that can be useful is the
data that you use like for example
Michael mentioned you can take you can
take screenshots and you can just throw
some stuff in things like that if you
can take screenshots that include data
that is valid or relatable to the
customer that makes a huge difference
the kinds of things now sometimes you're
like oh it's uh if it's like a CRM it's
a customer relationship management kind
of app then it's just you know you can
do Joe customer and one 123 Main Street
or something like that and that
sometimes works but if if you're in a a
specialty kind of thing for example if
you're doing uh like a financial
application or you're doing an EMR or
you're doing uh an insurance or real
estate or it's something where there is
a specialty in there where it's some
sort of a I don't want to say it's quite
Niche because things like real estate
are huge but they have their own
language where there are professionals
that you get in there and there is a I
call it a mindset as as well as a
language or terms that they use then you
want to make sure that what they see in
the demo makes sense to them so if you
see it like I have been in situations
like you have like the equivalent let's
say like you have an EMR and you're just
showing a a it's just a click roll demo
and it's a it's a mocked up patient
record and you suddenly and you have
like values that like the blood pressure
is completely jacked up I've had
conversation had stuff where it gets off
the rails because they're like that
person's dead you would never have that
patient it's like I know pretend pretend
it's a different value you know it's
that kind of stuff so make sure that you
don't have your presentation the details
of the presentation
override the demo side of it because
there is remember this goes back to what
is it you're trying to get out of them
you're trying to get them from them some
specifics but really more a general are
we on the right track and there's going
to be like I said there's gonna be sort
of those risk items and you want to make
sure that you get what you need about
those risk items if you allow it to if
you do it in a way that confuses them or
distracts them from the things that you
want to want them to focus on then that
can cause a lot of problems now the I
sort of I guess I'll wrap my wrapping
thought on that is that Michael talked
about
design there is I've I I personally go
back and forth on this all the time
there is the part of that would argue
black and white simple like just squares
and just nothing pretty but and
sometimes that's very useful that's
really good but I've also had situations
where people are
so lost because they have that completed
thing in their head seeing the we'll
call it the very ugly because that's
lack of it's good as you can describe it
the very ugly presentation of just pure
functional
throws them off I've had situations
where it's just like they're they're
like well how much you can we use this
color can we change this can we put an
icon here and they get into the design
and it just
becomes you know it becomes one of these
things that it's like the you're lost in
another area so uh parting thoughts on
that yeah so one of the biggest problems
with doing wif frames and mockup Rob
really touched on is is scope creep or
feature creep because as you're as I was
trying to walk through using the tools
you want to avoid like The Styling keep
that out black and White's great I'm
glad you mentioned that the other thing
too is sometimes like if you have an
iPad or a tablet with um paint Microsoft
Paint on it that you can just quickly
sit there and just draw what it may look
like to in front of the user say here's
an idea of what I've had there's more
times than I can remember that I just
flip open my iPad open up my draw tool
and I just start drawing what I think
it's going to look like now my drawing
skills suck there I'm nowhere near as
good as my daughter and I think if your
daughter still draws she she could like
put us all to shame but sometimes even
the worst oblong looking door for a box
is more than enough detail to get your
point across to the user the point here
in this topic that we're talking about
is speed you want to get this concept in
front of the users as fast as possible
because it's going to change a lot a lot
rapid fire communication back and forth
through this period will save you a lot
of time headaches and energy later when
you start actually getting to the design
and actually writing the
code that being said
I think it's time to wrap this one up as
we we have I think given you enough of a
you know clickable demo of an episode
that maybe we've given you some ideas
hopefully some things to think about the
next time you're getting into uh whether
it is a full-blown clickable demo or
whether it's something where you're just
like on a you could even be on a Sprint
and you need to present something and
it's just the words words are not enough
it's a picture is worth a thousand words
so hopefully you've got something you
can think about next time through
through to really help you even on a
small scale do a demo proof of concept
or something of that nature one of the
things you can always do is you can send
us an email at info@ developer.com you
can contact us on our contact form at
developer.com you can leave comments you
can have there's so many different ways
we're on X we are you can subscribe to
us on YouTube on the podcast wherever
you get Podcast leave us comments there
recommendations suggestions and
everything else you have because while
we are moving into a new season very
soon and we sort of already have an
overarching overarching topic and you
know epic that we're going to go through
during that season we're always we're
always looking for more feedback and
where you want us to go and maybe some
specific things that we can cover that
we'll be able to work in along that ways
that being said we will wrap this one up
we'll let you get back to it so go out
there and have yourself a great day a
great week and we will talk to you next
time bonus material because it got
hopefully just as a reminder got edited
out while Micha was doing it
is sometimes you should make sure that
you put do not disturb on if you're
doing something where you've got
potential requirements or sounds coming
through and notifications and crap like
that because I have professionally
something going on in the background and
there's like fires going on and stuff
like that and I'm not directly a part of
it but because people are yelling fire
fire fire in the background my alerts
are going off so professional tip their
Pro tip try to always remember to do
your do not disturb something that's
more appropo to the actual topic do you
want to throw any kind of bonus material
out yeah just uh to reh highlight some
of the things I talked about in the
actual podcast section is you know look
at your tools look at like PowerPoint
for quick presentations throw up look at
paint notepads something to quickly draw
into
use drawing tools use things like Miro
figma uh Justin mind there's tons of
prototype tools out there uh marcket
that will let you quickly just drag and
drop screens and throw it out there if
you're a Mac User um oh shoot I the name
of it just es xcode uh you can do that
with xcode you you can throw screens
together you don't have to actually add
code but just throw a mockup together
get something out there the faster you
get feedback the faster you can get make
sure that you're on the right track and
you're not going off the rails and I
think that's the key is find something
there are a lot of tools out there that
will help you quickly mock something up
it will actually look pretty good uh yes
you can get in that trap where it's like
it looks too good but most of them it's
going to be something that's going to
make it look professional it's going to
be the kind of stuff you're looking for
to to not be necessarily too flashy but
also to not be you know too ugly and a
lot of times there are ways that you can
export That Into You know some sort of
an HTML or css or something like that
whether it's something more high-end and
and costly like you may run into like
you know some of the Adobe products and
things like that that can help you
really design something pretty slick um
but there are a lot you I'm just looking
like thinking Michael mentioned figma
gets used a lot I know a lot of people
very comfortable with that these days uh
if you want to go back sort of more old
school uh there's there is the adob
Envision has used quite a bit uh a lot
of the tools that are uh app related
tools like you can do stuff sort of in
Android Studio you can do stuff in xcode
that'll sort of mirror what your your
deployment environment is going to look
like uh there's school there's tools
called sketch there's balsamic which has
been used uh many times in the past you
can even go to things that are more um
that are really more like your your old
school like Vio or something like that
that are really really more like a flow
kind of tool but you can get away with
putting you know some nice pretty boxes
up honestly one of the best ways to do
it is just jump into PowerPoint you can
throw some boxes up you can you can
throw uh screen captures and things like
that and like Michael said it's really
easy just to walk through your path and
you just click you'll click on a thing
but all it's doing is it's actually just
going to the next page so I'm gonna
click right now and we're going to go on
to the next one except for Michael's got
something to say yeah so one additional
thing that we didn't touch on is after
you go through this process make sure
and I mean in quotes make sure you go
back and update your requirements to
match whatever the heck you decide you
don't want to have requirements that say
one thing and your design says something
else if those two don't match when you
hand it off to the developers you're
going to have that tree swing model
headache that you don't want and if you
didn't hear that make sure that your
requirements sync up after you have
these kinds of meetings I don't know how
many times I've had people have had
these great documents and then they
almost throw those away and they don't
get updated and you lose stuff and you
end up with like well just look at all
those do the mockups that we had or
here's a whole here's hours and hours of
recorded meetings that you can use to
figure out what we actually decide like
you should almost have like a secretary
to make sure that any feedback that
comes from that make sure that that gets
incorporated into some sort of a you
know decision thing that gets pushed
back into requirements so that that does
translate forward that being said now
once again I can press click click we're
going to go on to the next screen or
slide or whatever it happens to be but
guess what we're still going to be on
that slide as well go out there and have
your goodself a good one leave us
comments and all that kind of goodness
and we will talk to you again next time
[Music]