Tools and Techniques for Rapidly Prototyping an App

Rapid prototyping is a super power that helps you avoid waste in the form of lost time, morale and money spent chasing the wrong thing.

Building a clickable prototype (as you’ll see in this video) can take as little as 7min and give you an artifact that allows you to have productive conversations with prospective users so you can quickly figure out the right thing to build before you ever start.

What is the value of circumventing weeks or months pursuing the wrong thing as an entrepreneur? It’s priceless.

In this our 2nd meeting of the Nocode Lisboa Meetup we explore:

  • MarvelApp: a free mobile app that enables you to quickly capture hand-drawn wireframes of a mobile app and turn it into a clickable low-fidelity mockup.
  • My friend Lucia demos how to use Figma to quickly pull together a high-fidelity mockup of a mobile app and to save time with pre-made objects and Figma’s dummy content generator feature.
  • We also look at Bubble.io for building a nocode app.
  • I have not used UIzard but this tool was mentioned in the discussion and looks really impressive: allows you to do what MarvelApp does only it converts hand-drawn designs into vector objects in the design canvas. Really cool.

All the other links mentioned in the discussion are in the YouTube description. If you find this talk useful feel free to join our Meetup. We do these physically in Lisbon every month but are livestreaming them via Zoom and welcome remote participants regardless of location. If you want to vote on or propose future topics, chime in on our Canny Board here. I typically will take the highest-rated proposal and make that the main topic of our next meeting. Obrigado!

Transcript

Sean 0:05
I think we’re ready to get started. Let’s go around and say where you are from, and what your name is and your interest in Nocode. That helps us tune the talk. I’m going to start and I’m going to demo is a quote for [unintelligible speech], Marla, we can look at balsalmic probably won’t get too deep into it. And then we’ll see [unintelligible speech]. So I can start on Sean, got a degree of deserves a second meeting. So it’s it’s still very young group. The idea is to basically teach no code and the tools that advance the cause it’s such a powerful thing, to not have to hire a developer to build a MVP that,

I think No code is getting to the point like I use Bubble is a full production apps like it used to be a thing of like no code, getting just the first version out there. But like the site that I run automatic, it’s fully built in Bubble for taking signups. And so it’s looked at . Anyways this group is how you guys, you tell me what you need, I’m happy to take this thing direction, I will just make it most useful. So

Lucia 1:40
make sure my name was on the production with no call them kind of using Webflow, which is web development. And basically the design so my my workflow or payment, once again, good design. So that’s my goal, and payment systems. So pretty much I wanted to read more of a service from a playing film us to more remote stuff, because filming therapists all over from Canada, background and finance and non financial publishing. So it’s a couple months ago, and we’re just starting a new SAS project. So I’m looking to see how we can help with that sort of thing. [unintelligible speech]

Sean 2:51
yeah, I mean, I was a developer many years ago, but I haven’t coded you wouldn’t want me to.

Unknown Speaker 2:58
So ya know, it’s it’s very difficult. [unintelligible speech]

Lucia 3:07
And originally from Thailand, I’ve been against him for a while, probably three months or so. And so we’re waiting on us. And I’m here to focus on design. And I want to learn more about other teams. I have a portfolio of webflow like one thing. And then I’m curious of what like Bubble and others. Yeah, I’ve been mainly focused upon using Figma.

Unknown Speaker 3:44
I am from Germany, after living in Lisbon for two years, even though I sit in the dark. I just graduated from a master’s in political science very far from no code. has been there for the past year, like you get a scholarship, that right now I’ve been looking to integrate a grating project of my own. And since I have no background in coding, we’re just talking. It’s yeah, my goal is maybe try and Dallow. I’ve been with Melodyne to try out like for for iOS apps and stuff. So might have questions, some questions about that later. Yeah, I’m just here because I’m curious. And I don’t know too much. And yeah.

Sean 4:27
I haven’t. So Adalo was what I use prior to a whole actually the first version of our app in Adalo. Okay, so I can definitely tell you to get questions about like

Sarah 4:40
I am Sarah. I’m from Portugal. And I have no idea how to coach but I have a lot of ideas for apps and things that I need to use. So no code seems like a really good option. My name is Rosa. Sorry, my English is very simple. I Understand. I am graphic designer. I am lead user interface. I am heren to learn about that. Yeah.

Unknown Speaker 5:12
Hey, I’m Abdullah. I’m from London and I moved here just on Saturday. So just getting around Lisbon so far. Over the past few years, I’ve been working with startups and pretty much mostly on sort of scale ups in a sense, where we’ve had our product team, we’ve had a tech team. So it’s not been somewhere that I’ve been involved in. I’ve been more on the on the business side. And now that I’m remote, I have a bit of time and ideas sort of swirling through my head. And I think this is a great way of taking ideas to to sort of action and seeing if it’s if it works in a rapid way, sort of thing. So let’s begin. So

Sachi 5:48
I am Sachi, I’m from Japan, I used to communicate with the designer and the development team using FEMA and balsamic. And now I’m selling b2b, b2b SaaS products from overseas to Japan. So no, coding is definitely a major genre to be focused on some robotics.

Sean 6:14
So I mean, I think the theme here is that we all see this as a way of kind of short get get to something real quicker than its immediate. So I had, what I find here is, again, I’m open to doing something different, but I was just going to show you kind of how I did, I did this blog post, they got a bunch of traction in a while that I’ll be uploading some really good one. But basically a big summary on Yeah. So this is just kind of a silly analogy, but I just went through and I broke out my design process into various steps and make all the details. But I’ll kind of give you kind of a condensed summary of this and show you just exactly how I design I figure we can just kind of prototype on the fly make up an app right now bring in the bottle app, make a clickable prototype and show you the whole process. So it’s all good. Okay, all right. So let’s do this. I’m gonna change the screen

Lucia 7:29
What’s up everyone I think we can just make a

Sean 7:40
stab at making a prototype Yes,

Lucia 7:47
cheap property

Sean 7:58
property finder site. Okay, so what I do and I’m the single the maintenance to basically wipe my office and I just take a warning and trace it to make some empty strings I’ll do it by hand right now but like basically you know Mason blank screens and can use roughly the size of

Lucia 8:23
the phone let’s just do a portrait and then

Sean 8:30
we got to think through Okay, so the property management app so it’s going to have we’ll just call it I don’t know

this cheap properties.com

and we’re probably going to have like a featured property here one big one when it’s on detailed about it and maybe See More

button and what else

maybe like join our newsletter

map Maybe I’m not actually a baby like yet so let’s do that on the see details maybe takes us to a screen where we got like a main picture of the property maybe some sub pictures a map down here

what else is details? Contact info

right man Yeah, like contact us Do I request a quote or something I always

do this like when I make fun I found that like put a little shadow behind it kind of makes it fun. Okay so then this go to a screen where we’re calling the last name

where we’re from a message and say message and then this would might let’s just say that this is our thank you screen share on social media

Okay, so let’s say that this is just like the fourth grade graphic we want to mock up. So what I’m gonna do this we’ll see if this works here. I’m going to try to mirror my phone to this appears and share during recording there’s training so once again

use the look at my screen right now, while I do this. So, what I’m going to do is open this marvel app. And this is free. And I’m going to create a new

a new design here to the photo lab or call it’s Lisbon cheap property. This is Bubble? This is not Bubble this is Marvel app. This is just the prototype. Okay, so at this point, it wants us to add the design. So we’ll go ahead and take some products. So let’s go here stakeholders vision is

the aspect ratio wrong, but it’s close enough. So this time, let’s have a strong look at how they are. Okay, so now, right? Yeah, cool. So now we’ve got all our designs. And now what we’re going to do is turn this into a clickable prototype. And this is something that we can now give to our friends this simply make them to read the link and get their feedback on the graph and try it. So it’s a really great way to actually go from like nothing to something in power long sticks. So okay, so the next thing we’re going to do though, is add the link. So let’s go back through wind surfing this one. We’ll say let’s add a link, link this button. Oops, this one is the more details.

We’re going to leave that to this screen, which is this one. Okay, we’re gonna go to that screen. And we’re gonna say this. Request a Quote button. Here. Let’s try that. And let’s make it to this and then on that last one

this one let’s learn that one. to the [unintelligible speech] Cool. So now we got

all of our links setup. And let’s see what it looks like. So you hit play, and then this is where you now generally like it’s, and to see what things are click slowly to touch the screen. Oops. Just touch the screen and it highlights the woman’s level. So, yeah, so this slide was saying to go through and say, Okay, any more details, great. Let me request a quote. Sounds great. Let me fill it out and submit it and give you that. And so you can see, as long as there’s now a clickable app in the web based version, as well in the mobile version from here, you can then shares the share buttons, and it gives you your copy that link creates a unique URL, and you did that. And we’ve [unintelligible speech] similarly and that gives you like a link send people to I’ve actually use that we use it as a thing. I’ve showed that we actually made an entire website, and then redirected the domain to that link to be able to basically fake a website and show it to people as if they weren’t real design the whole thing. None of it was real. It was just it was super easy. So any questions on that so far? [unintelligible speech] So this thing is called Marvel app. switchbacks and we’re going to know that now let’s go back to Yeah, so that is all the nuts. Was the model this marble app

Yeah, what do you think about a free app that covers reCAPTCHA hotlinking. The feedback election displaying I mean, it’s pretty, pretty incredible what you can do with that. So

Unknown Speaker 17:38
[unintelligible speech] What about the browser?

Lucia 17:44
websites as well? Yeah, I think

Sean 17:47
I think Marvel Well, I don’t see why you couldn’t use it. I guess you’d have to take a different organization for a website but the same thing should work right if you want to design websites, you’re right. Yeah,

and balsamic which is the other tool which I actually don’t use anymore, I find myself measuring everything so there’s just so much faster balsamic I kind of show you in seven hours on the traveling side, so I was doing surely I did. So I started

out trying to, I was planning basically prototype at the new version of the website that I built, and kind of spell that out all things and then realize this is just I should just draw it out on the whiteboard. It’s way easier. And so I basically give up on this but this is like a way of kind of politicking same thing only sort of drawing that you’re bringing into app and once I received the message Okay, so Alicia can be here any moment. What else so she knows your figma, which this classification of prototyping is just called one file open early. And I think for me the benefit of this is like obviously less time you can do it immediately. But if I implies that you know, a lot more about like the UX and the button colors and all this other stuff. Whereas this is purely conceptual and it lets you kind of leave people’s imagination that like a lead a lot more open to interpretation and a little more compensation. Okay, this this kind of basic functionality we want to go to i Bye

Lucia 20:03
once heard of like a tool is called UI thoughts like wizards. But anyway, it works like a similar thing. But as far as I understood, I never use it. But as we saw, it’s quite new. You can take pictures of like, white writing, but you actually draw that recognize this and translates them I don’t know, in half of Marvel does that to actually think of all kinds of things? What’s sort of the negative is to do? Yeah, but with a UI instead of wi?

[unintelligible speech]

Well, I think that’s it. Yeah. That was like a feature I just stumbled upon like some Yeah, that’s the one. Well, they did pretty much say, Okay, this is supposed to be a picture, there’s supposed to be a button or like a switch on switch off kind of thing. And it will translate that to well, some UI.

Sean 21:02
Interesting. Oh, so you drive out and then it converts it to exactly. Yeah, interesting.

Lucia 21:08
So maybe like a step further than Marvel but I never tried it out because I figured it was quite new. And I don’t know how, how long lasting it is in the world, like Bubble and thing.

Sean 21:18
So it’s its own, like it has its own objects of drawing canvas thing, and it converts your drawings into its thing exactly like that, for example, you take the pictures.

Lucia 21:32
I think you can also click it on someone’s been on this website for longer it just popped up? In my hand, actually, yeah. Well, yeah, I mean,

Sean 21:47
that basically, like, balsamic becomes irrelevant. Because then the quickest way to get input is to ask the guy out, and it converts it to the objects that you can then drag around and use that something that’s very important.

Do you know how far like it’s interchangeable to for example, create a prototype Bubble and then use it for further and figma or these kind of tools. Also be the other way, like figma is the prototyping tool and Bubble’s and functional applications more so Okay, Bubble has a way where you point it at a figma app getting data and turn it into a Bubble I’ve never used it but I’ve seen that but that functionality is seamless yeah. yeah, big file important application

Lucia 23:00
but it’s not that they’re kind of useless that they’re all kind of like it has the same code in the background and production extracted and then put it somewhere else and it’ll pick it up

Sean 23:11
I mean, free will doesn’t have any application code is it’s purely UI layout so we’re all [unintelligible speech] has workflows.

So I’m not sure exactly how that would work. I think this maybe just like brings in the screens and like kind of creates each one as a screen in your application but nothing was wired at that point. Thanks things using ions

[unintelligible speech] everyone this is Lucia by Laura. She’s gonna [unintelligible speech] [unintelligible speech]

Lucia 30:00
okay yeah so if you Want to test an idea? I need to have that. Okay, if you want to test out an idea today at Kunis token

Sean 30:28
your mics on? So yeah, my microphone distributed. Okay. Um,

Lucia 30:36
so today what to say? Somebody else is something that you think, oh, maybe it’s where’s the microphone

Sean 30:49
like this, but we’re just gonna go Yeah. Okay okay.

Lucia 31:12
So we’ll use it daily for things like iterating features really, really quick and people’s comment. So the comment tool is really helpful, you can tag people in there. So yeah, so today, what I’ll show really quickly is the how to prototype some, like design interface really quickly for mobile for the mobile device, and how to prototype a very interaction really quickly. So um, so I already prepared some sort of assets. So these assets are in figma, you can create visual assets, and reuse them later. So they they’re good components. So I already created some components. So we can just drag and drop them in there, because it takes time to create them. So you don’t need to watch that. So the first thing you do is to create an artboard. So an artboard is something that is a canvas, and that can be set to any device size. So for this for this exercise, we’ll set it to iPhone eight, which is a very common size. So as you saw as you come here, you can choose the size. So now you can see that the frame here is set to iPhone eight, you can change that to any device says that you’ll like and so I’m going to drag the common component in which is the status bar into the iPhone. And for this for this app, there’s an app bar at the bottom. So this is the default navigation bar. So plug that in here. So as you can see already have a skeleton, sort of like the canvas now you can put content in there. And so what we’re going to prototype today is something that will look like this. So what we’ll have three screens, we’ll have a timeline has a scrollable, vertical, scroll scrollable content, and we will have a favorite, which has collections of different assets. And then we will have search tab, which is just a search bar. Is that quite easy to do that here. I’ll try to create that in real time. So I already have some ready made content components. So I’ll just make like a header. So making a header is very straightforward. You create blacktop, so you create a rectangle for the header. Make it dark, make the height 60. And then I’ll drag a logo, some searching in the asset list to find my logos with here’s the brand logo I already made. And so for for phones or mobile devices, you want to leave a safe area. So that is the content the edge. So the best practice is something like at least 16 pixels. So you can inspect that by looking at how proficient you are on the ligaments if you press option, you can see how far you are from the edge and how far this Google counted is from the edge. And so now I have the logo. What else do we need? We need a hamburger menu so Oh, come here, search for the hamburger. So this is a oops. So here, this is a navigational component that can be prototyped. So this is going to be a button that can be prototyped. So things down here that are button. So once again, we’ll try to see that it’s 16 pixels. So these are also buttons. So we will add interactions to these buttons, but we add at the bottom. And so the next thing is we are going to rename this according to slate online. And we need some scroll content in here. So I’m going to drag this in here. And I’m going to

actually, I think I want to just show you how to do this. So one thing that’s very neat about figma is you can use a lot of plugins.

Okay, so you have to position everything very carefully to make sure that they show up is in the right order. So just now because the navigation bar was sort of, not at the top, it was covered by the content. So so now we have the skeleton calculate. So you can wireframe stuff like this. And to fill this stuff with content, we can use some plugins, so we can use this plugin here called Content real. And if you click on these things, and say like, I want an avatar, we’ll just fill in avatar for you. Nice, right. And you can fill out the name, their names. The last thing is how to find some images. Okay, so get this. Alright, so we have the content tag on screen. And what’s next, so I should keep a kid the whole thing. Okay, so next up we have

so for this gay bar, I made some different variants of the same thing. So in variant is something of the master component is something like this. So just different buttons being active so they can be reused. So I will just copy this over. So it’s the same thing, but I’m just gonna choose a different active state. Another favorite is active, but it’s still the same component. So if I make any changes, or if I change the background of this, of this thing, everything will change. But it’s not published. So this is published in a library, because they’re linked, everything will change it will change one property of of the same master component. Okay, so now we need to do this. So once again, we can change the content with some placeholder content found the plugin

so I’m just going to click these and use the plugin to swap out different photos.

Unknown Speaker 39:28
Excuse me, all the things that you’re adding now? Are they already linked to the database? Are you going to do that?

Sean 39:35
I’m

Lucia 39:36
sorry, what do you like public content? Okay, it’s in a plugin is kind of pulling these from, like royalty free websites like up slash Unsplash. Yeah, or from Flickr. But you can create if you create some kind of account in here. You can upload your own content. So this what we’re doing inhouse, like we have our own content as kind of ready made, and you can just plug it in. But these are just publicly available content that you’re not, you’re allowed to

