Nocode Lisboa #7: The Bob Ross App Design Methodology Explained

This is a recording of the talk I gave for Nocode Lisboa on Wednesday night at Le Wagon:

The Bob Ross App Design Methodology is a 6-step framework I’ve developed over the years as a deterministic playbook you can use to overcome blank canvas syndrome and go from idea to fully-functional MVP.

This is the blog post I reference throughout the talk that has all the links and examples shown.

Let me know if you have any questions and if you’d like to join future talks like these join our meetup here.

Transcript

Sean 0:00
Okay, so the idea here, I mean, I wrote this blog post, I was telling Dylan before he got here, this post actually went viral on Hacker News. I wrote it, maybe two years ago, posted it, and it just was on the front page of Hacker News. And it got retweeted a bunch of times. But basically, this is like the method that I use. It’s a deterministic method. In other words, it’s a playbook that you can run. And it always works. If you follow the steps. It’s just It always works. And I love things that are like, definitive, where it’s just like, follow these steps. And you know, you’re gonna get to like ABCDEFG, you’re gonna get to, like, so. So what this is, it’s really a way of combating when, like blank canvas syndrome was like when you start with nothing, it’s like, Where do I even begin with this process. So this attempts to start at a very high conceptual level that like forget screens, forget interfaces, we get apps, we get all this stuff. And let’s start at the very highest level. So step one, is this idea of the aspirational press release. So this is something that Amazon has, famously has gotten famous for, there’s a book out there called Working backwards, that talks a lot about this. But basically, they do this thing called the PR FAQ. It’s a six page document, they write it up, and it’s a press release within a special format. And so I won’t like go into the details of that. But I can just show you. The here’s an example one. And this is all linked in the blog posts. I’m literally just showing you the blog post right now. But if you look here, this is the one that I wrote about when we were doing charity makeover. And the idea is project yourself forward. So if it’s going to be let’s say, think it’s like a four month Deb project, project yourself forward four months, and write the press release that you want to run at that point, looking backwards and saying, Okay, we’ve just launched this amazing app that we propose to build, you know, here’s who it’s for, here’s why it’s amazing. Here’s why you should go run out and sign up immediately. And what that does is a couple of things, it gets you to really think in terms of the value prop of what you’re offering. And it’s different than like, I don’t know why this works. But it does. The idea of projecting forward and remembering backwards. This is like a famous technique. Actually, I have a friend Luke Coleman, who developed this many years ago, in his book, innovation games, he called it remember the future. And for whatever reason, like if you try to, from today think well, what do we need to do? That doesn’t work. But when you project forward and remember backward, you’re able to somehow like reverse engineer what must have occurred by that point. And so don’t ask me why this works. I’m sure there’s some neuroscience thing to it, but it does work. And so yeah, and so if you want to read this, like, I won’t read the whole thing here. But basically, this is the press release, the one that I wrote up for us short and sweet. And it just says, you know, charity makeover today, unveils honey and hive, mobile app, web applications for enabling knowledge workers, blah, blah, blah. talks a little bit about like, what it’s solving a problem. You know, people crave, what is it we move, we prove the online format was viable, but definitely not ideal. Participants crave the in person collaboration, blah, blah, blah. That’s where the magic is. So it’s just like really like getting your head around, like, what is it we’re actually solving and getting super clear on? Yeah, it’s like an expanded elevator pitch. And having to write it as a press release really makes you think through things more than just being like, Oh, this is what we’re going to do. It’s like no, write the press receipt, like the one you’re gonna run. So okay, so that’s step one, is just like, Forget screens, just write the press release. And the output of that, or the goal of that, again, is clarity, it’s getting very clear on who the stakeholders are, what the value prop is, how do you message this thing, like get all that other way? The Amazon format takes it a little bit further in that they add an FAQ to the end of it. So it’s like a five page press release, and then a one page FAQ. I don’t think you have to go to that extent, I think the press release is sufficient. Okay, so that’s step one. Any question on that? Alright, so step two is now that we got the press release, we have this high level document. The next goal is to convert that into a series of what are called user stories. If you’ve never heard this term before, you can look it up. So user stories are bite sized chunks that kind of do what the press release does only at a more granular level. So imagine if we took that press release, and we were to then write a bunch of little mini press releases that are attempting to do the same thing in terms of like, we have stakeholder that stakeholder needs to achieve something like how do we message that? What is it what’s the value problems? So you’re essentially condensing it like deconstructing the press release into these user stories? Are these little bite sized blocks and I’ll just show you the The example that I used