Unknown Speaker 40:10
use, oh, what I meant is more like, when you’re ready to publish the app, you would probably link, all these different, I’m gonna call them like, images to, to a database, and that database refreshed with new data or new content.

Lucia 40:29
Right. Um, I think this is a prototype. So we’re not using real content if you have a database. Like, this isn’t to the front end at all. So we’re just giving this to developers to to show them this is what the interaction could look like. And you can also test it on on the user. But to make the app, you have to kind of have a developer to develop everything from your common or backend database, because this isn’t a journey at all, this is just a design tool. Because it looks it looks really nice that you know,

Unknown Speaker 41:06
This lined up, basically where you link everything to the database, and then you publish directly to the different

Lucia 41:14
marketplaces. Oh, yeah. Okay, [unintelligible speech] That does the job. Okay, so those are the conversion. Yeah, I think there are tools that can convert figma prototype into real like coded apps, but not directly in here. Like, this isn’t linked to anything. This is a one time use image. If that’s, if that answers your question. Okay. So just keep populating constantly here.

Just these are randomized things. Just to make the app look real. And then the last thing is to know we’re going to rename this is is to make a search bar. Oh, and these apps have background colors. I forgot about that. So this is not them color.

Okay, so change this to the search component, variant. I’ve already made a search bar salary structure in here. So this is a search. We can also style it a little bit with some legal.

Okay, yeah, that’s good enough for now. And we’re just showing how to protect these different tabs. Okay, so I think that’s everything

Sean 43:45
I have a question so when you make. So was that the data like the Twitter card or whatever you call that like that thing that looks like Instagram, this was that an object was already in your library? Like already pre built? Yeah, yeah. So you can design something, though, and then freeze it as an object and then make it available to others. So yeah,

Lucia 44:05
in a library, where like this is this, this came from an internal library. So if you’re working with a team, multiple designers will have other team members, you can have a shared library. And you can publish the view made something like this, like a reusable component. So this can be used in different pages of the app, or you want to make sure that the styling is consistent, it’s better to publish it. So it becomes a reusable thing that other people will use. And also, they’re not going to override it too much because they like the build where the responsive rules constraints are already set. So in this case, like the title is this color that’s already been set, so they’re not going to override it too much. So that makes sure that you kind of look and behave consistently. Even when you like it You added features were adding content. And so yeah, these things are made beforehand. And so this came from a library. And so what else so this can we can already see something. So here, I’m enabling vertical scrolling. So you can already see that when I’m scrolling this it kind of looks like this is loves to be lots

Okay, fixed position. Okay, so there we go. Oops. This is small exposition Alright, so now it’s scrolling like how it should be, everything should be this also needs to be fixed.

Just some sort of small things about figma is that there’s lots of like quirks that you need to kind of just troubleshoot on the go. You need to make that.

Sean 47:04
Does anyone else used figma?

Lucia 47:07
Yes. What’s your experience with it? Yeah, I think Big Six, when you have persuasion, ready to make [unintelligible speech]. Okay, so now the scrolling is working. So it’s looks like this. Yeah. Um, now the other thing we want to protect is, so when they click on this timeline may go to the right page. So it’s really, it’s really slick that in figma, you can just add an interaction here. So this blue thing appears to drag it to this page. I can also add a bit of animation. Interaction, that’s not really animation. And so the key is to link everything. So they’re all sort of linked. Okay. So the search, there’s going to be a link to this page.

The timeline is gone to the link to this in our favorites. Awesome. Question.

Sean 48:40
If it’s a reusable element, can you use like one of them in the middle of inherit? Or does it get to link to each instance of the?

Lucia 48:49
Yeah, so for this one? Because it isn’t, the content in the tab are separate things. So the content could be dynamic. So you don’t want to lock them into the same thing. Okay. Yeah. In some cases, like, what is example like, if this so that this hamburger menu, like if there is a expanded menu, you can make each of these menu options to like page, so that could be fixed in the master component.

Sean 49:27
So maybe that doesn’t

change can do that. But it’s because you have these active states that need to be separated, treated as like separate.

Lucia 49:34
I tried to do like, link them in the master component. It didn’t work because these are three different components and they have states so it’s like, because they have an active state is kind of hard to make them. Yeah. So now if you do this, it will just work them If you can go to a user with this, and show them and do some basic interactions and and show them, what just ask them to navigate the app, you can validate your app idea very early on. And this actually what we do our company like we predict very kind of complex interactions, and we show them to users to do usability tests before development team will build because building is a lot more expensive and a lot more time consuming than protecting something like this. So yeah, my laptop managed to hold any questions?

Unknown Speaker 50:42
Do started design with figma or you start somewhere else, and then you trasnfer your designs?

Lucia 50:57
Yeah, very good question. So actually, we just have anything from like, a sketch of a pencil sketch to a wireframe, it’s more common for us to use wireframes because you have a bit more content in there that a sketch wouldn’t really do very well, like especially if you’re drawing the button, it’s really hard to to know that that like that’s a button unless you have like an iPad and colored some some elements. So I can show you like what we do, like, on my job, I would do like web based stuff. And we do wireframes of this fidelity. So things like this is not super. This isn’t this has no visual styling, but you can tell that okay, that was like we’ll come to me here, sometimes to screenshots like the sidebars a screenshot. And it’s just really quickly validate some interaction with users. And this is really helpful. And because it’s so quick to change that. Whereas something even like this takes a while. If you want to be like, Oh, we want all the like headers to be a different color, add a new tab, like that takes a way longer to change.

Sean 52:27
You ever work for anything?

Lucia 52:30
Yeah, you can live for me big mouth. And there was something called Big Jam, which is really great. So big jam is was big Jam Jam Session. Like we use big jam to do a lot of weight whiteboarding brainstorming, but you can also use it for prototyping stuff, like we did this whiteboarding the other day, but you can also prototype things in Big Jam. And there are lots of community files. So people are publishing things down here all the time. And you can just go see what’s available.

The cost of something like that. And so then you choose sort of the best way forward. And then the designer would prototype a higher fidelity thing that can be tested with users for usability risks. So after that, that could take a few weeks except that we will consolidate the findings. And we will change the design based on what we’ve handed off on usability tests. Like often that change the our assumptions a lot. Sometimes it changes direction a lot. So yeah, so from that when I was the VM or a project owner would then take the sort of validated design prototype, and then chunk it down into releases or roadmaps, and then and so engineers can like take techniques to develop. And then the whole team would have more confidence that they’re doing the right thing, because it’s been validated.

Yeah, yeah.

Sean 55:46
Yeah, like for anyone who’s built an app, then you’ll know it takes like to be able to do this kind of thing and have the conversation the next day with five people and then just see like an aha moment, like, Oh, we don’t need to build that thing. We need this other thing. Like, it’s invaluable. Like to short circuit, that whole learning process, instead of waiting a couple of weeks, or even months to build it and deploy that app only to learn that later. Like, this is why figma is a $20 billion company.

Lucia 56:12
Yeah, yeah, the earlier you can have the conversation with real people and get, like true insights into what it is that they need. And sometimes people only know it when they look at something, and they’re able to feedback on the real thing. And that’s why a design prototype is so valuable, rather than just talking to them like, Oh, what do you how do you want your recipe book to be made? Like people aren’t able to answer that question, but if you like, design a recipe app for them and be like, Does this help you save time and money every week? They’re in a much better position to answer that.

Sean 56:49
Do you guys go straight to the high fidelity prototype? Or do you ever do like just a low fidelity? Like, draw it out?

Lucia 56:54
Yeah, yeah, we often start with wireframes. And sometimes the ones we can already validate a lot. And it’s it’s better to sometimes validated wireframes because people don’t expect it to be real. They look at something that looks like handdrawn. And they’re like, oh, okay, we understand you’re just testing an idea. But sometimes we prototype like design something so high fidelity that they’re like, oh, but it doesn’t work. We’re like Yes. So something like what I just showed, like, it looks like a real app. Right? And that can be tricky sometimes, because they expect everything to

work. Yeah.

Sean 57:35
Cool. Do you is there anything else you need to show on there?

Lucia 57:38
Um, I can show a bit more advanced interactions, but I don’t know how valuable that is. It’s just like, a bit tips and tricks. So yeah, maybe no,

Sean 57:49
would it? I guess what I was going to show the last thing is if you guys want to see the Envision app, which is another tool, to my knowledge, it doesn’t do what figma does, in terms of like mocking things up. But it’s good at collecting user feedback on an existing mock up. Do you guys use it at all?

Lucia 58:06
Um, I used to use envision, but now figma kind of replace a lot of that. Yeah. Like, the thing with Envision is, yeah, like figma kind of does everything they do now. Yes. Okay. But the standard workflow used to be sketch slash, sketch plus envision, that used to be the standard workflow that you couldn’t have in sketch, and you add interactions envision, and you collect feedback in there. And you hand off the vision as well, because they can inspect developers inspect assets in envision, but now you just do everything.

Sean 58:45
So this is just something like when I mentioned earlier that we redirected a domain at the link to show an envision app. This is the site that I was referring to, I don’t know. So I don’t pay for it. So it looks like maybe they’ve changed the model since then. And you can actually preview it maybe. See [unintelligible speech].

I’m not seeing actually how to preview it anymore. So it might be I take that back, I can’t show you. These are the screens, at least, you can see what it’s in there all linked together, just kind of like we did in Marvel app. What I like about this tool, and I’m sure I’m assuming figma does this as well, but you can actually collect inline feedback. So if you give it to 10 people to do rather than like, like they can inline leave a comment like a post it note on that thing and say hey, I understand this button or whatever. And it’s just like inline relevant feedback, and

Lucia 59:52
then I can show how that’s done. You just click this comment button and [unintelligible speech]

Anyway, yeah, you could just like pinpoint. Like, there’s like a precision tool in the comments you can pinpoint anywhere in interface and leave a comment. That’s yeah, and there are some other tools, I think one of them is called was forget, because we never use, but there was some other tools where you can create a figma or envision or sketch prototype, and send it as a link for evaluation. And at the end, you can ask the user to then answer a few questions like How easy was it to use on a scale of five so they can leave some kind of evaluative feedback. And they can click back and forth on a prototype. I think it was something called and

Sean 1:01:07
I’m just collecting all the links. And I’ll post every all this stuff is just like a little summary as a comment on the meetup. Anyone have questions got access to world class UX designer? And by the way, you guys Lucia does this for free? I just did it completely volunteer. So can we maybe like give her a break? [unintelligible speech]

Lucia 1:01:45
The big, the big differences, like startup, just skip all the research, they will just go straight to build, it’s really hard to convince people. Because startup wants to kind of have something to show to the world and sometimes external investors and stakeholders, so they have way less patience for that researchers results come in. Whereas in like an enterprise company now we have, like way, like longer timeline for anything that’s about to be like, there was no real because we’re b2b. So there’s no real sort of deadline. And so yeah, we have luxury to do more discovery one. Discovery one, um, depends on how. So there are two types of discovery work because valuated just like usability tests type of work. And there is more quantitative. They can do with surveys and stuff, so that quicker, and surveys way quicker to do usability tests or interview the second thing, you have to schedule, the session, so that can take anywhere between one week to a month. Depends on how quickly you can ban people. And we’ve been really lucky that we didn’t have to spend money on recruiting people, because every time we reached out, they were very happy, happy to help us and happy to talk to us, but you’re taking that means an hour of their time, which is, you know, like we’re talking user, so billable hours. So sometimes you also need a bit of budget to do this kind of research. Because you know, people need to be incentivized to spend time with you. So you have to find the right people as well. Like flower software, not everyone can do what they asked them to do. They have to be accountants so but if you’re doing like something in the consumer app, you can go to certain websites and recruit people.

So what would you say is the best startup friendly methodology? You know, to stay lean and not, you know, stay much researching, evaluating?

If you can find anybody like someone, like your neighbor, your friends, family, colleagues, and anyone to validate, like, you can’t skip that ideation,

would you have the founder work directly with like, like a researcher, such as yourself? Or would you have them just mock up something and get coding right away, and then make changes down the line?

I would say that if you can get a designer to design something to design a prototype, and then test the prototype is always better than just coded. Because you can never see like, the risks in development and any any engineer giving you like an estimate, it’s never accurate. So even if even if you think something’s gonna be very simple is always taken, it’s always going to take longer so yeah, I think you should always put it out. Build design test with design as much as you can, even if it’s just like, drawing some action or wireframes, again, even if it’s done by the founder, himself or herself, is still better than just coders.

And then like, like, some

people are like, Oh, we just, you know, like, go live and see how people interact with it. But that’s still, like, a lot riskier than you were saying.

Sean 1:05:35
Yeah, I think it comes down to like your budget and risk profile and all that stuff. I can tell you that, like, what’s worked for me is like, I mocked it up, I built it and Bubble threw it out there. And I’m just iterating week to week like, figuring out what we need adding features removing features. That, to me, this is why this is like why I do a grip on no code. It’s just because I think it’s so powerful to be able to like control your own destiny not be beholden to the developers and have this long dev cycle where you have to communicate your idea and then wait for it to be built and then get in front of users and then find out it’s not the right thing. And then you just short circuit all of that

Lucia 1:06:11
so much. Question figma or envision the pros and cons do they come like uploads downloads functions, we have not natively the maybe there are plugins for that. Yeah, most likely, like there are lots of plugins for figma not so much for Envision, because figma is like an open source community. So there are people building things tools, you can find any tool in figma, really. So I would recommend it. I know we’ve used some plugging for like a traffic light that changes color. So you can tweak something like that and make it work for you.

Sean 1:07:00
Yeah, Bubble’s the Same was just the whole ecosystem of plugins, a lot of which are free, and just being able to like, like I’ve built this feature, I’ll just show it real quick. So this, by the way, is the site that I built in Bubble. It’s called problematic. And the thing that I rolled out two weeks ago was this page. And then last week, so what this is, is like we have these projects that we work on, I deconstructed them into like individual project needs, and then coated them against skill sets. And here, I added this last week. So you can now nominate, it’s open. In other words, like it’s not just me setting the problems and setting projects, I opened it up. So anyone can come in here, search for something, if it’s not in there. Add it, make sure that it complies with all of our rules.

specify which SDGs it addresses. And then if there are any upstream problems, you set those here. So you can do this. This is what I’m sorry, this is why I’m going to show that with the plugin. So when you nominate a project, you specify what problem it’s addressing, give some details. You get at least 100 characters and they’re like 200 characters. So now this is a plugin that I added that in the in the span of like, two hours to set this up. The last for browser based recording, to record a 62nd pitch video right from your webcam or your phone to pitch your idea. It uploads it saves it in the database. I mean, it just blew me away that this is this was a I think it was like $50 plugin, but you know, to have a developer create this for you. I don’t even know how many weeks we’re talking about. And here, I was able to pull that off in two hours and then add it submit it. So I mean, it’s really like the plugin ecosystem is just absolutely incredible with what you can accomplish.

Lucia 1:09:22
Now, I mean, took me around. It’s more like a prototyping sale. So it feels like it feels like for me like, Oh, I’ll build this one, I’ll get more money, but I’ll do it properly. It still feels like it’s not a proper way of building.

Sean 1:09:37
I think it’s a matter of scale and opinion like it’s been perfectly adequate for me. Granted, I don’t have a ton of traffic, but I know they’re serving like a Twitter clone that’s able to do how many hundreds of 1000s of requests per second or whatever. I mean, like you’d be surprised they can actually handle a lot of scale. I think if you get to some point like, should all be so lucky is to get to the point where we’re having scaling issues, because then that means we got traction. And you can go to a VC who will happily write you that check to have it built, you know, natively. So I don’t know I would have agreed with you a few years ago. And I think now it’s totally adequate to deliver production apps. And also things like Zanna, which is a database where you can last meeting Tonya showed us a good primer on Bubble. And she is also teaching a course on Zana, which is like, once you outgrow Bubbles database, you can hot swap out this other thing called Zano. And it wires up really easily. And now you’ve got like a whole production scale database to even handle more transactions. And that’s

cool. Anything else? Did I? Did you want to see? Adalo? I know.

Unknown Speaker 1:10:55
Yeah, I mentioned that I was doing some thinking as well, because I noticed [unintelligible speech] which I kind of understand this this spider app. Yep. Which is kind of a sad thing to talk about before that. Like a database to your prototype that you follow, or maybefigma, or they work together.

Sean 1:11:26
Yeah, I was thinking do something in OCR, you know, that OCR like, yeah.

Lucia 1:11:35
Like when you take a picture and recognize the text, and you can use it with and that was, yeah, not familiar with that some back and open pitch about how to use a dowel to raise something like

Sean 1:11:47
that. So the OCR portion of it would definitely be a plugin. That’s not something natively, you’re not talking about, like either uploading an image and having that processing happen on the server or something in the client, that OCR

Unknown Speaker 1:12:03
[unintelligible speech] OCR services. Okay. So far, I’m connected to them. They sound like they were done by engineers, for engineers. So I understand some technical there.

Sean 1:12:13
Okay. So let’s see.

Lucia 1:12:20
[unintelligible speech] For mobile apps. Yeah, I