Unknown Speaker 5:02
here, again, this is all linked. So,

Sean 5:07
so I use Trello. For this, I think it’s a good free tool, I’m sure there’s other ways to do it. But like here’s, they typically follow this format of as a PM, I should have the tools and workflow necessary to recruit screened and approved candidate volunteers for working on my claws. So that’s a good concise statement of as a blank stakeholder, I should be able to accomplish X, Y, and Z, for whatever purpose. And that’s like the formula for writing these things. And then if you want to like go into more detail, you click on it, and you can expand on that, and give a bunch of detail. But really like the idea here is, let’s say we have three different stakeholders in our system, three different types of people. And like, if we can just summarize the big one, like the basic stuff that each one of those needs to accomplish with the most simplest form of our app, then that’s what you’re aiming for with this.

Unknown Speaker 6:00
So yeah. The questions on that one, they’re still going to detail in the cards.

Sean 6:15
Yeah, I mean, so on these I went into, like, Yeah, I’ll go into a little more detail. I’ll break it out. Like they have checklists and stuff. And so you can like express more detail. But you all you’re trying to do here is really capture the essence of what are the main things that people need to accomplish? And you don’t have to think about again, we’re not like thinking about screens at this point. We’re, it’s purely conceptual, like, what are the goals here? What’s the what’s like the testing, when will this app is complete when this person can do X, Y, and Z? You your dice? User? Stories? Sorry? Yeah, yeah, exactly. So you can see how I have it separated out here. So I have MVP is this column, I have like a working now like this is immediately what I’m working on different versions that I already released here, on the right side. And so the goal is, yeah, and basically like, the more left you go, the further in the future we’re looking. So a backlog is just kind of like this catch all when, if you come up with something, it’s like, oh, yeah, we need to remember to like at some point, we got to be able to accomplish this, but it’s not essential, then put it in the backlog.

Unknown Speaker 7:29
So yeah. And

Sean 7:34
ironically, this project is what was the predecessor to problematic. So this whole thing eventually evolved into being problematic. So if we looked at like, today, the user stories, I still use the exact same format. This is the user stories for problematic. And I do it now, like monthly, you can see I started this one in April 2022. So it’s exactly one year into it. And you can basically just see every month, I started a new column. And you can basically see exactly what was accomplished and each month. And what’s what I’m working on. Now. This is everything that needs to happen before our event in two weeks. Like a big kind of catch all for what I want to get done this, you know, it says winter dev push, it’s now spring. But yeah, but same thing you can see it’s all phased out into the you know, like future releases. So anyways, so in summary, user stories, we’re still at a conceptual level, but we’re now breaking it down. And we’re expressing this in kind of a bite sized chunks with stakeholders in mind and like criterion that will satisfy so we can say like, Yes, this is done, because our, you know, whatever are our therapists role needs to be able to book an appointment and make sure no conflicts in their calendar and then deliver that appointment. And, you know, like, whatever it is in your guys’s case, so you haven’t broken out like that a person seeking therapy needs to be able to find a qualified instructor book a time. Right. Okay. All right. So moving on to step three. So now is when we start to think about screens. And this is where you’re going to sketch your first idea of like what the audience to do. Now. I’m like this talks about tatacliq balsalmic is a is a tool for wireframing in a very like low fidelity format. It decidedly looks like a drawing here show you so this is balsamic. It’s probably the very first one that was invented in this space, but it has like this famously, like hand drawn look to it. And the idea is to keep it low phi, you don’t want figma at this stage. You don’t want something that is like Super high fidelity, because there’s an attachment to the outcome, it’s premature to start thinking about, like, colors and styles and like, positioning and all this stuff you really want to keep it’s like very low fi because it keeps you detached and you’re not also invested in a specific,

Unknown Speaker 10:21
like, look.

Sean 10:25
Yeah,

Unknown Speaker 10:26
like before the news story is supposed to show. Yeah.

Sean 10:32
Yeah.

Unknown Speaker 10:35
Either at work?