Sean 1:12:26
can show you real quick. Let’s see here. This stands for optical character recognition. That’s pretty much what you pay for [unintelligible speech].

Lucia 1:12:44
camera onto like a screen or like a small can reach startup school, I’d say the next step would be okay, like use that kind of data and put it into some sort of database, you like to start on this island. And

Sean 1:13:00
so So zapier and Integramat would be another competitor, which is what I now use more than Zapier. Yeah, both of those are really, I think of them just like glue that can like take data from one app and send it to another and process it and just triggers that automate things like it’s really you can link to other 20 apps that way, if you want. So this is I’ll just show you real quick, while I got it open. So this is Adalo. I built a few dollar apps, the previous version of problemattic I built in here. And I would say it’s definitely more intuitive. And Bubble or it’s easier to get started with like the bar is much lower to be able to just go in here and like it’s kind of nice, just have you have this giant canvas, you can just literally like zoom in and out of two screens, and then make stuff. And then kind of like figma, you link it together. And there’s a database behind it. So when you get into the database part, there’s more to it. But it’s very doable to build an app in here. But I would also say it’s also a lot more limiting, like Bubble, you’re not going to hit the same cul de sac that you will with Adalo. Like I just got to a point where there was things I couldn’t do in it that I was trying to do. Whereas in Bubble, it’s a blinker, but there’s literally nothing you can’t build in Bubble. [unintelligible speech] it’s a steep learning curve, and like,

steep, like, Quick Time to effectiveness, shorter learning, but quicker to hit a wall where you can’t get, you can’t actually do what you’re hoping to do. It’s also very optimized for mobile. And building like desktop apps where I was aiming, I was targeting the desktop more than the mobile first. So you can do it all like Adalo makes it really easy to generate native apps, whereas a Bubble requires some plugins and extra work. So it just it I think you’ll find blog posts out there that compare them. But I think it really depends on what you’re trying to do. And you might get what you need out of Adalo. If you can do it in Adalo, then it’s way faster and easier to get there. But I just found that I couldn’t get what I wanted done. So, but I’ve been very happy with Bubble. Digital, for example, download, just like a Bubble on site from scratch, how to start from scratch. Yeah, I had to start from scratch, but I was planning to re architect it anyways, like, requirements changed. And so I just basically went back to the drawing board, and yeah, thanks. Yeah.

Anything else? Does anyone have any problems they’re struggling with or things they want to, like? Any challenges or anything that we can help you bust through? Like to me building no code, it’s always like, have these like spurts of productivity, and then you’ll hit a wall. And so it’s really helpful to have a group like this where we can like collectively help you get through it? Yeah.

Lucia 1:16:04
Do you have a recommendation for a good community? No code developers. It’s obviously insane. A lot of time, but there’s still a little bit of a learning curve. It saves a lot more time, somebody that’s maybe a little more more experienced. But it’ll still cut down on the time of development, or an MVP?

Sean 1:16:26
Do you mean like to hire or to like a community to surround yourself with and get answers from?

Unknown Speaker 1:16:32
No, maybe like, more of a freelancer, you could hire an employee to focus on one of the local top ones like Bubble, so then you can just feel faster with your new development?

Sean 1:16:44
Yeah, I mean, I recommend Upwork. At this point, it’s what I use for most freelance outsourcing stuff.

Unknown Speaker 1:16:50
That’s been pretty good for Bubble. Yeah, I

Sean 1:16:53
mean, let’s see how many people

Lucia 1:16:56
on Upwork. So if you want to search for like, specialists, when you search for that [unintelligible speech] Elance [unintelligible speech]

Sean 1:17:47
Bubble, depending on what plan you have, you can also in Bubble, invite collaborators. And it’s really good about like having like a development version, a live version, and then you can just very easily clone it and create like, you know, a forked version that you give you say developer good, do your thing. And then we’ll merge it back in to the live version and pull those changes to data. Like it’s very flexible. And you don’t have to like give your developer your login. You can like hire five developers on Upwork given me each access, let them build something take the best one fire the other four like?

Lucia 1:18:27
Do you think it was safe to get familiar with Bubble, you know, far? Anyway? I think like there’s basic functions and all the proper platforms to share. But they go different ways. I think these are handled poorly, I think we’ll take to actually always reinforce you know, some blog or severity. case, my wall right now.

Sean 1:18:58
You guys. Yeah.

So since I am a member of this, which is called pro no coder, so Tonya, last meeting is she’s the founder of this. And this is like essential at this point. Basically, they have office hours every day, I have their this bookmarked. And so this is their calendar, and I’m drilling here every day. Like to know that you’re never gonna go more than 24 hours without an answer to a question you have is fantastic. And it’s just all the it saves all the, like getting bottlenecked for a week at a time and you know, going through forums and getting frustrated and banging your head on it. This is just like literally every evening, I can go join the off South show the problem I’m struggling with and she’ll be like, Oh, this is what you do. And she’s got a few people who work with her. Now, so yeah, so that’s invaluable if you’re doing Bubble. For more umbrella, this is called maker pad. And I’ll put it again I’ll put all these links in the in the comments. But yeah, I would say this community is like, in general, there’s no code. So tool agnostic, you can go here, they have a ton of tutorials. It’s not the same level of access. You don’t have people like taking you individually through your specific problem every day. But this is more like if you’re trying to just go get up to speed. Just it’s invaluable to go and like, say, Okay, how do you build a Airbnb clone? And I guarantee you if we look in here and search for that someone will have there’s a search Oh, yeah. Yeah, there we go.

Airbnb clone, like, so there’s multiple, multiple tutorials that show you how to do this probably in every tool. And so that’s just like such a great way to learn to just shoulder surf, watch someone else develop, see how they do things? It’s. Yeah. Any other questions?

I’m going to show this while we’re here. So

I am a huge fan of Startup Weekend. And we are doing something similar. It’s a hackathon we run periodically. Lucia has been to. So we’re doing our next one on October 15. And this is at 42 Lisboa, it’s a beautiful space. It’s like a giant free code coding Academy. And so they’re letting us use their space and giving us access to students. And if you think you learn a lot today, go through and try to build something real with like for other people. And it’s just like, your mind will explode. Like she learned from like four different people of all different skill sets, building a project that attacks us the societal issue, and yeah, it’s just, it’s a fantastic thing. So do you have any questions? It’s, I’ll leave the link for this as well. But we’ll be there. And yeah, we provide the meals, and it’s all free and meet a lot of interesting people. That was two and a half days. So this one is just a single day. It’ll be a Saturday, all day events. But we also do a dinner on Wednesday night, just like a meet and greet strategy planning, try to form teams and then Saturday, go to town. It’s everything like so they’re their students are all in a coding school. So they’ll have a lot of engineering talent. Hopefully, we do have some note code people too, because we can like accelerate it a lot if we can use that.

Lucia 1:22:51
But the ones that? Neither.

Sean 1:22:59
So yeah, no, we invite like, copywriters, videographers, SEO experts, like we need people of all walks, and there’s just a number, you can if you want to see the projects that are listed, you’ll it’s all coded by like, needed skill skill set. So you might find something on there that that matches your skill set.

I guess well, if there’s no other Yeah. Yep. Agreed, like worksheet showing our list of the bills from [unintelligible speech]

you’d I don’t know of that. I mean, you might find that out there.

Lucia 1:23:55
[unintelligible speech]

Sean 1:24:06
One of the websites. So maker pad has this tools, things you can go in here and see all the tools and quickly get, like a rundown of what it is they got the link to their website. I don’t think that pricing because pricing changes, as we all know frequently. Yeah, GT that’s a good idea.

I don’t think this is specifically no code, but it’s SOS ops, some of which are no code. So yeah, if you find it through maker pad, you could probably go here and get like reviews and whatnot.So yeah. So yeah, all this that in

[unintelligible speech]

yep. Yeah, I can talk to you after it’s Ableton as a music program. So it’s mostly for DJs. I use it for like guitar looping. So it’s just yeah. And I actually used to run a meetup in Arizona on that tool as well. Yeah. Well, alright, well thank you guys for coming. If you enjoyed it, leave a positive review, tell friend, whatever. We’re just doing this, trying to help teach the community no code. So cheers.

Introduction to Bubble.io for nocode

Nocode is revolutionary. It democratizes access to enable more people to create software. This is exciting because it means people with big ideas but without deep pockets to hire software developers can now build software applications self-serve without an intermediary.

Yesterday we held the first meeting of Nocode Lisboa here in Lisbon. This is a group I started to help inspire and teach people nocode tools. Tonya of Pronocoders gave us an introduction to Bubble.io. You can see a recording of the entire meeting below. Skip to the 31:00 mark if you want to see Tonya do 8 minutes of “improv app building.” She asks the question “what should we build?” and watch what ensues:

Links

Transcript

Sean 0:27
Hey, Tonya, can you hear me? Hello?

Tonya 0:31
I sure can, how are you? Good. How you doing?

Sean 0:34
Good. Thanks.

People are filtering in will probably give me another minute and then we’ll get going here. Yeah, sure. And I’ll try to give you a view of the room. Everybody this Tonya. For the new people coming in welcome. Bathrooms are around the corner. And there’s more out there. Hey Tonya this is everyone in the room.

Tonya 0:56
Hello everyone.

Sean 1:00
Tonya what is your title there- are you one of the founders at Pronocoders?

Tonya 1:05
I’m THE founder of proto coders.

Sean 1:08
Right? The founder? Awesome. Yeah, so I’m in office hours with their program and it’s been immensely helpful. I use Bubble every day. And you know, it’s, it’s a super powerful tool. But it’s also very frustrating when you run into a stumbling block. So super awesome to have their service. So I figure the way to do this, we can get started. What I was thinking is we just go around the room and do intros, just so you know, who’s in the room, what the level of like Familiarity is, and you can kind of calibrate your talk to that. So I can start just like a quick, you know, 30 seconds on who you are, what you do what you’re interested in Bubble, maybe and we’ll kind of take it from there. And let’s not go in order, let’s actually just point at someone and then they’ll go next. So so I’ll go first. My name is Sean. I, my main thing is Problemattic. And I’m building an all in nocode. And I’ve been using Bubble now for about four months. And my interest in this group was just to advance more people using it. I just think it’s the best thing ever. It reduces the bar to enable anyone to build an app, which is so incredibly powerful. So So yeah, and what I hope to get out of tonight, I just hope that we can make this useful for everyone and see about making it a regular thing. Alright, so I will pick Rebecca.

Rebecca 2:37
Now, but I’m a beginner, so I wanted to try using tools like this. What’s up, Sarah?

Sean 2:48
Can you hear that? It’s on Yeah, I don’t know if you can hear that far away. It’s a little soft. But yeah, Webflow designer, working with some no code tools interested in what Bubble can do?

Nina Simone 3:00
Awesome. My name is Daniela. And you [unintelligible speech]

Sean 3:16
No code, Bubble, Webflow. Okay.

Rebecca 3:21
I’m a full stack developer. I’ve been using Google to cut some corners and dedicate myself to most business logic. I’ve used ?? Adalo and Firebase.

Tolga 3:37
I am Ali. I’m a serial entrepreneur with a degree in interaction design from immersive technology. I hate coding. So we are currently in beta at Atheneum. And we have to create an MVP as prototype so I want to learn about and they here to learn about that

Brian 4:00
book. What do you want to go next?

Sean 4:05
We ended up going in a circle anyways ahahah

Brian 4:12
[unintelligible speech]

Tolga 4:19
thanks. My name is Taleb and I’m pretty new to all this with just under a month. Now. We’ll be living in a month’s time on social media, social media strategists but I’m switching to development, technology and development curves and stuff with some business ideas in mind and I just wanted to kind of do something for myself. So that’s my very first time I had mentioned some tools that may be scary but awesome.

Sean 5:15
And you can point to people on the screen here we’ve got two people that are just joining.

Alex 5:20
I’m Alex. I’ve been in development for about 35 years, I worked in the media business. I’m an ex employee of Microsoft. We are the pioneers in internet internet. We were working with Microsoft technologies internet right in 1994. So I’ve been part of internet players that have been in the media business and record companies sort of trying to put television on the internet pioneers, video compression, etc, moved into logistics. And I left logistics because I was fed up with writing code. So I built my own framework for no code for the logistics sector, DHL DPD global transmission system. And so they took this, and I run a business out of UK economic and business. But I built my own logistics sector for no code, I got tired. I want to understand more about this.

Brian 6:17
[unintelligible] CEO of machine learning engineer by trade, and our product is effectively creating Siri for work in a low-code like, interface database. So hoping to meet more people are interested is a great basis, evolved interfaces and developed my own capabilities, as well as you know, maybe finding other people to work on this with.

Hey guys my name is Brian, I’ve been wanting to Lisbon now for about six months. I work in marketing for a fintech business in Australia. But I’m interested in Bubble because I’m frightened for the productivity of the students. I don’t know how to cope and football was like sort of middle ground for not having to learn how to cope with being able to do complex things. We wanted to meet other people building no code apps. Sick of reading forums and reading comments and thought it might be nice to connect with people in person. Maybe

Tolga 7:37
Hello I’m Tolga. Actually this year and trying to change lots of stuff in my life, I will deliver with my wife will spend some time here. And also I get your own stuff that I’m by profession by. But my idea is to use to build products to help people and entrepreneurs and startups to make people’s lives easier. And also, I love teaching. So at the same time, I want to train my own novel patients and everything to make myself useful. This is my approach.

Nina Simone 8:23
Everyone, I’m Nina Simone. I’m founder of purpose community builder. And I met Sean by quite awhile ago, and I’m seeking to make next steps of my startup. So I’m looking to build a web app. And when Sean told me about Bubble, I was like, Okay, check it out, maybe I can use some of the knowledge and maybe also meet some, some people that I could potentially work with on my project within the next month, like you

Sean 9:02
….and the gentleman who just walked in?

Seb 9:05
Hey everyone I’m Seb in venture investing and aspiring entrepreneur now. So I mean, no code the promise of no code or the potential kind of fits in both spheres. So just wanted to learn more and see what’s and what is what has its final form or where the direction going and and however it could it would face and act according to how it assists. Cool.

Sean 9:38
Cool, and we just finished with intros. Perfect.

Nina Simone 9:44
So introduction. So like wind redundancy, no code.

Sean 9:49
Yeah, this name what you do what you’re interested in.

Nina Simone 9:53
Okay, fine. I have a recruiters background. So previously I created a recruiting agency. So basically nothing at all. And I really wanted to I wanted to go into the product side of things. And so recently I built my own job job board. And in Webflow through for non tech, [unintelligible speech]. And so I learned that subject, basically. So it didn’t use Bubble yet. They already wants to see between the possible next step or the product condition. So yeah, I’m just really learning the basic level. Right.

Brian 10:31
Awesome. Okay.

Sean 10:34
We lost our guy who was on line. So I think that’s it for intros. And then before I turn it over to you, Tonya, I was just going to pull this up. So, guys, if you have questions, during Tonya’s talk, I’ve set this up. And I posted this link on the meetup. So I figured that the most least obtrusive way that we can collect all the questions and then go through them at the end. Or, I guess Tonya, I don’t know if you’re open to being interrupted during your talk, or whatever. But like,

Tonya 11:01
I’m totally open to being interrupted 😉

Sean 11:04
Okay, cool. So yeah, so the link of the meetup if you want to submit it that way, or feel free to interject and interrupt on Yeah, and with that, I will turn it over to you Tonya.

Tonya 11:14
Awesome, so I can barely hear what was going on in terms of the in terms of the introductions. So I heard that we have some coders in the room. And we have some no coders in the room who has experience with web flow. And I think I heard Adollo in there somewhere. And I think some of you have been working in Bubble already. My no code tools at this point. If I were to list them, it would be Bubble and Xano. And if you consider air table, a no-code tool, I don’t personally but other people do. And I’m, I’m familiar with air table. My background, I came from a non technical management position where I was managing a software company. And I was faced with JavaScript developers on my team, and the frustrations of all of the things having to do with organizing development for products that were for sale and having customers who were relying on our products every day. And I just I was I was super frustrated there. And I decided to take a break for a year. And I did and at the end of that one year break, I managed to find a Bubble and I haven’t looked back. Bubble is an incredibly powerful tool. And I think the thing that a lot of no code enthusiast who aren’t Bubblers per se, what they don’t understand is the extensibility of Bubble using code. So if you are familiar with JavaScript, and other languages, but particularly JavaScript, you can always use JavaScript with Bubble to create the app that you want and the functionality that you want. I don’t know that there are very many limitations to what you can do in Bubble. The limitations that do exist that I’m aware of and Bubble can usually be overcome by integrating Bubble with other applications and other services. So what’s the like? Does anyone have the can you build this in, in Bubble question, like have an example of something that you’re wondering if you could build it in Bubble?

Tolga 13:35
I want to ask Tonya. So the prototype we are trying to build is computer vision and artificial intelligence algorithm or software, which is used to study a dog and his behavior? And I don’t know how complex is the software to be made on Bubble or with coding as well. So this is something that I wanted to work on actually know about.

Tonya 14:05
Yeah, so for highly complex logic, especially logic that needs to run fast. Usually, we outsourced that outside of Bubble into say, like lamda, running on AWS, or into Zando for like for database calculations and things like that any kind of bulk data manipulation, and changes and creation, we would probably outsource to an external database. Bubble is very slow on the back end when it comes to making rapid changes. And then it’s perfectly fine to store as much information as you want in Bubble. It’s just getting that information back out from Bubble can be a little tricky because the way they’ve structured the database relationally and the way that they deliver the information back from the server, it’s just it’s too much too To load on the screen very quickly, the way around that is to use Zaino was the back end or even like a, an SQL or MySQL on that’s running on AWS instead. But I have seen, I’ve seen 1000s upon 1000s of workflows run in Bubble using an AWS integration, and it works fine. So using Bubble as a front end is a popular way to go. Anybody else have any questions like, can you build this on Bubble?

Brian 15:40
So what I’m wondering is with Bubbles support, interface elements that can be dragged and connected, let’s say thinking similarly to Microsoft pain, where you can put in shapes and then connect between them to create some sort of logical flow on the screen. Yep,

Tonya 15:58
you can do that Bubble has a plugin, that Bubble created called drag and drop elements. So you can take any element or shape that you can draw it in Bubble can then be dragged to another area on the page. And then you can run logic accordingly.

What else can I tell you about? Bubble? Like? What would be helpful for you to understand? Like, we’re just

Brian 16:28
Can we use Bubble, especially for small MVP. So if you scale your product, maybe you have to switch to another platform because like slack is performed on mobile. So good.

Okay, if you put your own software?

Tonya 16:49
That’s an excellent question. I have the same question. When I started working with Bubble, it was like, am I going to devote all this time to learning Bubble and then I’m going to have to move the whole product off of Bubble later. And at the time, I went, and I listened to like all of the podcasts that I could find where the founders were being interviewed. And they they were up to they said, essentially, you could, you could create a Twitter clone, and have 200,000 users are using it, I’m using Bubble with their current, their current at the time resources, that number has been bumped up to a million since then. So you can scale an app up to a million users on Bubble without having to move off of Bubble. The caveat there is that you can break Bubble with one user if it’s poorly built. So you there’s there’s an infinite number of ways you can break Bubble, you have to be able to build Bubbles in Bubble correctly and optimize that over time to achieve that kind of scalability. The largest the largest app Bubble I know of in terms of users, and it’s not the largest, I’m sure they’re much larger, but the the the only app owner that I know, running the largest, it’s like more than 10,000 users actively using it. And she’s needing to supplement her capacity every month with 43 units of capacity. So if you look at Bubbles pricing, they generally start at like 59 USD for a personal plan 159 usd per month for a professional plan. And then they have the 500 something dollars for a production plan. And after you get to the professional plan, you can start buying capacity units separately, and those run roughly $30 per unit per month. So I think her total cost for running on Bubble with 10,000 users was roughly $1,200 per month. Not bad for 10,000 paying users I don’t think.

Sean 19:03
Yeah, I think what’s interesting is like having done a couple of startups, it’s the idea of worrying about scale first is always like just make something that is you are fortunate enough to have to worry about scale, because most of us make the problem of just like not building the right thing. And Bubble helps you just like eliminate all the dev like headaches and work.

Tonya 19:25
And you can iterate so quickly with the Bubble. Yeah.

Brian 19:29
[unintelligible speech] By yourself in the shoes, okay,

let’s suppose that we have to look at from scratch. And because actually, that’s okay. There are 1000s or millions of users out and always reading or slowing down, and you say let’s do it from scratch again, sometimes we’ll be down to give me six months to make sure

Sean 19:57
we know exactly what to build at that point. And so like thing you can think about the the example she used with Twitter. Like if you build a whatever new app and it gets a million users, you’re pretty guaranteed at that point to have no trouble raising capital for that app versus like, you know, building scratch. I know they made this complaint with Twitter itself. Actually, when they built it in Rails, they’re saying, Oh, it’s not scaling, you get the fail whale like blah, blah, blah, it’s that you should have built it in C from the get go. Well, no, because it couldn’t have been that nimble have been iterated fast enough to build what people want, and

Tolga 20:32
how easy is it to migrate to other platforms to be able to scale?

Sean 20:39
You wanna answer that?

Tonya 20:40
Not easy? No. So you can’t really migrate from Bubble off to another platform without rebuilding from scratch. You can take your like, they’ll give you the like JSON file or whatever, but it’s not really usable anywhere else.

Sean 20:58
I think maybe the caveat is if you decouple and you use zaino for the database, I’m assuming that you can

sign and whatever new tool

Tonya 21:07
I would have if you were to

Sean 21:11
Xano Oh, is the tool that you mentioned, like, more extensible database that if you’re doing something more complex, or with a lot of concurrency, or I don’t know what parameters use best plaid Tanya for when to use Xano. But like anything super, like high power, you want to offload that to Xano, and in that case, you would not have to rebuild the database that would be stolen from Xano, you’d have to build the front end.

Brian 21:37
That’s your back end?

Tonya 21:38
Yeah. I’ve developed like a. Sorry, I keep talking over you. Go ahead. And I

Nina Simone 21:50
am sorry, I would have another question. I don’t know if it’s a stupid question or not, because I’m not technical in that sense. But I have worked with Bubble like once with another startup. And now I’m planning on building something that includes a kind of taxonomy and like ODC classification for the users. So I’m asking myself, How reactive is Bubble, as a, as a platform? Like, if I have to ask users like, very frequently to my clients to say differences in their like behavior? or decision making processes? Like, is Bubble like a good tool for that? Or is it difficult if I have a lot of like feedback loops? And so I don’t know if it’s an understandable question, how are we reactive is Bubble?

Tonya 22:48
Like, how, how fast is it to react to the user?

Nina Simone 22:52
Yeah, I can give you an example because when I was working with the startup, it was a web app. And we had to optimize, like, the process, especially when people opt in. And this took a lot of time. And like there will there were a lot of things that went wrong. So I’m asking myself, like, if it’s the right tool at all, if you have to ask and request a lot of informations on a frequent base volumes are?

Tonya 23:24
Gotcha, yeah, it’s really hard to say without having like a look at that app and how it was built, I audit apps all the time that are not built well, and they’re, and they’re essentially broken, because the, the, the logic is not elegant. They have a lot of different developers working on that sort of thing. But I work in apps all the time that have a lot of users, I manage one that has 4000 users. And it’s the backbone of that business. And it’s an it works fine. And it’s just a matter of of making sure that you’re optimizing for the performance, especially page load speed to start. And then I think perhaps more important, than page load speed is minimizing page loads by building single page apps as much as possible.

The on Page Speed is is normally not a problem unless you’re making extraneous database queries. And if you have a lot of a lot of queries, and you’re trying to return a lot of information that can slow Bubble down another

Nina Simone 24:35
question from the new one and nothing at all, as well. So I know there are no good tools that are quite, you know, low in terms of learning curve. So software for example, like it’s you know, it’s very easy and very simple. And then you have like Webflow for example, which is a bit more of a learning curve from someone who never used that before, and I feel like Bubble is quite intense that you have To have this technology or [unintelligible speech] features, and we need to get it and I just say, feel this the right way, and like elegantly and stuff. And I have my data, which is completely solo. So it’s wondering, is this like a really big learning curve in a way that is gonna be very time consuming for me to learn? [unintelligible speech] for me?

Tonya 25:26
And I would, I would say that yes, Bubble has a large learning curve. I know that’s not how they promote themselves. They’re like, pick a Bubble, you can turn out an app in a weekend and it’s like, Oh, come on, get stopped that that’s, that’s false advertising. And then they’ll they’ll tell you, they’ll be like, Oh, you can get an MVP working in under two weeks for less than $1,000. Like, get out of here, Bubble, stop it already. I think they have to do that. Like I don’t resent Bubble for doing that. Because I think it’s a numbers game for them. They, they like, attract enough people. And enough people see the potential and end up staying. But nobody would probably try them. If they said it’s really hard to learn Bubble. So I called Bubble, my 1000 pound magic wand. If I can lift the 1000 pounds, I can make magic happen with it. It’s about repetition.

Sean 26:25
I can chime in the person that mentioned that dello, I forget who that was. So that was actually what I built the first version of problematic in, it’s easier. So that might be something for you to look at. It was definitely like a lower learning curve. But you also quickly find yourself painted in a corner. And I built the first version. Eventually, I forget what the exact scenario was. But I just felt like my hands were tied. I couldn’t make it do what I wanted. And I’ve been researching Bubble. There’s far more Bubble developers out there. And I just figured out like, I need to take two steps back, start this thing from scratch and actually do it in that tool. Because it’s just literally unbounded. I haven’t found anything that you can’t build with Bubble with

Nina Simone 27:05
Jager. And you’re already at this point where you don’t sick enough to let go and look for another. Yeah, yeah, I guess what I need to reach you before moving to Bubble. But the other thing is, is that although no control like software, for example, very small compared to this just gives you constraints when you’re not other or nothing. Whereas Bubble, I think you need to like some constraints to fill. And it’s much harder when you’re a non tech? Yeah, so I guess you have the experience?

Sean 27:34
I do, I was a developer back in the day. So I have some of the concepts, which is useful. But it’s also like you can do it, you can power through this. And definitely like, if you’re familiar with web flow, this is I think, the next logical transition. web flow is great for websites, but it doesn’t let you build applications. Yeah, and I have, I don’t think I can find anything you could do with web flow that you couldn’t do with Bubble. I don’t know, correct me if I’m wrong, Tonya. But

Tonya 28:01
um, the reason to use web flow might be on the on the page load speed and for like, your ungated pages for SEO. But no, I don’t think you can use web flow in the way of like building an app like you can in Bubble. But I’m not a web flow expert, just so we’re clear. I was not very technical. When I started with Bubble. I had dabbled like, I had tried JavaScript before. And I have this really cheesy pun. Because like, it never stuck with me. And so I say Bubble is sticky like Bubblegum, because I was able to pick it up. And then it just like I kept building on the concepts that I was learning as opposed to picking it up making something work. And then coming back the next day and saying, I don’t understand this. This is like not a real language. What are you talking about with JavaScript? My my closest thing to programming at at the point that I started Bubble was air table. I had been an air table for a couple of years. And I think really understanding how air table works as kind of like this. This user interface friendly database really helped me understand how to structure the database and that translated really well into Bubble. My I do not, I do not put this out there as something like Oh, if you like, if I can do it, you can do it. That sort of thing. I think I was made for Bubble. I really felt like I was a fish out of water until I found it. So but I ticked a Bubble on August 24 2020 and three weeks later, had my first paid Bubble gig as a freelancer and haven’t looked back. So it’s like it took me three weeks to convince somebody that I knew enough Bubble to work for them. And they were happy I built an app for them. I built an MVP they the I think the only reason he hired me was because I was the only one crazy enough to tell them I could do is MVP in one week. cuz I had been listening to Bubble too much. And I said, Okay, I’ll do it and I almost died. I did turn over an MVP in one week. It was like, if I went back and saw that app now I’d probably die of embarrassment of course, because it was my first one, I dedicated a lot of time even after building them up in like, air devas boot camp. And eventually, like a couple months later got hired on as a developer at air does, which is, I would say, probably the most well known and, and one of the biggest Bubble agencies of certainly the oldest Bubble agency that exists. So I was just I heard a rumor, I don’t know if this is true. But I heard Andrew who, who’s the co owner of of air Dev was the number five user at Bubble.

Sean 30:48
Tonya, should we show like, Could you maybe share your screen? And I don’t know if we want to like maybe build a two page app or something? And like, just show people kind of like a feel for the tool? Maybe? Or would that be useful?

Tonya 31:01
Yeah, what should we build?

Sean 31:04
What are you guys gonna build a job board? The app is.

Tonya 31:13
So we want to, we want to build Hang on just one second, I have a fresh app ready to go. So it’s perfect timing. So what do we want to build?

Sean 31:24
We had job board was the first thing suggested

Tonya 31:27
a job board. Okay. Got it. So we’re gonna have two kinds of users, right. So we’ll have, I don’t need this. Okay, we’ll have roles here. And the roles will be a business and a freelancer, then we’ll come back into our data type here, and our user will have a role. That type of field will be this, the roles that we just created here. And then we’ll need jobs. So job post, here, the job post probably needs a title of type text. It will need an owner of type user I’m not going in in any particular order, obviously, then we’ll need a body of type text. And then we will need an application. Our application will be for a jobs specifically, which we just created as job post. And it will need an owner of type user. And let’s see, do we need anything else? Job post, let’s just start there. So then I’m just going to delete this page real quick.

So we’ll have the job board page. So the job board will consist of a repeating group a repeating group is how we short show list of things. So we’re going to need to show the job title and then probably the body which we can put here. And then we’ll need a button so that the applicant can apply.

So we’ll make this repeating group. With that any questions? What we’ll do is search for job postings. All jobs.

Yeah. Bury and loss will be the title. So it’s not going to be pretty. And then when the Apply happens, then we probably need to show that it’s been applied to. So we can probably do that with a How will we do that? We’ll do that with a hidden repeating group.

Nina Simone 34:21
So maybe a stupid question because I remember that for as well. So like you don’t have to use [unintelligible speech]

Sean 34:31
you can be you have the option to but it’s you can use Bubbles native Datastore

Nina Simone 34:37
it’s usually good to do that.

Sean 34:39
I don’t know Tonya when do you recommend people use a external data store versus Bubbles native data store?

Tonya 34:46
That’s a good question. I have. I think I sent it to you. I have a list. I kind of created a set of heuristics to kind of like consolidate my thoughts on on that. I would say that I’m essentially if you’re, if you’re, if you’re cross referencing cross references from data type to data type exceeds probably about 100, that I think it’s probably time to think about moving to an external database. If you I can share that list with you afterwards, I kind of go through it. Cool. So we’re here to search for applications. And then where

Sean 35:31
your questions is the big deal at the same time.

Tonya 35:38
Each items job. And then what we can do here is we’ll conditionally make this button. So when the repeating group that we just made up the empty one listed job post contains current cells job posts, and we want to disable the button. And that’s how they’ll know they’ve already applied to one. And then for the application, right now, we’ll just keep it really simple create a new one. So data create an application. The job will be current cells job post, and the owner will be the current user. And then now, we just need an interface to create the jobs. And so I will do that on. Let’s see, we’ll do that and then pop up just to keep things simple.

So we’ll need the input for the title. And then multi line input for the body. And then we’ll need a button when the button is done, we’ll create a new thing which will be a job post. But it will be multiple line inputs value owner will be current user, and the title will be the inputs value. And now we just need a way to open the pop up, which we can do with a button here. That says job post.

Here, so come here, and I will show pop up and probably clear at first. So we go here. And data pop up. Doesn’t really matter which order I put these these in, they’ll kind of happen at the same time. But I like to do it in the way in the order that I think of things. So now I just need to

Nina Simone 38:16
what was that? I wasn’t sure what was the six words? [unintelligible speech].

Tonya 38:22
So I’m resetting the pop up where I’m going to create the job post and then I’m showing the pop up where I’m going to create the job post. So I’ll create a few job posts and then we’ll show how the application is done. So so this is a very, like a very basic interaction that you can create. And this is what Bubble means when they say that you can create an app and an hour

Nina Simone 38:47
Can you create multiple logics or only one linear. Could I do like two or three processes with like different logics, they and then get linked with each other? Or does it have to be

Tonya 39:04
linear, you can enter Yep, you can interlink them, you can you can make. You can make the workflows as as lengthy as you need to, um, we consider performance. So we try to keep it as simple as possible as elegant as possible. And then anytime that it’s it’s complicated and we need things to run without making the user wait, we send it to the back end workflows to be run server side instead. So here’s our little I’m gonna create a job posts. So Apple developer, two years experience, like can work. Plus, create that. Say, here we’ll go there, no developer or two years experience Bubble a plus. So now we have these two job posts, and I can apply. And I didn’t do the workflow on a poli or I did, let’s see here. But in a play, we create a current source job post and current user. So something’s wrong with the logic on my button. repeating group is probably have the wrong one. We make this repeating group job to find jobs.

Naming conventions are important. repeating group applied jobs This here looks still won’t work. So this is supposed to be a list of the job posts

Nina Simone 41:02
that I’ve applied

Tonya 41:03
for. And it’s supposed to be affecting this button. So this is the work this is where you go in and you debug and figure out why is this button still clickable, even after I’ve told it not to be. So this is search for applications where the owners current users, let’s just check the database. For applications. It didn’t apply. That’s why current job so post, let’s just click the button again.

And now you can see it’s created it because I can’t click this button anymore. So it just didn’t run the first time I clicked it. So you can see I have an application in for the job. If I go, I can make this in addition to not clickable, I can also change its color to make it easier to see. color gray. So you can see which ones I’ve applied to because they turn gray after I apply.

So yeah, that’s it’s the design that gets me I’m pretty fast with logic of making things work. But it’s the design that always throws me off, I have a hard time getting things to look the way that that I want them to

Sean 42:38
seven and a half minutes without using slack.

Tonya 42:43
Yeah, but I. But that’s a good point, because I outsource the design. So when I’m working on an app, I’m never the designer, I find a designer for it. And then I set them to do the design. And after they get the design ready from the scope, then I go in and I just do my thing with the logic.