Sean 10:39
Well, I mean, you guys are already there. So like, I think in your case, because you already have a high fidelity prototype, it could be useful, I would definitely do the press release. Because that takes like, literally, you could do it in an hour and probably have that done and like, well tested and like everyone, it’s it brings a meeting of the minds, especially in a group, when you can all read the same document and be like, do we all believe that this, like, captures everything? Or is there something else that we haven’t thought of, but, you know, let’s get to the point where we can all be happy with this document. And like that does a lot to just bring a meeting of the minds, which is what you want. I wouldn’t go back and like rework it in a low fidelity prototype, given where you guys are at like, you already have a Hi Fi like, pretty nice looking app design. So you just basically skipped over this. Yeah. Yeah, yeah. And I mean, everything we’re looking at could literally be done on paper. And there’s nothing so far that requires tech. But tech, when you use it, it helps. Yeah, like, like Trello is a great tool. I use it all the time. So yeah, so here’s where, like, I used to use balsamic. And frankly, these days, I just use a whiteboard. And I take pictures, I find it easier to stand in front of a whiteboard, even like whiteboard over sketching. For some reason, I find I think better when standing in a whiteboard. But this is where I guess it’s kind of a matter of personal preference, you find what works well for you. But I would suggest not even worrying like there’s other things, there’s this thing called wizard UI, za RD, show you this real quick. So this is another prototyping tool.

So this one actually uses, like, what’s it called OCR or machine learning or something where it’ll it’ll take a drawing and it will try to turn it into a digital representation of it.

Unknown Speaker 12:52
Well, I’m actually I’m

Sean 12:52
not going to go through this one. But this is just something else to be aware of like balsamic, if you want to play with it. It’s well done. But again, I think it’s maybe overkill. Like, you can get mired in tech, I feel like and all we’re trying to come up with at this point is just like sketches of the UI. Okay, so yeah, so output of this one. Let’s see. Look at what I have linked here.

Yeah, so these are literally, you can see my sketches here of the mobile app.

Yeah, so these are literally like whiteboard sketches of what an app could look like.

Unknown Speaker 13:48
So cool.

Sean 13:55
Use whatsoever of light was on my Yeah. Yeah. And it’s like, what’s his name? This Italian guy who’s like a solo founder. He’s still like, a company of one person. I’m pretty sure. Yeah. It’s crazy.

Unknown Speaker 14:10
Okay,

Sean 14:11
alright, so moving on. So let’s say assume that we now have a set of screens. And it’ll basically be like, individual photos of our sketches of what those screens look like. So at this point, here’s where we actually go now and we produce a clickable prototype. And I think this one is gonna blow your mind if you haven’t seen this one. I find this tool so useful. We use it at all our events. I’m gonna see if I can. Yeah, I’m gonna see if I can share my phone screen here

never remember how to do screen mirroring, like

Okay. All right. So this is what the app looks like. It’s called the Marvel.

Unknown Speaker 15:18
Basically,

Sean 15:19
what you do is you use this and you take photos of the screens, and you end up with, you know, a series of these images. And then you just go in and you do this ad link. So you can basically like hotspot anything. And say, I want to link to, you know, that one should link to this.

Unknown Speaker 15:45
Yeah, and let me actually,

Sean 15:47
I guess it doesn’t matter. Like, well, let me just do this. So the Zoom gets it. The recording

Unknown Speaker 16:02
the next slide, right?

Sean 16:05
Yeah, exactly. Exactly. So you guys, the fact that you’re already in figma, like, don’t, don’t retrace to get back to here. But again, if you were to have started at the whiteboard, this is a major jumps and I have to design everything in figma, and then link it all up and whatnot. Like you can do this in literally, the time it takes you to draw the screens, which it took me maybe, I don’t know, 20 minutes to draw the strings, and then borrow them. And then boom, like you can see, in a matter of minutes, we’re like hot like, and these things.

Unknown Speaker 16:39
Make sense? Doesn’t make sense for us as a person.

Unknown Speaker 16:53
Okay, so let’s resolve again, because I feel like I would have thought to the first thing when you think about Yeah,