Sean 43:01
So I have a question like, do you when you’re designing an app? Do you do? Do you just do everything straight away and Bubble? Or do you do like mock up screens and then translate that into Bubble first.

Tonya 43:13
So I don’t design apps. But I I’ve heard it two ways. So I would say an air dev we use, we use figma. For our mock ups before we we create the app. And and it’s faster because we add an errand of we use. We use Canvas which is a template that has a bunch of components that you can mix and match and update to make it exactly what you want. Michael Aparna coaters is a designer and he does every he does the design in Bubble. So he he skips the figma part and just go straight to Bubble. But before I would ever build an app for real, I wouldn’t really just build it on the fly like this. I’d scope it out first.

Brian 44:09
Yeah, that was Bubble work. So we’re in the logistics business. We’ve got warehouse, things like that. A lot of our apps are dedicated to what happens inside a warehouse globally. So they actually treat very custom written for packages involves millions and millions of rows of data. How would it work on handheld devices? I’ll give you an example. To build a Bubble app for the warehouse person in a warehouse and scanning a barcode of a shipment check that it’s going to the right place and run conveyor belts and the work in a [unintelligible speech] continue to grow and build devices would have scanners or hardware and they have to interface with already existing large She basically says that hold on the current things I have. So it’s a corporate kind of question.

Tonya 45:09
So Bubble does very well integrating with rest API’s with the API connector. So as long as the other database has a REST API for Bubble to connect with, it’s generally not a problem. The hardware aspect of scanning, like if you’re if you can just use the handheld devices camera to do the scanning. And that’s fairly simple. I’ve known other apps that do more like that actually, like, the device is not just their, their camera, it’s something like a barcode scanner or something like that. I’ve, I’ve heard about apps, I’ve never worked on one of those apps. Heard about apps that do that. Yeah, I have one that’s doing using the camera right now to take a picture of the user and then running a background check through the API. And he’s like doing that for school security here and in the US. And yeah, he’s he’s managed to make sales of his app to school districts here. So just there’s

Brian 46:18
the suggestion if you build all the logic of the interfaces, and the control mechanisms through Bubble, and you then connect those interesting guys from say, our data sources, excuse GDPR encryption, we’ve got customer information [unintelligible speech]. That how you is sort of connect the elements together.

Tonya 46:42
And I would I instead of like scoping out a full app, I would probably just do like with a prototype to start. Right. So like something just quick, like what I just did. And then just going into the API connector and making sure you can make those calls and just prove prove the concept before you spend time building out the app. Remember,

Brian 47:04
when we talked about an app we without icons, traditionally, that’s what I call an app. How would we run that just through the web browsers on the devices? Tablet? Yep.

Tonya 47:17
So I’ll I’ll Bubble apps or web apps to start. And then if you want them to be like, available to download from Google or from Apple, you would have to have them wrapped is what is the term we use. So it’s not a native app. But it would be a native app that is a browser that doesn’t show the URL bar basically, that pulls up your, your web app within it.

Brian 47:49
Because zones and progressive, [unintelligible speech]?

Sean 48:14
Do you hear that Tonya?

Tonya 48:16
No, I didn’t quite get it.

Sean 48:17
Yes. If it’s a progressive web app that Bubbles generating? Or is it something else?

Tonya 48:22
No, there are some plugins that say that they can make your Bubble app a progressive web app, I don’t, I haven’t, I have yet to see anybody successfully, like come to me and tell me that their app is a progressive web app. Because Bubble is very much online all the time. And it’s interacting online through an internet connection all the time.

Brian 48:44
If we use if there are any templates that explain the idea of well the data model workflows that she just ran for very quickly in a kind of nice way that they can start playing with you know watching tutorials

Tonya 49:07
so the the templates that exist i don’t know i don’t know of any that are meant to teach you other than maybe like I yeah, I don’t know of any that are meant to teach you you can learn from them there. There are a lot of free templates and then in the templates, marketplace, so both to templates. So they have what like hundreds of different templates and you can play around with the free ones at no charge. And you can learn a lot from them. The caveat being is that anybody can place the template on the marketplace and you don’t know if they knew what they were doing or not. Though you just have to be pick one that you from someone maybe who explains their template and you and you trust them. Canvas is the One that I use the most, because I work at Air Dev, and it’s by air dev. And you can learn a lot in Canvas. But it’s it’s also very advanced things that are involved in it. So a lot of times it won’t make sense to a new user. In terms of like tutorials, and, and learning, I think there are lots of different free tutorials, the key words that you’re looking for is the new responsive editor or new responsive engine, I wouldn’t do any tutorials that weren’t built using the new responsive editor or engine, as they might call it. There are a lot of tutorials out there that were built a year or more ago, the new responsive editor came out in November. And so there are fewer tutorials out there that are are based, like our building using that new editor and it makes a big difference in what you will be seeing on your screen and what you can do in Bubble.

Tolga 51:05
[unintelligible speech]

Sean 51:17
any any personalities or like YouTubers who cover new features particularly well?

Tonya 51:23
New features particularly well, that Twitter? Yeah, Twitter, like Bubble’s, Twitter accounts, probably the best or maybe even their YouTube, I don’t know, if they keep up with their YouTube. Um, Eli beachy often will like make a comment on a new feature that he finds I follow him. He used to be a co founder of proto coders. And then you can follow up for new coders. I don’t cover new features, particularly like I’m not trying to stay on top of new features. But I do hold office hours six times per week. And we often explore new features and talk about new features in our office hours. And then I do have no code school that I teach where I teach Bubble from scratch.

Tolga 52:16
So in order to for creating an MVP, if we are short on time, do we have to go through like the Hello World type of beginning tutorials to get to the point? Or can we jump into creating our MVP? Like is, which one is the simpler way of doing this? Regarding Bubble?

Tonya 52:38
So I learned, do you want to take that one?

Sean 52:44
I’m probably just more recent. My trajectory with this was like I said, I did Adolo first so I had exposure with arguably an easier tool with a lower learning curve. And then I found the

Seb 52:59
limit on mute

Sean 53:05
this and so I hit the limitations of that tool and then Bubble basically uncap that and made it a lot. Like once like I had kind of basics from using Adolo. Then I knew where the boundaries were and then learning Bubble. I felt like I kind of like glaze past the initial learning curve. And then I was like, Okay, now what specific to this tool. So I don’t know that there is any one right entryway to all this. Like there’s good Udemy courses, I took one that was helpful and kind of given me the overview of like the IDE and how to use this stuff. You know, Tonya, you should absolutely just like maybe give a little plug for the no code school thing that you’re doing. I’m sure that would be awesome. I haven’t done it

Tonya 53:48
yet. It’s not a rush. It’s like it’s a I have an eight week Bubble foundation. So it’s Bubble foundations one and two that I teach and it’s eight weeks, but it’s two and a half hours every weekday. So it’s not something that you get through super quickly, it does take dedication, and it’s meant more for people who are planning to do Bable full time as like for their work. Although I do have founders in there who who enjoy it, get a lot out of it as well. And then we also have sections where we teach API’s, product management and Zanna

Sean 54:30
if you’re trying to just get the Jump Start maker pad is a really interesting community like I did their program for a while. And what that does is it gives you access to like all these tutorials that people have put together and they put out like you can clone their Bubble app and see how it works. And then walk through the tutorial with them. So that’s like a really good way to get up to speed.

Brian 54:53
Two quick questions, Can you build device for where interfaces specifically You know if you’re working on it if you want a device where for smartphone, tablets, kiosks, and you can build one app then go device to X might need to have different elements and streams at different pages viewport. That’s one question. And the other one is, is there any option for users to be interactive, by dragging and dropping? things rather than having static button like moving an object into wastepaper? Like before any interactivity on the screen?

Nina Simone 55:35
[unintelligible speech] Doing things? Or what are the advantages of upgrading something like device aware and not from the beginning or the response to what

Brian 55:48
happened? Because in the logistics sector, there isn’t a time to scroll up and down and move around very quickly. And certainly information to be completely irrelevant to the operator of a handheld device, to the operator had a tablet, and a lot more information about shipping instructions and things that are going on with one personalities [unintelligible speech]. The only the manager

Nina Simone 56:18
responsive design, at least that’s what I thought is like always adapting to the whatever device or interface we’re using.

Sean 56:29
Tonya, maybe you can show your screen and show like conditional with screen size, when it resizes that you can change the interface?

Brian 56:36
The answer is yes to your first question more about hiding and showing elements. Yeah, let’s

Sean 56:42
scroll down and you can do anything there, I can show you after this.

Tonya 56:48
So I can I can use, we use page width. So when the current page width is say less than 800 N I can I can change the visibility of the element, I can change its color, I can change all sorts of things about it. But I can do that at every level it not just to the individual like this button, but it can do it for the container around the button. I can also take a container like that is meant for a tablet and then switch it out for one that is meant for mobile if the page with this is less than a certain amount.

Sean 57:29
And then your other question,

Brian 57:32
is there any are there any interactivity modes? For example, moving objects using moving object with their finger? Yeah, so like plug in just a static kind of point thing?

Sean 57:42
Yeah, like so he’s asking about like visual controls, sliders, things that may be plugins that give you functionality beyond the traditional just like radio buttons and form, you know, standard form controls.

Tonya 57:56
I think the drag and drop works with the phone I’ve I’m can’t remember testing it. But I know like we there’s a there’s a tinder pile plugin, so you can create like that swiping thing that Tinder as an app would have. So there there are definitely ways that you can create custom plugins for yourself to be able to interact with the screen

Brian 58:18
as well. JIRA Trello does the same thing. You can move things visually into different lanes and [unintelligible speech]

Tolga 58:30
plugins involved as well.

Tonya 58:34
To get going here in just a moment.

Sean 58:36
Okay. Tanya, yeah, whenever you need to drop off, feel free. And thank you so much. Maybe you just leave a screen up for years. Also, people know

Brian 58:47
how to get a hold of you. Sure,

Tonya 58:50
yeah. If you if you go to a promo code, or let me just share my screen again.

Sean 58:59
So you’re asking about

Tonya 59:01
pronouns. So, prontocoders.com is my website, and then you can navigate from there to no Code School. We have API’s coming up. We’re teaching API’s on September 21, starting a new Zana class on October 3, and then we’re doing Bubble foundations on October 17. So thank you, everyone. Nice to meet you.

Sean 59:35
Thank you so much.

So to your question, you build I don’t believe that you can write the plugins themselves used by Bubble in Bubble you write them in like JavaScript or whatever language and then you have to register them

Brian 59:51
as a plugin. They like say kind of a marketplace. There is a really extensive one, and drag documents, Nancy.

Sean 1:00:04
Yep. They have like, there’s someone in the prenup voters academy that I’m a part of who’s built some kind of like photo recognition plugin thing and then put it in the marketplace. So yeah

they’re all different, but we can pull it up here so

plugins, so I don’t actually access it this way normally, like in the editor, I can just show you. So in the editor, the way that you add a plugin, and it’s super quick, you just go here on the sidebar, plug in

Brian 1:00:59
and add plugins.

Sean 1:01:01
And then here, take your pick, like someone said, barcode.

Brian 1:01:07
So here’s a bunch

Sean 1:01:09
of barcode plugins. Generator. Right. So

Brian 1:01:15
there’s a reason. Yeah, reader.

Sean 1:01:19
So yeah, and they’re all pressed differently. Once there’s no my suspicions are different. They’ve all got different models. Yeah. Yep. What? Yeah, so we can go any direction we want with this at this point. We can take a break, we could do a show and tell what’s useful to you guys? I can Yeah, I can show you. Sure. I mean, this is. So I built this. Like I said, it took me four months, or I’ve been doing this for four months. So I’ve been able to build let me show you first. The app looks like you weren’t. I was a developer a long time ago. And I’m terrible. Like I’m a horrible

Nina Simone 1:02:04
[unintelligible speech] wife. People would rather

Tolga 1:02:10
well, like Yeah,

Brian 1:02:11
I mean, it’s pretty much

Sean 1:02:14
I would say quicker, but also like less stuff to maintain. It’s just like, not particularly fun building interfaces, like you, as a developer, you want to focus on like interesting problems. And like, Bubbles, to me is the fastest way to like, build an app. And then it lets developers focus on like, the truly interesting challenges.

Tolga 1:02:34
Is it easier to be involved any problems?

Sean 1:02:40
Well, I would say like 90% of the problems you just never encountered, because this is all like drag and drop visual wired up, you do I mean, there are going to be some issues every now and then they have a really good thing up here that runs like, if I make something that references something that doesn’t exist, it’ll show a little issue, it won’t even let me deploy it. It’ll be like, you’ve got to fix one problem before you can deploy it. And then it does have version control has merged, you can like fork it and then have two different people working on different stuff and then bring it back together and publish. It’s it’s impressive,

Rebecca 1:03:15
most of these no code tools, a lot of the errors are so rare that they don’t keep an eye out their family. Yeah, it’s like magic, the whole thing is pretty simple. I was able to just get so some pages that we’ve gotten it vibrates and the organization left them back they they were so it’s pretty easy to debug. And if you can’t debug you just do like walk to console somewhere where it says I for once I submitted the prototype for six months, and I finish it in three weeks. Yep.

Sean 1:03:53
Yeah, it’s totally possible. I can actually show you this might be useful. I can show you the first version of problematic

Rebecca 1:04:01
that’s the other tool use

Sean 1:04:03
Yeah, so this is Oops, that was an earlier so this it’s it’s more like Apple I would say it’s kind of like you know, they have this whole concept of like a canvas where you can actually zoom out and just like literally just go to whatever screen you want to go to.

Seb 1:04:22
So using this [unintelligible speech]

Rebecca 1:04:27
database which is cool if you want something fast and you can connect it’s

Sean 1:04:32
yeah, it’s it’s not nearly the level of sophistication you can paint yourself in a corner like the data model is not as robust. So I would just say that like this is like training wheels like this would be a great place to you might even be able to pull off when you want to do in Adolo and it would certainly be easier. But if you’re trying to do something like more complex than that you’re gonna want to go to Bubble but you Yeah, I mean, so this is the app that I built the vision here. Like I retired last year, I did 26 year career in tech in sales and whatnot. So my belief is that I think that like, we can take the latent cycles of people, knowledge workers, and then like, people want to contribute, give back and work on interesting projects in their spare time. And I think we can solve a lot of world problems that way. So we pick big gnarly issues, and then interview experts come up with proposed solutions. And then we have like this, like, problem marketplace, essentially, where we deconstruct those into constituent parts, and then code them against different skill sets. And then when you sign up, you basically tell the system what you know how to do. These are all open ended tags. So you can go in here and say, like, I know, sales and marketing and like these computer programs, these languages, whatever, it’s all tag based, and then that matches you to the problems that you can work on. And so this is very like this page I released last week. So this is like brand new. But the idea here is that we’re going to make a whole community of people that can knock out projects and gamify it and eventually, layer in like bounties and price challenges and all that.

Brian 1:06:15
So you build most of that from the ground up, I built

Sean 1:06:19
a pocket. I mean, so the plugins that I’m using, I can show you the app. So these are all the screens and the app right here, there’s only like, some of these are like terms of service and whatnot, too. So there’s only really about like, eight or nine screens total. This is that project screen that we were just looking at, this is what it looks like. So it’s a repeating group with all these things. And I mean it, it gets crazy mind bending, I can show you like the data model, because I did have some development background. And so like I built the first version, and then I took a step back, and I’m like, Okay, what does this thing need to ultimately do? And then I started, like, visualizing like this fairly, you know, in depth data model. But like, this is literally everything this should get us. Like, this is what it’s going to ultimately like there’s this should be every table ever necessary to pull off what I’m doing.

Brian 1:07:17
You get back then into a Bubble.

Sean 1:07:21
You just create. Yeah, you go in. So there’s a data base tab here. And each one of these represents a table. Yeah. Yeah, this is a Google in Google Drive. This is one of the things so it’s draw.io. It’s a free

Brian 1:07:38
I use this as well to design stuff. But yeah, you save that and just import it. Really?

Sean 1:07:43
Not that I know. Yeah, there’s no, there’s no, like, import that I know of for this. But it’s also, it’s not that difficult. Like, in the time it took me to do this, which was probably like half a day to sketch all this out, then you already know what you need. So it’s easy to essentially design it. And now you’re just basically implementing like, go through add tables, add the fields, like come up and you’re done.

Brian 1:08:13
Relationships,

Sean 1:08:14
yeah, so it makes a unique key for every element in there. And then, but that’s obfuscated from you. And then you link it, you can have one too many, many, too many all those relations, scripts that you designate. in there. Yeah. It also has this concept of option sets, which is like, I don’t use them as much. I know Tonya is a big fan of interesting said it’s like a speed performance increase. But I come from more of a like a relational database background. And so I do everything is like a data table typically.

Rebecca 1:08:49
There’s one thing you mentioned, I have a whole workflow that is doing changes. One of the steps failed, does this revert back? Or do I get like a middle broken state? But the question is, does that transaction?

Sean 1:09:06
So obviously, you’re talking about within the application, something involving multiple tables and something fails, does it roll back versus so I think the way to do that would be to like, do some kind of asynchronous thing for that like real writ like, I don’t know a way to do that in a single like, straightforward. I guess, best way of doing it. I think Xano that database that she was talking about would probably be more appropriate for what you’re talking about. And you’ll just be like an API call that call it execute a function that does whatever it needs you need to do. And then within that you have the logic of trycatch, rollback, whatever you need to do. Use these. This is just the UI for it. Yeah. Definitely.

Seb 1:09:50
Can I jump in? Yes. If you use Zeno I wouldn’t use Bubble because it’s the user interface of Bubble is way too. complex compared to using Webflow. Or using we will. So you would use your interview database with zeno and do all the database work in zeno and then you will do the UI into some other more UI friendly. And then you will link the two together. I think, if you use zeno, then Bubble is too complex. The advantage of Bubble is everything is inside the same software. But my experience, it tends to be interesting to me everything inside, but it’s a bit slower.

Brian 1:10:39
With the tools, yeah, it’s I would make a case against that. But I think

Sean 1:10:43
it’s a personal preference with one database [unintelligible speech]

Tolga 1:10:49
SQL, PL SQL? Second question is cms server one, I just gave us some JSON market files. And I basically,

Sean 1:11:04
yeah, so it can both consume and produce like API endpoints. So I guess the answer is, I don’t know, like je, if it’s JSON, it’s a REST API, then you can definitely both consume it and generate JSON and send it to

other endpoints, and

Tolga 1:11:23
integrate and stuff like

Seb 1:11:26
that.

Sean 1:11:26
You can use their table as a back end.

Brian 1:11:29
Instead, it took me four months to do, how much of that was on the data model on the back end? And how much on the front end? And second question, are you happy with the user experience and the performance? Do you notice? Or do users notice as much difference on the web app? No, I

Sean 1:11:43
mean, so first, I started very simply, I like to launch the podcast. So I just none of this stuff existed. So the first thing I built was actually just a simple, like something, nothing you couldn’t do in WordPress by like, you know, making each one of these if it were a post, and then you go in, and you just want to see the details of it. Right, so, so basically just made like a glorified WordPress instance, with custom pieces of it. So if I wanted it to be coated against the United sustainability development goals, I wanted it to have this concept of solutions here that you could get further details on. And I wanted to integrate it with distortion, which is a forum software. And so I built all that it took me probably, like, almost a month to build that. And but then obviously, once you get over the hump, then your learning curve accelerates dramatically, and then being a part of their office hours has been just indispensable, like, knowing that you’re never gonna go more than one day before you get to whatever roadblock it is you’re hitting, that’s a huge level of competence.

Nina Simone 1:12:53
Can you easily rename keys, and it will name all of them automatically? Not?

Sean 1:13:02
Yeah. Because that’s something nice is that it is managing all the connections in the background. So it uses those like, unique identifiers that you never see. And so like I went through Case in point, like, I started out calling things solutions. And then I switched to calling them projects. And all I did was just went through and renamed it and nothing broke. But it was just

Tolga 1:13:23
me with Bubble, something that was AI and configuration.

Sean 1:13:28
So Bubble wouldn’t handle that. But Bubble’s, the interface and then all these other functionality. Like it can be a plugin, or it can be something that you call through an API to handle that. But Bubble doesn’t do like artificial intelligence. There’s nothing like that built into it.

Seb 1:13:43
You might do something like that in the future.

Sean 1:13:45
I don’t know. Let’s check

Tolga 1:14:02
you know, in turn up some of the scenes.

Yeah.

Sean 1:14:07
Yeah. The bids to goldfill.

Brian 1:14:12
Yep, absolutely.

Sean 1:14:24
So what Sorry, what did you specifically want computer visions

Seb 1:14:27
of anything else?

Sean 1:14:32
Okay, I mean, so here’s Google vision, Google Cloud Vision. What is Google vision? Something it’s along those lines. Yeah, I mean, there’s, there’s honestly, there’s plugins for so much stuff in here. And then if there’s another service as long as they expose an API that you can call, then we use they’re very connected. So I’m on their business plan. So I paid like 150 a month, I think. So the feature that I wanted that was not part of the cheaper one, I think it’s like 50 as the first year and then 150. And I don’t know what’s beyond that I haven’t needed anything. But like, I did want the ability to have to give access to my app and like, forget and have users with different permissions and and like that level requires the 150.

Brian 1:15:32
Worried about a Bubble of a lot of money. And

Sean 1:15:36
yeah, you can export, she mentioned it in passing that you can export everything as JSON. So at the very worst case, you can rebuild from that. And you’ve at least got like, they’ve got the UI in JSON.

Yeah, that’s a good question. I don’t know the answer to that. But I am curious as well, like the idea of having locked in always having a fallback and whatnot. That’s, that’s really important with any any SAS basically. So I will find that out. And I’ll post it in the group.

Tolga 1:16:20
The ability to export it. Yeah, you

Sean 1:16:25
can well, you can export the data for sure. And you can export some type of

Brian 1:16:30
income before that app. And you [unintelligible speech]

Sean 1:16:33
know, well, they wouldn’t have a business. So definitely. Right. Storage,

Brian 1:16:40
saying You weren’t logged in, is still in use and return. [unintelligible speech] This description saying when you’ve got 500 in storage?

Sean 1:16:59
Yeah, they have. I know they use a CDN. So they’re using CloudFront. I don’t know, I think, store Amazon. I think it’s like AWS s3 or something.

Brian 1:17:11
I mean, it’s very, very limited.

Sean 1:17:16
I’m not sure. Yeah, I’m not sure. Depending on what you want.

Brian 1:17:24
Yeah. We’ve got an amount of business as well. That’s all based on live events. And.

Sean 1:17:39
Yeah, yeah, to check on that. I don’t know.

Brian 1:17:43
Cool. Any other questions?

Seb 1:17:47
Just to be sure. If I start work on an MVP. And then I hire a developer, you can easily start from my, what I built? Or is

Brian 1:17:56
it better to start from scratch? No, you

Sean 1:17:59
can. So that’s why I got the version that I did, like, I upgraded at the point when I wanted to outsource some stuff to an Upwork person that I didn’t really know. And I didn’t want to just give him my account. So So I upgraded and then I basically gave him access and like, let him clone the app, build it and then merged it back in and

Tolga 1:18:17
deployed it. So instead, we can work on a project simultaneously. Correct? Yeah.

Brian 1:18:28
Do

that. There’s also a version control. It does say you can you can design, test and publish, meaning going back to the version, where design concept goes into. Users don’t like that kind of thing.

Sean 1:18:47
So like we could create a new version. Yeah, I guess I’m not a new start to get into the weeds. And I’m not technical enough to understand how it all works with the different databases and like what is referencing and what is actually cloning it and creating a new one. But I have forked it made a new version. Like when I made this new version of the site where I went away from having the podcast be the homepage, I actually wanted to make what it is now. So I forked it, but I was still able to like maintain add guests do that on the live version while I was developing the next version, and then I just merged it and got ready to go. No, it’s all handled. If they’re using Git. I don’t know. Like it’s masked from you.

Brian 1:19:32
But it’s all in science. Yeah. Yeah. Cool.

Sean 1:19:40
All right. Well, that unless there’s any other question. Yep.

Rebecca 1:19:45
So like I said, Everybody here is like just don’t mine already. But my function is to just develop apps. How can I get gigs?

Sean 1:19:54
How can you get gigs? Yeah, I mean, there’s a gentleman here who wants to hire

Nina Simone 1:19:58
So we do are we right part of the development? As far as development?

Sean 1:20:08
That I don’t know, because I’m not approaching it from that angle. So you have to learn, but I mean, I’m sure you can figure that out, look it Upwork we’ll get to see what the going rate is. You got a bidding, bidding well I’ve ever

Brian 1:20:30
seen, like 150 200?

Nina Simone 1:20:39
Ya know, because as you know, there’s a fight describe the discrepancy. We get our rewrites in Portugal and our rewrites in Belgium or Switzerland.

Brian 1:20:49
But that’s the beauty of development work, you don’t have to be confined with hourly rates. particular jurisdiction.

Rebecca 1:20:59
Yeah, yeah,

Brian 1:21:00
that’s most foreigners haven’t retired from

that actually exist? Unfortunately.

Nina Simone 1:21:10
No, no, I started working remotely wants you to know and 17 and after COVID

Rebecca 1:21:16
Yeah, exactly. The hardest part is the next one.

Sean 1:21:24
Alright. Let’s spend the last three minutes here with feedback: Is this useful? What did everyone think is this? We want to keep doing this? Would you come back? Some nods? Yeah. What would make this more useful? Any topics like just freeform throw anything out? Any anything we can do to make this better? Yeah, I don’t want to constrain it to Bubble. I figure like there’s plenty of stuff I’ve seen. I don’t know if everyone saw the Canny board. But like, definitely vote on topics. If you haven’t, it’s linked from the meetup. I see that it just would like some things that I think having done this now for a while, like what I think would be useful for people, but like, you can add your own topics.

upvote whatever.

Tolga 1:22:06
I think it’s all been it’s always been fun. We are in the process to have some time like community so we can discuss.

Sean 1:22:12
Totally, that’s right. I haven’t made a Discord more related to your Yeah, that was problematic. Yeah. So

Brian 1:22:22
do you think it might be useful to have a discord or slack channel for people trying out tickets? And

Sean 1:22:29
you guys tell me, I mean, if it is, let’s do it.

Rebecca 1:22:33
Especially in this environment, there’s a lot of tooling. And some guy knows those tools. So it will be pretty helpful. Like, I need GPS and maps. Yeah, can I get in terms of doing out there,

Brian 1:22:47
I was gonna say something like, obsession is showing some feature to be globally useful. And then the other half is that the workshop actually misses a very good example of what she built. US, but then we focus on one same bar ends, but you can focus on particular things that you’re interested in and get that group of people,

Nina Simone 1:23:12
I suggest that shows like, his organization, so that you will have like, new commerce is occurring. And then you have like different groups that have like different knowledge levels, so that you can see, okay, I’m one. So I come to the meeting of one. And when I feel that I’m advanced, because people have, like different availability to work on that project. So then I can decide on my now okay, now I go to level two, or two, level three, and then depending on what is the knowledge, like for example, level three could already like more go deep into problems and like making this workshop kind of farming,

Brian 1:23:55
he could potentially look at industries to be given. But I think both cases

Rebecca 1:24:10
feel isolated into a number. I don’t want to be like a take note of the river flow, let me know. Some other people would love to, like do their consulting as like, eventually, like inviting people who actually did this your face or you’re really cool.

Sean 1:24:30
That’s a good idea. For sure.

Nina Simone 1:24:33
Yeah, there’s no code here. It’s not like your JavaScript developer or something else. It’s just I know, I’m from healthcare, and I’ve got the similar

Brian 1:24:44
it’s very fascinating St. Joe’s house built out our people to design and build their

Sean 1:24:51
apps. Yeah, I think show and tell. I think if people start doing stuff with it, I find that super fascinating to just to see how people do what they do? Usually yeah

Tolga 1:25:08
I’ve been trying to build in Bubble for about a month now but it was always like, where do we begin from is too much too many things going on. So it’s kind of like a good starting point to give us an insight on things.

Sean 1:25:22
Yeah, I think the I can post the Udemy course that I took it was it was the thing that got me to get my hands dirty. And then when I discovered promo coders, that was what took me past because you do you get to a point of like, okay, I can actually make like a page like she made. But how useful is that like any then when you try to actually start making it useful? Now you’re hitting like little barriers of like, why doesn’t this query work that it. And it’s demoralizing when you get stuck on those things, but like promo codes like that, that office hours, just like you never got more than 24 hours without getting through it. So every week or so my thinking here like also, I don’t want another job. I’m not trying to create more work. Yeah, no, no, I figure like once a month is about the right frequency to me. And I don’t like maybe the discord. Like there are other ways to get support. So actually, I’m just a little bit leery of creating more work for myself. So I but I think we’re organizing this once a month finding experts bringing in like having something like this, like, I think it’s pretty good.

Tolga 1:26:24
Yeah. Is this a startup? thing or is

Brian 1:26:28
no, so I volunteer for them. I’m the entrepreneur in residence. And so they let me use the space. And I just figured this is a good place to post it. One of the things that we do in our development teams is, especially when I went to medical mellitus is, because we always had sessions once a month, where a developer would say, I can do something really special. And this is why I’ve developed my wife come up with this. Yeah, I want to show you how I built this page, or how I put this together. Yeah. Well, that once a month, hit somebody in the show notes, which you then don’t totally get that knowledge. Understanding. There is provocative

links with what she mentioned, like you need to level a similar group, because effectively, like problem with Meetup is that you get a lot of people who don’t know anything about something, then interested in learning the very basics. And then you have people that spend a significant amount of time to learning and they want to learn about this advanced use cases make an extra hour or so having different levels is beneficial. So I don’t think it’s just a defendant, because this is a visualization tool. I mean, you can be visualizing health care, or you see football, it’s all the same. It’s the elements, how you’re linking to the date. And

Sean 1:27:53
yeah, I think the use case that you meant the like, how is a person you’re using the tool like whether you want to make it your profession or whether you just want to like you don’t want to specialize in Bubble, you just want to like get your idea built. Like that’s a different use case for that.

Rebecca 1:28:10
I think that’s the type of feature

Brian 1:28:12
that you’re supposed to use. It’s ultimately the API calls, which add your colleagues to the secondary to the actual data, traveling from one to another.

Nina Simone 1:28:27
And also show it as different styles of how people use marker. So it’s maybe a little bit misleading. If your people are showing different use cases, like they have different size, I’m doing it and then you have to adapt the specifics side and like managing issues. That’s a big use case.

Sean 1:28:51
Yeah, well, the best thing to do, I’ll just show it while we’re here. Go to the meetup, and then at the very bottom,

Brian 1:28:58
get back one.

Sean 1:29:11
So down here, that’s the only thing that’s linked, this link right here. This will take you to the county board. And then this is where you can add your own or upvote and suggest and that’s how we’ll do and it looks like the next one will plan for October 5. And the most highly voted thing right now is tools for rapid prototyping, I can show you guys the stuff that I use. It’s literally this is one of the coolest things that I know how to do. You can write like on a piece of paper or on a whiteboard. And we use this thing called Marvel app. And it’s like the fastest way to stitch together a clickable prototype, which you can then give to people and like you learn so much by giving them something they can flick on and say, Oh, this is what I needed to do. This is what I don’t understand. So it’s really useful. Yeah. Cool. All right. Well, thank you everyone for Coming in yeah we’ll do this again next month yeah cheers

Transcribed by https://otter.ai

I have used Bubble to build Problemattic from scratch over the course of the past four months and can attest that it’s the best tool I’ve used thus far. It has more of a learning curve than Adalo but it’s unbounded in terms of what it can do.

We’re going to be doing these meetups monthly on the first Wednesday of the month going forward and will plan to livestream all meetings via zoom as we did this one. Feel free to join our meetup and suggest/upvote topics of future events via our proposed meeting topics board.

I recently did a 5min talk for Lisbon Lightning talks and nocode was one of three “force multipliers” that I believe is the most powerful thing one can learn:

“Concentrated Startup Wisdom” talk

Here is a recording of the talk I gave remotely via Zoom to the incubated companies of Startup Lisboa:

Unfortunately the audio recording is a bit glitchy (lesson learned to use Zoom local recording vs. cloud recording).

Here are the slides from the talk:

And here is the link for the prototype that I posted in the chat in answer to the question about “how would you go about getting an app into the customer’s hands faster for feedback earlier on?”

If you have any questions on the concepts from this talk feel free to leave a comment below. And if you’d like to get a copy of the eBook I’m writing in public subscribe below to get that immediately.

Metrics for Startups: Sean’s “Track What Matters” talk for Startup Lisboa

Obsessing over the right metrics in the right order as your startup grows is key. Getting derailed by vanity metrics early on can lead you on a goose chase of frustration. This is a talk I gave for Startup Lisboa’sStart to Table” program participants last week on how to tackle this important task. The talk begins at the 4:00 mark and ends at 43:00. If you play it at 2x chipmunk speed you can ingest the whole thing in 20min:


Here are the slides:

Here is the example funnel metrics Google Sheet referenced in the talk. If you have time this video from Y Combinator Startup School is a good primer to watch to set the stage on why this stuff is important before watching my talk on how to do it:

And for that matter if you’re doing a startup I recommend you join both of these free educational programs:

  • Y Combinator Startup School is a comprehensive program from Silicon Valley’s most successful incubator. It has a ton of great content and instruction and is split into two tracks: one for founders actively building their startup and one for pre-startup founders who are planning to eventually leave a full-time job to pursue their venture.
  • Steve Blank’s Udacity course on how to build a startup teaches the essence of the Customer Development process from Four Steps to The Epiphany as well as the Business Model Canvas for de-risking your model. You’ll learn how to get out of the building and conduct proper customer discovery and then systematically work through your BMC to arrive at a viable model.

Any questions feel free to post comments here. If you are a Startup Lisboa company I am the Entrepreneur in Residence for the rest of 2020 and you can ask internally for my booking link to schedule time with me.