Sean 17:04
yeah, it’s just premature to jump directly to the user interface, when you haven’t thought through the issues of like, well, who is this for? And what does it really need to do? And like, how do we message this thing? What are those people care about? It? Could it be that we learned something during the course of that conversation and writing that press release that we’re like, you know, oh, wait a minute, our users are blind, like, you know, something random like that, where it’s like, oh, we really need to rethink like, how we’re going to pull this off, given who we’re serving and given these other variables. So it just it honors the process of going through it in this in these series of steps. It unearths the right questions at the right time. And it’s just like the right way to get there.

Unknown Speaker 17:42
Which started there we go.

Sean 17:46
Okay, well, so let me just show you this. So this is what it looks like, once you, you know, you’ve drawn your screens, you take your photos, and now you’ve stitched them together and using the tool. And so then in a matter of minutes, you now have basically this, which is clickable prototype, go through this is literally for a new feature like this is the big thing that I’m working on now for problematic, the bounding the Benefactor model. So it just yeah, it just gives you a very simple way to get to essentially what you got in figment once you’ve done all that work.

Unknown Speaker 18:20
Right. So yeah,

Sean 18:28
yeah, right. So yeah, it’s like high high return low amount of work by reward. Okay, so that is the clickable mock up. And let’s look here. Okay. So high fidelity. So now is when we get to the point where once we’ve got that, and again, the reason for doing this, this in this sequence is we’ve invested very little time we’ve gotten to a clickable prototype, what does the clickable prototype get you? And I’ll just ask them, because if you think you know this, what’s the value of that creating that thing

Unknown Speaker 19:12
that we can share?

Sean 19:17
The thing that I just showed were the screens. And it’s like, it looks like an actual interface. You click on buttons and whatnot, like so I can share that that Marvel app, I give me a link to a URL and I can paste that in WhatsApp and say, Hey, like, send it to five my friends. And so what do you think it was? Like

Unknown Speaker 19:38
not wasting too much time and grading and packing. Getting expensive. Time and recording. Music is pretty hard without like getting invested. Yeah,

Sean 19:52
yeah. But like that is the value of that, right? Like you’re able to solicit input and you’re able to put something in the hands of your users without a lot of energy expended in like patching problems before you go down the wrong rabbit hole is the name of the game. So that is the value of it. Okay, but so now we’ve done that. So now we’re ready, we’ve got something that’s, you know, battle tested, we’ve got some input on it, maybe we’ve changed a few things, we redo the prototype. And now we’ve like gotten to a point where we’re pretty sure like, Okay, this is what needs to be built. So this is where we go to the Hi Fi prototype. And so now this is what you guys are now at is you use a tool like figma. And you’re you’re making like a pixel perfect rendition of what the app is going to look like, at that point. And here’s where there’s like a divergence, and like, this is where I like, so I don’t use fake, like, I’ve used a chosen bubble, like, I’ll show you what bubble looks like. Bubble is the no code platform that I use to build stuff. And what’s neat about it is it’s like, it’s only slightly more difficult than figma to like mock stuff up. And yet, when you mock it up in bubble, you can you can link things together and essentially accomplish the same thing that you can in figma, only when it comes time to then actually build it and put like a database behind it and make workflows and actions and all this stuff, then you’re just layering that in and you’re not having to like go into a brand new system and start from scratch and build it, it’s already kind of built. So you’re then just kind of like, you know, polishing it up and adding those, those features. So yeah, so like, this is the problematic web application here with all the pages here. You can see, this shows you like his article versus know this is this is the no code tool. This is like literally, the live site uses this. If I switch this to live, it’ll it’ll show you like exactly what the website is. But I’m saying like, I can create a clickable like high five prototype in this tool just by dragging all the elements in there and arranging them and making the strings the way I want them to be. But I don’t actually have to do the work of figuring out the data model, like creating the workflows linking all these things like validating data, like doing all the things you have to do to build an app, I don’t have to do any of that to make it a clickable prototype, I can just link in screens together and accomplish that. But the benefit of doing it in this tool instead of doing big money is that I’ve already then done that layout work. And now when it’s time to build it, I just have to wire stuff up.

Unknown Speaker 22:44
Yeah.

Unknown Speaker 22:50
The Peloponnesian