Introducing Smaller.Events: Meetups made Distributed

TL;DR: I made this app so that anyone can distribute a Meetup across multiple locations enabling community while respecting local restrictions on group gatherings during Covid.

Longer explanation and backstory…


I’m a huge fan of Meetups. I’ve been both attending and hosting them since 2002 when they started. They’ve been invaluable in helping me learn various products and disciplines over the years (ActiveCampaign, ColdFusion, Ableton, Lean Startup). But beyond their educational value they’ve provided a massive social benefit enabling me to meet countless awesome people around the world and form friendships bonding over a common interest.

Unfortunately Covid decimated the Meetup scene and forced the world to suspend in-person group events. As cities start to wake up out of a lock-down hibernation many now have local restrictions to responsibly limit the sizes of group gatherings. At a time after months of isolation when the world is thirsty for community and connection, Meetup has not yet adapted to accommodate the new normal. Rather than waiting for them to bake this capability into their platform I have released an app to address the problem. Here is a concrete example of what it solves:

In Lisbon where I live we are lucky to be home to the world’s largest digital nomad Meetup with nearly 9k members. But with Lisbon restricting group gatherings to no more than 10 people it means each event now has 90% of its would-be attendees on the waitlist and precluded from participating. The group organizers to their credit have split the Meetup in two running parallel concurrent gatherings to try and serve more demand but this practice means maintaining two separate rosters, having prospective participants sign up & maintain status in two places and still 80% of the demand remains unserved… we can do better.

To address this issue I knocked out a nocode app during a hackathon last weekend which enables anyone to “shard” a Meetup across multiple locations to make it so waitlisted attendees have the option to meet in small groups at various overflow locations while respecting local restrictions on gatherings. The video below shows a demo of both the backend administrator mobile app as well as the front-end attendee web app:

Highlights of what it currently does:
– Enables anyone to supply the URL of a Meetup event and have the system ingest the details and provide an interface to add overflow locations
– The admin can specify max headcount dictated by local restrictions and assign overflow venues to the event.
– Waitlisted attendees can see the available overflow locations and RSVP to a venue of their choice.
– Admins can easily re-use venues across events and quickly assign more overflow venues to meet demand as it scales.

This is my Trello board of proposed future enhancements including ideas around auto-scaling, having the system “shuffle” attendees’ locations to maximize new connections based on past attendance, real-time notifications, maps & chat support, social media integration and more.

Reid Hoffman of LinkedIn said “If you are not embarrassed by the first version of your product, you’ve launched too late.” To that end I’ve unveiled this app with the bare minimum feature set and deferred all the feature enhancements. Take it for a spin at make.smaller.events and use it to distribute a Meetup in your locale so we can help bring people together while respecting the local restrictions for Covid safety. If you want it to do something it doesn’t currently do, check the Trello board and leave me a comment below. cheers

What Bob Ross can teach us about overcoming blank canvas syndrome in software development

“Blank canvas syndrome” is a paralysis you face as a creative when you’re starting a new project. If you’ve ever found yourself staring hopelessly at a blank computer screen at a loss for where to begin then you know how debilitating blank canvas syndrome can be. Fortunately we have a master artisan we can model who taught us through his 30-season TV show how to beat this paralysis.

What would Bob do?

I grew up watching a TV show called “The Joy of Painting with Bob Ross.” Day after mesmerizing day this soft-spoken dude with the huge afro would convert a blank canvas into a work of art over the course of a 30min show. It was hypnotizing to watch him repeatedly actuate his vision out of nothing and step you through his thought process the whole way with his signature gentle, supportive style.

In this post I’m going to do my best to channel Bob Ross and spell out the advice I believe he would give us if he were alive today coaching us on how to build an application from scratch via nocode. The key, as with most layered creative challenges, is to peel it back one layer at a time and use reverse goal planning to start with the end in mind and work in layers moving from your big daunting idea to a fully-functional app. So let’s begin, friend.

Step 1: Crystalize your vision with an aspirational press release

Mental gridlock can originate from a handful of causes but almost always traces back to an ill-defined vision. One of the best exercises for getting crystal clarity on your vision up front is a technique I synthesized from two sources: an Innovation Game called “Remember the Future” and how Amazon does its product development via its “working backwards” methodology.

The gist of the technique is to imagine forward to some future point in time at which you’ve released your shiny new application and are publishing a celebratory press release that touts the benefits to your user. The process of writing that future press release accomplishes a few things, namely:

  1. It gets you thinking in terms of users and benefits and how to message the value proposition to your target audience. If you struggle with this exercise will reveal exactly where the holes are currently in your understanding of the landscape, market, product, etc.
  2. It yields an artifact that will be useful to you later as a north star by which you can make product decisions and ensure a team is all operating on the same page. It’s essentially a roll-up of a bunch of user stories into a concise high-level document which consequently….
  3. Allows you to deconstruct this vision in the next step to yield your constituent user stories.

In terms of the mechanism of how this works, the theory is that by projecting forward and remembering hypothetically backwards of what must have occurred up to that point to make the product possible you use different set of neural circuitry vs. trying to speculate forward from today. I admittedly don’t understand the psychological mechanism behind why this subtly different approach actually works but I can vouch anecdotally that it does work.

Bob Ross Equivalent Advice (BREA): Prep the canvas and get clear on your idea.

Homework: Write your aspirational press release for your proposed application. Bonus if you post it somewhere publicly and use it as a commitment instrument. If you need inspiration read the linked Quora article above. Here is mine for v2 of the Charity Makeover platform.

Step 2: Capture conceptual requirements of the MVP via User Stories

The next step once you have your aspirational press release is to deconstruct that document into user stories that capture the essential requirements of your minimum viable product (MVP).

User stories allow you to express functional requirements while remaining at a conceptual level (ie. not worrying about user experience – UX) and thinking in terms of stakeholders, goals and acceptance criteria. If you’re new to user stories I highly recommend this half-day course on Udemy for getting up to speed on how to use them effectively.

A way to get started here if you’re struggling is to take each of the main benefits you wrote about in your aspirational press release and think about the discreet blocks of functionality that would need to exist for each in order to enable it. You want to restrict your initial user stories to the bare minimum set of functionality necessary to deliver your MVP. Resist the temptation to go overboard in documenting every conceivable function your app might need to perform and keep it constrained to only those stories which directly support the benefits you enumerated in your press release.

You can use any tool to capture these. I’m a fan of Trello as it’s a free tool and allows you to put the user story in the title of each Trello card, any supporting explanation in the description and your acceptance criteria as a checklist on the card. I use a simple 4-column layout of: backlog, MVP, in progress, and completed.

Further explanation of user stories is beyond the scope of this post. The Udemy course referenced above is a fantastic resource for quickly learning the 80/20 essence of how to craft effective user stories.

BREA: Layer in the background and add some fluffy clouds.

Homework: Create a free Trello account and load it up with the user stories that represent the bare minimum functionality of your MVP. Go to sleep and review it the next day. Does it capture all the key functionality? If not add new stories until you cover all the major bases. Is there anything that’s overkill feature-wise for the MVP? If so, move those story cards to the backlog column. Here are my user stories for the v2 Charity Makeover build.

Step 3: Create a low-fidelity wireframe

Once you have your user stories you’re ready to move from the purely conceptual expression of the app into a rough visual sketch of the user experience (UX). The key here is to stay decidedly low-fidelity and not get derailed committing precision error by moving too prematurely to a hi-fi prototype. This is the intermediary step that is most tempting to skip in favor of jumping directly to building the clickable hi-fi mockup. But that’s a mistake that will lead to unnecessary angst.

There are a number of applications like Balsamiq Mockups for doing this part on the computer but I’ve found what works best is to ditch tech, stand in front of a white board and just start sketching screens.

Draw empty containers that mimic the proportions of the target screen resolution of your app (if you’re doing a mobile app, divide the whiteboard into a set of 8 or so rectangles that are roughly the same proportions of a mobile phone screen). Next you’ll work through each of the user stories in your Trello board and sketch out the screens necessary to deliver the functionality that fulfills the acceptance criteria of that story. You’ll find inevitably that some user stories share common screens. The goal is to get complete coverage so that you wind up with the full set of screens that facilitate all stories.

When your finished you’ll have a set of screens that constitute v1 of your application. Woohoo! That should feel good. You’re looking at the bare minimum set of UX you will need to create in order to deliver your app.

BREA: Complete all the major background scene elements with your majestic mountains.

Homework: Sketch out the low-fi wireframe for your application. If you don’t have a whiteboard, do this on a piece of paper (I find a whiteboard for whatever reason yields better flow than sketching on paper for this stage). Don’t erase anything. If you don’t have enough white board real estate to capture it all, move to the next step before you erase any screens. Here are my sketches for the v2 Charity Makeover build.

Step 4: Make a clickable mockup from your wireframe and get user feedback

Hold onto your butt. We’re going to make a quantum leap with a few minutes of work by converting your static whiteboard sketches into an interactive, clickable prototype of your application that you can share online and use to solicit user feedback. And yes, I’m serious this will take you less time than it takes Bob to paint a happy little tree.

Here’s what you do:

  1. Signup for Marvel App and download their iOS or Android mobile app.
  2. Take photos of each panel representing a screen of your application. Frame the photo so the edges are perfectly aligned with the container of the screen.
  3. Follow the prompts in the application to create a new app and add the photos you just took as the screens ol your application.
  4. Draw hotspots on each interactive element (buttons, lists, anything clickable) and link it to the target screen.
  5. Publish the app and copy the link.

You should now have a link that you can share like this one that yields a clickable low-fi prototype you can share with anyone. Testers can leave feedback inline while using the application with the comment feature and give you context-specific input about the UX for each screen.

BREA: Layer in the midground elements and add some happy little trees.

Homework: Use the free Marvel App to convert your whiteboard sketches into a clickable prototype and solicit feedback from at least five prospective users of the application. Now go through each user story Trello card. Can you check off the acceptance criteria in each? Are there any holes where the current prototype fails test coverage? Do not advance to the next step until you have input from at least five people who would be your prospective users and until you can in good conscience check off every single acceptance criteria item. This is the time to validate whether you’re truly building the right thing. It’s easiest to make changes before you move further so take advantage of this time to get the functionality right.

Step 5: Make a high-fidelity clickable mockup

Ok so you’ve validated that there is A) demand for what you’re building B) it’s got the right set of essential functionality and C) the UX makes sense to prospective users. If you failed A, B or C now is the time to make changes. Go back and redo step 4. Bob and I will wait 😉

Assuming there are no obvious structural changes required it’s time to move to a high-fidelity mockup. Depending on what tool you’re using there are different ways of doing this. Figma is great especially if you’ll be working with a team but is likely is overkill if you’re the one doing the implementation. Sketch & Invision are a good combo and good value. If you happen to be planning to implement in a nocode tool like Adalo or AppGyver you can make the clickable hi-fi prototype in the tool itself and just forget about the data model for now and make the UI elements link to their respective target screens. Hat tip to this guy in the Adalo forums for pointing out this time-saving, brilliant technique. Bob Ross would throw some yellow ochre on the canvas and paint him a happy gold star for this trick.

Whatever tool you use, the goal at this stage is to make a clickable prototype that will be as close to a pixel-perfect replica of the final app that you can use for soliciting another round of feedback prior to investing in the final stage of brick-laying. Once you begin work on creating the data model and wiring up screens and design elements it gets significantly harder to make changes. Changes will be inevitable over time but the goal is to get it as right as we can out of the gate to minimize having to redo plumbing work once we’re past mockups and into building the actual guts of the app.

BREA: Layer in the foreground elements.

Homework: Make the clickable hi-fi prototype in whatever tool best suits your situation and gather one final round of user feedback prior to going to implementation. This is your last chance to make any substantive structural changes prior to incurring the inertia of design decisions which are harder to rework.

Step 6: Wire up the database & UI elements and implement the app

If you used Adalo to build your clickable hi-fi prototype this last step is purely a matter of wiring up the database and functionality of each UI element so that the app works. If you made your clickable prototype in a separate prototyping tool like Figma or Invision, there may be a streamlined way to port your prototype into whatever nocode tool you’re using to implement. Bubble for instance has a Figma -> Bubble import feature currently in beta that will bring over your prototype and get you 85% of the way there in building the app in Bubble.

Regardless of how good a job you did soliciting user feedback, there will always be new requirements and changes that come via seeing things from a new vantage point but the more robust feedback you solicit in the prototype stages, the more likely you are to nail the core feature set out of the gate.

The other thing you’ll want to do at this point is to enable whatever you can for tracking how users are interacting with the application. Adalo has MixPanel integration baked in so it’s very simple to just create a MixPanel project and add your token to begin getting granular event data logged from the users who are using the app. Their cohort analysis and funnel analysis tools give you a wealth of insight on where the bottlenecks are and let you see the effect of changes you make over time on your user engagement and retention. Adalo also now has native analytics built into the platform which is nice because there’s no work required to leverage that now, but their analytics lack the sophistication of analysis that’s possible via something like MixPanel.

BREA: Add in all the shadows, highlights and detail.

Homework: It’s time to take your user-validated hi-fi prototype and turn it into a functional application. You should have a good level of confidence at this point that you’re building something your users will want and that should give you the motivational fuel to power through what is likely the most technically complex phase of this process. The good news is if you stall out at this point, there are plenty of developers via platforms like Upwork who you can bring in to complete the implementation. Having a clickable hi-fi prototype makes it much easier to direct a developer than trying to convey the end result you’re aiming for via some more nebulous means. If the app is so ambitious in scope that it makes sense to raise money to fund the development, you’ll have a way easier time approaching investors or running a crowdfunding campaign with a hi-fi prototype than without one.

Conclusion

We’ve covered a lot of ground having navigated through each of the six incremental stages of actuating your vision into a functional application. By breaking this process down into these gated stages we’ve both de-risked the chances of building the wrong thing as well as reduced our likelihood of having to make unnecessary changes later in the process. This also has allowed us to parallelize the marketing aspect as we can create full clickable product demos and begin to spin up the marketing efforts for demand generation without having to wait until development is complete. Lastly, by taking these intermediate steps and reverse goal planning from an aspirational press release, we’ve backed our way into our grand vision with baby steps between each layer enabling us to beat the dreaded blank canvas syndrome at each step of the way.

I hope you find these prescriptive steps useful in actuating whatever your vision is. If you need help with this stuff, Grid7 is launching an exciting program in which we partner with select early-stage founders to help execute your MVP. Sign up below for consideration in that program.

Run your own Adalo-based crowdfunding app to fund your next project


Crowdfunding platforms like Kickstarter and Indiegogo are amazing in how they enable makers to rally early support, de-risk product ideas and fund the development of products which otherwise might not have been possible. Crowdfunding forces you to nail your sales & marketing early and win early supporters thereby helping you avoid the all-too-common trap of building something nobody wants nor needs. My buddy Gabe is running an Indiegogo now which has already raised over $30k for his graphic novel project – Amazing!! For all their benefits though these platforms have some downsides, namely:

  • Fees: Both Kickstarter and Indiegogo take 5% of the funds raised on top of 3-5% for payment processing for a total of 8-10%.
  • Not geared for software projects: These programs seem to be largely aimed towards physical consumer products- gadgets, art projects and such. This means unfortunately that…
  • Distribution benefit is nil: if you’re seeking to fund a software project you’ll likely be using the platform for its crowdfunding functionality but end up being responsible to bring your own audience which means you’re not getting additional reach or exposure of their user base.
  • You have to message backers via their system: which is less ideal than building your own email list.
  • Funding model: In some cases it’s an all-or-nothing funding model. For example with Kickstarter if you set a $10k goal for your campaign and fail to raise that before the completion date, you get none of those funds. That force you to set conservative funding targets but can result in a bunch of work with zero return if you set the goal post too high (Indiegogo is different in that it allows you to keep whatever you raise).
  • You’re subject to their rules: This may not be a huge deal but you’re at the mercy of their guidelines and their approval.

I explored building a Kickstarter or Indiegogo campaign as a way to de-risk and fund the development of the Charity Makeover v2 platform but couldn’t bring myself to pull the trigger for the above reasons. But after researching these platforms I had an epiphany: use nocode itself to build a personal Kickstarter I control and run my campaign via that.

One day later I had built this app.

Design-wise it’s not going to win any awards but it’s a fully-functional crowdfunding system complete with email capture, Stripe integration, progress meter, CRM, donor wall and viral social media share widget on the thank you page. With this app you pay only Stripe fees, get all the emails AND they feed directly into any CRM that has a Zapier integration so you have all the control of being able to kick off whatever drip emails you need to indoctrinate your backers.

Adalo just announced a “cloneable apps” feature which means I can now share this app with you. You can clone it to your own account here.

This gives you an option wherein you have the main benefits of those 3rd party crowdfunding platforms while keeping control of your own destiny and running it under your own Adalo and Stripe accounts. We’ve used it already to raise $1500 towards our $10k goal with this project for the new platform rewrite.

If you use this and derive benefit from it consider becoming one of the first 100 backers for the Charity Makeover launch sponsorship program at whatever level you believe represents the value you received.

How to add a Facebook share widget to your Adalo application


Social media sharing widgets when placed strategically at various points in your application allow you to leverage your happy users as a free marketing channel for getting extra distribution. In this tutorial I’ll show you how you can embed a Facebook share widget within your Adalo application using the webview component.

This tutorial was requested as additional clarification to a brief response I made in the Adalo forums here. It’s also a feature request that has been upvoted 22 times as of this writing.

This video shows the full process start to finish:

Basically the steps are these:

  • Use the sample code from this page of documentation on the Facebook Developer portal and modify the values so they represent the page you’re intending to make sharable.
  • Put that code somewhere where it can be served publicly (either on a webserver you control or in a Amazon S3 bucket set to public).
  • Lastly, create a webview component wherever you want the share button to appear and have it call that .html file.

If you needed to make the widget reusable across multiple pages on your site you could make it a .php file instead of a .html file. This would be useful if you wanted to make it so each user of your app could share a unique tracking link or their own user profile link. The way you would do that would be to echo the REQUEST_URI variable or if you wanted to manually specify those params when calling the code via the webview component you could pass them in via the query string and have the script populate them that way.

This same technique can be used to embed sharing widgets for the other platforms. You can find docs for Twitter and LinkedIn respectively. If you’re intending to add a bunch of these buttons the easiest thing would be to create a ShareThis account, register all the services there and then just reference that in the webview component.

Let me know if you have any questions. And as always if you want a monthly summary of useful tips like these in your email inbox be sure to opt-in for my “Inbox Insights” below. cheers

3 ways to send email from Adalo using Gmail, MixPanel & ActiveCampaign

Adalo makes it easy to send in-app notifications to users but when it comes to sending emails it’s conspicuously deficient. There’s currently no way to natively send an email based on activity within the app.

I’m going to show you today three different approaches for solving this problem, all of which rely upon external systems for sending the email. We’ll look at the pro’s and con’s of each approach and then do a video tutorial that shows how to set it up in each scenario. When we’re finished you’ll have all the information necessary to pick the most appropriate method for circumstances and solve email delivery from within your Adalo app.

The pro’s and con’s of each method

While Adalo doesn’t natively have the ability to send email it does enable different approaches via middleware and its integration with MixPanel. Given the use of middleware there are infinite ways to connect to external systems but I’m going to show you three approaches using Gmail, MixPanel and ActiveCampaign for sending email. Let’s explore each one:

Gmail

Using middleware like Zapier or Integromat it’s possible to invoke an external system like Gmail to send the message.
When to use this approach: If you’re just seeking to send a single email immediately to a user this is likely your best choice.
PROS: It’s free, it’s fast and it will originate from your Gmail account so it should have the same deliverability as a message you would send from Gmail.
CONS: It’s a “dumb” send in that there’s no sophistication of wait timers or conditionals and there’s no unsubscribe link so if your users decide to hit the spam button it’s going to diminish the deliverability of your main email address. You can address this by using an alias with a different sending domain but this is something you should be aware of.
How to set it up:

MixPanel

When to use this approach: This is a good method to use if you’re already making use of MixPanel for your app’s analytics and therefore have key events for your app defined in MixPanel.
PROS: Free up to 1000 tracked users. Their pricing here. MixPanel is a powerful tool for event-based tracking and gives you the ability to analyze funnels, do cohort analysis for retention and slice & dice on any property you’re tracking. Their customer journeys and messaging features allow you to send emails that are triggered when conditions you specify are met. You can build complex sequences that send your users relevant communications based off what they have or haven’t done in your app.
CONS: The customer journeys feature is still in beta and has some quirks to it. The way Adalo passes event data to MixPanel is unintuitive and means you need to write custom formulas to interpret the raw events and do anything useful with them. It’s a bit like sipping through a straw in that you only have access to event data tracked in MixPanel and therefore can’t use data from Adalo collections in your emails.
How to set it up:

ActiveCampaign

When to use this approach: Use if you’re seeking to have an external CRM outside of Adalo tracking your users and automating communications.
PROS: ActiveCampaign is a full CRM with a powerful visual editor for building automations and workflows. Contacts can store data in tags or custom fields and this info can be used to trigger automated messaging, SMS, site messages and anything you can do with a webhook post request.
CONS: Not free. ActiveCampaign pricing here. You end up duplicating contact data outside of Adalo which can lead to data inconsistency and the overhead associated with keeping data in sync.
How to set it up:

Other considerations

We could have used the Custom Actions feature in Adalo to trigger the middleware via web hook and there can be times when that’s desirable. I chose decidedly not to use that approach in this scenario because it would yield a more brittle solution given that we sometimes manually add event attendees via the backend Adalo interface and keying off of a button press in the app would mean the emails would not send in that scenario. In general it’s a good idea to craft your solution in a way that is most resilient in the face of variance and by keying things off the Zapier “new record” trigger it becomes irrelevant how that record got there (whether it came via self-signup in the app or manually via our intervention in the admin).

I didn’t show the Sendgrid approach for sending email because it requires a $100/mo subscription to their PRO plan in order to make it work with Zapier. You could use custom actions in Adalo to call their API directly and do either a single send or initiate a full marketing campaign sequence. This would be yet a fourth way to send email from Adalo but I didn’t go down that rabbit hole for this post.

Conclusion

You now have three different approaches for sending email from within Adalo and can choose the most appropriate method given your circumstances. If you have any questions on the techniques shown above please leave a comment below. If you’d like to receive an occasional email from me teaching methods like these sign up for my email list below. cheers

A 5-step universal framework for better outsourcing

You’re handling a bunch of tasks that you know you should be offloading to a virtual assistant. This daily operational muck will monopolize your time and keep you mired in place until you figure out how to extricate yourself. Welcome to operational quicksand.

Photo credit Wikimedia Commons

You may already know you need to delegate and may have even already attempted to do so through outsourcing but had a bad experience. Or maybe it’s something you’ve put off attempting because you dwell on the number of ways it could go wrong:

  • What if you get a bad apple worker and they screw things up?
  • What if you find a great worker but it turns out that training and supporting that person takes up as much time as executing the tasks yourself?
  • What if you find that unicorn perfect assistant, you’re able to efficiently train the person but then he/she leaves after you’ve invested all that time and you then have to start from scratch?

These are all valid concerns.

The good news is there’s a repeatable playbook you can use to reliably build up a bullpen of low-cost, high-skill outsourced talent that will permanently free you from the operational muck. Forever. And it’s a method you can use regardless of what industry you’re in or what role you’re hiring for.

Before we get there though, let’s first look at how the traditional approach to outsourcing typically goes wrong.

How outsourcing typically fails

The problem with the traditional approach to outsourcing is it’s not a system. This is one of my favorite quotes:

“If you can’t describe what you are doing as a process, you don’t know what you’re doing.” – Edwards Deming.

If you’ve tried and failed with outsourcing before chances are your experience went something roughly like this:

  • You had a specific job you needed done and went to a service like Fiverr or Upwork.
  • You posted a job and got a bajillion applications.
  • Applicant quality was all over the map but you settled on the one that seemingly sounded like the best fit from the heresay of his/her cover letter and skill set.
  • You awarded that person the job.
  • And you got back a result that missed the mark, possibly in a huge way. Maybe communication was difficult or they went dark indefinitely or they just didn’t truly understand the goal of the project and fundamentally botched the outcome.
  • You closed your laptop lid in disgust and wrote off outsourcing as a waste of time and went back to doing all the muck work yourself.

If your experience approximated this trajectory you’re not alone. Sadly this dysfunctional scenario plays out daily on these outsourcing sites despite all the ratings and reviews and technological checks & balances that exist. You know why? Because no amount of technology will solve a problem that’s happening on a different axis. The fundamental failing here comes down to this:

You bet on hope as a strategy instead of betting on a system.

Hope is not a reliable strategy. A system is.

My hero Jermaine Griggs has a brilliant saying: “A SYSTEM is Something You Stick To Emphatically and Methodically.”

Note nowhere does that definition say anything about technology because a system does not equal technology. It can incorporate technology but a system is just the deterministic playbook you execute that ensures you have a process to get you reliably closer to your goal.

A system makes it so you don’t have to bet on hope anymore.

I’m going to now show you the system I use for recruiting, vetting and working with outsourced labor. This methodology works regardless whether you’re outsourcing website development, podcast production, graphic design, lead generation, or baking cakes. It’s axiomatic and predicated on three different patterns that I call the “horse race,” “airlocks” and “fail canary” patterns.

How it works

The gist of this method is to remove the guesswork from recruiting outsourced labor and make it a data-driven game. You will be setting up essentially a mini “horse race” with multiple candidates that will ultimately reveal who your winning horse is empirically. Note: when I refer to “horses” in this context I’m purely using this tangible analogy to drive home the crux of the technique and not seeking to dehumanize outsourced labor nor imply they’re like horses.

Photo credit Pixabay

The “Horse Race” is the controlled experiment which gives you apples-to-apples comparison of potential candidates in a real-world scenario.

“Airlocks” is the method by which you partition and parallelize the work amongst the horses in the race.

And “Fail Canary” is the technique you use to screen out candidates up front who can’t follow instructions.

So without further ado, here are the five steps and how these patterns work together:

  1. PREPARE: Develop a challenge that will test the primary skills you’re hiring for. If you’re hiring a full-stack web developer to build custom functionality for your WordPress site you could enumerate a set of features, sketch up a few screens and talk through it in a video. If you’re hiring a graphic designer to spruce up your site you can craft a redesign project with the goals and constraints defining desired styles, exemplary sites, etc. The point is to create a project that captures a good cross section of the work they will be doing with you over time and that won’t be solvable in two hours but can reveal meaningful progress in that time.
  2. RECRUIT: Create an account on a service like Upwork and post the job requirements. I’m a huge fan of using Trello and filming a Loom video walkthrough for this part (here are a few examples from a couple past mini projects). This is where I typically include a “Fail Canary” to screen out candidates who are incapable of following instructions. In the video up front I tell them I’m running a screening test to hire 1-2 contract workers who will be on retainer long-term with me and will be paid their full hourly rate for their participation in this preliminary screening test. I tell them they need to watch the full video explanation of the project and follow all instructions in order to qualify. Then at the end of the video when I’m done explaining the project requirements I ask them to parrot back their understanding of the project, how they propose to solve it and ask for an extra random bit of information like “what is your favorite food?” Failure to provide an answer to this “fail canary” question disqualifies them from consideration. While that might sound harsh this is your first filtration mechanism for screening down your pool of applicants to those who can follow instructions.

    You can further screen using proxy requirements. Here’s what I mean by that: you may be hiring for a PHP dev role but what are the adjacent skill sets which identify a truly progressive dev who is on top of his/her game, well-rounded and focused on continuous learning? For this scenario I’ll further constrain my pool of applicants by including a tangential skill set like “Angular JS” “Node JS” or “Laravel” because finding the intersection of those two skill sets tells me this is a person who is at the forefront of his/her craft pushing the boundaries and learning complimentary frameworks that separate him/her from the pack.

    Your job now is to canvas the available pool of potential hires and invite the most desirable candidates to fill your recruiting funnel. Your only goal at this stage is to get job applications from qualified candidates who demonstrate they understand the job and at least seem competent in their proposed approach for solving the challenge. Systems like Upwork enable you to search available candidates based on defined skills and quickly invite them to your position. You can copy/paste your invite or personalize it depending on how your funnel for qualified applicants is looking. If your invites are getting declined more often then not, consider taking a few extra seconds to personalize them.

  3. SCREEN: You should now have a pool of qualified candidates and your job from here is to winnow down to the 4-5 ones you think are best. Hopefully they’ve all submitted a cover letter fulfilling your request to summarize their understanding of the project, their proposed approach for addressing the challenges and their fail canary response. And ideally they’ve sent you a video instead of a cover letter. A video can reveal a lot about communication and personality style. You should have at least 10 qualified applicants at this stage. If not, keep recruiting until you do.

    Once you have your 10 applicants evaluate them on the info you have at hand, namely their job application and their past track record of job completion and comments from previous clients. You’re now going to invite the most desirable horses to your horse race and equate the track on time or money so it’s a level, objective playing field. You want to award this project to 4-5 candidates and ask them to complete a fixed chunk of work towards solving it. I like to hire people for 2hrs at their full hourly rate. Alternatively you could pay each for $50 worth of work and let them work however long that gets you as a function of their hourly rate. The key here is to have a common fixed-length racetrack for the horse race so there can be a clear winner. I find it works best to fix on an allotted time block and just pay the different hourly rates. You will be admittedly paying 5x for the same piece of work in this mini-project but you will be gaining an invaluable apples-to-apples comparison of real-world work experience in the process that will help you definitively pick your winning horse tomorrow and avoid weeks of working with the wrong candidate.

    Once you’ve awarded the jobs to your applicants it’s horse race time! Aaaaaand they’re off….

  4. EVALUATE: Depending on the complexity of the role, the job and what you’re testing for you may want to invite each candidate to use whatever project management infrastructure you usually use. The more you can test the candidates in a real-world scenario of how they’ll actually be working with you, the better. I like to invite my applicants as single-channel guests in a Slack channel setup for the project. Encourage questions if anything is unclear. Gauge their performance on the dimensions you care about: how responsive are they? What is the quality of their communication? Are they big-picture-focused and goal oriented or following a spec with blinders on with no eye towards the end goal? If you’re testing collaboration, are they cooperating with other candidates in Slack? How is the quality of the final work product? Did they come back with proposed improvements that indicated they thought deeply about the problem and found a better solution? If so, congrats you’ve found a gem.
  5. AWARD: So who was your winner? Typically the performance graph you see looks something like this:

    Photo credit Pixabay


    You’ll have one that did pretty well, two who gave a very lukewarm performance, one who was running perpendicular to the race track and one who nailed it. Double-down on that lead horse. If you lucked out and had two who nailed it this is how you build a bull-pen of fallbacks and/or scale to parallelize work and have multiple workers going simultaneously. Don’t burn bridges at this point. Respectfully report the results to everyone who won’t be hired back and congratulate your lead horse on crushing it. Open a standing contract with that person and at this point you almost certainly want them as a single-channel Slack guest and in whatever other project management systems you use. I recommend paying slightly over their full hourly rate so that if they get busy they prioritize your jobs. Paying $1/hr extra is peanuts to you but could be a 5% pay increase for them. Also, take time to get to know your contractors, their family situation, what they like to do, when their holidays are. I guarantee 90% of his/her clients don’t do that so this is yet another opportunity to strengthen the relationship at no additional cost and this rapport can prove invaluable later when inevitable misunderstandings arise.

The role of “Airlocks”

We didn’t talk about the “Airlocks” pattern and what that is so let me briefly explain. Airlocks is a term I use for compartmentalizing and ensuring an air gap to your production system so that you can have a safe sandbox for untrusted labor to work without exposing you to security risk.

Photo credit Wallpaperflare

This is situation-specific to your circumstances vs. a blanket one-size-fits-all recommendation but let me give you some examples:

  • If you’re hiring for WordPress development, clone the site and create a separate site sandbox for each developer.
  • If you’re hiring a VA to produce your podcast, create a dummy account for each worker in whatever system you’re using (ie. Anchor.fm).
  • If you’re hiring a graphic designer, give them read-only access to the media assets in Gdrive or Dropbox and give them a private write-enabled sub-folder just for them to save their work product.

As you identify winning horses over time you will obviously need to open the kimono to various systems and grant access. I’ve become a huge fan of the open source team password sharing system Passbolt. There’s a Digital Ocean droplet for it and for $6/mo you can get a really elegant system for granting and revoking access to your key systems with tiered trust levels. Very useful. Obviously change your passwords when you let people go just as you would with a traditional full-time employee.

Antifragility

There’s one last thing we need to talk about: what happens if/when you lose your lead horse? Turnover is a reality with any form of employment and people move on for a variety of reasons. One of the beautiful features of this approach to hiring is it’s particularly resilient in the face of turnover- I would even argue it’s anti-fragile in that the system actually becomes stronger in the face of turnover.

This is my actual documentation for my VA Marko from Macedonia who handles the production of The Nomad Podcast. Marko is amazing and for $50/episode he takes 6hrs of production work off my plate. We have a great relationship but if Marko won the lottery tomorrow I’m guessing he would move on and cease producing my podcast. What then?

The elegance of this approach is that I still have all the scaffolding that I created to recruit and train Marko, the original job posting with the screening challenge, the documentation above and all the Slack history of answering his questions. If I had to find another Marko at this point, the playbook is already written and just needs to be re-run. That’s leverage, that’s efficiency and ultimately that’s peace of mind.

Conclusion

We’ve covered a lot of ground here: the why for outsourcing, the ways it goes off the rails, a bulletproof system for reliably getting and working with the best talent. Once you have the outsourcing superpower you begin to win back your time, escape the operational quick sand and conquer increasingly difficult challenges with less stress because now not only do you have a solution but rather a system that solves. Yay. Proper use of outsourcing is a massive strategic advantage for you and having a bulletproof method for consistently finding the best talent faster than others puts you at an advantage amongst this advantaged subset. Remember if you can’t describe what you’re doing as a process…

If you enjoyed this post join my email list for exclusive tutorials on how to increase your leverage. Happy outsourcing.