Sean 22:56
War? Well, it depends on how close you are in your first try, right? Like I would say, Don’t timeline with that limited to like, a confidence level. Once you’ve you’ve, you’ve had a lot of the feedback and you see a pattern and everyone’s saying, Yes, I can’t wait to use this. This is perfect. It’s like you’re seeking a level of like product market fit at that point, more than

Unknown Speaker 23:17
anything. Yeah. Raise positive things, and

Sean 23:27
then keep going, at least though you’re having those conversations, and it’s through those conversations. So this is what it’s like, it’s a you need an excuse to have the conversations, it’s almost like everything we’re doing in the low five part is just really an excuse to go get us in front of people to then be able to learn what we need to actually build. So we take our best guess and we save time by not worrying about the high five we do the low phi and then at the point where we’re like pretty confident now it’s like, okay, let’s let’s build a high five because like people, you know, like we’re converging on what we believe to be the right thing, then and only then do we actually switch to making the Hi Fi. But what I’m saying with this kind of tangent here, because this is one way to do it. The other way is to do what you guys didn’t like to do it in figma, which is totally valid as well.

Yeah, exactly like so. So like what I showed with the whiteboard is a conceptual, right, like, you’re not really Yeah, that’s Wi Fi. Anything that’s a sketch or a drawing or a whiteboard. That’s all low five, high five is where we’re like now using buttons and styles and colors and like what it’s going to actually look like

To my knowledge, and maybe this has changed, but like figma is still just a prototyping tool, right? It’s not it doesn’t have like a database behind it. It’s not like Webflow Obama were one of these tools

Unknown Speaker 25:02
in the last, right?

Sean 25:07
It’s still, it’s just a show of what it would look like. Yeah. Yeah. Yeah. And so like, I mean, this is why, like, I was super impressed that you guys as business students took it upon yourselves to actually learn figma and build off prototypes. Like I think that’s really like, laudable that you guys invested that time to learn a tool like that. And Mike was like, my position to you guys is like, well, for not much more work, you could learn something like bubble and then actually be able to deliver the app itself.

Unknown Speaker 25:39
We didn’t know about this, he told us you can finish the PowerPoint, but you can get that far. Right. Yeah.

Unknown Speaker 26:02
I want to do the same again, concise?

Sean 26:06
Yeah, so I’ll do exactly the same thing. I’ll help judge the pitches and get feedback and then do a little talk. And then I think what I’ve learned from this experiment is just in the class, I’ll make the offer to the to everyone the exact same offer will apply. And, you know, we’ll see, we’ll see, hopefully, something, yeah, we can build one or two of these at the next event. That would be amazing. And then it’ll be a good case study, I’ll be able to say, hey, look, here’s what we did it for the last spots. Alright, so we’re on step five, I think. Yeah. Any? Do you have any questions on this? Or good? Okay. Yeah, and by the way, I would just give credit where credit is due, this whole idea of doing it in the no code tool itself, I was using something called $1. Prior to bubble. It’s a little simpler, like, easier learning curve, but less, like more limiting and what you can do with it. And it was literally this forum post where the guy said, Hey, you can just jump right into building, you don’t need to, like prototype it, you can actually prototype it in the NoCo tool, and then just like, like, link it up. So it’s a dummy. It’s not an actual lab, and then like, wire it up once you’re ready. And I just, I just thought that was brilliant. So just want to give credit to this guy, because that’s where I learned it. Okay. All right. So then the last step here is, now we have exactly what like pixel perfect version of what we know needs to be built. We’ve proved that we’ve given that one to the our, our user testing people to confirm that everyone says, Yep, this is it. So now we’re ready to build the actual application. Now, if we’ve done that in figma, like I said, now we need to transfer it to something like a bubble, or you know, or maybe we’re going to build this from scratch and Python or Swift or whatever. But at this point, if you did it, if you did it in bubble, then this is really easy. Now we’re just basically wiring things up to the database. And as far as doing all that, I mean, this is obviously where the bulk of the work is in pulling it off. But then I link to a couple things in here. There’s a good bubble force. See, if it’s not in here, I will link it in the meetup. There was a bubble Udemy course that I found really helpful in just like getting my head around how to do stuff. So but yeah, that’s pretty much the process in a nutshell. As the teacher Yeah.

Unknown Speaker 28:56
Yeah.

Sean 29:00
Good question. I’ve never used it. I know there is or was an import. I’ve seen it actually. Okay, so that document I linked to is no longer there. So that’s not a good sign. But I have seen it in the settings. I think under General. Designing for Here we go. Import from figma. So yeah, so you put in your API key and your figma file ID and then apparently it will import it in at least that way you’re not starting from scratch it will like give you those screens so so yeah, so maybe there is actually no if if that works well then maybe there is no advantage to doing it the way I’m proposing if you guys are already comfortable with figma then just mock it up there and bring it in so cool.

And let’s see anything else? Yeah, I mean, like bubble is a whole thing unto itself. Uh, in terms of developing, I think it’s some point, you just get your hands dirty with it, and like, you guys will definitely figure it out. You know, if you were able to learn figma, like I said, it’s just like a little stretch further to learn this tool. So I’m sure you guys will get it. And if you come to the event, and you win, then you will have most of the work done for you. And then you’ll just be basically like taking over a project that’s already like 80% there. So yeah. So that’s it. For now, if you guys want to look at anything else, while the screen out. I can show you like, the latest thing that I just launched, which I’m super stoked on. This is for problematic. Let me show you this. So like right now I’ve added to these projects. So these two today, food worthy and EchoStar are two of the Nova SB projects. And so you can see these have a video recorded with SDGs. And the problems they attack. Anyone can follow along. It shows you like Project links. So things like the pitch deck, the discord channel that I set up. But this is the newest thing that I added here where it shows the cap table. So it shows who has the tokens. It also shows Well, there’s not going to be any trades here. Let me show you one where there is a trade. So if you look at, for instance, problematic. We look at this one. Yeah.

Yeah. Yep. So you go here, go to Project dash ad. And then you can submit your projects and just like a little wizard, and then you just need to send me like the pitch deck. You can either record the pitch and upload it or like, send me the YouTube URL of it. And then the figma file. And so once I get all those assets, then you just send me or I’ve been with all that you guys

know, ideally, ideally, no, no, you can, I mean, like, literally up until the minute you’re pitching the judges, you guys can change whatever you want. So yeah. But this is also the why like things like Google Slides work really well, or Prezi, where you can just send them the link, and then you can be working and change it all as much as you want. But yeah, but so what I was gonna show you though, is this is what’s really cool. So this is a little widget I made, that will, it will find the trades. So here. So this will show you a history of all the trades in that token. And then if there were any that used like a real currency, which it looks like maybe actually there’s none on the live site here. It’s unversioned test on.

US because what I’m aiming for is at this next event, the way that judging is going to work. That’s really cool. So we proved this concept at the last one where none of this software existed. We use poker chips, and like paper cap tables in the room. And we tracked all that. So we had like people selling services and building logos and doing stuff and they’re getting poker chips, and they’re buying into projects. And so we’re kind of manually doing all this stuff. It now the capability now exists in the app itself to track all this. And the idea is that the judges, instead of picking a winner, we’ll just make silent offers to the projects. And then you guys will have like three different offers, and you’ll just accept the best one, and then that will set a valuation of the stock of that project. And so the person with the highest stock valuation wins. Yeah. Yeah, so their impact investors, five different people, it’s 100 Women Irish, Domingo, schemata, Irish,

Unknown Speaker 34:19
Andrei Marquette, John Gale. And

Sean 34:26
Rita backed out. So I think we got for right now.

Unknown Speaker 34:31
So it’s gonna be days. Right. So I think it’s time to get in great shape here. And then everyone

Sean 34:43
will so you guys are like so far ahead of the curve. The fact that you already have a pitch deck and a figma prototype, like that’s kind of the end state of this event. So user like starting where you kind of already have all that stuff. But what you can use the event to do is like there’s going to be a lot of experts there. So I bring subject matter experts. If you can use those people and like pay him some small amount of tokens in a project and have them give you their input and craft or business model or whatever. So refine things work on the pitch, we have a session from three to 4pm where you’re actually on Zoom calls with people getting like customer feedback interviews. So you’re basically gonna have access to like six people 10 minute 610 minute interviews with different people. And so yeah, it’s just like a way to cram a lot of stuff into a day and surround you with experts and then you get a chance to win capital at the end of it. There are you alright, so I will stop the recording.

Leave a Reply

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